cmat 0.0.86 → 0.0.88

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

@@ -1,8 +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, DestroyRef, signal, ElementRef, forwardRef, HostBinding, ContentChild, ViewChild, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
-import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { InjectionToken, Directive, output, viewChild, contentChild, input, inject, DestroyRef, signal, computed, effect, forwardRef, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { 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';
@@ -20,8 +20,7 @@ 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 { of, combineLatest } from 'rxjs';
-import { switchMap, map, startWith, tap, delay, take, filter } from 'rxjs/operators';
+import { startWith, debounceTime, delay, take, filter, tap } from 'rxjs/operators';
 
 const configurableDefaultOptions = [
     'ariaLabel',
@@ -38,10 +37,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.10", ngImport: i0, type: CmatSelectNoEntriesFoundDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: CmatSelectNoEntriesFoundDirective, isStandalone: true, selector: "[cmatSelectNoEntriesFound]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatSelectNoEntriesFoundDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: CmatSelectNoEntriesFoundDirective, isStandalone: true, selector: "[cmatSelectNoEntriesFound]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatSelectNoEntriesFoundDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatSelectNoEntriesFoundDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatSelectNoEntriesFound]'
@@ -49,10 +48,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
         }] });
 
 class CmatSelectSearchClearDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatSelectSearchClearDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: CmatSelectSearchClearDirective, isStandalone: true, selector: "[cmatSelectSearchClear]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatSelectSearchClearDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: CmatSelectSearchClearDirective, isStandalone: true, selector: "[cmatSelectSearchClear]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatSelectSearchClearDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatSelectSearchClearDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatSelectSearchClear]'
@@ -62,53 +61,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
 const SELECT_PANEL_MAX_HEIGHT = 256;
 class CmatSelectSearchComponent {
     constructor() {
-        this.placeholderLabel = '搜索';
-        this.type = 'text';
-        this.noEntriesFoundLabel = '无结果';
-        this.showNoFoundLabel = true;
-        this.clearSearchInput = true;
-        this.searching = false;
-        this.disableInitialFocus = false;
-        this.enableClearOnEscapePressed = false;
-        this.preventHomeEndKeyPropagation = false;
-        this.disableScrollToActiveOnOptionsChanged = false;
-        this.ariaLabel = '下拉搜索';
-        this.showToggleAllCheckbox = false;
-        this.toggleAllCheckboxChecked = false;
-        this.toggleAllCheckboxIndeterminate = false;
-        this.toggleAllCheckboxTooltipMessage = '';
-        this.toggleAllCheckboxTooltipPosition = 'below';
-        this.hideClearSearchButton = false;
-        this.alwaysRestoreSelectedOptionsMulti = false;
-        this.toggleAll = new EventEmitter();
+        this.toggleAll = output();
+        this.searchSelectInput = viewChild.required('searchSelectInput');
+        this.innerSelectSearch = viewChild.required('innerSelectSearch');
+        this.clearIcon = contentChild(CmatSelectSearchClearDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clearIcon" }] : /* istanbul ignore next */ []));
+        this.noEntriesFound = contentChild(CmatSelectNoEntriesFoundDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "noEntriesFound" }] : /* istanbul ignore next */ []));
         this.formControl = new FormControl('');
