@wirekyt/angular 0.0.9 → 0.0.10

package/dist/fesm2022/wirekyt-angular-color-picker.mjs

@@ -0,0 +1,1103 @@
+import * as colorPicker from '@wirekyt/dom/machines/color-picker';
+import { anatomy } from '@wirekyt/dom/machines/color-picker';
+export { parse as parseColor } from '@wirekyt/dom/machines/color-picker';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, computed, input, DestroyRef, Renderer2, ElementRef, forwardRef, Directive, signal, effect, TemplateRef, ViewContainerRef, model, booleanAttribute, output, EnvironmentInjector, Injector } from '@angular/core';
+import { bindProps, injectLocale, injectEnvironment, createId, useMachine, createCvaController, buildRootCarrier } from '@wirekyt/angular';
+import { injectFieldContextOptional } from '@wirekyt/angular/field';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+const colorPickerAnatomy = anatomy;
+
+const COLOR_PICKER_AREA_PROPS = new InjectionToken("WIREKYT.COLOR_PICKER_AREA_PROPS");
+const COLOR_PICKER_CHANNEL_PROPS = new InjectionToken("WIREKYT.COLOR_PICKER_CHANNEL_PROPS");
+const COLOR_PICKER_SWATCH_PROPS = new InjectionToken("WIREKYT.COLOR_PICKER_SWATCH_PROPS");
+const COLOR_PICKER_FORMAT_PROPS = new InjectionToken("WIREKYT.COLOR_PICKER_FORMAT_PROPS");
+function injectColorPickerAreaProps() {
+    return inject(COLOR_PICKER_AREA_PROPS);
+}
+function injectColorPickerChannelProps() {
+    return inject(COLOR_PICKER_CHANNEL_PROPS);
+}
+function injectColorPickerChannelSliderProps() {
+    const channelProps = inject(COLOR_PICKER_CHANNEL_PROPS);
+    const formatProps = inject(COLOR_PICKER_FORMAT_PROPS, { optional: true });
+    return computed(() => ({
+        ...channelProps(),
+        ...formatProps?.(),
+    }));
+}
+function injectColorPickerSwatchProps() {
+    return inject(COLOR_PICKER_SWATCH_PROPS);
+}
+
+const COLOR_PICKER_CONTEXT = new InjectionToken("WIREKYT.COLOR_PICKER_CONTEXT");
+function injectColorPickerContext() {
+    return inject(COLOR_PICKER_CONTEXT);
+}
+const COLOR_PICKER_CONTEXT_CARRIER = new InjectionToken("WIREKYT.COLOR_PICKER_CONTEXT_CARRIER");
+function injectColorPickerContextCarrier() {
+    return inject(COLOR_PICKER_CONTEXT_CARRIER);
+}
+
+class ColorPickerArea {
+    xChannel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xChannel" }] : /* istanbul ignore next */ []));
+    yChannel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yChannel" }] : /* istanbul ignore next */ []));
+    areaProps = computed(() => ({
+        xChannel: this.xChannel(),
+        yChannel: this.yChannel(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "areaProps" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const context = injectColorPickerContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getAreaProps(this.areaProps()),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerArea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: ColorPickerArea, isStandalone: true, selector: "[colorPickerArea]", inputs: { xChannel: { classPropertyName: "xChannel", publicName: "xChannel", isSignal: true, isRequired: false, transformFunction: null }, yChannel: { classPropertyName: "yChannel", publicName: "yChannel", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: COLOR_PICKER_AREA_PROPS,
+                useFactory: (area) => area.areaProps,
+                deps: [forwardRef(() => ColorPickerArea)],
+            },
+        ], exportAs: ["colorPickerArea"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerArea, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerArea]",
+                    standalone: true,
+                    exportAs: "colorPickerArea",
+                    providers: [
+                        {
+                            provide: COLOR_PICKER_AREA_PROPS,
+                            useFactory: (area) => area.areaProps,
+                            deps: [forwardRef(() => ColorPickerArea)],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { xChannel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xChannel", required: false }] }], yChannel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yChannel", required: false }] }] } });
+
+class ColorPickerAreaBackground {
+    constructor() {
+        const context = injectColorPickerContext();
+        const areaProps = injectColorPickerAreaProps();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getAreaBackgroundProps(areaProps()),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerAreaBackground, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerAreaBackground, isStandalone: true, selector: "[colorPickerAreaBackground]", exportAs: ["colorPickerAreaBackground"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerAreaBackground, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerAreaBackground]",
+                    standalone: true,
+                    exportAs: "colorPickerAreaBackground",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerAreaThumb {
+    constructor() {
+        const context = injectColorPickerContext();
+        const areaProps = injectColorPickerAreaProps();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getAreaThumbProps(areaProps()),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerAreaThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerAreaThumb, isStandalone: true, selector: "[colorPickerAreaThumb]", exportAs: ["colorPickerAreaThumb"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerAreaThumb, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerAreaThumb]",
+                    standalone: true,
+                    exportAs: "colorPickerAreaThumb",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerChannelInput {
+    channel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "channel" }] : /* istanbul ignore next */ []));
+    orientation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const context = injectColorPickerContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context
+                .api()
+                .getChannelInputProps({ channel: this.channel(), orientation: this.orientation() }),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerChannelInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: ColorPickerChannelInput, isStandalone: true, selector: "input[colorPickerChannelInput]", inputs: { channel: { classPropertyName: "channel", publicName: "channel", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["colorPickerChannelInput"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerChannelInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "input[colorPickerChannelInput]",
+                    standalone: true,
+                    exportAs: "colorPickerChannelInput",
+                }]
+        }], ctorParameters: () => [], propDecorators: { channel: [{ type: i0.Input, args: [{ isSignal: true, alias: "channel", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
+
+class ColorPickerChannelSlider {
+    channel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "channel" }] : /* istanbul ignore next */ []));
+    orientation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    formatProps = inject(COLOR_PICKER_FORMAT_PROPS, { optional: true });
+    channelProps = computed(() => ({
+        channel: this.channel(),
+        orientation: this.orientation(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "channelProps" }] : /* istanbul ignore next */ []));
+    sliderProps = computed(() => ({
+        ...this.channelProps(),
+        ...this.formatProps?.(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sliderProps" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const context = injectColorPickerContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getChannelSliderProps(this.sliderProps()),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerChannelSlider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: ColorPickerChannelSlider, isStandalone: true, selector: "[colorPickerChannelSlider]", inputs: { channel: { classPropertyName: "channel", publicName: "channel", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: COLOR_PICKER_CHANNEL_PROPS,
+                useFactory: (slider) => slider.channelProps,
+                deps: [forwardRef(() => ColorPickerChannelSlider)],
+            },
+        ], exportAs: ["colorPickerChannelSlider"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerChannelSlider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerChannelSlider]",
+                    standalone: true,
+                    exportAs: "colorPickerChannelSlider",
+                    providers: [
+                        {
+                            provide: COLOR_PICKER_CHANNEL_PROPS,
+                            useFactory: (slider) => slider.channelProps,
+                            deps: [forwardRef(() => ColorPickerChannelSlider)],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { channel: [{ type: i0.Input, args: [{ isSignal: true, alias: "channel", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
+
+class ColorPickerChannelSliderLabel {
+    ownsTextContent = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownsTextContent" }] : /* istanbul ignore next */ []));
+    elementRef = inject(ElementRef);
+    constructor() {
+        const context = injectColorPickerContext();
+        const channelProps = injectColorPickerChannelProps();
+        const renderer = inject(Renderer2);
+        bindProps({
+            elementRef: this.elementRef,
+            renderer,
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getChannelSliderLabelProps(channelProps()),
+        });
+        effect(() => {
+            if (this.ownsTextContent())
+                renderer.setProperty(this.elementRef.nativeElement, "textContent", channelProps().channel);
+        });
+    }
+    ngAfterContentInit() {
+        this.ownsTextContent.set(this.elementRef.nativeElement.childNodes.length === 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerChannelSliderLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerChannelSliderLabel, isStandalone: true, selector: "[colorPickerChannelSliderLabel]", exportAs: ["colorPickerChannelSliderLabel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerChannelSliderLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerChannelSliderLabel]",
+                    standalone: true,
+                    exportAs: "colorPickerChannelSliderLabel",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerChannelSliderThumb {
+    constructor() {
+        const context = injectColorPickerContext();
+        const sliderProps = injectColorPickerChannelSliderProps();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getChannelSliderThumbProps(sliderProps()),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerChannelSliderThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerChannelSliderThumb, isStandalone: true, selector: "[colorPickerChannelSliderThumb]", exportAs: ["colorPickerChannelSliderThumb"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerChannelSliderThumb, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerChannelSliderThumb]",
+                    standalone: true,
+                    exportAs: "colorPickerChannelSliderThumb",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerChannelSliderTrack {
+    constructor() {
+        const context = injectColorPickerContext();
+        const sliderProps = injectColorPickerChannelSliderProps();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getChannelSliderTrackProps(sliderProps()),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerChannelSliderTrack, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerChannelSliderTrack, isStandalone: true, selector: "[colorPickerChannelSliderTrack]", exportAs: ["colorPickerChannelSliderTrack"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerChannelSliderTrack, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerChannelSliderTrack]",
+                    standalone: true,
+                    exportAs: "colorPickerChannelSliderTrack",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerChannelSliderValueText {
+    ownsTextContent = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownsTextContent" }] : /* istanbul ignore next */ []));
+    elementRef = inject(ElementRef);
+    constructor() {
+        const locale = injectLocale();
+        const context = injectColorPickerContext();
+        const channelProps = injectColorPickerChannelProps();
+        const renderer = inject(Renderer2);
+        bindProps({
+            elementRef: this.elementRef,
+            renderer,
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getChannelSliderValueTextProps(channelProps()),
+        });
+        effect(() => {
+            if (!this.ownsTextContent())
+                return;
+            renderer.setProperty(this.elementRef.nativeElement, "textContent", context.api().getChannelValueText(channelProps().channel, locale.locale));
+        });
+    }
+    ngAfterContentInit() {
+        this.ownsTextContent.set(this.elementRef.nativeElement.childNodes.length === 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerChannelSliderValueText, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerChannelSliderValueText, isStandalone: true, selector: "[colorPickerChannelSliderValueText]", exportAs: ["colorPickerChannelSliderValueText"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerChannelSliderValueText, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerChannelSliderValueText]",
+                    standalone: true,
+                    exportAs: "colorPickerChannelSliderValueText",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerContent {
+    constructor() {
+        const context = injectColorPickerContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getContentProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerContent, isStandalone: true, selector: "[colorPickerContent]", exportAs: ["colorPickerContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerContent]",
+                    standalone: true,
+                    exportAs: "colorPickerContent",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerContext {
+    static ngTemplateContextGuard(_directive, context) {
+        void context;
+        return true;
+    }
+    colorPicker = injectColorPickerContext();
+    templateRef = inject(TemplateRef);
+    viewContainer = inject(ViewContainerRef);
+    constructor() {
+        const view = this.viewContainer.createEmbeddedView(this.templateRef, {
+            $implicit: this.colorPicker.api,
+            api: this.colorPicker.api,
+        });
+        effect(() => {
+            this.colorPicker.api();
+            view.detectChanges();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerContext, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerContext, isStandalone: true, selector: "[colorPickerContext]", exportAs: ["colorPickerContext"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerContext, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerContext]",
+                    standalone: true,
+                    exportAs: "colorPickerContext",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerControl {
+    constructor() {
+        const context = injectColorPickerContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getControlProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerControl, isStandalone: true, selector: "[colorPickerControl]", exportAs: ["colorPickerControl"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerControl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerControl]",
+                    standalone: true,
+                    exportAs: "colorPickerControl",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerEyeDropperTrigger {
+    constructor() {
+        const context = injectColorPickerContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getEyeDropperTriggerProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerEyeDropperTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerEyeDropperTrigger, isStandalone: true, selector: "button[colorPickerEyeDropperTrigger]", exportAs: ["colorPickerEyeDropperTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerEyeDropperTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "button[colorPickerEyeDropperTrigger]",
+                    standalone: true,
+                    exportAs: "colorPickerEyeDropperTrigger",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerFormatSelect {
+    constructor() {
+        const context = injectColorPickerContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getFormatSelectProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerFormatSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerFormatSelect, isStandalone: true, selector: "select[colorPickerFormatSelect]", exportAs: ["colorPickerFormatSelect"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerFormatSelect, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "select[colorPickerFormatSelect]",
+                    standalone: true,
+                    exportAs: "colorPickerFormatSelect",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerFormatTrigger {
+    constructor() {
+        const context = injectColorPickerContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getFormatTriggerProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerFormatTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerFormatTrigger, isStandalone: true, selector: "button[colorPickerFormatTrigger]", exportAs: ["colorPickerFormatTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerFormatTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "button[colorPickerFormatTrigger]",
+                    standalone: true,
+                    exportAs: "colorPickerFormatTrigger",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerHiddenInput {
+    constructor() {
+        const context = injectColorPickerContext();
+        const field = injectFieldContextOptional();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => ({
+                "aria-describedby": field?.ariaDescribedby(),
+                ...context.api().getHiddenInputProps(),
+            }),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerHiddenInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerHiddenInput, isStandalone: true, selector: "input[colorPickerHiddenInput]", exportAs: ["colorPickerHiddenInput"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerHiddenInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "input[colorPickerHiddenInput]",
+                    standalone: true,
+                    exportAs: "colorPickerHiddenInput",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerLabel {
+    constructor() {
+        const context = injectColorPickerContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getLabelProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerLabel, isStandalone: true, selector: "[colorPickerLabel]", exportAs: ["colorPickerLabel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerLabel]",
+                    standalone: true,
+                    exportAs: "colorPickerLabel",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerPositioner {
+    constructor() {
+        const context = injectColorPickerContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getPositionerProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerPositioner, isStandalone: true, selector: "[colorPickerPositioner]", exportAs: ["colorPickerPositioner"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerPositioner, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerPositioner]",
+                    standalone: true,
+                    exportAs: "colorPickerPositioner",
+                }]
+        }], ctorParameters: () => [] });
+
+function useColorPicker(options) {
+    const locale = injectLocale();
+    const environment = injectEnvironment();
+    const field = injectFieldContextOptional();
+    const fallbackId = createId();
+    return useMachine({
+        machine: colorPicker.machine,
+        context: () => {
+            const props = options.context();
+            const merged = {
+                ...props,
+                dir: locale.dir,
+                getRootNode: environment.getRootNode,
+                id: props.id ?? fallbackId,
+            };
+            if (field) {
+                merged.ids = {
+                    label: field.ids.label,
+                    hiddenInput: field.ids.control,
+                    ...props.ids,
+                };
+                merged.disabled = Boolean(props.disabled) || field.disabled() || undefined;
+                merged.readOnly = Boolean(props.readOnly) || field.readOnly() || undefined;
+                merged.required = Boolean(props.required) || field.required() || undefined;
+                merged.invalid = Boolean(props.invalid) || field.invalid() || undefined;
+            }
+            return merged;
+        },
+        connect: (service, normalize) => colorPicker.connect(service, normalize),
+    });
+}
+
+class ColorPickerRoot {
+    id = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ids = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ids" }] : /* istanbul ignore next */ []));
+    value = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    defaultValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    format = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    defaultFormat = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultFormat" }] : /* istanbul ignore next */ []));
+    open = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    closeOnSelect = input(false, { ...(ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    openAutoFocus = input(true, { ...(ngDevMode ? { debugName: "openAutoFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    positioning = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positioning" }] : /* istanbul ignore next */ []));
+    initialFocusEl = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialFocusEl" }] : /* istanbul ignore next */ []));
+    valueChangeEnd = output();
+    focusOutside = output();
+    pointerDownOutside = output();
+    interactOutside = output();
+    formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    pendingInternalWrites = 0;
+    hasExternalBinding = false;
+    hasReceivedFormWrite = false;
+    cva = createCvaController({
+        value: this.value,
+        setDisabled: (disabled) => this.formDisabled.set(disabled),
+        componentName: "ColorPickerRoot",
+        hasExternalModelBinding: () => this.hasExternalBinding,
+    });
+    machine = useColorPicker({
+        context: () => ({
+            id: this.id(),
+            ids: this.ids(),
+            value: this.value(),
+            defaultValue: this.defaultValue(),
+            format: this.format(),
+            defaultFormat: this.defaultFormat(),
+            open: this.open(),
+            defaultOpen: this.defaultOpen(),
+            disabled: this.disabled() || this.formDisabled(),
+            readOnly: this.readOnly(),
+            required: this.required(),
+            invalid: this.invalid(),
+            inline: this.inline(),
+            closeOnSelect: this.closeOnSelect(),
+            openAutoFocus: this.openAutoFocus(),
+            name: this.name(),
+            positioning: this.positioning(),
+            initialFocusEl: this.initialFocusEl(),
+            onValueChange: (details) => this.syncValue(details),
+            onValueChangeEnd: (details) => this.valueChangeEnd.emit(details),
+            onFormatChange: (details) => {
+                if (this.format() === details.format)
+                    return;
+                this.format.set(details.format);
+            },
+            onOpenChange: (details) => {
+                if (this.open() !== details.open)
+                    this.open.set(details.open);
+                if (!details.open)
+                    this.cva.markTouched();
+            },
+            onFocusOutside: (event) => this.focusOutside.emit(event),
+            onPointerDownOutside: (event) => this.pointerDownOutside.emit(event),
+            onInteractOutside: (event) => this.interactOutside.emit(event),
+        }),
+    });
+    state = this.machine.state;
+    api = this.machine.api;
+    service = this.machine.service;
+    send = this.machine.send;
+    contextCarrier = buildRootCarrier({
+        root: this,
+        rootToken: COLOR_PICKER_CONTEXT,
+        originInjector: inject(Injector),
+        environmentInjector: inject(EnvironmentInjector),
+    });
+    constructor() {
+        let firstRun = true;
+        effect(() => {
+            void this.value();
+            if (firstRun) {
+                firstRun = false;
+                this.pendingInternalWrites = 0;
+                return;
+            }
+            if (this.pendingInternalWrites > 0) {
+                this.pendingInternalWrites--;
+                return;
+            }
+            this.hasExternalBinding = true;
+        });
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => this.api().getRootProps(),
+        });
+    }
+    writeValue(value) {
+        const next = value === null ? undefined : value;
+        const current = this.value();
+        if (!this.hasReceivedFormWrite && current !== undefined) {
+            this.hasExternalBinding = true;
+        }
+        this.hasReceivedFormWrite = true;
+        if (!colorsEqual(current, next)) {
+            this.pendingInternalWrites++;
+        }
+        this.cva.writeValue(value);
+    }
+    registerOnChange(fn) {
+        this.cva.registerOnChange(fn);
+    }
+    registerOnTouched(fn) {
+        this.cva.registerOnTouched(fn);
+    }
+    setDisabledState(disabled) {
+        this.cva.setDisabledState(disabled);
+    }
+    getContextCarrier() {
+        return this.contextCarrier;
+    }
+    syncValue(details) {
+        if (colorsEqual(this.value(), details.value))
+            return;
+        this.pendingInternalWrites++;
+        this.value.set(details.value);
+        this.cva.notifyValueChange(details.value);
+        this.cva.markTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: ColorPickerRoot, isStandalone: true, selector: "[colorPickerRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ids: { classPropertyName: "ids", publicName: "ids", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, defaultFormat: { classPropertyName: "defaultFormat", publicName: "defaultFormat", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, openAutoFocus: { classPropertyName: "openAutoFocus", publicName: "openAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, positioning: { classPropertyName: "positioning", publicName: "positioning", isSignal: true, isRequired: false, transformFunction: null }, initialFocusEl: { classPropertyName: "initialFocusEl", publicName: "initialFocusEl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", format: "formatChange", open: "openChange", valueChangeEnd: "valueChangeEnd", focusOutside: "focusOutside", pointerDownOutside: "pointerDownOutside", interactOutside: "interactOutside" }, providers: [
+            { provide: COLOR_PICKER_CONTEXT, useExisting: forwardRef(() => ColorPickerRoot) },
+            {
+                provide: COLOR_PICKER_CONTEXT_CARRIER,
+                useFactory: (root) => root.getContextCarrier(),
+                deps: [forwardRef(() => ColorPickerRoot)],
+            },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ColorPickerRoot),
+                multi: true,
+            },
+        ], exportAs: ["colorPickerRoot"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerRoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerRoot]",
+                    standalone: true,
+                    exportAs: "colorPickerRoot",
+                    providers: [
+                        { provide: COLOR_PICKER_CONTEXT, useExisting: forwardRef(() => ColorPickerRoot) },
+                        {
+                            provide: COLOR_PICKER_CONTEXT_CARRIER,
+                            useFactory: (root) => root.getContextCarrier(),
+                            deps: [forwardRef(() => ColorPickerRoot)],
+                        },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorPickerRoot),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ids: [{ type: i0.Input, args: [{ isSignal: true, alias: "ids", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }, { type: i0.Output, args: ["formatChange"] }], defaultFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFormat", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], openAutoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openAutoFocus", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], positioning: [{ type: i0.Input, args: [{ isSignal: true, alias: "positioning", required: false }] }], initialFocusEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocusEl", required: false }] }], valueChangeEnd: [{ type: i0.Output, args: ["valueChangeEnd"] }], focusOutside: [{ type: i0.Output, args: ["focusOutside"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], interactOutside: [{ type: i0.Output, args: ["interactOutside"] }] } });
+function colorsEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.toString("css") === b.toString("css");
+}
+
+class ColorPickerRootProvider {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    state = computed(() => this.value().state(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    api = computed(() => this.value().api(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "api" }] : /* istanbul ignore next */ []));
+    send = (event) => this.value().send(event);
+    get service() {
+        return this.value().service;
+    }
+    contextCarrier = buildRootCarrier({
+        root: this,
+        rootToken: COLOR_PICKER_CONTEXT,
+        originInjector: inject(Injector),
+        environmentInjector: inject(EnvironmentInjector),
+    });
+    constructor() {
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => this.api().getRootProps(),
+        });
+    }
+    getContextCarrier() {
+        return this.contextCarrier;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerRootProvider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: ColorPickerRootProvider, isStandalone: true, selector: "[colorPickerRootProvider]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            { provide: COLOR_PICKER_CONTEXT, useExisting: forwardRef(() => ColorPickerRootProvider) },
+            {
+                provide: COLOR_PICKER_CONTEXT_CARRIER,
+                useFactory: (provider) => provider.getContextCarrier(),
+                deps: [forwardRef(() => ColorPickerRootProvider)],
+            },
+        ], exportAs: ["colorPickerRootProvider"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerRootProvider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerRootProvider]",
+                    standalone: true,
+                    exportAs: "colorPickerRootProvider",
+                    providers: [
+                        { provide: COLOR_PICKER_CONTEXT, useExisting: forwardRef(() => ColorPickerRootProvider) },
+                        {
+                            provide: COLOR_PICKER_CONTEXT_CARRIER,
+                            useFactory: (provider) => provider.getContextCarrier(),
+                            deps: [forwardRef(() => ColorPickerRootProvider)],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+class ColorPickerSwatch {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    respectAlpha = input(true, { ...(ngDevMode ? { debugName: "respectAlpha" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    swatchProps = computed(() => ({
+        value: this.value(),
+        respectAlpha: this.respectAlpha(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "swatchProps" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const context = injectColorPickerContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getSwatchProps(this.swatchProps()),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerSwatch, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: ColorPickerSwatch, isStandalone: true, selector: "[colorPickerSwatch]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, respectAlpha: { classPropertyName: "respectAlpha", publicName: "respectAlpha", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: COLOR_PICKER_SWATCH_PROPS,
+                useFactory: (swatch) => swatch.swatchProps,
+                deps: [forwardRef(() => ColorPickerSwatch)],
+            },
+        ], exportAs: ["colorPickerSwatch"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerSwatch, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerSwatch]",
+                    standalone: true,
+                    exportAs: "colorPickerSwatch",
+                    providers: [
+                        {
+                            provide: COLOR_PICKER_SWATCH_PROPS,
+                            useFactory: (swatch) => swatch.swatchProps,
+                            deps: [forwardRef(() => ColorPickerSwatch)],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], respectAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "respectAlpha", required: false }] }] } });
+
+class ColorPickerSwatchGroup {
+    constructor() {
+        const context = injectColorPickerContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getSwatchGroupProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerSwatchGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerSwatchGroup, isStandalone: true, selector: "[colorPickerSwatchGroup]", exportAs: ["colorPickerSwatchGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerSwatchGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerSwatchGroup]",
+                    standalone: true,
+                    exportAs: "colorPickerSwatchGroup",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerSwatchIndicator {
+    constructor() {
+        const context = injectColorPickerContext();
+        const swatchProps = injectColorPickerSwatchProps();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getSwatchIndicatorProps(swatchProps()),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerSwatchIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerSwatchIndicator, isStandalone: true, selector: "[colorPickerSwatchIndicator]", exportAs: ["colorPickerSwatchIndicator"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerSwatchIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerSwatchIndicator]",
+                    standalone: true,
+                    exportAs: "colorPickerSwatchIndicator",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerSwatchTrigger {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        const context = injectColorPickerContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getSwatchTriggerProps({ value: this.value(), disabled: this.disabled() }),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerSwatchTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: ColorPickerSwatchTrigger, isStandalone: true, selector: "button[colorPickerSwatchTrigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["colorPickerSwatchTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerSwatchTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "button[colorPickerSwatchTrigger]",
+                    standalone: true,
+                    exportAs: "colorPickerSwatchTrigger",
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class ColorPickerTransparencyGrid {
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const context = injectColorPickerContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getTransparencyGridProps({ size: this.size() }),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerTransparencyGrid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: ColorPickerTransparencyGrid, isStandalone: true, selector: "[colorPickerTransparencyGrid]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["colorPickerTransparencyGrid"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerTransparencyGrid, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerTransparencyGrid]",
+                    standalone: true,
+                    exportAs: "colorPickerTransparencyGrid",
+                }]
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+class ColorPickerTrigger {
+    constructor() {
+        const context = injectColorPickerContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getTriggerProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: ColorPickerTrigger, isStandalone: true, selector: "button[colorPickerTrigger]", exportAs: ["colorPickerTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "button[colorPickerTrigger]",
+                    standalone: true,
+                    exportAs: "colorPickerTrigger",
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorPickerValueSwatch {
+    respectAlpha = input(true, { ...(ngDevMode ? { debugName: "respectAlpha" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    context = injectColorPickerContext();
+    swatchProps = computed(() => ({
+        value: this.context.api().valueAsString,
+        respectAlpha: this.respectAlpha(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "swatchProps" }] : /* istanbul ignore next */ []));
+    constructor() {
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => this.context.api().getSwatchProps(this.swatchProps()),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerValueSwatch, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: ColorPickerValueSwatch, isStandalone: true, selector: "[colorPickerValueSwatch]", inputs: { respectAlpha: { classPropertyName: "respectAlpha", publicName: "respectAlpha", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: COLOR_PICKER_SWATCH_PROPS,
+                useFactory: (swatch) => swatch.swatchProps,
+                deps: [forwardRef(() => ColorPickerValueSwatch)],
+            },
+        ], exportAs: ["colorPickerValueSwatch"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerValueSwatch, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerValueSwatch]",
+                    standalone: true,
+                    exportAs: "colorPickerValueSwatch",
+                    providers: [
+                        {
+                            provide: COLOR_PICKER_SWATCH_PROPS,
+                            useFactory: (swatch) => swatch.swatchProps,
+                            deps: [forwardRef(() => ColorPickerValueSwatch)],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { respectAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "respectAlpha", required: false }] }] } });
+
+class ColorPickerValueText {
+    format = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    ownsTextContent = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownsTextContent" }] : /* istanbul ignore next */ []));
+    elementRef = inject(ElementRef);
+    constructor() {
+        const context = injectColorPickerContext();
+        const renderer = inject(Renderer2);
+        bindProps({
+            elementRef: this.elementRef,
+            renderer,
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getValueTextProps(),
+        });
+        effect(() => {
+            if (!this.ownsTextContent())
+                return;
+            const api = context.api();
+            const value = this.format() ? api.value.toString(this.format()) : api.valueAsString;
+            renderer.setProperty(this.elementRef.nativeElement, "textContent", value);
+        });
+    }
+    ngAfterContentInit() {
+        this.ownsTextContent.set(this.elementRef.nativeElement.childNodes.length === 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerValueText, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: ColorPickerValueText, isStandalone: true, selector: "[colorPickerValueText]", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["colorPickerValueText"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerValueText, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerValueText]",
+                    standalone: true,
+                    exportAs: "colorPickerValueText",
+                }]
+        }], ctorParameters: () => [], propDecorators: { format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }] } });
+
+class ColorPickerView {
+    format = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    formatProps = computed(() => ({
+        format: this.format(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatProps" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const context = injectColorPickerContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => ({
+                "data-scope": "color-picker",
+                "data-part": "view",
+                "data-format": this.format(),
+                hidden: context.api().format !== this.format(),
+            }),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerView, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: ColorPickerView, isStandalone: true, selector: "[colorPickerView]", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            {
+                provide: COLOR_PICKER_FORMAT_PROPS,
+                useFactory: (view) => view.formatProps,
+                deps: [forwardRef(() => ColorPickerView)],
+            },
+        ], exportAs: ["colorPickerView"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ColorPickerView, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[colorPickerView]",
+                    standalone: true,
+                    exportAs: "colorPickerView",
+                    providers: [
+                        {
+                            provide: COLOR_PICKER_FORMAT_PROPS,
+                            useFactory: (view) => view.formatProps,
+                            deps: [forwardRef(() => ColorPickerView)],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COLOR_PICKER_CONTEXT, COLOR_PICKER_CONTEXT_CARRIER, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderLabel, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerChannelSliderValueText, ColorPickerContent, ColorPickerContext, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerHiddenInput, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerRootProvider, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueSwatch, ColorPickerValueText, ColorPickerView, colorPickerAnatomy, injectColorPickerContext, injectColorPickerContextCarrier, useColorPicker };
+//# sourceMappingURL=wirekyt-angular-color-picker.mjs.map