import * as i0 from '@angular/core';
import { inject, ChangeDetectorRef, input, booleanAttribute, output, forwardRef, Component } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { coerceBooleanProperty } from '@angular/cdk/coercion';

const defaultColors = [
    '#35d1b3', '#08b0fe', '#8268f2', '#ae52d3', '#eb4ea3',
    '#fb811e', '#fac624', '#c2c2c2', '#4ed7ff'
];
class ColorSwitcher {
    _cdr = inject(ChangeDetectorRef);
    _disabled = false;
    _selectedColor;
    colors = input(defaultColors, ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
    selectedColor = input(...(ngDevMode ? [undefined, { debugName: "selectedColor" }] : /* istanbul ignore next */ []));
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    colorChange = output();
    _onChange = () => { };
    _onTouched = () => { };
    ngOnChanges(changes) {
        if (changes['selectedColor']) {
            this._selectedColor = changes['selectedColor'].currentValue;
        }
    }
    selectColor(color) {
        this._selectedColor = color;
        this.colorChange.emit(color);
        this._onChange(color);
        this._onTouched(color);
    }
    writeValue(_selectedColor) {
        this._selectedColor = _selectedColor;
        this._cdr.detectChanges();
    }
    registerOnChange(fn) {
        this._onChange = fn;
    }
    registerOnTouched(fn) {
        this._onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this._disabled = coerceBooleanProperty(isDisabled);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColorSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ColorSwitcher, isStandalone: true, selector: "ngs-color-switcher", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange" }, host: { properties: { "class.is-disabled": "disabled() || _disabled" }, classAttribute: "ngs-brand-colors" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => ColorSwitcher),
                multi: true
            }
        ], exportAs: ["ngsColorSwitcher"], usesOnChanges: true, ngImport: i0, template: "@for (color of colors(); track color) {\n  <button class=\"color\"\n       [style.--color]=\"color\"\n       [class.is-selected]=\"_selectedColor === color\"\n       (click)=\"selectColor(color)\">\n  </button>\n}\n\n", styles: [":host{--ngs-brand-colors-color-size: calc(var(--spacing, .25rem) * 7);--ngs-brand-colors-gap: calc(var(--spacing, .25rem) * 3);display:inline-flex;flex-wrap:wrap;gap:var(--ngs-brand-colors-gap);line-height:0}:host .color{--color: transparent;width:var(--ngs-brand-colors-color-size);height:var(--ngs-brand-colors-color-size);border-radius:calc(infinity * 1px);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;position:relative;background:var(--color);line-height:0;flex:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:#32325d26 0 2px 8px inset}:host .color:hover{scale:1.05}:host .color:active{scale:.95}:host .color.is-selected:before{content:\"\";position:absolute;border-radius:calc(infinity * 1px);background:#fff;width:calc(var(--spacing, .25rem) * 3);height:calc(var(--spacing, .25rem) * 3);top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;box-shadow:var(--ngs-shadow-sm)}:host.is-disabled{pointer-events:none;opacity:60%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ColorSwitcher, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-color-switcher', exportAs: 'ngsColorSwitcher', imports: [], providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => ColorSwitcher),
                            multi: true
                        }
                    ], host: {
                        'class': 'ngs-brand-colors',
                        '[class.is-disabled]': 'disabled() || _disabled',
                    }, template: "@for (color of colors(); track color) {\n  <button class=\"color\"\n       [style.--color]=\"color\"\n       [class.is-selected]=\"_selectedColor === color\"\n       (click)=\"selectColor(color)\">\n  </button>\n}\n\n", styles: [":host{--ngs-brand-colors-color-size: calc(var(--spacing, .25rem) * 7);--ngs-brand-colors-gap: calc(var(--spacing, .25rem) * 3);display:inline-flex;flex-wrap:wrap;gap:var(--ngs-brand-colors-gap);line-height:0}:host .color{--color: transparent;width:var(--ngs-brand-colors-color-size);height:var(--ngs-brand-colors-color-size);border-radius:calc(infinity * 1px);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;position:relative;background:var(--color);line-height:0;flex:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:#32325d26 0 2px 8px inset}:host .color:hover{scale:1.05}:host .color:active{scale:.95}:host .color.is-selected:before{content:\"\";position:absolute;border-radius:calc(infinity * 1px);background:#fff;width:calc(var(--spacing, .25rem) * 3);height:calc(var(--spacing, .25rem) * 3);top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;box-shadow:var(--ngs-shadow-sm)}:host.is-disabled{pointer-events:none;opacity:60%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], selectedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }] } });

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

export { ColorSwitcher };
//# sourceMappingURL=ngstarter-ui-components-color-switcher.mjs.map