+        this.placeholderLabel = input('搜索', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholderLabel" }] : /* istanbul ignore next */ []));
+        this.type = input('text', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.noEntriesFoundLabel = input('无结果', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "noEntriesFoundLabel" }] : /* istanbul ignore next */ []));
+        this.showNoFoundLabel = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showNoFoundLabel" }] : /* istanbul ignore next */ []));
+        this.clearSearchInput = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clearSearchInput" }] : /* istanbul ignore next */ []));
+        this.searching = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searching" }] : /* istanbul ignore next */ []));
+        this.disableInitialFocus = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disableInitialFocus" }] : /* istanbul ignore next */ []));
+        this.enableClearOnEscapePressed = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enableClearOnEscapePressed" }] : /* istanbul ignore next */ []));
+        this.preventHomeEndKeyPropagation = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "preventHomeEndKeyPropagation" }] : /* istanbul ignore next */ []));
+        this.disableScrollToActiveOnOptionsChanged = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disableScrollToActiveOnOptionsChanged" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input('下拉搜索', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.showToggleAllCheckbox = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showToggleAllCheckbox" }] : /* istanbul ignore next */ []));
+        this.toggleAllCheckboxChecked = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toggleAllCheckboxChecked" }] : /* istanbul ignore next */ []));
+        this.toggleAllCheckboxIndeterminate = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toggleAllCheckboxIndeterminate" }] : /* istanbul ignore next */ []));
+        this.toggleAllCheckboxTooltipMessage = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toggleAllCheckboxTooltipMessage" }] : /* istanbul ignore next */ []));
+        this.toggleAllCheckboxTooltipPosition = input('below', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toggleAllCheckboxTooltipPosition" }] : /* istanbul ignore next */ []));
+        this.hideClearSearchButton = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hideClearSearchButton" }] : /* istanbul ignore next */ []));
+        this.alwaysRestoreSelectedOptionsMulti = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alwaysRestoreSelectedOptionsMulti" }] : /* istanbul ignore next */ []));
+        /**
+         * 输入框防抖时间（毫秒），默认 300ms
+         * 设置为 0 可禁用防抖
+         */
+        this.debounceTime = input(300, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "debounceTime" }] : /* istanbul ignore next */ []));
+        /**
+         * 可选条目数量（由父组件提供）
+         * 用于判断是否显示"无结果"提示
+         * 如果未提供，则尝试从 matSelect.options.length 自动获取
+         */
+        this.optionsCount = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "optionsCount" }] : /* istanbul ignore next */ []));
         this.matSelect = inject(MatSelect);
         this.matFormField = inject(MatFormField, { optional: true }) ?? null;
         this._viewportRuler = inject(ViewportRuler);
         this._matOption = inject(MatOption, { optional: true }) ?? null;
         this._defaultOptions = inject(MAT_SELECTSEARCH_DEFAULT_OPTIONS, { optional: true });
         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._options$ = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_options$" }] : /* istanbul ignore next */ []));
         this._previousSelectedValues = [];
-        // 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()), tap((showNoEntriesFound) => this.showNoEntriesFound.set(!!showNoEntriesFound)));
-        this.onTouched = () => { };
+        this._valueSignal = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_valueSignal" }] : /* istanbul ignore next */ []));
+        this.onTouched = () => {
+            /* empty */
+        };
         this._applyDefaultOptions(this._defaultOptions);
