@dmlibs/dm-cmps 0.1.27 → 0.1.29
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.
|
@@ -450,6 +450,8 @@ class DmMatSelect {
|
|
|
450
450
|
simpleArray = computed(() => {
|
|
451
451
|
return typeof this.options()[0] === 'string' || typeof this.options()[0] === 'number';
|
|
452
452
|
}, ...(ngDevMode ? [{ debugName: "simpleArray" }] : []));
|
|
453
|
+
optionTemplate = input(null, ...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
|
|
454
|
+
selectTriggerTemplate = input(null, ...(ngDevMode ? [{ debugName: "selectTriggerTemplate" }] : []));
|
|
453
455
|
selectedOptionsIdsSet = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedOptionsIdsSet" }] : []));
|
|
454
456
|
filterText = model('', ...(ngDevMode ? [{ debugName: "filterText" }] : []));
|
|
455
457
|
checkIfAllSelected = computed(() => {
|
|
@@ -642,13 +644,13 @@ class DmMatSelect {
|
|
|
642
644
|
}
|
|
643
645
|
}
|
|
644
646
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmMatSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
645
|
-
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 }, returnObject: { classPropertyName: "returnObject", publicName: "returnObject", 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 }, hideErrorArea: { classPropertyName: "hideErrorArea", publicName: "hideErrorArea", 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: [
|
|
647
|
+
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 }, returnObject: { classPropertyName: "returnObject", publicName: "returnObject", 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 }, hideErrorArea: { classPropertyName: "hideErrorArea", publicName: "hideErrorArea", 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 }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectTriggerTemplate: { classPropertyName: "selectTriggerTemplate", publicName: "selectTriggerTemplate", 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: [
|
|
646
648
|
{
|
|
647
649
|
provide: NG_VALUE_ACCESSOR,
|
|
648
650
|
useExisting: forwardRef(() => DmMatSelect),
|
|
649
651
|
multi: true,
|
|
650
652
|
},
|
|
651
|
-
], ngImport: i0, template: "<div class=\"dm-mat-select-wrapper\" [class]=\"wrapperClass()\">\n <mat-form-field\n [appearance]=\"appearance()\"\n [class]=\"formFieldClass()\"\n style=\"width: 100%\"\n [class.hide-error-area]=\"hideErrorArea()\"\n >\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 }\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 }\n @for (\n option of datasource().result();\n track simpleArray() ? option : option[this.optionValueKey()]\n ) {\n <mat-option\n [value]=\"simpleArray() ? option : option[optionValueKey()]\"\n (onSelectionChange)=\"onSelectionChangeHandler($event, option)\"\n
|
|
653
|
+
], ngImport: i0, template: "<div class=\"dm-mat-select-wrapper\" [class]=\"wrapperClass()\">\n <mat-form-field\n [appearance]=\"appearance()\"\n [class]=\"formFieldClass()\"\n style=\"width: 100%\"\n [class.hide-error-area]=\"hideErrorArea()\"\n >\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 @if (selectTriggerTemplate()) {\n <mat-select-trigger>\n <ng-container\n [ngTemplateOutlet]=\"selectTriggerTemplate()\"\n [ngTemplateOutletContext]=\"{\n value: control().value,\n multiple: multiple(),\n }\"\n ></ng-container>\n </mat-select-trigger>\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 }\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 }\n @for (\n option of datasource().result();\n track simpleArray() ? option : option[this.optionValueKey()]\n ) {\n <!-- <mat-option\n [value]=\"simpleArray() ? option : option[optionValueKey()]\"\n (onSelectionChange)=\"onSelectionChangeHandler($event, option)\"\n >\n @if (optionTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"optionTemplate()\"\n [ngTemplateOutletContext]=\"{\n option: option,\n value: simpleArray() ? option : option[optionValueKey()],\n label: optionNameFormat()\n ? option?.__dmMatSelectFormattedName || ''\n : simpleArray()\n ? option\n : option[optionLabelKey()],\n }\"\n ></ng-container>\n } @else {\n {{\n optionNameFormat()\n ? option?.__dmMatSelectFormattedName || ''\n : simpleArray()\n ? option\n : option[optionLabelKey()]\n }}\n }\n </mat-option> -->\n <mat-option\n [value]=\"simpleArray() ? option : option[optionValueKey()]\"\n (onSelectionChange)=\"onSelectionChangeHandler($event, option)\"\n >\n @if (optionTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"optionTemplate()\"\n [ngTemplateOutletContext]=\"{\n option: option,\n value: simpleArray() ? option : option[optionValueKey()],\n label: optionNameFormat()\n ? option?.__dmMatSelectFormattedName || ''\n : simpleArray()\n ? option\n : option[optionLabelKey()],\n onSelectionChange: onSelectionChangeHandler,\n }\"\n ></ng-container>\n } @else {\n {{\n optionNameFormat()\n ? option?.__dmMatSelectFormattedName || ''\n : simpleArray()\n ? option\n : option[optionLabelKey()]\n }}\n }\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>\n } @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}.dm-mat-select-wrapper ::ng-deep .hide-error-area>.mat-mdc-form-field-subscript-wrapper{display:none!important;height:0!important}\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: "directive", type: i5.MatSelectTrigger, selector: "mat-select-trigger" }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] });
|
|
652
654
|
}
|
|
653
655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmMatSelect, decorators: [{
|
|
654
656
|
type: Component,
|
|
@@ -669,8 +671,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
669
671
|
useExisting: forwardRef(() => DmMatSelect),
|
|
670
672
|
multi: true,
|
|
671
673
|
},
|
|
672
|
-
], template: "<div class=\"dm-mat-select-wrapper\" [class]=\"wrapperClass()\">\n <mat-form-field\n [appearance]=\"appearance()\"\n [class]=\"formFieldClass()\"\n style=\"width: 100%\"\n [class.hide-error-area]=\"hideErrorArea()\"\n >\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 }\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 }\n @for (\n option of datasource().result();\n track simpleArray() ? option : option[this.optionValueKey()]\n ) {\n <mat-option\n [value]=\"simpleArray() ? option : option[optionValueKey()]\"\n (onSelectionChange)=\"onSelectionChangeHandler($event, option)\"\n
|
|
673
|
-
}], 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 }] }], returnObject: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnObject", 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 }] }], hideErrorArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideErrorArea", 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"] }] } });
|
|
674
|
+
], template: "<div class=\"dm-mat-select-wrapper\" [class]=\"wrapperClass()\">\n <mat-form-field\n [appearance]=\"appearance()\"\n [class]=\"formFieldClass()\"\n style=\"width: 100%\"\n [class.hide-error-area]=\"hideErrorArea()\"\n >\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 @if (selectTriggerTemplate()) {\n <mat-select-trigger>\n <ng-container\n [ngTemplateOutlet]=\"selectTriggerTemplate()\"\n [ngTemplateOutletContext]=\"{\n value: control().value,\n multiple: multiple(),\n }\"\n ></ng-container>\n </mat-select-trigger>\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 }\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 }\n @for (\n option of datasource().result();\n track simpleArray() ? option : option[this.optionValueKey()]\n ) {\n <!-- <mat-option\n [value]=\"simpleArray() ? option : option[optionValueKey()]\"\n (onSelectionChange)=\"onSelectionChangeHandler($event, option)\"\n >\n @if (optionTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"optionTemplate()\"\n [ngTemplateOutletContext]=\"{\n option: option,\n value: simpleArray() ? option : option[optionValueKey()],\n label: optionNameFormat()\n ? option?.__dmMatSelectFormattedName || ''\n : simpleArray()\n ? option\n : option[optionLabelKey()],\n }\"\n ></ng-container>\n } @else {\n {{\n optionNameFormat()\n ? option?.__dmMatSelectFormattedName || ''\n : simpleArray()\n ? option\n : option[optionLabelKey()]\n }}\n }\n </mat-option> -->\n <mat-option\n [value]=\"simpleArray() ? option : option[optionValueKey()]\"\n (onSelectionChange)=\"onSelectionChangeHandler($event, option)\"\n >\n @if (optionTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"optionTemplate()\"\n [ngTemplateOutletContext]=\"{\n option: option,\n value: simpleArray() ? option : option[optionValueKey()],\n label: optionNameFormat()\n ? option?.__dmMatSelectFormattedName || ''\n : simpleArray()\n ? option\n : option[optionLabelKey()],\n onSelectionChange: onSelectionChangeHandler,\n }\"\n ></ng-container>\n } @else {\n {{\n optionNameFormat()\n ? option?.__dmMatSelectFormattedName || ''\n : simpleArray()\n ? option\n : option[optionLabelKey()]\n }}\n }\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>\n } @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}.dm-mat-select-wrapper ::ng-deep .hide-error-area>.mat-mdc-form-field-subscript-wrapper{display:none!important;height:0!important}\n"] }]
|
|
675
|
+
}], 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 }] }], returnObject: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnObject", 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 }] }], hideErrorArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideErrorArea", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], propertiesToSkipInSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertiesToSkipInSearch", required: false }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], selectTriggerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectTriggerTemplate", required: false }] }], filterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterText", required: false }] }, { type: i0.Output, args: ["filterTextChange"] }] } });
|
|
674
676
|
|
|
675
677
|
class DmColorPicker {
|
|
676
678
|
colors = input([
|
|
@@ -779,11 +781,23 @@ class DmColorPicker {
|
|
|
779
781
|
registerOnChange(fn) { }
|
|
780
782
|
registerOnTouched(fn) { }
|
|
781
783
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
782
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DmColorPicker, isStandalone: true, selector: "dm-color-picker", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, customColor: { classPropertyName: "customColor", publicName: "customColor", isSignal: true, isRequired: false, transformFunction: null }, opacitySlider: { classPropertyName: "opacitySlider", publicName: "opacitySlider", isSignal: true, isRequired: false, transformFunction: null }, opacitySliderLabel: { classPropertyName: "opacitySliderLabel", publicName: "opacitySliderLabel", isSignal: true, isRequired: false, transformFunction: null }, customColorTooltip: { classPropertyName: "customColorTooltip", publicName: "customColorTooltip", isSignal: true, isRequired: false, transformFunction: null }, wrapperClass: { classPropertyName: "wrapperClass", publicName: "wrapperClass", isSignal: true, isRequired: false, transformFunction: null }, wrapperStyle: { classPropertyName: "wrapperStyle", publicName: "wrapperStyle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onColorChange: "onColorChange", value: "valueChange" },
|
|
784
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DmColorPicker, isStandalone: true, selector: "dm-color-picker", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, customColor: { classPropertyName: "customColor", publicName: "customColor", isSignal: true, isRequired: false, transformFunction: null }, opacitySlider: { classPropertyName: "opacitySlider", publicName: "opacitySlider", isSignal: true, isRequired: false, transformFunction: null }, opacitySliderLabel: { classPropertyName: "opacitySliderLabel", publicName: "opacitySliderLabel", isSignal: true, isRequired: false, transformFunction: null }, customColorTooltip: { classPropertyName: "customColorTooltip", publicName: "customColorTooltip", isSignal: true, isRequired: false, transformFunction: null }, wrapperClass: { classPropertyName: "wrapperClass", publicName: "wrapperClass", isSignal: true, isRequired: false, transformFunction: null }, wrapperStyle: { classPropertyName: "wrapperStyle", publicName: "wrapperStyle", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onColorChange: "onColorChange", value: "valueChange" }, providers: [
|
|
785
|
+
{
|
|
786
|
+
provide: NG_VALUE_ACCESSOR,
|
|
787
|
+
useExisting: forwardRef(() => DmColorPicker),
|
|
788
|
+
multi: true,
|
|
789
|
+
},
|
|
790
|
+
], ngImport: i0, template: "<div class=\"dm-color-picker-wrapper\" [class]=\"wrapperClass()\" [style]=\"wrapperStyle()\">\n <div\n class=\"dm-color-picker\"\n [matMenuTriggerFor]=\"colorPicker\"\n [style.background-color]=\"selectedColor()\"\n [matTooltip]=\"tooltip()\"\n [matTooltipPosition]=\"tooltipPosition()\"\n [style.width.px]=\"width()\"\n [style.height.px]=\"height()\"\n [style.border-radius]=\"radius()\"\n ></div>\n @if (opacitySlider()){\n <div class=\"dm-color-picker-slider-wrapper\">\n {{ opacitySliderLabel() }}\n <mat-slider min=\"0\" max=\"100\" step=\"1\" discrete [displayWith]=\"formatLabel\">\n <input\n matSliderThumb\n [value]=\"getOpacity()\"\n (input)=\"onOpacityChange($event)\"\n #slider\n (change)=\"updateSelectedColor()\"\n />\n </mat-slider>\n </div>\n }\n</div>\n\n<mat-menu #colorPicker=\"matMenu\">\n <div class=\"dm-color-picker-menu\">\n @for (color of colors(); track color.color){\n <div\n (click)=\"onColorSelected(color.color)\"\n class=\"dm-color-div\"\n [matTooltip]=\"color.tooltip || ''\"\n matTooltipPosition=\"above\"\n [style.background-color]=\"color.color\"\n ></div>\n } @if (customColor()){<input\n (click)=\"$event.stopPropagation()\"\n [matTooltip]=\"customColorTooltip()\"\n [matTooltipPosition]=\"tooltipPosition()\"\n [value]=\"selectedColor()\"\n type=\"color\"\n class=\"pointer\"\n (change)=\"_onColorChange($event)\"\n />}\n </div>\n</mat-menu>\n", styles: [".dm-color-picker-wrapper{display:flex;flex-direction:column;align-items:start;width:fit-content}.dm-color-picker-wrapper .dm-color-picker{cursor:pointer;padding:3px;box-shadow:0 0 2.5px 1px #00000080}.dm-color-picker-wrapper .dm-color-picker-slider-wrapper{display:flex;align-items:center;gap:5px}.dm-color-picker-menu{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;height:100%}.dm-color-picker-menu .dm-color-div{width:30px;height:30px;border-radius:50%;margin:5px;cursor:pointer;box-shadow:0 0 2.5px 1px #00000080}.dm-color-picker-menu .dm-color-div:hover{box-shadow:0 0 5px 2px #00000080}.pointer{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i3$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i3$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] });
|
|
783
791
|
}
|
|
784
792
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DmColorPicker, decorators: [{
|
|
785
793
|
type: Component,
|
|
786
|
-
args: [{ selector: 'dm-color-picker', standalone: true, imports: [MatMenuModule, MatTooltipModule, CommonModule, MatSliderModule],
|
|
794
|
+
args: [{ selector: 'dm-color-picker', standalone: true, imports: [MatMenuModule, MatTooltipModule, CommonModule, MatSliderModule], providers: [
|
|
795
|
+
{
|
|
796
|
+
provide: NG_VALUE_ACCESSOR,
|
|
797
|
+
useExisting: forwardRef(() => DmColorPicker),
|
|
798
|
+
multi: true,
|
|
799
|
+
},
|
|
800
|
+
], template: "<div class=\"dm-color-picker-wrapper\" [class]=\"wrapperClass()\" [style]=\"wrapperStyle()\">\n <div\n class=\"dm-color-picker\"\n [matMenuTriggerFor]=\"colorPicker\"\n [style.background-color]=\"selectedColor()\"\n [matTooltip]=\"tooltip()\"\n [matTooltipPosition]=\"tooltipPosition()\"\n [style.width.px]=\"width()\"\n [style.height.px]=\"height()\"\n [style.border-radius]=\"radius()\"\n ></div>\n @if (opacitySlider()){\n <div class=\"dm-color-picker-slider-wrapper\">\n {{ opacitySliderLabel() }}\n <mat-slider min=\"0\" max=\"100\" step=\"1\" discrete [displayWith]=\"formatLabel\">\n <input\n matSliderThumb\n [value]=\"getOpacity()\"\n (input)=\"onOpacityChange($event)\"\n #slider\n (change)=\"updateSelectedColor()\"\n />\n </mat-slider>\n </div>\n }\n</div>\n\n<mat-menu #colorPicker=\"matMenu\">\n <div class=\"dm-color-picker-menu\">\n @for (color of colors(); track color.color){\n <div\n (click)=\"onColorSelected(color.color)\"\n class=\"dm-color-div\"\n [matTooltip]=\"color.tooltip || ''\"\n matTooltipPosition=\"above\"\n [style.background-color]=\"color.color\"\n ></div>\n } @if (customColor()){<input\n (click)=\"$event.stopPropagation()\"\n [matTooltip]=\"customColorTooltip()\"\n [matTooltipPosition]=\"tooltipPosition()\"\n [value]=\"selectedColor()\"\n type=\"color\"\n class=\"pointer\"\n (change)=\"_onColorChange($event)\"\n />}\n </div>\n</mat-menu>\n", styles: [".dm-color-picker-wrapper{display:flex;flex-direction:column;align-items:start;width:fit-content}.dm-color-picker-wrapper .dm-color-picker{cursor:pointer;padding:3px;box-shadow:0 0 2.5px 1px #00000080}.dm-color-picker-wrapper .dm-color-picker-slider-wrapper{display:flex;align-items:center;gap:5px}.dm-color-picker-menu{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;height:100%}.dm-color-picker-menu .dm-color-div{width:30px;height:30px;border-radius:50%;margin:5px;cursor:pointer;box-shadow:0 0 2.5px 1px #00000080}.dm-color-picker-menu .dm-color-div:hover{box-shadow:0 0 5px 2px #00000080}.pointer{cursor:pointer}\n"] }]
|
|
787
801
|
}], ctorParameters: () => [], propDecorators: { colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], customColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "customColor", required: false }] }], opacitySlider: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacitySlider", required: false }] }], opacitySliderLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacitySliderLabel", required: false }] }], customColorTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "customColorTooltip", required: false }] }], wrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperClass", required: false }] }], wrapperStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperStyle", required: false }] }], onColorChange: [{ type: i0.Output, args: ["onColorChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
788
802
|
|
|
789
803
|
const DEFAULT_SPINNER_ID = 'dm-spinner';
|