From a8d39cb552d91dec9e3b057b623051cac6ab6a75 Mon Sep 17 00:00:00 2001
From: Esteban Gehring <esteban.gehring@bithost.ch>
Date: Fri, 8 Sep 2023 09:22:05 +0200
Subject: [PATCH] #435: fix background issue with angular material 16 with
 toggle-all button, prepare release 7.0.4 (#437)

---
 CHANGELOG.md                                  | 10 +++
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 .../mat-select-search.component.html          | 76 ++++++++++---------
 .../mat-select-search.component.scss          |  5 +-
 .../ngx-mat-select-search.module.ts           |  2 +-
 6 files changed, 56 insertions(+), 43 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1da5e22d..c69a84ad 100644
--- 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
index 947d5139..ab4c867c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ngx-mat-select-search",
-  "version": "7.0.3",
+  "version": "7.0.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ngx-mat-select-search",
-      "version": "7.0.3",
+      "version": "7.0.4",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.4.0"
diff --git a/package.json b/package.json
index c37da17e..5fb9895e 100644
--- 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
index 82f6727a..6a797f76 100755
--- 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
index d168b1ff..f2473475 100755
--- 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
index 216b1d2c..bd286f31 100755
--- 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 };