+        this.showNoEntriesFound = computed(() => {
+            // 优先使用父组件传递的 optionsCount（适用于 mat-table 等特殊情况）
+            const providedCount = this.optionsCount();
+            const optionsCount = providedCount ?? (this.matSelect?.options?.length ?? 0);
+            const offset = this._getOptionsLengthOffset();
+            const hasSearchValue = !!this._valueSignal();
+            return !!this.noEntriesFoundLabel() && hasSearchValue && optionsCount <= offset;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showNoEntriesFound" }] : /* istanbul ignore next */ []));
+        // 根据 debounceTime 动态构建 observable
+        let valueChanges$ = this.formControl.valueChanges.pipe(startWith(this.formControl.value));
+        // 如果 debounceTime > 0，添加防抖
+        if (this.debounceTime() > 0) {
+            valueChanges$ = valueChanges$.pipe(debounceTime(this.debounceTime()));
+        }
+        valueChanges$
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((value) => {
+            this._valueSignal.set(value ?? '');
+        });
+        effect(() => {
+            const show = this.showNoEntriesFound();
+            if (this._matOption) {
+                const el = this._matOption._getHostElement();
+                if (show) {
+                    el.classList.add('cmat-select-search-no-entries-found');
+                }
+                else {
+                    el.classList.remove('cmat-select-search-no-entries-found');
+                }
+            }
+        });
     }
     get isInsideMatOption() {
         return !!this._matOption;
     }
     get value() {
-        return this.formControl.value ?? '';
+        return this._valueSignal();
     }
     get _options() {
         return this._options$();
@@ -126,7 +188,8 @@ class CmatSelectSearchComponent {
                 this.matSelect.panelClass = [this.matSelect.panelClass, panelClass];
             }
             else if (typeof this.matSelect.panelClass === 'object') {
-                this.matSelect.panelClass[panelClass] = true;
+                this.matSelect.panelClass[panelClass] =
+                    true;
             }
         }
         else {
@@ -134,7 +197,9 @@ class CmatSelectSearchComponent {
         }
         if (this._matOption) {
             this._matOption.disabled = true;
-            this._matOption._getHostElement().classList.add('contains-cmat-select-search');
+            this._matOption
+                ._getHostElement()
+                .classList.add('contains-cmat-select-search');
             this._matOption._getHostElement().setAttribute('aria-hidden', 'true');
         }
         else {
@@ -145,12 +210,12 @@ class CmatSelectSearchComponent {
             .subscribe((opened) => {
             if (opened) {
                 this.updateInputWidth();
-                if (!this.disableInitialFocus) {
+                if (!this.disableInitialFocus()) {
                     this.focus();
                 }
             }
             else {
-                if (this.clearSearchInput) {
+                if (this.clearSearchInput()) {
                     this.reset();
                 }
             }
@@ -160,7 +225,8 @@ class CmatSelectSearchComponent {
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
             if (this.matSelect._keyManager) {
-                this.matSelect._keyManager.change.pipe(takeUntilDestroyed(this._destroyRef))
+                this.matSelect._keyManager.change
+                    .pipe(takeUntilDestroyed(this._destroyRef))
                     .subscribe(() => this._adjustScrollTopToFitActiveOptionIntoView());
             }
             else {
@@ -178,15 +244,15 @@ class CmatSelectSearchComponent {
                         const keyManager = this.matSelect._keyManager;
                         if (keyManager && this.matSelect.panelOpen) {
                             const firstOptionIsChanged = !this.matSelect.compareWith(previousFirstOption, currentFirstOption);
-                            if (firstOptionIsChanged
-                                || !keyManager.activeItem
-                                || !options.find((option) => this.matSelect.compareWith(option, keyManager.activeItem))) {
+                            if (firstOptionIsChanged ||
+                                !keyManager.activeItem ||
+                                !options.find((option) => this.matSelect.compareWith(option, keyManager.activeItem))) {
                                 keyManager.setFirstItemActive();
                             }
                             setTimeout(() => {
                                 this.updateInputWidth();
                             });
-                            if (!this.disableScrollToActiveOnOptionsChanged) {
+                            if (!this.disableScrollToActiveOnOptionsChanged()) {
                                 this._adjustScrollTopToFitActiveOptionIntoView();
                             }
                         }
@@ -195,17 +261,8 @@ class CmatSelectSearchComponent {
                 });
             });
         });
-        this.showNoEntriesFound$.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((showNoEntriesFound) => {
-            if (this._matOption) {
-                if (showNoEntriesFound) {
-                    this._matOption._getHostElement().classList.add('cmat-select-search-no-entries-found');
-                }
-                else {
-                    this._matOption._getHostElement().classList.remove('cmat-select-search-no-entries-found');
-                }
-            }
-        });
-        this._viewportRuler.change()
+        this._viewportRuler
+            .change()
             .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
             if (this.matSelect.panelOpen) {
@@ -215,22 +272,23 @@ class CmatSelectSearchComponent {
         this._initMultipleHandling();
     }
     emitSelectAllBooleanToParent(state) {
-        // 通知父组件切换全选状态
         this.toggleAll.emit(state);
     }
     isToggleAllCheckboxVisible() {
-        // 仅在多选模式下显示全选复选框
-        return this.matSelect.multiple && this.showToggleAllCheckbox;
+        return this.matSelect.multiple && this.showToggleAllCheckbox();
     }
     handleKeydown(event) {
-        if (event.key?.length === 1
-            || (this.preventHomeEndKeyPropagation && (event.code === 'Home' || event.code === 'End'))) {
+        if (event.key?.length === 1 ||
+            (this.preventHomeEndKeyPropagation() &&
+                (event.code === 'Home' || event.code === 'End'))) {
             event.stopPropagation();
         }
         if (this.matSelect.multiple && event.key && event.code === 'Enter') {
             setTimeout(() => this.focus());
         }
-        if (this.enableClearOnEscapePressed === true && event.code === 'Escape' && this.value) {
+        if (this.enableClearOnEscapePressed() === true &&
+            event.code === 'Escape' &&
+            this.value) {
             this.reset(true);
             event.stopPropagation();
         }
@@ -239,22 +297,25 @@ class CmatSelectSearchComponent {
         // 方向键切换时同步当前高亮项
         if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
             const ariaActiveDescendantId = this.matSelect._getAriaActiveDescendant();
-            const index = this._options?.toArray().findIndex((item) => item.id === ariaActiveDescendantId) ?? -1;
+            const index = this._options
+                ?.toArray()
+                .findIndex((item) => item.id === ariaActiveDescendantId) ??
+                -1;
             if (index >= 0) {
                 this._unselectActiveDescendant();
-                this._activeDescendant = this._options?.toArray()[index]._getHostElement();
+                this._activeDescendant = this._options
+                    ?.toArray()[index]._getHostElement();
                 this._activeDescendant?.setAttribute('aria-selected', 'true');
                 if (ariaActiveDescendantId) {
-                    this.searchSelectInput.nativeElement.setAttribute('aria-activedescendant', ariaActiveDescendantId);
+                    this.searchSelectInput().nativeElement.setAttribute('aria-activedescendant', ariaActiveDescendantId);
                 }
                 else {
-                    this.searchSelectInput.nativeElement.removeAttribute('aria-activedescendant');
+                    this.searchSelectInput().nativeElement.removeAttribute('aria-activedescendant');
                 }
             }
         }
     }
     writeValue(value) {
-        // 外部写入时同步输入框值
         this._lastExternalInputValue = value;
         this.formControl.setValue(value);
     }
@@ -264,34 +325,35 @@ class CmatSelectSearchComponent {
         this.onTouched();
     }
     registerOnChange(fn) {
-        this.formControl.valueChanges.pipe(filter((value) => value !== this._lastExternalInputValue), tap(() => this._lastExternalInputValue = undefined), takeUntilDestroyed(this._destroyRef)).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) {
+        if (!this.searchSelectInput() || !this.matSelect.panel) {
             return;
         }
         const panel = this.matSelect.panel.nativeElement;
         const scrollTop = panel.scrollTop;
-        this.searchSelectInput.nativeElement.focus();
+        this.searchSelectInput().nativeElement.focus();
         panel.scrollTop = scrollTop;
     }
     reset(focus) {
-        // 重置搜索内容
         this.formControl.setValue('');
         if (focus) {
             this.focus();
         }
     }
     updateInputWidth() {
-        // 根据面板宽度同步搜索输入宽度
-        if (!this.innerSelectSearch?.nativeElement) {
+        const innerEl = this.innerSelectSearch();
+        if (!innerEl?.nativeElement) {
             return;
         }
-        let currentElement = this.innerSelectSearch.nativeElement;
+        let currentElement = innerEl.nativeElement;
         let panelElement = null;
         while (currentElement?.parentElement) {
             currentElement = currentElement.parentElement;
@@ -301,13 +363,15 @@ class CmatSelectSearchComponent {
             }
         }
         if (panelElement) {
-            this.innerSelectSearch.nativeElement.style.width = panelElement.clientWidth + 'px';
+            innerEl.nativeElement.style.width =
+                panelElement.clientWidth + 'px';
         }
     }
     _getMatOptionHeight() {
-        // 获取首个选项高度，用于滚动计算
         if (this.matSelect.options.length > 0) {
-            return this.matSelect.options.first._getHostElement().getBoundingClientRect().height;
+            return this.matSelect.options.first
+                ._getHostElement()
+                .getBoundingClientRect().height;
         }
         return 0;
     }
@@ -323,7 +387,7 @@ class CmatSelectSearchComponent {
     _unselectActiveDescendant() {
         // 清理当前高亮项的 aria 状态
         this._activeDescendant?.removeAttribute('aria-selected');
-        this.searchSelectInput.nativeElement.removeAttribute('aria-activedescendant');
+        this.searchSelectInput().nativeElement.removeAttribute('aria-activedescendant');
     }
     _applyDefaultOptions(defaultOptions) {
         // 应用默认配置
@@ -334,8 +398,6 @@ class CmatSelectSearchComponent {
         Object.assign(this, options);
     }
     _initMultipleHandling() {
-        // 初始化多选场景下的已选值保留逻辑
-        // 处理多选场景下的已选值保留
         if (!this.matSelect.ngControl) {
             if (this.matSelect.multiple) {
                 console.error('the mat-select containing cmat-select-search must have a ngModel or formControl directive when multiple=true');
@@ -343,17 +405,20 @@ class CmatSelectSearchComponent {
             return;
         }
         this._previousSelectedValues = this.matSelect.ngControl.value;
-        this.matSelect.ngControl.valueChanges?.pipe(takeUntilDestroyed(this._destroyRef))
+        this.matSelect.ngControl.valueChanges
+            ?.pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe((values) => {
             let restoreSelectedValues = false;
             let currentValues = Array.isArray(values) ? values : [];
             if (this.matSelect.multiple) {
-                if ((this.alwaysRestoreSelectedOptionsMulti || (this.formControl.value?.length))
-                    && this._previousSelectedValues && Array.isArray(this._previousSelectedValues)) {
+                if ((this.alwaysRestoreSelectedOptionsMulti() ||
+                    this._valueSignal().length) &&
+                    this._previousSelectedValues &&
+                    Array.isArray(this._previousSelectedValues)) {
                     const optionValues = this.matSelect.options.map((option) => option.value);
                     this._previousSelectedValues.forEach((previousValue) => {
-                        if (!currentValues.some((v) => this.matSelect.compareWith(v, previousValue))
-                            && !optionValues.some((v) => this.matSelect.compareWith(v, previousValue))) {
+                        if (!currentValues.some((v) => this.matSelect.compareWith(v, previousValue)) &&
+                            !optionValues.some((v) => this.matSelect.compareWith(v, previousValue))) {
                             currentValues.push(previousValue);
                             restoreSelectedValues = true;
                         }
@@ -374,88 +439,54 @@ class CmatSelectSearchComponent {
             const labelCount = _countGroupLabelsBeforeOption(activeOptionIndex, this.matSelect.options, this.matSelect.optionGroups);
             const indexOfOptionToFitIntoView = (this._matOption ? -1 : 0) + labelCount + activeOptionIndex;
             const currentScrollTop = this.matSelect.panel.nativeElement.scrollTop;
-            const searchInputHeight = this.innerSelectSearch.nativeElement.offsetHeight;
+            const innerEl = this.innerSelectSearch();
+            const searchInputHeight = innerEl.nativeElement.offsetHeight;
             const amountOfVisibleOptions = Math.floor((SELECT_PANEL_MAX_HEIGHT - searchInputHeight) / matOptionHeight);
-            const indexOfFirstVisibleOption = Math.round((currentScrollTop + searchInputHeight) / matOptionHeight) - 1;
+            const indexOfFirstVisibleOption = Math.round((currentScrollTop + searchInputHeight) / matOptionHeight) -
+                1;
             if (indexOfFirstVisibleOption >= indexOfOptionToFitIntoView) {
-                this.matSelect.panel.nativeElement.scrollTop = indexOfOptionToFitIntoView * matOptionHeight;
+                this.matSelect.panel.nativeElement.scrollTop =
+                    indexOfOptionToFitIntoView * matOptionHeight;
             }
-            else if (indexOfFirstVisibleOption + amountOfVisibleOptions <= indexOfOptionToFitIntoView) {
-                this.matSelect.panel.nativeElement.scrollTop = (indexOfOptionToFitIntoView + 1) * matOptionHeight
-                    - (SELECT_PANEL_MAX_HEIGHT - searchInputHeight);
+            else if (indexOfFirstVisibleOption + amountOfVisibleOptions <=
+                indexOfOptionToFitIntoView) {
+                this.matSelect.panel.nativeElement.scrollTop =
+                    (indexOfOptionToFitIntoView + 1) * matOptionHeight -
+                        (SELECT_PANEL_MAX_HEIGHT - searchInputHeight);
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CmatSelectSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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: "22.0.2", ngImport: i0, type: CmatSelectSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatSelectSearchComponent, isStandalone: true, selector: "cmat-select-search", inputs: { placeholderLabel: { classPropertyName: "placeholderLabel", publicName: "placeholderLabel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, noEntriesFoundLabel: { classPropertyName: "noEntriesFoundLabel", publicName: "noEntriesFoundLabel", isSignal: true, isRequired: false, transformFunction: null }, showNoFoundLabel: { classPropertyName: "showNoFoundLabel", publicName: "showNoFoundLabel", isSignal: true, isRequired: false, transformFunction: null }, clearSearchInput: { classPropertyName: "clearSearchInput", publicName: "clearSearchInput", isSignal: true, isRequired: false, transformFunction: null }, searching: { classPropertyName: "searching", publicName: "searching", isSignal: true, isRequired: false, transformFunction: null }, disableInitialFocus: { classPropertyName: "disableInitialFocus", publicName: "disableInitialFocus", isSignal: true, isRequired: false, transformFunction: null }, enableClearOnEscapePressed: { classPropertyName: "enableClearOnEscapePressed", publicName: "enableClearOnEscapePressed", isSignal: true, isRequired: false, transformFunction: null }, preventHomeEndKeyPropagation: { classPropertyName: "preventHomeEndKeyPropagation", publicName: "preventHomeEndKeyPropagation", isSignal: true, isRequired: false, transformFunction: null }, disableScrollToActiveOnOptionsChanged: { classPropertyName: "disableScrollToActiveOnOptionsChanged", publicName: "disableScrollToActiveOnOptionsChanged", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showToggleAllCheckbox: { classPropertyName: "showToggleAllCheckbox", publicName: "showToggleAllCheckbox", isSignal: true, isRequired: false, transformFunction: null }, toggleAllCheckboxChecked: { classPropertyName: "toggleAllCheckboxChecked", publicName: "toggleAllCheckboxChecked", isSignal: true, isRequired: false, transformFunction: null }, toggleAllCheckboxIndeterminate: { classPropertyName: "toggleAllCheckboxIndeterminate", publicName: "toggleAllCheckboxIndeterminate", isSignal: true, isRequired: false, transformFunction: null }, toggleAllCheckboxTooltipMessage: { classPropertyName: "toggleAllCheckboxTooltipMessage", publicName: "toggleAllCheckboxTooltipMessage", isSignal: true, isRequired: false, transformFunction: null }, toggleAllCheckboxTooltipPosition: { classPropertyName: "toggleAllCheckboxTooltipPosition", publicName: "toggleAllCheckboxTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, hideClearSearchButton: { classPropertyName: "hideClearSearchButton", publicName: "hideClearSearchButton", isSignal: true, isRequired: false, transformFunction: null }, alwaysRestoreSelectedOptionsMulti: { classPropertyName: "alwaysRestoreSelectedOptionsMulti", publicName: "alwaysRestoreSelectedOptionsMulti", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, optionsCount: { classPropertyName: "optionsCount", publicName: "optionsCount", isSignal: true, isRequired: false, transformFunction: null } }, 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()) {\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 }); }
+                multi: true,
+            },
+        ], queries: [{ propertyName: "clearIcon", first: true, predicate: CmatSelectSearchClearDirective, descendants: true, isSignal: true }, { propertyName: "noEntriesFound", first: true, predicate: CmatSelectNoEntriesFoundDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "searchSelectInput", first: true, predicate: ["searchSelectInput"], descendants: true, isSignal: true }, { propertyName: "innerSelectSearch", first: true, predicate: ["innerSelectSearch"], descendants: true, isSignal: true }], exportAs: ["cmatSelectSearch"], ngImport: i0, template: "<input matInput class=\"cmat-select-search-input cmat-select-search-hidden\" />\r\n\r\n<div\r\n  #innerSelectSearch\r\n  class=\"cmat-select-search-inner mat-typography mat-tab-header\"\r\n  [ngClass]=\"{\r\n    'cmat-select-search-inner-multiple': matSelect.multiple,\r\n    'cmat-select-search-inner-toggle-all': isToggleAllCheckboxVisible(),\r\n  }\"\r\n>\r\n  @if (isToggleAllCheckboxVisible()) {\r\n    <mat-checkbox\r\n      class=\"cmat-select-search-toggle-all-checkbox -mr-4\"\r\n      matTooltipClass=\"cmat-select-search-toggle-all-tooltip\"\r\n      [color]=\"matFormField?.color\"\r\n      [checked]=\"toggleAllCheckboxChecked()\"\r\n      [indeterminate]=\"toggleAllCheckboxIndeterminate()\"\r\n      [matTooltip]=\"toggleAllCheckboxTooltipMessage()\"\r\n      [matTooltipPosition]=\"toggleAllCheckboxTooltipPosition()\"\r\n      (change)=\"emitSelectAllBooleanToParent($event.checked)\"\r\n    >\r\n    </mat-checkbox>\r\n  }\r\n  <span matPrefix class=\"flex flex-col justify-center pl-2\">\r\n    <mat-icon\r\n      class=\"cmat-select-search-icon\"\r\n      color=\"primary\"\r\n      svgIcon=\"heroicons_outline:magnifying-glass\"\r\n    ></mat-icon>\r\n  </span>\r\n  <input\r\n    #searchSelectInput\r\n    matInput\r\n    class=\"cmat-select-search-input cmat-input-element\"\r\n    autocomplete=\"off\"\r\n    [type]=\"type()\"\r\n    [formControl]=\"formControl\"\r\n    [placeholder]=\"placeholderLabel()\"\r\n    [attr.aria-label]=\"ariaLabel()\"\r\n    (keydown)=\"handleKeydown($event)\"\r\n    (keyup)=\"handleKeyup($event)\"\r\n    (blur)=\"onBlur()\"\r\n  />\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\r\n      type=\"button\"\r\n      matIconButton\r\n      aria-label=\"Clear\"\r\n      class=\"cmat-select-search-clear\"\r\n      (click)=\"reset(true)\"\r\n    >\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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.10", ngImport: i0, type: CmatSelectSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatSelectSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-select-search', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CmatSelectSearchComponent),
-                            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()) {\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: [{
-                type: Input
-            }], noEntriesFoundLabel: [{
-                type: Input
-            }], showNoFoundLabel: [{
-                type: Input
-            }], clearSearchInput: [{
-                type: Input
-            }], searching: [{
-                type: Input
-            }], disableInitialFocus: [{
-                type: Input
-            }], enableClearOnEscapePressed: [{
-                type: Input
-            }], preventHomeEndKeyPropagation: [{
-                type: Input
-            }], disableScrollToActiveOnOptionsChanged: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], showToggleAllCheckbox: [{
-                type: Input
-            }], toggleAllCheckboxChecked: [{
-                type: Input
-            }], toggleAllCheckboxIndeterminate: [{
-                type: Input
-            }], toggleAllCheckboxTooltipMessage: [{
-                type: Input
-            }], toggleAllCheckboxTooltipPosition: [{
-                type: Input
-            }], hideClearSearchButton: [{
-                type: Input
-            }], alwaysRestoreSelectedOptionsMulti: [{
-                type: Input
-            }], toggleAll: [{
-                type: Output
-            }], searchSelectInput: [{
-                type: ViewChild,
-                args: ['searchSelectInput', { read: ElementRef, static: true }]
-            }], innerSelectSearch: [{
-                type: ViewChild,
-                args: ['innerSelectSearch', { read: ElementRef, static: true }]
-            }], clearIcon: [{
-                type: ContentChild,
-                args: [CmatSelectSearchClearDirective, { static: false }]
-            }], noEntriesFound: [{
-                type: ContentChild,
-                args: [CmatSelectNoEntriesFoundDirective]
-            }], isInsideMatOption: [{
+                            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\r\n  #innerSelectSearch\r\n  class=\"cmat-select-search-inner mat-typography mat-tab-header\"\r\n  [ngClass]=\"{\r\n    'cmat-select-search-inner-multiple': matSelect.multiple,\r\n    'cmat-select-search-inner-toggle-all': isToggleAllCheckboxVisible(),\r\n  }\"\r\n>\r\n  @if (isToggleAllCheckboxVisible()) {\r\n    <mat-checkbox\r\n      class=\"cmat-select-search-toggle-all-checkbox -mr-4\"\r\n      matTooltipClass=\"cmat-select-search-toggle-all-tooltip\"\r\n      [color]=\"matFormField?.color\"\r\n      [checked]=\"toggleAllCheckboxChecked()\"\r\n      [indeterminate]=\"toggleAllCheckboxIndeterminate()\"\r\n      [matTooltip]=\"toggleAllCheckboxTooltipMessage()\"\r\n      [matTooltipPosition]=\"toggleAllCheckboxTooltipPosition()\"\r\n      (change)=\"emitSelectAllBooleanToParent($event.checked)\"\r\n    >\r\n    </mat-checkbox>\r\n  }\r\n  <span matPrefix class=\"flex flex-col justify-center pl-2\">\r\n    <mat-icon\r\n      class=\"cmat-select-search-icon\"\r\n      color=\"primary\"\r\n      svgIcon=\"heroicons_outline:magnifying-glass\"\r\n    ></mat-icon>\r\n  </span>\r\n  <input\r\n    #searchSelectInput\r\n    matInput\r\n    class=\"cmat-select-search-input cmat-input-element\"\r\n    autocomplete=\"off\"\r\n    [type]=\"type()\"\r\n    [formControl]=\"formControl\"\r\n    [placeholder]=\"placeholderLabel()\"\r\n    [attr.aria-label]=\"ariaLabel()\"\r\n    (keydown)=\"handleKeydown($event)\"\r\n    (keyup)=\"handleKeyup($event)\"\r\n    (blur)=\"onBlur()\"\r\n  />\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\r\n      type=\"button\"\r\n      matIconButton\r\n      aria-label=\"Clear\"\r\n      class=\"cmat-select-search-clear\"\r\n      (click)=\"reset(true)\"\r\n    >\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: { toggleAll: [{ type: i0.Output, args: ["toggleAll"] }], searchSelectInput: [{ type: i0.ViewChild, args: ['searchSelectInput', { isSignal: true }] }], innerSelectSearch: [{ type: i0.ViewChild, args: ['innerSelectSearch', { isSignal: true }] }], clearIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CmatSelectSearchClearDirective), { isSignal: true }] }], noEntriesFound: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CmatSelectNoEntriesFoundDirective), { isSignal: true }] }], placeholderLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderLabel", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], noEntriesFoundLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noEntriesFoundLabel", required: false }] }], showNoFoundLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNoFoundLabel", required: false }] }], clearSearchInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchInput", required: false }] }], searching: [{ type: i0.Input, args: [{ isSignal: true, alias: "searching", required: false }] }], disableInitialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableInitialFocus", required: false }] }], enableClearOnEscapePressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableClearOnEscapePressed", required: false }] }], preventHomeEndKeyPropagation: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventHomeEndKeyPropagation", required: false }] }], disableScrollToActiveOnOptionsChanged: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableScrollToActiveOnOptionsChanged", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showToggleAllCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAllCheckbox", required: false }] }], toggleAllCheckboxChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleAllCheckboxChecked", required: false }] }], toggleAllCheckboxIndeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleAllCheckboxIndeterminate", required: false }] }], toggleAllCheckboxTooltipMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleAllCheckboxTooltipMessage", required: false }] }], toggleAllCheckboxTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleAllCheckboxTooltipPosition", required: false }] }], hideClearSearchButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClearSearchButton", required: false }] }], alwaysRestoreSelectedOptionsMulti: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysRestoreSelectedOptionsMulti", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], optionsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsCount", required: false }] }], isInsideMatOption: [{
                 type: HostBinding,
                 args: ['class.cmat-select-search-inside-mat-option']
             }] } });