import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
import * as i0 from '@angular/core';
import { input, model, booleanAttribute, viewChild, viewChildren, computed, signal, ChangeDetectionStrategy, Component } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { elementOk } from '@siemens/element-icons';
import { isRTL } from '@siemens/element-ng/common';
import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';

/**
 * Copyright (c) Siemens 2016 - 2026
 * 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, ...(ngDevMode ? [{ debugName: "colorPalette" }] : []));
    /**
     * The selected color.
     */
    color = model(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
    /**
     * Specifies whether the color popup should automatically close on a color selection.
     *
     * @defaultValue false
     */
    autoClose = input(false, { ...(ngDevMode ? { debugName: "autoClose" } : {}), transform: booleanAttribute });
    /**
     * Specifies whether the color picker component is disabled.
     *
     * @defaultValue false
     */
    // eslint-disable-next-line @angular-eslint/no-input-rename
    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled' });
    /**
     * Aria label for the color input button.
     */
    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
    onChange = () => { };
    onTouched = () => { };
    colorInputRef = viewChild.required('colorInputBox');
    swatchInputs = viewChildren('swatchInput', ...(ngDevMode ? [{ debugName: "swatchInputs" }] : []));
    selectedSwatchInput = computed(() => this.swatchInputs().find(swatchInput => swatchInput.nativeElement.checked), ...(ngDevMode ? [{ debugName: "selectedSwatchInput" }] : []));
    disabledNgControl = signal(false, ...(ngDevMode ? [{ debugName: "disabledNgControl" }] : []));
    numberOfColumns = 4;
    disabled = computed(() => this.disabledInput() || this.disabledNgControl(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
    isOverlayOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOverlayOpen" }] : []));
    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.swatchInputs();
        const totalSwatches = labels.length;
        const normalizedIndex = (index + totalSwatches) % totalSwatches;
        labels[normalizedIndex].nativeElement.focus();
    }
    openOverlay() {
        this.isOverlayOpen.set(true);
        this.focusSelectedColor();
    }
    overlayDetach() {
        this.isOverlayOpen.set(false);
        setTimeout(() => {
            this.colorInputRef().nativeElement?.focus();
        });
    }
    focusSelectedColor() {
        setTimeout(() => {
            this.selectedSwatchInput()?.nativeElement.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: "21.0.8", ngImport: i0, type: SiColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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: "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) + ' ' + 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            #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: [".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: 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 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiColorPickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-color-picker', imports: [SiIconComponent, SiTranslatePipe, 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            #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: [".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"] }]
        }], 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 }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */

/**
 * Generated bundle index. Do not edit.
 */

export { SiColorPickerComponent };
//# sourceMappingURL=siemens-element-ng-color-picker.mjs.map
