primeng 22.1.0 → 22.1.2

package/fesm2022/primeng-colorpicker.mjs

@@ -1,608 +1,637 @@
-export * from 'primeng/types/colorpicker';
-import * as i0 from '@angular/core';
-import { Injectable, forwardRef, InjectionToken, inject, input, booleanAttribute, output, viewChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { OverlayService, TranslationKeys, SharedModule } from 'primeng/api';
-import { AutoFocus } from 'primeng/autofocus';
-import { PARENT_INSTANCE } from 'primeng/basecomponent';
-import { BaseEditableHolder } from 'primeng/baseeditableholder';
-import * as i1 from 'primeng/bind';
-import { Bind } from 'primeng/bind';
-import { Overlay } from 'primeng/overlay';
-import { ZIndexUtils } from 'primeng/utils';
-import { style } from '@primeuix/styles/colorpicker';
-import { BaseStyle } from 'primeng/base';
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, NgModule, ViewEncapsulation, booleanAttribute, computed, forwardRef, inject, input, output, viewChild } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { OverlayService, SharedModule, TranslationKeys } from "primeng/api";
+import { AutoFocus } from "primeng/autofocus";
+import { PARENT_INSTANCE } from "primeng/basecomponent";
+import { BaseEditableHolder } from "primeng/baseeditableholder";
+import * as i1 from "primeng/bind";
+import { Bind } from "primeng/bind";
+import { Overlay } from "primeng/overlay";
+import { ZIndexUtils } from "primeng/utils";
+import { style } from "@primeuix/styles/colorpicker";
+import { BaseStyle } from "primeng/base";
+export * from "primeng/types/colorpicker";
 const classes = {
-    root: ({ instance }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !instance.inline(), 'p-colorpicker-dragging': instance.colorDragging || instance.hueDragging }],
-    preview: ({ instance }) => ['p-colorpicker-preview', { 'p-disabled': instance.$disabled() }],
-    panel: ({ instance }) => [
-        'p-colorpicker-panel',
-        {
-            'p-colorpicker-panel-inline': instance.inline(),
-            'p-disabled': instance.$disabled()
-        }
-    ],
-    content: 'p-colorpicker-content',
-    colorSelector: 'p-colorpicker-color-selector',
-    colorBackground: 'p-colorpicker-color-background',
-    colorHandle: 'p-colorpicker-color-handle',
-    hue: 'p-colorpicker-hue',
-    hueHandle: 'p-colorpicker-hue-handle'
+	root: ({ instance }) => ["p-colorpicker p-component", {
+		"p-colorpicker-overlay": !instance.inline(),
+		"p-colorpicker-dragging": instance.colorDragging || instance.hueDragging
+	}],
+	preview: ({ instance }) => ["p-colorpicker-preview", { "p-disabled": instance.$disabled() }],
+	panel: ({ instance }) => ["p-colorpicker-panel", {
+		"p-colorpicker-panel-inline": instance.inline(),
+		"p-disabled": instance.$disabled()
+	}],
+	content: "p-colorpicker-content",
+	colorSelector: "p-colorpicker-color-selector",
+	colorBackground: "p-colorpicker-color-background",
+	colorHandle: "p-colorpicker-color-handle",
+	hue: "p-colorpicker-hue",
+	hueHandle: "p-colorpicker-hue-handle"
+};
+var ColorPickerStyle = class ColorPickerStyle extends BaseStyle {
+	name = "colorpicker";
+	style = style;
+	classes = classes;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ColorPickerStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ColorPickerStyle
+	});
 };
-class ColorPickerStyle extends BaseStyle {
-    name = 'colorpicker';
-    style = style;
-    classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ColorPickerStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ColorPickerStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ColorPickerStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * ColorPicker groups a collection of contents in tabs.
- *
- * [Live Demo](https://www.primeng.org/colorpicker/)
- *
- * @module colorpickerstyle
- *
- */
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ColorPickerStyle,
+	decorators: [{ type: Injectable }]
+});
 var ColorPickerClasses;
-(function (ColorPickerClasses) {
-    /**
-     * Class name of the root element
-     */
-    ColorPickerClasses["root"] = "p-colorpicker";
-    /**
-     * Class name of the preview element
-     */
-    ColorPickerClasses["preview"] = "p-colorpicker-preview";
-    /**
-     * Class name of the panel element
-     */
-    ColorPickerClasses["panel"] = "p-colorpicker-panel";
-    /**
-     * Class name of the color selector element
-     */
-    ColorPickerClasses["colorSelector"] = "p-colorpicker-color-selector";
-    /**
-     * Class name of the color background element
-     */
-    ColorPickerClasses["colorBackground"] = "p-colorpicker-color-background";
-    /**
-     * Class name of the color handle element
-     */
-    ColorPickerClasses["colorHandle"] = "p-colorpicker-color-handle";
-    /**
-     * Class name of the hue element
-     */
-    ColorPickerClasses["hue"] = "p-colorpicker-hue";
-    /**
-     * Class name of the hue handle element
-     */
-    ColorPickerClasses["hueHandle"] = "p-colorpicker-hue-handle";
+(function(ColorPickerClasses) {
+	ColorPickerClasses["root"] = "p-colorpicker";
+	ColorPickerClasses["preview"] = "p-colorpicker-preview";
+	ColorPickerClasses["panel"] = "p-colorpicker-panel";
+	ColorPickerClasses["colorSelector"] = "p-colorpicker-color-selector";
+	ColorPickerClasses["colorBackground"] = "p-colorpicker-color-background";
+	ColorPickerClasses["colorHandle"] = "p-colorpicker-color-handle";
+	ColorPickerClasses["hue"] = "p-colorpicker-hue";
+	ColorPickerClasses["hueHandle"] = "p-colorpicker-hue-handle";
 })(ColorPickerClasses || (ColorPickerClasses = {}));
-
 const COLORPICKER_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => ColorPicker),
-    multi: true
+	provide: NG_VALUE_ACCESSOR,
+	useExisting: forwardRef(() => ColorPicker),
+	multi: true
 };
