@dmlibs/dm-cmps 0.0.1

package/fesm2022/dmlibs-dm-cmps.mjs

@@ -0,0 +1,588 @@
+import * as i0 from '@angular/core';
+import { signal, input, booleanAttribute, model, computed, output, effect, Component } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { Subject, Subscription, switchMap, debounceTime, distinctUntilChanged } from 'rxjs';
+import * as i1 from '@angular/material/form-field';
+import { MatFormFieldModule, MatSuffix } from '@angular/material/form-field';
+import * as i2 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i6 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatIcon } from '@angular/material/icon';
+import * as i7 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltip } from '@angular/material/tooltip';
+
+class DmCmpsDataSource {
+    data;
+    filteredData;
+    _resultData;
+    result = signal([], ...(ngDevMode ? [{ debugName: "result" }] : []));
+    paginationEnabled = false;
+    currentPageIndex = 0;
+    pageSize = 10;
+    autoPaginationAboveItemsCount = 100;
+    searchTerm = '';
+    speratedSearch = false;
+    filterPredicate = (item, filter) => {
+        if (!item || !filter) {
+            return true;
+        }
+        if (typeof item === 'string') {
+            return item.toLowerCase().includes(filter.toLowerCase());
+        }
+        const match = (term) => Object.values(item).some((value) => value != null && value.toString().toLowerCase().includes(term.toLowerCase()));
+        if (this.speratedSearch) {
+            const terms = filter
+                .split(' ')
+                .map((t) => t.trim())
+                .filter((t) => !!t);
+            return terms.every((term) => match(term));
+        }
+        return match(filter);
+    };
+    filterByObject = null;
+    fieldsToSearchIn = [];
+    sortMap = [];
+    sortFn = null;
+    searchTerms$ = new Subject();
+    searchDebounceTime = signal(300, ...(ngDevMode ? [{ debugName: "searchDebounceTime" }] : []));
+    subscription = new Subscription();
+    /**
+     * builds a new DmCmpsDataSource
+     * @param initialData The data to be used as datasource
+     */
+    constructor(initialData = []) {
+        this.data = initialData;
+        this.filteredData = [...initialData];
+        this._resultData = [...initialData];
+        if (this.autoPaginationAboveItemsCount > 0 &&
+            initialData.length > this.autoPaginationAboveItemsCount) {
+            this.paginationEnabled = true;
+        }
+        this.updateResultSignal();
+        this.subscription.add(toObservable(this.searchDebounceTime)
+            .pipe(switchMap((debounceMs) => this.searchTerms$.pipe(debounceTime(debounceMs), distinctUntilChanged((p, c) => p === c))))
+            .subscribe((term) => {
+            this.searchTerm = term;
+            this.applySearch();
+        }));
+        // this.searchTerms$
+        //   .pipe(
+        //     debounceTime(this.searchDebounceTime),
+        //     distinctUntilChanged((p, c) => p === c && c != '')
+        //   )
+        //   .subscribe((term) => {
+        //     this.searchTerm = term;
+        //     this.applySearch();
+        //   });
+    }
+    updateResultData() {
+        this.applySorting();
+        this.applySearch();
+        this.updateResultSignal();
+    }
+    disconnect() {
+        this.subscription.unsubscribe();
+    }
+    setAutoPaginationAboveItemsCount(count) {
+        this.autoPaginationAboveItemsCount = count;
+        if (count > 0 && this._resultData.length > count) {
+            this.paginationEnabled = true;
+        }
+        else {
+            this.paginationEnabled = false;
+        }
+        this.updateResultSignal();
+    }
+    applyPagination(pageSize) {
+        if (pageSize !== undefined && pageSize < 5) {
+            throw new Error('Page size must be at least 5');
+        }
+        this.currentPageIndex = 0;
+        this.paginationEnabled = true;
+        if (pageSize) {
+            this.pageSize = pageSize;
+        }
+    }
+    setPageSize(pageSize) {
+        if (pageSize < 5) {
+            throw new Error('Page size must be at least 5');
+        }
+        this.pageSize = pageSize;
+        this.updateResultSignal();
+    }
+    disablePagination() {
+        this.currentPageIndex = 0;
+        this.paginationEnabled = false;
+        this.updateResultSignal();
+    }
+    nextPage() {
+        if (this.pageSize <= 0 || !this.paginationEnabled) {
+            return 0;
+        }
+        const totalPages = Math.ceil(this._resultData.length / this.pageSize);
+        if (this.currentPageIndex < totalPages - 1) {
+            this.currentPageIndex++;
+        }
+        this.updateResultSignal();
+        return this.currentPageIndex;
+    }
+    previousPage() {
+        if (this.pageSize <= 0 || !this.paginationEnabled) {
+            return 0;
+        }
+        if (this.currentPageIndex > 0) {
+            this.currentPageIndex--;
+        }
+        this.updateResultSignal();
+        return this.currentPageIndex;
+    }
+    firstPage() {
+        if (this.pageSize <= 0 || !this.paginationEnabled) {
+            return 0;
+        }
+        this.currentPageIndex = 0;
+        this.updateResultSignal();
+        return this.currentPageIndex;
+    }
+    lastPage() {
+        if (this.pageSize <= 0 || !this.paginationEnabled) {
+            return 0;
+        }
+        const totalPages = Math.ceil(this._resultData.length / this.pageSize);
+        this.currentPageIndex = totalPages - 1;
+        this.updateResultSignal();
+        return this.currentPageIndex;
+    }
+    getCurrentPageIndex() {
+        return this.currentPageIndex;
+    }
+    getTotalPagesCount() {
+        if (this.pageSize <= 0) {
+            return 1;
+        }
+        return Math.ceil(this._resultData.length / this.pageSize);
+    }
+    setSearchDebounceTime(milliseconds) {
+        this.searchDebounceTime.set(milliseconds);
+    }
+    setDatasource(newData) {
+        this.data = [...newData];
+        this.applyObjectFilter();
+    }
+    updateResultSignal() {
+        const res = (() => {
+            if (this.pageSize > 0 &&
+                (this.paginationEnabled ||
+                    (this.autoPaginationAboveItemsCount > 0 &&
+                        this._resultData.length > this.autoPaginationAboveItemsCount))) {
+                const startIndex = this.currentPageIndex * this.pageSize;
+                return this._resultData.slice(startIndex, startIndex + this.pageSize);
+            }
+            return this._resultData;
+        })();
+        this.result.set(res);
+    }
+    // get resultData(): T[] {
+    //   if (
+    //     this.pageSize > 0 &&
+    //     (this.paginationEnabled ||
+    //       (this.autoPaginationAboveItemsCount > 0 &&
+    //         this._resultData.length > this.autoPaginationAboveItemsCount))
+    //   ) {
+    //     const startIndex = this.currentPageIndex * this.pageSize;
+    //     return this.filteredData.slice(startIndex, startIndex + this.pageSize);
+    //   }
+    //   return this.filteredData;
+    // }
+    search(filterTerm) {
+        this.searchTerms$.next(filterTerm);
+    }
+    applySearch() {
+        if (!this.searchTerm) {
+            this._resultData = [...this.filteredData];
+        }
+        else {
+            this.currentPageIndex = 0;
+            this._resultData = this.filteredData.filter((item) => this.filterPredicate(item, this.searchTerm));
+        }
+        this.updateResultSignal();
+    }
+    setFilterPredicate(predicate) {
+        this.filterPredicate = predicate;
+    }
+    setFieldsToSearchIn(fields) {
+        if (!fields || fields.length === 0) {
+            throw new Error('Fields to search in cannot be empty');
+        }
+        this.fieldsToSearchIn = fields;
+        this.setFilterPredicate((item, filter) => {
+            if (!item || !filter) {
+                return true;
+            }
+            if (this.speratedSearch) {
+                const terms = filter
+                    .split(' ')
+                    .map((t) => t.trim())
+                    .filter((t) => !!t);
+                return terms.every((term) => {
+                    return this.fieldsToSearchIn.some((field) => {
+                        const value = item[field];
+                        if (value != null) {
+                            return value.toString().toLowerCase().includes(term.toLowerCase());
+                        }
+                        return false;
+                    });
+                });
+            }
+            return this.fieldsToSearchIn.some((field) => {
+                const value = item[field];
+                if (value != null) {
+                    return value.toString().toLowerCase().includes(filter.toLowerCase());
+                }
+                return false;
+            });
+        });
+    }
+    setSortFunction(sortFn) {
+        this.sortFn = sortFn;
+    }
+    applySorting() {
+        if (this.sortMap.length === 0 && !this.sortFn) {
+            return;
+        }
+        if (this.sortFn) {
+            this.filteredData.sort(this.sortFn);
+            return;
+        }
+        this.filteredData.sort((a, b) => {
+            for (const sort of this.sortMap) {
+                let comparison = 0;
+                if (sort.sortFn) {
+                    comparison = sort.sortFn(a, b);
+                }
+                else {
+                    const aValue = a[sort.field];
+                    const bValue = b[sort.field];
+                    if (isNaN(aValue) || isNaN(bValue)) {
+                        if (typeof aValue === 'string' && typeof bValue === 'string') {
+                            comparison = aValue.localeCompare(bValue);
+                        }
+                        else {
+                            comparison = 0;
+                        }
+                    }
+                    else if (aValue < bValue) {
+                        comparison = -1;
+                    }
+                    else if (aValue > bValue) {
+                        comparison = 1;
+                    }
+                    else {
+                        comparison = 0;
+                    }
+                }
+                if (comparison !== 0) {
+                    return sort.direction === 'asc' ? comparison : -comparison;
+                }
+            }
+            return 0;
+        });
+    }
+    sortByFields(sortMap) {
+        this.sortMap = sortMap;
+        this.sortFn = null;
+        this.updateResultData();
+    }
+    resetSorting() {
+        this.sortMap = [];
+        this.sortFn = null;
+        this.applyObjectFilter();
+    }
+    setFilterByObjectFields(filterObj) {
+        this.filterByObject = filterObj;
+        this.applyObjectFilter();
+    }
+    applyObjectFilter() {
+        if (!this.filterByObject) {
+            this.filteredData = [...this.data];
+        }
+        else {
+            this.filteredData = this.data.filter((item) => {
+                for (const [key, value] of Object.entries(this.filterByObject)) {
+                    if (item[key] !== value) {
+                        return false;
+                    }
+                }
+                return true;
+            });
+        }
+        this.updateResultData();
+    }
+    applySperatedSearch(enabled) {
+        this.speratedSearch = enabled;
+    }
+}
+
+const SEARCH_SECTION_BG_COLOR_VAR = '--dm-mat-select-search-section-bg-color';
+const SEARCH_SECTION_BG_COLOR_DEFAULT_VALUE = '#faf9fd';
+
+class DmMatSelect {
+    formFieldClass = input('', ...(ngDevMode ? [{ debugName: "formFieldClass" }] : []));
+    wrapperClass = input('', ...(ngDevMode ? [{ debugName: "wrapperClass" }] : []));
+    appearance = input('fill', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : {}), transform: booleanAttribute });
+    selectAllEnabled = input(false, { ...(ngDevMode ? { debugName: "selectAllEnabled" } : {}), transform: booleanAttribute });
+    selectAllLabel = input('בחר הכל', ...(ngDevMode ? [{ debugName: "selectAllLabel" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    optionValueKey = input('_id', ...(ngDevMode ? [{ debugName: "optionValueKey" }] : []));
+    optionLabelKey = input('name', ...(ngDevMode ? [{ debugName: "optionLabelKey" }] : []));
+    searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    searchPlaceholder = input('חפש...', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
+    emptyOption = input(false, { ...(ngDevMode ? { debugName: "emptyOption" } : {}), transform: booleanAttribute });
+    emptyOptionLabel = input('ללא', ...(ngDevMode ? [{ debugName: "emptyOptionLabel" }] : []));
+    emptyOptionValue = input(null, ...(ngDevMode ? [{ debugName: "emptyOptionValue" }] : []));
+    optionNameFormat = input(null, ...(ngDevMode ? [{ debugName: "optionNameFormat" }] : []));
+    _optionNameFormat = null;
+    datasource = signal(new DmCmpsDataSource(), ...(ngDevMode ? [{ debugName: "datasource" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    formControl = input(null, ...(ngDevMode ? [{ debugName: "formControl" }] : []));
+    panelWidth = input('auto', ...(ngDevMode ? [{ debugName: "panelWidth" }] : []));
+    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
+    searchSectionBackgroundColor = input(SEARCH_SECTION_BG_COLOR_DEFAULT_VALUE, ...(ngDevMode ? [{ debugName: "searchSectionBackgroundColor" }] : []));
+    sortBySelectedOnTop = input(false, { ...(ngDevMode ? { debugName: "sortBySelectedOnTop" } : {}), transform: booleanAttribute });
+    internalControl = new FormControl(null);
+    control = computed(() => this.formControl() ?? this.internalControl, ...(ngDevMode ? [{ debugName: "control" }] : []));
+    selectionChange = output();
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    isBootstrapIcon = computed(() => {
+        return this.icon() ? this.icon().includes('bi-') : false;
+    }, ...(ngDevMode ? [{ debugName: "isBootstrapIcon" }] : []));
+    noDataLabel = input('אין נתונים להצגה', ...(ngDevMode ? [{ debugName: "noDataLabel" }] : []));
+    clearSearchAfterSelect = input(true, { ...(ngDevMode ? { debugName: "clearSearchAfterSelect" } : {}), transform: booleanAttribute });
+    clearSearchButtonTooltip = input('נקה חיפוש', ...(ngDevMode ? [{ debugName: "clearSearchButtonTooltip" }] : []));
+    focusSearchInputOnPanelOpen = input(true, { ...(ngDevMode ? { debugName: "focusSearchInputOnPanelOpen" } : {}), transform: booleanAttribute });
+    filterPredicate = input(null, ...(ngDevMode ? [{ debugName: "filterPredicate" }] : []));
+    _filterPredicate = null;
+    simpleArray = computed(() => {
+        return typeof this.options()[0] === 'string' || typeof this.options()[0] === 'number';
+    }, ...(ngDevMode ? [{ debugName: "simpleArray" }] : []));
+    selectedOptionsIdsSet = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedOptionsIdsSet" }] : []));
+    filterText = model('', ...(ngDevMode ? [{ debugName: "filterText" }] : []));
+    checkIfAllSelected = computed(() => {
+        const options = this.datasource().result();
+        const selected = this.control().value;
+        const allSelected = options.length > 0 &&
+            Array.isArray(selected) &&
+            selected.length >= options.length &&
+            options.every((option) => {
+                const optionValue = this.getOptionValue(option);
+                return this.selectedOptionsIdsSet().has(optionValue);
+            });
+        return allSelected;
+    }, ...(ngDevMode ? [{ debugName: "checkIfAllSelected" }] : []));
+    constructor() {
+        this.runEffects();
+    }
+    ngOnDestroy() {
+        this.datasource().disconnect();
+    }
+    setOptionsFormattedNames(options) {
+        if (this._optionNameFormat) {
+            for (const option of options) {
+                option.__dmMatSelectFormattedName = this._optionNameFormat(option);
+            }
+        }
+    }
+    runEffects() {
+        effect(() => {
+            this._filterPredicate = this.filterPredicate();
+            this._optionNameFormat = this.optionNameFormat();
+        });
+        effect(() => {
+            const opts = this.options();
+            this.setOptionsFormattedNames(opts);
+            this.datasource().setAutoPaginationAboveItemsCount(-1);
+            this.datasource().setSearchDebounceTime(3000);
+            if (this._filterPredicate) {
+                console.log('filter predicate updated!!!!!!!!');
+                this.datasource().setFilterPredicate(this._filterPredicate);
+            }
+            if (this.sortBySelectedOnTop() && this.multiple()) {
+                this.datasource().setSortFunction(((a, b) => {
+                    const aSelected = this.selectedOptionsIdsSet().has(this.getOptionValue(a));
+                    const bSelected = this.selectedOptionsIdsSet().has(this.getOptionValue(b));
+                    if (aSelected && !bSelected) {
+                        return -1;
+                    }
+                    else if (!aSelected && bSelected) {
+                        return 1;
+                    }
+                    else {
+                        return 0;
+                    }
+                }).bind(this));
+            }
+            this.datasource().setDatasource(opts);
+        });
+        effect(() => {
+            if (this.formControl()) {
+                return;
+            }
+            this.internalControl.setValue(this.value(), { emitEvent: false });
+        });
+        effect((onCleanup) => {
+            const ctrl = this.control();
+            const setSelectedIdsSet = (selectedVal) => {
+                const newSelectedIdsSet = new Set();
+                if (this.multiple()) {
+                    const arr = Array.isArray(selectedVal) ? selectedVal : [];
+                    for (const item of arr) {
+                        const id = this.getOptionValue(item);
+                        newSelectedIdsSet.add(id);
+                    }
+                    this.selectedOptionsIdsSet.set(newSelectedIdsSet);
+                }
+            };
+            setSelectedIdsSet(ctrl.value);
+            const sub = ctrl.valueChanges.subscribe((val) => {
+                setSelectedIdsSet(val);
+                this.value.set(val);
+            });
+            onCleanup(() => sub.unsubscribe());
+        });
+        effect(() => {
+            document.documentElement.style.setProperty(SEARCH_SECTION_BG_COLOR_VAR, this.searchSectionBackgroundColor() ?? SEARCH_SECTION_BG_COLOR_DEFAULT_VALUE);
+        });
+    }
+    applyFilter(event) {
+        const target = event.target;
+        this.filterText.set(target.value);
+        this.datasource().search(this.filterText());
+    }
+    selectionChangeHandler(event) {
+        this.selectionChange.emit(event);
+    }
+    getOptionValue(option) {
+        if (this.simpleArray())
+            return option;
+        return typeof option === 'object' && option != null
+            ? option[this.optionValueKey()]
+            : option;
+    }
+    onSelectionChangeHandler(event, option) {
+        if (!event.isUserInput)
+            return;
+        console.log('selection change!!');
+        const selected = event.source.selected;
+        const currentValue = this.control().value;
+        if (this.multiple()) {
+            if (!option)
+                return;
+            const arr = Array.isArray(currentValue) ? currentValue : [];
+            let newValue;
+            if (selected) {
+                newValue = [...arr, this.getOptionValue(option)];
+            }
+            else {
+                newValue = arr.filter((v) => v !== this.getOptionValue(option));
+            }
+            this.control().setValue(newValue);
+        }
+        else {
+            if (!option) {
+                this.control().setValue(this.emptyOptionValue());
+                return;
+            }
+            if (selected) {
+                console.log('set value => ', option);
+                this.control().setValue(this.getOptionValue(option));
+            }
+            else {
+                this.control().setValue(null);
+            }
+        }
+        if (this.clearSearchAfterSelect()) {
+            this.resetSearch();
+        }
+    }
+    selectAllChange(event) {
+        if (event.checked) {
+            const allValues = this.datasource()
+                .result()
+                .map((option) => this.getOptionValue(option));
+            const newValues = Array.isArray(this.control().value)
+                ? this.control().value
+                : [];
+            for (const val of allValues) {
+                if (!this.selectedOptionsIdsSet().has(val)) {
+                    newValues.push(val);
+                }
+            }
+            this.control().setValue(newValues);
+        }
+        else {
+            const selectedValues = this.control().value.filter((val) => {
+                const allOptionValues = this.datasource()
+                    .result()
+                    .map((option) => this.getOptionValue(option));
+                return !allOptionValues.includes(val);
+            });
+            this.control().setValue(selectedValues);
+        }
+    }
+    resetSearch() {
+        this.filterText.set('');
+        this.datasource().search('');
+    }
+    onPanelOpened() {
+        if (this.focusSearchInputOnPanelOpen()) {
+            const searchInput = document.getElementById('dm-mat-select-search-input');
+            setTimeout(() => {
+                if (searchInput) {
+                    searchInput.focus();
+                }
+            }, 0);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmMatSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DmMatSelect, isStandalone: true, selector: "dm-mat-select", inputs: { formFieldClass: { classPropertyName: "formFieldClass", publicName: "formFieldClass", isSignal: true, isRequired: false, transformFunction: null }, wrapperClass: { classPropertyName: "wrapperClass", publicName: "wrapperClass", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectAllEnabled: { classPropertyName: "selectAllEnabled", publicName: "selectAllEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionValueKey: { classPropertyName: "optionValueKey", publicName: "optionValueKey", isSignal: true, isRequired: false, transformFunction: null }, optionLabelKey: { classPropertyName: "optionLabelKey", publicName: "optionLabelKey", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyOption: { classPropertyName: "emptyOption", publicName: "emptyOption", isSignal: true, isRequired: false, transformFunction: null }, emptyOptionLabel: { classPropertyName: "emptyOptionLabel", publicName: "emptyOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyOptionValue: { classPropertyName: "emptyOptionValue", publicName: "emptyOptionValue", isSignal: true, isRequired: false, transformFunction: null }, optionNameFormat: { classPropertyName: "optionNameFormat", publicName: "optionNameFormat", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, searchSectionBackgroundColor: { classPropertyName: "searchSectionBackgroundColor", publicName: "searchSectionBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, sortBySelectedOnTop: { classPropertyName: "sortBySelectedOnTop", publicName: "sortBySelectedOnTop", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, noDataLabel: { classPropertyName: "noDataLabel", publicName: "noDataLabel", isSignal: true, isRequired: false, transformFunction: null }, clearSearchAfterSelect: { classPropertyName: "clearSearchAfterSelect", publicName: "clearSearchAfterSelect", isSignal: true, isRequired: false, transformFunction: null }, clearSearchButtonTooltip: { classPropertyName: "clearSearchButtonTooltip", publicName: "clearSearchButtonTooltip", isSignal: true, isRequired: false, transformFunction: null }, focusSearchInputOnPanelOpen: { classPropertyName: "focusSearchInputOnPanelOpen", publicName: "focusSearchInputOnPanelOpen", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, filterText: { classPropertyName: "filterText", publicName: "filterText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange", filterText: "filterTextChange" }, ngImport: i0, template: "<div class=\"dm-mat-select-wrapper\" [class]=\"wrapperClass()\">\n  <mat-form-field [appearance]=\"appearance()\" [class]=\"formFieldClass()\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select\n      [multiple]=\"multiple()\"\n      [formControl]=\"control()\"\n      (selectionChange)=\"selectionChangeHandler($event)\"\n      [disabled]=\"disabled()\"\n      [panelWidth]=\"panelWidth()\"\n      [panelClass]=\"panelClass()\"\n      (opened)=\"onPanelOpened()\"\n    >\n      <div\n        class=\"search-section\"\n        [ngStyle]=\"{\n          'background-color': 'none'\n        }\"\n      >\n        @if (searchable()) {\n        <mat-form-field>\n          <input\n            id=\"dm-mat-select-search-input\"\n            matInput\n            [placeholder]=\"searchPlaceholder()\"\n            [(ngModel)]=\"filterText\"\n            (keyup)=\"applyFilter($event)\"\n          />\n          @if (filterText()) {\n          <button\n            mat-icon-button\n            matSuffix\n            (click)=\"resetSearch()\"\n            [matTooltip]=\"clearSearchButtonTooltip() || ''\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        } @if (selectAllEnabled() && multiple()) {\n        <mat-checkbox [checked]=\"checkIfAllSelected()\" (change)=\"selectAllChange($event)\">{{\n          selectAllLabel()\n        }}</mat-checkbox>\n        }\n      </div>\n      @if (emptyOption()) {\n      <mat-option\n        [value]=\"emptyOptionValue()\"\n        (onSelectionChange)=\"onSelectionChangeHandler($event, emptyOptionValue())\"\n        >{{ emptyOptionLabel() }}</mat-option\n      >\n      } @for (option of datasource().result(); track simpleArray() ? option :\n      option[this.optionValueKey()]) {\n      <mat-option\n        [value]=\"simpleArray() ? option : option[optionValueKey()]\"\n        (onSelectionChange)=\"onSelectionChangeHandler($event, option)\"\n        >{{\n          optionNameFormat()\n            ? option.__dmMatSelectFormattedName\n            : simpleArray()\n            ? option\n            : option[optionLabelKey()]\n        }}</mat-option\n      >\n      } @if (datasource().result().length === 0) {\n      <mat-option disabled>{{ noDataLabel() }}</mat-option>\n      }\n    </mat-select>\n\n    @if (icon(); as icon) {\n    <span matSuffix>\n      @if (isBootstrapIcon()) {\n      <span [innerHTML]=\"icon\"></span> } @else {\n      <mat-icon matSuffix>{{ icon }}</mat-icon>\n      }\n    </span>\n    }\n\n    <span matSuffix>\n      <ng-content select=\"[dm-mat-select-suffix]\"></ng-content>\n    </span>\n\n    <mat-error>{{ error() }}</mat-error>\n  </mat-form-field>\n</div>\n", styles: [":host{display:block;width:auto;height:auto}:host .dm-mat-select-wrapper{width:100%;height:100%;position:relative}:host .dm-mat-select-wrapper .search-section{display:flex;flex-direction:column;position:sticky;top:0;z-index:1;background-color:var(--dm-mat-select-search-section-bg-color, #faf9fd)}:host .dm-mat-select-wrapper .search-section ::ng-deep mat-form-field>.mat-mdc-form-field-subscript-wrapper{display:none}:host .dm-mat-select-wrapper ::ng-deep mat-form-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-icon-suffix{padding:0 4px 0 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: MatCheckboxModule }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmMatSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'dm-mat-select', standalone: true, imports: [
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        MatCheckboxModule,
+                        MatIcon,
+                        MatButtonModule,
+                        MatTooltip,
+                        MatSuffix,
+                    ], template: "<div class=\"dm-mat-select-wrapper\" [class]=\"wrapperClass()\">\n  <mat-form-field [appearance]=\"appearance()\" [class]=\"formFieldClass()\">\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select\n      [multiple]=\"multiple()\"\n      [formControl]=\"control()\"\n      (selectionChange)=\"selectionChangeHandler($event)\"\n      [disabled]=\"disabled()\"\n      [panelWidth]=\"panelWidth()\"\n      [panelClass]=\"panelClass()\"\n      (opened)=\"onPanelOpened()\"\n    >\n      <div\n        class=\"search-section\"\n        [ngStyle]=\"{\n          'background-color': 'none'\n        }\"\n      >\n        @if (searchable()) {\n        <mat-form-field>\n          <input\n            id=\"dm-mat-select-search-input\"\n            matInput\n            [placeholder]=\"searchPlaceholder()\"\n            [(ngModel)]=\"filterText\"\n            (keyup)=\"applyFilter($event)\"\n          />\n          @if (filterText()) {\n          <button\n            mat-icon-button\n            matSuffix\n            (click)=\"resetSearch()\"\n            [matTooltip]=\"clearSearchButtonTooltip() || ''\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        } @if (selectAllEnabled() && multiple()) {\n        <mat-checkbox [checked]=\"checkIfAllSelected()\" (change)=\"selectAllChange($event)\">{{\n          selectAllLabel()\n        }}</mat-checkbox>\n        }\n      </div>\n      @if (emptyOption()) {\n      <mat-option\n        [value]=\"emptyOptionValue()\"\n        (onSelectionChange)=\"onSelectionChangeHandler($event, emptyOptionValue())\"\n        >{{ emptyOptionLabel() }}</mat-option\n      >\n      } @for (option of datasource().result(); track simpleArray() ? option :\n      option[this.optionValueKey()]) {\n      <mat-option\n        [value]=\"simpleArray() ? option : option[optionValueKey()]\"\n        (onSelectionChange)=\"onSelectionChangeHandler($event, option)\"\n        >{{\n          optionNameFormat()\n            ? option.__dmMatSelectFormattedName\n            : simpleArray()\n            ? option\n            : option[optionLabelKey()]\n        }}</mat-option\n      >\n      } @if (datasource().result().length === 0) {\n      <mat-option disabled>{{ noDataLabel() }}</mat-option>\n      }\n    </mat-select>\n\n    @if (icon(); as icon) {\n    <span matSuffix>\n      @if (isBootstrapIcon()) {\n      <span [innerHTML]=\"icon\"></span> } @else {\n      <mat-icon matSuffix>{{ icon }}</mat-icon>\n      }\n    </span>\n    }\n\n    <span matSuffix>\n      <ng-content select=\"[dm-mat-select-suffix]\"></ng-content>\n    </span>\n\n    <mat-error>{{ error() }}</mat-error>\n  </mat-form-field>\n</div>\n", styles: [":host{display:block;width:auto;height:auto}:host .dm-mat-select-wrapper{width:100%;height:100%;position:relative}:host .dm-mat-select-wrapper .search-section{display:flex;flex-direction:column;position:sticky;top:0;z-index:1;background-color:var(--dm-mat-select-search-section-bg-color, #faf9fd)}:host .dm-mat-select-wrapper .search-section ::ng-deep mat-form-field>.mat-mdc-form-field-subscript-wrapper{display:none}:host .dm-mat-select-wrapper ::ng-deep mat-form-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-icon-suffix{padding:0 4px 0 8px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { formFieldClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "formFieldClass", required: false }] }], wrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperClass", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectAllEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllEnabled", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionValueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValueKey", required: false }] }], optionLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabelKey", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyOption", required: false }] }], emptyOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyOptionLabel", required: false }] }], emptyOptionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyOptionValue", required: false }] }], optionNameFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionNameFormat", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], searchSectionBackgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchSectionBackgroundColor", required: false }] }], sortBySelectedOnTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortBySelectedOnTop", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], noDataLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataLabel", required: false }] }], clearSearchAfterSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchAfterSelect", required: false }] }], clearSearchButtonTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchButtonTooltip", required: false }] }], focusSearchInputOnPanelOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusSearchInputOnPanelOpen", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], filterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterText", required: false }] }, { type: i0.Output, args: ["filterTextChange"] }] } });
+
+/*
+ * Public API Surface of dm-cmps
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DmCmpsDataSource, DmMatSelect };
+//# sourceMappingURL=dmlibs-dm-cmps.mjs.map