primeng 20.3.0 → 21.0.0-rc.1

package/fesm2022/primeng-password.mjs

@@ -1,11 +1,10 @@
 export * from 'primeng/types/password';
-import { trigger, transition, style as style$2, animate } from '@angular/animations';
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, input, booleanAttribute, computed, signal, HostListener, Input, Directive, Pipe, forwardRef, EventEmitter, numberAttribute, ContentChildren, ContentChild, ViewChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, inject, input, booleanAttribute, computed, effect, signal, HostListener, Input, Directive, Pipe, forwardRef, EventEmitter, numberAttribute, ContentChildren, ContentChild, ViewChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { addClass, absolutePosition, removeClass, hasClass, isTouchDevice, getOuterWidth, relativePosition } from '@primeuix/utils';
+import { addClass, absolutePosition, removeClass, hasClass, isTouchDevice } from '@primeuix/utils';
 import { OverlayService, TranslationKeys, SharedModule, PrimeTemplate } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
 import { PARENT_INSTANCE } from 'primeng/basecomponent';
@@ -17,29 +16,56 @@ import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { Fluid } from 'primeng/fluid';
 import { TimesIcon, EyeSlashIcon, EyeIcon } from 'primeng/icons';
 import { InputText } from 'primeng/inputtext';