-const COLORPICKER_INSTANCE = new InjectionToken('COLORPICKER_INSTANCE');
-/**
- * ColorPicker groups a collection of contents in tabs.
- * @group Components
- * @deprecated Use InputColor component instead.
- */
-class ColorPicker extends BaseEditableHolder {
-    componentName = 'ColorPicker';
-    constructor() {
-        super();
-    }
-    $pcColorPicker = inject(COLORPICKER_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    overlayService = inject(OverlayService);
-    /**
-     * Whether to display as an overlay or not.
-     * @group Props
-     */
-    inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Format to use in value binding.
-     * @group Props
-     */
-    format = input('hex', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
-    /**
-     * Index of the element in tabbing order.
-     * @group Props
-     */
-    tabindex = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "tabindex" }] : /* istanbul ignore next */ []));
-    /**
-     * Identifier of the focus input to match a label defined for the dropdown.
-     * @group Props
-     */
-    inputId = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether to automatically manage layering.
-     * @group Props
-     */
-    autoZIndex = input(true, { ...(ngDevMode ? { debugName: "autoZIndex" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * When present, it specifies that the component should automatically get focus on load.
-     * @group Props
-     */
-    autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Default color to display initially when model value is not present.
-     * @group Props
-     */
-    defaultColor = input('ff0000', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "defaultColor" }] : /* istanbul ignore next */ []));
-    /**
-     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
-     * @defaultValue 'self'
-     * @group Props
-     */
-    appendTo = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether to use overlay API feature. The properties of overlay API can be used like an object in it.
-     * @group Props
-     */
-    overlayOptions = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "overlayOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * The motion options.
-     * @group Props
-     */
-    motionOptions = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * Callback to invoke on value change.
-     * @param {ColorPickerChangeEvent} event - Custom value change event.
-     * @group Emits
-     */
-    onChange = output();
-    /**
-     * Callback to invoke on panel is shown.
-     * @group Emits
-     */
-    onShow = output();
-    /**
-     * Callback to invoke on panel is hidden.
-     * @group Emits
-     */
-    onHide = output();
-    inputViewChild = viewChild('input', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inputViewChild" }] : /* istanbul ignore next */ []));
-    overlayViewChild = viewChild('overlay', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "overlayViewChild" }] : /* istanbul ignore next */ []));
-    colorSelectorViewChild = viewChild('colorSelector', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "colorSelectorViewChild" }] : /* istanbul ignore next */ []));
-    colorHandleViewChild = viewChild('colorHandle', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "colorHandleViewChild" }] : /* istanbul ignore next */ []));
-    hueViewChild = viewChild('hue', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hueViewChild" }] : /* istanbul ignore next */ []));
-    hueHandleViewChild = viewChild('hueHandle', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hueHandleViewChild" }] : /* istanbul ignore next */ []));
-    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
-    disabledAttr = computed(() => (this.$disabled() ? '' : undefined), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabledAttr" }] : /* istanbul ignore next */ []));
-    ariaLabel = computed(() => this.translate(TranslationKeys.ARIA, TranslationKeys.SELECT_COLOR), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    value = { h: 0, s: 100, b: 100 };
-    inputBgColor;
-    shown;
-    overlayVisible = false;
-    documentMousemoveListener;
-    documentMouseupListener;
-    documentHueMoveListener;
-    scrollHandler;
-    colorDragging;
-    hueDragging;
-    overlay;
-    _componentStyle = inject(ColorPickerStyle);
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    onHueMousedown(event) {
-        if (this.$disabled()) {
-            return;
-        }
-        this.bindDocumentMousemoveListener();
-        this.bindDocumentMouseupListener();
-        this.hueDragging = true;
-        this.pickHue(event);
-    }
-    onHueDragStart(event) {
-        if (this.$disabled()) {
-            return;
-        }
-        this.hueDragging = true;
-        this.pickHue(event, event.changedTouches[0]);
-    }
-    onColorDragStart(event) {
-        if (this.$disabled()) {
-            return;
-        }
-        this.colorDragging = true;
-        this.pickColor(event, event.changedTouches[0]);
-        this.el.nativeElement.setAttribute('p-colorpicker-dragging', 'true');
-    }
-    pickHue(event, position) {
-        let pageY = position ? position.pageY : event.pageY;
-        let top = this.hueViewChild()?.nativeElement.getBoundingClientRect().top + (this.document.defaultView.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0);
-        this.value = this.validateHSB({
-            h: Math.floor((360 * (150 - Math.max(0, Math.min(150, pageY - top)))) / 150),
-            s: this.value.s,
-            b: this.value.b
-        });
-        this.updateColorSelector();
-        this.updateUI();
-        this.updateModel();
-        this.onChange.emit({ originalEvent: event, value: this.getValueToUpdate() });
-    }
-    onColorMousedown(event) {
-        if (this.$disabled()) {
-            return;
-        }
-        this.bindDocumentMousemoveListener();
-        this.bindDocumentMouseupListener();
-        this.colorDragging = true;
-        this.pickColor(event);
-    }
-    onDrag(event) {
-        if (this.colorDragging) {
-            this.pickColor(event, event.changedTouches[0]);
-            event.preventDefault();
-        }
-        if (this.hueDragging) {
-            this.pickHue(event, event.changedTouches[0]);
-            event.preventDefault();
-        }
-    }
-    onDragEnd() {
-        this.colorDragging = false;
-        this.hueDragging = false;
-        this.el.nativeElement.setAttribute('p-colorpicker-dragging', 'false');
-        this.unbindDocumentMousemoveListener();
-        this.unbindDocumentMouseupListener();
-    }
-    pickColor(event, position) {
-        let pageX = position ? position.pageX : event.pageX;
-        let pageY = position ? position.pageY : event.pageY;
-        let rect = this.colorSelectorViewChild()?.nativeElement.getBoundingClientRect();
-        let top = rect.top + (this.document.defaultView.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0);
-        let left = rect.left + this.document.body.scrollLeft;
-        let saturation = Math.floor((100 * Math.max(0, Math.min(150, pageX - left))) / 150);
-        let brightness = Math.floor((100 * (150 - Math.max(0, Math.min(150, pageY - top)))) / 150);
-        this.value = this.validateHSB({
-            h: this.value.h,
-            s: saturation,
-            b: brightness
-        });
-        this.updateUI();
-        this.updateModel();
-        this.onChange.emit({ originalEvent: event, value: this.getValueToUpdate() });
-    }
-    getValueToUpdate() {
-        let val;
-        switch (this.format()) {
-            case 'hex':
-                val = '#' + this.HSBtoHEX(this.value);
-                break;
-            case 'rgb':
-                val = this.HSBtoRGB(this.value);
-                break;
-            case 'hsb':
-                val = this.value;
-                break;
-        }
-        return val;
-    }
-    updateModel() {
-        this.onModelChange(this.getValueToUpdate());
-    }
-    updateColorSelector() {
-        const colorSelector = this.colorSelectorViewChild();
-        if (colorSelector) {
-            const hsb = {};
-            hsb.s = 100;
-            hsb.b = 100;
-            hsb.h = this.value.h;
-            colorSelector.nativeElement.style.backgroundColor = '#' + this.HSBtoHEX(hsb);
-        }
-    }
-    updateUI() {
-        const colorHandle = this.colorHandleViewChild();
-        const hueHandle = this.hueHandleViewChild();
-        if (colorHandle && hueHandle?.nativeElement) {
-            colorHandle.nativeElement.style.left = Math.floor((150 * this.value.s) / 100) + 'px';
-            colorHandle.nativeElement.style.top = Math.floor((150 * (100 - this.value.b)) / 100) + 'px';
-            hueHandle.nativeElement.style.top = Math.floor(150 - (150 * this.value.h) / 360) + 'px';
-        }
-        this.inputBgColor = '#' + this.HSBtoHEX(this.value);
-    }
-    onInputFocus() {
-        this.onModelTouched();
-    }
-    show() {
-        this.overlayVisible = true;
-    }
-    onOverlayBeforeEnter() {
-        if (!this.inline()) {
-            this.updateColorSelector();
-            this.updateUI();
-            this.onShow.emit({});
-        }
-    }
-    onOverlayAfterLeave() {
-        if (!this.inline()) {
-            this.onHide.emit({});
-        }
-    }
-    hide() {
-        this.overlayVisible = false;
-    }
-    onInputClick() {
-        this.togglePanel();
-    }
-    togglePanel() {
-        if (!this.overlayVisible)
-            this.show();
-        else
-            this.hide();
-    }
-    onInputKeydown(event) {
-        switch (event.code) {
-            case 'Space':
-                this.togglePanel();
-                event.preventDefault();
-                break;
-            case 'Escape':
-            case 'Tab':
-                this.hide();
-                break;
-            default:
-                //NoOp
-                break;
-        }
-    }
-    onOverlayClick(event) {
-        this.overlayService.add({
-            originalEvent: event,
-            target: this.el.nativeElement
-        });
-    }
-    bindDocumentMousemoveListener() {
-        if (!this.documentMousemoveListener) {
-            const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
-            this.documentMousemoveListener = this.renderer.listen(documentTarget, 'mousemove', (event) => {
-                if (this.colorDragging) {
-                    this.pickColor(event);
-                }
-                if (this.hueDragging) {
-                    this.pickHue(event);
-                }
-            });
-        }
-    }
-    unbindDocumentMousemoveListener() {
-        if (this.documentMousemoveListener) {
-            this.documentMousemoveListener();
-            this.documentMousemoveListener = null;
-        }
-    }
-    bindDocumentMouseupListener() {
-        if (!this.documentMouseupListener) {
-            const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
-            this.documentMouseupListener = this.renderer.listen(documentTarget, 'mouseup', () => {
-                this.colorDragging = false;
-                this.hueDragging = false;
-                this.unbindDocumentMousemoveListener();
-                this.unbindDocumentMouseupListener();
-            });
-        }
-    }
-    unbindDocumentMouseupListener() {
-        if (this.documentMouseupListener) {
-            this.documentMouseupListener();
-            this.documentMouseupListener = null;
-        }
-    }
-    validateHSB(hsb) {
-        return {
-            h: Math.min(360, Math.max(0, hsb.h)),
-            s: Math.min(100, Math.max(0, hsb.s)),
-            b: Math.min(100, Math.max(0, hsb.b))
-        };
-    }
-    validateRGB(rgb) {
-        return {
-            r: Math.min(255, Math.max(0, rgb.r)),
-            g: Math.min(255, Math.max(0, rgb.g)),
-            b: Math.min(255, Math.max(0, rgb.b))
-        };
-    }
-    validateHEX(hex) {
-        var len = 6 - hex.length;
-        if (len > 0) {
-            var o = [];
-            for (var i = 0; i < len; i++) {
-                o.push('0');
-            }
-            o.push(hex);
-            hex = o.join('');
-        }
-        return hex;
-    }
-    HEXtoRGB(hex) {
-        if (!hex || typeof hex !== 'string') {
-            return { r: 0, g: 0, b: 0 };
-        }
-        let hexValue = parseInt(hex.indexOf('#') > -1 ? hex.substring(1) : hex, 16);
-        return { r: hexValue >> 16, g: (hexValue & 0x00ff00) >> 8, b: hexValue & 0x0000ff };
-    }
-    HEXtoHSB(hex) {
-        return this.RGBtoHSB(this.HEXtoRGB(hex));
-    }
-    RGBtoHSB(rgb) {
-        var hsb = {
-            h: 0,
-            s: 0,
-            b: 0
-        };
-        var min = Math.min(rgb.r, rgb.g, rgb.b);
-        var max = Math.max(rgb.r, rgb.g, rgb.b);
-        var delta = max - min;
-        hsb.b = max;
-        hsb.s = max != 0 ? (255 * delta) / max : 0;
-        if (hsb.s != 0) {
-            if (rgb.r == max) {
-                hsb.h = (rgb.g - rgb.b) / delta;
-            }
-            else if (rgb.g == max) {
-                hsb.h = 2 + (rgb.b - rgb.r) / delta;
-            }
-            else {
-                hsb.h = 4 + (rgb.r - rgb.g) / delta;
-            }
-        }
-        else {
-            hsb.h = -1;
-        }
-        hsb.h *= 60;
-        if (hsb.h < 0) {
-            hsb.h += 360;
-        }
-        hsb.s *= 100 / 255;
-        hsb.b *= 100 / 255;
-        return hsb;
-    }
-    HSBtoRGB(hsb) {
-        var rgb = {
-            r: 0,
-            g: 0,
-            b: 0
-        };
-        let h = hsb.h;
-        let s = (hsb.s * 255) / 100;
-        let v = (hsb.b * 255) / 100;
-        if (s == 0) {
-            rgb = {
-                r: v,
-                g: v,
-                b: v
-            };
-        }
-        else {
-            let t1 = v;
-            let t2 = ((255 - s) * v) / 255;
-            let t3 = ((t1 - t2) * (h % 60)) / 60;
-            if (h == 360)
-                h = 0;
-            if (h < 60) {
-                rgb.r = t1;
-                rgb.b = t2;
-                rgb.g = t2 + t3;
-            }
-            else if (h < 120) {
-                rgb.g = t1;
-                rgb.b = t2;
-                rgb.r = t1 - t3;
-            }
-            else if (h < 180) {
-                rgb.g = t1;
-                rgb.r = t2;
-                rgb.b = t2 + t3;
-            }
-            else if (h < 240) {
-                rgb.b = t1;
-                rgb.r = t2;
-                rgb.g = t1 - t3;
-            }
-            else if (h < 300) {
-                rgb.b = t1;
-                rgb.g = t2;
-                rgb.r = t2 + t3;
-            }
-            else if (h < 360) {
-                rgb.r = t1;
-                rgb.g = t2;
-                rgb.b = t1 - t3;
-            }
-            else {
-                rgb.r = 0;
-                rgb.g = 0;
-                rgb.b = 0;
-            }
-        }
-        return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) };
-    }
-    RGBtoHEX(rgb) {
-        var hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
-        for (var key in hex) {
-            if (hex[key].length == 1) {
-                hex[key] = '0' + hex[key];
-            }
-        }
-        return hex.join('');
-    }
-    HSBtoHEX(hsb) {
-        return this.RGBtoHEX(this.HSBtoRGB(hsb));
-    }
-    onAfterViewInit() {
-        if (this.inline()) {
-            this.updateColorSelector();
-            this.updateUI();
-        }
-    }
-    /**
-     * @override
-     *
-     * @see {@link BaseEditableHolder.writeControlValue}
-     * Writes the value to the control.
-     */
-    writeControlValue(value, setModelValue) {
-        if (value) {
-            switch (this.format()) {
-                case 'hex':
-                    this.value = this.HEXtoHSB(value);
-                    break;
-                case 'rgb':
-                    this.value = this.RGBtoHSB(value);
-                    break;
-                case 'hsb':
-                    this.value = value;
-                    break;
-            }
-        }
-        else {
-            this.value = this.HEXtoHSB(this.defaultColor());
-        }
-        setModelValue?.(value);
-        this.updateColorSelector();
-        this.updateUI();
-        this.cd.markForCheck();
-    }
-    onDestroy() {
-        if (this.scrollHandler) {
-            this.scrollHandler.destroy();
-            this.scrollHandler = null;
-        }
-        const overlayEl = this.overlayViewChild()?.nativeElement;
-        if (overlayEl && this.autoZIndex()) {
-            ZIndexUtils.clear(overlayEl);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ColorPicker, isStandalone: true, selector: "p-colorpicker, p-color-picker", inputs: { inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, defaultColor: { classPropertyName: "defaultColor", publicName: "defaultColor", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, overlayOptions: { classPropertyName: "overlayOptions", publicName: "overlayOptions", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onShow: "onShow", onHide: "onHide" }, host: { properties: { "class": "cx('root')" } }, providers: [COLORPICKER_VALUE_ACCESSOR, ColorPickerStyle, { provide: COLORPICKER_INSTANCE, useExisting: ColorPicker }, { provide: PARENT_INSTANCE, useExisting: ColorPicker }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true, isSignal: true }, { propertyName: "colorSelectorViewChild", first: true, predicate: ["colorSelector"], descendants: true, isSignal: true }, { propertyName: "colorHandleViewChild", first: true, predicate: ["colorHandle"], descendants: true, isSignal: true }, { propertyName: "hueViewChild", first: true, predicate: ["hue"], descendants: true, isSignal: true }, { propertyName: "hueHandleViewChild", first: true, predicate: ["hueHandle"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+const COLORPICKER_INSTANCE = new InjectionToken("COLORPICKER_INSTANCE");
+var ColorPicker = class ColorPicker extends BaseEditableHolder {
+	componentName = "ColorPicker";
+	constructor() {
+		super();
+	}
+	$pcColorPicker = inject(COLORPICKER_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	bindDirectiveInstance = inject(Bind, { self: true });
+	overlayService = inject(OverlayService);
+	inline = input(false, {
+		...ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	format = input("hex", ...ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []);
+	tabindex = input(...ngDevMode ? [void 0, { debugName: "tabindex" }] : /* istanbul ignore next */ []);
+	inputId = input(...ngDevMode ? [void 0, { debugName: "inputId" }] : /* istanbul ignore next */ []);
+	autoZIndex = input(true, {
+		...ngDevMode ? { debugName: "autoZIndex" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	autofocus = input(false, {
+		...ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	defaultColor = input("ff0000", ...ngDevMode ? [{ debugName: "defaultColor" }] : /* istanbul ignore next */ []);
+	appendTo = input(void 0, ...ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []);
+	overlayOptions = input(void 0, ...ngDevMode ? [{ debugName: "overlayOptions" }] : /* istanbul ignore next */ []);
+	motionOptions = input(void 0, ...ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []);
+	onChange = output();
+	onShow = output();
+	onHide = output();
+	inputViewChild = viewChild("input", ...ngDevMode ? [{ debugName: "inputViewChild" }] : /* istanbul ignore next */ []);
+	overlayViewChild = viewChild("overlay", ...ngDevMode ? [{ debugName: "overlayViewChild" }] : /* istanbul ignore next */ []);
+	colorSelectorViewChild = viewChild("colorSelector", ...ngDevMode ? [{ debugName: "colorSelectorViewChild" }] : /* istanbul ignore next */ []);
+	colorHandleViewChild = viewChild("colorHandle", ...ngDevMode ? [{ debugName: "colorHandleViewChild" }] : /* istanbul ignore next */ []);
+	hueViewChild = viewChild("hue", ...ngDevMode ? [{ debugName: "hueViewChild" }] : /* istanbul ignore next */ []);
+	hueHandleViewChild = viewChild("hueHandle", ...ngDevMode ? [{ debugName: "hueHandleViewChild" }] : /* istanbul ignore next */ []);
+	$appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []);
+	disabledAttr = computed(() => this.$disabled() ? "" : void 0, ...ngDevMode ? [{ debugName: "disabledAttr" }] : /* istanbul ignore next */ []);
+	ariaLabel = computed(() => this.translate(TranslationKeys.ARIA, TranslationKeys.SELECT_COLOR), ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	value = {
+		h: 0,
+		s: 100,
+		b: 100
+	};
+	inputBgColor;
+	shown;
+	overlayVisible = false;
+	documentMousemoveListener;
+	documentMouseupListener;
+	documentHueMoveListener;
+	scrollHandler;
+	colorDragging;
+	hueDragging;
+	overlay;
+	_componentStyle = inject(ColorPickerStyle);
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	onHueMousedown(event) {
+		if (this.$disabled()) return;
+		this.bindDocumentMousemoveListener();
+		this.bindDocumentMouseupListener();
+		this.hueDragging = true;
+		this.pickHue(event);
+	}
+	onHueDragStart(event) {
+		if (this.$disabled()) return;
+		this.hueDragging = true;
+		this.pickHue(event, event.changedTouches[0]);
+	}
+	onColorDragStart(event) {
+		if (this.$disabled()) return;
+		this.colorDragging = true;
+		this.pickColor(event, event.changedTouches[0]);
+		this.el.nativeElement.setAttribute("p-colorpicker-dragging", "true");
+	}
+	pickHue(event, position) {
+		let pageY = position ? position.pageY : event.pageY;
+		let top = this.hueViewChild()?.nativeElement.getBoundingClientRect().top + (this.document.defaultView.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0);
+		this.value = this.validateHSB({
+			h: Math.floor(360 * (150 - Math.max(0, Math.min(150, pageY - top))) / 150),
+			s: this.value.s,
+			b: this.value.b
+		});
+		this.updateColorSelector();
+		this.updateUI();
+		this.updateModel();
+		this.onChange.emit({
+			originalEvent: event,
+			value: this.getValueToUpdate()
+		});
+	}
+	onColorMousedown(event) {
+		if (this.$disabled()) return;
+		this.bindDocumentMousemoveListener();
+		this.bindDocumentMouseupListener();
+		this.colorDragging = true;
+		this.pickColor(event);
+	}
+	onDrag(event) {
+		if (this.colorDragging) {
+			this.pickColor(event, event.changedTouches[0]);
+			event.preventDefault();
+		}
+		if (this.hueDragging) {
+			this.pickHue(event, event.changedTouches[0]);
+			event.preventDefault();
+		}
+	}
+	onDragEnd() {
+		this.colorDragging = false;
+		this.hueDragging = false;
+		this.el.nativeElement.setAttribute("p-colorpicker-dragging", "false");
+		this.unbindDocumentMousemoveListener();
+		this.unbindDocumentMouseupListener();
+	}
+	pickColor(event, position) {
+		let pageX = position ? position.pageX : event.pageX;
+		let pageY = position ? position.pageY : event.pageY;
+		let rect = this.colorSelectorViewChild()?.nativeElement.getBoundingClientRect();
+		let top = rect.top + (this.document.defaultView.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0);
+		let left = rect.left + this.document.body.scrollLeft;
+		let saturation = Math.floor(100 * Math.max(0, Math.min(150, pageX - left)) / 150);
+		let brightness = Math.floor(100 * (150 - Math.max(0, Math.min(150, pageY - top))) / 150);
+		this.value = this.validateHSB({
+			h: this.value.h,
+			s: saturation,
+			b: brightness
+		});
+		this.updateUI();
+		this.updateModel();
+		this.onChange.emit({
+			originalEvent: event,
+			value: this.getValueToUpdate()
+		});
+	}
+	getValueToUpdate() {
+		let val;
+		switch (this.format()) {
+			case "hex":
+				val = "#" + this.HSBtoHEX(this.value);
+				break;
+			case "rgb":
+				val = this.HSBtoRGB(this.value);
+				break;
+			case "hsb": val = this.value;
+		}
+		return val;
+	}
+	updateModel() {
+		this.onModelChange(this.getValueToUpdate());
+	}
+	updateColorSelector() {
+		const colorSelector = this.colorSelectorViewChild();
+		if (colorSelector) {
+			const hsb = {};
+			hsb.s = 100;
+			hsb.b = 100;
+			hsb.h = this.value.h;
+			colorSelector.nativeElement.style.backgroundColor = "#" + this.HSBtoHEX(hsb);
+		}
+	}
+	updateUI() {
+		const colorHandle = this.colorHandleViewChild();
+		const hueHandle = this.hueHandleViewChild();
+		if (colorHandle && hueHandle?.nativeElement) {
+			colorHandle.nativeElement.style.left = Math.floor(150 * this.value.s / 100) + "px";
+			colorHandle.nativeElement.style.top = Math.floor(150 * (100 - this.value.b) / 100) + "px";
+			hueHandle.nativeElement.style.top = Math.floor(150 - 150 * this.value.h / 360) + "px";
+		}
+		this.inputBgColor = "#" + this.HSBtoHEX(this.value);
+	}
+	onInputFocus() {
+		this.onModelTouched();
+	}
+	show() {
+		this.overlayVisible = true;
+	}
+	onOverlayBeforeEnter() {
+		if (!this.inline()) {
+			this.updateColorSelector();
+			this.updateUI();
+			this.onShow.emit({});
+		}
+	}
+	onOverlayAfterLeave() {
+		if (!this.inline()) this.onHide.emit({});
+	}
+	hide() {
+		this.overlayVisible = false;
+	}
+	onInputClick() {
+		this.togglePanel();
+	}
+	togglePanel() {
+		if (!this.overlayVisible) this.show();
+		else this.hide();
+	}
+	onInputKeydown(event) {
+		switch (event.code) {
+			case "Space":
+				this.togglePanel();
+				event.preventDefault();
+				break;
+			case "Escape":
+			case "Tab": this.hide();
+		}
+	}
+	onOverlayClick(event) {
+		this.overlayService.add({
+			originalEvent: event,
+			target: this.el.nativeElement
+		});
+	}
+	bindDocumentMousemoveListener() {
+		if (!this.documentMousemoveListener) {
+			const documentTarget = this.el ? this.el.nativeElement.ownerDocument : "document";
+			this.documentMousemoveListener = this.renderer.listen(documentTarget, "mousemove", (event) => {
+				if (this.colorDragging) this.pickColor(event);
+				if (this.hueDragging) this.pickHue(event);
+			});
+		}
+	}
+	unbindDocumentMousemoveListener() {
+		if (this.documentMousemoveListener) {
+			this.documentMousemoveListener();
+			this.documentMousemoveListener = null;
+		}
+	}
+	bindDocumentMouseupListener() {
+		if (!this.documentMouseupListener) {
+			const documentTarget = this.el ? this.el.nativeElement.ownerDocument : "document";
+			this.documentMouseupListener = this.renderer.listen(documentTarget, "mouseup", () => {
+				this.colorDragging = false;
+				this.hueDragging = false;
+				this.unbindDocumentMousemoveListener();
+				this.unbindDocumentMouseupListener();
+			});
+		}
+	}
+	unbindDocumentMouseupListener() {
+		if (this.documentMouseupListener) {
+			this.documentMouseupListener();
+			this.documentMouseupListener = null;
+		}
+	}
+	validateHSB(hsb) {
+		return {
+			h: Math.min(360, Math.max(0, hsb.h)),
+			s: Math.min(100, Math.max(0, hsb.s)),
+			b: Math.min(100, Math.max(0, hsb.b))
+		};
+	}
+	validateRGB(rgb) {
+		return {
+			r: Math.min(255, Math.max(0, rgb.r)),
+			g: Math.min(255, Math.max(0, rgb.g)),
+			b: Math.min(255, Math.max(0, rgb.b))
+		};
+	}
+	validateHEX(hex) {
+		let len = 6 - hex.length;
+		if (len > 0) {
+			let o = [];
+			for (let i = 0; i < len; i++) o.push("0");
+			o.push(hex);
+			hex = o.join("");
+		}
+		return hex;
+	}
+	HEXtoRGB(hex) {
+		if (!hex || typeof hex !== "string") return {
+			r: 0,
+			g: 0,
+			b: 0
+		};
+		let hexValue = parseInt(hex.indexOf("#") > -1 ? hex.substring(1) : hex, 16);
+		return {
+			r: hexValue >> 16,
+			g: (hexValue & 65280) >> 8,
+			b: hexValue & 255
+		};
+	}
+	HEXtoHSB(hex) {
+		return this.RGBtoHSB(this.HEXtoRGB(hex));
+	}
+	RGBtoHSB(rgb) {
+		let hsb = {
+			h: 0,
+			s: 0,
+			b: 0
+		};
+		let min = Math.min(rgb.r, rgb.g, rgb.b);
+		let max = Math.max(rgb.r, rgb.g, rgb.b);
+		let delta = max - min;
+		hsb.b = max;
+		hsb.s = max != 0 ? 255 * delta / max : 0;
+		if (hsb.s != 0) {
+			if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;
+			else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;
+			else hsb.h = 4 + (rgb.r - rgb.g) / delta;
+		} else hsb.h = -1;
+		hsb.h *= 60;
+		if (hsb.h < 0) hsb.h += 360;
+		hsb.s *= 100 / 255;
+		hsb.b *= 100 / 255;
+		return hsb;
+	}
+	HSBtoRGB(hsb) {
+		let rgb = {
+			r: 0,
+			g: 0,
+			b: 0
+		};
+		let h = hsb.h;
+		let s = hsb.s * 255 / 100;
+		let v = hsb.b * 255 / 100;
+		if (s == 0) rgb = {
+			r: v,
+			g: v,
+			b: v
+		};
+		else {
+			let t1 = v;
+			let t2 = (255 - s) * v / 255;
+			let t3 = (t1 - t2) * (h % 60) / 60;
+			if (h == 360) h = 0;
+			if (h < 60) {
+				rgb.r = t1;
+				rgb.b = t2;
+				rgb.g = t2 + t3;
+			} else if (h < 120) {
+				rgb.g = t1;
+				rgb.b = t2;
+				rgb.r = t1 - t3;
+			} else if (h < 180) {
+				rgb.g = t1;
+				rgb.r = t2;
+				rgb.b = t2 + t3;
+			} else if (h < 240) {
+				rgb.b = t1;
+				rgb.r = t2;
+				rgb.g = t1 - t3;
+			} else if (h < 300) {
+				rgb.b = t1;
+				rgb.g = t2;
+				rgb.r = t2 + t3;
+			} else if (h < 360) {
+				rgb.r = t1;
+				rgb.g = t2;
+				rgb.b = t1 - t3;
+			} else {
+				rgb.r = 0;
+				rgb.g = 0;
+				rgb.b = 0;
+			}
+		}
+		return {
+			r: Math.round(rgb.r),
+			g: Math.round(rgb.g),
+			b: Math.round(rgb.b)
+		};
+	}
+	RGBtoHEX(rgb) {
+		let hex = [
+			rgb.r.toString(16),
+			rgb.g.toString(16),
+			rgb.b.toString(16)
+		];
+		for (let key in hex) if (hex[key].length == 1) hex[key] = "0" + hex[key];
+		return hex.join("");
+	}
+	HSBtoHEX(hsb) {
+		return this.RGBtoHEX(this.HSBtoRGB(hsb));
+	}
+	onAfterViewInit() {
+		if (this.inline()) {
+			this.updateColorSelector();
+			this.updateUI();
+		}
+	}
+	writeControlValue(value, setModelValue) {
+		if (value) switch (this.format()) {
+			case "hex":
+				this.value = this.HEXtoHSB(value);
+				break;
+			case "rgb":
+				this.value = this.RGBtoHSB(value);
+				break;
+			case "hsb": this.value = value;
+		}
+		else this.value = this.HEXtoHSB(this.defaultColor());
+		setModelValue?.(value);
+		this.updateColorSelector();
+		this.updateUI();
+		this.cd.markForCheck();
+	}
+	onDestroy() {
+		if (this.scrollHandler) {
+			this.scrollHandler.destroy();
+			this.scrollHandler = null;
+		}
+		const overlayEl = this.overlayViewChild()?.nativeElement;
+		if (overlayEl && this.autoZIndex()) ZIndexUtils.clear(overlayEl);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ColorPicker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: ColorPicker,
+		isStandalone: true,
+		selector: "p-colorpicker, p-color-picker",
+		inputs: {
+			inline: {
+				classPropertyName: "inline",
+				publicName: "inline",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			format: {
+				classPropertyName: "format",
+				publicName: "format",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tabindex: {
+				classPropertyName: "tabindex",
+				publicName: "tabindex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoZIndex: {
+				classPropertyName: "autoZIndex",
+				publicName: "autoZIndex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autofocus: {
+				classPropertyName: "autofocus",
+				publicName: "autofocus",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			defaultColor: {
+				classPropertyName: "defaultColor",
+				publicName: "defaultColor",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			appendTo: {
+				classPropertyName: "appendTo",
+				publicName: "appendTo",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			overlayOptions: {
+				classPropertyName: "overlayOptions",
+				publicName: "overlayOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			motionOptions: {
+				classPropertyName: "motionOptions",
+				publicName: "motionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			onChange: "onChange",
+			onShow: "onShow",
+			onHide: "onHide"
+		},
+		host: { properties: { "class": "cx('root')" } },
+		providers: [
+			COLORPICKER_VALUE_ACCESSOR,
+			ColorPickerStyle,
+			{
+				provide: COLORPICKER_INSTANCE,
+				useExisting: ColorPicker
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: ColorPicker
+			}
+		],
+		viewQueries: [
+			{
+				propertyName: "inputViewChild",
+				first: true,
+				predicate: ["input"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "overlayViewChild",
+				first: true,
+				predicate: ["overlay"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "colorSelectorViewChild",
+				first: true,
+				predicate: ["colorSelector"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "colorHandleViewChild",
+				first: true,
+				predicate: ["colorHandle"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "hueViewChild",
+				first: true,
+				predicate: ["hue"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "hueHandleViewChild",
+				first: true,
+				predicate: ["hueHandle"],
+				descendants: true,
+				isSignal: true
+			}
+		],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: `
         @if (!inline()) {
             <input
                 #input
@@ -652,16 +681,87 @@ class ColorPicker extends BaseEditableHolder {
                 </div>
             </ng-template>
         </p-overlay>
-    `, isInline: true, dependencies: [{ kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: Overlay, selector: "p-overlay", inputs: ["hostName", "visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "autoZIndex", "baseZIndex", "listener", "responsive", "options", "appendTo", "inline", "motionOptions", "hostAttrSelector"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ColorPicker, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-colorpicker, p-color-picker',
-                    standalone: true,
-                    imports: [AutoFocus, SharedModule, Bind, Overlay],
-                    hostDirectives: [Bind],
-                    template: `
+    `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: AutoFocus,
+				selector: "[pAutoFocus]",
+				inputs: ["pAutoFocus"]
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "directive",
+				type: Bind,
+				selector: "[pBind]",
+				inputs: ["pBind"]
+			},
+			{
+				kind: "component",
+				type: Overlay,
+				selector: "p-overlay",
+				inputs: [
+					"hostName",
+					"visible",
+					"mode",
+					"style",
+					"styleClass",
+					"contentStyle",
+					"contentStyleClass",
+					"target",
+					"autoZIndex",
+					"baseZIndex",
+					"listener",
+					"responsive",
+					"options",
+					"appendTo",
+					"inline",
+					"motionOptions",
+					"hostAttrSelector"
+				],
+				outputs: [
+					"visibleChange",
+					"onBeforeShow",
+					"onShow",
+					"onBeforeHide",
+					"onHide",
+					"onAnimationStart",
+					"onAnimationDone",
+					"onBeforeEnter",
+					"onEnter",
+					"onAfterEnter",
+					"onBeforeLeave",
+					"onLeave",
+					"onAfterLeave"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ColorPicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p-colorpicker, p-color-picker",
+			standalone: true,
+			imports: [
+				AutoFocus,
+				SharedModule,
+				Bind,
+				Overlay
+			],
+			hostDirectives: [Bind],
+			template: `
         @if (!inline()) {
             <input
                 #input
@@ -712,30 +812,185 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
             </ng-template>
         </p-overlay>
     `,
-                    providers: [COLORPICKER_VALUE_ACCESSOR, ColorPickerStyle, { provide: COLORPICKER_INSTANCE, useExisting: ColorPicker }, { provide: PARENT_INSTANCE, useExisting: ColorPicker }],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        '[class]': "cx('root')"
-                    }
-                }]
-        }], ctorParameters: () => [], propDecorators: { inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], autoZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoZIndex", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], defaultColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultColor", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], overlayOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOptions", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], inputViewChild: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], overlayViewChild: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }], colorSelectorViewChild: [{ type: i0.ViewChild, args: ['colorSelector', { isSignal: true }] }], colorHandleViewChild: [{ type: i0.ViewChild, args: ['colorHandle', { isSignal: true }] }], hueViewChild: [{ type: i0.ViewChild, args: ['hue', { isSignal: true }] }], hueHandleViewChild: [{ type: i0.ViewChild, args: ['hueHandle', { isSignal: true }] }] } });
-class ColorPickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: ColorPickerModule, imports: [ColorPicker, SharedModule], exports: [ColorPicker, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ColorPickerModule, imports: [ColorPicker, SharedModule, SharedModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ColorPickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [ColorPicker, SharedModule],
-                    exports: [ColorPicker, SharedModule]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+			providers: [
+				COLORPICKER_VALUE_ACCESSOR,
+				ColorPickerStyle,
+				{
+					provide: COLORPICKER_INSTANCE,
+					useExisting: ColorPicker
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: ColorPicker
+				}
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: { "[class]": "cx('root')" }
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		inline: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inline",
+				required: false
+			}]
+		}],
+		format: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "format",
+				required: false
+			}]
+		}],
+		tabindex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tabindex",
+				required: false
+			}]
+		}],
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}],
+		autoZIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoZIndex",
+				required: false
+			}]
+		}],
+		autofocus: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autofocus",
+				required: false
+			}]
+		}],
+		defaultColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "defaultColor",
+				required: false
+			}]
+		}],
+		appendTo: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appendTo",
+				required: false
+			}]
+		}],
+		overlayOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "overlayOptions",
+				required: false
+			}]
+		}],
+		motionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "motionOptions",
+				required: false
+			}]
+		}],
+		onChange: [{
+			type: i0.Output,
+			args: ["onChange"]
+		}],
+		onShow: [{
+			type: i0.Output,
+			args: ["onShow"]
+		}],
+		onHide: [{
+			type: i0.Output,
+			args: ["onHide"]
+		}],
+		inputViewChild: [{
+			type: i0.ViewChild,
+			args: ["input", { isSignal: true }]
+		}],
+		overlayViewChild: [{
+			type: i0.ViewChild,
+			args: ["overlay", { isSignal: true }]
+		}],
+		colorSelectorViewChild: [{
+			type: i0.ViewChild,
+			args: ["colorSelector", { isSignal: true }]
+		}],
+		colorHandleViewChild: [{
+			type: i0.ViewChild,
+			args: ["colorHandle", { isSignal: true }]
+		}],
+		hueViewChild: [{
+			type: i0.ViewChild,
+			args: ["hue", { isSignal: true }]
+		}],
+		hueHandleViewChild: [{
+			type: i0.ViewChild,
+			args: ["hueHandle", { isSignal: true }]
+		}]
+	}
+});
+var ColorPickerModule = class ColorPickerModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ColorPickerModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ColorPickerModule,
+		imports: [ColorPicker, SharedModule],
+		exports: [ColorPicker, SharedModule]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ColorPickerModule,
+		imports: [
+			ColorPicker,
+			SharedModule,
+			SharedModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ColorPickerModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [ColorPicker, SharedModule],
+			exports: [ColorPicker, SharedModule]
+		}]
+	}]
+});
 export { COLORPICKER_VALUE_ACCESSOR, ColorPicker, ColorPickerClasses, ColorPickerModule, ColorPickerStyle };
-//# sourceMappingURL=primeng-colorpicker.mjs.map
+
+//# sourceMappingURL=primeng-colorpicker.mjs.map