cmat 0.0.78 → 0.0.80

package/fesm2022/cmat-components-select-search.mjs

@@ -1,7 +1,8 @@
 import { ViewportRuler } from '@angular/cdk/scrolling';
 import { NgClass, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, EventEmitter, inject, ChangeDetectorRef, ElementRef, forwardRef, HostBinding, ContentChild, ViewChild, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { InjectionToken, Directive, EventEmitter, inject, DestroyRef, signal, ElementRef, forwardRef, HostBinding, ContentChild, ViewChild, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i5 from '@angular/forms';
 import { FormControl, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i7 from '@angular/material/button';
@@ -19,10 +20,9 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelect } from '@angular/material/select';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { BehaviorSubject, of, Subject, combineLatest } from 'rxjs';
-import { switchMap, map, startWith, delay, takeUntil, take, filter, tap } from 'rxjs/operators';
+import { of, combineLatest } from 'rxjs';
+import { switchMap, map, startWith, tap, delay, take, filter } from 'rxjs/operators';
 
-/** List of inputs of CmatSelectSearchComponent that can be configured with a global default. */
 const configurableDefaultOptions = [
     'ariaLabel',
     'clearSearchInput',
@@ -38,10 +38,10 @@ const configurableDefaultOptions = [
 const MAT_SELECTSEARCH_DEFAULT_OPTIONS = new InjectionToken('mat-selectsearch-default-options');
 
 class CmatSelectNoEntriesFoundDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatSelectNoEntriesFoundDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: CmatSelectNoEntriesFoundDirective, isStandalone: true, selector: "[cmatSelectNoEntriesFound]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatSelectNoEntriesFoundDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: CmatSelectNoEntriesFoundDirective, isStandalone: true, selector: "[cmatSelectNoEntriesFound]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatSelectNoEntriesFoundDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatSelectNoEntriesFoundDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatSelectNoEntriesFound]'
@@ -49,10 +49,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
         }] });
 
 class CmatSelectSearchClearDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatSelectSearchClearDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: CmatSelectSearchClearDirective, isStandalone: true, selector: "[cmatSelectSearchClear]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatSelectSearchClearDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: CmatSelectSearchClearDirective, isStandalone: true, selector: "[cmatSelectSearchClear]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatSelectSearchClearDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatSelectSearchClearDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatSelectSearchClear]'
