@dmlibs/dm-cmps 0.1.17 → 0.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, input, booleanAttribute, model, computed, output, effect, Component, Injectable, numberAttribute, Input, Directive, HostListener, Pipe } from '@angular/core';
|
|
2
|
+
import { signal, input, booleanAttribute, model, computed, output, effect, forwardRef, Component, Injectable, numberAttribute, Input, Directive, HostListener, Pipe } from '@angular/core';
|
|
3
3
|
import { toObservable } from '@angular/core/rxjs-interop';
|
|
4
4
|
import { Subject, Subscription, switchMap, debounceTime, distinctUntilChanged } from 'rxjs';
|
|
5
5
|
import * as i2 from '@angular/material/form-field';
|
|
@@ -9,7 +9,7 @@ import { MatSelectModule } from '@angular/material/select';
|
|
|
9
9
|
import * as i11 from '@angular/common';
|
|
10
10
|
import { CommonModule } from '@angular/common';
|
|
11
11
|
import * as i1 from '@angular/forms';
|
|
12
|
-
import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
12
|
+
import { FormControl, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
13
13
|
import * as i6 from '@angular/material/input';
|
|
14
14
|
import { MatInputModule } from '@angular/material/input';
|
|
15
15
|
import * as i3 from '@angular/material/checkbox';
|
|
@@ -634,7 +634,13 @@ class DmMatSelect {
|
|
|
634
634
|
}
|
|
635
635
|
}
|
|
636
636
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmMatSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
637
|
-
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"] }] });
|
|
637
|
+
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" }, providers: [
|
|
638
|
+
{
|
|
639
|
+
provide: NG_VALUE_ACCESSOR,
|
|
640
|
+
useExisting: forwardRef(() => DmMatSelect),
|
|
641
|
+
multi: true,
|
|
642
|
+
},
|
|
643
|
+
], 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"] }] });
|
|
638
644
|
}
|
|
639
645
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmMatSelect, decorators: [{
|
|
640
646
|
type: Component,
|
|
@@ -649,6 +655,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
649
655
|
FormsModule,
|
|
650
656
|
MatTooltip,
|
|
651
657
|
MatIcon,
|
|
658
|
+
], providers: [
|
|
659
|
+
{
|
|
660
|
+
provide: NG_VALUE_ACCESSOR,
|
|
661
|
+
useExisting: forwardRef(() => DmMatSelect),
|
|
662
|
+
multi: true,
|
|
663
|
+
},
|
|
652
664
|
], 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"] }]
|
|
653
665
|
}], 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"] }] } });
|
|
654
666
|
|