primeng 19.1.2 → 20.0.0-beta.1

package/fesm2022/primeng-colorpicker.mjs

@@ -1,165 +1,28 @@
-import { trigger, transition, style, animate } from '@angular/animations';
+import { trigger, transition, style as style$1, animate } from '@angular/animations';
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, numberAttribute, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, forwardRef, input, EventEmitter, computed, inject, booleanAttribute, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { appendChild, absolutePosition, relativePosition, isTouchDevice } from '@primeuix/utils';
+import { relativePosition, absolutePosition, isTouchDevice, cn } from '@primeuix/utils';
 import * as i1 from 'primeng/api';
 import { TranslationKeys, SharedModule } from 'primeng/api';
 import * as i3 from 'primeng/autofocus';
 import { AutoFocusModule } from 'primeng/autofocus';
-import { BaseComponent } from 'primeng/basecomponent';
-import { ConnectedOverlayScrollHandler } from 'primeng/dom';
+import { BaseEditableHolder } from 'primeng/baseeditableholder';
+import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { ZIndexUtils } from 'primeng/utils';
+import { style } from '@primeuix/styles/colorpicker';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-colorpicker {
-    display: inline-block;
-    position: relative;
-}
-
-.p-colorpicker-dragging {
-    cursor: pointer;
-}
-
-.p-colorpicker-preview {
-    width: ${dt('colorpicker.preview.width')};
-    height: ${dt('colorpicker.preview.height')};
-    padding: 0;
-    border: 0 none;
-    border-radius: ${dt('colorpicker.preview.border.radius')};
-    transition: background ${dt('colorpicker.transition.duration')}, color ${dt('colorpicker.transition.duration')}, border-color ${dt('colorpicker.transition.duration')}, outline-color ${dt('colorpicker.transition.duration')}, box-shadow ${dt('colorpicker.transition.duration')};
-    outline-color: transparent;
-    cursor: pointer;
-}
-
-.p-colorpicker-preview:enabled:focus-visible {
-    border-color: ${dt('colorpicker.preview.focus.border.color')};
-    box-shadow: ${dt('colorpicker.preview.focus.ring.shadow')};
-    outline: ${dt('colorpicker.preview.focus.ring.width')} ${dt('colorpicker.preview.focus.ring.style')} ${dt('colorpicker.preview.focus.ring.color')};
-    outline-offset: ${dt('colorpicker.preview.focus.ring.offset')};
-}
-
-.p-colorpicker-panel {
-    background: ${dt('colorpicker.panel.background')};
-    border: 1px solid ${dt('colorpicker.panel.border.color')};
-    border-radius: ${dt('colorpicker.panel.border.radius')};
-    box-shadow: ${dt('colorpicker.panel.shadow')};
-    width: 193px;
-    height: 166px;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-.p-colorpicker-panel:dir(rtl) {
-    left: auto;
-    right: 0;
-}
-
-.p-colorpicker-panel-inline {
-    box-shadow: none;
-    position: static;
-}
-
-.p-colorpicker-content {
-    position: relative;
-}
-
-.p-colorpicker-color-selector {
-    width: 150px;
-    height: 150px;
-    top: 8px;
-    left: 8px;
-    position: absolute;
-}
-
-.p-colorpicker-color-selector:dir(rtl) {
-    left: auto;
-    right: 8px;
-}
-
-.p-colorpicker-color-background {
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
-}
-
-.p-colorpicker-color-handle {
-    position: absolute;
-    top: 0px;
-    left: 150px;
-    border-radius: 100%;
-    width: 10px;
-    height: 10px;
-    border-width: 1px;
-    border-style: solid;
-    margin: -5px 0 0 -5px;
-    cursor: pointer;
-    opacity: 0.85;
-    border-color: ${dt('colorpicker.handle.color')};
-}
-
-.p-colorpicker-color-handle:dir(rtl) {
-    left: auto;
-    right: 150px;
-    margin: -5px -5px 0 0;
-}
-
-.p-colorpicker-hue {
-    width: 17px;
-    height: 150px;
-    top: 8px;
-    left: 167px;
-    position: absolute;
-    opacity: 0.85;
-    background: linear-gradient(0deg,
-        red 0,
-        #ff0 17%,
-        #0f0 33%,
-        #0ff 50%,
-        #00f 67%,
-        #f0f 83%,
-        red);
-}
-
-.p-colorpicker-hue:dir(rtl) {
-    left: auto;
-    right: 167px;
-}
-
-.p-colorpicker-hue-handle {
-    position: absolute;
-    top: 150px;
-    left: 0px;
-    width: 21px;
-    margin-left: -2px;
-    margin-top: -5px;
-    height: 10px;
-    border-width: 2px;
-    border-style: solid;
-    opacity: 0.85;
-    cursor: pointer;
-    border-color: ${dt('colorpicker.handle.color')};
-}
-
-.p-colorpicker-hue-handle:dir(rtl) {
-    left: auto;
-    right: 0px;
-    margin-left: 0;
-    margin-right: -2px;
-}
-`;
 const classes = {
-    root: 'p-colorpicker p-component',
-    preview: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }],
-    panel: ({ props }) => [
+    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': props.inline,
-            'p-disabled': props.disabled
+            'p-colorpicker-panel-inline': instance.inline,
+            'p-disabled': instance.disabled()
         }
     ],
     content: 'p-colorpicker-content',
@@ -171,12 +34,12 @@ const classes = {
 };
 class ColorPickerStyle extends BaseStyle {
     name = 'colorpicker';
-    theme = theme;
+    theme = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ColorPickerStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ColorPickerStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColorPickerStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColorPickerStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ColorPickerStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColorPickerStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -233,15 +96,11 @@ const COLORPICKER_VALUE_ACCESSOR = {
  * ColorPicker groups a collection of contents in tabs.
  * @group Components
  */
-class ColorPicker extends BaseComponent {
+class ColorPicker extends BaseEditableHolder {
     overlayService;
-    /**
-     * Inline style of the component.
-     * @group Props
-     */
-    style;
     /**
      * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -255,16 +114,6 @@ class ColorPicker extends BaseComponent {
      * @group Props
      */
     format = 'hex';
-    /**
-     * 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).
-     * @group Props
-     */
-    appendTo;
-    /**
-     * When present, it specifies that the component should be disabled.
-     * @group Props
-     */
-    disabled;
     /**
      * Index of the element in tabbing order.
      * @group Props
@@ -280,11 +129,6 @@ class ColorPicker extends BaseComponent {
      * @group Props
      */
     autoZIndex = true;
-    /**
-     * Base zIndex value to use in layering.
-     * @group Props
-     */
-    baseZIndex = 0;
     /**
      * Transition options of the show animation.
      * @group Props
@@ -300,6 +144,17 @@ class ColorPicker extends BaseComponent {
      * @group Props
      */
     autofocus;
+    /**
+     * Default color to display initially when model value is not present.
+     * @group Props
+     */
+    defaultColor = 'ff0000';
+    /**
+     * 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);
     /**
      * Callback to invoke on value change.
      * @param {ColorPickerChangeEvent} event - Custom value change event.
@@ -316,13 +171,12 @@ class ColorPicker extends BaseComponent {
      * @group Emits
      */
     onHide = new EventEmitter();
-    containerViewChild;
     inputViewChild;
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo());
     value = { h: 0, s: 100, b: 100 };
     inputBgColor;
     shown;
     overlayVisible;
-    defaultColor = 'ff0000';
     onModelChange = () => { };
     onModelTouched = () => { };
     documentClickListener;
@@ -360,7 +214,7 @@ class ColorPicker extends BaseComponent {
         return this.config?.getTranslation(TranslationKeys.ARIA)[TranslationKeys.SELECT_COLOR];
     }
     onHueMousedown(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
         this.bindDocumentMousemoveListener();
@@ -369,14 +223,14 @@ class ColorPicker extends BaseComponent {
         this.pickHue(event);
     }
     onHueDragStart(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
         this.hueDragging = true;
         this.pickHue(event, event.changedTouches[0]);
     }
     onColorDragStart(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
         this.colorDragging = true;
@@ -396,7 +250,7 @@ class ColorPicker extends BaseComponent {
         this.onChange.emit({ originalEvent: event, value: this.getValueToUpdate() });
     }
     onColorMousedown(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
         this.bindDocumentMousemoveListener();
@@ -506,6 +360,7 @@ class ColorPicker extends BaseComponent {
             case 'visible':
                 if (!this.inline) {
                     this.overlay = event.element;
+                    this.attrSelector && this.overlay.setAttribute(this.attrSelector, '');
                     this.appendOverlay();
                     if (this.autoZIndex) {
                         ZIndexUtils.set('overlay', this.overlay, this.config.zIndex.overlay);
@@ -539,23 +394,18 @@ class ColorPicker extends BaseComponent {
         }
     }
     appendOverlay() {
-        if (this.appendTo) {
-            if (this.appendTo === 'body')
-                this.renderer.appendChild(this.document.body, this.overlay);
-            else
-                appendChild(this.appendTo, this.overlay);
-        }
+        DomHandler.appendOverlay(this.overlay, this.$appendTo() === 'body' ? this.document.body : this.$appendTo(), this.$appendTo());
     }
     restoreOverlayAppend() {
-        if (this.overlay && this.appendTo) {
-            this.renderer.appendChild(this.el.nativeElement, this.overlay);
+        if (this.overlay && this.$appendTo() !== 'self') {
+            this.renderer.appendChild(this.inputViewChild?.nativeElement, this.overlay);
         }
     }
     alignOverlay() {
-        if (this.appendTo)
-            absolutePosition(this.overlay, this.inputViewChild?.nativeElement);
-        else
+        if (this.$appendTo() === 'self')
             relativePosition(this.overlay, this.inputViewChild?.nativeElement);
+        else
+            absolutePosition(this.overlay, this.inputViewChild?.nativeElement);
     }
     hide() {
         this.overlayVisible = false;
@@ -599,10 +449,6 @@ class ColorPicker extends BaseComponent {
     registerOnTouched(fn) {
         this.onModelTouched = fn;
     }
-    setDisabledState(val) {
-        this.disabled = val;
-        this.cd.markForCheck();
-    }
     bindDocumentClickListener() {
         if (!this.documentClickListener) {
             const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
@@ -676,7 +522,7 @@ class ColorPicker extends BaseComponent {
     }
     bindScrollListener() {
         if (!this.scrollHandler) {
-            this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerViewChild?.nativeElement, () => {
+            this.scrollHandler = new ConnectedOverlayScrollHandler(this.el?.nativeElement, () => {
                 if (this.overlayVisible) {
                     this.hide();
                 }
@@ -850,147 +696,118 @@ class ColorPicker extends BaseComponent {
         this.restoreOverlayAppend();
         this.onOverlayHide();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ColorPicker, deps: [{ token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.8", type: ColorPicker, isStandalone: true, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: { style: "style", styleClass: "styleClass", inline: ["inline", "inline", booleanAttribute], format: "format", appendTo: "appendTo", disabled: ["disabled", "disabled", booleanAttribute], tabindex: "tabindex", inputId: "inputId", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { onChange: "onChange", onShow: "onShow", onHide: "onHide" }, providers: [COLORPICKER_VALUE_ACCESSOR, ColorPickerStyle], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: 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, ngImport: i0, template: `
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColorPicker, deps: [{ token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: ColorPicker, isStandalone: true, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: { styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, format: { classPropertyName: "format", publicName: "format", isSignal: false, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, defaultColor: { classPropertyName: "defaultColor", publicName: "defaultColor", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onShow: "onShow", onHide: "onHide" }, host: { properties: { "class": "cn(cx('root'), styleClass)", "attr.data-pc-name": "\"colorpicker\"", "attr.data-pc-section": "\"root\"" } }, providers: [COLORPICKER_VALUE_ACCESSOR, ColorPickerStyle], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: 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, ngImport: i0, template: `
+        <input
+            *ngIf="!inline"
+            #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.data-pc-section]="'input'"
+            [attr.aria-label]="ariaLabel"
+            [pAutoFocus]="autofocus"
+        />
         <div
-            #container
-            [ngStyle]="style"
-            [class]="styleClass"
-            [ngClass]="{
-                'p-colorpicker p-component': true,
-                'p-colorpicker-overlay': !inline,
-                'p-colorpicker-dragging': colorDragging || hueDragging
+            *ngIf="inline || overlayVisible"
+            [class]="cx('panel')"
+            (click)="onOverlayClick($event)"
+            [@overlayAnimation]="{
+                value: 'visible',
+                params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
             }"
-            [attr.data-pc-name]="'colorpicker'"
-            [attr.data-pc-section]="'root'"
+            [@.disabled]="inline === true"
+            (@overlayAnimation.start)="onOverlayAnimationStart($event)"
+            (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
+            [attr.data-pc-section]="'panel'"
         >
-            <input
-                *ngIf="!inline"
-                #input
-                type="text"
-                class="p-colorpicker-preview"
-                [ngClass]="{ 'p-disabled': disabled }"
-                readonly="readonly"
-                [attr.tabindex]="tabindex"
-                [disabled]="disabled"
-                (click)="onInputClick()"
-                (keydown)="onInputKeydown($event)"
-                (focus)="onInputFocus()"
-                [attr.id]="inputId"
-                [style.backgroundColor]="inputBgColor"
-                [attr.data-pc-section]="'input'"
-                [attr.aria-label]="ariaLabel"
-                [pAutoFocus]="autofocus"
-            />
-            <div
-                *ngIf="inline || overlayVisible"
-                [ngClass]="{ 'p-colorpicker-panel': true, 'p-colorpicker-panel-inline': inline, 'p-disabled': disabled }"
-                (click)="onOverlayClick($event)"
-                [@overlayAnimation]="{
-                    value: 'visible',
-                    params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-                }"
-                [@.disabled]="inline === true"
-                (@overlayAnimation.start)="onOverlayAnimationStart($event)"
-                (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
-                [attr.data-pc-section]="'panel'"
-            >
-                <div class="p-colorpicker-content" [attr.data-pc-section]="'content'">
-                    <div #colorSelector class="p-colorpicker-color-selector" (touchstart)="onColorDragStart($event)" (touchmove)="onDrag($event)" (touchend)="onDragEnd()" (mousedown)="onColorMousedown($event)" [attr.data-pc-section]="'selector'">
-                        <div class="p-colorpicker-color-background" [attr.data-pc-section]="'color'">
-                            <div #colorHandle class="p-colorpicker-color-handle" [attr.data-pc-section]="'colorHandle'"></div>
-                        </div>
-                    </div>
-                    <div #hue class="p-colorpicker-hue" (mousedown)="onHueMousedown($event)" (touchstart)="onHueDragStart($event)" (touchmove)="onDrag($event)" (touchend)="onDragEnd()" [attr.data-pc-section]="'hue'">
-                        <div #hueHandle class="p-colorpicker-hue-handle" [attr.data-pc-section]="'hueHandle'"></div>
+            <div [class]="cx('content')" [attr.data-pc-section]="'content'">
+                <div #colorSelector [class]="cx('colorSelector')" (touchstart)="onColorDragStart($event)" (touchmove)="onDrag($event)" (touchend)="onDragEnd()" (mousedown)="onColorMousedown($event)" [attr.data-pc-section]="'selector'">
+                    <div [class]="cx('colorBackground')" [attr.data-pc-section]="'color'">
+                        <div #colorHandle [class]="cx('colorHandle')" [attr.data-pc-section]="'colorHandle'"></div>
                     </div>
                 </div>
+                <div #hue [class]="cx('hue')" (mousedown)="onHueMousedown($event)" (touchstart)="onHueDragStart($event)" (touchmove)="onDrag($event)" (touchend)="onDragEnd()" [attr.data-pc-section]="'hue'">
+                    <div #hueHandle [class]="cx('hueHandle')" [attr.data-pc-section]="'hueHandle'"></div>
+                </div>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i3.AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus", "pAutoFocus"] }, { kind: "ngmodule", type: SharedModule }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i3.AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "ngmodule", type: SharedModule }], animations: [trigger('overlayAnimation', [transition(':enter', [style$1({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style$1({ opacity: 0 }))])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ColorPicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColorPicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-colorPicker, p-colorpicker, p-color-picker',
                     standalone: true,
                     imports: [CommonModule, AutoFocusModule, SharedModule],
                     template: `
+        <input
+            *ngIf="!inline"
+            #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.data-pc-section]="'input'"
+            [attr.aria-label]="ariaLabel"
+            [pAutoFocus]="autofocus"
+        />
         <div
-            #container
-            [ngStyle]="style"
-            [class]="styleClass"
-            [ngClass]="{
-                'p-colorpicker p-component': true,
-                'p-colorpicker-overlay': !inline,
-                'p-colorpicker-dragging': colorDragging || hueDragging
+            *ngIf="inline || overlayVisible"
+            [class]="cx('panel')"
+            (click)="onOverlayClick($event)"
+            [@overlayAnimation]="{
+                value: 'visible',
+                params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
             }"
-            [attr.data-pc-name]="'colorpicker'"
-            [attr.data-pc-section]="'root'"
+            [@.disabled]="inline === true"
+            (@overlayAnimation.start)="onOverlayAnimationStart($event)"
+            (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
+            [attr.data-pc-section]="'panel'"
         >
-            <input
-                *ngIf="!inline"
-                #input
-                type="text"
-                class="p-colorpicker-preview"
-                [ngClass]="{ 'p-disabled': disabled }"
-                readonly="readonly"
-                [attr.tabindex]="tabindex"
-                [disabled]="disabled"
-                (click)="onInputClick()"
-                (keydown)="onInputKeydown($event)"
-                (focus)="onInputFocus()"
-                [attr.id]="inputId"
-                [style.backgroundColor]="inputBgColor"
-                [attr.data-pc-section]="'input'"
-                [attr.aria-label]="ariaLabel"
-                [pAutoFocus]="autofocus"
-            />
-            <div
-                *ngIf="inline || overlayVisible"
-                [ngClass]="{ 'p-colorpicker-panel': true, 'p-colorpicker-panel-inline': inline, 'p-disabled': disabled }"
-                (click)="onOverlayClick($event)"
-                [@overlayAnimation]="{
-                    value: 'visible',
-                    params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-                }"
-                [@.disabled]="inline === true"
-                (@overlayAnimation.start)="onOverlayAnimationStart($event)"
-                (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
-                [attr.data-pc-section]="'panel'"
-            >
-                <div class="p-colorpicker-content" [attr.data-pc-section]="'content'">
-                    <div #colorSelector class="p-colorpicker-color-selector" (touchstart)="onColorDragStart($event)" (touchmove)="onDrag($event)" (touchend)="onDragEnd()" (mousedown)="onColorMousedown($event)" [attr.data-pc-section]="'selector'">
-                        <div class="p-colorpicker-color-background" [attr.data-pc-section]="'color'">
-                            <div #colorHandle class="p-colorpicker-color-handle" [attr.data-pc-section]="'colorHandle'"></div>
-                        </div>
-                    </div>
-                    <div #hue class="p-colorpicker-hue" (mousedown)="onHueMousedown($event)" (touchstart)="onHueDragStart($event)" (touchmove)="onDrag($event)" (touchend)="onDragEnd()" [attr.data-pc-section]="'hue'">
-                        <div #hueHandle class="p-colorpicker-hue-handle" [attr.data-pc-section]="'hueHandle'"></div>
+            <div [class]="cx('content')" [attr.data-pc-section]="'content'">
+                <div #colorSelector [class]="cx('colorSelector')" (touchstart)="onColorDragStart($event)" (touchmove)="onDrag($event)" (touchend)="onDragEnd()" (mousedown)="onColorMousedown($event)" [attr.data-pc-section]="'selector'">
+                    <div [class]="cx('colorBackground')" [attr.data-pc-section]="'color'">
+                        <div #colorHandle [class]="cx('colorHandle')" [attr.data-pc-section]="'colorHandle'"></div>
                     </div>
                 </div>
+                <div #hue [class]="cx('hue')" (mousedown)="onHueMousedown($event)" (touchstart)="onHueDragStart($event)" (touchmove)="onDrag($event)" (touchend)="onDragEnd()" [attr.data-pc-section]="'hue'">
+                    <div #hueHandle [class]="cx('hueHandle')" [attr.data-pc-section]="'hueHandle'"></div>
+                </div>
             </div>
         </div>
     `,
-                    animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])],
+                    animations: [trigger('overlayAnimation', [transition(':enter', [style$1({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style$1({ opacity: 0 }))])])],
                     providers: [COLORPICKER_VALUE_ACCESSOR, ColorPickerStyle],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass)",
+                        '[attr.data-pc-name]': '"colorpicker"',
+                        '[attr.data-pc-section]': '"root"'
+                    }
                 }]
-        }], ctorParameters: () => [{ type: i1.OverlayService }], propDecorators: { style: [{
-                type: Input
-            }], styleClass: [{
+        }], ctorParameters: () => [{ type: i1.OverlayService }], propDecorators: { styleClass: [{
                 type: Input
             }], inline: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], format: [{
                 type: Input
-            }], appendTo: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], tabindex: [{
                 type: Input
             }], inputId: [{
@@ -998,9 +815,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }], autoZIndex: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], baseZIndex: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
             }], showTransitionOptions: [{
                 type: Input
             }], hideTransitionOptions: [{
@@ -1008,15 +822,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }], autofocus: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], defaultColor: [{
+                type: Input
             }], onChange: [{
                 type: Output
             }], onShow: [{
                 type: Output
             }], onHide: [{
                 type: Output
-            }], containerViewChild: [{
-                type: ViewChild,
-                args: ['container']
             }], inputViewChild: [{
                 type: ViewChild,
                 args: ['input']
@@ -1034,11 +847,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 args: ['hueHandle']
             }] } });
 class ColorPickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: ColorPickerModule, imports: [ColorPicker, SharedModule], exports: [ColorPicker, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ColorPickerModule, imports: [ColorPicker, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: ColorPickerModule, imports: [ColorPicker, SharedModule], exports: [ColorPicker, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColorPickerModule, imports: [ColorPicker, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ColorPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ColorPicker, SharedModule],