cmat 0.0.87 → 0.0.88

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

@@ -2,7 +2,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, inject, DestroyRef, Input, HostListener, ViewChild, ViewChildren, Output, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, output, viewChild, viewChildren, signal, inject, DestroyRef, effect, untracked, Input, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i3 from '@angular/forms';
 import { FormControl, NgControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -13,52 +13,102 @@ import { MatIconModule } from '@angular/material/icon';
 import * as i7 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i2 from '@angular/material/select';
-import { MatSelectModule, MatOption } from '@angular/material/select';
+import { MatOption, MatSelectModule } from '@angular/material/select';
 import * as i8 from '@angular/material/sort';
-import { MatSortModule, MatSort } from '@angular/material/sort';
+import { MatSort, MatSortModule } from '@angular/material/sort';
 import * as i6 from '@angular/material/table';
-import { MatTableModule, MatTable } from '@angular/material/table';
+import { MatTable, MatTableModule } from '@angular/material/table';
 import { CmatSelectSearchComponent } from 'cmat/components/select-search';
 import { CmatDigitOnlyDirective } from 'cmat/directives/digit-only';
-import { isUndefined, isNil, isArray, isNumber, isString } from 'lodash-es';
+import { isNil, isArray, isNumber, isString } from 'lodash-es';
 import { Subject, merge, debounceTime } from 'rxjs';
 
 /* eslint-disable @typescript-eslint/member-ordering */
 const MAX_SAFE_INTEGER = 9007199254740991;
 let NEXT_ID = 0;
 class CmatSelectTableComponent {
+    get focused() {
+        return this._focusedSignal();
+    }
+    get touched() {
+        return this._touchedSignal();
+    }
     constructor() {
         this.id = `cmat-select-table-${NEXT_ID++}`;
-        this.noEntriesFoundLabel = '无结果';
-        this.showNoFoundLabel = true;
-        this.isPhone = false;
-        this.multiple = false;
-        this.overallSearchEnabled = true;
-        this.keyParam = 'id';
-        this.compareWith = (o1, o2) => {
+        this.dataSource = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "dataSource" }] : /* 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.isPhone = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPhone" }] : /* istanbul ignore next */ []));
+        this.multiple = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        this.overallSearchEnabled = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overallSearchEnabled" }] : /* istanbul ignore next */ []));
+        this.overallSearchVisible = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "overallSearchVisible" }] : /* istanbul ignore next */ []));
+        this.resetSortOnOpen = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "resetSortOnOpen" }] : /* istanbul ignore next */ []));
+        this.resetFiltersOnOpen = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "resetFiltersOnOpen" }] : /* istanbul ignore next */ []));
+        this.customTriggerLabelFn = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "customTriggerLabelFn" }] : /* istanbul ignore next */ []));
+        this.triggerLabelSort = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "triggerLabelSort" }] : /* istanbul ignore next */ []));
+        this.customTriggerLabelTemplate = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "customTriggerLabelTemplate" }] : /* istanbul ignore next */ []));
+        this.canNull = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "canNull" }] : /* istanbul ignore next */ []));
+        this.defaultSort = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "defaultSort" }] : /* istanbul ignore next */ []));
+        this.resetOptionAction = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "resetOptionAction" }] : /* istanbul ignore next */ []));
+        this.keyParam = input('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyParam" }] : /* istanbul ignore next */ []));
+        this.compareWith = input((o1, o2) => {
             return o1 && o2 ? o1?.name === o2?.name && o1?.id === o2?.id : o1 === o2;
-        };
-        this.closed = new EventEmitter();
-        this.tableDataSource = signal([], ...(ngDevMode ? [{ debugName: "tableDataSource" }] : /* istanbul ignore next */ []));
-        this.tableColumns = signal([], ...(ngDevMode ? [{ debugName: "tableColumns" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+        this.closed = output();
+        this._matSelectSearch = viewChild(CmatSelectSearchComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_matSelectSearch" }] : /* istanbul ignore next */ []));
+        this._sort = viewChild(MatSort, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_sort" }] : /* istanbul ignore next */ []));
+        this._table = viewChild(MatTable, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_table" }] : /* istanbul ignore next */ []));
+        this._matOptions = viewChildren(MatOption, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_matOptions" }] : /* istanbul ignore next */ []));
+        this._matSelectSignal = viewChild('componentSelect', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_matSelectSignal" }] : /* istanbul ignore next */ []));
+        this.tableDataSource = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableDataSource" }] : /* istanbul ignore next */ []));
+        this.tableColumns = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableColumns" }] : /* istanbul ignore next */ []));
         this._rowById = new Map();
         this._columnKeys = [];
         this.completeRowList = [];
-        this.overallSearchVisibleState = signal(false, ...(ngDevMode ? [{ debugName: "overallSearchVisibleState" }] : /* istanbul ignore next */ []));
+        this.overallSearchVisibleState = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overallSearchVisibleState" }] : /* istanbul ignore next */ []));
         this.overallFilterControl = new FormControl('');
         this.selectControl = new FormControl();
         this.stateChanges = new Subject();
-        this.focused = false;
-        this.touched = false;
+        this._focusedSignal = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_focusedSignal" }] : /* istanbul ignore next */ []));
+        this._touchedSignal = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_touchedSignal" }] : /* istanbul ignore next */ []));
+        this._placeholderSignal = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_placeholderSignal" }] : /* istanbul ignore next */ []));
+        this._disabledSignal = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_disabledSignal" }] : /* istanbul ignore next */ []));
+        this._requiredSignal = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_requiredSignal" }] : /* istanbul ignore next */ []));
         this.ngControl = inject(NgControl, { optional: true, self: true });
         this._destroyRef = inject(DestroyRef);
         this._nullRow = { id: null };
         this._completeValueList = [];
-        this._placeholder = '';
         this._value = null;
-        this._required = false;
-        this._disabled = false;
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this._onModelChange = () => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this._onTouchedChange = () => { };
@@ -67,96 +117,72 @@ class CmatSelectTableComponent {
         }
         this.tableColumnsMap = new Map();
         this._filterControls = new FormGroup({});
-    }
-    set matSelect(m) {
-        const existsSelect = !isUndefined(this._matSelect);
-        this._matSelect = m;
-        if (!existsSelect) {
-            this._init(this.value);
-            this._matSelect.setDisabledState(this.disabled);
-        }
+        effect(() => {
+            const matSelect = this._matSelectSignal();
+            if (matSelect && !this._matSelect) {
+                this._matSelect = matSelect;
+                untracked(() => {
+                    this._init(this.value);
+                });
+                this._matSelect.setDisabledState(this._disabledSignal());
+                this._setPanelClass();
+            }
+            else if (matSelect && this._matSelect !== matSelect) {
+                this._matSelect = matSelect;
+                this._setPanelClass();
+            }
+        });
     }
     clickedOut() {
         if (!this._matSelect?.panelOpen) {
-            this.focused = false;
+            this._focusedSignal.set(false);
             this.stateChanges.next();
         }
     }
     ngAfterViewInit() {
-        let panelClass = ['overflow-hidden', 'cmat-select-search-table-panel'];
-        if (this._matSelect.panelClass) {
-            if (Array.isArray(this._matSelect.panelClass)) {
-                this._matSelect.panelClass = [this.matSelect.panelClass, ...panelClass];
-            }
-            else if (typeof this._matSelect.panelClass === 'string') {
-                this._matSelect.panelClass = [this._matSelect.panelClass, ...panelClass];
-            }
-            else if (typeof this._matSelect.panelClass === 'object') {
-                const panelClassObject = this._matSelect.panelClass;
-                panelClass.forEach((i) => {
-                    panelClassObject[i] = true;
-                });
-            }
-        }
-        else {
-            this._matSelect.panelClass = panelClass;
+        const sortInstance = this._sort();
+        if (!sortInstance) {
+            return;
         }
         merge(...[
-            this._sort.sortChange,
+            sortInstance.sortChange,
             this._filterControls.valueChanges,
-            this.overallFilterControl.valueChanges
+            this.overallFilterControl.valueChanges,
         ])
-            .pipe(takeUntilDestroyed(this._destroyRef), debounceTime(100))
+            .pipe(takeUntilDestroyed(this._destroyRef), debounceTime(300))
             .subscribe(() => {
-            const dataClone = [...((this.dataSource || { data: [] }).data || [])];
+            const dataClone = [
+                ...((this.dataSource() ?? { data: [] }).data || []),
+            ];
             if (this.addNullRow()) {
                 dataClone.unshift(this._nullRow);
             }
-            if (this.overallSearchEnabled && this.overallSearchVisibleState()) {
+            if (this.overallSearchEnabled() && this.overallSearchVisibleState()) {
                 this._applyOverallFilter(dataClone);
             }
             else {
                 this._applyColumnLevelFilters(dataClone);
             }
-            if (!this._sort.active && !isNil(this.defaultSort) && this.defaultSort.active) {
-                this._sort.active = this.defaultSort.active;
-                this._sort.direction = this.defaultSort.direction;
-            }
-            this.tableDataSource.set(!this._sort.active ?
-                dataClone : this._sortData(dataClone, this._sort.active, this._sort.direction));
-        });
-        this._matOptions.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
-            const options = {};
-            this._matOptions
-                .toArray()
-                .filter(option => !isNil(option) && !isNil(option.value) && !option._getHostElement().classList.contains('contains-cmat-select-search'))
-                .forEach((option) => {
-                const row = option.value;
-                options[`${row.id}`] = option;
-            });
-            const tableOptions = this._buildTableOptions(options);
-            this._matSelect?.options.reset(this._matSelectSearch ? [this._matOptions.first, ...tableOptions] : tableOptions);
-            try {
-                this._matSelect?.options.notifyOnChanges();
-                const value = this.multiple
-                    ? (this.completeRowList.length > 0 ? [...this.completeRowList] : null)
-                    : (this.completeRowList.length > 0 ? { ...this.completeRowList[0] } : null);
-                this._matSelect.writeValue(value);
-                this._matSelect._onChange(value);
-            }
-            catch {
-                return;
+            const currentSort = this._sort();
+            const defaultSort = this.defaultSort();
+            if (currentSort && !currentSort.active && !isNil(defaultSort) && defaultSort.active) {
+                currentSort.active = defaultSort.active;
+                currentSort.direction = defaultSort.direction;
             }
+            const sortedData = !currentSort?.active
+                ? dataClone
+                : this._sortData(dataClone, currentSort.active, currentSort.direction);
+            this.tableDataSource.set(sortedData);
         });
     }
     ngOnDestroy() {
         this.stateChanges.complete();
     }
     get placeholder() {
-        return this._placeholder;
+        return this._placeholderSignal();
     }
     set placeholder(value) {
-        this._placeholder = value;
+        this._placeholderSignal.set(value);
         this.stateChanges.next();
     }
     get value() {
@@ -178,23 +204,26 @@ class CmatSelectTableComponent {
         return (this.touched && this.ngControl?.invalid) ?? false;
     }
     get shouldLabelFloat() {
-        return this.focused || !this.empty;
+        return this._focusedSignal() || !this.empty;
+    }
+    get required() {
+        return this._requiredSignal();
     }
-    get required() { return this._required; }
     set required(value) {
-        this._required = coerceBooleanProperty(value);
+        this._requiredSignal.set(coerceBooleanProperty(value));
         this.stateChanges.next();
     }
     get disabled() {
         if (!isNil(this.ngControl?.disabled)) {
             return this.ngControl.disabled;
         }
-        return this._disabled;
+        return this._disabledSignal();
     }
     set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        if (this.focused) {
-            this.focused = false;
+        const isDisabled = coerceBooleanProperty(value);
+        this._disabledSignal.set(isDisabled);
+        if (this._focusedSignal() && isDisabled) {
+            this._focusedSignal.set(false);
             this.stateChanges.next();
         }
     }
@@ -206,26 +235,29 @@ class CmatSelectTableComponent {
         this._matSelect?.registerOnTouched(fn);
     }
     setDisabledState(isDisabled) {
+        this._disabledSignal.set(isDisabled);
         this._matSelect?.setDisabledState(isDisabled);
     }
     setDescribedByIds(ids) {
         this._matSelect?.setDescribedByIds(ids);
     }
     onContainerClick() {
-        if (!this.focused) {
+        if (!this._focusedSignal()) {
             this._matSelect?.focus();
         }
     }
     onFocusIn() {
-        if (!this.focused) {
-            this.focused = true;
+        if (!this._focusedSignal()) {
+            this._focusedSignal.set(true);
             this.stateChanges.next();
         }
     }
     onFocusOut(event) {
-        if (!this._matSelect.panel.nativeElement.contains(event.relatedTarget)) {
-            this.touched = true;
-            this.focused = false;
+        const matSelectPanel = this._matSelect?.panel?.nativeElement;
+        if (matSelectPanel &&
+            !(matSelectPanel).contains(event.relatedTarget)) {
+            this._touchedSignal.set(true);
+            this._focusedSignal.set(false);
             this._onTouchedChange();
             this.stateChanges.next();
         }
@@ -234,11 +266,13 @@ class CmatSelectTableComponent {
         this._init(value);
     }
     ngOnChanges(changes) {
-        if (!isNil(changes.resetFiltersOnOpen) && changes.resetFiltersOnOpen.currentValue !== false) {
+        if (!isNil(changes.resetFiltersOnOpen) &&
+            changes.resetFiltersOnOpen.currentValue !== false) {
             this._resetFilters();
         }
         if (!isNil(changes.dataSource) && !isNil(changes.dataSource.currentValue)) {
-            const currentDataSource = changes.dataSource.currentValue;
+            const currentDataSource = changes.dataSource
+                .currentValue;
             if (!isArray(currentDataSource.data)) {
                 return;
             }
@@ -268,7 +302,9 @@ class CmatSelectTableComponent {
             return;
         }
         let rowElement = event.target;
-        while (rowElement != null && rowElement instanceof HTMLElement && rowElement.tagName.toLowerCase() !== 'tr') {
+        while (rowElement != null &&
+            rowElement instanceof HTMLElement &&
+            rowElement.tagName.toLowerCase() !== 'tr') {
             rowElement = rowElement.parentElement;
         }
         if (rowElement === null) {
@@ -285,10 +321,15 @@ class CmatSelectTableComponent {
         if (!option) {
             return;
         }
-        if (this.multiple && this._matSelect.panelOpen) {
+        const multiple = this.multiple();
+        if (multiple && this._matSelect.panelOpen) {
             this._updateCompleteRowList(option.value, option.selected);
+            // 同步更新 selectControl 以触发 UI 更新
+            if (this.selectControl) {
+                this.selectControl.setValue([...this.completeRowList], { emitEvent: false });
+            }
         }
-        if (!this.multiple) {
+        if (!multiple) {
             this.completeRowList.splice(0);
             this._completeValueList.splice(0);
             if (option.value) {
@@ -299,12 +340,18 @@ class CmatSelectTableComponent {
         }
     }
     openedChange(opened) {
-        if (this.resetFiltersOnOpen !== false || (!this._matOptions.length && this.overallSearchEnabled) || (this.overallSearchEnabled && this._matOptions.length === 1)) {
+        const overallSearchEnabled = this.overallSearchEnabled();
+        if (this.resetFiltersOnOpen() !== false ||
+            (!this._matOptions().length && overallSearchEnabled) ||
+            (overallSearchEnabled && this._matOptions().length === 1)) {
             this._resetFilters();
         }
-        this.overallSearchVisibleState.set(!!this.overallSearchVisible);
-        if (this.resetSortOnOpen !== false) {
-            this._sort.sort({ id: '', start: 'asc', disableClear: false });
+        this.overallSearchVisibleState.set(!!this.overallSearchVisible());
+        if (this.resetSortOnOpen() !== false) {
+            const sortInstance = this._sort();
+            if (sortInstance) {
+                sortInstance.sort({ id: '', start: 'asc', disableClear: false });
+            }
         }
         if (!opened) {
             this.value = this._getCommittedValue();
@@ -317,8 +364,11 @@ class CmatSelectTableComponent {
             this.closed.emit(!opened);
             return;
         }
-        const table = this._table;
-        table._headerRowDefChanged = true;
+        const tableInstance = this._table();
+        if (tableInstance) {
+            const table = tableInstance;
+            table._headerRowDefChanged = true;
+        }
         setTimeout(() => this._expandPanelForTableRows(), 1);
     }
     filterFormControl(key) {
@@ -332,17 +382,21 @@ class CmatSelectTableComponent {
         return rows.map(row => this._resolveTriggerLabel(row)).join(', ');
     }
     getTriggerLabel() {
-        return this.customTriggerLabelFn?.(this.completeRowList) ?? this.simpleTriggerLabelFn(this.completeRowList);
+        return (this.customTriggerLabelFn()?.(this.completeRowList) ??
+            this.simpleTriggerLabelFn(this.completeRowList));
     }
     toggleOverallSearch() {
         this.overallSearchVisibleState.update(value => !value);
         this._resetFilters();
         if (this.overallSearchVisibleState()) {
-            setTimeout(() => this._matSelectSearch.focus());
+            const searchInstance = this._matSelectSearch();
+            if (searchInstance) {
+                setTimeout(() => searchInstance.focus());
+            }
         }
     }
     addNullRow() {
-        return !this.multiple && this.canNull;
+        return !this.multiple() && (this.canNull() ?? false);
     }
     get hasNullRow() {
         return this.addNullRow();
@@ -351,18 +405,24 @@ class CmatSelectTableComponent {
         this.completeRowList.splice(0);
         this._completeValueList.splice(0);
         if (value) {
-            if (this.multiple && Array.isArray(value)) {
+            const multiple = this.multiple();
+            if (multiple && Array.isArray(value)) {
                 value.forEach((v) => this._updateCompleteRowList(v, true));
             }
-            else if (!this.multiple) {
+            else if (!multiple) {
                 this._updateCompleteRowList(value, true);
             }
         }
-        this.value = this.completeRowList.length > 0 ? [...this.completeRowList] : value;
+        this.value =
+            this.completeRowList.length > 0 ? [...this.completeRowList] : value;
         if (this._matSelect) {
             this._matSelect.writeValue(this.value);
             this._matSelect._onChange(this.value);
         }
+        // 确保 selectControl 与当前值同步
+        if (this.selectControl) {
+            this.selectControl.setValue(this.value, { emitEvent: false });
+        }
     }
     _updateCompleteRowList(value, selected) {
         if (isNil(value)) {
@@ -377,7 +437,7 @@ class CmatSelectTableComponent {
             if (!row) {
                 return;
             }
-            const exists = this.completeRowList.some(item => item[this.keyParam] === row[this.keyParam]);
+            const exists = this.completeRowList.some(item => item[this.keyParam()] === row[this.keyParam()]);
             if (!exists) {
                 this.completeRowList.push(row);
                 this._completeValueList.push(row.id);
@@ -403,17 +463,17 @@ class CmatSelectTableComponent {
             .filter((key) => {
             const filterControl = this._filterControls.get(key);
             const value = filterControl?.value;
-            return !isNil(value)
-                && ((isArray(value) && value.length > 0)
-                    || (typeof value === 'string' && value.trim().length > 0)
-                    || (typeof value === 'number' && `${value}`.trim().length > 0));
+            return (!isNil(value) &&
+                ((isArray(value) && value.length > 0) ||
+                    (typeof value === 'string' && value.trim().length > 0) ||
+                    (typeof value === 'number' && `${value}`.trim().length > 0)));
         })
             .forEach((key) => {
             const column = this.tableColumnsMap.get(key);
             const filterControl = this._filterControls.get(key);
             filters[key] = {
                 filter: column?.filter,
-                value: filterControl?.value
+                value: filterControl?.value,
             };
         });
         const filterKeys = Object.keys(filters);
@@ -455,7 +515,9 @@ class CmatSelectTableComponent {
                 }
                 const cellValueLC = typeof cellValue === 'string'
                     ? cellValue.toLowerCase()
-                    : typeof cellValue === 'number' || typeof cellValue === 'boolean' || typeof cellValue === 'bigint'
+                    : typeof cellValue === 'number' ||
+                        typeof cellValue === 'boolean' ||
+                        typeof cellValue === 'bigint'
                         ? String(cellValue).toLowerCase()
                         : '';
                 if (cellValueLC.includes(filterValueLC)) {
@@ -470,8 +532,7 @@ class CmatSelectTableComponent {
     }
     _resetFilters() {
         this.overallFilterControl.setValue('');
-        Object.keys(this._filterControls.controls)
-            .forEach(key => this._filterControls.get(key)?.setValue(''));
+        Object.keys(this._filterControls.controls).forEach(key => this._filterControls.get(key)?.setValue(''));
     }
     _sortingDataAccessor(data, active) {
         const value = data[active];
@@ -510,23 +571,26 @@ class CmatSelectTableComponent {
                 bValue = bValue.getTime();
             }
             if (isString(aValue) && isString(bValue)) {
-                return (aValue).localeCompare(bValue) * (direction === 'asc' ? 1 : -1);
+                return aValue.localeCompare(bValue) * (direction === 'asc' ? 1 : -1);
             }
             aValue = isNaN(aValue) ? `${aValue}` : +aValue;
             bValue = isNaN(bValue) ? `${bValue}` : +bValue;
             if (isString(aValue) && isNumber(bValue)) {
-                return (1) * (direction === 'asc' ? 1 : -1);
+                return 1 * (direction === 'asc' ? 1 : -1);
             }
             if (isNumber(aValue) && isString(bValue)) {
-                return (-1) * (direction === 'asc' ? 1 : -1);
+                return -1 * (direction === 'asc' ? 1 : -1);
             }
             return (aValue > bValue ? 1 : -1) * (direction === 'asc' ? 1 : -1);
         });
     }
     _checkAndResetSelection() {
-        if (this._matSelect.value && isArray(this._matSelect.value) && this._matSelect.value.length < 1
-            && !isNil(this.resetOptionAction)) {
-            this.resetOptionAction();
+        const resetOptionAction = this.resetOptionAction();
+        if (this._matSelect.value &&
+            isArray(this._matSelect.value) &&
+            this._matSelect.value.length < 1 &&
+            !isNil(resetOptionAction)) {
+            resetOptionAction();
         }
     }
     _matchesColumnFilter(row, filterKey, filter) {
@@ -556,7 +620,8 @@ class CmatSelectTableComponent {
         if (isNil(comparator) || comparator === 'equals') {
             return normalizedFilterValue === cellValue;
         }
-        if (typeof cellValue !== 'string' || typeof normalizedFilterValue !== 'string') {
+        if (typeof cellValue !== 'string' ||
+            typeof normalizedFilterValue !== 'string') {
             return false;
         }
         const cellValueLC = cellValue.toLowerCase();
@@ -578,18 +643,8 @@ class CmatSelectTableComponent {
         }
         return true;
     }
-    _buildTableOptions(options) {
-        const tableOptions = [];
-        for (const row of this.tableDataSource()) {
-            const rowOption = options[String(row.id)];
-            if (!isNil(rowOption)) {
-                tableOptions.push(rowOption);
-            }
-        }
-        return tableOptions;
-    }
     _getMatOptionById(id) {
-        return this._matOptions.find(option => option.id === id);
+        return this._matOptions().find(option => option.id === id);
     }
     getFilterContext(column) {
         return { column };
@@ -599,9 +654,20 @@ class CmatSelectTableComponent {
     }
     _expandPanelForTableRows() {
         let tableAdditionalHeight = 0;
-        this._table._getRenderedRows(this._table._headerRowOutlet).forEach(row => tableAdditionalHeight += row.getBoundingClientRect().height);
-        this._table._getRenderedRows(this._table._footerRowOutlet).forEach(row => tableAdditionalHeight += row.getBoundingClientRect().height);
-        const panelElement = this._matSelect.panel.nativeElement;
+        const tableInstance = this._table();
+        if (!tableInstance) {
+            return;
+        }
+        tableInstance
+            ._getRenderedRows(tableInstance._headerRowOutlet)
+            .forEach(row => (tableAdditionalHeight += row.getBoundingClientRect().height));
+        tableInstance
+            ._getRenderedRows(tableInstance._footerRowOutlet)
+            .forEach(row => (tableAdditionalHeight += row.getBoundingClientRect().height));
+        const panelElement = this._matSelect?.panel?.nativeElement;
+        if (!panelElement) {
+            return;
+        }
         const panelHeight = panelElement.getBoundingClientRect().height;
         if (!isNaN(panelHeight)) {
             panelElement.style.maxHeight = `${panelHeight + tableAdditionalHeight}px`;
@@ -611,20 +677,27 @@ class CmatSelectTableComponent {
         if (this.completeRowList.length === 0) {
             return null;
         }
-        return this.multiple ? [...this.completeRowList] : { ...this.completeRowList[0] };
+        return this.multiple()
+            ? [...this.completeRowList]
+            : { ...this.completeRowList[0] };
     }
     _syncMatSelectValue(value) {
         this._matSelect.writeValue(value);
         this._matSelect._onChange(value);
     }
     _removeFilteredRow(data, index) {
-        data.splice(index, 1).forEach(item => this.filteredOutRows[`${item.id}`] = item);
+        data
+            .splice(index, 1)
+            .forEach(item => (this.filteredOutRows[`${item.id}`] = item));
     }
     _resolveTriggerLabel(row) {
         if (isNil(row)) {
             return '';
         }
-        const template = typeof this.customTriggerLabelTemplate === 'string' ? this.customTriggerLabelTemplate.trim() : '';
+        const customTriggerLabelTemplate = this.customTriggerLabelTemplate();
+        const template = typeof customTriggerLabelTemplate === 'string'
+            ? customTriggerLabelTemplate.trim()
+            : '';
         if (template.length === 0) {
             return `${row.id}`;
         }
@@ -635,7 +708,10 @@ class CmatSelectTableComponent {
             if (isNil(value)) {
                 return '';
             }
-            if (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean' && typeof value !== 'bigint') {
+            if (typeof value !== 'string' &&
+                typeof value !== 'number' &&
+                typeof value !== 'boolean' &&
+                typeof value !== 'bigint') {
                 return '';
             }
             hasMatch = true;
@@ -644,76 +720,63 @@ class CmatSelectTableComponent {
         return hasMatch ? substitution.trim() : `${row.id}`;
     }
     _getTriggerRows(value) {
-        if (isNil(this.triggerLabelSort)) {
+        const triggerLabelSort = this.triggerLabelSort();
+        if (isNil(triggerLabelSort)) {
             return value;
         }
-        return this._sortData([...value], this.triggerLabelSort.active, this.triggerLabelSort.direction);
+        return this._sortData([...value], triggerLabelSort.active, triggerLabelSort.direction);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatSelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatSelectTableComponent, isStandalone: true, selector: "cmat-select-table", inputs: { id: "id", dataSource: "dataSource", noEntriesFoundLabel: "noEntriesFoundLabel", showNoFoundLabel: "showNoFoundLabel", isPhone: "isPhone", multiple: "multiple", overallSearchEnabled: "overallSearchEnabled", overallSearchVisible: "overallSearchVisible", resetSortOnOpen: "resetSortOnOpen", resetFiltersOnOpen: "resetFiltersOnOpen", customTriggerLabelFn: "customTriggerLabelFn", triggerLabelSort: "triggerLabelSort", customTriggerLabelTemplate: "customTriggerLabelTemplate", canNull: "canNull", defaultSort: "defaultSort", resetOptionAction: "resetOptionAction", keyParam: "keyParam", compareWith: "compareWith", placeholder: "placeholder", value: "value", required: "required", disabled: "disabled" }, outputs: { closed: "closed" }, host: { listeners: { "document:click": "clickedOut()" }, properties: { "attr.id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: CmatSelectTableComponent }], viewQueries: [{ propertyName: "_matSelectSearch", first: true, predicate: CmatSelectSearchComponent, descendants: true }, { propertyName: "_sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "_table", first: true, predicate: MatTable, descendants: true }, { propertyName: "matSelect", first: true, predicate: ["componentSelect"], descendants: true }, { propertyName: "_matOptions", predicate: MatOption, descendants: true }], exportAs: ["cmatSelectTable"], usesOnChanges: true, ngImport: i0, template: "@if(multiple){\r\n<mat-select #componentSelect multiple disableRipple \r\n    [placeholder]=\"placeholder\" [required]=\"required\" [formControl]=\"selectControl\" [compareWith]=\"compareWith\"\r\n    (focusin)=\"onFocusIn()\" (openedChange)=\"openedChange($event)\">\r\n    <mat-select-trigger>\r\n    @let triggerLabel = getTriggerLabel();\r\n    {{ triggerLabel }}\r\n    </mat-select-trigger>\r\n\r\n    <div class=\"h-full overflow-y-auto scrollbar-custom\" [ngClass]=\"{'hidden-header': overallSearchVisibleState()}\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        @if(overallSearchEnabled){\r\n        <mat-option [ngClass]=\"{'hidden':!overallSearchVisibleState() === true}\">\r\n            <cmat-select-search [showNoFoundLabel]=\"showNoFoundLabel\" [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\r\n                [formControl]=\"overallFilterControl\" [clearSearchInput]=\"resetFiltersOnOpen\">\r\n            </cmat-select-search>\r\n        </mat-option>\r\n\r\n        @if(!isPhone){\r\n        <div class=\"overall-search-toggle\" [ngStyle]=\"{ height: overallSearchVisibleState() ? '48px' : '55.4px' }\">\r\n            <mat-icon color=\"primary\"\r\n                [svgIcon]=\"overallSearchVisibleState() ? 'mat_outline:arrow_back' : 'mat_outline:search'\"\r\n                (click)=\"toggleOverallSearch()\">\r\n            </mat-icon>\r\n        </div>\r\n        }@else{\r\n        <div class=\"overall-search-toggle\" [ngStyle]=\"{ height: overallSearchVisibleState() ? '48px' : '55.4px' }\">\r\n            <mat-icon color=\"primary\" [svgIcon]=\"'mat_outline:search'\">\r\n            </mat-icon>\r\n        </div>\r\n        }\r\n        }\r\n        <table #table mat-table matSort [dataSource]=\"tableDataSource()\">\r\n            @for (columnKey of tableColumns(); track $index) {\r\n            @let column = tableColumnsMap.get(columnKey);\r\n            @switch (columnKey) {\r\n            @case ('_selection') {\r\n            <ng-container [matColumnDef]=\"columnKey\">\r\n                <th *matHeaderCellDef mat-header-cell [ngClass]=\"{selection: true, hidden: !multiple}\"></th>\r\n                <td *matCellDef=\"let row\" mat-cell [ngClass]=\"{selection: true, hidden: !multiple}\">\r\n                    <mat-option [value]=\"row\"></mat-option>\r\n                </td>\r\n            </ng-container>\r\n            }\r\n            @default {\r\n            <ng-container [matColumnDef]=\"columnKey\">\r\n                <th *matHeaderCellDef mat-header-cell mat-sort-header\r\n                    [disabled]=\"!column?.sortable\">\r\n                    @if(!column?.sortable){\r\n                    <div>{{column?.name}}</div>\r\n                    }@else {\r\n                    @switch (column?.filter?.type) {\r\n                    @case ('string') {\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeString\"\r\n                        [ngTemplateOutletContext]=\"getFilterContext(column)\"></ng-container>\r\n                    }\r\n                    @case('number'){\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeNumber\"\r\n                        [ngTemplateOutletContext]=\"getFilterContext(column)\"></ng-container>\r\n                    }\r\n                    @default {\r\n                    <div>{{column?.name}}</div>\r\n                    }\r\n                    }\r\n                    }\r\n                </th>\r\n                <td *matCellDef=\"let row\" mat-cell>\r\n                    <div class=\" has-label-on-mobile\" [attr.data-label]=\"column?.name+':'\">\r\n                        {{getCellValue(row, columnKey)}}\r\n                    </div>\r\n\r\n                </td>\r\n            </ng-container>\r\n            }\r\n            }\r\n            }\r\n\r\n            <tr *matHeaderRowDef=\"tableColumns(); sticky: true\" mat-header-row></tr>\r\n            <tr *matRowDef=\"let row; columns: tableColumns();\" mat-row (click)=\"emulateMatOptionClick($event)\"></tr>\r\n        </table>\r\n    </div>\r\n</mat-select>\r\n}@else {\r\n<mat-select #componentSelect disableRipple \r\n    [placeholder]=\"placeholder\" [required]=\"required\" [formControl]=\"selectControl\" [compareWith]=\"compareWith\"\r\n    (focusin)=\"onFocusIn()\" (openedChange)=\"openedChange($event)\">\r\n    <mat-select-trigger>\r\n        @if(!customTriggerLabelFn){\r\n        {{simpleTriggerLabelFn(completeRowList)}}\r\n        }@else {\r\n        {{customTriggerLabelFn(completeRowList)}}\r\n        }\r\n    </mat-select-trigger>\r\n\r\n    <div class=\"h-full overflow-y-auto scrollbar-custom\" [ngClass]=\"{'hidden-header': overallSearchVisibleState()}\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        @if(overallSearchEnabled){\r\n        <mat-option [ngClass]=\"{'hidden':!overallSearchVisibleState() === true}\">\r\n            <cmat-select-search [showNoFoundLabel]=\"showNoFoundLabel\" [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\r\n                [formControl]=\"overallFilterControl\" [clearSearchInput]=\"resetFiltersOnOpen\">\r\n            </cmat-select-search>\r\n        </mat-option>\r\n\r\n        @if(!isPhone){\r\n        <div class=\"overall-search-toggle\" [ngStyle]=\"{ height: overallSearchVisibleState() ? '48px' : '55.4px' }\">\r\n            <mat-icon color=\"primary\"\r\n                [svgIcon]=\"overallSearchVisibleState() ? 'mat_outline:arrow_back' : 'mat_outline:search'\"\r\n                (click)=\"toggleOverallSearch()\">\r\n            </mat-icon>\r\n        </div>\r\n        }@else{\r\n        <div class=\"overall-search-toggle\" [ngStyle]=\"{ height: overallSearchVisibleState() ? '48px' : '55.4px' }\">\r\n            <mat-icon color=\"primary\" [svgIcon]=\"'mat_outline:search'\">\r\n            </mat-icon>\r\n        </div>\r\n        }\r\n        }\r\n        <table #table mat-table matSort [dataSource]=\"tableDataSource()\">\r\n            @for (columnKey of tableColumns(); track $index) {\r\n            @let column = tableColumnsMap.get(columnKey);\r\n            @switch (columnKey) {\r\n            @case ('_selection') {\r\n            <ng-container [matColumnDef]=\"columnKey\">\r\n                <th *matHeaderCellDef mat-header-cell class=\"selection\"></th>\r\n                <td *matCellDef=\"let row\" mat-cell class=\"selection\">\r\n                    @if(row.id===null){\r\n                    <mat-option></mat-option>\r\n                    }@else {\r\n                    <mat-option [value]=\"row\"></mat-option>\r\n                    }\r\n                </td>\r\n            </ng-container>\r\n            }\r\n            @default {\r\n            <ng-container [matColumnDef]=\"columnKey\">\r\n                <th *matHeaderCellDef mat-header-cell mat-sort-header\r\n                    [disabled]=\"!column?.sortable\">\r\n                    @if(!column?.sortable){\r\n                    <div>{{column?.name}}</div>\r\n                    }@else {\r\n                    @switch (column?.filter?.type) {\r\n                    @case ('string') {\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeString\"\r\n                        [ngTemplateOutletContext]=\"getFilterContext(column)\"></ng-container>\r\n                    }\r\n                    @case('number'){\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeNumber\"\r\n                        [ngTemplateOutletContext]=\"getFilterContext(column)\"></ng-container>\r\n                    }\r\n                    @default {\r\n                    <div>{{column?.name}}</div>\r\n                    }\r\n                    }\r\n                    }\r\n                </th>\r\n                <td *matCellDef=\"let row\" mat-cell\r\n                    [colSpan]=\"hasNullRow && row.id === null && $index === 1 ? tableColumns.length : 1\"\r\n                    [ngStyle]=\"{display: hasNullRow && row.id === null && $index !== 1 ? 'none' : ''}\">\r\n                    <div class=\" has-label-on-mobile\" [attr.data-label]=\"column?.name+':'\">\r\n                        {{hasNullRow && row.id === null && $index === 1 ? '\u7A7A' : getCellValue(row, columnKey)}}\r\n                    </div>                    \r\n                </td>\r\n            </ng-container>\r\n            }\r\n            }\r\n            }\r\n\r\n            <tr *matHeaderRowDef=\"tableColumns(); sticky: true\" mat-header-row></tr>\r\n            <tr *matRowDef=\"let row; columns: tableColumns();\" mat-row (click)=\"emulateMatOptionClick($event)\"></tr>\r\n        </table>\r\n    </div>\r\n</mat-select>\r\n}\r\n<ng-template #filterTypeString let-column='column'>\r\n    <mat-form-field class=\"filter\" (click)=\"$event.stopPropagation()\">\r\n        <input matInput [formControl]=\"filterFormControl(column.key)\" [placeholder]=\"column.name\"\r\n            (keydown)=\"$event.stopPropagation()\" (keyup)=\"$event.stopPropagation()\"\r\n            (keypress)=\"$event.stopPropagation()\" />\r\n    </mat-form-field>\r\n</ng-template>\r\n\r\n<ng-template #filterTypeNumber let-column='column'>\r\n    <mat-form-field class=\"filter\" (click)=\"$event.stopPropagation()\">\r\n        <input matInput cmatDigitOnly [min]=\"0\" [formControl]=\"filterFormControl(column.key)\"\r\n            [placeholder]=\"column.name\" (keydown)=\"$event.stopPropagation()\" (keyup)=\"$event.stopPropagation()\"\r\n            (keypress)=\"$event.stopPropagation()\" />\r\n    </mat-form-field>\r\n</ng-template>\r\n", styles: ["cmat-select-table{display:block;width:100%}.cmat-select-search-table-panel{min-width:max-content;max-width:100%;min-height:240px;padding-top:0!important}.cmat-select-search-table-panel .overall-search-toggle{z-index:102;display:flex;cursor:pointer;position:absolute;width:48px;height:48px;align-items:center;left:12px;top:0}.cmat-select-search-table-panel .hidden-header table thead{display:none}.cmat-select-search-table-panel table{width:100%}.cmat-select-search-table-panel table tr{cursor:pointer;height:48px;max-height:48px}.cmat-select-search-table-panel table tr mat-option{height:48px;max-height:48px}.cmat-select-search-table-panel table tr td{-webkit-user-select:none;user-select:none;border-bottom:0!important;box-shadow:inset 0 -1px var(--cmat-border)}.cmat-select-search-table-panel table tr th .mat-sort-header-container{height:55px}.cmat-select-search-table-panel table tr th .mat-sort-header-container mat-form-field .mat-form-field-infix{width:initial}.cmat-select-search-table-panel table tr th[aria-sort] .mat-sort-header-arrow{opacity:1!important}.cmat-select-search-table-panel table tr td mat-option,.cmat-select-search-table-panel table tr th mat-option{background:transparent!important}.cmat-select-search-table-panel table tr td.selection,.cmat-select-search-table-panel table tr th.selection{width:48px;padding:0;margin:0}.cmat-select-search-table-panel table tr:has(td:first-child mat-option[aria-selected=true]){background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))!important;color:rgba(var(--cmat-primary-rgb),1)!important}.cmat-select-search-table-panel .cmat-select-search-inner>span{visibility:hidden}\n"], dependencies: [{ kind: "component", type: CmatSelectSearchComponent, selector: "cmat-select-search", inputs: ["placeholderLabel", "type", "noEntriesFoundLabel", "showNoFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"], exportAs: ["cmatSelectSearch"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.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: "ngmodule", type: MatSortModule }, { kind: "directive", type: i8.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: CmatDigitOnlyDirective, selector: "[cmatDigitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    _setPanelClass() {
+        let panelClass = [
+            'overflow-hidden',
+            'cmat-select-search-table-panel',
+        ];
+        if (this._matSelect.panelClass) {
+            if (Array.isArray(this._matSelect.panelClass)) {
+                this._matSelect.panelClass = [this._matSelect.panelClass, ...panelClass];
+            }
+            else if (typeof this._matSelect.panelClass === 'string') {
+                this._matSelect.panelClass = [
+                    this._matSelect.panelClass,
+                    ...panelClass,
+                ];
+            }
+            else if (typeof this._matSelect.panelClass === 'object') {
+                const panelClassObject = this._matSelect.panelClass;
+                panelClass.forEach((i) => {
+                    panelClassObject[i] = true;
+                });
+            }
+        }
+        else {
+            this._matSelect.panelClass = panelClass;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatSelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatSelectTableComponent, isStandalone: true, selector: "cmat-select-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", 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 }, isPhone: { classPropertyName: "isPhone", publicName: "isPhone", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, overallSearchEnabled: { classPropertyName: "overallSearchEnabled", publicName: "overallSearchEnabled", isSignal: true, isRequired: false, transformFunction: null }, overallSearchVisible: { classPropertyName: "overallSearchVisible", publicName: "overallSearchVisible", isSignal: true, isRequired: false, transformFunction: null }, resetSortOnOpen: { classPropertyName: "resetSortOnOpen", publicName: "resetSortOnOpen", isSignal: true, isRequired: false, transformFunction: null }, resetFiltersOnOpen: { classPropertyName: "resetFiltersOnOpen", publicName: "resetFiltersOnOpen", isSignal: true, isRequired: false, transformFunction: null }, customTriggerLabelFn: { classPropertyName: "customTriggerLabelFn", publicName: "customTriggerLabelFn", isSignal: true, isRequired: false, transformFunction: null }, triggerLabelSort: { classPropertyName: "triggerLabelSort", publicName: "triggerLabelSort", isSignal: true, isRequired: false, transformFunction: null }, customTriggerLabelTemplate: { classPropertyName: "customTriggerLabelTemplate", publicName: "customTriggerLabelTemplate", isSignal: true, isRequired: false, transformFunction: null }, canNull: { classPropertyName: "canNull", publicName: "canNull", isSignal: true, isRequired: false, transformFunction: null }, defaultSort: { classPropertyName: "defaultSort", publicName: "defaultSort", isSignal: true, isRequired: false, transformFunction: null }, resetOptionAction: { classPropertyName: "resetOptionAction", publicName: "resetOptionAction", isSignal: true, isRequired: false, transformFunction: null }, keyParam: { classPropertyName: "keyParam", publicName: "keyParam", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "document:click": "clickedOut()" }, properties: { "attr.id": "id" } }, providers: [
+            { provide: MatFormFieldControl, useExisting: CmatSelectTableComponent },
+        ], viewQueries: [{ propertyName: "_matSelectSearch", first: true, predicate: CmatSelectSearchComponent, descendants: true, isSignal: true }, { propertyName: "_sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "_table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "_matOptions", predicate: MatOption, descendants: true, isSignal: true }, { propertyName: "_matSelectSignal", first: true, predicate: ["componentSelect"], descendants: true, isSignal: true }], exportAs: ["cmatSelectTable"], usesOnChanges: true, ngImport: i0, template: "@if (multiple()) {\r\n<mat-select #componentSelect multiple disableRipple [placeholder]=\"placeholder\" [required]=\"required\"\r\n  [formControl]=\"selectControl\" [compareWith]=\"compareWith()\" (focusin)=\"onFocusIn()\"\r\n  (openedChange)=\"openedChange($event)\">\r\n  <mat-select-trigger>\r\n    @let triggerLabel = getTriggerLabel();\r\n    {{ triggerLabel }}\r\n  </mat-select-trigger>\r\n\r\n  <div class=\"h-full overflow-y-auto scrollbar-custom\" [ngClass]=\"{ 'hidden-header': overallSearchVisibleState() }\"\r\n    (focusout)=\"onFocusOut($event)\">\r\n    @if (overallSearchEnabled()) {\r\n    <mat-option [ngClass]=\"{ hidden: !overallSearchVisibleState() === true }\">\r\n      <cmat-select-search \r\n        [showNoFoundLabel]=\"showNoFoundLabel()\" \r\n        [noEntriesFoundLabel]=\"noEntriesFoundLabel()\"\r\n        [formControl]=\"overallFilterControl\" \r\n        [clearSearchInput]=\"resetFiltersOnOpen()??false\">\r\n      </cmat-select-search>\r\n    </mat-option>\r\n\r\n    @if (!isPhone()) {\r\n    <div class=\"overall-search-toggle\" [ngStyle]=\"{\r\n              height: overallSearchVisibleState() ? '48px' : '55.4px',\r\n            }\">\r\n      <mat-icon color=\"primary\" [svgIcon]=\"\r\n                overallSearchVisibleState()\r\n                  ? 'mat_outline:arrow_back'\r\n                  : 'mat_outline:search'\r\n              \" (click)=\"toggleOverallSearch()\">\r\n      </mat-icon>\r\n    </div>\r\n    }\r\n    }\r\n    <table #table mat-table matSort [dataSource]=\"tableDataSource()\">\r\n      @for (columnKey of tableColumns(); track $index) {\r\n      @let column = tableColumnsMap.get(columnKey);\r\n      @switch (columnKey) {\r\n      @case (\"_selection\") {\r\n      <ng-container [matColumnDef]=\"columnKey\">\r\n        <th *matHeaderCellDef mat-header-cell [ngClass]=\"{ selection: true, hidden: !multiple() }\"></th>\r\n        <td *matCellDef=\"let row\" mat-cell [ngClass]=\"{ selection: true, hidden: !multiple() }\">\r\n          <mat-option [value]=\"row\"></mat-option>\r\n        </td>\r\n      </ng-container>\r\n      }\r\n      @default {\r\n      <ng-container [matColumnDef]=\"columnKey\">\r\n        <th *matHeaderCellDef mat-header-cell mat-sort-header [disabled]=\"!column?.sortable\">\r\n          @if (!column?.sortable) {\r\n          <div>{{ column?.name }}</div>\r\n          } @else {\r\n          @switch (column?.filter.type) {\r\n          @case (\"string\") {\r\n          <ng-container [ngTemplateOutlet]=\"filterTypeString\"\r\n            [ngTemplateOutletContext]=\"getFilterContext(column)\"></ng-container>\r\n          }\r\n          @case (\"number\") {\r\n          <ng-container [ngTemplateOutlet]=\"filterTypeNumber\"\r\n            [ngTemplateOutletContext]=\"getFilterContext(column)\"></ng-container>\r\n          }\r\n          @default {\r\n          <div>{{ column?.name }}</div>\r\n          }\r\n          }\r\n          }\r\n        </th>\r\n        <td *matCellDef=\"let row\" mat-cell>\r\n          <div class=\"has-label-on-mobile\" [attr.data-label]=\"column?.name + ':'\">\r\n            {{ getCellValue(row, columnKey) }}\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n      }\r\n      }\r\n      }\r\n \r\n      <tr *matHeaderRowDef=\"tableColumns(); sticky: true\" mat-header-row></tr>\r\n      <tr *matRowDef=\"let row; columns: tableColumns()\" mat-row (click)=\"emulateMatOptionClick($event)\"></tr>\r\n    </table>\r\n  </div>\r\n</mat-select>\r\n} @else {\r\n<mat-select #componentSelect disableRipple [placeholder]=\"placeholder\" [required]=\"required\"\r\n  [formControl]=\"selectControl\" [compareWith]=\"compareWith()\" (focusin)=\"onFocusIn()\"\r\n  (openedChange)=\"openedChange($event)\">\r\n  <mat-select-trigger>\r\n    @if (!customTriggerLabelFn()) {\r\n    {{ simpleTriggerLabelFn(completeRowList) }}\r\n    } @else {\r\n    {{ customTriggerLabelFn()!(completeRowList) }}\r\n    }\r\n  </mat-select-trigger>\r\n\r\n  <div class=\"h-full overflow-y-auto scrollbar-custom\" [ngClass]=\"{ 'hidden-header': overallSearchVisibleState() }\"\r\n    (focusout)=\"onFocusOut($event)\">\r\n    @if (overallSearchEnabled()) {\r\n    <mat-option [ngClass]=\"{ hidden: !overallSearchVisibleState() === true }\">\r\n      <cmat-select-search [showNoFoundLabel]=\"showNoFoundLabel()\" [noEntriesFoundLabel]=\"noEntriesFoundLabel()\"\r\n        [formControl]=\"overallFilterControl\" [clearSearchInput]=\"resetFiltersOnOpen()??false\">\r\n      </cmat-select-search>\r\n    </mat-option>\r\n\r\n    @if (!isPhone()) {\r\n    <div class=\"overall-search-toggle\" [ngStyle]=\"{\r\n              height: overallSearchVisibleState() ? '48px' : '55.4px',\r\n            }\">\r\n      <mat-icon color=\"primary\" [svgIcon]=\"\r\n                overallSearchVisibleState()\r\n                  ? 'mat_outline:arrow_back'\r\n                  : 'mat_outline:search'\r\n              \" (click)=\"toggleOverallSearch()\">\r\n      </mat-icon>\r\n    </div>\r\n    }\r\n    }\r\n    <table #table mat-table matSort [dataSource]=\"tableDataSource()\">\r\n      @for (columnKey of tableColumns(); track $index) {\r\n      @let column = tableColumnsMap.get(columnKey);\r\n      @switch (columnKey) {\r\n      @case (\"_selection\") {\r\n      <ng-container [matColumnDef]=\"columnKey\">\r\n        <th *matHeaderCellDef mat-header-cell class=\"selection\"></th>\r\n        <td *matCellDef=\"let row\" mat-cell class=\"selection\">\r\n          @if (row.id === null) {\r\n          <mat-option></mat-option>\r\n          } @else {\r\n          <mat-option [value]=\"row\"></mat-option>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n      }\r\n      @default {\r\n      <ng-container [matColumnDef]=\"columnKey\">\r\n        <th *matHeaderCellDef mat-header-cell mat-sort-header [disabled]=\"!column?.sortable\">\r\n          @if (!column?.sortable) {\r\n          <div>{{ column?.name }}</div>\r\n          } @else {\r\n          @switch (column?.filter.type) {\r\n          @case (\"string\") {\r\n          <ng-container [ngTemplateOutlet]=\"filterTypeString\"\r\n            [ngTemplateOutletContext]=\"getFilterContext(column)\"></ng-container>\r\n          }\r\n          @case (\"number\") {\r\n          <ng-container [ngTemplateOutlet]=\"filterTypeNumber\"\r\n            [ngTemplateOutletContext]=\"getFilterContext(column)\"></ng-container>\r\n          }\r\n          @default {\r\n          <div>{{ column?.name }}</div>\r\n          }\r\n          }\r\n          }\r\n        </th>\r\n        <td *matCellDef=\"let row\" mat-cell [colSpan]=\"\r\n                    hasNullRow && row.id === null && $index === 1\r\n                      ? tableColumns.length\r\n                      : 1\r\n                  \" [ngStyle]=\"{\r\n                    display:\r\n                      hasNullRow && row.id === null && $index !== 1\r\n                        ? 'none'\r\n                        : '',\r\n                  }\">\r\n          <div class=\"has-label-on-mobile\" [attr.data-label]=\"column?.name + ':'\">\r\n            {{\r\n            hasNullRow && row.id === null && $index === 1\r\n            ? \"\u7A7A\"\r\n            : getCellValue(row, columnKey)\r\n            }}\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n      }\r\n      }\r\n      }\r\n\r\n      <tr *matHeaderRowDef=\"tableColumns(); sticky: true\" mat-header-row></tr>\r\n      <tr *matRowDef=\"let row; columns: tableColumns()\" mat-row (click)=\"emulateMatOptionClick($event)\"></tr>\r\n    </table>\r\n  </div>\r\n</mat-select>\r\n}\r\n<ng-template #filterTypeString let-column=\"column\">\r\n  <mat-form-field appearance=\"fill\" class=\"filter\" (click)=\"$event.stopPropagation()\">\r\n    <input matInput [formControl]=\"filterFormControl(column.key)\" [placeholder]=\"column.name\"\r\n      (keydown)=\"$event.stopPropagation()\" (keyup)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\" />\r\n  </mat-form-field>\r\n</ng-template>\r\n\r\n<ng-template #filterTypeNumber let-column=\"column\">\r\n  <mat-form-field appearance=\"fill\" class=\"filter\" (click)=\"$event.stopPropagation()\">\r\n    <input matInput cmatDigitOnly [min]=\"0\" [formControl]=\"filterFormControl(column.key)\" [placeholder]=\"column.name\"\r\n      (keydown)=\"$event.stopPropagation()\" (keyup)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\" />\r\n  </mat-form-field>\r\n</ng-template>", styles: ["cmat-select-table{display:block;width:100%}.cmat-select-search-table-panel{min-width:max-content;max-width:100%;min-height:240px;padding-top:0!important}.cmat-select-search-table-panel .overall-search-toggle{z-index:102;display:flex;cursor:pointer;position:absolute;width:48px;height:48px;align-items:center;left:12px;top:0;pointer-events:auto}.cmat-select-search-table-panel .overall-search-toggle mat-icon{pointer-events:auto;-webkit-user-select:none;user-select:none}.cmat-select-search-table-panel .hidden-header table thead{display:none}.cmat-select-search-table-panel table{width:100%}.cmat-select-search-table-panel table tr{cursor:pointer;height:48px;max-height:48px}.cmat-select-search-table-panel table tr mat-option{height:48px;max-height:48px}.cmat-select-search-table-panel table tr td{-webkit-user-select:none;user-select:none;border-bottom:0!important;box-shadow:inset 0 -1px var(--cmat-border)}.cmat-select-search-table-panel table tr th .mat-sort-header-container{height:55px}.cmat-select-search-table-panel table tr th .mat-sort-header-container mat-form-field .mat-form-field-infix{width:initial}.cmat-select-search-table-panel table tr th[aria-sort] .mat-sort-header-arrow{opacity:1!important}.cmat-select-search-table-panel table tr td mat-option,.cmat-select-search-table-panel table tr th mat-option{background:transparent!important}.cmat-select-search-table-panel table tr td.selection,.cmat-select-search-table-panel table tr th.selection{width:48px;padding:0;margin:0}.cmat-select-search-table-panel table tr:has(td:first-child mat-option[aria-selected=true]){background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))!important;color:rgba(var(--cmat-primary-rgb),1)!important}.cmat-select-search-table-panel .cmat-select-search-inner>span{visibility:hidden}\n"], dependencies: [{ kind: "component", type: CmatSelectSearchComponent, selector: "cmat-select-search", inputs: ["placeholderLabel", "type", "noEntriesFoundLabel", "showNoFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "debounceTime", "optionsCount"], outputs: ["toggleAll"], exportAs: ["cmatSelectSearch"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.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: "ngmodule", type: MatSortModule }, { kind: "directive", type: i8.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: CmatDigitOnlyDirective, selector: "[cmatDigitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatSelectTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatSelectTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-select-table', exportAs: 'cmatSelectTable', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: MatFormFieldControl, useExisting: CmatSelectTableComponent }], imports: [CmatSelectSearchComponent, MatFormFieldModule, MatSelectModule, ReactiveFormsModule, CommonModule,
-                        MatIconModule, MatTableModule, MatInputModule, MatSortModule, CmatDigitOnlyDirective
-                    ], template: "@if(multiple){\r\n<mat-select #componentSelect multiple disableRipple \r\n    [placeholder]=\"placeholder\" [required]=\"required\" [formControl]=\"selectControl\" [compareWith]=\"compareWith\"\r\n    (focusin)=\"onFocusIn()\" (openedChange)=\"openedChange($event)\">\r\n    <mat-select-trigger>\r\n    @let triggerLabel = getTriggerLabel();\r\n    {{ triggerLabel }}\r\n    </mat-select-trigger>\r\n\r\n    <div class=\"h-full overflow-y-auto scrollbar-custom\" [ngClass]=\"{'hidden-header': overallSearchVisibleState()}\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        @if(overallSearchEnabled){\r\n        <mat-option [ngClass]=\"{'hidden':!overallSearchVisibleState() === true}\">\r\n            <cmat-select-search [showNoFoundLabel]=\"showNoFoundLabel\" [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\r\n                [formControl]=\"overallFilterControl\" [clearSearchInput]=\"resetFiltersOnOpen\">\r\n            </cmat-select-search>\r\n        </mat-option>\r\n\r\n        @if(!isPhone){\r\n        <div class=\"overall-search-toggle\" [ngStyle]=\"{ height: overallSearchVisibleState() ? '48px' : '55.4px' }\">\r\n            <mat-icon color=\"primary\"\r\n                [svgIcon]=\"overallSearchVisibleState() ? 'mat_outline:arrow_back' : 'mat_outline:search'\"\r\n                (click)=\"toggleOverallSearch()\">\r\n            </mat-icon>\r\n        </div>\r\n        }@else{\r\n        <div class=\"overall-search-toggle\" [ngStyle]=\"{ height: overallSearchVisibleState() ? '48px' : '55.4px' }\">\r\n            <mat-icon color=\"primary\" [svgIcon]=\"'mat_outline:search'\">\r\n            </mat-icon>\r\n        </div>\r\n        }\r\n        }\r\n        <table #table mat-table matSort [dataSource]=\"tableDataSource()\">\r\n            @for (columnKey of tableColumns(); track $index) {\r\n            @let column = tableColumnsMap.get(columnKey);\r\n            @switch (columnKey) {\r\n            @case ('_selection') {\r\n            <ng-container [matColumnDef]=\"columnKey\">\r\n                <th *matHeaderCellDef mat-header-cell [ngClass]=\"{selection: true, hidden: !multiple}\"></th>\r\n                <td *matCellDef=\"let row\" mat-cell [ngClass]=\"{selection: true, hidden: !multiple}\">\r\n                    <mat-option [value]=\"row\"></mat-option>\r\n                </td>\r\n            </ng-container>\r\n            }\r\n            @default {\r\n            <ng-container [matColumnDef]=\"columnKey\">\r\n                <th *matHeaderCellDef mat-header-cell mat-sort-header\r\n                    [disabled]=\"!column?.sortable\">\r\n                    @if(!column?.sortable){\r\n                    <div>{{column?.name}}</div>\r\n                    }@else {\r\n                    @switch (column?.filter?.type) {\r\n                    @case ('string') {\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeString\"\r\n                        [ngTemplateOutletContext]=\"getFilterContext(column)\"></ng-container>\r\n                    }\r\n                    @case('number'){\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeNumber\"\r\n                        [ngTemplateOutletContext]=\"getFilterContext(column)\"></ng-container>\r\n                    }\r\n                    @default {\r\n                    <div>{{column?.name}}</div>\r\n                    }\r\n                    }\r\n                    }\r\n                </th>\r\n                <td *matCellDef=\"let row\" mat-cell>\r\n                    <div class=\" has-label-on-mobile\" [attr.data-label]=\"column?.name+':'\">\r\n                        {{getCellValue(row, columnKey)}}\r\n                    </div>\r\n\r\n                </td>\r\n            </ng-container>\r\n            }\r\n            }\r\n            }\r\n\r\n            <tr *matHeaderRowDef=\"tableColumns(); sticky: true\" mat-header-row></tr>\r\n            <tr *matRowDef=\"let row; columns: tableColumns();\" mat-row (click)=\"emulateMatOptionClick($event)\"></tr>\r\n        </table>\r\n    </div>\r\n</mat-select>\r\n}@else {\r\n<mat-select #componentSelect disableRipple \r\n    [placeholder]=\"placeholder\" [required]=\"required\" [formControl]=\"selectControl\" [compareWith]=\"compareWith\"\r\n    (focusin)=\"onFocusIn()\" (openedChange)=\"openedChange($event)\">\r\n    <mat-select-trigger>\r\n        @if(!customTriggerLabelFn){\r\n        {{simpleTriggerLabelFn(completeRowList)}}\r\n        }@else {\r\n        {{customTriggerLabelFn(completeRowList)}}\r\n        }\r\n    </mat-select-trigger>\r\n\r\n    <div class=\"h-full overflow-y-auto scrollbar-custom\" [ngClass]=\"{'hidden-header': overallSearchVisibleState()}\"\r\n        (focusout)=\"onFocusOut($event)\">\r\n        @if(overallSearchEnabled){\r\n        <mat-option [ngClass]=\"{'hidden':!overallSearchVisibleState() === true}\">\r\n            <cmat-select-search [showNoFoundLabel]=\"showNoFoundLabel\" [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\r\n                [formControl]=\"overallFilterControl\" [clearSearchInput]=\"resetFiltersOnOpen\">\r\n            </cmat-select-search>\r\n        </mat-option>\r\n\r\n        @if(!isPhone){\r\n        <div class=\"overall-search-toggle\" [ngStyle]=\"{ height: overallSearchVisibleState() ? '48px' : '55.4px' }\">\r\n            <mat-icon color=\"primary\"\r\n                [svgIcon]=\"overallSearchVisibleState() ? 'mat_outline:arrow_back' : 'mat_outline:search'\"\r\n                (click)=\"toggleOverallSearch()\">\r\n            </mat-icon>\r\n        </div>\r\n        }@else{\r\n        <div class=\"overall-search-toggle\" [ngStyle]=\"{ height: overallSearchVisibleState() ? '48px' : '55.4px' }\">\r\n            <mat-icon color=\"primary\" [svgIcon]=\"'mat_outline:search'\">\r\n            </mat-icon>\r\n        </div>\r\n        }\r\n        }\r\n        <table #table mat-table matSort [dataSource]=\"tableDataSource()\">\r\n            @for (columnKey of tableColumns(); track $index) {\r\n            @let column = tableColumnsMap.get(columnKey);\r\n            @switch (columnKey) {\r\n            @case ('_selection') {\r\n            <ng-container [matColumnDef]=\"columnKey\">\r\n                <th *matHeaderCellDef mat-header-cell class=\"selection\"></th>\r\n                <td *matCellDef=\"let row\" mat-cell class=\"selection\">\r\n                    @if(row.id===null){\r\n                    <mat-option></mat-option>\r\n                    }@else {\r\n                    <mat-option [value]=\"row\"></mat-option>\r\n                    }\r\n                </td>\r\n            </ng-container>\r\n            }\r\n            @default {\r\n            <ng-container [matColumnDef]=\"columnKey\">\r\n                <th *matHeaderCellDef mat-header-cell mat-sort-header\r\n                    [disabled]=\"!column?.sortable\">\r\n                    @if(!column?.sortable){\r\n                    <div>{{column?.name}}</div>\r\n                    }@else {\r\n                    @switch (column?.filter?.type) {\r\n                    @case ('string') {\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeString\"\r\n                        [ngTemplateOutletContext]=\"getFilterContext(column)\"></ng-container>\r\n                    }\r\n                    @case('number'){\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeNumber\"\r\n                        [ngTemplateOutletContext]=\"getFilterContext(column)\"></ng-container>\r\n                    }\r\n                    @default {\r\n                    <div>{{column?.name}}</div>\r\n                    }\r\n                    }\r\n                    }\r\n                </th>\r\n                <td *matCellDef=\"let row\" mat-cell\r\n                    [colSpan]=\"hasNullRow && row.id === null && $index === 1 ? tableColumns.length : 1\"\r\n                    [ngStyle]=\"{display: hasNullRow && row.id === null && $index !== 1 ? 'none' : ''}\">\r\n                    <div class=\" has-label-on-mobile\" [attr.data-label]=\"column?.name+':'\">\r\n                        {{hasNullRow && row.id === null && $index === 1 ? '\u7A7A' : getCellValue(row, columnKey)}}\r\n                    </div>                    \r\n                </td>\r\n            </ng-container>\r\n            }\r\n            }\r\n            }\r\n\r\n            <tr *matHeaderRowDef=\"tableColumns(); sticky: true\" mat-header-row></tr>\r\n            <tr *matRowDef=\"let row; columns: tableColumns();\" mat-row (click)=\"emulateMatOptionClick($event)\"></tr>\r\n        </table>\r\n    </div>\r\n</mat-select>\r\n}\r\n<ng-template #filterTypeString let-column='column'>\r\n    <mat-form-field class=\"filter\" (click)=\"$event.stopPropagation()\">\r\n        <input matInput [formControl]=\"filterFormControl(column.key)\" [placeholder]=\"column.name\"\r\n            (keydown)=\"$event.stopPropagation()\" (keyup)=\"$event.stopPropagation()\"\r\n            (keypress)=\"$event.stopPropagation()\" />\r\n    </mat-form-field>\r\n</ng-template>\r\n\r\n<ng-template #filterTypeNumber let-column='column'>\r\n    <mat-form-field class=\"filter\" (click)=\"$event.stopPropagation()\">\r\n        <input matInput cmatDigitOnly [min]=\"0\" [formControl]=\"filterFormControl(column.key)\"\r\n            [placeholder]=\"column.name\" (keydown)=\"$event.stopPropagation()\" (keyup)=\"$event.stopPropagation()\"\r\n            (keypress)=\"$event.stopPropagation()\" />\r\n    </mat-form-field>\r\n</ng-template>\r\n", styles: ["cmat-select-table{display:block;width:100%}.cmat-select-search-table-panel{min-width:max-content;max-width:100%;min-height:240px;padding-top:0!important}.cmat-select-search-table-panel .overall-search-toggle{z-index:102;display:flex;cursor:pointer;position:absolute;width:48px;height:48px;align-items:center;left:12px;top:0}.cmat-select-search-table-panel .hidden-header table thead{display:none}.cmat-select-search-table-panel table{width:100%}.cmat-select-search-table-panel table tr{cursor:pointer;height:48px;max-height:48px}.cmat-select-search-table-panel table tr mat-option{height:48px;max-height:48px}.cmat-select-search-table-panel table tr td{-webkit-user-select:none;user-select:none;border-bottom:0!important;box-shadow:inset 0 -1px var(--cmat-border)}.cmat-select-search-table-panel table tr th .mat-sort-header-container{height:55px}.cmat-select-search-table-panel table tr th .mat-sort-header-container mat-form-field .mat-form-field-infix{width:initial}.cmat-select-search-table-panel table tr th[aria-sort] .mat-sort-header-arrow{opacity:1!important}.cmat-select-search-table-panel table tr td mat-option,.cmat-select-search-table-panel table tr th mat-option{background:transparent!important}.cmat-select-search-table-panel table tr td.selection,.cmat-select-search-table-panel table tr th.selection{width:48px;padding:0;margin:0}.cmat-select-search-table-panel table tr:has(td:first-child mat-option[aria-selected=true]){background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))!important;color:rgba(var(--cmat-primary-rgb),1)!important}.cmat-select-search-table-panel .cmat-select-search-inner>span{visibility:hidden}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{
-                type: HostBinding,
-                args: ['attr.id']
-            }, {
-                type: Input
-            }], dataSource: [{
-                type: Input
-            }], noEntriesFoundLabel: [{
-                type: Input
-            }], showNoFoundLabel: [{
-                type: Input
-            }], isPhone: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], overallSearchEnabled: [{
-                type: Input
-            }], overallSearchVisible: [{
-                type: Input
-            }], resetSortOnOpen: [{
-                type: Input
-            }], resetFiltersOnOpen: [{
-                type: Input
-            }], customTriggerLabelFn: [{
-                type: Input
-            }], triggerLabelSort: [{
-                type: Input
-            }], customTriggerLabelTemplate: [{
-                type: Input
-            }], canNull: [{
-                type: Input
-            }], defaultSort: [{
-                type: Input
-            }], resetOptionAction: [{
-                type: Input
-            }], keyParam: [{
-                type: Input
-            }], compareWith: [{
-                type: Input
-            }], closed: [{
-                type: Output
-            }], _matSelectSearch: [{
-                type: ViewChild,
-                args: [CmatSelectSearchComponent, { static: false }]
-            }], _sort: [{
-                type: ViewChild,
-                args: [MatSort, { static: false }]
-            }], _table: [{
-                type: ViewChild,
-                args: [MatTable, { static: false }]
-            }], _matOptions: [{
-                type: ViewChildren,
-                args: [MatOption]
-            }], matSelect: [{
-                type: ViewChild,
-                args: ['componentSelect', { static: false }]
-            }], clickedOut: [{
+            args: [{ selector: 'cmat-select-table', exportAs: 'cmatSelectTable', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: MatFormFieldControl, useExisting: CmatSelectTableComponent },
+                    ], imports: [
+                        CmatSelectSearchComponent,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        ReactiveFormsModule,
+                        CommonModule,
+                        MatIconModule,
+                        MatTableModule,
+                        MatInputModule,
+                        MatSortModule,
+                        CmatDigitOnlyDirective,
+                    ], host: {
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        '[attr.id]': 'id',
+                    }, template: "@if (multiple()) {\r\n<mat-select #componentSelect multiple disableRipple [placeholder]=\"placeholder\" [required]=\"required\"\r\n  [formControl]=\"selectControl\" [compareWith]=\"compareWith()\" (focusin)=\"onFocusIn()\"\r\n  (openedChange)=\"openedChange($event)\">\r\n  <mat-select-trigger>\r\n    @let triggerLabel = getTriggerLabel();\r\n    {{ triggerLabel }}\r\n  </mat-select-trigger>\r\n\r\n  <div class=\"h-full overflow-y-auto scrollbar-custom\" [ngClass]=\"{ 'hidden-header': overallSearchVisibleState() }\"\r\n    (focusout)=\"onFocusOut($event)\">\r\n    @if (overallSearchEnabled()) {\r\n    <mat-option [ngClass]=\"{ hidden: !overallSearchVisibleState() === true }\">\r\n      <cmat-select-search \r\n        [showNoFoundLabel]=\"showNoFoundLabel()\" \r\n        [noEntriesFoundLabel]=\"noEntriesFoundLabel()\"\r\n        [formControl]=\"overallFilterControl\" \r\n        [clearSearchInput]=\"resetFiltersOnOpen()??false\">\r\n      </cmat-select-search>\r\n    </mat-option>\r\n\r\n    @if (!isPhone()) {\r\n    <div class=\"overall-search-toggle\" [ngStyle]=\"{\r\n              height: overallSearchVisibleState() ? '48px' : '55.4px',\r\n            }\">\r\n      <mat-icon color=\"primary\" [svgIcon]=\"\r\n                overallSearchVisibleState()\r\n                  ? 'mat_outline:arrow_back'\r\n                  : 'mat_outline:search'\r\n              \" (click)=\"toggleOverallSearch()\">\r\n      </mat-icon>\r\n    </div>\r\n    }\r\n    }\r\n    <table #table mat-table matSort [dataSource]=\"tableDataSource()\">\r\n      @for (columnKey of tableColumns(); track $index) {\r\n      @let column = tableColumnsMap.get(columnKey);\r\n      @switch (columnKey) {\r\n      @case (\"_selection\") {\r\n      <ng-container [matColumnDef]=\"columnKey\">\r\n        <th *matHeaderCellDef mat-header-cell [ngClass]=\"{ selection: true, hidden: !multiple() }\"></th>\r\n        <td *matCellDef=\"let row\" mat-cell [ngClass]=\"{ selection: true, hidden: !multiple() }\">\r\n          <mat-option [value]=\"row\"></mat-option>\r\n        </td>\r\n      </ng-container>\r\n      }\r\n      @default {\r\n      <ng-container [matColumnDef]=\"columnKey\">\r\n        <th *matHeaderCellDef mat-header-cell mat-sort-header [disabled]=\"!column?.sortable\">\r\n          @if (!column?.sortable) {\r\n          <div>{{ column?.name }}</div>\r\n          } @else {\r\n          @switch (column?.filter.type) {\r\n          @case (\"string\") {\r\n          <ng-container [ngTemplateOutlet]=\"filterTypeString\"\r\n            [ngTemplateOutletContext]=\"getFilterContext(column)\"></ng-container>\r\n          }\r\n          @case (\"number\") {\r\n          <ng-container [ngTemplateOutlet]=\"filterTypeNumber\"\r\n            [ngTemplateOutletContext]=\"getFilterContext(column)\"></ng-container>\r\n          }\r\n          @default {\r\n          <div>{{ column?.name }}</div>\r\n          }\r\n          }\r\n          }\r\n        </th>\r\n        <td *matCellDef=\"let row\" mat-cell>\r\n          <div class=\"has-label-on-mobile\" [attr.data-label]=\"column?.name + ':'\">\r\n            {{ getCellValue(row, columnKey) }}\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n      }\r\n      }\r\n      }\r\n \r\n      <tr *matHeaderRowDef=\"tableColumns(); sticky: true\" mat-header-row></tr>\r\n      <tr *matRowDef=\"let row; columns: tableColumns()\" mat-row (click)=\"emulateMatOptionClick($event)\"></tr>\r\n    </table>\r\n  </div>\r\n</mat-select>\r\n} @else {\r\n<mat-select #componentSelect disableRipple [placeholder]=\"placeholder\" [required]=\"required\"\r\n  [formControl]=\"selectControl\" [compareWith]=\"compareWith()\" (focusin)=\"onFocusIn()\"\r\n  (openedChange)=\"openedChange($event)\">\r\n  <mat-select-trigger>\r\n    @if (!customTriggerLabelFn()) {\r\n    {{ simpleTriggerLabelFn(completeRowList) }}\r\n    } @else {\r\n    {{ customTriggerLabelFn()!(completeRowList) }}\r\n    }\r\n  </mat-select-trigger>\r\n\r\n  <div class=\"h-full overflow-y-auto scrollbar-custom\" [ngClass]=\"{ 'hidden-header': overallSearchVisibleState() }\"\r\n    (focusout)=\"onFocusOut($event)\">\r\n    @if (overallSearchEnabled()) {\r\n    <mat-option [ngClass]=\"{ hidden: !overallSearchVisibleState() === true }\">\r\n      <cmat-select-search [showNoFoundLabel]=\"showNoFoundLabel()\" [noEntriesFoundLabel]=\"noEntriesFoundLabel()\"\r\n        [formControl]=\"overallFilterControl\" [clearSearchInput]=\"resetFiltersOnOpen()??false\">\r\n      </cmat-select-search>\r\n    </mat-option>\r\n\r\n    @if (!isPhone()) {\r\n    <div class=\"overall-search-toggle\" [ngStyle]=\"{\r\n              height: overallSearchVisibleState() ? '48px' : '55.4px',\r\n            }\">\r\n      <mat-icon color=\"primary\" [svgIcon]=\"\r\n                overallSearchVisibleState()\r\n                  ? 'mat_outline:arrow_back'\r\n                  : 'mat_outline:search'\r\n              \" (click)=\"toggleOverallSearch()\">\r\n      </mat-icon>\r\n    </div>\r\n    }\r\n    }\r\n    <table #table mat-table matSort [dataSource]=\"tableDataSource()\">\r\n      @for (columnKey of tableColumns(); track $index) {\r\n      @let column = tableColumnsMap.get(columnKey);\r\n      @switch (columnKey) {\r\n      @case (\"_selection\") {\r\n      <ng-container [matColumnDef]=\"columnKey\">\r\n        <th *matHeaderCellDef mat-header-cell class=\"selection\"></th>\r\n        <td *matCellDef=\"let row\" mat-cell class=\"selection\">\r\n          @if (row.id === null) {\r\n          <mat-option></mat-option>\r\n          } @else {\r\n          <mat-option [value]=\"row\"></mat-option>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n      }\r\n      @default {\r\n      <ng-container [matColumnDef]=\"columnKey\">\r\n        <th *matHeaderCellDef mat-header-cell mat-sort-header [disabled]=\"!column?.sortable\">\r\n          @if (!column?.sortable) {\r\n          <div>{{ column?.name }}</div>\r\n          } @else {\r\n          @switch (column?.filter.type) {\r\n          @case (\"string\") {\r\n          <ng-container [ngTemplateOutlet]=\"filterTypeString\"\r\n            [ngTemplateOutletContext]=\"getFilterContext(column)\"></ng-container>\r\n          }\r\n          @case (\"number\") {\r\n          <ng-container [ngTemplateOutlet]=\"filterTypeNumber\"\r\n            [ngTemplateOutletContext]=\"getFilterContext(column)\"></ng-container>\r\n          }\r\n          @default {\r\n          <div>{{ column?.name }}</div>\r\n          }\r\n          }\r\n          }\r\n        </th>\r\n        <td *matCellDef=\"let row\" mat-cell [colSpan]=\"\r\n                    hasNullRow && row.id === null && $index === 1\r\n                      ? tableColumns.length\r\n                      : 1\r\n                  \" [ngStyle]=\"{\r\n                    display:\r\n                      hasNullRow && row.id === null && $index !== 1\r\n                        ? 'none'\r\n                        : '',\r\n                  }\">\r\n          <div class=\"has-label-on-mobile\" [attr.data-label]=\"column?.name + ':'\">\r\n            {{\r\n            hasNullRow && row.id === null && $index === 1\r\n            ? \"\u7A7A\"\r\n            : getCellValue(row, columnKey)\r\n            }}\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n      }\r\n      }\r\n      }\r\n\r\n      <tr *matHeaderRowDef=\"tableColumns(); sticky: true\" mat-header-row></tr>\r\n      <tr *matRowDef=\"let row; columns: tableColumns()\" mat-row (click)=\"emulateMatOptionClick($event)\"></tr>\r\n    </table>\r\n  </div>\r\n</mat-select>\r\n}\r\n<ng-template #filterTypeString let-column=\"column\">\r\n  <mat-form-field appearance=\"fill\" class=\"filter\" (click)=\"$event.stopPropagation()\">\r\n    <input matInput [formControl]=\"filterFormControl(column.key)\" [placeholder]=\"column.name\"\r\n      (keydown)=\"$event.stopPropagation()\" (keyup)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\" />\r\n  </mat-form-field>\r\n</ng-template>\r\n\r\n<ng-template #filterTypeNumber let-column=\"column\">\r\n  <mat-form-field appearance=\"fill\" class=\"filter\" (click)=\"$event.stopPropagation()\">\r\n    <input matInput cmatDigitOnly [min]=\"0\" [formControl]=\"filterFormControl(column.key)\" [placeholder]=\"column.name\"\r\n      (keydown)=\"$event.stopPropagation()\" (keyup)=\"$event.stopPropagation()\" (keypress)=\"$event.stopPropagation()\" />\r\n  </mat-form-field>\r\n</ng-template>", styles: ["cmat-select-table{display:block;width:100%}.cmat-select-search-table-panel{min-width:max-content;max-width:100%;min-height:240px;padding-top:0!important}.cmat-select-search-table-panel .overall-search-toggle{z-index:102;display:flex;cursor:pointer;position:absolute;width:48px;height:48px;align-items:center;left:12px;top:0;pointer-events:auto}.cmat-select-search-table-panel .overall-search-toggle mat-icon{pointer-events:auto;-webkit-user-select:none;user-select:none}.cmat-select-search-table-panel .hidden-header table thead{display:none}.cmat-select-search-table-panel table{width:100%}.cmat-select-search-table-panel table tr{cursor:pointer;height:48px;max-height:48px}.cmat-select-search-table-panel table tr mat-option{height:48px;max-height:48px}.cmat-select-search-table-panel table tr td{-webkit-user-select:none;user-select:none;border-bottom:0!important;box-shadow:inset 0 -1px var(--cmat-border)}.cmat-select-search-table-panel table tr th .mat-sort-header-container{height:55px}.cmat-select-search-table-panel table tr th .mat-sort-header-container mat-form-field .mat-form-field-infix{width:initial}.cmat-select-search-table-panel table tr th[aria-sort] .mat-sort-header-arrow{opacity:1!important}.cmat-select-search-table-panel table tr td mat-option,.cmat-select-search-table-panel table tr th mat-option{background:transparent!important}.cmat-select-search-table-panel table tr td.selection,.cmat-select-search-table-panel table tr th.selection{width:48px;padding:0;margin:0}.cmat-select-search-table-panel table tr:has(td:first-child mat-option[aria-selected=true]){background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))!important;color:rgba(var(--cmat-primary-rgb),1)!important}.cmat-select-search-table-panel .cmat-select-search-inner>span{visibility:hidden}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], noEntriesFoundLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noEntriesFoundLabel", required: false }] }], showNoFoundLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNoFoundLabel", required: false }] }], isPhone: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPhone", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], overallSearchEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "overallSearchEnabled", required: false }] }], overallSearchVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "overallSearchVisible", required: false }] }], resetSortOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetSortOnOpen", required: false }] }], resetFiltersOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFiltersOnOpen", required: false }] }], customTriggerLabelFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTriggerLabelFn", required: false }] }], triggerLabelSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabelSort", required: false }] }], customTriggerLabelTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTriggerLabelTemplate", required: false }] }], canNull: [{ type: i0.Input, args: [{ isSignal: true, alias: "canNull", required: false }] }], defaultSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSort", required: false }] }], resetOptionAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetOptionAction", required: false }] }], keyParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyParam", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], _matSelectSearch: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CmatSelectSearchComponent), { isSignal: true }] }], _sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }], _table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }], _matOptions: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MatOption), { isSignal: true }] }], _matSelectSignal: [{ type: i0.ViewChild, args: ['componentSelect', { isSignal: true }] }], clickedOut: [{
                 type: HostListener,
                 args: ['document:click']
             }], placeholder: [{