@dmlibs/dm-cmps 0.1.12 → 0.1.13

package/fesm2022/dmlibs-dm-cmps.mjs

@@ -424,6 +424,7 @@ class DmMatSelect {
     internalControl = new FormControl(null);
     control = computed(() => this.formControl() ?? this.internalControl, ...(ngDevMode ? [{ debugName: "control" }] : []));
     selectionChange = output();
+    onSelectionChange = output();
     icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
     isBootstrapIcon = computed(() => {
         return this.icon() ? this.icon().includes('bi-') : false;
@@ -549,6 +550,13 @@ class DmMatSelect {
             ? option[this.optionValueKey()]
             : option;
     }
+    emitSelectionChange(event, optionRef) {
+        this.onSelectionChange.emit({
+            selected: event.source.selected,
+            optionRef: optionRef,
+            value: optionRef ? this.getOptionValue(optionRef) : null,
+        });
+    }
     onSelectionChangeHandler(event, option) {
         if (!event.isUserInput)
             return;
@@ -566,10 +574,12 @@ class DmMatSelect {
                 newValue = arr.filter((v) => v !== this.getOptionValue(option));
             }
             this.control().setValue(newValue);
+            this.emitSelectionChange(event, option);
         }
         else {
             if (!option) {
                 this.control().setValue(this.emptyOptionValue());
+                this.emitSelectionChange(event, null);
                 return;
             }
             if (selected) {
@@ -578,6 +588,7 @@ class DmMatSelect {
             else {
                 this.control().setValue(null);
             }
+            this.emitSelectionChange(event, option);
         }
         if (this.clearSearchAfterSelect()) {
             this.resetSearch();
@@ -623,7 +634,7 @@ class DmMatSelect {
         }
     }
     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 }, propertiesToSkipInSearch: { classPropertyName: "propertiesToSkipInSearch", publicName: "propertiesToSkipInSearch", 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()\" style=\"width: 100%\">\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            (keyDown.Space)=\"$event.stopPropagation()\"\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: [".dm-mat-select-wrapper{width:100%;position:relative}.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)}.dm-mat-select-wrapper .search-section ::ng-deep mat-form-field>.mat-mdc-form-field-subscript-wrapper{display:none}.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: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.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: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.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: CommonModule }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    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 }, propertiesToSkipInSearch: { classPropertyName: "propertiesToSkipInSearch", publicName: "propertiesToSkipInSearch", isSignal: true, isRequired: false, transformFunction: null }, filterText: { classPropertyName: "filterText", publicName: "filterText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange", onSelectionChange: "onSelectionChange", filterText: "filterTextChange" }, ngImport: i0, template: "<div class=\"dm-mat-select-wrapper\" [class]=\"wrapperClass()\">\n  <mat-form-field [appearance]=\"appearance()\" [class]=\"formFieldClass()\" style=\"width: 100%\">\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            (keyDown.Space)=\"$event.stopPropagation()\"\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: [".dm-mat-select-wrapper{width:100%;position:relative}.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)}.dm-mat-select-wrapper .search-section ::ng-deep mat-form-field>.mat-mdc-form-field-subscript-wrapper{display:none}.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: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.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: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.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: CommonModule }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmMatSelect, decorators: [{
             type: Component,
@@ -639,7 +650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         MatTooltip,
                         MatIcon,
                     ], template: "<div class=\"dm-mat-select-wrapper\" [class]=\"wrapperClass()\">\n  <mat-form-field [appearance]=\"appearance()\" [class]=\"formFieldClass()\" style=\"width: 100%\">\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            (keyDown.Space)=\"$event.stopPropagation()\"\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: [".dm-mat-select-wrapper{width:100%;position:relative}.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)}.dm-mat-select-wrapper .search-section ::ng-deep mat-form-field>.mat-mdc-form-field-subscript-wrapper{display:none}.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 }] }], propertiesToSkipInSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertiesToSkipInSearch", required: false }] }], filterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterText", required: false }] }, { type: i0.Output, args: ["filterTextChange"] }] } });
+        }], 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"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], 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 }] }], propertiesToSkipInSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertiesToSkipInSearch", required: false }] }], filterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterText", required: false }] }, { type: i0.Output, args: ["filterTextChange"] }] } });
 
 class DmColorPicker {
     colors = input([