primeng 20.3.0 → 21.0.0-beta.1

package/fesm2022/primeng-colorpicker.mjs

@@ -1,11 +1,9 @@
 export * from 'primeng/types/colorpicker';
-import { trigger, transition, style as style$1, animate } from '@angular/animations';
 import * as i3 from '@angular/common';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, forwardRef, InjectionToken, inject, input, EventEmitter, computed, booleanAttribute, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { relativePosition, absolutePosition, isTouchDevice } from '@primeuix/utils';
 import * as i1 from 'primeng/api';
 import { TranslationKeys, SharedModule } from 'primeng/api';
 import * as i4 from 'primeng/autofocus';
@@ -14,7 +12,9 @@ import { PARENT_INSTANCE } from 'primeng/basecomponent';
 import { BaseEditableHolder } from 'primeng/baseeditableholder';
 import * as i2 from 'primeng/bind';
 import { Bind } from 'primeng/bind';
-import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
+import { MotionModule } from 'primeng/motion';
+import * as i5 from 'primeng/overlay';
+import { OverlayModule } from 'primeng/overlay';
 import { ZIndexUtils } from 'primeng/utils';
 import { style } from '@primeuix/styles/colorpicker';
 import { BaseStyle } from 'primeng/base';
@@ -40,10 +40,10 @@ class ColorPickerStyle extends BaseStyle {
     name = 'colorpicker';
     style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColorPickerStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColorPickerStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColorPickerStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColorPickerStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColorPickerStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColorPickerStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -114,6 +114,18 @@ class ColorPicker extends BaseEditableHolder {
      * @group Props
      */
     styleClass;
+    /**
+     * Transition options of the show animation.
+     * @group Props
+     * @deprecated since v21.0.0, use `motionOptions` instead.
+     */
+    showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
+    /**
+     * Transition options of the hide animation.
+     * @group Props
+     * @deprecated since v21.0.0, use `motionOptions` instead.
+     */
+    hideTransitionOptions = '.1s linear';
     /**
      * Whether to display as an overlay or not.
      * @group Props
@@ -139,16 +151,6 @@ class ColorPicker extends BaseEditableHolder {
      * @group Props
      */
     autoZIndex = true;
-    /**
-     * Transition options of the show animation.
-     * @group Props
-     */
-    showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
-    /**
-     * Transition options of the hide animation.
-     * @group Props
-     */
-    hideTransitionOptions = '.1s linear';
     /**
      * When present, it specifies that the component should automatically get focus on load.
      * @group Props
@@ -165,6 +167,16 @@ class ColorPicker extends BaseEditableHolder {
      * @group Props
      */
     appendTo = input(undefined, ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
+    /**
+     * Whether to use overlay API feature. The properties of overlay API can be used like an object in it.
+     * @group Props
+     */
+    overlayOptions = input(undefined, ...(ngDevMode ? [{ debugName: "overlayOptions" }] : []));
+    /**
+     * The motion options.
+     * @group Props
+     */
+    motionOptions = input(undefined, ...(ngDevMode ? [{ debugName: "motionOptions" }] : []));
     /**
      * Callback to invoke on value change.
      * @param {ColorPickerChangeEvent} event - Custom value change event.
@@ -182,18 +194,16 @@ class ColorPicker extends BaseEditableHolder {
      */
     onHide = new EventEmitter();
     inputViewChild;
+    overlayViewChild;
     $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...(ngDevMode ? [{ debugName: "$appendTo" }] : []));
     value = { h: 0, s: 100, b: 100 };
     inputBgColor;
     shown;
     overlayVisible;
-    documentClickListener;
-    documentResizeListener;
     documentMousemoveListener;
     documentMouseupListener;
     documentHueMoveListener;
     scrollHandler;
-    selfClick;
     colorDragging;
     hueDragging;
     overlay;
@@ -243,6 +253,7 @@ class ColorPicker extends BaseEditableHolder {
         }
         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;
@@ -279,6 +290,7 @@ class ColorPicker extends BaseEditableHolder {
     onDragEnd() {
         this.colorDragging = false;
         this.hueDragging = false;
+        this.el.nativeElement.setAttribute('p-colorpicker-dragging', 'false');
         this.unbindDocumentMousemoveListener();
         this.unbindDocumentMouseupListener();
     }
@@ -342,64 +354,23 @@ class ColorPicker extends BaseEditableHolder {
         this.overlayVisible = true;
         this.cd.markForCheck();
     }
-    onOverlayAnimationStart(event) {
-        switch (event.toState) {
-            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);
-                    }
-                    this.alignOverlay();
-                    this.bindDocumentClickListener();
-                    this.bindDocumentResizeListener();
-                    this.bindScrollListener();
-                    this.updateColorSelector();
-                    this.updateUI();
-                }
-                break;
-            case 'void':
-                this.onOverlayHide();
-                break;
-        }
-    }
-    onOverlayAnimationEnd(event) {
-        switch (event.toState) {
-            case 'visible':
-                if (!this.inline) {
-                    this.onShow.emit({});
-                }
-                break;
-            case 'void':
-                if (this.autoZIndex) {
-                    ZIndexUtils.clear(event.element);
-                }
-                this.onHide.emit({});
-                break;
+    onOverlayBeforeEnter() {
+        if (!this.inline) {
+            this.updateColorSelector();
+            this.updateUI();
+            this.onShow.emit({});
         }
     }
-    appendOverlay() {
-        DomHandler.appendOverlay(this.overlay, this.$appendTo() === 'body' ? this.document.body : this.$appendTo(), this.$appendTo());
-    }
-    restoreOverlayAppend() {
-        if (this.overlay && this.$appendTo() !== 'self') {
-            this.renderer.appendChild(this.inputViewChild?.nativeElement, this.overlay);
+    onOverlayAfterLeave() {
+        if (!this.inline) {
+            this.onHide.emit({});
         }
     }
-    alignOverlay() {
-        if (this.$appendTo() === 'self')
-            relativePosition(this.overlay, this.inputViewChild?.nativeElement);
-        else
-            absolutePosition(this.overlay, this.inputViewChild?.nativeElement);
-    }
     hide() {
         this.overlayVisible = false;
         this.cd.markForCheck();
     }
     onInputClick() {
-        this.selfClick = true;
         this.togglePanel();
     }
     togglePanel() {
@@ -428,26 +399,6 @@ class ColorPicker extends BaseEditableHolder {
             originalEvent: event,
             target: this.el.nativeElement
         });
-        this.selfClick = true;
-    }
-    bindDocumentClickListener() {
-        if (!this.documentClickListener) {
-            const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
-            this.documentClickListener = this.renderer.listen(documentTarget, 'click', () => {
-                if (!this.selfClick) {
-                    this.overlayVisible = false;
-                    this.unbindDocumentClickListener();
-                }
-                this.selfClick = false;
-                this.cd.markForCheck();
-            });
-        }
-    }
-    unbindDocumentClickListener() {
-        if (this.documentClickListener) {
-            this.documentClickListener();
-            this.documentClickListener = null;
-        }
     }
     bindDocumentMousemoveListener() {
         if (!this.documentMousemoveListener) {
@@ -485,37 +436,6 @@ class ColorPicker extends BaseEditableHolder {
             this.documentMouseupListener = null;
         }
     }
-    bindDocumentResizeListener() {
-        if (isPlatformBrowser(this.platformId)) {
-            this.documentResizeListener = this.renderer.listen(this.document.defaultView, 'resize', this.onWindowResize.bind(this));
-        }
-    }
-    unbindDocumentResizeListener() {
-        if (this.documentResizeListener) {
-            this.documentResizeListener();
-            this.documentResizeListener = null;
-        }
-    }
-    onWindowResize() {
-        if (this.overlayVisible && !isTouchDevice()) {
-            this.hide();
-        }
-    }
-    bindScrollListener() {
-        if (!this.scrollHandler) {
-            this.scrollHandler = new ConnectedOverlayScrollHandler(this.el?.nativeElement, () => {
-                if (this.overlayVisible) {
-                    this.hide();
-                }
-            });
-        }
-        this.scrollHandler.bindScrollListener();
-    }
-    unbindScrollListener() {
-        if (this.scrollHandler) {
-            this.scrollHandler.unbindScrollListener();
-        }
-    }
     validateHSB(hsb) {
         return {
             h: Math.min(360, Math.max(0, hsb.h)),
@@ -543,6 +463,9 @@ class ColorPicker extends BaseEditableHolder {
         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 };
     }
@@ -654,12 +577,6 @@ class ColorPicker extends BaseEditableHolder {
     HSBtoHEX(hsb) {
         return this.RGBtoHEX(this.HSBtoRGB(hsb));
     }
-    onOverlayHide() {
-        this.unbindScrollListener();
-        this.unbindDocumentResizeListener();
-        this.unbindDocumentClickListener();
-        this.overlay = null;
-    }
     onAfterViewInit() {
         if (this.inline) {
             this.updateColorSelector();
@@ -698,14 +615,12 @@ class ColorPicker extends BaseEditableHolder {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
-        if (this.overlay && this.autoZIndex) {
-            ZIndexUtils.clear(this.overlay);
+        if (this.overlayViewChild?.nativeElement && this.autoZIndex) {
+            ZIndexUtils.clear(this.overlayViewChild?.nativeElement);
         }
-        this.restoreOverlayAppend();
-        this.onOverlayHide();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColorPicker, deps: [{ token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", 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)" } }, providers: [COLORPICKER_VALUE_ACCESSOR, ColorPickerStyle, { provide: COLORPICKER_INSTANCE, useExisting: ColorPicker }, { provide: PARENT_INSTANCE, useExisting: ColorPicker }], 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, hostDirectives: [{ directive: i2.Bind }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColorPicker, deps: [{ token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ColorPicker, isStandalone: true, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: { styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", 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 }, 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 }, 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 }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], 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, hostDirectives: [{ directive: i2.Bind }], ngImport: i0, template: `
         <input
             *ngIf="!inline"
             #input
@@ -723,38 +638,45 @@ class ColorPicker extends BaseEditableHolder {
             [pAutoFocus]="autofocus"
             [pBind]="ptm('preview')"
         />
-        <div
-            *ngIf="inline || overlayVisible"
-            [class]="cx('panel')"
-            (click)="onOverlayClick($event)"
-            [@overlayAnimation]="{
-                value: 'visible',
-                params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-            }"
-            [@.disabled]="inline === true"
-            (@overlayAnimation.start)="onOverlayAnimationStart($event)"
-            (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
-            [pBind]="ptm('panel')"
+
+        <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()"
         >
-            <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>
+            <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>
-                <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>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i4.AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], 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 });
+            </ng-template>
+        </p-overlay>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i4.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: i5.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: "20.3.4", ngImport: i0, type: ColorPicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColorPicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-colorPicker, p-colorpicker, p-color-picker',
                     standalone: true,
-                    imports: [CommonModule, AutoFocusModule, SharedModule, Bind],
+                    imports: [CommonModule, AutoFocusModule, SharedModule, Bind, MotionModule, OverlayModule],
                     hostDirectives: [Bind],
                     template: `
         <input
@@ -774,32 +696,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             [pAutoFocus]="autofocus"
             [pBind]="ptm('preview')"
         />
-        <div
-            *ngIf="inline || overlayVisible"
-            [class]="cx('panel')"
-            (click)="onOverlayClick($event)"
-            [@overlayAnimation]="{
-                value: 'visible',
-                params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-            }"
-            [@.disabled]="inline === true"
-            (@overlayAnimation.start)="onOverlayAnimationStart($event)"
-            (@overlayAnimation.done)="onOverlayAnimationEnd($event)"
-            [pBind]="ptm('panel')"
+
+        <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()"
         >
-            <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>
+            <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>
-                <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>
     `,
-                    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, { provide: COLORPICKER_INSTANCE, useExisting: ColorPicker }, { provide: PARENT_INSTANCE, useExisting: ColorPicker }],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
@@ -809,6 +737,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1.OverlayService }], propDecorators: { styleClass: [{
                 type: Input
+            }], showTransitionOptions: [{
+                type: Input
+            }], hideTransitionOptions: [{
+                type: Input
             }], inline: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -821,16 +753,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }], autoZIndex: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], showTransitionOptions: [{
-                type: Input
-            }], hideTransitionOptions: [{
-                type: Input
             }], autofocus: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], defaultColor: [{
                 type: Input
-            }], onChange: [{
+            }], 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: Output
             }], onShow: [{
                 type: Output
@@ -839,6 +767,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }], inputViewChild: [{
                 type: ViewChild,
                 args: ['input']
+            }], overlayViewChild: [{
+                type: ViewChild,
+                args: ['overlay']
             }], colorSelector: [{
                 type: ViewChild,
                 args: ['colorSelector']
@@ -853,11 +784,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['hueHandle']
             }] } });
 class ColorPickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: ColorPickerModule, imports: [ColorPicker, SharedModule], exports: [ColorPicker, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColorPickerModule, imports: [ColorPicker, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: ColorPickerModule, imports: [ColorPicker, SharedModule], exports: [ColorPicker, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColorPickerModule, imports: [ColorPicker, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColorPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ColorPicker, SharedModule],