@siemens/element-ng 47.1.0 → 47.2.0

package/fesm2022/siemens-element-ng-auto-collapsable-list.mjs

@@ -0,0 +1,312 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Directive, input, booleanAttribute, signal, computed, contentChild, ChangeDetectorRef, ContentChildren, NgModule } from '@angular/core';
+import { ResizeObserverService } from '@siemens/element-ng/resize-observer';
+import { map, distinctUntilChanged, shareReplay, switchMap, startWith, auditTime } from 'rxjs/operators';
+import { BehaviorSubject, of, combineLatest } from 'rxjs';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiAutoCollapsableListMeasurable {
+    /** Emits on element width changes. */
+    size$;
+    elementRef = inject((ElementRef));
+    resizeObserverService = inject(ResizeObserverService);
+    ngAfterViewInit() {
+        this.size$ = this.resizeObserverService
+            .observe(this.elementRef.nativeElement, 0, true, true)
+            .pipe(map(size => size.width), distinctUntilChanged(), shareReplay(1));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAutoCollapsableListMeasurable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiAutoCollapsableListMeasurable, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAutoCollapsableListMeasurable, decorators: [{
+            type: Directive
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiAutoCollapsableListItemDirective extends SiAutoCollapsableListMeasurable {
+    /**
+     * Hide this item even if enough space is available.
+     * When calculating the overall available size, this item is still considered when forceHide=true
+     *
+     * @defaultValue false
+     */
+    forceHide = input(false, { transform: booleanAttribute });
+    /**
+     * True if enough space is available for this item.
+     *
+     * @defaultValue false
+     */
+    canBeVisible = signal(false);
+    /**
+     * True if this item is actually visible to the user
+     */
+    isVisible = computed(() => this.canBeVisible() && !this.forceHide());
+    ngAfterViewInit() {
+        if (getComputedStyle(this.elementRef.nativeElement).display === 'inline') {
+            console.error('siAutoCollapsibleListItem does not work on items with display="inline"');
+        }
+        super.ngAfterViewInit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAutoCollapsableListItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: SiAutoCollapsableListItemDirective, isStandalone: true, selector: "[siAutoCollapsableListItem]", inputs: { forceHide: { classPropertyName: "forceHide", publicName: "forceHide", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.visibility": "isVisible() ? \"visible\" : \"hidden\"", "style.position": "isVisible() ? \"\" : \"absolute\"", "style.z-index": "isVisible() ? \"\" : \"-1\"" } }, exportAs: ["siAutoCollapsableListItem"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAutoCollapsableListItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siAutoCollapsableListItem]',
+                    exportAs: 'siAutoCollapsableListItem',
+                    host: {
+                        '[style.visibility]': 'isVisible() ? "visible" : "hidden"',
+                        '[style.position]': 'isVisible() ? "" : "absolute"',
+                        // Ensure hidden items are behind the visible ones. Otherwise, the visible ones are not clickable
+                        '[style.z-index]': 'isVisible() ? "" : "-1"'
+                    }
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiAutoCollapsableListAdditionalContentDirective extends SiAutoCollapsableListMeasurable {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAutoCollapsableListAdditionalContentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiAutoCollapsableListAdditionalContentDirective, isStandalone: true, selector: "[siAutoCollapsableListAdditionalContent]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAutoCollapsableListAdditionalContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siAutoCollapsableListAdditionalContent]'
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiAutoCollapsableListOverflowItemDirective extends SiAutoCollapsableListItemDirective {
+    /**
+     * Number of hidden items.
+     *
+     * @defaultValue 0
+     */
+    hiddenItemCount = 0;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAutoCollapsableListOverflowItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiAutoCollapsableListOverflowItemDirective, isStandalone: true, selector: "[siAutoCollapsableListOverflowItem]", exportAs: ["siAutoCollapsableListOverflowItem"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAutoCollapsableListOverflowItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siAutoCollapsableListOverflowItem]',
+                    exportAs: 'siAutoCollapsableListOverflowItem'
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiAutoCollapsableListDirective {
+    /**
+     * The items which are displayed in the siAutoCollapsableList.
+     */
+    items;
+    overflowItem = contentChild(SiAutoCollapsableListOverflowItemDirective);
+    additionalContent;
+    /** @defaultValue true */
+    siAutoCollapsableList = input(true, { transform: booleanAttribute });
+    /**
+     * The (flex) gap in pixels, will automatically be set if a pixel value is used in CSS.
+     */
+    gap = input();
+    /**
+     * The element which size is available for the content of the siAutoCollapsableList.
+     *
+     * @defaultValue undefined
+     */
+    containerElement = input(undefined, {
+        alias: 'siAutoCollapsableListContainerElement'
+    });
+    resizeSubscription;
+    disableInitSubscription;
+    elementRef = inject(ElementRef);
+    resizeObserverService = inject(ResizeObserverService);
+    changeDetectorRef = inject(ChangeDetectorRef);
+    containerElementSubject = new BehaviorSubject(this.elementRef.nativeElement);
+    /**
+     * The same as {@link gap}, but automatically read from the computed styles.
+     * Used if not set by user.
+     */
+    computedGap = 0;
+    ngAfterViewInit() {
+        if (this.siAutoCollapsableList()) {
+            this.readGapSize();
+            this.setupResizeListener();
+        }
+        else {
+            this.reset();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.siAutoCollapsableList) {
+            const siAutoCollapsableList = this.siAutoCollapsableList();
+            if (!siAutoCollapsableList && this.resizeSubscription) {
+                this.reset();
+            }
+            else if (siAutoCollapsableList && !this.resizeSubscription && this.items) {
+                this.setupResizeListener();
+            }
+        }
+        if (changes.containerElement) {
+            this.containerElementSubject.next(this.containerElement() ?? this.elementRef.nativeElement);
+        }
+    }
+    ngOnDestroy() {
+        this.resizeSubscription?.unsubscribe();
+        this.disableInitSubscription?.unsubscribe();
+        this.containerElementSubject.complete();
+    }
+    setupResizeListener() {
+        this.disableInitSubscription?.unsubscribe();
+        const containerSize$ = this.containerElementSubject.pipe(switchMap(element => this.resizeObserverService.observe(element, 0, true, true)), map(size => size.width), distinctUntilChanged(), map(size => {
+            const { paddingInlineStart, paddingInlineEnd } = getComputedStyle(this.containerElement() ?? this.elementRef.nativeElement);
+            return size - parseFloat(paddingInlineStart) - parseFloat(paddingInlineEnd);
+        }));
+        const itemSizes$ = this.items.changes.pipe(startWith(this.items), switchMap((items) => !items.length
+            ? of([])
+            : combineLatest(items.map(item => item.size$.pipe(map(size => ({
+                size,
+                directive: item
+            })))))));
+        const additionalContentSizes$ = this.additionalContent.changes.pipe(startWith(this.additionalContent), switchMap((additionalContent) => combineLatest(additionalContent.map(item => item.size$))), startWith([]));
+        this.resizeSubscription = combineLatest([
+            containerSize$,
+            this.overflowItem()?.size$ ?? of(0),
+            itemSizes$,
+            additionalContentSizes$
+        ])
+            .pipe(auditTime(0))
+            .subscribe(([containerSize, overflowItemSize, items, additionalContentSizes]) => this.updateItemVisibility(containerSize, overflowItemSize, items, additionalContentSizes));
+    }
+    updateItemVisibility(containerSize, overflowItemSize, items, additionalContent) {
+        let remainingSpace = containerSize - additionalContent.reduce((a, b) => a + b, 0);
+        const itemsRemaining = items.slice();
+        const gap = this.gap() ?? this.computedGap;
+        while (remainingSpace > 0 && itemsRemaining.length) {
+            const item = itemsRemaining.shift();
+            if (remainingSpace - item.size - gap - overflowItemSize >= 0) {
+                // There is space for the item and an overflow item.
+                item.directive.canBeVisible.set(true);
+                remainingSpace -= item.size + gap;
+            }
+            else if (!itemsRemaining.length &&
+                (remainingSpace - item.size >= 0 || overflowItemSize >= item.size)) {
+                // There are no other items remaining and there is enough space or the overflow item is biggger than the current one.
+                item.directive.canBeVisible.set(true);
+                remainingSpace = 0;
+            }
+            else {
+                // There is no space for the item.
+                remainingSpace = 0;
+                item.directive.canBeVisible.set(false);
+            }
+        }
+        itemsRemaining.forEach(item => item.directive.canBeVisible.set(false));
+        const overflowItem = this.overflowItem();
+        if (overflowItem) {
+            overflowItem.hiddenItemCount = this.items.filter(item => !item.canBeVisible()).length;
+            overflowItem.canBeVisible.set(overflowItem.hiddenItemCount !== 0);
+        }
+        this.changeDetectorRef.markForCheck();
+    }
+    reset() {
+        this.resizeSubscription?.unsubscribe();
+        this.resizeSubscription = undefined;
+        this.disableInitSubscription = this.items.changes.subscribe((items) => queueMicrotask(() => {
+            items.forEach(item => item.canBeVisible.set(true));
+        }));
+        this.items.notifyOnChanges();
+        const overflowItem = this.overflowItem();
+        if (overflowItem) {
+            queueMicrotask(() => {
+                overflowItem.canBeVisible.set(false);
+                overflowItem.hiddenItemCount = 0;
+            });
+        }
+    }
+    readGapSize() {
+        const { gap } = getComputedStyle(this.containerElement() ?? this.elementRef.nativeElement);
+        if (gap.endsWith('px') || gap === '0') {
+            this.computedGap = parseFloat(gap);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAutoCollapsableListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.6", type: SiAutoCollapsableListDirective, isStandalone: true, selector: "[siAutoCollapsableList]", inputs: { siAutoCollapsableList: { classPropertyName: "siAutoCollapsableList", publicName: "siAutoCollapsableList", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, containerElement: { classPropertyName: "containerElement", publicName: "siAutoCollapsableListContainerElement", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.overflow": "siAutoCollapsableList() ? \"hidden\" : \"\"" }, styleAttribute: "position: relative" }, queries: [{ propertyName: "overflowItem", first: true, predicate: SiAutoCollapsableListOverflowItemDirective, descendants: true, isSignal: true }, { propertyName: "items", predicate: SiAutoCollapsableListItemDirective }, { propertyName: "additionalContent", predicate: SiAutoCollapsableListAdditionalContentDirective }], exportAs: ["siAutoCollapsableList"], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAutoCollapsableListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siAutoCollapsableList]',
+                    exportAs: 'siAutoCollapsableList',
+                    host: {
+                        style: 'position: relative',
+                        '[style.overflow]': 'siAutoCollapsableList() ? "hidden" : ""'
+                    }
+                }]
+        }], propDecorators: { items: [{
+                type: ContentChildren,
+                args: [SiAutoCollapsableListItemDirective]
+            }], additionalContent: [{
+                type: ContentChildren,
+                args: [SiAutoCollapsableListAdditionalContentDirective]
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiAutoCollapsableListModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAutoCollapsableListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiAutoCollapsableListModule, imports: [SiAutoCollapsableListAdditionalContentDirective,
+            SiAutoCollapsableListDirective,
+            SiAutoCollapsableListItemDirective,
+            SiAutoCollapsableListOverflowItemDirective], exports: [SiAutoCollapsableListAdditionalContentDirective,
+            SiAutoCollapsableListDirective,
+            SiAutoCollapsableListItemDirective,
+            SiAutoCollapsableListOverflowItemDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAutoCollapsableListModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiAutoCollapsableListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        SiAutoCollapsableListAdditionalContentDirective,
+                        SiAutoCollapsableListDirective,
+                        SiAutoCollapsableListItemDirective,
+                        SiAutoCollapsableListOverflowItemDirective
+                    ],
+                    exports: [
+                        SiAutoCollapsableListAdditionalContentDirective,
+                        SiAutoCollapsableListDirective,
+                        SiAutoCollapsableListItemDirective,
+                        SiAutoCollapsableListOverflowItemDirective
+                    ]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiAutoCollapsableListAdditionalContentDirective, SiAutoCollapsableListDirective, SiAutoCollapsableListItemDirective, SiAutoCollapsableListMeasurable, SiAutoCollapsableListModule, SiAutoCollapsableListOverflowItemDirective };
+//# sourceMappingURL=siemens-element-ng-auto-collapsable-list.mjs.map

package/fesm2022/siemens-element-ng-auto-collapsable-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"siemens-element-ng-auto-collapsable-list.mjs","sources":["../../../../projects/element-ng/auto-collapsable-list/si-auto-collapsable-list-measurable.class.ts","../../../../projects/element-ng/auto-collapsable-list/si-auto-collapsable-list-item.directive.ts","../../../../projects/element-ng/auto-collapsable-list/si-auto-collapsable-list-additional-content.directive.ts","../../../../projects/element-ng/auto-collapsable-list/si-auto-collapsable-list-overflow-item.directive.ts","../../../../projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.directive.ts","../../../../projects/element-ng/auto-collapsable-list/si-auto-collapsable-list.module.ts","../../../../projects/element-ng/auto-collapsable-list/index.ts","../../../../projects/element-ng/auto-collapsable-list/siemens-element-ng-auto-collapsable-list.ts"],"sourcesContent":["/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { AfterViewInit, Directive, ElementRef, inject } from '@angular/core';\nimport { ResizeObserverService } from '@siemens/element-ng/resize-observer';\nimport { Observable } from 'rxjs';\nimport { distinctUntilChanged, map, shareReplay } from 'rxjs/operators';\n\n@Directive()\nexport class SiAutoCollapsableListMeasurable implements AfterViewInit {\n  /** Emits on element width changes. */\n  size$!: Observable<number>;\n\n  protected readonly elementRef = inject(ElementRef<HTMLElement>);\n  private readonly resizeObserverService = inject(ResizeObserverService);\n\n  ngAfterViewInit(): void {\n    this.size$ = this.resizeObserverService\n      .observe(this.elementRef.nativeElement, 0, true, true)\n      .pipe(\n        map(size => size.width),\n        distinctUntilChanged(),\n        shareReplay(1)\n      );\n  }\n}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { AfterViewInit, booleanAttribute, computed, Directive, input, signal } from '@angular/core';\n\nimport { SiAutoCollapsableListMeasurable } from './si-auto-collapsable-list-measurable.class';\n\n@Directive({\n  selector: '[siAutoCollapsableListItem]',\n  exportAs: 'siAutoCollapsableListItem',\n  host: {\n    '[style.visibility]': 'isVisible() ? \"visible\" : \"hidden\"',\n    '[style.position]': 'isVisible() ? \"\" : \"absolute\"',\n    // Ensure hidden items are behind the visible ones. Otherwise, the visible ones are not clickable\n    '[style.z-index]': 'isVisible() ? \"\" : \"-1\"'\n  }\n})\nexport class SiAutoCollapsableListItemDirective\n  extends SiAutoCollapsableListMeasurable\n  implements AfterViewInit\n{\n  /**\n   * Hide this item even if enough space is available.\n   * When calculating the overall available size, this item is still considered when forceHide=true\n   *\n   * @defaultValue false\n   */\n  readonly forceHide = input(false, { transform: booleanAttribute });\n\n  /**\n   * True if enough space is available for this item.\n   *\n   * @defaultValue false\n   */\n  readonly canBeVisible = signal<boolean>(false);\n\n  /**\n   * True if this item is actually visible to the user\n   */\n  readonly isVisible = computed(() => this.canBeVisible() && !this.forceHide());\n\n  override ngAfterViewInit(): void {\n    if (getComputedStyle(this.elementRef.nativeElement).display === 'inline') {\n      console.error('siAutoCollapsibleListItem does not work on items with display=\"inline\"');\n    }\n    super.ngAfterViewInit();\n  }\n}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { Directive } from '@angular/core';\n\nimport { SiAutoCollapsableListMeasurable } from './si-auto-collapsable-list-measurable.class';\n\n@Directive({\n  selector: '[siAutoCollapsableListAdditionalContent]'\n})\nexport class SiAutoCollapsableListAdditionalContentDirective extends SiAutoCollapsableListMeasurable {}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { Directive } from '@angular/core';\n\nimport { SiAutoCollapsableListItemDirective } from './si-auto-collapsable-list-item.directive';\n\n@Directive({\n  selector: '[siAutoCollapsableListOverflowItem]',\n  exportAs: 'siAutoCollapsableListOverflowItem'\n})\nexport class SiAutoCollapsableListOverflowItemDirective extends SiAutoCollapsableListItemDirective {\n  /**\n   * Number of hidden items.\n   *\n   * @defaultValue 0\n   */\n  hiddenItemCount = 0;\n}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport {\n  AfterViewInit,\n  booleanAttribute,\n  ChangeDetectorRef,\n  contentChild,\n  ContentChildren,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  OnChanges,\n  OnDestroy,\n  QueryList,\n  SimpleChanges\n} from '@angular/core';\nimport { ResizeObserverService } from '@siemens/element-ng/resize-observer';\nimport { BehaviorSubject, combineLatest, of, Subscription } from 'rxjs';\nimport { auditTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';\n\nimport { SiAutoCollapsableListAdditionalContentDirective } from './si-auto-collapsable-list-additional-content.directive';\nimport { SiAutoCollapsableListItemDirective } from './si-auto-collapsable-list-item.directive';\nimport { SiAutoCollapsableListOverflowItemDirective } from './si-auto-collapsable-list-overflow-item.directive';\n\n@Directive({\n  selector: '[siAutoCollapsableList]',\n  exportAs: 'siAutoCollapsableList',\n  host: {\n    style: 'position: relative',\n    '[style.overflow]': 'siAutoCollapsableList() ? \"hidden\" : \"\"'\n  }\n})\nexport class SiAutoCollapsableListDirective implements AfterViewInit, OnChanges, OnDestroy {\n  /**\n   * The items which are displayed in the siAutoCollapsableList.\n   */\n  @ContentChildren(SiAutoCollapsableListItemDirective)\n  items!: QueryList<SiAutoCollapsableListItemDirective>;\n\n  private readonly overflowItem = contentChild(SiAutoCollapsableListOverflowItemDirective);\n\n  @ContentChildren(SiAutoCollapsableListAdditionalContentDirective)\n  private additionalContent!: QueryList<SiAutoCollapsableListAdditionalContentDirective>;\n\n  /** @defaultValue true */\n  readonly siAutoCollapsableList = input(true, { transform: booleanAttribute });\n\n  /**\n   * The (flex) gap in pixels, will automatically be set if a pixel value is used in CSS.\n   */\n  readonly gap = input<number>();\n\n  /**\n   * The element which size is available for the content of the siAutoCollapsableList.\n   *\n   * @defaultValue undefined\n   */\n  readonly containerElement = input<HTMLElement | undefined | null>(undefined, {\n    alias: 'siAutoCollapsableListContainerElement'\n  });\n\n  private resizeSubscription?: Subscription;\n  private disableInitSubscription?: Subscription;\n  private readonly elementRef = inject(ElementRef);\n  private readonly resizeObserverService = inject(ResizeObserverService);\n  private readonly changeDetectorRef = inject(ChangeDetectorRef);\n  private readonly containerElementSubject = new BehaviorSubject<HTMLElement | null>(\n    this.elementRef.nativeElement\n  );\n\n  /**\n   * The same as {@link gap}, but automatically read from the computed styles.\n   * Used if not set by user.\n   */\n  private computedGap = 0;\n\n  ngAfterViewInit(): void {\n    if (this.siAutoCollapsableList()) {\n      this.readGapSize();\n      this.setupResizeListener();\n    } else {\n      this.reset();\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.siAutoCollapsableList) {\n      const siAutoCollapsableList = this.siAutoCollapsableList();\n      if (!siAutoCollapsableList && this.resizeSubscription) {\n        this.reset();\n      } else if (siAutoCollapsableList && !this.resizeSubscription && this.items) {\n        this.setupResizeListener();\n      }\n    }\n\n    if (changes.containerElement) {\n      this.containerElementSubject.next(this.containerElement() ?? this.elementRef.nativeElement);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.resizeSubscription?.unsubscribe();\n    this.disableInitSubscription?.unsubscribe();\n    this.containerElementSubject.complete();\n  }\n\n  private setupResizeListener(): void {\n    this.disableInitSubscription?.unsubscribe();\n    const containerSize$ = this.containerElementSubject.pipe(\n      switchMap(element => this.resizeObserverService.observe(element!, 0, true, true)),\n      map(size => size.width),\n      distinctUntilChanged(),\n      map(size => {\n        const { paddingInlineStart, paddingInlineEnd } = getComputedStyle(\n          this.containerElement() ?? this.elementRef.nativeElement\n        );\n        return size - parseFloat(paddingInlineStart) - parseFloat(paddingInlineEnd);\n      })\n    );\n\n    const itemSizes$ = this.items.changes.pipe(\n      startWith(this.items),\n      switchMap((items: QueryList<SiAutoCollapsableListItemDirective>) =>\n        !items.length\n          ? of([])\n          : combineLatest(\n              items.map(item =>\n                item.size$.pipe(\n                  map(size => ({\n                    size,\n                    directive: item\n                  }))\n                )\n              )\n            )\n      )\n    );\n    const additionalContentSizes$ = this.additionalContent.changes.pipe(\n      startWith(this.additionalContent),\n      switchMap((additionalContent: QueryList<SiAutoCollapsableListAdditionalContentDirective>) =>\n        combineLatest(additionalContent.map(item => item.size$))\n      ),\n      startWith([])\n    );\n\n    this.resizeSubscription = combineLatest([\n      containerSize$,\n      this.overflowItem()?.size$ ?? of(0),\n      itemSizes$,\n      additionalContentSizes$\n    ])\n      .pipe(auditTime(0))\n      .subscribe(([containerSize, overflowItemSize, items, additionalContentSizes]) =>\n        this.updateItemVisibility(containerSize, overflowItemSize, items, additionalContentSizes)\n      );\n  }\n\n  private updateItemVisibility(\n    containerSize: number,\n    overflowItemSize: number,\n    items: { size: number; directive: SiAutoCollapsableListItemDirective }[],\n    additionalContent: number[]\n  ): void {\n    let remainingSpace = containerSize - additionalContent.reduce((a, b) => a + b, 0);\n\n    const itemsRemaining = items.slice();\n\n    const gap = this.gap() ?? this.computedGap;\n\n    while (remainingSpace > 0 && itemsRemaining.length) {\n      const item = itemsRemaining.shift()!;\n      if (remainingSpace - item.size - gap - overflowItemSize >= 0) {\n        // There is space for the item and an overflow item.\n        item.directive.canBeVisible.set(true);\n        remainingSpace -= item.size + gap;\n      } else if (\n        !itemsRemaining.length &&\n        (remainingSpace - item.size >= 0 || overflowItemSize >= item.size)\n      ) {\n        // There are no other items remaining and there is enough space or the overflow item is biggger than the current one.\n        item.directive.canBeVisible.set(true);\n        remainingSpace = 0;\n      } else {\n        // There is no space for the item.\n        remainingSpace = 0;\n        item.directive.canBeVisible.set(false);\n      }\n    }\n    itemsRemaining.forEach(item => item.directive.canBeVisible.set(false));\n\n    const overflowItem = this.overflowItem();\n    if (overflowItem) {\n      overflowItem.hiddenItemCount = this.items.filter(item => !item.canBeVisible()).length;\n      overflowItem.canBeVisible.set(overflowItem.hiddenItemCount !== 0);\n    }\n    this.changeDetectorRef.markForCheck();\n  }\n\n  private reset(): void {\n    this.resizeSubscription?.unsubscribe();\n    this.resizeSubscription = undefined;\n    this.disableInitSubscription = this.items.changes.subscribe(\n      (items: QueryList<SiAutoCollapsableListItemDirective>) =>\n        queueMicrotask(() => {\n          items.forEach(item => item.canBeVisible.set(true));\n        })\n    );\n    this.items.notifyOnChanges();\n\n    const overflowItem = this.overflowItem();\n    if (overflowItem) {\n      queueMicrotask(() => {\n        overflowItem!.canBeVisible.set(false);\n        overflowItem!.hiddenItemCount = 0;\n      });\n    }\n  }\n\n  private readGapSize(): void {\n    const { gap } = getComputedStyle(this.containerElement() ?? this.elementRef.nativeElement);\n    if (gap.endsWith('px') || gap === '0') {\n      this.computedGap = parseFloat(gap);\n    }\n  }\n}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiAutoCollapsableListAdditionalContentDirective } from './si-auto-collapsable-list-additional-content.directive';\nimport { SiAutoCollapsableListItemDirective } from './si-auto-collapsable-list-item.directive';\nimport { SiAutoCollapsableListOverflowItemDirective } from './si-auto-collapsable-list-overflow-item.directive';\nimport { SiAutoCollapsableListDirective } from './si-auto-collapsable-list.directive';\n\n@NgModule({\n  imports: [\n    SiAutoCollapsableListAdditionalContentDirective,\n    SiAutoCollapsableListDirective,\n    SiAutoCollapsableListItemDirective,\n    SiAutoCollapsableListOverflowItemDirective\n  ],\n  exports: [\n    SiAutoCollapsableListAdditionalContentDirective,\n    SiAutoCollapsableListDirective,\n    SiAutoCollapsableListItemDirective,\n    SiAutoCollapsableListOverflowItemDirective\n  ]\n})\nexport class SiAutoCollapsableListModule {}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-auto-collapsable-list-item.directive';\nexport * from './si-auto-collapsable-list.directive';\nexport * from './si-auto-collapsable-list-overflow-item.directive';\nexport * from './si-auto-collapsable-list-measurable.class';\nexport * from './si-auto-collapsable-list-additional-content.directive';\nexport * from './si-auto-collapsable-list.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/siemens-element-ng-color-picker.mjs

@@ -0,0 +1,176 @@
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import * as i0 from '@angular/core';
+import { input, model, booleanAttribute, viewChild, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { isRTL } from '@siemens/element-ng/common';
+import { addIcons, elementOk, SiIconNextComponent } from '@siemens/element-ng/icon';
+import * as i1 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * The Element data color palette is used as default.
+ * Note: This array needs to be kept in sync with the design system data color tokens.
+ */
+const defaultDataColors = [
+    'element-data-1',
+    'element-data-2',
+    'element-data-3',
+    'element-data-4',
+    'element-data-5',
+    'element-data-6',
+    'element-data-7',
+    'element-data-8',
+    'element-data-9',
+    'element-data-10',
+    'element-data-11',
+    'element-data-12',
+    'element-data-13',
+    'element-data-14',
+    'element-data-15',
+    'element-data-16'
+];
+class SiColorPickerComponent {
+    // eslint-disable-next-line defaultValue/tsdoc-defaultValue-annotation
+    /**
+     * The color palette to choose the colors from. As colors, only valid CSS
+     * variable names omitting the `--` prefix or Element color tokens omitting
+     * the `$` prefix are supported.
+     *
+     * Note: If custom CSS variables are provided, they need to be defined for
+     * both light and dark mode.
+     *
+     * @defaultValue The first 16 colors of the Element data color palette.
+     */
+    colorPalette = input(defaultDataColors);
+    /**
+     * The selected color.
+     */
+    color = model();
+    /**
+     * Specifies whether the color popup should automatically close on a color selection.
+     *
+     * @defaultValue false
+     */
+    autoClose = input(false, { transform: booleanAttribute });
+    /**
+     * Specifies whether the color picker component is disabled.
+     *
+     * @defaultValue false
+     */
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    disabledInput = input(false, { alias: 'disabled' });
+    /**
+     * Aria label for the color input button.
+     */
+    ariaLabel = input();
+    onChange = () => { };
+    onTouched = () => { };
+    colorInputRef = viewChild.required('colorInputBox');
+    colorPaletteRef = viewChild('colorPaletteRef');
+    disabledNgControl = signal(false);
+    numberOfColumns = 4;
+    disabled = computed(() => this.disabledInput() || this.disabledNgControl());
+    isOverlayOpen = signal(false);
+    icons = addIcons({ elementOk });
+    blur() {
+        if (!this.autoClose()) {
+            this.onTouched();
+        }
+    }
+    arrowDown(index, event) {
+        const nextIndex = index + this.numberOfColumns;
+        this.focusLabel(nextIndex);
+        event.preventDefault();
+    }
+    arrowUp(index, event) {
+        const prevIndex = index - this.numberOfColumns;
+        this.focusLabel(prevIndex);
+        event.preventDefault();
+    }
+    arrowLeft(index, event) {
+        const prevIndex = index + (isRTL() ? 1 : -1);
+        this.focusLabel(prevIndex);
+        event.preventDefault();
+    }
+    arrowRight(index, event) {
+        const prevIndex = index + (isRTL() ? -1 : +1);
+        this.focusLabel(prevIndex);
+        event.preventDefault();
+    }
+    focusLabel(index) {
+        const labels = this.colorPaletteRef().nativeElement.querySelectorAll('input');
+        const totalSwatches = labels.length;
+        const normalizedIndex = (index + totalSwatches) % totalSwatches;
+        labels[normalizedIndex].focus();
+    }
+    openOverlay() {
+        this.isOverlayOpen.set(true);
+        this.focusSelectedColor();
+    }
+    overlayDetach() {
+        this.isOverlayOpen.set(false);
+        setTimeout(() => {
+            this.colorInputRef().nativeElement?.focus();
+        });
+    }
+    focusSelectedColor() {
+        setTimeout(() => {
+            this.colorPaletteRef()
+                ?.nativeElement.querySelector('input:checked')
+                ?.focus();
+        });
+    }
+    selectColor(color) {
+        this.color.set(color);
+        this.onChange(color);
+        if (this.autoClose()) {
+            this.overlayDetach();
+        }
+    }
+    writeValue(value) {
+        this.color.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledNgControl.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiColorPickerComponent, isStandalone: true, selector: "si-color-picker", inputs: { colorPalette: { classPropertyName: "colorPalette", publicName: "colorPalette", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: SiColorPickerComponent,
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInputBox"], descendants: true, isSignal: true }, { propertyName: "colorPaletteRef", first: true, predicate: ["colorPaletteRef"], 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) + ' ' + 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=\"d-flex flex-wrap gap-4\">\n      @for (paint of colorPalette(); track $index) {\n        <div role=\"gridcell\" class=\"swatch\">\n          <input\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-next class=\"icon text-inverse\" [icon]=\"icons.elementOk\" />\n            }\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".color-box{position:relative;block-size:24px;inline-size:24px}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;block-size:32px;inline-size:32px;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:24px}.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:16px;inline-size:16px}.colors{cursor:pointer;inline-size:136px;min-block-size:40px}\n"], dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { 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"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-color-picker', imports: [SiIconNextComponent, SiTranslateModule, CdkConnectedOverlay, CdkOverlayOrigin], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SiColorPickerComponent,
+                            multi: true
+                        }
+                    ], 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) + ' ' + 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=\"d-flex flex-wrap gap-4\">\n      @for (paint of colorPalette(); track $index) {\n        <div role=\"gridcell\" class=\"swatch\">\n          <input\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-next class=\"icon text-inverse\" [icon]=\"icons.elementOk\" />\n            }\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".color-box{position:relative;block-size:24px;inline-size:24px}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;block-size:32px;inline-size:32px;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:24px}.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:16px;inline-size:16px}.colors{cursor:pointer;inline-size:136px;min-block-size:40px}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiColorPickerComponent };
+//# sourceMappingURL=siemens-element-ng-color-picker.mjs.map

package/fesm2022/siemens-element-ng-color-picker.mjs.map

@@ -0,0 +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 Siemens 2016 - 2025.\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} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { isRTL } from '@siemens/element-ng/common';\nimport { addIcons, elementOk, SiIconNextComponent } from '@siemens/element-ng/icon';\nimport { SiTranslateModule, 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  templateUrl: './si-color-picker.component.html',\n  styleUrl: './si-color-picker.component.scss',\n  imports: [SiIconNextComponent, SiTranslateModule, CdkConnectedOverlay, CdkOverlayOrigin],\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 colorPaletteRef = viewChild<ElementRef<HTMLDivElement>>('colorPaletteRef');\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.colorPaletteRef()!.nativeElement.querySelectorAll('input');\n    const totalSwatches = labels.length;\n    const normalizedIndex = (index + totalSwatches) % totalSwatches;\n    labels[normalizedIndex].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.colorPaletteRef()\n        ?.nativeElement.querySelector<HTMLInputElement>('input:checked')\n        ?.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=\"d-flex flex-wrap gap-4\">\n      @for (paint of colorPalette(); track $index) {\n        <div role=\"gridcell\" class=\"swatch\">\n          <input\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-next class=\"icon text-inverse\" [icon]=\"icons.elementOk\" />\n            }\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n","/**\n * Copyright Siemens 2016 - 2025.\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":"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"}