@wawjs/ngx-prime 22.0.0

package/fesm2022/wawjs-ngx-prime-colorpicker.mjs

@@ -0,0 +1,894 @@
+export * from '@wawjs/ngx-prime/types/colorpicker';
+import * as i0 from '@angular/core';
+import { Injectable, inject, ElementRef, input, booleanAttribute, output, Directive, forwardRef, InjectionToken, viewChild, computed, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { OverlayService, TranslationKeys, SharedModule } from '@wawjs/ngx-prime/api';
+import * as i2 from '@wawjs/ngx-prime/autofocus';
+import { AutoFocusModule } from '@wawjs/ngx-prime/autofocus';
+import { PARENT_INSTANCE } from '@wawjs/ngx-prime/basecomponent';
+import { BaseEditableHolder } from '@wawjs/ngx-prime/baseeditableholder';
+import * as i1 from '@wawjs/ngx-prime/bind';
+import { Bind } from '@wawjs/ngx-prime/bind';
+import { MotionModule } from '@wawjs/ngx-prime/motion';
+import * as i3 from '@wawjs/ngx-prime/overlay';
+import { OverlayModule } from '@wawjs/ngx-prime/overlay';
+import { ZIndexUtils } from '@wawjs/ngx-prime/utils';
+import { style } from '@wawjs/css-prime-styles/colorpicker';
+import { BaseStyle } from '@wawjs/ngx-prime/base';
+
+const nativeStyle = `
+.p-colorpicker-input { inline-size: 2.5rem; block-size: 2.5rem; padding: .125rem; cursor: pointer; border-radius: dt('inputtext.border.radius'); }
+.p-colorpicker-input:focus-visible { outline: 2px solid dt('inputtext.focus.border.color'); outline-offset: 2px; }
+.p-colorpicker-input.p-invalid { border-color: dt('inputtext.invalid.border.color'); }
+.p-colorpicker-input:disabled { cursor: default; opacity: .6; }
+.p-colorpicker-clear { cursor: pointer; }
+.p-colorpicker-clear:disabled { cursor: default; opacity: .6; }
+`;
+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'
+};
+class ColorPickerStyle extends BaseStyle {
+    name = 'colorpicker';
+    style = `${style}\n${nativeStyle}`;
+    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.ngx-prime.org/colorpicker/)
+ *
+ * @module colorpickerstyle
+ *
+ */
+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";
+})(ColorPickerClasses || (ColorPickerClasses = {}));
+
+/** Enhances a browser-native color input while preserving native color selection. */
+class ColorPickerDirective {
+    element = inject(ElementRef);
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    inputId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
+    name = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    tabindex = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    colorChange = output();
+    touch = output();
+    onInputChange = output({ alias: 'onInput' });
+    onChange = output();
+    onFocus = output();
+    onBlur = output();
+    onClear = output();
+    onInput(event) {
+        const value = event.target.value.toUpperCase();
+        this.colorChange.emit(value);
+        this.onInputChange.emit({ originalEvent: event, value });
+    }
+    onNativeBlur(event) {
+        this.touch.emit();
+        this.onBlur.emit(event);
+    }
+    handleChange(event) {
+        this.onChange.emit({ originalEvent: event, value: event.target.value.toUpperCase() });
+    }
+    clear(value = '#000000') {
+        if (this.disabled() || this.readonly())
+            return;
+        this.element.nativeElement.value = value;
+        this.element.nativeElement.dispatchEvent(new Event('input', { bubbles: true }));
+        this.element.nativeElement.dispatchEvent(new Event('change', { bubbles: true }));
+        this.onClear.emit(value.toUpperCase());
+        this.element.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ColorPickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: ColorPickerDirective, isStandalone: true, selector: "input[type='color'][pColorPicker]", inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChange: "colorChange", touch: "touch", onInputChange: "onInput", onChange: "onChange", onFocus: "onFocus", onBlur: "onBlur", onClear: "onClear" }, host: { listeners: { "input": "onInput($event)", "change": "handleChange($event)", "focus": "onFocus.emit($event)", "blur": "onNativeBlur($event)" }, properties: { "class.p-invalid": "invalid()", "attr.data-pc-name": "'colorpicker'", "attr.data-pc-section": "'input'", "attr.data-pc-invalid": "invalid() || null", "attr.aria-label": "ariaLabel() || null", "attr.aria-describedby": "ariaDescribedBy() || null", "attr.id": "inputId() || null", "attr.name": "name() || null", "attr.tabindex": "tabindex() ?? null", "readOnly": "readonly()", "disabled": "disabled()", "required": "required()" }, classAttribute: "p-colorpicker-input p-component" }, exportAs: ["pColorPicker"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ColorPickerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "input[type='color'][pColorPicker]",
+                    standalone: true,
+                    exportAs: 'pColorPicker',
+                    host: {
+                        class: 'p-colorpicker-input p-component',
+                        '[class.p-invalid]': 'invalid()',
+                        '[attr.data-pc-name]': "'colorpicker'",
+                        '[attr.data-pc-section]': "'input'",
+                        '[attr.data-pc-invalid]': 'invalid() || null',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-describedby]': 'ariaDescribedBy() || null',
+                        '[attr.id]': 'inputId() || null',
+                        '[attr.name]': 'name() || null',
+                        '[attr.tabindex]': 'tabindex() ?? null',
+                        '[readOnly]': 'readonly()',
+                        '[disabled]': 'disabled()',
+                        '[required]': 'required()',
+                        '(input)': 'onInput($event)',
+                        '(change)': 'handleChange($event)',
+                        '(focus)': 'onFocus.emit($event)',
+                        '(blur)': 'onNativeBlur($event)'
+                    }
+                }]
+        }], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], onInputChange: [{ type: i0.Output, args: ["onInput"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onClear: [{ type: i0.Output, args: ["onClear"] }] } });
+/** Resets a native `pColorPicker` input to its configured default color. */
+class ColorPickerClearDirective {
+    picker = input.required({ ...(ngDevMode ? { debugName: "picker" } : /* istanbul ignore next */ {}), alias: 'pColorPickerClear' });
+    value = input('#000000', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Reset color', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    clear() {
+        this.picker().clear(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ColorPickerClearDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: ColorPickerClearDirective, isStandalone: true, selector: "button[pColorPickerClear]", inputs: { picker: { classPropertyName: "picker", publicName: "pColorPickerClear", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "clear()" }, properties: { "attr.aria-label": "ariaLabel()", "disabled": "picker().disabled() || picker().readonly()" }, classAttribute: "p-colorpicker-clear" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ColorPickerClearDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[pColorPickerClear]',
+                    standalone: true,
+                    host: {
+                        type: 'button',
+                        class: 'p-colorpicker-clear',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[disabled]': 'picker().disabled() || picker().readonly()',
+                        '(click)': 'clear()'
+                    }
+                }]
+        }], propDecorators: { picker: [{ type: i0.Input, args: [{ isSignal: true, alias: "pColorPickerClear", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+const COLORPICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => ColorPicker),
+    multi: true
+};
+const COLORPICKER_INSTANCE = new InjectionToken('COLORPICKER_INSTANCE');
+/**
+ * ColorPicker groups a collection of contents in tabs.
+ *
+ * @deprecated Use a native `<input type="color" pColorPicker>` instead.
+ * Browser-native picker appearance is platform controlled. This component
+ * remains available for compatibility and is planned for removal in v23.
+ * @group Components
+ */
+class ColorPicker extends BaseEditableHolder {
+    overlayService = inject(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;
+    colorHandleViewChild;
+    hueViewChild;
+    hueHandleViewChild;
+    _componentStyle = inject(ColorPickerStyle);
+    set colorSelector(element) {
+        this.colorSelectorViewChild = element;
+    }
+    set colorHandle(element) {
+        this.colorHandleViewChild = element;
+    }
+    set hue(element) {
+        this.hueViewChild = element;
+    }
+    set hueHandle(element) {
+        this.hueHandleViewChild = element;
+    }
+    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('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());
+        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();
+            });
+        }
+    }
+    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 & 0x00ff00) >> 8, b: hexValue & 0x0000ff };
+    }
+    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();
+        }
+    }
+    /**
+     * @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.2", ngImport: i0, type: ColorPicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ColorPicker, isStandalone: true, selector: "p-colorPicker, p-colorpicker, p-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: "colorSelector", first: true, predicate: ["colorSelector"], descendants: true }, { propertyName: "colorHandle", first: true, predicate: ["colorHandle"], descendants: true }, { propertyName: "hue", first: true, predicate: ["hue"], descendants: true }, { propertyName: "hueHandle", first: true, predicate: ["hueHandle"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        @if (!inline()) {
+            <input
+                #input
+                type="text"
+                [class]="cx('preview')"
+                readonly
+                [attr.tabindex]="tabindex()"
+                [attr.disabled]="$disabled() ? '' : undefined"
+                (click)="onInputClick()"
+                (keydown)="onInputKeydown($event)"
+                (focus)="onInputFocus()"
+                [attr.id]="inputId()"
+                [style.backgroundColor]="inputBgColor"
+                [attr.aria-label]="ariaLabel"
+                [pAutoFocus]="autofocus()"
+                [pBind]="ptm('preview')"
+            />
+        }
+
+        <p-overlay
+            #overlay
+            [hostAttrSelector]="$attrSelector"
+            [(visible)]="overlayVisible"
+            [options]="overlayOptions()"
+            [target]="'@parent'"
+            [inline]="inline()"
+            [appendTo]="$appendTo()"
+            [unstyled]="unstyled()"
+            [pt]="ptm('pcOverlay')"
+            [motionOptions]="motionOptions()"
+            (onBeforeEnter)="onOverlayBeforeEnter()"
+            (onAfterLeave)="onOverlayAfterLeave()"
+            (onHide)="hide()"
+        >
+            <ng-template #content>
+                <div [class]="cx('panel')" [pBind]="ptm('panel')">
+                    <div [class]="cx('content')" [pBind]="ptm('content')">
+                        <div #colorSelector [class]="cx('colorSelector')" (touchstart)="onColorDragStart($event)" (touchmove)="onDrag($event)" (touchend)="onDragEnd()" (mousedown)="onColorMousedown($event)" [pBind]="ptm('colorSelector')">
+                            <div [class]="cx('colorBackground')" [pBind]="ptm('colorBackground')">
+                                <div #colorHandle [class]="cx('colorHandle')" [pBind]="ptm('colorHandle')"></div>
+                            </div>
+                        </div>
+                        <div #hue [class]="cx('hue')" (mousedown)="onHueMousedown($event)" (touchstart)="onHueDragStart($event)" (touchmove)="onDrag($event)" (touchend)="onDragEnd()" [pBind]="ptm('hue')">
+                            <div #hueHandle [class]="cx('hueHandle')" [pBind]="ptm('hueHandle')"></div>
+                        </div>
+                    </div>
+                </div>
+            </ng-template>
+        </p-overlay>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i2.AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "component", type: i3.Overlay, selector: "p-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.2", ngImport: i0, type: ColorPicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-colorPicker, p-colorpicker, p-color-picker',
+                    standalone: true,
+                    imports: [AutoFocusModule, SharedModule, Bind, MotionModule, OverlayModule],
+                    hostDirectives: [Bind],
+                    template: `
+        @if (!inline()) {
+            <input
+                #input
+                type="text"
+                [class]="cx('preview')"
+                readonly
+                [attr.tabindex]="tabindex()"
+                [attr.disabled]="$disabled() ? '' : undefined"
+                (click)="onInputClick()"
+                (keydown)="onInputKeydown($event)"
+                (focus)="onInputFocus()"
+                [attr.id]="inputId()"
+                [style.backgroundColor]="inputBgColor"
+                [attr.aria-label]="ariaLabel"
+                [pAutoFocus]="autofocus()"
+                [pBind]="ptm('preview')"
+            />
+        }
+
+        <p-overlay
+            #overlay
+            [hostAttrSelector]="$attrSelector"
+            [(visible)]="overlayVisible"
+            [options]="overlayOptions()"
+            [target]="'@parent'"
+            [inline]="inline()"
+            [appendTo]="$appendTo()"
+            [unstyled]="unstyled()"
+            [pt]="ptm('pcOverlay')"
+            [motionOptions]="motionOptions()"
+            (onBeforeEnter)="onOverlayBeforeEnter()"
+            (onAfterLeave)="onOverlayAfterLeave()"
+            (onHide)="hide()"
+        >
+            <ng-template #content>
+                <div [class]="cx('panel')" [pBind]="ptm('panel')">
+                    <div [class]="cx('content')" [pBind]="ptm('content')">
+                        <div #colorSelector [class]="cx('colorSelector')" (touchstart)="onColorDragStart($event)" (touchmove)="onDrag($event)" (touchend)="onDragEnd()" (mousedown)="onColorMousedown($event)" [pBind]="ptm('colorSelector')">
+                            <div [class]="cx('colorBackground')" [pBind]="ptm('colorBackground')">
+                                <div #colorHandle [class]="cx('colorHandle')" [pBind]="ptm('colorHandle')"></div>
+                            </div>
+                        </div>
+                        <div #hue [class]="cx('hue')" (mousedown)="onHueMousedown($event)" (touchstart)="onHueDragStart($event)" (touchmove)="onDrag($event)" (touchend)="onDragEnd()" [pBind]="ptm('hue')">
+                            <div #hueHandle [class]="cx('hueHandle')" [pBind]="ptm('hueHandle')"></div>
+                        </div>
+                    </div>
+                </div>
+            </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]': "cn(cx('root'), styleClass())"
+                    }
+                }]
+        }], 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 }] }], colorSelector: [{
+                type: ViewChild,
+                args: ['colorSelector']
+            }], colorHandle: [{
+                type: ViewChild,
+                args: ['colorHandle']
+            }], hue: [{
+                type: ViewChild,
+                args: ['hue']
+            }], hueHandle: [{
+                type: ViewChild,
+                args: ['hueHandle']
+            }] } });
+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, ColorPickerDirective, SharedModule], exports: [ColorPicker, ColorPickerDirective, 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, ColorPickerDirective, SharedModule],
+                    exports: [ColorPicker, ColorPickerDirective, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COLORPICKER_VALUE_ACCESSOR, ColorPicker, ColorPickerClasses, ColorPickerClearDirective, ColorPickerDirective, ColorPickerModule, ColorPickerStyle };
+//# sourceMappingURL=wawjs-ngx-prime-colorpicker.mjs.map