-import { ZIndexUtils } from 'primeng/utils';
+import { Overlay } from 'primeng/overlay';
 import { style as style$1 } from '@primeuix/styles/password';
 import { BaseStyle } from 'primeng/base';
 
 const style = /*css*/ `
-    ${style$1}
+${style$1}
 
-    /* For PrimeNG */
-    p-password.ng-invalid.ng-dirty .p-inputtext {
-        border-color: dt('inputtext.invalid.border.color');
-    }
+/* For PrimeNG */
+.p-password-overlay {
+    min-width: 100%;
+}
 
-    p-password.ng-invalid.ng-dirty .p-inputtext:enabled:focus {
-        border-color: dt('inputtext.focus.border.color');
-    }
+p-password.ng-invalid.ng-dirty .p-inputtext {
+    border-color: dt('inputtext.invalid.border.color');
+}
+
+p-password.ng-invalid.ng-dirty .p-inputtext:enabled:focus {
+    border-color: dt('inputtext.focus.border.color');
+}
+
+p-password.ng-invalid.ng-dirty .p-inputtext::placeholder {
+    color: dt('inputtext.invalid.placeholder.color');
+}
+
+.p-password-fluid-directive {
+    width: 100%;
+}
+
+/* Animations */
+.p-password-enter {
+    animation: p-animate-password-enter 300ms cubic-bezier(.19,1,.22,1);
+}
+
+.p-password-leave {
+    animation: p-animate-password-leave 300ms cubic-bezier(.19,1,.22,1);
+}
 
-    p-password.ng-invalid.ng-dirty .p-inputtext::placeholder {
-        color: dt('inputtext.invalid.placeholder.color');
+@keyframes p-animate-password-enter {
+    from {
+        opacity: 0;
+        transform: scale(0.93);
     }
+}
 
-    .p-password-fluid-directive {
-        width: 100%;
+@keyframes p-animate-password-leave {
+    to {
+        opacity: 0;
+        transform: scale(0.93);
     }
+}
 `;
 const inlineStyles = {
     root: ({ instance }) => ({ position: instance.$appendTo() === 'self' ? 'relative' : undefined }),
@@ -78,10 +104,10 @@ class PasswordStyle extends BaseStyle {
     style = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PasswordStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PasswordStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PasswordStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PasswordStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PasswordStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PasswordStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -143,6 +169,18 @@ class PasswordDirective extends BaseEditableHolder {
     zone;
     bindDirectiveInstance = inject(Bind, { self: true });
     $pcPasswordDirective = inject(PASSWORD_DIRECTIVE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    /**
+     * Used to pass attributes to DOM elements inside the Password component.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pPasswordPT = input(undefined, { ...(ngDevMode ? { debugName: "pPasswordPT" } : {}) });
+    /**
+     * Indicates whether the component should be rendered without styles.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pPasswordUnstyled = input(undefined, { ...(ngDevMode ? { debugName: "pPasswordUnstyled" } : {}) });
     onAfterViewChecked() {
         this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
     }
@@ -185,21 +223,21 @@ class PasswordDirective extends BaseEditableHolder {
      * @defaultValue 'outlined'
      * @group Props
      */
-    variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+    variant = input(undefined, { ...(ngDevMode ? { debugName: "variant" } : {}) });
     /**
      * Spans 100% width of the container when enabled.
      * @defaultValue false
      * @group Props
      */
-    fluid = input(undefined, ...(ngDevMode ? [{ debugName: "fluid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    fluid = input(undefined, { ...(ngDevMode ? { debugName: "fluid" } : {}), transform: booleanAttribute });
     /**
      * Specifies the size of the component.
      * @defaultValue undefined
      * @group Props
      */
-    size = input(undefined, ...(ngDevMode ? [{ debugName: "size", alias: 'pSize' }] : [{ alias: 'pSize' }]));
+    size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : {}), alias: 'pSize' });
     pcFluid = inject(Fluid, { optional: true, host: true, skipSelf: true });
-    $variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant(), ...(ngDevMode ? [{ debugName: "$variant" }] : []));
+    $variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant(), { ...(ngDevMode ? { debugName: "$variant" } : {}) });
     get hasFluid() {
         return this.fluid() ?? !!this.pcFluid;
     }
@@ -215,6 +253,13 @@ class PasswordDirective extends BaseEditableHolder {
     constructor(zone) {
         super();
         this.zone = zone;
+        effect(() => {
+            const pt = this.pPasswordPT();
+            pt && this.directivePT.set(pt);
+        });
+        effect(() => {
+            this.pPasswordUnstyled() && this.directiveUnstyled.set(this.pPasswordUnstyled());
+        });
     }
     onInput(e) {
         this.writeModelValue(this.el.nativeElement.value);
@@ -278,7 +323,7 @@ class PasswordDirective extends BaseEditableHolder {
     onBlur() {
         this.hideOverlay();
     }
-    labelSignal = signal('', ...(ngDevMode ? [{ debugName: "labelSignal" }] : []));
+    labelSignal = signal('', { ...(ngDevMode ? { debugName: "labelSignal" } : {}) });
     onKeyup(e) {
         if (this.feedback) {
             let value = e.target.value, label = null, meterPos = null;
@@ -398,10 +443,10 @@ class PasswordDirective extends BaseEditableHolder {
             this.info = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PasswordDirective, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.4", type: PasswordDirective, isStandalone: true, selector: "[pPassword]", inputs: { promptLabel: { classPropertyName: "promptLabel", publicName: "promptLabel", isSignal: false, isRequired: false, transformFunction: null }, weakLabel: { classPropertyName: "weakLabel", publicName: "weakLabel", isSignal: false, isRequired: false, transformFunction: null }, mediumLabel: { classPropertyName: "mediumLabel", publicName: "mediumLabel", isSignal: false, isRequired: false, transformFunction: null }, strongLabel: { classPropertyName: "strongLabel", publicName: "strongLabel", isSignal: false, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showPassword: { classPropertyName: "showPassword", publicName: "showPassword", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "pSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "focus": "onFocus()", "blur": "onBlur()", "keyup": "onKeyup($event)" }, properties: { "class": "cx('rootDirective')" } }, providers: [PasswordStyle, { provide: PASSWORD_DIRECTIVE_INSTANCE, useExisting: PasswordDirective }, { provide: PARENT_INSTANCE, useExisting: PasswordDirective }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PasswordDirective, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: PasswordDirective, isStandalone: true, selector: "[pPassword]", inputs: { pPasswordPT: { classPropertyName: "pPasswordPT", publicName: "pPasswordPT", isSignal: true, isRequired: false, transformFunction: null }, pPasswordUnstyled: { classPropertyName: "pPasswordUnstyled", publicName: "pPasswordUnstyled", isSignal: true, isRequired: false, transformFunction: null }, promptLabel: { classPropertyName: "promptLabel", publicName: "promptLabel", isSignal: false, isRequired: false, transformFunction: null }, weakLabel: { classPropertyName: "weakLabel", publicName: "weakLabel", isSignal: false, isRequired: false, transformFunction: null }, mediumLabel: { classPropertyName: "mediumLabel", publicName: "mediumLabel", isSignal: false, isRequired: false, transformFunction: null }, strongLabel: { classPropertyName: "strongLabel", publicName: "strongLabel", isSignal: false, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showPassword: { classPropertyName: "showPassword", publicName: "showPassword", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "pSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "focus": "onFocus()", "blur": "onBlur()", "keyup": "onKeyup($event)" }, properties: { "class": "cx('rootDirective')" } }, providers: [PasswordStyle, { provide: PASSWORD_DIRECTIVE_INSTANCE, useExisting: PasswordDirective }, { provide: PARENT_INSTANCE, useExisting: PasswordDirective }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PasswordDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PasswordDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pPassword]',
@@ -412,7 +457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     providers: [PasswordStyle, { provide: PASSWORD_DIRECTIVE_INSTANCE, useExisting: PasswordDirective }, { provide: PARENT_INSTANCE, useExisting: PasswordDirective }],
                     hostDirectives: [Bind]
                 }]
-        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { promptLabel: [{
+        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { pPasswordPT: [{ type: i0.Input, args: [{ isSignal: true, alias: "pPasswordPT", required: false }] }], pPasswordUnstyled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pPasswordUnstyled", required: false }] }], promptLabel: [{
                 type: Input
             }], weakLabel: [{
                 type: Input
@@ -425,7 +470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: [{ transform: booleanAttribute }]
             }], showPassword: [{
                 type: Input
-            }], onInput: [{
+            }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "pSize", required: false }] }], onInput: [{
                 type: HostListener,
                 args: ['input', ['$event']]
             }], onFocus: [{
@@ -442,10 +487,10 @@ class MapperPipe {
     transform(value, mapper, ...args) {
         return mapper(value, ...args);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MapperPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: MapperPipe, isStandalone: true, name: "mapper" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MapperPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: MapperPipe, isStandalone: true, name: "mapper" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MapperPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MapperPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'mapper',
@@ -553,11 +598,13 @@ class Password extends BaseInput {
     /**
      * 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';
     /**
@@ -590,7 +637,17 @@ class Password extends BaseInput {
      * @defaultValue 'self'
      * @group Props
      */
-    appendTo = input(undefined, ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
+    appendTo = input('self', { ...(ngDevMode ? { debugName: "appendTo" } : {}) });
+    /**
+     * The motion options.
+     * @group Props
+     */
+    motionOptions = input(undefined, { ...(ngDevMode ? { debugName: "motionOptions" } : {}) });
+    /**
+     * Whether to use overlay API feature. The properties of overlay API can be used like an object in it.
+     * @group Props
+     */
+    overlayOptions;
     /**
      * Callback to invoke when the component receives focus.
      * @param {Event} event - Browser event.
@@ -608,15 +665,44 @@ class Password extends BaseInput {
      * @group Emits
      */
     onClear = new EventEmitter();
+    overlayViewChild;
     input;
+    /**
+     * Custom template of content.
+     * @group Templates
+     */
     contentTemplate;
+    /**
+     * Custom template of footer.
+     * @group Templates
+     */
     footerTemplate;
+    /**
+     * Custom template of header.
+     * @group Templates
+     */
     headerTemplate;
+    /**
+     * Custom template of clear icon.
+     * @group Templates
+     */
     clearIconTemplate;
+    /**
+     * Custom template of hide icon.
+     * @param {PasswordIconTemplateContext} context - icon context.
+     * @see {@link PasswordIconTemplateContext}
+     * @group Templates
+     */
     hideIconTemplate;
+    /**
+     * Custom template of show icon.
+     * @param {PasswordIconTemplateContext} context - icon context.
+     * @see {@link PasswordIconTemplateContext}
+     * @group Templates
+     */
     showIconTemplate;
     templates;
-    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...(ngDevMode ? [{ debugName: "$appendTo" }] : []));
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), { ...(ngDevMode ? { debugName: "$appendTo" } : {}) });
     _contentTemplate;
     _footerTemplate;
     _headerTemplate;
@@ -632,7 +718,6 @@ class Password extends BaseInput {
     strongCheckRegExp;
     resizeListener;
     scrollHandler;
-    overlay;
     value = null;
     translationSubscription;
     _componentStyle = inject(PasswordStyle);
@@ -672,41 +757,6 @@ class Password extends BaseInput {
             }
         });
     }
-    onAnimationStart(event) {
-        switch (event.toState) {
-            case 'visible':
-                this.overlay = event.element;
-                ZIndexUtils.set('overlay', this.overlay, this.config.zIndex.overlay);
-                this.$attrSelector && this.overlay.setAttribute(this.$attrSelector, '');
-                this.appendContainer();
-                this.alignOverlay();
-                this.bindScrollListener();
-                this.bindResizeListener();
-                break;
-            case 'void':
-                this.unbindScrollListener();
-                this.unbindResizeListener();
-                this.overlay = null;
-                break;
-        }
-    }
-    onAnimationEnd(event) {
-        switch (event.toState) {
-            case 'void':
-                ZIndexUtils.clear(event.element);
-                break;
-        }
-    }
-    appendContainer() {
-        DomHandler.appendOverlay(this.overlay, this.$appendTo() === 'body' ? this.document.body : this.$appendTo(), this.$appendTo());
-    }
-    alignOverlay() {
-        this.overlay.style.minWidth = getOuterWidth(this.input.nativeElement) + 'px';
-        if (this.$appendTo() === 'self')
-            relativePosition(this.overlay, this.input?.nativeElement);
-        else
-            absolutePosition(this.overlay, this.input?.nativeElement);
-    }
     onInput(event) {
         this.value = event.target.value;
         this.onModelChange(this.value);
@@ -791,41 +841,6 @@ class Password extends BaseInput {
             level = 1;
         return level;
     }
-    bindScrollListener() {
-        if (isPlatformBrowser(this.platformId)) {
-            if (!this.scrollHandler) {
-                this.scrollHandler = new ConnectedOverlayScrollHandler(this.input.nativeElement, () => {
-                    if (this.overlayVisible) {
-                        this.overlayVisible = false;
-                    }
-                });
-            }
-            this.scrollHandler.bindScrollListener();
-        }
-    }
-    bindResizeListener() {
-        if (isPlatformBrowser(this.platformId)) {
-            if (!this.resizeListener) {
-                const window = this.document.defaultView;
-                this.resizeListener = this.renderer.listen(window, 'resize', () => {
-                    if (this.overlayVisible && !isTouchDevice()) {
-                        this.overlayVisible = false;
-                    }
-                });
-            }
-        }
-    }
-    unbindScrollListener() {
-        if (this.scrollHandler) {
-            this.scrollHandler.unbindScrollListener();
-        }
-    }
-    unbindResizeListener() {
-        if (this.resizeListener) {
-            this.resizeListener();
-            this.resizeListener = null;
-        }
-    }
     promptText() {
         return this.promptLabel || this.getTranslation(TranslationKeys.PASSWORD_PROMPT);
     }
@@ -838,14 +853,6 @@ class Password extends BaseInput {
     strongText() {
         return this.strongLabel || this.getTranslation(TranslationKeys.STRONG);
     }
-    restoreAppend() {
-        if (this.overlay && this.$appendTo()) {
-            if (this.$appendTo() === 'body')
-                this.renderer.removeChild(this.document.body, this.overlay);
-            else
-                this.document.getElementById(this.$appendTo()).removeChild(this.overlay);
-        }
-    }
     inputType(unmasked) {
         return unmasked ? 'text' : 'password';
     }
@@ -875,22 +882,27 @@ class Password extends BaseInput {
         this.cd.markForCheck();
     }
     onDestroy() {
-        if (this.overlay) {
-            ZIndexUtils.clear(this.overlay);
-            this.overlay = null;
-        }
-        this.restoreAppend();
-        this.unbindResizeListener();
-        if (this.scrollHandler) {
-            this.scrollHandler.destroy();
-            this.scrollHandler = null;
-        }
         if (this.translationSubscription) {
             this.translationSubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Password, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: Password, isStandalone: true, selector: "p-password", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, promptLabel: { classPropertyName: "promptLabel", publicName: "promptLabel", isSignal: false, isRequired: false, transformFunction: null }, mediumRegex: { classPropertyName: "mediumRegex", publicName: "mediumRegex", isSignal: false, isRequired: false, transformFunction: null }, strongRegex: { classPropertyName: "strongRegex", publicName: "strongRegex", isSignal: false, isRequired: false, transformFunction: null }, weakLabel: { classPropertyName: "weakLabel", publicName: "weakLabel", isSignal: false, isRequired: false, transformFunction: null }, mediumLabel: { classPropertyName: "mediumLabel", publicName: "mediumLabel", isSignal: false, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: false, isRequired: false, transformFunction: numberAttribute }, strongLabel: { classPropertyName: "strongLabel", publicName: "strongLabel", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, toggleMask: { classPropertyName: "toggleMask", publicName: "toggleMask", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", 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 }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClear: "onClear" }, host: { properties: { "class": "cn(cx('root'), styleClass)", "style": "sx('root')" } }, providers: [Password_VALUE_ACCESSOR, PasswordStyle, { provide: PASSWORD_INSTANCE, useExisting: Password }, { provide: PARENT_INSTANCE, useExisting: Password }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "hideIconTemplate", first: true, predicate: ["hideicon"] }, { propertyName: "showIconTemplate", first: true, predicate: ["showicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+    get containerDataP() {
+        return this.cn({
+            fluid: this.hasFluid
+        });
+    }
+    get meterDataP() {
+        return this.cn({
+            [this.meter?.strength]: this.meter?.strength
+        });
+    }
+    get overlayDataP() {
+        return this.cn({
+            ['overlay-' + this.$appendTo()]: 'overlay-' + this.$appendTo()
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Password, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: Password, isStandalone: true, selector: "p-password", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, promptLabel: { classPropertyName: "promptLabel", publicName: "promptLabel", isSignal: false, isRequired: false, transformFunction: null }, mediumRegex: { classPropertyName: "mediumRegex", publicName: "mediumRegex", isSignal: false, isRequired: false, transformFunction: null }, strongRegex: { classPropertyName: "strongRegex", publicName: "strongRegex", isSignal: false, isRequired: false, transformFunction: null }, weakLabel: { classPropertyName: "weakLabel", publicName: "weakLabel", isSignal: false, isRequired: false, transformFunction: null }, mediumLabel: { classPropertyName: "mediumLabel", publicName: "mediumLabel", isSignal: false, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: false, isRequired: false, transformFunction: numberAttribute }, strongLabel: { classPropertyName: "strongLabel", publicName: "strongLabel", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, feedback: { classPropertyName: "feedback", publicName: "feedback", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, toggleMask: { classPropertyName: "toggleMask", publicName: "toggleMask", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", 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 }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, overlayOptions: { classPropertyName: "overlayOptions", publicName: "overlayOptions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClear: "onClear" }, host: { properties: { "class": "cn(cx('root'), styleClass)", "style": "sx('root')", "attr.data-p": "containerDataP" } }, providers: [Password_VALUE_ACCESSOR, PasswordStyle, { provide: PASSWORD_INSTANCE, useExisting: Password }, { provide: PARENT_INSTANCE, useExisting: Password }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "hideIconTemplate", first: true, predicate: ["hideicon"] }, { propertyName: "showIconTemplate", first: true, predicate: ["showicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
         <input
             #input
             [attr.label]="label"
@@ -919,6 +931,7 @@ class Password extends BaseInput {
             (keyup)="onKeyUp($event)"
             [pAutoFocus]="autofocus"
             [pt]="ptm('pcInputText')"
+            [unstyled]="unstyled()"
         />
         <ng-container *ngIf="showClear && value != null">
             <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" [pBind]="ptm('clearIcon')" />
@@ -942,42 +955,33 @@ class Password extends BaseInput {
             </ng-container>
         </ng-container>
 
-        <div
-            #overlay
-            *ngIf="overlayVisible"
-            [class]="cx('overlay')"
-            [style]="sx('overlay')"
-            (click)="onOverlayClick($event)"
-            [@overlayAnimation]="{
-                value: 'visible',
-                params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-            }"
-            (@overlayAnimation.start)="onAnimationStart($event)"
-            (@overlayAnimation.done)="onAnimationEnd($event)"
-            [pBind]="ptm('overlay')"
-        >
-            <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
-            <ng-container *ngIf="contentTemplate || _contentTemplate; else content">
-                <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
-            </ng-container>
+        <p-overlay #overlay [hostAttrSelector]="$attrSelector" [(visible)]="overlayVisible" [options]="overlayOptions" [target]="'@parent'" [appendTo]="$appendTo()" [unstyled]="unstyled()" [pt]="ptm('pcOverlay')" [motionOptions]="motionOptions()">
             <ng-template #content>
-                <div [class]="cx('content')" [pBind]="ptm('content')">
-                    <div [class]="cx('meter')" [pBind]="ptm('meter')">
-                        <div [class]="cx('meterLabel')" [ngStyle]="{ width: meter ? meter.width : '' }" [pBind]="ptm('meterLabel')"></div>
-                    </div>
-                    <div [class]="cx('meterText')" [pBind]="ptm('meterText')">{{ infoText }}</div>
+                <div [class]="cx('overlay')" [style]="sx('overlay')" (click)="onOverlayClick($event)" [pBind]="ptm('overlay')" [attr.data-p]="overlayDataP">
+                    <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
+                    <ng-container *ngIf="contentTemplate || _contentTemplate; else defaultContent">
+                        <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
+                    </ng-container>
+                    <ng-template #defaultContent>
+                        <div [class]="cx('content')" [pBind]="ptm('content')">
+                            <div [class]="cx('meter')" [pBind]="ptm('meter')">
+                                <div [class]="cx('meterLabel')" [ngStyle]="{ width: meter ? meter.width : '' }" [pBind]="ptm('meterLabel')" [attr.data-p]="meterDataP"></div>
+                            </div>
+                            <div [class]="cx('meterText')" [pBind]="ptm('meterText')">{{ infoText }}</div>
+                        </div>
+                    </ng-template>
+                    <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
                 </div>
             </ng-template>
-            <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "component", type: EyeSlashIcon, selector: "[data-p-icon=\"eyeslash\"]" }, { kind: "component", type: EyeIcon, selector: "[data-p-icon=\"eye\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }], animations: [trigger('overlayAnimation', [transition(':enter', [style$2({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style$2({ opacity: 0 }))])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        </p-overlay>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "component", type: EyeSlashIcon, selector: "[data-p-icon=\"eyeslash\"]" }, { kind: "component", type: EyeIcon, selector: "[data-p-icon=\"eye\"]" }, { kind: "component", type: 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"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Password, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Password, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-password',
                     standalone: true,
-                    imports: [CommonModule, InputText, AutoFocus, TimesIcon, EyeSlashIcon, EyeIcon, SharedModule, BindModule],
+                    imports: [CommonModule, InputText, AutoFocus, TimesIcon, EyeSlashIcon, EyeIcon, Overlay, SharedModule, BindModule],
                     template: `
         <input
             #input
@@ -1007,6 +1011,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             (keyup)="onKeyUp($event)"
             [pAutoFocus]="autofocus"
             [pt]="ptm('pcInputText')"
+            [unstyled]="unstyled()"
         />
         <ng-container *ngIf="showClear && value != null">
             <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" [pBind]="ptm('clearIcon')" />
@@ -1030,42 +1035,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             </ng-container>
         </ng-container>
 
-        <div
-            #overlay
-            *ngIf="overlayVisible"
-            [class]="cx('overlay')"
-            [style]="sx('overlay')"
-            (click)="onOverlayClick($event)"
-            [@overlayAnimation]="{
-                value: 'visible',
-                params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-            }"
-            (@overlayAnimation.start)="onAnimationStart($event)"
-            (@overlayAnimation.done)="onAnimationEnd($event)"
-            [pBind]="ptm('overlay')"
-        >
-            <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
-            <ng-container *ngIf="contentTemplate || _contentTemplate; else content">
-                <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
-            </ng-container>
+        <p-overlay #overlay [hostAttrSelector]="$attrSelector" [(visible)]="overlayVisible" [options]="overlayOptions" [target]="'@parent'" [appendTo]="$appendTo()" [unstyled]="unstyled()" [pt]="ptm('pcOverlay')" [motionOptions]="motionOptions()">
             <ng-template #content>
-                <div [class]="cx('content')" [pBind]="ptm('content')">
-                    <div [class]="cx('meter')" [pBind]="ptm('meter')">
-                        <div [class]="cx('meterLabel')" [ngStyle]="{ width: meter ? meter.width : '' }" [pBind]="ptm('meterLabel')"></div>
-                    </div>
-                    <div [class]="cx('meterText')" [pBind]="ptm('meterText')">{{ infoText }}</div>
+                <div [class]="cx('overlay')" [style]="sx('overlay')" (click)="onOverlayClick($event)" [pBind]="ptm('overlay')" [attr.data-p]="overlayDataP">
+                    <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
+                    <ng-container *ngIf="contentTemplate || _contentTemplate; else defaultContent">
+                        <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
+                    </ng-container>
+                    <ng-template #defaultContent>
+                        <div [class]="cx('content')" [pBind]="ptm('content')">
+                            <div [class]="cx('meter')" [pBind]="ptm('meter')">
+                                <div [class]="cx('meterLabel')" [ngStyle]="{ width: meter ? meter.width : '' }" [pBind]="ptm('meterLabel')" [attr.data-p]="meterDataP"></div>
+                            </div>
+                            <div [class]="cx('meterText')" [pBind]="ptm('meterText')">{{ infoText }}</div>
+                        </div>
+                    </ng-template>
+                    <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
                 </div>
             </ng-template>
-            <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
-        </div>
+        </p-overlay>
     `,
-                    animations: [trigger('overlayAnimation', [transition(':enter', [style$2({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style$2({ opacity: 0 }))])])],
                     providers: [Password_VALUE_ACCESSOR, PasswordStyle, { provide: PASSWORD_INSTANCE, useExisting: Password }, { provide: PARENT_INSTANCE, useExisting: Password }],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         '[class]': "cn(cx('root'), styleClass)",
-                        '[style]': "sx('root')"
+                        '[style]': "sx('root')",
+                        '[attr.data-p]': 'containerDataP'
                     },
                     hostDirectives: [Bind]
                 }]
@@ -1121,12 +1117,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }], tabindex: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
+            }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], overlayOptions: [{
+                type: Input
             }], onFocus: [{
                 type: Output
             }], onBlur: [{
                 type: Output
             }], onClear: [{
                 type: Output
+            }], overlayViewChild: [{
+                type: ViewChild,
+                args: ['overlay']
             }], input: [{
                 type: ViewChild,
                 args: ['input']
@@ -1153,11 +1154,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class PasswordModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: PasswordModule, imports: [Password, PasswordDirective, SharedModule, BindModule], exports: [PasswordDirective, Password, SharedModule, BindModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PasswordModule, imports: [Password, SharedModule, BindModule, SharedModule, BindModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: PasswordModule, imports: [Password, PasswordDirective, SharedModule, BindModule], exports: [PasswordDirective, Password, SharedModule, BindModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PasswordModule, imports: [Password, SharedModule, BindModule, SharedModule, BindModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PasswordModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PasswordModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Password, PasswordDirective, SharedModule, BindModule],