@gravionlabs/helix-core 22.1.2 → 22.1.3

package/fesm2022/gravionlabs-helix-core-colorpicker.mjs

@@ -1,22 +1,21 @@
-export * from '@gravionlabs/helix-core/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 * as i1 from '@gravionlabs/helix-core/api';
-import { TranslationKeys, SharedModule } from '@gravionlabs/helix-core/api';
-import * as i3 from '@gravionlabs/helix-core/autofocus';
-import { AutoFocusModule } from '@gravionlabs/helix-core/autofocus';
-import { PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
-import { BaseEditableHolder } from '@gravionlabs/helix-core/baseeditableholder';
-import * as i2 from '@gravionlabs/helix-core/bind';
-import { Bind } from '@gravionlabs/helix-core/bind';
-import { MotionModule } from '@gravionlabs/helix-core/motion';
-import * as i4 from '@gravionlabs/helix-core/overlay';
-import { OverlayModule } from '@gravionlabs/helix-core/overlay';
-import { ZIndexUtils } from '@gravionlabs/helix-core/utils';
-import { BaseStyle } from '@gravionlabs/helix-core/base';
-
-const style = /*css*/ `
+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 * as i1 from "@gravionlabs/helix-core/api";
+import { SharedModule, TranslationKeys } from "@gravionlabs/helix-core/api";
+import * as i3 from "@gravionlabs/helix-core/autofocus";
+import { AutoFocusModule } from "@gravionlabs/helix-core/autofocus";
+import { PARENT_INSTANCE } from "@gravionlabs/helix-core/basecomponent";
+import { BaseEditableHolder } from "@gravionlabs/helix-core/baseeditableholder";
+import * as i2 from "@gravionlabs/helix-core/bind";
+import { Bind } from "@gravionlabs/helix-core/bind";
+import { MotionModule } from "@gravionlabs/helix-core/motion";
+import * as i4 from "@gravionlabs/helix-core/overlay";
+import { OverlayModule } from "@gravionlabs/helix-core/overlay";
+import { ZIndexUtils } from "@gravionlabs/helix-core/utils";
+import { BaseStyle } from "@gravionlabs/helix-core/base";
+export * from "@gravionlabs/helix-core/types/colorpicker";
+const style = `
     .h-colorpicker {
         display: inline-block;
         position: relative;
@@ -124,658 +123,967 @@ const style = /*css*/ `
         border-color: dt('colorpicker.handle.color');
     }
 `;
-
 const classes = {
-    root: ({ instance }) => ['h-colorpicker h-component', { 'h-colorpicker-overlay': !instance.inline(), 'h-colorpicker-dragging': instance.colorDragging || instance.hueDragging }],
-    preview: ({ instance }) => ['h-colorpicker-preview', { 'h-disabled': instance.$disabled() }],
-    panel: ({ instance }) => [
-        'h-colorpicker-panel',
-        {
-            'h-colorpicker-panel-inline': instance.inline(),
-            'h-disabled': instance.$disabled()
-        }
-    ],
-    content: 'h-colorpicker-content',
-    colorSelector: 'h-colorpicker-color-selector',
-    colorBackground: 'h-colorpicker-color-background',
-    colorHandle: 'h-colorpicker-color-handle',
-    hue: 'h-colorpicker-hue',
-    hueHandle: 'h-colorpicker-hue-handle'
+	root: ({ instance }) => ["h-colorpicker h-component", {
+		"h-colorpicker-overlay": !instance.inline(),
+		"h-colorpicker-dragging": instance.colorDragging || instance.hueDragging
+	}],
+	preview: ({ instance }) => ["h-colorpicker-preview", { "h-disabled": instance.$disabled() }],
+	panel: ({ instance }) => ["h-colorpicker-panel", {
+		"h-colorpicker-panel-inline": instance.inline(),
+		"h-disabled": instance.$disabled()
+	}],
+	content: "h-colorpicker-content",
+	colorSelector: "h-colorpicker-color-selector",
+	colorBackground: "h-colorpicker-color-background",
+	colorHandle: "h-colorpicker-color-handle",
+	hue: "h-colorpicker-hue",
+	hueHandle: "h-colorpicker-hue-handle"
 };
-class ColorPickerStyle extends BaseStyle {
-    name = 'colorpicker';
-    style = style;
-    classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ColorPickerStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ColorPickerStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ColorPickerStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * ColorPicker groups a collection of contents in tabs.
- *
- * [Live Demo](https://www.primeng.org/colorpicker/)
- *
- * @module colorpickerstyle
- *
- */
+var ColorPickerStyle = class ColorPickerStyle extends BaseStyle {
+	name = "colorpicker";
+	style = style;
+	classes = classes;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ColorPickerStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ColorPickerStyle
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ColorPickerStyle,
+	decorators: [{ type: Injectable }]
+});
 var ColorPickerClasses;
-(function (ColorPickerClasses) {
-    /**
-     * Class name of the root element
-     */
-    ColorPickerClasses["root"] = "h-colorpicker";
-    /**
-     * Class name of the preview element
-     */
-    ColorPickerClasses["preview"] = "h-colorpicker-preview";
-    /**
-     * Class name of the panel element
-     */
-    ColorPickerClasses["panel"] = "h-colorpicker-panel";
-    /**
-     * Class name of the color selector element
-     */
-    ColorPickerClasses["colorSelector"] = "h-colorpicker-color-selector";
-    /**
-     * Class name of the color background element
-     */
-    ColorPickerClasses["colorBackground"] = "h-colorpicker-color-background";
-    /**
-     * Class name of the color handle element
-     */
-    ColorPickerClasses["colorHandle"] = "h-colorpicker-color-handle";
-    /**
-     * Class name of the hue element
-     */
-    ColorPickerClasses["hue"] = "h-colorpicker-hue";
-    /**
-     * Class name of the hue handle element
-     */
-    ColorPickerClasses["hueHandle"] = "h-colorpicker-hue-handle";
+(function(ColorPickerClasses) {
+	ColorPickerClasses["root"] = "h-colorpicker";
+	ColorPickerClasses["preview"] = "h-colorpicker-preview";
+	ColorPickerClasses["panel"] = "h-colorpicker-panel";
+	ColorPickerClasses["colorSelector"] = "h-colorpicker-color-selector";
+	ColorPickerClasses["colorBackground"] = "h-colorpicker-color-background";
+	ColorPickerClasses["colorHandle"] = "h-colorpicker-color-handle";
+	ColorPickerClasses["hue"] = "h-colorpicker-hue";
+	ColorPickerClasses["hueHandle"] = "h-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
- */
-class ColorPicker extends BaseEditableHolder {
-    overlayService;
-    componentName = 'ColorPicker';
-    $pcColorPicker = inject(COLORPICKER_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    /**
-     * Style class of the component.
-     * @deprecated since v20.0.0, use `class` instead.
-     * @group Props
-     */
-    styleClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
-    /**
-     * Transition options of the show animation.
-     * @group Props
-     * @deprecated since v21.0.0, use `motionOptions` instead.
-     */
-    showTransitionOptions = input('.12s cubic-bezier(0, 0, 0.2, 1)', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showTransitionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * Transition options of the hide animation.
-     * @group Props
-     * @deprecated since v21.0.0, use `motionOptions` instead.
-     */
-    hideTransitionOptions = input('.1s linear', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hideTransitionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether to display as an overlay or not.
-     * @group Props
-     */
-    inline = input(undefined, { ...(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(undefined, { ...(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.required('overlay', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "overlayViewChild" }] : /* istanbul ignore next */ []));
-    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
-    value = { h: 0, s: 100, b: 100 };
-    inputBgColor;
-    shown;
-    overlayVisible;
-    documentMousemoveListener;
-    documentMouseupListener;
-    documentHueMoveListener;
-    scrollHandler;
-    colorDragging;
-    hueDragging;
-    overlay;
-    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 */ []));
-    _componentStyle = inject(ColorPickerStyle);
-    constructor(overlayService) {
-        super();
-        this.overlayService = overlayService;
-    }
-    get ariaLabel() {
-        return this.config?.getTranslation(TranslationKeys.ARIA)[TranslationKeys.SELECT_COLOR];
-    }
-    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('h-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('h-colorpicker-dragging', 'false');
-        this.unbindDocumentMousemoveListener();
-        this.unbindDocumentMouseupListener();
-        this.hideOnColorChosen();
-    }
-    hideOnColorChosen() {
-        if (!this.inline()) {
-            this.hide();
-        }
-    }
-    onInputBlur(event) {
-        this.onModelTouched();
-        if (this.inline() || this.colorDragging || this.hueDragging) {
-            return;
-        }
-        const relatedTarget = event.relatedTarget;
-        const overlayEl = this.overlayViewChild()?.nativeElement;
-        if (relatedTarget && (this.el.nativeElement.contains(relatedTarget) || overlayEl?.contains(relatedTarget))) {
-            return;
-        }
-        this.hide();
-    }
-    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());
-        this.cd.markForCheck();
-    }
-    updateColorSelector() {
-        if (this.colorSelectorViewChild()) {
-            const hsb = {};
-            hsb.s = 100;
-            hsb.b = 100;
-            hsb.h = this.value.h;
-            this.colorSelectorViewChild().nativeElement.style.backgroundColor = '#' + this.HSBtoHEX(hsb);
-        }
-    }
-    updateUI() {
-        if (this.colorHandleViewChild() && this.hueHandleViewChild()?.nativeElement) {
-            this.colorHandleViewChild().nativeElement.style.left = Math.floor((150 * this.value.s) / 100) + 'px';
-            this.colorHandleViewChild().nativeElement.style.top = Math.floor((150 * (100 - this.value.b)) / 100) + 'px';
-            this.hueHandleViewChild().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;
-        this.cd.markForCheck();
-    }
-    onOverlayBeforeEnter() {
-        if (!this.inline()) {
-            this.updateColorSelector();
-            this.updateUI();
-            this.onShow.emit({});
-        }
-    }
-    onOverlayAfterLeave() {
-        if (!this.inline()) {
-            this.onHide.emit({});
-        }
-    }
-    hide() {
-        this.overlayVisible = false;
-        this.cd.markForCheck();
-    }
-    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();
-                this.hideOnColorChosen();
-            });
-        }
-    }
-    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) {
-        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());
-        }
-        this.updateColorSelector();
-        this.updateUI();
-        this.cd.markForCheck();
-    }
-    onDestroy() {
-        if (this.scrollHandler) {
-            this.scrollHandler.destroy();
-            this.scrollHandler = null;
-        }
-        const overlayViewChild = this.overlayViewChild();
-        if (overlayViewChild?.nativeElement && this.autoZIndex()) {
-            ZIndexUtils.clear(overlayViewChild?.nativeElement);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ColorPicker, deps: [{ token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ColorPicker, isStandalone: true, selector: "h-colorPicker, h-colorpicker, h-color-picker", inputs: { styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: true, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: true, isRequired: false, transformFunction: null }, 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": "cn(cx('root'), styleClass())" } }, 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: i2.Bind }], ngImport: i0, template: "@if (!inline()) {\n  <input\n    #input\n    type=\"text\"\n    [class]=\"cx('preview')\"\n    readonly\n    [attr.tabindex]=\"tabindex()\"\n    [attr.disabled]=\"$disabled() ? '' : undefined\"\n    (click)=\"onInputClick()\"\n    (keydown)=\"onInputKeydown($event)\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur($event)\"\n    [attr.id]=\"inputId()\"\n    [style.backgroundColor]=\"inputBgColor\"\n    [attr.aria-label]=\"ariaLabel\"\n    [hAutoFocus]=\"autofocus()\"\n    [hBind]=\"ptm('preview')\"\n    />\n}\n\n<h-overlay\n  #overlay\n  [hostAttrSelector]=\"$attrSelector\"\n  [(visible)]=\"overlayVisible\"\n  [options]=\"overlayOptions()\"\n  [target]=\"'@parent'\"\n  [inline]=\"inline()\"\n  [appendTo]=\"$appendTo()\"\n  [unstyled]=\"unstyled()\"\n  [pt]=\"ptm('pcOverlay')\"\n  [motionOptions]=\"motionOptions()\"\n  (onBeforeEnter)=\"onOverlayBeforeEnter()\"\n  (onAfterLeave)=\"onOverlayAfterLeave()\"\n  (onHide)=\"hide()\"\n  >\n  <ng-template #content>\n    <div [class]=\"cx('panel')\" [hBind]=\"ptm('panel')\">\n      <div [class]=\"cx('content')\" [hBind]=\"ptm('content')\">\n        <div #colorSelector [class]=\"cx('colorSelector')\" (touchstart)=\"onColorDragStart($event)\" (touchmove)=\"onDrag($event)\" (touchend)=\"onDragEnd()\" (mousedown)=\"onColorMousedown($event)\" [hBind]=\"ptm('colorSelector')\">\n          <div [class]=\"cx('colorBackground')\" [hBind]=\"ptm('colorBackground')\">\n            <div #colorHandle [class]=\"cx('colorHandle')\" [hBind]=\"ptm('colorHandle')\"></div>\n          </div>\n        </div>\n        <div #hue [class]=\"cx('hue')\" (mousedown)=\"onHueMousedown($event)\" (touchstart)=\"onHueDragStart($event)\" (touchmove)=\"onDrag($event)\" (touchend)=\"onDragEnd()\" [hBind]=\"ptm('hue')\">\n          <div #hueHandle [class]=\"cx('hueHandle')\" [hBind]=\"ptm('hueHandle')\"></div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</h-overlay>\n", dependencies: [{ kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i3.AutoFocus, selector: "[hAutoFocus]", inputs: ["hAutoFocus"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[hBind]", inputs: ["hBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "component", type: i4.Overlay, selector: "h-overlay", inputs: ["hostName", "visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "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.6", ngImport: i0, type: ColorPicker, decorators: [{
-            type: Component,
-            args: [{ selector: 'h-colorPicker, h-colorpicker, h-color-picker', standalone: true, imports: [AutoFocusModule, SharedModule, Bind, MotionModule, OverlayModule], hostDirectives: [Bind], providers: [COLORPICKER_VALUE_ACCESSOR, ColorPickerStyle, { provide: COLORPICKER_INSTANCE, useExisting: ColorPicker }, { provide: PARENT_INSTANCE, useExisting: ColorPicker }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        '[class]': "cn(cx('root'), styleClass())"
-                    }, template: "@if (!inline()) {\n  <input\n    #input\n    type=\"text\"\n    [class]=\"cx('preview')\"\n    readonly\n    [attr.tabindex]=\"tabindex()\"\n    [attr.disabled]=\"$disabled() ? '' : undefined\"\n    (click)=\"onInputClick()\"\n    (keydown)=\"onInputKeydown($event)\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur($event)\"\n    [attr.id]=\"inputId()\"\n    [style.backgroundColor]=\"inputBgColor\"\n    [attr.aria-label]=\"ariaLabel\"\n    [hAutoFocus]=\"autofocus()\"\n    [hBind]=\"ptm('preview')\"\n    />\n}\n\n<h-overlay\n  #overlay\n  [hostAttrSelector]=\"$attrSelector\"\n  [(visible)]=\"overlayVisible\"\n  [options]=\"overlayOptions()\"\n  [target]=\"'@parent'\"\n  [inline]=\"inline()\"\n  [appendTo]=\"$appendTo()\"\n  [unstyled]=\"unstyled()\"\n  [pt]=\"ptm('pcOverlay')\"\n  [motionOptions]=\"motionOptions()\"\n  (onBeforeEnter)=\"onOverlayBeforeEnter()\"\n  (onAfterLeave)=\"onOverlayAfterLeave()\"\n  (onHide)=\"hide()\"\n  >\n  <ng-template #content>\n    <div [class]=\"cx('panel')\" [hBind]=\"ptm('panel')\">\n      <div [class]=\"cx('content')\" [hBind]=\"ptm('content')\">\n        <div #colorSelector [class]=\"cx('colorSelector')\" (touchstart)=\"onColorDragStart($event)\" (touchmove)=\"onDrag($event)\" (touchend)=\"onDragEnd()\" (mousedown)=\"onColorMousedown($event)\" [hBind]=\"ptm('colorSelector')\">\n          <div [class]=\"cx('colorBackground')\" [hBind]=\"ptm('colorBackground')\">\n            <div #colorHandle [class]=\"cx('colorHandle')\" [hBind]=\"ptm('colorHandle')\"></div>\n          </div>\n        </div>\n        <div #hue [class]=\"cx('hue')\" (mousedown)=\"onHueMousedown($event)\" (touchstart)=\"onHueDragStart($event)\" (touchmove)=\"onDrag($event)\" (touchend)=\"onDragEnd()\" [hBind]=\"ptm('hue')\">\n          <div #hueHandle [class]=\"cx('hueHandle')\" [hBind]=\"ptm('hueHandle')\"></div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</h-overlay>\n" }]
-        }], ctorParameters: () => [{ type: i1.OverlayService }], propDecorators: { styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], showTransitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTransitionOptions", required: false }] }], hideTransitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTransitionOptions", required: false }] }], 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.6", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: ColorPickerModule, imports: [ColorPicker, SharedModule], exports: [ColorPicker, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ColorPickerModule, imports: [ColorPicker, SharedModule, SharedModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ColorPickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [ColorPicker, SharedModule],
-                    exports: [ColorPicker, SharedModule]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+const COLORPICKER_INSTANCE = new InjectionToken("COLORPICKER_INSTANCE");
+var ColorPicker = class ColorPicker extends BaseEditableHolder {
+	overlayService;
+	componentName = "ColorPicker";
+	$pcColorPicker = inject(COLORPICKER_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	bindDirectiveInstance = inject(Bind, { self: true });
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	styleClass = input(...ngDevMode ? [void 0, { debugName: "styleClass" }] : 	/* istanbul ignore next */ []);
+	showTransitionOptions = input(".12s cubic-bezier(0, 0, 0.2, 1)", ...ngDevMode ? [{ debugName: "showTransitionOptions" }] : 	/* istanbul ignore next */ []);
+	hideTransitionOptions = input(".1s linear", ...ngDevMode ? [{ debugName: "hideTransitionOptions" }] : 	/* istanbul ignore next */ []);
+	inline = input(void 0, {
+		...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(void 0, {
+		...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.required("overlay", ...ngDevMode ? [{ debugName: "overlayViewChild" }] : 	/* istanbul ignore next */ []);
+	$appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...ngDevMode ? [{ debugName: "$appendTo" }] : 	/* istanbul ignore next */ []);
+	value = {
+		h: 0,
+		s: 100,
+		b: 100
+	};
+	inputBgColor;
+	shown;
+	overlayVisible;
+	documentMousemoveListener;
+	documentMouseupListener;
+	documentHueMoveListener;
+	scrollHandler;
+	colorDragging;
+	hueDragging;
+	overlay;
+	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 */ []);
+	_componentStyle = inject(ColorPickerStyle);
+	constructor(overlayService) {
+		super();
+		this.overlayService = overlayService;
+	}
+	get ariaLabel() {
+		return this.config?.getTranslation(TranslationKeys.ARIA)[TranslationKeys.SELECT_COLOR];
+	}
+	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("h-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("h-colorpicker-dragging", "false");
+		this.unbindDocumentMousemoveListener();
+		this.unbindDocumentMouseupListener();
+		this.hideOnColorChosen();
+	}
+	hideOnColorChosen() {
+		if (!this.inline()) this.hide();
+	}
+	onInputBlur(event) {
+		this.onModelTouched();
+		if (this.inline() || this.colorDragging || this.hueDragging) return;
+		const relatedTarget = event.relatedTarget;
+		const overlayEl = this.overlayViewChild()?.nativeElement;
+		if (relatedTarget && (this.el.nativeElement.contains(relatedTarget) || overlayEl?.contains(relatedTarget))) return;
+		this.hide();
+	}
+	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());
+		this.cd.markForCheck();
+	}
+	updateColorSelector() {
+		if (this.colorSelectorViewChild()) {
+			const hsb = {};
+			hsb.s = 100;
+			hsb.b = 100;
+			hsb.h = this.value.h;
+			this.colorSelectorViewChild().nativeElement.style.backgroundColor = "#" + this.HSBtoHEX(hsb);
+		}
+	}
+	updateUI() {
+		if (this.colorHandleViewChild() && this.hueHandleViewChild()?.nativeElement) {
+			this.colorHandleViewChild().nativeElement.style.left = Math.floor(150 * this.value.s / 100) + "px";
+			this.colorHandleViewChild().nativeElement.style.top = Math.floor(150 * (100 - this.value.b) / 100) + "px";
+			this.hueHandleViewChild().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;
+		this.cd.markForCheck();
+	}
+	onOverlayBeforeEnter() {
+		if (!this.inline()) {
+			this.updateColorSelector();
+			this.updateUI();
+			this.onShow.emit({});
+		}
+	}
+	onOverlayAfterLeave() {
+		if (!this.inline()) this.onHide.emit({});
+	}
+	hide() {
+		this.overlayVisible = false;
+		this.cd.markForCheck();
+	}
+	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: 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();
+				this.hideOnColorChosen();
+			});
+		}
+	}
+	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 & 65280) >> 8,
+			b: hexValue & 255
+		};
+	}
+	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();
+		}
+	}
+	writeControlValue(value) {
+		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());
+		this.updateColorSelector();
+		this.updateUI();
+		this.cd.markForCheck();
+	}
+	onDestroy() {
+		if (this.scrollHandler) {
+			this.scrollHandler.destroy();
+			this.scrollHandler = null;
+		}
+		const overlayViewChild = this.overlayViewChild();
+		if (overlayViewChild?.nativeElement && this.autoZIndex()) ZIndexUtils.clear(overlayViewChild?.nativeElement);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ColorPicker,
+		deps: [{ token: i1.OverlayService }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: ColorPicker,
+		isStandalone: true,
+		selector: "h-colorPicker, h-colorpicker, h-color-picker",
+		inputs: {
+			styleClass: {
+				classPropertyName: "styleClass",
+				publicName: "styleClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showTransitionOptions: {
+				classPropertyName: "showTransitionOptions",
+				publicName: "showTransitionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hideTransitionOptions: {
+				classPropertyName: "hideTransitionOptions",
+				publicName: "hideTransitionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			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": "cn(cx('root'), styleClass())" } },
+		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: i2.Bind }],
+		ngImport: i0,
+		template: "@if (!inline()) {\n  <input\n    #input\n    type=\"text\"\n    [class]=\"cx('preview')\"\n    readonly\n    [attr.tabindex]=\"tabindex()\"\n    [attr.disabled]=\"$disabled() ? '' : undefined\"\n    (click)=\"onInputClick()\"\n    (keydown)=\"onInputKeydown($event)\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur($event)\"\n    [attr.id]=\"inputId()\"\n    [style.backgroundColor]=\"inputBgColor\"\n    [attr.aria-label]=\"ariaLabel\"\n    [hAutoFocus]=\"autofocus()\"\n    [hBind]=\"ptm('preview')\"\n    />\n}\n\n<h-overlay\n  #overlay\n  [hostAttrSelector]=\"$attrSelector\"\n  [(visible)]=\"overlayVisible\"\n  [options]=\"overlayOptions()\"\n  [target]=\"'@parent'\"\n  [inline]=\"inline()\"\n  [appendTo]=\"$appendTo()\"\n  [unstyled]=\"unstyled()\"\n  [pt]=\"ptm('pcOverlay')\"\n  [motionOptions]=\"motionOptions()\"\n  (onBeforeEnter)=\"onOverlayBeforeEnter()\"\n  (onAfterLeave)=\"onOverlayAfterLeave()\"\n  (onHide)=\"hide()\"\n  >\n  <ng-template #content>\n    <div [class]=\"cx('panel')\" [hBind]=\"ptm('panel')\">\n      <div [class]=\"cx('content')\" [hBind]=\"ptm('content')\">\n        <div #colorSelector [class]=\"cx('colorSelector')\" (touchstart)=\"onColorDragStart($event)\" (touchmove)=\"onDrag($event)\" (touchend)=\"onDragEnd()\" (mousedown)=\"onColorMousedown($event)\" [hBind]=\"ptm('colorSelector')\">\n          <div [class]=\"cx('colorBackground')\" [hBind]=\"ptm('colorBackground')\">\n            <div #colorHandle [class]=\"cx('colorHandle')\" [hBind]=\"ptm('colorHandle')\"></div>\n          </div>\n        </div>\n        <div #hue [class]=\"cx('hue')\" (mousedown)=\"onHueMousedown($event)\" (touchstart)=\"onHueDragStart($event)\" (touchmove)=\"onDrag($event)\" (touchend)=\"onDragEnd()\" [hBind]=\"ptm('hue')\">\n          <div #hueHandle [class]=\"cx('hueHandle')\" [hBind]=\"ptm('hueHandle')\"></div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</h-overlay>\n",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: AutoFocusModule
+			},
+			{
+				kind: "directive",
+				type: i3.AutoFocus,
+				selector: "[hAutoFocus]",
+				inputs: ["hAutoFocus"]
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "directive",
+				type: Bind,
+				selector: "[hBind]",
+				inputs: ["hBind"]
+			},
+			{
+				kind: "ngmodule",
+				type: MotionModule
+			},
+			{
+				kind: "ngmodule",
+				type: OverlayModule
+			},
+			{
+				kind: "component",
+				type: i4.Overlay,
+				selector: "h-overlay",
+				inputs: [
+					"hostName",
+					"visible",
+					"mode",
+					"style",
+					"styleClass",
+					"contentStyle",
+					"contentStyleClass",
+					"target",
+					"autoZIndex",
+					"baseZIndex",
+					"showTransitionOptions",
+					"hideTransitionOptions",
+					"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.1",
+	ngImport: i0,
+	type: ColorPicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-colorPicker, h-colorpicker, h-color-picker",
+			standalone: true,
+			imports: [
+				AutoFocusModule,
+				SharedModule,
+				Bind,
+				MotionModule,
+				OverlayModule
+			],
+			hostDirectives: [Bind],
+			providers: [
+				COLORPICKER_VALUE_ACCESSOR,
+				ColorPickerStyle,
+				{
+					provide: COLORPICKER_INSTANCE,
+					useExisting: ColorPicker
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: ColorPicker
+				}
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: { "[class]": "cn(cx('root'), styleClass())" },
+			template: "@if (!inline()) {\n  <input\n    #input\n    type=\"text\"\n    [class]=\"cx('preview')\"\n    readonly\n    [attr.tabindex]=\"tabindex()\"\n    [attr.disabled]=\"$disabled() ? '' : undefined\"\n    (click)=\"onInputClick()\"\n    (keydown)=\"onInputKeydown($event)\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur($event)\"\n    [attr.id]=\"inputId()\"\n    [style.backgroundColor]=\"inputBgColor\"\n    [attr.aria-label]=\"ariaLabel\"\n    [hAutoFocus]=\"autofocus()\"\n    [hBind]=\"ptm('preview')\"\n    />\n}\n\n<h-overlay\n  #overlay\n  [hostAttrSelector]=\"$attrSelector\"\n  [(visible)]=\"overlayVisible\"\n  [options]=\"overlayOptions()\"\n  [target]=\"'@parent'\"\n  [inline]=\"inline()\"\n  [appendTo]=\"$appendTo()\"\n  [unstyled]=\"unstyled()\"\n  [pt]=\"ptm('pcOverlay')\"\n  [motionOptions]=\"motionOptions()\"\n  (onBeforeEnter)=\"onOverlayBeforeEnter()\"\n  (onAfterLeave)=\"onOverlayAfterLeave()\"\n  (onHide)=\"hide()\"\n  >\n  <ng-template #content>\n    <div [class]=\"cx('panel')\" [hBind]=\"ptm('panel')\">\n      <div [class]=\"cx('content')\" [hBind]=\"ptm('content')\">\n        <div #colorSelector [class]=\"cx('colorSelector')\" (touchstart)=\"onColorDragStart($event)\" (touchmove)=\"onDrag($event)\" (touchend)=\"onDragEnd()\" (mousedown)=\"onColorMousedown($event)\" [hBind]=\"ptm('colorSelector')\">\n          <div [class]=\"cx('colorBackground')\" [hBind]=\"ptm('colorBackground')\">\n            <div #colorHandle [class]=\"cx('colorHandle')\" [hBind]=\"ptm('colorHandle')\"></div>\n          </div>\n        </div>\n        <div #hue [class]=\"cx('hue')\" (mousedown)=\"onHueMousedown($event)\" (touchstart)=\"onHueDragStart($event)\" (touchmove)=\"onDrag($event)\" (touchend)=\"onDragEnd()\" [hBind]=\"ptm('hue')\">\n          <div #hueHandle [class]=\"cx('hueHandle')\" [hBind]=\"ptm('hueHandle')\"></div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</h-overlay>\n"
+		}]
+	}],
+	ctorParameters: () => [{ type: i1.OverlayService }],
+	propDecorators: {
+		styleClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "styleClass",
+				required: false
+			}]
+		}],
+		showTransitionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showTransitionOptions",
+				required: false
+			}]
+		}],
+		hideTransitionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hideTransitionOptions",
+				required: false
+			}]
+		}],
+		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.1",
+		ngImport: i0,
+		type: ColorPickerModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ColorPickerModule,
+		imports: [ColorPicker, SharedModule],
+		exports: [ColorPicker, SharedModule]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ColorPickerModule,
+		imports: [
+			ColorPicker,
+			SharedModule,
+			SharedModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ColorPickerModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [ColorPicker, SharedModule],
+			exports: [ColorPicker, SharedModule]
+		}]
+	}]
+});
 export { COLORPICKER_VALUE_ACCESSOR, ColorPicker, ColorPickerClasses, ColorPickerModule, ColorPickerStyle };
-//# sourceMappingURL=gravionlabs-helix-core-colorpicker.mjs.map
+
+//# sourceMappingURL=gravionlabs-helix-core-colorpicker.mjs.map