#435: fix background issue with angular material 16 with toggle-all b…

…utton, prepare release 7.0.4 (#437)
bithost-gmbh · Sep 8, 2023 · a8d39cb · a8d39cb
1 parent 2c4d2e7
commit a8d39cb
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 43 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## 7.0.4
+* Fix background issue with `@angular/material`: `^16.2.0` with toggle-all button
+  [#435](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/435)
+
+  Thanks to @ioanbin
+* Fix issue with setting the first active item 
+  [#436](https://github.com/bithost-gmbh/ngx-mat-select-search/pull/436)
+
+  Thanks to @Danevandy99
+
 ## 7.0.3
 * Fix background issue with `@angular/material`: `^16.2.0`
   [#431](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/431)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ngx-mat-select-search",
   "description": "Angular component providing an input field for searching / filtering MatSelect options of the Angular Material library.",
-  "version": "7.0.3",
+  "version": "7.0.4",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

diff --git a/src/app/mat-select-search/mat-select-search.component.html b/src/app/mat-select-search/mat-select-search.component.html
@@ -13,46 +13,48 @@
       class="mat-select-search-inner mat-typography mat-datepicker-content mat-tab-header"
       [ngClass]="{'mat-select-search-inner-multiple': matSelect.multiple, 'mat-select-search-inner-toggle-all': _isToggleAllCheckboxVisible() }">
 
-  <mat-checkbox *ngIf="_isToggleAllCheckboxVisible()"
-                [color]="matFormField?.color"
-                class="mat-select-search-toggle-all-checkbox"
-                [checked]="toggleAllCheckboxChecked"
-                [indeterminate]="toggleAllCheckboxIndeterminate"
-                [matTooltip]="toggleAllCheckboxTooltipMessage"
-                matTooltipClass="ngx-mat-select-search-toggle-all-tooltip"
-                [matTooltipPosition]="toggleAllCheckboxTooltipPosition"
-                (change)="_emitSelectAllBooleanToParent($event.checked)"
-  ></mat-checkbox>
+  <div class="mat-select-search-inner-row">
+    <mat-checkbox *ngIf="_isToggleAllCheckboxVisible()"
+                  [color]="matFormField?.color"
+                  class="mat-select-search-toggle-all-checkbox"
+                  [checked]="toggleAllCheckboxChecked"
+                  [indeterminate]="toggleAllCheckboxIndeterminate"
+                  [matTooltip]="toggleAllCheckboxTooltipMessage"
+                  matTooltipClass="ngx-mat-select-search-toggle-all-tooltip"
+                  [matTooltipPosition]="toggleAllCheckboxTooltipPosition"
+                  (change)="_emitSelectAllBooleanToParent($event.checked)"
+    ></mat-checkbox>
 
-  <input class="mat-select-search-input"
-         autocomplete="off"
-         [type]="type"
-         [formControl]="_formControl"
-         #searchSelectInput
-         (keydown)="_handleKeydown($event)"
-         (keyup)="_handleKeyup($event)"
-         (blur)="onBlur()"
-         [placeholder]="placeholderLabel"
-         [attr.aria-label]="ariaLabel"
-  />
-  <mat-spinner *ngIf="searching"
-          class="mat-select-search-spinner"
-          diameter="16"></mat-spinner>
+    <input class="mat-select-search-input"
+           autocomplete="off"
+           [type]="type"
+           [formControl]="_formControl"
+           #searchSelectInput
+           (keydown)="_handleKeydown($event)"
+           (keyup)="_handleKeyup($event)"
+           (blur)="onBlur()"
+           [placeholder]="placeholderLabel"
+           [attr.aria-label]="ariaLabel"
+    />
+    <mat-spinner *ngIf="searching"
+            class="mat-select-search-spinner"
+            diameter="16"></mat-spinner>
 
-  <button *ngIf="!hideClearSearchButton && value && !searching"
-          mat-icon-button
-          aria-label="Clear"
-          (click)="_reset(true)"
-          class="mat-select-search-clear">
-    <ng-content *ngIf="clearIcon; else defaultIcon" select="[ngxMatSelectSearchClear]"></ng-content>
-    <ng-template #defaultIcon>
-      <mat-icon [svgIcon]="closeSvgIcon">
-        {{!closeSvgIcon ? closeIcon : null}}
-      </mat-icon>
-    </ng-template>
-  </button>
+    <button *ngIf="!hideClearSearchButton && value && !searching"
+            mat-icon-button
+            aria-label="Clear"
+            (click)="_reset(true)"
+            class="mat-select-search-clear">
+      <ng-content *ngIf="clearIcon; else defaultIcon" select="[ngxMatSelectSearchClear]"></ng-content>
+      <ng-template #defaultIcon>
+        <mat-icon [svgIcon]="closeSvgIcon">
+          {{!closeSvgIcon ? closeIcon : null}}
+        </mat-icon>
+      </ng-template>
+    </button>
 
-  <ng-content select=".mat-select-search-custom-header-content"></ng-content>
+    <ng-content select=".mat-select-search-custom-header-content"></ng-content>
+  </div>
 
   <mat-divider></mat-divider>
 </div>

diff --git a/src/app/mat-select-search/mat-select-search.component.scss b/src/app/mat-select-search/mat-select-search.component.scss
@@ -30,9 +30,10 @@ $mat-select-panel-padding: 8px;
     TODO: implement proper theming (https://github.com/bithost-gmbh/ngx-mat-select-search/issues/34)
   */
   box-shadow: none;
+  background-color: var(--mat-select-panel-background-color);
 
-  &.mat-select-search-inner-multiple {
-    &.mat-select-search-inner-toggle-all {
+  &.mat-select-search-inner-multiple.mat-select-search-inner-toggle-all {
+    .mat-select-search-inner-row {
       display: flex;
       align-items: center;
     }

diff --git a/src/app/mat-select-search/ngx-mat-select-search.module.ts b/src/app/mat-select-search/ngx-mat-select-search.module.ts
@@ -19,7 +19,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatSelectNoEntriesFoundDirective } from './mat-select-no-entries-found.directive';
 import { MatDividerModule } from '@angular/material/divider';
 
-export const MatSelectSearchVersion = '7.0.3';
+export const MatSelectSearchVersion = '7.0.4';
 export { MatSelectSearchClearDirective };
 export { MatSelectNoEntriesFoundDirective };