cmat 0.0.78 → 0.0.80

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

@@ -2,7 +2,8 @@ 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, inject, ChangeDetectorRef, Input, HostListener, ViewChild, ViewChildren, Output, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { EventEmitter, signal, inject, DestroyRef, Input, HostListener, ViewChild, ViewChildren, Output, HostBinding, 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';
 import * as i1 from '@angular/material/form-field';
@@ -20,7 +21,7 @@ import { MatTableModule, MatTable } 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 { Subject, merge, takeUntil, debounceTime } from 'rxjs';
+import { Subject, merge, debounceTime } from 'rxjs';
 
 /* eslint-disable @typescript-eslint/member-ordering */
 const MAX_SAFE_INTEGER = 9007199254740991;
@@ -38,16 +39,20 @@ class CmatSelectTableComponent {
             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 */ []));
+        this._rowById = new Map();
+        this._columnKeys = [];
         this.completeRowList = [];
+        this.overallSearchVisibleState = signal(false, ...(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.ngControl = inject(NgControl, { optional: true, self: true });
-        this._cd = inject(ChangeDetectorRef);
+        this._destroyRef = inject(DestroyRef);
         this._nullRow = { id: null };
-        this._unsubscribeAll = new Subject();
         this._completeValueList = [];
         this._placeholder = '';
         this._required = false;
@@ -99,13 +104,13 @@ class CmatSelectTableComponent {
             this._filterControls.valueChanges,
             this.overallFilterControl.valueChanges
         ])
-            .pipe(takeUntil(this._unsubscribeAll), debounceTime(100))
+            .pipe(takeUntilDestroyed(this._destroyRef), debounceTime(100))
             .subscribe(() => {
             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 {
@@ -115,41 +120,32 @@ class CmatSelectTableComponent {
                 this._sort.active = this.defaultSort.active;
                 this._sort.direction = this.defaultSort.direction;
             }
-            this.tableDataSource = !this._sort.active ?
-                dataClone : this._sortData(dataClone, this._sort.active, this._sort.direction);
-            this._cd.detectChanges();
+            this.tableDataSource.set(!this._sort.active ?
+                dataClone : this._sortData(dataClone, this._sort.active, this._sort.direction));
         });
-        this._matOptions.changes.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+        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 => options[`${option.value.id}`] = option);
-            if (this._matSelectSearch) {
-                this._matSelect?.options.reset([this._matOptions.first,
-                    ...this.tableDataSource
-                        .filter(row => !isNil(options[`${row.id}`]))
-                        .map(row => options[`${row.id}`])]);
-            }
-            else {
-                this._matSelect?.options.reset(this.tableDataSource
-                    .filter(row => !isNil(options[`${row.id}`]))
-                    .map(row => options[`${row.id}`]));
-            }
+            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);
+                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 {
-                //do something
+                return;
             }
         });
     }
     ngOnDestroy() {
-        this._unsubscribeAll.next(void 0);
-        this._unsubscribeAll.complete();
+        this.stateChanges.complete();
     }
     get placeholder() {
         return this._placeholder;
@@ -239,14 +235,23 @@ class CmatSelectTableComponent {
         if (!isNil(changes.dataSource)
             && !isNil(changes.dataSource.currentValue)
             && isArray(changes.dataSource.currentValue.data)) {
-            this.tableDataSource = [...changes.dataSource.currentValue.data];
+            const columns = changes.dataSource.currentValue.columns;
+            const data = changes.dataSource.currentValue.data;
+            this._rowById.clear();
+            this._columnKeys = columns.map((column) => column.key);
+            this.tableDataSource.set([...data]);
             if (this.addNullRow()) {
-                this.tableDataSource.unshift(this._nullRow);
+                this.tableDataSource.update(value => [this._nullRow, ...value]);
             }
-            this.tableColumns = ['_selection', ...changes.dataSource.currentValue.columns.map((column) => column.key)];
+            this.tableColumns.set(['_selection', ...this._columnKeys]);
             this.tableColumnsMap.clear();
-            changes.dataSource.currentValue.columns.forEach((column) => this.tableColumnsMap.set(column.key, column));
-            if (this.tableDataSource.length > 0) {
+            columns.forEach((column) => this.tableColumnsMap.set(column.key, column));
+            data.forEach((row) => {
+                if (!isNil(row?.id)) {
+                    this._rowById.set(row.id, row);
+                }
+            });
+            if (this.tableDataSource().length > 0) {
                 this._init(this.value);
             }
         }
@@ -269,9 +274,12 @@ class CmatSelectTableComponent {
         if (event.target.tagName.toLowerCase() != 'mat-pseudo-checkbox') {
             childOption.click();
         }
-        const option = this._matOptions.find(i => i.id == childOption.id);
+        const option = this._getMatOptionById(childOption.id);
+        if (!option) {
+            return;
+        }
         if (this.multiple && this._matSelect.panelOpen) {
-            this._updateCompleteRowList(option.value, option._selected);
+            this._updateCompleteRowList(option.value, option.selected);
         }
         if (!this.multiple) {
             this.completeRowList.splice(0);
@@ -286,39 +294,23 @@ class CmatSelectTableComponent {
         if (this.resetFiltersOnOpen !== false || (!this._matOptions.length && this.overallSearchEnabled) || (this.overallSearchEnabled && this._matOptions.length === 1)) {
             this._resetFilters();
         }
-        this.overallSearchVisibleState = this.overallSearchVisible;
+        this.overallSearchVisibleState.set(!!this.overallSearchVisible);
         if (this.resetSortOnOpen !== false) {
             this._sort.sort({ id: '', start: 'asc', disableClear: false });
         }
         if (!opened) {
-            if (this.multiple) {
-                this.value = this.completeRowList.length > 0 ? [...this.completeRowList] : null;
-            }
-            else {
-                this.value = this.completeRowList.length > 0 ? { ...this.completeRowList[0] } : null;
-            }
+            this.value = this._getCommittedValue();
             if (this.value === null) {
                 this.completeRowList.splice(0);
                 this._completeValueList.splice(0);
                 this._checkAndResetSelection();
             }
-            this._matSelect.writeValue(this.value);
-            this._matSelect._onChange(this.value);
+            this._syncMatSelectValue(this.value);
             this.closed.emit(!opened);
             return;
         }
         this._table._headerRowDefChanged = true;
-        setTimeout(() => {
-            let tableAdditionalHeight = 0;
-            this._table._getRenderedRows(this._table._headerRowOutlet)
-                .concat(this._table._getRenderedRows(this._table._footerRowOutlet))
-                .forEach(row => tableAdditionalHeight += row.getBoundingClientRect().height);
-            const panelElement = this._matSelect.panel.nativeElement;
-            const panelHeight = panelElement.getBoundingClientRect().height;
-            if (!isNaN(panelHeight)) {
-                panelElement.style.maxHeight = `${panelHeight + tableAdditionalHeight}px`;
-            }
-        }, 1);
+        setTimeout(() => this._expandPanelForTableRows(), 1);
     }
     filterFormControl(key) {
         if (!this._filterControls.contains(key)) {
@@ -327,44 +319,33 @@ class CmatSelectTableComponent {
         return this._filterControls.get(key);
     }
     simpleTriggerLabelFn(value) {
-        if (!isNil(this.triggerLabelSort)) {
-            this._sortData(value, this.triggerLabelSort.active, this.triggerLabelSort.direction);
-        }
-        return value.map((row) => {
-            if (isNil(row)) {
-                return '';
-            }
-            if (isNil(this.customTriggerLabelTemplate)
-                || typeof this.customTriggerLabelTemplate !== 'string'
-                || this.customTriggerLabelTemplate.trim().length === 0) {
-                return `${row.id}`;
-            }
-            let atLeastPartialSubstitution = false;
-            const substitution = this.customTriggerLabelTemplate.replace(/[$]{1}[{]{1}([^}]+)[}]{1}?/g, (_, key) => !isNil(row[key]) && (atLeastPartialSubstitution = true) ? row[key] : '');
-            if (atLeastPartialSubstitution === false) {
-                return `${row.id}`;
-            }
-            return substitution.trim();
-        }).join(', ');
+        const rows = this._getTriggerRows(value);
+        return rows.map(row => this._resolveTriggerLabel(row)).join(', ');
+    }
+    getTriggerLabel() {
+        return this.customTriggerLabelFn?.(this.completeRowList) ?? this.simpleTriggerLabelFn(this.completeRowList);
     }
     toggleOverallSearch() {
-        this.overallSearchVisibleState = !this.overallSearchVisibleState;
+        this.overallSearchVisibleState.update(value => !value);
         this._resetFilters();
-        if (this.overallSearchVisibleState) {
+        if (this.overallSearchVisibleState()) {
             setTimeout(() => this._matSelectSearch.focus());
         }
-        this._cd.markForCheck();
     }
     addNullRow() {
         return !this.multiple && this.canNull;
     }
+    get hasNullRow() {
+        return this.addNullRow();
+    }
     _init(value) {
         this.completeRowList.splice(0);
         this._completeValueList.splice(0);
         if (value) {
-            if (this.multiple)
+            if (this.multiple && Array.isArray(value)) {
                 value.forEach((v) => this._updateCompleteRowList(v, true));
-            else {
+            }
+            else if (!this.multiple) {
                 this._updateCompleteRowList(value, true);
             }
         }
@@ -373,22 +354,25 @@ class CmatSelectTableComponent {
             this._matSelect.writeValue(this.value);
             this._matSelect._onChange(this.value);
         }
-        this._cd.markForCheck();
     }
     _updateCompleteRowList(value, selected) {
         if (isNil(value)) {
             return;
         }
         if (selected) {
-            ((this.dataSource || { data: [] }).data || [])
-                .filter(row => !isNil(row) && !isNil(row[this.keyParam]) && row[this.keyParam] === value[this.keyParam])
-                .forEach((row) => {
-                const i = this.completeRowList.find(i => i[this.keyParam] === value[this.keyParam]);
-                if (!i) {
-                    this.completeRowList.push(row);
-                    this._completeValueList.push(row.id);
-                }
-            });
+            const rowId = value.id;
+            if (isNil(rowId)) {
+                return;
+            }
+            const row = this._rowById.get(rowId);
+            if (!row) {
+                return;
+            }
+            const exists = this.completeRowList.some(item => item[this.keyParam] === row[this.keyParam]);
+            if (!exists) {
+                this.completeRowList.push(row);
+                this._completeValueList.push(row.id);
+            }
         }
         else {
             const rowIndex = this.completeRowList.findIndex(i => i.id === value.id);
@@ -403,19 +387,25 @@ class CmatSelectTableComponent {
         this.filteredOutRows = {};
         const filters = {};
         Object.keys(this._filterControls.controls)
-            .filter(key => this.tableColumnsMap.has(key)
-            && !isNil(this.tableColumnsMap.get(key)?.filter)
-            && this.tableColumnsMap.get(key)?.filter.enabled !== false)
             .filter((key) => {
-            const value = this._filterControls.get(key)?.value;
+            const column = this.tableColumnsMap.get(key);
+            return !isNil(column?.filter) && column.filter.enabled !== false;
+        })
+            .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));
         })
-            .forEach(key => filters[key] = {
-            filter: this.tableColumnsMap.get(key)?.filter,
-            value: this._filterControls.get(key)?.value
+            .forEach((key) => {
+            const column = this.tableColumnsMap.get(key);
+            const filterControl = this._filterControls.get(key);
+            filters[key] = {
+                filter: column?.filter,
+                value: filterControl?.value
+            };
         });
         const filterKeys = Object.keys(filters);
         for (let i = data.length - 1; i >= 0; i--) {
@@ -423,64 +413,14 @@ class CmatSelectTableComponent {
             for (let k = 0; k < filterKeys.length; k++) {
                 const filterKey = filterKeys[k];
                 const row = data[i];
-                if (isNil(row)) {
-                    continue;
-                }
-                const cellValue = row[filterKey];
-                if (isNil(cellValue)) {
-                    data.splice(i, 1).forEach(item => this.filteredOutRows[`${item.id}`] = item);
-                    continue;
-                }
                 const filter = filters[filterKey];
-                const comparator = filter.filter?.comparator;
-                if (filter.filter?.type === 'number') {
-                    filter.value = Number(filter.value);
-                }
-                if (typeof filter.filter?.comparatorFn === 'function') {
-                    if (!filter.filter.comparatorFn.call(null, cellValue, filter.value, row)) {
-                        data.splice(i, 1).forEach(item => this.filteredOutRows[`${item.id}`] = item);
-                        break;
-                    }
-                }
-                else if (isNil(comparator) || comparator === 'equals') {
-                    if (filter.value !== cellValue) {
-                        data.splice(i, 1).forEach(item => this.filteredOutRows[`${item.id}`] = item);
-                        break;
-                    }
+                if (isNil(row)) {
+                    this._removeFilteredRow(data, i);
+                    break;
                 }
-                else if (typeof cellValue === 'string' && typeof filter.value === 'string') {
-                    const cellValueLC = `${cellValue}`.toLowerCase();
-                    const filterValueLC = filter.value.toLowerCase();
-                    if (isNil(comparator) || comparator === 'equalsIgnoreCase') {
-                        if (filterValueLC !== cellValueLC) {
-                            data.splice(i, 1).forEach(item => this.filteredOutRows[`${item.id}`] = item);
-                            break;
-                        }
-                    }
-                    else if (comparator === 'contains') {
-                        if (!cellValue.includes(filter.value)) {
-                            data.splice(i, 1).forEach(item => this.filteredOutRows[`${item.id}`] = item);
-                            break;
-                        }
-                    }
-                    else if (comparator === 'containsIgnoreCase') {
-                        if (!cellValueLC.includes(filterValueLC)) {
-                            data.splice(i, 1).forEach(item => this.filteredOutRows[`${item.id}`] = item);
-                            break;
-                        }
-                    }
-                    else if (comparator === 'startsWith') {
-                        if (!cellValue.startsWith(filter.value)) {
-                            data.splice(i, 1).forEach(item => this.filteredOutRows[`${item.id}`] = item);
-                            break;
-                        }
-                    }
-                    else if (comparator === 'startsWithIgnoreCase') {
-                        if (!cellValueLC.startsWith(filterValueLC)) {
-                            data.splice(i, 1).forEach(item => this.filteredOutRows[`${item.id}`] = item);
-                            break;
-                        }
-                    }
+                if (!this._matchesColumnFilter(row, filterKey, filter)) {
+                    this._removeFilteredRow(data, i);
+                    break;
                 }
             }
         }
@@ -497,20 +437,25 @@ class CmatSelectTableComponent {
         for (let i = data.length - 1; i >= 0; i--) {
             const row = data[i];
             let rowShouldBeFiltered = true;
-            for (let j = this.dataSource.columns.length - 1; j >= 0; j--) {
-                const key = this.dataSource.columns[j].key;
+            const rowKeys = this._columnKeys;
+            for (let j = rowKeys.length - 1; j >= 0; j--) {
+                const key = rowKeys[j];
                 const cellValue = row[key];
                 if (isNil(cellValue)) {
                     continue;
                 }
-                const cellValueLC = `${cellValue}`.toLowerCase();
+                const cellValueLC = typeof cellValue === 'string'
+                    ? cellValue.toLowerCase()
+                    : typeof cellValue === 'number' || typeof cellValue === 'boolean' || typeof cellValue === 'bigint'
+                        ? String(cellValue).toLowerCase()
+                        : '';
                 if (cellValueLC.includes(filterValueLC)) {
                     rowShouldBeFiltered = false;
                     break;
                 }
             }
             if (rowShouldBeFiltered) {
-                data.splice(i, 1).forEach(item => this.filteredOutRows[`${item.id}`] = item);
+                this._removeFilteredRow(data, i);
             }
         }
     }
@@ -540,11 +485,9 @@ class CmatSelectTableComponent {
             else if (b.id === null) {
                 return 1;
             }
-            // Both null/undefined/equal value check
             if (aValue === bValue) {
                 return 0;
             }
-            // One null value check
             if (isNil(aValue) && !isNil(bValue)) {
                 return -1;
             }
@@ -557,14 +500,11 @@ class CmatSelectTableComponent {
             if (bValue instanceof Date) {
                 bValue = bValue.getTime();
             }
-            // User localeCompare for strings
             if (isString(aValue) && isString(bValue)) {
                 return (aValue).localeCompare(bValue) * (direction === 'asc' ? 1 : -1);
             }
-            // Try to convert to a Number type
             aValue = isNaN(aValue) ? `${aValue}` : +aValue;
             bValue = isNaN(bValue) ? `${bValue}` : +bValue;
-            // if one is number and other is String
             if (isString(aValue) && isNumber(bValue)) {
                 return (1) * (direction === 'asc' ? 1 : -1);
             }
@@ -580,14 +520,116 @@ class CmatSelectTableComponent {
             this.resetOptionAction();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatSelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", 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        @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            @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]=\"!tableColumnsMap.get(columnKey)?.sortable\">\r\n                    @if(!tableColumnsMap.get(columnKey)?.sortable){\r\n                    <div>{{tableColumnsMap.get(columnKey)?.name}}</div>\r\n                    }@else {\r\n                    @switch (tableColumnsMap.get(columnKey)?.filter?.type) {\r\n                    @case ('string') {\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeString\"\r\n                        [ngTemplateOutletContext]=\"{column: tableColumnsMap.get(columnKey)}\"></ng-container>\r\n                    }\r\n                    @case('number'){\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeNumber\"\r\n                        [ngTemplateOutletContext]=\"{column: tableColumnsMap.get(columnKey)}\"></ng-container>\r\n                    }\r\n                    @default {\r\n                    <div>{{tableColumnsMap.get(columnKey)?.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]=\"tableColumnsMap.get(columnKey)?.name+':'\">\r\n                        {{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            @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]=\"!tableColumnsMap.get(columnKey)?.sortable\">\r\n                    @if(!tableColumnsMap.get(columnKey)?.sortable){\r\n                    <div>{{tableColumnsMap.get(columnKey)?.name}}</div>\r\n                    }@else {\r\n                    @switch (tableColumnsMap.get(columnKey)?.filter?.type) {\r\n                    @case ('string') {\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeString\"\r\n                        [ngTemplateOutletContext]=\"{column: tableColumnsMap.get(columnKey)}\"></ng-container>\r\n                    }\r\n                    @case('number'){\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeNumber\"\r\n                        [ngTemplateOutletContext]=\"{column: tableColumnsMap.get(columnKey)}\"></ng-container>\r\n                    }\r\n                    @default {\r\n                    <div>{{tableColumnsMap.get(columnKey)?.name}}</div>\r\n                    }\r\n                    }\r\n                    }\r\n                </th>\r\n                <td *matCellDef=\"let row\" mat-cell\r\n                    [colSpan]=\"addNullRow() && row.id === null && $index === 1 ? tableColumns.length : 1\"\r\n                    [ngStyle]=\"{display: addNullRow() && row.id === null && $index !== 1 ? 'none' : ''}\">\r\n                    <div class=\" has-label-on-mobile\" [attr.data-label]=\"tableColumnsMap.get(columnKey)?.name+':'\">\r\n                       {{addNullRow() && row.id === null && $index === 1 ? '\u7A7A' : 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>", 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 }); }
+    _matchesColumnFilter(row, filterKey, filter) {
+        const cellValue = row[filterKey];
+        if (isNil(cellValue)) {
+            return false;
+        }
+        const columnFilter = filter.filter;
+        const comparator = columnFilter?.comparator;
+        const filterValue = filter.value;
+        const normalizedFilterValue = columnFilter?.type === 'number' ? Number(filterValue) : filterValue;
+        if (typeof columnFilter?.comparatorFn === 'function') {
+            return columnFilter.comparatorFn.call(null, cellValue, normalizedFilterValue, row);
+        }
+        if (isNil(comparator) || comparator === 'equals') {
+            return normalizedFilterValue === cellValue;
+        }
+        if (typeof cellValue !== 'string' || typeof normalizedFilterValue !== 'string') {
+            return false;
+        }
+        const cellValueLC = cellValue.toLowerCase();
+        const filterValueLC = normalizedFilterValue.toLowerCase();
+        if (isNil(comparator) || comparator === 'equalsIgnoreCase') {
+            return filterValueLC === cellValueLC;
+        }
+        if (comparator === 'contains') {
+            return cellValue.includes(normalizedFilterValue);
+        }
+        if (comparator === 'containsIgnoreCase') {
+            return cellValueLC.includes(filterValueLC);
+        }
+        if (comparator === 'startsWith') {
+            return cellValue.startsWith(normalizedFilterValue);
+        }
+        if (comparator === 'startsWithIgnoreCase') {
+            return cellValueLC.startsWith(filterValueLC);
+        }
+        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);
+    }
+    _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 panelHeight = panelElement.getBoundingClientRect().height;
+        if (!isNaN(panelHeight)) {
+            panelElement.style.maxHeight = `${panelHeight + tableAdditionalHeight}px`;
+        }
+    }
+    _getCommittedValue() {
+        if (this.completeRowList.length === 0) {
+            return null;
+        }
+        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);
+    }
+    _resolveTriggerLabel(row) {
+        if (isNil(row)) {
+            return '';
+        }
+        const template = typeof this.customTriggerLabelTemplate === 'string' ? this.customTriggerLabelTemplate.trim() : '';
+        if (template.length === 0) {
+            return `${row.id}`;
+        }
+        const rowRecord = row;
+        let hasMatch = false;
+        const substitution = template.replace(/[$]{1}[{]{1}([^}]+)[}]{1}?/g, (_, key) => {
+            const value = rowRecord[key];
+            if (isNil(value)) {
+                return '';
+            }
+            if (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean' && typeof value !== 'bigint') {
+                return '';
+            }
+            hasMatch = true;
+            return String(value);
+        });
+        return hasMatch ? substitution.trim() : `${row.id}`;
+    }
+    _getTriggerRows(value) {
+        if (isNil(this.triggerLabelSort)) {
+            return value;
+        }
+        return this._sortData([...value], this.triggerLabelSort.active, this.triggerLabelSort.direction);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmatSelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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]=\"{column: column}\"></ng-container>\r\n                    }\r\n                    @case('number'){\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeNumber\"\r\n                        [ngTemplateOutletContext]=\"{column: 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                        {{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]=\"{column: column}\"></ng-container>\r\n                    }\r\n                    @case('number'){\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeNumber\"\r\n                        [ngTemplateOutletContext]=\"{column: 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' : 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmatSelectTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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        @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            @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]=\"!tableColumnsMap.get(columnKey)?.sortable\">\r\n                    @if(!tableColumnsMap.get(columnKey)?.sortable){\r\n                    <div>{{tableColumnsMap.get(columnKey)?.name}}</div>\r\n                    }@else {\r\n                    @switch (tableColumnsMap.get(columnKey)?.filter?.type) {\r\n                    @case ('string') {\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeString\"\r\n                        [ngTemplateOutletContext]=\"{column: tableColumnsMap.get(columnKey)}\"></ng-container>\r\n                    }\r\n                    @case('number'){\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeNumber\"\r\n                        [ngTemplateOutletContext]=\"{column: tableColumnsMap.get(columnKey)}\"></ng-container>\r\n                    }\r\n                    @default {\r\n                    <div>{{tableColumnsMap.get(columnKey)?.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]=\"tableColumnsMap.get(columnKey)?.name+':'\">\r\n                        {{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            @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]=\"!tableColumnsMap.get(columnKey)?.sortable\">\r\n                    @if(!tableColumnsMap.get(columnKey)?.sortable){\r\n                    <div>{{tableColumnsMap.get(columnKey)?.name}}</div>\r\n                    }@else {\r\n                    @switch (tableColumnsMap.get(columnKey)?.filter?.type) {\r\n                    @case ('string') {\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeString\"\r\n                        [ngTemplateOutletContext]=\"{column: tableColumnsMap.get(columnKey)}\"></ng-container>\r\n                    }\r\n                    @case('number'){\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeNumber\"\r\n                        [ngTemplateOutletContext]=\"{column: tableColumnsMap.get(columnKey)}\"></ng-container>\r\n                    }\r\n                    @default {\r\n                    <div>{{tableColumnsMap.get(columnKey)?.name}}</div>\r\n                    }\r\n                    }\r\n                    }\r\n                </th>\r\n                <td *matCellDef=\"let row\" mat-cell\r\n                    [colSpan]=\"addNullRow() && row.id === null && $index === 1 ? tableColumns.length : 1\"\r\n                    [ngStyle]=\"{display: addNullRow() && row.id === null && $index !== 1 ? 'none' : ''}\">\r\n                    <div class=\" has-label-on-mobile\" [attr.data-label]=\"tableColumnsMap.get(columnKey)?.name+':'\">\r\n                       {{addNullRow() && row.id === null && $index === 1 ? '\u7A7A' : 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>", 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"] }]
+                    ], 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]=\"{column: column}\"></ng-container>\r\n                    }\r\n                    @case('number'){\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeNumber\"\r\n                        [ngTemplateOutletContext]=\"{column: 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                        {{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]=\"{column: column}\"></ng-container>\r\n                    }\r\n                    @case('number'){\r\n                    <ng-container [ngTemplateOutlet]=\"filterTypeNumber\"\r\n                        [ngTemplateOutletContext]=\"{column: 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' : 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']