@siemens/element-ng 49.8.0 → 49.10.0
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.
- package/fesm2022/siemens-element-ng-application-header.mjs +4 -4
- package/fesm2022/siemens-element-ng-application-header.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-avatar.mjs +2 -2
- package/fesm2022/siemens-element-ng-avatar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-breadcrumb-router.mjs +6 -2
- package/fesm2022/siemens-element-ng-breadcrumb-router.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-chat-messages.mjs +43 -19
- package/fesm2022/siemens-element-ng-chat-messages.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-circle-status.mjs +2 -2
- package/fesm2022/siemens-element-ng-circle-status.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-color-picker.mjs +9 -4
- package/fesm2022/siemens-element-ng-color-picker.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-dashboard.mjs +467 -13
- package/fesm2022/siemens-element-ng-dashboard.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-datatable.mjs +10 -19
- package/fesm2022/siemens-element-ng-datatable.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-date-range-filter.mjs +2 -2
- package/fesm2022/siemens-element-ng-date-range-filter.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-datepicker.mjs +6 -6
- package/fesm2022/siemens-element-ng-datepicker.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-file-uploader.mjs +2 -2
- package/fesm2022/siemens-element-ng-file-uploader.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-form.mjs +8 -10
- package/fesm2022/siemens-element-ng-form.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-header-dropdown.mjs +19 -55
- package/fesm2022/siemens-element-ng-header-dropdown.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-main-detail-container.mjs +2 -2
- package/fesm2022/siemens-element-ng-main-detail-container.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-menu.mjs +5 -7
- package/fesm2022/siemens-element-ng-menu.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs +110 -51
- package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs +25 -29
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-notification-item.mjs +2 -2
- package/fesm2022/siemens-element-ng-notification-item.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-select.mjs +455 -48
- package/fesm2022/siemens-element-ng-select.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-side-panel.mjs +2 -2
- package/fesm2022/siemens-element-ng-side-panel.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-slider.mjs +2 -2
- package/fesm2022/siemens-element-ng-slider.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-status-toggle.mjs +2 -2
- package/fesm2022/siemens-element-ng-status-toggle.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-translate.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tree-view.mjs +52 -30
- package/fesm2022/siemens-element-ng-tree-view.mjs.map +1 -1
- package/package.json +3 -3
- package/template-i18n.json +5 -0
- package/types/siemens-element-ng-breadcrumb-router.d.ts +6 -2
- package/types/siemens-element-ng-chat-messages.d.ts +6 -3
- package/types/siemens-element-ng-color-picker.d.ts +7 -2
- package/types/siemens-element-ng-dashboard.d.ts +360 -5
- package/types/siemens-element-ng-datatable.d.ts +0 -1
- package/types/siemens-element-ng-form.d.ts +1 -1
- package/types/siemens-element-ng-header-dropdown.d.ts +0 -8
- package/types/siemens-element-ng-navbar-vertical-next.d.ts +39 -9
- package/types/siemens-element-ng-navbar-vertical.d.ts +2 -1
- package/types/siemens-element-ng-select.d.ts +241 -2
- package/types/siemens-element-ng-translate.d.ts +5 -0
- package/types/siemens-element-ng-tree-view.d.ts +4 -5
|
@@ -5,7 +5,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
|
5
5
|
import { elementOk } from '@siemens/element-icons';
|
|
6
6
|
import { isRTL } from '@siemens/element-ng/common';
|
|
7
7
|
import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
|
|
8
|
-
import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
|
|
8
|
+
import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* Copyright (c) Siemens 2016 - 2026
|
|
@@ -65,8 +65,13 @@ class SiColorPickerComponent {
|
|
|
65
65
|
disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled' });
|
|
66
66
|
/**
|
|
67
67
|
* Aria label for the color input button.
|
|
68
|
+
*
|
|
69
|
+
* @defaultValue
|
|
70
|
+
* ```
|
|
71
|
+
* t(() => $localize`:@@SI_COLOR_PICKER.SELECTED_LABEL:Selected color {{color}}`)
|
|
72
|
+
* ```
|
|
68
73
|
*/
|
|
69
|
-
ariaLabel = input(...(ngDevMode ? [
|
|
74
|
+
ariaLabel = input(t(() => $localize `:@@SI_COLOR_PICKER.SELECTED_LABEL:Selected color {{color}}`), ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
70
75
|
onChange = () => { };
|
|
71
76
|
onTouched = () => { };
|
|
72
77
|
colorInputRef = viewChild.required('colorInputBox');
|
|
@@ -149,7 +154,7 @@ class SiColorPickerComponent {
|
|
|
149
154
|
useExisting: SiColorPickerComponent,
|
|
150
155
|
multi: true
|
|
151
156
|
}
|
|
152
|
-
], viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInputBox"], descendants: true, isSignal: true }, { propertyName: "swatchInputs", predicate: ["swatchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n #colorInputBox\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n class=\"input-color-box\"\n type=\"button\"\n [class.is-open]=\"isOverlayOpen()\"\n [attr.aria-label]=\"(ariaLabel() | translate)
|
|
157
|
+
], viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInputBox"], descendants: true, isSignal: true }, { propertyName: "swatchInputs", predicate: ["swatchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n #colorInputBox\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n class=\"input-color-box\"\n type=\"button\"\n [class.is-open]=\"isOverlayOpen()\"\n [attr.aria-label]=\"\n ariaLabel() ? (ariaLabel() | translate: { color: color() ?? '' }) : (color() ?? null)\n \"\n [disabled]=\"disabled()\"\n (keydown.arrowDown)=\"openOverlay()\"\n (blur)=\"blur()\"\n (click)=\"openOverlay()\"\n>\n <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n (backdropClick)=\"overlayDetach()\"\n (detach)=\"overlayDetach()\"\n>\n <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n <div role=\"row\" class=\"colors-row gap-4\">\n @for (paint of colorPalette(); track $index) {\n <div role=\"gridcell\" class=\"swatch\">\n <input\n #swatchInput\n type=\"radio\"\n name=\"color\"\n class=\"btn-check\"\n [id]=\"paint\"\n [attr.aria-label]=\"paint\"\n [value]=\"paint\"\n [checked]=\"color() === paint\"\n (change)=\"selectColor(paint)\"\n (keydown.enter)=\"selectColor(paint)\"\n (keydown.arrowUp)=\"arrowUp($index, $event)\"\n (keydown.arrowDown)=\"arrowDown($index, $event)\"\n (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n (keydown.arrowRight)=\"arrowRight($index, $event)\"\n (keydown.tab)=\"overlayDetach()\"\n />\n <label\n class=\"color-box swatch-label\"\n [attr.for]=\"paint\"\n [style.background]=\"'var(--' + paint + ')'\"\n >\n @if (color() === paint) {\n <si-icon class=\"icon text-inverse p-1\" [icon]=\"icons.elementOk\" />\n }\n </label>\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".colors-row{display:grid;grid-template-columns:repeat(4,1.5rem)}.color-box{position:relative;display:flex;align-items:center;justify-content:center;block-size:1.5rem;inline-size:1.5rem}input:focus~.color-box{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.input-color-box{cursor:pointer;position:relative;padding:7px;border-radius:var(--element-radius-1);border-width:1px;border-style:solid;border-color:var(--element-ui-2);background-color:var(--element-base-1)}.input-color-box:hover{border-color:var(--element-ui-1)}.input-color-box:not(:hover){border-color:var(--element-ui-2)}.input-color-box:not(:hover).is-open{border-color:var(--element-ui-1)}.input-color-box:disabled{cursor:default;border-color:var(--element-ui-3)}.swatch{block-size:1.5rem}.swatch-label{cursor:pointer}.swatch-label:hover{box-shadow:0 0 0 1px var(--element-button-focus-overlay-color),0 0 0 2px var(--element-ui-3)}.inside-box{block-size:1rem;inline-size:1rem}.colors{cursor:pointer}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
153
158
|
}
|
|
154
159
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiColorPickerComponent, decorators: [{
|
|
155
160
|
type: Component,
|
|
@@ -159,7 +164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
159
164
|
useExisting: SiColorPickerComponent,
|
|
160
165
|
multi: true
|
|
161
166
|
}
|
|
162
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #colorInputBox\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n class=\"input-color-box\"\n type=\"button\"\n [class.is-open]=\"isOverlayOpen()\"\n [attr.aria-label]=\"(ariaLabel() | translate)
|
|
167
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #colorInputBox\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n class=\"input-color-box\"\n type=\"button\"\n [class.is-open]=\"isOverlayOpen()\"\n [attr.aria-label]=\"\n ariaLabel() ? (ariaLabel() | translate: { color: color() ?? '' }) : (color() ?? null)\n \"\n [disabled]=\"disabled()\"\n (keydown.arrowDown)=\"openOverlay()\"\n (blur)=\"blur()\"\n (click)=\"openOverlay()\"\n>\n <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n (backdropClick)=\"overlayDetach()\"\n (detach)=\"overlayDetach()\"\n>\n <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n <div role=\"row\" class=\"colors-row gap-4\">\n @for (paint of colorPalette(); track $index) {\n <div role=\"gridcell\" class=\"swatch\">\n <input\n #swatchInput\n type=\"radio\"\n name=\"color\"\n class=\"btn-check\"\n [id]=\"paint\"\n [attr.aria-label]=\"paint\"\n [value]=\"paint\"\n [checked]=\"color() === paint\"\n (change)=\"selectColor(paint)\"\n (keydown.enter)=\"selectColor(paint)\"\n (keydown.arrowUp)=\"arrowUp($index, $event)\"\n (keydown.arrowDown)=\"arrowDown($index, $event)\"\n (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n (keydown.arrowRight)=\"arrowRight($index, $event)\"\n (keydown.tab)=\"overlayDetach()\"\n />\n <label\n class=\"color-box swatch-label\"\n [attr.for]=\"paint\"\n [style.background]=\"'var(--' + paint + ')'\"\n >\n @if (color() === paint) {\n <si-icon class=\"icon text-inverse p-1\" [icon]=\"icons.elementOk\" />\n }\n </label>\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".colors-row{display:grid;grid-template-columns:repeat(4,1.5rem)}.color-box{position:relative;display:flex;align-items:center;justify-content:center;block-size:1.5rem;inline-size:1.5rem}input:focus~.color-box{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.input-color-box{cursor:pointer;position:relative;padding:7px;border-radius:var(--element-radius-1);border-width:1px;border-style:solid;border-color:var(--element-ui-2);background-color:var(--element-base-1)}.input-color-box:hover{border-color:var(--element-ui-1)}.input-color-box:not(:hover){border-color:var(--element-ui-2)}.input-color-box:not(:hover).is-open{border-color:var(--element-ui-1)}.input-color-box:disabled{cursor:default;border-color:var(--element-ui-3)}.swatch{block-size:1.5rem}.swatch-label{cursor:pointer}.swatch-label:hover{box-shadow:0 0 0 1px var(--element-button-focus-overlay-color),0 0 0 2px var(--element-ui-3)}.inside-box{block-size:1rem;inline-size:1rem}.colors{cursor:pointer}\n"] }]
|
|
163
168
|
}], propDecorators: { colorPalette: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorPalette", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }, { type: i0.Output, args: ["colorChange"] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], colorInputRef: [{ type: i0.ViewChild, args: ['colorInputBox', { isSignal: true }] }], swatchInputs: [{ type: i0.ViewChildren, args: ['swatchInput', { isSignal: true }] }] } });
|
|
164
169
|
|
|
165
170
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"siemens-element-ng-color-picker.mjs","sources":["../../../../projects/element-ng/color-picker/si-color-picker.component.ts","../../../../projects/element-ng/color-picker/si-color-picker.component.html","../../../../projects/element-ng/color-picker/index.ts","../../../../projects/element-ng/color-picker/siemens-element-ng-color-picker.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n input,\n model,\n signal,\n viewChild,\n viewChildren\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { elementOk } from '@siemens/element-icons';\nimport { isRTL } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n/**\n * The Element data color palette is used as default.\n * Note: This array needs to be kept in sync with the design system data color tokens.\n */\nconst defaultDataColors: string[] = [\n 'element-data-1',\n 'element-data-2',\n 'element-data-3',\n 'element-data-4',\n 'element-data-5',\n 'element-data-6',\n 'element-data-7',\n 'element-data-8',\n 'element-data-9',\n 'element-data-10',\n 'element-data-11',\n 'element-data-12',\n 'element-data-13',\n 'element-data-14',\n 'element-data-15',\n 'element-data-16'\n];\n@Component({\n selector: 'si-color-picker',\n imports: [SiIconComponent, SiTranslatePipe, CdkConnectedOverlay, CdkOverlayOrigin],\n templateUrl: './si-color-picker.component.html',\n styleUrl: './si-color-picker.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: SiColorPickerComponent,\n multi: true\n }\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiColorPickerComponent implements ControlValueAccessor {\n // eslint-disable-next-line defaultValue/tsdoc-defaultValue-annotation\n /**\n * The color palette to choose the colors from. As colors, only valid CSS\n * variable names omitting the `--` prefix or Element color tokens omitting\n * the `$` prefix are supported.\n *\n * Note: If custom CSS variables are provided, they need to be defined for\n * both light and dark mode.\n *\n * @defaultValue The first 16 colors of the Element data color palette.\n */\n readonly colorPalette = input<string[]>(defaultDataColors);\n\n /**\n * The selected color.\n */\n readonly color = model<string>();\n\n /**\n * Specifies whether the color popup should automatically close on a color selection.\n *\n * @defaultValue false\n */\n readonly autoClose = input(false, { transform: booleanAttribute });\n\n /**\n * Specifies whether the color picker component is disabled.\n *\n * @defaultValue false\n */\n // eslint-disable-next-line @angular-eslint/no-input-rename\n readonly disabledInput = input(false, { alias: 'disabled' });\n\n /**\n * Aria label for the color input button.\n */\n readonly ariaLabel = input<TranslatableString>();\n\n private onChange: (value: string) => void = () => {};\n private onTouched: () => void = () => {};\n\n private readonly colorInputRef =\n viewChild.required<ElementRef<HTMLInputElement>>('colorInputBox');\n private readonly swatchInputs = viewChildren<ElementRef<HTMLInputElement>>('swatchInput');\n private readonly selectedSwatchInput = computed(() =>\n this.swatchInputs().find(swatchInput => swatchInput.nativeElement.checked)\n );\n private readonly disabledNgControl = signal(false);\n private readonly numberOfColumns = 4;\n protected readonly disabled = computed(() => this.disabledInput() || this.disabledNgControl());\n protected readonly isOverlayOpen = signal(false);\n protected readonly icons = addIcons({ elementOk });\n\n protected blur(): void {\n if (!this.autoClose()) {\n this.onTouched();\n }\n }\n\n protected arrowDown(index: number, event: Event): void {\n const nextIndex = index + this.numberOfColumns;\n this.focusLabel(nextIndex);\n event.preventDefault();\n }\n\n protected arrowUp(index: number, event: Event): void {\n const prevIndex = index - this.numberOfColumns;\n this.focusLabel(prevIndex);\n event.preventDefault();\n }\n\n protected arrowLeft(index: number, event: Event): void {\n const prevIndex = index + (isRTL() ? 1 : -1);\n this.focusLabel(prevIndex);\n event.preventDefault();\n }\n\n protected arrowRight(index: number, event: Event): void {\n const prevIndex = index + (isRTL() ? -1 : +1);\n this.focusLabel(prevIndex);\n event.preventDefault();\n }\n\n private focusLabel(index: number): void {\n const labels = this.swatchInputs();\n const totalSwatches = labels.length;\n const normalizedIndex = (index + totalSwatches) % totalSwatches;\n labels[normalizedIndex].nativeElement.focus();\n }\n\n protected openOverlay(): void {\n this.isOverlayOpen.set(true);\n this.focusSelectedColor();\n }\n\n protected overlayDetach(): void {\n this.isOverlayOpen.set(false);\n setTimeout(() => {\n this.colorInputRef().nativeElement?.focus();\n });\n }\n\n private focusSelectedColor(): void {\n setTimeout(() => {\n this.selectedSwatchInput()?.nativeElement.focus();\n });\n }\n\n protected selectColor(color: string): void {\n this.color.set(color);\n this.onChange(color!);\n if (this.autoClose()) {\n this.overlayDetach();\n }\n }\n\n writeValue(value: string): void {\n this.color.set(value);\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabledNgControl.set(isDisabled);\n }\n}\n","<button\n #colorInputBox\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n class=\"input-color-box\"\n type=\"button\"\n [class.is-open]=\"isOverlayOpen()\"\n [attr.aria-label]=\"(ariaLabel() | translate) + ' ' + color()\"\n [disabled]=\"disabled()\"\n (keydown.arrowDown)=\"openOverlay()\"\n (blur)=\"blur()\"\n (click)=\"openOverlay()\"\n>\n <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n (backdropClick)=\"overlayDetach()\"\n (detach)=\"overlayDetach()\"\n>\n <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n <div role=\"row\" class=\"colors-row gap-4\">\n @for (paint of colorPalette(); track $index) {\n <div role=\"gridcell\" class=\"swatch\">\n <input\n #swatchInput\n type=\"radio\"\n name=\"color\"\n class=\"btn-check\"\n [id]=\"paint\"\n [attr.aria-label]=\"paint\"\n [value]=\"paint\"\n [checked]=\"color() === paint\"\n (change)=\"selectColor(paint)\"\n (keydown.enter)=\"selectColor(paint)\"\n (keydown.arrowUp)=\"arrowUp($index, $event)\"\n (keydown.arrowDown)=\"arrowDown($index, $event)\"\n (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n (keydown.arrowRight)=\"arrowRight($index, $event)\"\n (keydown.tab)=\"overlayDetach()\"\n />\n <label\n class=\"color-box swatch-label\"\n [attr.for]=\"paint\"\n [style.background]=\"'var(--' + paint + ')'\"\n >\n @if (color() === paint) {\n <si-icon class=\"icon text-inverse p-1\" [icon]=\"icons.elementOk\" />\n }\n </label>\n </div>\n }\n </div>\n </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-color-picker.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAAA;;;AAGG;AAoBH;;;AAGG;AACH,MAAM,iBAAiB,GAAa;IAClC,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB;CACD;MAeY,sBAAsB,CAAA;;AAEjC;;;;;;;;;AASG;AACM,IAAA,YAAY,GAAG,KAAK,CAAW,iBAAiB,wDAAC;AAE1D;;AAEG;IACM,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;AAEhC;;;;AAIG;IACM,SAAS,GAAG,KAAK,CAAC,KAAK,sDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAElE;;;;AAIG;;IAEM,aAAa,GAAG,KAAK,CAAC,KAAK,0DAAI,KAAK,EAAE,UAAU,EAAA,CAAG;AAE5D;;AAEG;IACM,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAsB;AAExC,IAAA,QAAQ,GAA4B,MAAK,EAAE,CAAC;AAC5C,IAAA,SAAS,GAAe,MAAK,EAAE,CAAC;AAEvB,IAAA,aAAa,GAC5B,SAAS,CAAC,QAAQ,CAA+B,eAAe,CAAC;AAClD,IAAA,YAAY,GAAG,YAAY,CAA+B,aAAa,wDAAC;IACxE,mBAAmB,GAAG,QAAQ,CAAC,MAC9C,IAAI,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,qBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAC3E;AACgB,IAAA,iBAAiB,GAAG,MAAM,CAAC,KAAK,6DAAC;IACjC,eAAe,GAAG,CAAC;AACjB,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,iBAAiB,EAAE,oDAAC;AAC3E,IAAA,aAAa,GAAG,MAAM,CAAC,KAAK,yDAAC;AAC7B,IAAA,KAAK,GAAG,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;IAExC,IAAI,GAAA;AACZ,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE;YACrB,IAAI,CAAC,SAAS,EAAE;QAClB;IACF;IAEU,SAAS,CAAC,KAAa,EAAE,KAAY,EAAA;AAC7C,QAAA,MAAM,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,eAAe;AAC9C,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,cAAc,EAAE;IACxB;IAEU,OAAO,CAAC,KAAa,EAAE,KAAY,EAAA;AAC3C,QAAA,MAAM,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,eAAe;AAC9C,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,cAAc,EAAE;IACxB;IAEU,SAAS,CAAC,KAAa,EAAE,KAAY,EAAA;AAC7C,QAAA,MAAM,SAAS,GAAG,KAAK,IAAI,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AAC5C,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,cAAc,EAAE;IACxB;IAEU,UAAU,CAAC,KAAa,EAAE,KAAY,EAAA;AAC9C,QAAA,MAAM,SAAS,GAAG,KAAK,IAAI,KAAK,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAC7C,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,cAAc,EAAE;IACxB;AAEQ,IAAA,UAAU,CAAC,KAAa,EAAA;AAC9B,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,EAAE;AAClC,QAAA,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM;QACnC,MAAM,eAAe,GAAG,CAAC,KAAK,GAAG,aAAa,IAAI,aAAa;QAC/D,MAAM,CAAC,eAAe,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE;IAC/C;IAEU,WAAW,GAAA;AACnB,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC;QAC5B,IAAI,CAAC,kBAAkB,EAAE;IAC3B;IAEU,aAAa,GAAA;AACrB,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;QAC7B,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,aAAa,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE;AAC7C,QAAA,CAAC,CAAC;IACJ;IAEQ,kBAAkB,GAAA;QACxB,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,mBAAmB,EAAE,EAAE,aAAa,CAAC,KAAK,EAAE;AACnD,QAAA,CAAC,CAAC;IACJ;AAEU,IAAA,WAAW,CAAC,KAAa,EAAA;AACjC,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AACrB,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAM,CAAC;AACrB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;YACpB,IAAI,CAAC,aAAa,EAAE;QACtB;IACF;AAEA,IAAA,UAAU,CAAC,KAAa,EAAA;AACtB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;IACvB;AAEA,IAAA,gBAAgB,CAAC,EAA2B,EAAA;AAC1C,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC;IACxC;uGAnIW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,SAAA,EATtB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,sBAAsB;AACnC,gBAAA,KAAK,EAAE;AACR;SACF,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,eAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,eAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxDH,unEA6DA,olCDdY,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAmB,mBAAmB,EAAA,QAAA,EAAA,qEAAA,EAAA,MAAA,EAAA,CAAA,2BAAA,EAAA,8BAAA,EAAA,qCAAA,EAAA,4BAAA,EAAA,4BAAA,EAAA,0BAAA,EAAA,2BAAA,EAAA,6BAAA,EAAA,8BAAA,EAAA,kCAAA,EAAA,+BAAA,EAAA,mCAAA,EAAA,mCAAA,EAAA,yBAAA,EAAA,iCAAA,EAAA,sCAAA,EAAA,gCAAA,EAAA,iCAAA,EAAA,uCAAA,EAAA,kCAAA,EAAA,yBAAA,EAAA,wCAAA,EAAA,+BAAA,EAAA,+BAAA,EAAA,qBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,kIAAtD,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAY/B,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAdlC,SAAS;+BACE,iBAAiB,EAAA,OAAA,EAClB,CAAC,eAAe,EAAE,eAAe,EAAE,mBAAmB,EAAE,gBAAgB,CAAC,EAAA,SAAA,EAGvE;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAA,sBAAwB;AACnC,4BAAA,KAAK,EAAE;AACR;qBACF,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,unEAAA,EAAA,MAAA,EAAA,CAAA,4hCAAA,CAAA,EAAA;AA6CI,SAAA,CAAA,EAAA,cAAA,EAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,cAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,aAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAAA,eAAe,yEACS,aAAa,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEvG1F;;;AAGG;;ACHH;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"siemens-element-ng-color-picker.mjs","sources":["../../../../projects/element-ng/color-picker/si-color-picker.component.ts","../../../../projects/element-ng/color-picker/si-color-picker.component.html","../../../../projects/element-ng/color-picker/index.ts","../../../../projects/element-ng/color-picker/siemens-element-ng-color-picker.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n input,\n model,\n signal,\n viewChild,\n viewChildren\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { elementOk } from '@siemens/element-icons';\nimport { isRTL } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\n\n/**\n * The Element data color palette is used as default.\n * Note: This array needs to be kept in sync with the design system data color tokens.\n */\nconst defaultDataColors: string[] = [\n 'element-data-1',\n 'element-data-2',\n 'element-data-3',\n 'element-data-4',\n 'element-data-5',\n 'element-data-6',\n 'element-data-7',\n 'element-data-8',\n 'element-data-9',\n 'element-data-10',\n 'element-data-11',\n 'element-data-12',\n 'element-data-13',\n 'element-data-14',\n 'element-data-15',\n 'element-data-16'\n];\n@Component({\n selector: 'si-color-picker',\n imports: [SiIconComponent, SiTranslatePipe, CdkConnectedOverlay, CdkOverlayOrigin],\n templateUrl: './si-color-picker.component.html',\n styleUrl: './si-color-picker.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: SiColorPickerComponent,\n multi: true\n }\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiColorPickerComponent implements ControlValueAccessor {\n // eslint-disable-next-line defaultValue/tsdoc-defaultValue-annotation\n /**\n * The color palette to choose the colors from. As colors, only valid CSS\n * variable names omitting the `--` prefix or Element color tokens omitting\n * the `$` prefix are supported.\n *\n * Note: If custom CSS variables are provided, they need to be defined for\n * both light and dark mode.\n *\n * @defaultValue The first 16 colors of the Element data color palette.\n */\n readonly colorPalette = input<string[]>(defaultDataColors);\n\n /**\n * The selected color.\n */\n readonly color = model<string>();\n\n /**\n * Specifies whether the color popup should automatically close on a color selection.\n *\n * @defaultValue false\n */\n readonly autoClose = input(false, { transform: booleanAttribute });\n\n /**\n * Specifies whether the color picker component is disabled.\n *\n * @defaultValue false\n */\n // eslint-disable-next-line @angular-eslint/no-input-rename\n readonly disabledInput = input(false, { alias: 'disabled' });\n\n /**\n * Aria label for the color input button.\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_COLOR_PICKER.SELECTED_LABEL:Selected color {{color}}`)\n * ```\n */\n readonly ariaLabel = input(\n t(() => $localize`:@@SI_COLOR_PICKER.SELECTED_LABEL:Selected color {{color}}`)\n );\n\n private onChange: (value: string) => void = () => {};\n private onTouched: () => void = () => {};\n\n private readonly colorInputRef =\n viewChild.required<ElementRef<HTMLInputElement>>('colorInputBox');\n private readonly swatchInputs = viewChildren<ElementRef<HTMLInputElement>>('swatchInput');\n private readonly selectedSwatchInput = computed(() =>\n this.swatchInputs().find(swatchInput => swatchInput.nativeElement.checked)\n );\n private readonly disabledNgControl = signal(false);\n private readonly numberOfColumns = 4;\n protected readonly disabled = computed(() => this.disabledInput() || this.disabledNgControl());\n protected readonly isOverlayOpen = signal(false);\n protected readonly icons = addIcons({ elementOk });\n\n protected blur(): void {\n if (!this.autoClose()) {\n this.onTouched();\n }\n }\n\n protected arrowDown(index: number, event: Event): void {\n const nextIndex = index + this.numberOfColumns;\n this.focusLabel(nextIndex);\n event.preventDefault();\n }\n\n protected arrowUp(index: number, event: Event): void {\n const prevIndex = index - this.numberOfColumns;\n this.focusLabel(prevIndex);\n event.preventDefault();\n }\n\n protected arrowLeft(index: number, event: Event): void {\n const prevIndex = index + (isRTL() ? 1 : -1);\n this.focusLabel(prevIndex);\n event.preventDefault();\n }\n\n protected arrowRight(index: number, event: Event): void {\n const prevIndex = index + (isRTL() ? -1 : +1);\n this.focusLabel(prevIndex);\n event.preventDefault();\n }\n\n private focusLabel(index: number): void {\n const labels = this.swatchInputs();\n const totalSwatches = labels.length;\n const normalizedIndex = (index + totalSwatches) % totalSwatches;\n labels[normalizedIndex].nativeElement.focus();\n }\n\n protected openOverlay(): void {\n this.isOverlayOpen.set(true);\n this.focusSelectedColor();\n }\n\n protected overlayDetach(): void {\n this.isOverlayOpen.set(false);\n setTimeout(() => {\n this.colorInputRef().nativeElement?.focus();\n });\n }\n\n private focusSelectedColor(): void {\n setTimeout(() => {\n this.selectedSwatchInput()?.nativeElement.focus();\n });\n }\n\n protected selectColor(color: string): void {\n this.color.set(color);\n this.onChange(color!);\n if (this.autoClose()) {\n this.overlayDetach();\n }\n }\n\n writeValue(value: string): void {\n this.color.set(value);\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabledNgControl.set(isDisabled);\n }\n}\n","<button\n #colorInputBox\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n class=\"input-color-box\"\n type=\"button\"\n [class.is-open]=\"isOverlayOpen()\"\n [attr.aria-label]=\"\n ariaLabel() ? (ariaLabel() | translate: { color: color() ?? '' }) : (color() ?? null)\n \"\n [disabled]=\"disabled()\"\n (keydown.arrowDown)=\"openOverlay()\"\n (blur)=\"blur()\"\n (click)=\"openOverlay()\"\n>\n <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n (backdropClick)=\"overlayDetach()\"\n (detach)=\"overlayDetach()\"\n>\n <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n <div role=\"row\" class=\"colors-row gap-4\">\n @for (paint of colorPalette(); track $index) {\n <div role=\"gridcell\" class=\"swatch\">\n <input\n #swatchInput\n type=\"radio\"\n name=\"color\"\n class=\"btn-check\"\n [id]=\"paint\"\n [attr.aria-label]=\"paint\"\n [value]=\"paint\"\n [checked]=\"color() === paint\"\n (change)=\"selectColor(paint)\"\n (keydown.enter)=\"selectColor(paint)\"\n (keydown.arrowUp)=\"arrowUp($index, $event)\"\n (keydown.arrowDown)=\"arrowDown($index, $event)\"\n (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n (keydown.arrowRight)=\"arrowRight($index, $event)\"\n (keydown.tab)=\"overlayDetach()\"\n />\n <label\n class=\"color-box swatch-label\"\n [attr.for]=\"paint\"\n [style.background]=\"'var(--' + paint + ')'\"\n >\n @if (color() === paint) {\n <si-icon class=\"icon text-inverse p-1\" [icon]=\"icons.elementOk\" />\n }\n </label>\n </div>\n }\n </div>\n </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-color-picker.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAAA;;;AAGG;AAoBH;;;AAGG;AACH,MAAM,iBAAiB,GAAa;IAClC,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB;CACD;MAeY,sBAAsB,CAAA;;AAEjC;;;;;;;;;AASG;AACM,IAAA,YAAY,GAAG,KAAK,CAAW,iBAAiB,wDAAC;AAE1D;;AAEG;IACM,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;AAEhC;;;;AAIG;IACM,SAAS,GAAG,KAAK,CAAC,KAAK,sDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAElE;;;;AAIG;;IAEM,aAAa,GAAG,KAAK,CAAC,KAAK,0DAAI,KAAK,EAAE,UAAU,EAAA,CAAG;AAE5D;;;;;;;AAOG;AACM,IAAA,SAAS,GAAG,KAAK,CACxB,CAAC,CAAC,MAAM,SAAS,CAAA,CAAA,0DAAA,CAA4D,CAAC,qDAC/E;AAEO,IAAA,QAAQ,GAA4B,MAAK,EAAE,CAAC;AAC5C,IAAA,SAAS,GAAe,MAAK,EAAE,CAAC;AAEvB,IAAA,aAAa,GAC5B,SAAS,CAAC,QAAQ,CAA+B,eAAe,CAAC;AAClD,IAAA,YAAY,GAAG,YAAY,CAA+B,aAAa,wDAAC;IACxE,mBAAmB,GAAG,QAAQ,CAAC,MAC9C,IAAI,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,qBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAC3E;AACgB,IAAA,iBAAiB,GAAG,MAAM,CAAC,KAAK,6DAAC;IACjC,eAAe,GAAG,CAAC;AACjB,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,iBAAiB,EAAE,oDAAC;AAC3E,IAAA,aAAa,GAAG,MAAM,CAAC,KAAK,yDAAC;AAC7B,IAAA,KAAK,GAAG,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;IAExC,IAAI,GAAA;AACZ,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE;YACrB,IAAI,CAAC,SAAS,EAAE;QAClB;IACF;IAEU,SAAS,CAAC,KAAa,EAAE,KAAY,EAAA;AAC7C,QAAA,MAAM,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,eAAe;AAC9C,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,cAAc,EAAE;IACxB;IAEU,OAAO,CAAC,KAAa,EAAE,KAAY,EAAA;AAC3C,QAAA,MAAM,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,eAAe;AAC9C,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,cAAc,EAAE;IACxB;IAEU,SAAS,CAAC,KAAa,EAAE,KAAY,EAAA;AAC7C,QAAA,MAAM,SAAS,GAAG,KAAK,IAAI,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AAC5C,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,cAAc,EAAE;IACxB;IAEU,UAAU,CAAC,KAAa,EAAE,KAAY,EAAA;AAC9C,QAAA,MAAM,SAAS,GAAG,KAAK,IAAI,KAAK,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAC7C,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,cAAc,EAAE;IACxB;AAEQ,IAAA,UAAU,CAAC,KAAa,EAAA;AAC9B,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,EAAE;AAClC,QAAA,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM;QACnC,MAAM,eAAe,GAAG,CAAC,KAAK,GAAG,aAAa,IAAI,aAAa;QAC/D,MAAM,CAAC,eAAe,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE;IAC/C;IAEU,WAAW,GAAA;AACnB,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC;QAC5B,IAAI,CAAC,kBAAkB,EAAE;IAC3B;IAEU,aAAa,GAAA;AACrB,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;QAC7B,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,aAAa,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE;AAC7C,QAAA,CAAC,CAAC;IACJ;IAEQ,kBAAkB,GAAA;QACxB,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,mBAAmB,EAAE,EAAE,aAAa,CAAC,KAAK,EAAE;AACnD,QAAA,CAAC,CAAC;IACJ;AAEU,IAAA,WAAW,CAAC,KAAa,EAAA;AACjC,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AACrB,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAM,CAAC;AACrB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;YACpB,IAAI,CAAC,aAAa,EAAE;QACtB;IACF;AAEA,IAAA,UAAU,CAAC,KAAa,EAAA;AACtB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;IACvB;AAEA,IAAA,gBAAgB,CAAC,EAA2B,EAAA;AAC1C,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC;IACxC;uGA1IW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,SAAA,EATtB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,sBAAsB;AACnC,gBAAA,KAAK,EAAE;AACR;SACF,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,eAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,eAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxDH,6qEA+DA,olCDhBY,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAmB,mBAAmB,EAAA,QAAA,EAAA,qEAAA,EAAA,MAAA,EAAA,CAAA,2BAAA,EAAA,8BAAA,EAAA,qCAAA,EAAA,4BAAA,EAAA,4BAAA,EAAA,0BAAA,EAAA,2BAAA,EAAA,6BAAA,EAAA,8BAAA,EAAA,kCAAA,EAAA,+BAAA,EAAA,mCAAA,EAAA,mCAAA,EAAA,yBAAA,EAAA,iCAAA,EAAA,sCAAA,EAAA,gCAAA,EAAA,iCAAA,EAAA,uCAAA,EAAA,kCAAA,EAAA,yBAAA,EAAA,wCAAA,EAAA,+BAAA,EAAA,+BAAA,EAAA,qBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,kIAAtD,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAY/B,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAdlC,SAAS;+BACE,iBAAiB,EAAA,OAAA,EAClB,CAAC,eAAe,EAAE,eAAe,EAAE,mBAAmB,EAAE,gBAAgB,CAAC,EAAA,SAAA,EAGvE;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAA,sBAAwB;AACnC,4BAAA,KAAK,EAAE;AACR;qBACF,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,6qEAAA,EAAA,MAAA,EAAA,CAAA,4hCAAA,CAAA,EAAA;AAoDI,SAAA,CAAA,EAAA,cAAA,EAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,cAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,aAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAAA,eAAe,yEACS,aAAa,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AE9G1F;;;AAGG;;ACHH;;AAEG;;;;"}
|