@@ -62,7 +62,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
 const SELECT_PANEL_MAX_HEIGHT = 256;
 class CmatSelectSearchComponent {
     constructor() {
-        this.placeholderLabel = '查询';
+        this.placeholderLabel = '搜索';
         this.type = 'text';
         this.noEntriesFoundLabel = '无结果';
         this.showNoFoundLabel = true;
@@ -72,38 +72,34 @@ class CmatSelectSearchComponent {
         this.enableClearOnEscapePressed = false;
         this.preventHomeEndKeyPropagation = false;
         this.disableScrollToActiveOnOptionsChanged = false;
-        this.ariaLabel = '下拉查询';
-        /** Whether to show Select All Checkbox (for mat-select[multi=true]) */
+        this.ariaLabel = '下拉搜索';
         this.showToggleAllCheckbox = false;
-        /** select all checkbox checked state */
         this.toggleAllCheckboxChecked = false;
-        /** select all checkbox indeterminate state */
         this.toggleAllCheckboxIndeterminate = false;
         this.toggleAllCheckboxTooltipMessage = '';
         this.toggleAllCheckboxTooltipPosition = 'below';
         this.hideClearSearchButton = false;
         this.alwaysRestoreSelectedOptionsMulti = false;
-        /** Output emitter to send to parent component with the toggle all boolean */
         this.toggleAll = new EventEmitter();
         this.formControl = new FormControl('');
         this.matSelect = inject(MatSelect);
         this.matFormField = inject(MatFormField, { optional: true }) ?? null;
-        this._changeDetectorRef = inject(ChangeDetectorRef);
         this._viewportRuler = inject(ViewportRuler);
         this._matOption = inject(MatOption, { optional: true }) ?? null;
         this._defaultOptions = inject(MAT_SELECTSEARCH_DEFAULT_OPTIONS, { optional: true });
-        this._options$ = new BehaviorSubject(null);
-        this._optionsList$ = this._options$.pipe(switchMap(_options => _options ?
-            _options.changes.pipe(map(options => options.toArray()), startWith(_options.toArray())) : of(null)));
+        this._destroyRef = inject(DestroyRef);
+        this._options$ = signal(null, ...(ngDevMode ? [{ debugName: "_options$" }] : /* istanbul ignore next */ []));
+        this._optionsList$ = toObservable(this._options$).pipe(switchMap((_options) => _options ?
+            _options.changes.pipe(map((options) => options.toArray()), startWith(_options.toArray())) : of(null)));
         this._optionsLength$ = this._optionsList$.pipe(map(options => options ? options.length : 0));
-        this._onDestroy = new Subject();
-        /** whether to show the no entries found message */
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.showNoEntriesFound = signal(false, ...(ngDevMode ? [{ debugName: "showNoEntriesFound" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @typescript-eslint/member-ordering
         this.showNoEntriesFound$ = combineLatest([
             this.formControl.valueChanges,
             this._optionsLength$
         ]).pipe(map(([value, optionsLength]) => this.noEntriesFoundLabel && value
-            && optionsLength === this._getOptionsLengthOffset()));
+            && optionsLength === this._getOptionsLengthOffset()), tap(showNoEntriesFound => this.showNoEntriesFound.set(!!showNoEntriesFound)));
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onTouched = () => { };
         this._applyDefaultOptions(this._defaultOptions);
@@ -115,10 +111,10 @@ class CmatSelectSearchComponent {
         return this.formControl.value;
     }
     get _options() {
-        return this._options$.getValue();
+        return this._options$();
     }
     set _options(_options) {
-        this._options$.next(_options);
+        this._options$.set(_options);
     }
     ngOnInit() {
         const panelClass = 'cmat-select-search-panel';
@@ -145,7 +141,7 @@ class CmatSelectSearchComponent {
             console.error('<cmat-select-search> must be placed inside a <mat-option> element');
         }
         this.matSelect.openedChange
-            .pipe(delay(1), takeUntil(this._onDestroy))
+            .pipe(delay(1), takeUntilDestroyed(this._destroyRef))
             .subscribe((opened) => {
             if (opened) {
                 this.updateInputWidth();
@@ -161,10 +157,10 @@ class CmatSelectSearchComponent {
         });
         this.matSelect.openedChange
             .pipe(take(1))
-            .pipe(takeUntil(this._onDestroy))
+            .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
             if (this.matSelect._keyManager) {
-                this.matSelect._keyManager.change.pipe(takeUntil(this._onDestroy))
+                this.matSelect._keyManager.change.pipe(takeUntilDestroyed(this._destroyRef))
                     .subscribe(() => this._adjustScrollTopToFitActiveOptionIntoView());
             }
             else {
@@ -173,26 +169,20 @@ class CmatSelectSearchComponent {
             this._options = this.matSelect.options;
             let previousFirstOption = this._options.toArray()[this._getOptionsLengthOffset()];
             this._options.changes
-                .pipe(takeUntil(this._onDestroy))
+                .pipe(takeUntilDestroyed(this._destroyRef))
                 .subscribe(() => {
-                // avoid "expression has been changed" error
                 setTimeout(() => {
                     if (this._options) {
-                        // Convert the QueryList to an array
                         const options = this._options.toArray();
-                        // The true first item is offset by 1
                         const currentFirstOption = options[this._getOptionsLengthOffset()];
                         const keyManager = this.matSelect._keyManager;
                         if (keyManager && this.matSelect.panelOpen) {
-                            // set first item active and input width
-                            // Check to see if the first option in these changes is different from the previous.
                             const firstOptionIsChanged = !this.matSelect.compareWith(previousFirstOption, currentFirstOption);
                             if (firstOptionIsChanged
                                 || !keyManager.activeItem
                                 || !options.find(option => this.matSelect.compareWith(option, keyManager.activeItem))) {
                                 keyManager.setFirstItemActive();
                             }
-                            // wait for panel width changes
                             setTimeout(() => {
                                 this.updateInputWidth();
                             });
@@ -200,16 +190,12 @@ class CmatSelectSearchComponent {
                                 this._adjustScrollTopToFitActiveOptionIntoView();
                             }
                         }
-                        // Update our reference
                         previousFirstOption = currentFirstOption;
                     }
                 });
             });
         });
-        // add or remove css class depending on whether to show the no entries found message
-        // note: this is hacky
-        this.showNoEntriesFound$.pipe(takeUntil(this._onDestroy)).subscribe((showNoEntriesFound) => {
-            // set no entries found class on mat option
+        this.showNoEntriesFound$.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((showNoEntriesFound) => {
             if (this._matOption) {
                 if (showNoEntriesFound) {
                     this._matOption._getHostElement().classList.add('cmat-select-search-no-entries-found');
@@ -219,31 +205,26 @@ class CmatSelectSearchComponent {
                 }
             }
         });
-        // resize the input width when the viewport is resized, i.e. the trigger width could potentially be resized
         this._viewportRuler.change()
-            .pipe(takeUntil(this._onDestroy))
+            .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
             if (this.matSelect.panelOpen) {
                 this.updateInputWidth();
             }
         });
         this._initMultipleHandling();
-        this._optionsList$.pipe(takeUntil(this._onDestroy)).subscribe(() => {
-            // update view when available options change
-            this._changeDetectorRef.markForCheck();
-        });
+        this._optionsList$.pipe(takeUntilDestroyed(this._destroyRef)).subscribe();
     }
     emitSelectAllBooleanToParent(state) {
+        // 通知父组件切换全选状态
         this.toggleAll.emit(state);
     }
-    ngOnDestroy() {
-        this._onDestroy.next(void 0);
-        this._onDestroy.complete();
-    }
     isToggleAllCheckboxVisible() {
+        // 仅在多选模式下显示全选复选框
         return this.matSelect.multiple && this.showToggleAllCheckbox;
     }
     handleKeydown(event) {
+        // 拦截输入事件，避免冒泡影响下拉面板行为
         if ((event.key?.length === 1) ||
             (event.code === 'KeyA') || (event.code === 'KeyB') || (event.code === 'KeyC') || (event.code === 'KeyD') || (event.code === 'KeyE') || (event.code === 'KeyF')
             || (event.code === 'KeyG') || (event.code === 'KeyH') || (event.code === 'KeyI') || (event.code === 'KeyJ') || (event.code === 'KeyK') || (event.code === 'KeyL')
@@ -257,20 +238,15 @@ class CmatSelectSearchComponent {
             event.stopPropagation();
         }
         if (this.matSelect.multiple && event.key && event.code === 'Enter') {
-            // Regain focus after multiselect, so we can further type
             setTimeout(() => this.focus());
         }
-        // Special case if click Escape, if input is empty, close the dropdown, if not, empty out the search field
         if (this.enableClearOnEscapePressed === true && event.code === 'Escape' && this.value) {
             this.reset(true);
             event.stopPropagation();
         }
     }
-    /**
-     * Handles the key up event with MatSelect.
-     * Allows e.g. the announcing of the currently activeDescendant by screen readers.
-     */
     handleKeyup(event) {
+        // 方向键切换时同步当前高亮项
         if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
             const ariaActiveDescendantId = this.matSelect._getAriaActiveDescendant();
             const index = this._options?.toArray().findIndex(item => item.id === ariaActiveDescendantId);
@@ -283,21 +259,23 @@ class CmatSelectSearchComponent {
         }
     }
     writeValue(value) {
+        // 外部写入时同步输入框值
         this._lastExternalInputValue = value;
         this.formControl.setValue(value);
-        this._changeDetectorRef.markForCheck();
     }
     onBlur() {
+        // 失焦时清理高亮并触发 touched
         this._unselectActiveDescendant();
         this.onTouched();
     }
     registerOnChange(fn) {
-        this.formControl.valueChanges.pipe(filter(value => value !== this._lastExternalInputValue), tap(() => this._lastExternalInputValue = undefined), takeUntil(this._onDestroy)).subscribe(fn);
+        this.formControl.valueChanges.pipe(filter(value => value !== this._lastExternalInputValue), tap(() => this._lastExternalInputValue = undefined), takeUntilDestroyed(this._destroyRef)).subscribe(fn);
     }
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
     focus() {
+        // 聚焦并保持面板滚动位置
         if (!this.searchSelectInput || !this.matSelect.panel) {
             return;
         }
@@ -307,12 +285,14 @@ class CmatSelectSearchComponent {
         panel.scrollTop = scrollTop;
     }
     reset(focus) {
+        // 重置搜索内容
         this.formControl.setValue('');
         if (focus) {
             this.focus();
         }
     }
     updateInputWidth() {
+        // 根据面板宽度同步搜索输入宽度
         if (!this.innerSelectSearch?.nativeElement) {
             return;
         }
@@ -329,12 +309,14 @@ class CmatSelectSearchComponent {
         }
     }
     _getMatOptionHeight() {
+        // 获取首个选项高度，用于滚动计算
         if (this.matSelect.options.length > 0) {
             return this.matSelect.options.first._getHostElement().getBoundingClientRect().height;
         }
         return 0;
     }
     _getOptionsLengthOffset() {
+        // 如果嵌套在 mat-option 内，则偏移一个选项
         if (this._matOption) {
             return 1;
         }
@@ -343,10 +325,12 @@ class CmatSelectSearchComponent {
         }
     }
     _unselectActiveDescendant() {
+        // 清理当前高亮项的 aria 状态
         this._activeDescendant?.removeAttribute('aria-selected');
         this.searchSelectInput.nativeElement.removeAttribute('aria-activedescendant');
     }
     _applyDefaultOptions(defaultOptions) {
+        // 应用默认配置
         if (!defaultOptions) {
             return;
         }
@@ -356,24 +340,17 @@ class CmatSelectSearchComponent {
             }
         }
     }
-    /*
-   * Initializes handling <mat-select [multiple]="true">
-   * Note: to improve this code, mat-select should be extended to allow disabling resetting the selection while filtering.
-   */
     _initMultipleHandling() {
+        // 初始化多选场景下的已选值保留逻辑
+        // 处理多选场景下的已选值保留
         if (!this.matSelect.ngControl) {
             if (this.matSelect.multiple) {
-                // note: the access to matSelect.ngControl (instead of matSelect.value / matSelect.valueChanges)
-                // is necessary to properly work in multi-selection mode.
                 console.error('the mat-select containing cmat-select-search must have a ngModel or formControl directive when multiple=true');
             }
             return;
         }
-        // if <mat-select [multiple]="true">
-        // store previously selected values and restore them when they are deselected
-        // because the option is not available while we are currently filtering
         this._previousSelectedValues = this.matSelect.ngControl.value;
-        this.matSelect.ngControl.valueChanges?.pipe(takeUntil(this._onDestroy))
+        this.matSelect.ngControl.valueChanges?.pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe((values) => {
             let restoreSelectedValues = false;
             if (this.matSelect.multiple) {
@@ -386,8 +363,6 @@ class CmatSelectSearchComponent {
                     this._previousSelectedValues.forEach((previousValue) => {
                         if (!values.some((v) => this.matSelect.compareWith(v, previousValue))
                             && !optionValues.some(v => this.matSelect.compareWith(v, previousValue))) {
-                            // if a value that was selected before is deselected and not found in the options, it was deselected
-                            // due to the filtering, so we restore it.
                             values.push(previousValue);
                             restoreSelectedValues = true;
                         }
@@ -400,15 +375,12 @@ class CmatSelectSearchComponent {
             }
         });
     }
-    /**
-     * Scrolls the currently active option into the view if it is not yet visible.
-     */
     _adjustScrollTopToFitActiveOptionIntoView() {
+        // 滚动到当前高亮项附近
         if (this.matSelect.panel && this.matSelect.options.length > 0) {
             const matOptionHeight = this._getMatOptionHeight();
             const activeOptionIndex = this.matSelect._keyManager.activeItemIndex ?? 0;
             const labelCount = _countGroupLabelsBeforeOption(activeOptionIndex, this.matSelect.options, this.matSelect.optionGroups);
-            // If the component is in a MatOption, the activeItemIndex will be offset by one.
             const indexOfOptionToFitIntoView = (this._matOption ? -1 : 0) + labelCount + activeOptionIndex;
             const currentScrollTop = this.matSelect.panel.nativeElement.scrollTop;
             const searchInputHeight = this.innerSelectSearch.nativeElement.offsetHeight;
@@ -423,16 +395,16 @@ class CmatSelectSearchComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatSelectSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmatSelectSearchComponent, isStandalone: true, selector: "cmat-select-search", inputs: { placeholderLabel: "placeholderLabel", type: "type", noEntriesFoundLabel: "noEntriesFoundLabel", showNoFoundLabel: "showNoFoundLabel", clearSearchInput: "clearSearchInput", searching: "searching", disableInitialFocus: "disableInitialFocus", enableClearOnEscapePressed: "enableClearOnEscapePressed", preventHomeEndKeyPropagation: "preventHomeEndKeyPropagation", disableScrollToActiveOnOptionsChanged: "disableScrollToActiveOnOptionsChanged", ariaLabel: "ariaLabel", showToggleAllCheckbox: "showToggleAllCheckbox", toggleAllCheckboxChecked: "toggleAllCheckboxChecked", toggleAllCheckboxIndeterminate: "toggleAllCheckboxIndeterminate", toggleAllCheckboxTooltipMessage: "toggleAllCheckboxTooltipMessage", toggleAllCheckboxTooltipPosition: "toggleAllCheckboxTooltipPosition", hideClearSearchButton: "hideClearSearchButton", alwaysRestoreSelectedOptionsMulti: "alwaysRestoreSelectedOptionsMulti" }, outputs: { toggleAll: "toggleAll" }, host: { properties: { "class.cmat-select-search-inside-mat-option": "this.isInsideMatOption" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatSelectSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CmatSelectSearchComponent, isStandalone: true, selector: "cmat-select-search", inputs: { placeholderLabel: "placeholderLabel", type: "type", noEntriesFoundLabel: "noEntriesFoundLabel", showNoFoundLabel: "showNoFoundLabel", clearSearchInput: "clearSearchInput", searching: "searching", disableInitialFocus: "disableInitialFocus", enableClearOnEscapePressed: "enableClearOnEscapePressed", preventHomeEndKeyPropagation: "preventHomeEndKeyPropagation", disableScrollToActiveOnOptionsChanged: "disableScrollToActiveOnOptionsChanged", ariaLabel: "ariaLabel", showToggleAllCheckbox: "showToggleAllCheckbox", toggleAllCheckboxChecked: "toggleAllCheckboxChecked", toggleAllCheckboxIndeterminate: "toggleAllCheckboxIndeterminate", toggleAllCheckboxTooltipMessage: "toggleAllCheckboxTooltipMessage", toggleAllCheckboxTooltipPosition: "toggleAllCheckboxTooltipPosition", hideClearSearchButton: "hideClearSearchButton", alwaysRestoreSelectedOptionsMulti: "alwaysRestoreSelectedOptionsMulti" }, outputs: { toggleAll: "toggleAll" }, host: { properties: { "class.cmat-select-search-inside-mat-option": "this.isInsideMatOption" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CmatSelectSearchComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "clearIcon", first: true, predicate: CmatSelectSearchClearDirective, descendants: true }, { propertyName: "noEntriesFound", first: true, predicate: CmatSelectNoEntriesFoundDirective, descendants: true }], viewQueries: [{ propertyName: "searchSelectInput", first: true, predicate: ["searchSelectInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "innerSelectSearch", first: true, predicate: ["innerSelectSearch"], descendants: true, read: ElementRef, static: true }], exportAs: ["cmatSelectSearch"], ngImport: i0, template: "<input matInput class=\"cmat-select-search-input cmat-select-search-hidden\" />\r\n\r\n<div #innerSelectSearch class=\"cmat-select-search-inner mat-typography mat-tab-header\"\r\n  [ngClass]=\"{'cmat-select-search-inner-multiple': matSelect.multiple, 'cmat-select-search-inner-toggle-all': isToggleAllCheckboxVisible() }\">\r\n\r\n  @if (isToggleAllCheckboxVisible()) {\r\n    <mat-checkbox class=\"cmat-select-search-toggle-all-checkbox -mr-4\"\r\n      matTooltipClass=\"cmat-select-search-toggle-all-tooltip\" [color]=\"matFormField?.color\"\r\n      [checked]=\"toggleAllCheckboxChecked\" [indeterminate]=\"toggleAllCheckboxIndeterminate\"\r\n      [matTooltip]=\"toggleAllCheckboxTooltipMessage\" [matTooltipPosition]=\"toggleAllCheckboxTooltipPosition\"\r\n      (change)=\"emitSelectAllBooleanToParent($event.checked)\">\r\n    </mat-checkbox>\r\n  }\r\n  <span matPrefix class=\"flex flex-col justify-center pl-2\">\r\n    <mat-icon class=\"cmat-select-search-icon\" color=\"primary\" svgIcon=\"heroicons_outline:magnifying-glass\"></mat-icon>\r\n  </span>\r\n  <input #searchSelectInput matInput class=\"cmat-select-search-input cmat-input-element\" autocomplete=\"off\"\r\n    [type]=\"type\" [formControl]=\"formControl\" [placeholder]=\"placeholderLabel\" [attr.aria-label]=\"ariaLabel\"\r\n    (keydown)=\"handleKeydown($event)\" (keyup)=\"handleKeyup($event)\" (blur)=\"onBlur()\" />\r\n    @if (searching) {\r\n      <mat-spinner class=\"cmat-select-search-spinner\" diameter=\"16\"></mat-spinner>\r\n    }\r\n\r\n    @if (!hideClearSearchButton && value && !searching) {\r\n      <button type=\"button\" matIconButton  aria-label=\"Clear\"\r\n        class=\"cmat-select-search-clear\" (click)=\"reset(true)\">\r\n        @if (clearIcon) {\r\n          <ng-content select=\"[cmatSelectSearchClear]\"></ng-content>\r\n        } @else {\r\n          <mat-icon svgIcon=\"mat_outline:close\"></mat-icon>\r\n        }\r\n      </button>\r\n    }\r\n\r\n    <ng-content select=\".cmat-select-search-custom-header-content\"></ng-content>\r\n  </div>\r\n\r\n  @if (showNoEntriesFound$ | async) {\r\n    <div class=\"cmat-select-search-no-entries-found\">\r\n      @if (noEntriesFound) {\r\n        <ng-content select=\"[cmatSelectNoEntriesFound]\"></ng-content>\r\n      } @else {\r\n        {{noEntriesFoundLabel}}\r\n      }\r\n    </div>\r\n  }", styles: ["cmat-select-search .cmat-select-search-hidden{visibility:hidden}cmat-select-search .cmat-select-search-inner{position:absolute;top:0;left:0;width:100%;z-index:100;font-size:inherit;box-shadow:none;display:flex;border-bottom-width:1px;border-bottom-style:solid}cmat-select-search .cmat-select-search-inner.cmat-select-search-inner-multiple.cmat-select-search-inner-toggle-all{display:flex;align-items:center}cmat-select-search .cmat-select-search-inner .cmat-input-element{flex-basis:auto;vertical-align:middle!important}cmat-select-search .cmat-select-search-input{box-sizing:border-box;width:100%;border:none;font-family:inherit;font-size:inherit;color:currentColor;outline:none;background:none;padding:0 44px 0 16px;height:47px!important;line-height:47px!important}:host-context([dir=rtl]) cmat-select-search .cmat-select-search-input{padding-right:16px;padding-left:44px}cmat-select-search .cmat-select-search-no-entries-found{padding-top:8px}cmat-select-search .cmat-select-search-clear{position:absolute;right:4px;top:5px}:host-context([dir=rtl]) cmat-select-search .cmat-select-search-clear{right:auto;left:4px}cmat-select-search .cmat-select-search-spinner{position:absolute;right:16px;top:calc(50% - 8px)}:host-context([dir=rtl]) cmat-select-search .cmat-select-search-spinner{right:auto;left:16px}cmat-select-search .cmat-select-search-toggle-all-checkbox{padding-left:5px;padding-bottom:2px}:host-context([dir=rtl]) cmat-select-search .cmat-select-search-toggle-all-checkbox{padding-left:0;padding-right:5px}cmat-select-search .cmat-select-search-toggle-all-checkbox .mdc-checkbox{opacity:1!important}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search{position:sticky;top:0;z-index:1;opacity:1;pointer-events:all;background:var(--mat-select-panel-background-color)}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search .mat-icon{margin-right:0;margin-left:0}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search mat-pseudo-checkbox{display:none}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search .mdc-list-item__primary-text{opacity:1}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search.cmat-select-search-no-entries-found{height:96px}.cmat-select-search-panel{transform:none!important;overflow-x:hidden;position:relative;padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "clearIcon", first: true, predicate: CmatSelectSearchClearDirective, descendants: true }, { propertyName: "noEntriesFound", first: true, predicate: CmatSelectNoEntriesFoundDirective, descendants: true }], viewQueries: [{ propertyName: "searchSelectInput", first: true, predicate: ["searchSelectInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "innerSelectSearch", first: true, predicate: ["innerSelectSearch"], descendants: true, read: ElementRef, static: true }], exportAs: ["cmatSelectSearch"], ngImport: i0, template: "<input matInput class=\"cmat-select-search-input cmat-select-search-hidden\" />\r\n\r\n<div #innerSelectSearch class=\"cmat-select-search-inner mat-typography mat-tab-header\"\r\n  [ngClass]=\"{'cmat-select-search-inner-multiple': matSelect.multiple, 'cmat-select-search-inner-toggle-all': isToggleAllCheckboxVisible() }\">\r\n\r\n  @if (isToggleAllCheckboxVisible()) {\r\n    <mat-checkbox class=\"cmat-select-search-toggle-all-checkbox -mr-4\"\r\n      matTooltipClass=\"cmat-select-search-toggle-all-tooltip\" [color]=\"matFormField?.color\"\r\n      [checked]=\"toggleAllCheckboxChecked\" [indeterminate]=\"toggleAllCheckboxIndeterminate\"\r\n      [matTooltip]=\"toggleAllCheckboxTooltipMessage\" [matTooltipPosition]=\"toggleAllCheckboxTooltipPosition\"\r\n      (change)=\"emitSelectAllBooleanToParent($event.checked)\">\r\n    </mat-checkbox>\r\n  }\r\n  <span matPrefix class=\"flex flex-col justify-center pl-2\">\r\n    <mat-icon class=\"cmat-select-search-icon\" color=\"primary\" svgIcon=\"heroicons_outline:magnifying-glass\"></mat-icon>\r\n  </span>\r\n  <input #searchSelectInput matInput class=\"cmat-select-search-input cmat-input-element\" autocomplete=\"off\"\r\n    [type]=\"type\" [formControl]=\"formControl\" [placeholder]=\"placeholderLabel\" [attr.aria-label]=\"ariaLabel\"\r\n    (keydown)=\"handleKeydown($event)\" (keyup)=\"handleKeyup($event)\" (blur)=\"onBlur()\" />\r\n    @if (searching) {\r\n      <mat-spinner class=\"cmat-select-search-spinner\" diameter=\"16\"></mat-spinner>\r\n    }\r\n\r\n    @if (!hideClearSearchButton && value && !searching) {\r\n      <button type=\"button\" matIconButton  aria-label=\"Clear\"\r\n        class=\"cmat-select-search-clear\" (click)=\"reset(true)\">\r\n        @if (clearIcon) {\r\n          <ng-content select=\"[cmatSelectSearchClear]\"></ng-content>\r\n        } @else {\r\n          <mat-icon svgIcon=\"mat_outline:close\"></mat-icon>\r\n        }\r\n      </button>\r\n    }\r\n\r\n    <ng-content select=\".cmat-select-search-custom-header-content\"></ng-content>\r\n  </div>\r\n\r\n  @if (showNoEntriesFound()) {\r\n    <div class=\"cmat-select-search-no-entries-found\">\r\n      @if (noEntriesFound) {\r\n        <ng-content select=\"[cmatSelectNoEntriesFound]\"></ng-content>\r\n      } @else {\r\n        {{noEntriesFoundLabel}}\r\n      }\r\n    </div>\r\n  }\r\n", styles: ["cmat-select-search .cmat-select-search-hidden{visibility:hidden}cmat-select-search .cmat-select-search-inner{position:absolute;top:0;left:0;width:100%;z-index:100;font-size:inherit;box-shadow:none;display:flex;border-bottom-width:1px;border-bottom-style:solid}cmat-select-search .cmat-select-search-inner.cmat-select-search-inner-multiple.cmat-select-search-inner-toggle-all{display:flex;align-items:center}cmat-select-search .cmat-select-search-inner .cmat-input-element{flex-basis:auto;vertical-align:middle!important}cmat-select-search .cmat-select-search-input{box-sizing:border-box;width:100%;border:none;font-family:inherit;font-size:inherit;color:currentColor;outline:none;background:none;padding:0 44px 0 16px;height:47px!important;line-height:47px!important}:host-context([dir=rtl]) cmat-select-search .cmat-select-search-input{padding-right:16px;padding-left:44px}cmat-select-search .cmat-select-search-no-entries-found{padding-top:8px}cmat-select-search .cmat-select-search-clear{position:absolute;right:4px;top:5px}:host-context([dir=rtl]) cmat-select-search .cmat-select-search-clear{right:auto;left:4px}cmat-select-search .cmat-select-search-spinner{position:absolute;right:16px;top:calc(50% - 8px)}:host-context([dir=rtl]) cmat-select-search .cmat-select-search-spinner{right:auto;left:16px}cmat-select-search .cmat-select-search-toggle-all-checkbox{padding-left:5px;padding-bottom:2px}:host-context([dir=rtl]) cmat-select-search .cmat-select-search-toggle-all-checkbox{padding-left:0;padding-right:5px}cmat-select-search .cmat-select-search-toggle-all-checkbox .mdc-checkbox{opacity:1!important}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search{position:sticky;top:0;z-index:1;opacity:1;pointer-events:all;background:var(--mat-select-panel-background-color)}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search .mat-icon{margin-right:0;margin-left:0}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search mat-pseudo-checkbox{display:none}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search .mdc-list-item__primary-text{opacity:1}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search.cmat-select-search-no-entries-found{height:96px}.cmat-select-search-panel{transform:none!important;overflow-x:hidden;position:relative;padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatSelectSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatSelectSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-select-search', providers: [
                         {
@@ -441,7 +413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                             multi: true
                         }
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatSelectSearch', imports: [MatInputModule, NgClass, MatCheckboxModule, MatTooltipModule, MatFormFieldModule, MatIconModule,
-                        FormsModule, ReactiveFormsModule, MatProgressSpinnerModule, MatButtonModule, AsyncPipe], template: "<input matInput class=\"cmat-select-search-input cmat-select-search-hidden\" />\r\n\r\n<div #innerSelectSearch class=\"cmat-select-search-inner mat-typography mat-tab-header\"\r\n  [ngClass]=\"{'cmat-select-search-inner-multiple': matSelect.multiple, 'cmat-select-search-inner-toggle-all': isToggleAllCheckboxVisible() }\">\r\n\r\n  @if (isToggleAllCheckboxVisible()) {\r\n    <mat-checkbox class=\"cmat-select-search-toggle-all-checkbox -mr-4\"\r\n      matTooltipClass=\"cmat-select-search-toggle-all-tooltip\" [color]=\"matFormField?.color\"\r\n      [checked]=\"toggleAllCheckboxChecked\" [indeterminate]=\"toggleAllCheckboxIndeterminate\"\r\n      [matTooltip]=\"toggleAllCheckboxTooltipMessage\" [matTooltipPosition]=\"toggleAllCheckboxTooltipPosition\"\r\n      (change)=\"emitSelectAllBooleanToParent($event.checked)\">\r\n    </mat-checkbox>\r\n  }\r\n  <span matPrefix class=\"flex flex-col justify-center pl-2\">\r\n    <mat-icon class=\"cmat-select-search-icon\" color=\"primary\" svgIcon=\"heroicons_outline:magnifying-glass\"></mat-icon>\r\n  </span>\r\n  <input #searchSelectInput matInput class=\"cmat-select-search-input cmat-input-element\" autocomplete=\"off\"\r\n    [type]=\"type\" [formControl]=\"formControl\" [placeholder]=\"placeholderLabel\" [attr.aria-label]=\"ariaLabel\"\r\n    (keydown)=\"handleKeydown($event)\" (keyup)=\"handleKeyup($event)\" (blur)=\"onBlur()\" />\r\n    @if (searching) {\r\n      <mat-spinner class=\"cmat-select-search-spinner\" diameter=\"16\"></mat-spinner>\r\n    }\r\n\r\n    @if (!hideClearSearchButton && value && !searching) {\r\n      <button type=\"button\" matIconButton  aria-label=\"Clear\"\r\n        class=\"cmat-select-search-clear\" (click)=\"reset(true)\">\r\n        @if (clearIcon) {\r\n          <ng-content select=\"[cmatSelectSearchClear]\"></ng-content>\r\n        } @else {\r\n          <mat-icon svgIcon=\"mat_outline:close\"></mat-icon>\r\n        }\r\n      </button>\r\n    }\r\n\r\n    <ng-content select=\".cmat-select-search-custom-header-content\"></ng-content>\r\n  </div>\r\n\r\n  @if (showNoEntriesFound$ | async) {\r\n    <div class=\"cmat-select-search-no-entries-found\">\r\n      @if (noEntriesFound) {\r\n        <ng-content select=\"[cmatSelectNoEntriesFound]\"></ng-content>\r\n      } @else {\r\n        {{noEntriesFoundLabel}}\r\n      }\r\n    </div>\r\n  }", styles: ["cmat-select-search .cmat-select-search-hidden{visibility:hidden}cmat-select-search .cmat-select-search-inner{position:absolute;top:0;left:0;width:100%;z-index:100;font-size:inherit;box-shadow:none;display:flex;border-bottom-width:1px;border-bottom-style:solid}cmat-select-search .cmat-select-search-inner.cmat-select-search-inner-multiple.cmat-select-search-inner-toggle-all{display:flex;align-items:center}cmat-select-search .cmat-select-search-inner .cmat-input-element{flex-basis:auto;vertical-align:middle!important}cmat-select-search .cmat-select-search-input{box-sizing:border-box;width:100%;border:none;font-family:inherit;font-size:inherit;color:currentColor;outline:none;background:none;padding:0 44px 0 16px;height:47px!important;line-height:47px!important}:host-context([dir=rtl]) cmat-select-search .cmat-select-search-input{padding-right:16px;padding-left:44px}cmat-select-search .cmat-select-search-no-entries-found{padding-top:8px}cmat-select-search .cmat-select-search-clear{position:absolute;right:4px;top:5px}:host-context([dir=rtl]) cmat-select-search .cmat-select-search-clear{right:auto;left:4px}cmat-select-search .cmat-select-search-spinner{position:absolute;right:16px;top:calc(50% - 8px)}:host-context([dir=rtl]) cmat-select-search .cmat-select-search-spinner{right:auto;left:16px}cmat-select-search .cmat-select-search-toggle-all-checkbox{padding-left:5px;padding-bottom:2px}:host-context([dir=rtl]) cmat-select-search .cmat-select-search-toggle-all-checkbox{padding-left:0;padding-right:5px}cmat-select-search .cmat-select-search-toggle-all-checkbox .mdc-checkbox{opacity:1!important}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search{position:sticky;top:0;z-index:1;opacity:1;pointer-events:all;background:var(--mat-select-panel-background-color)}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search .mat-icon{margin-right:0;margin-left:0}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search mat-pseudo-checkbox{display:none}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search .mdc-list-item__primary-text{opacity:1}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search.cmat-select-search-no-entries-found{height:96px}.cmat-select-search-panel{transform:none!important;overflow-x:hidden;position:relative;padding:0!important}\n"] }]
+                        FormsModule, ReactiveFormsModule, MatProgressSpinnerModule, MatButtonModule, AsyncPipe], template: "<input matInput class=\"cmat-select-search-input cmat-select-search-hidden\" />\r\n\r\n<div #innerSelectSearch class=\"cmat-select-search-inner mat-typography mat-tab-header\"\r\n  [ngClass]=\"{'cmat-select-search-inner-multiple': matSelect.multiple, 'cmat-select-search-inner-toggle-all': isToggleAllCheckboxVisible() }\">\r\n\r\n  @if (isToggleAllCheckboxVisible()) {\r\n    <mat-checkbox class=\"cmat-select-search-toggle-all-checkbox -mr-4\"\r\n      matTooltipClass=\"cmat-select-search-toggle-all-tooltip\" [color]=\"matFormField?.color\"\r\n      [checked]=\"toggleAllCheckboxChecked\" [indeterminate]=\"toggleAllCheckboxIndeterminate\"\r\n      [matTooltip]=\"toggleAllCheckboxTooltipMessage\" [matTooltipPosition]=\"toggleAllCheckboxTooltipPosition\"\r\n      (change)=\"emitSelectAllBooleanToParent($event.checked)\">\r\n    </mat-checkbox>\r\n  }\r\n  <span matPrefix class=\"flex flex-col justify-center pl-2\">\r\n    <mat-icon class=\"cmat-select-search-icon\" color=\"primary\" svgIcon=\"heroicons_outline:magnifying-glass\"></mat-icon>\r\n  </span>\r\n  <input #searchSelectInput matInput class=\"cmat-select-search-input cmat-input-element\" autocomplete=\"off\"\r\n    [type]=\"type\" [formControl]=\"formControl\" [placeholder]=\"placeholderLabel\" [attr.aria-label]=\"ariaLabel\"\r\n    (keydown)=\"handleKeydown($event)\" (keyup)=\"handleKeyup($event)\" (blur)=\"onBlur()\" />\r\n    @if (searching) {\r\n      <mat-spinner class=\"cmat-select-search-spinner\" diameter=\"16\"></mat-spinner>\r\n    }\r\n\r\n    @if (!hideClearSearchButton && value && !searching) {\r\n      <button type=\"button\" matIconButton  aria-label=\"Clear\"\r\n        class=\"cmat-select-search-clear\" (click)=\"reset(true)\">\r\n        @if (clearIcon) {\r\n          <ng-content select=\"[cmatSelectSearchClear]\"></ng-content>\r\n        } @else {\r\n          <mat-icon svgIcon=\"mat_outline:close\"></mat-icon>\r\n        }\r\n      </button>\r\n    }\r\n\r\n    <ng-content select=\".cmat-select-search-custom-header-content\"></ng-content>\r\n  </div>\r\n\r\n  @if (showNoEntriesFound()) {\r\n    <div class=\"cmat-select-search-no-entries-found\">\r\n      @if (noEntriesFound) {\r\n        <ng-content select=\"[cmatSelectNoEntriesFound]\"></ng-content>\r\n      } @else {\r\n        {{noEntriesFoundLabel}}\r\n      }\r\n    </div>\r\n  }\r\n", styles: ["cmat-select-search .cmat-select-search-hidden{visibility:hidden}cmat-select-search .cmat-select-search-inner{position:absolute;top:0;left:0;width:100%;z-index:100;font-size:inherit;box-shadow:none;display:flex;border-bottom-width:1px;border-bottom-style:solid}cmat-select-search .cmat-select-search-inner.cmat-select-search-inner-multiple.cmat-select-search-inner-toggle-all{display:flex;align-items:center}cmat-select-search .cmat-select-search-inner .cmat-input-element{flex-basis:auto;vertical-align:middle!important}cmat-select-search .cmat-select-search-input{box-sizing:border-box;width:100%;border:none;font-family:inherit;font-size:inherit;color:currentColor;outline:none;background:none;padding:0 44px 0 16px;height:47px!important;line-height:47px!important}:host-context([dir=rtl]) cmat-select-search .cmat-select-search-input{padding-right:16px;padding-left:44px}cmat-select-search .cmat-select-search-no-entries-found{padding-top:8px}cmat-select-search .cmat-select-search-clear{position:absolute;right:4px;top:5px}:host-context([dir=rtl]) cmat-select-search .cmat-select-search-clear{right:auto;left:4px}cmat-select-search .cmat-select-search-spinner{position:absolute;right:16px;top:calc(50% - 8px)}:host-context([dir=rtl]) cmat-select-search .cmat-select-search-spinner{right:auto;left:16px}cmat-select-search .cmat-select-search-toggle-all-checkbox{padding-left:5px;padding-bottom:2px}:host-context([dir=rtl]) cmat-select-search .cmat-select-search-toggle-all-checkbox{padding-left:0;padding-right:5px}cmat-select-search .cmat-select-search-toggle-all-checkbox .mdc-checkbox{opacity:1!important}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search{position:sticky;top:0;z-index:1;opacity:1;pointer-events:all;background:var(--mat-select-panel-background-color)}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search .mat-icon{margin-right:0;margin-left:0}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search mat-pseudo-checkbox{display:none}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search .mdc-list-item__primary-text{opacity:1}.mat-mdc-option[aria-disabled=true].contains-cmat-select-search.cmat-select-search-no-entries-found{height:96px}.cmat-select-search-panel{transform:none!important;overflow-x:hidden;position:relative;padding:0!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placeholderLabel: [{
                 type: Input
             }], type: [{