primeng 19.1.3 → 20.0.0-beta.1

package/fesm2022/primeng-password.mjs

@@ -1,153 +1,84 @@
-import { trigger, transition, style, animate } from '@angular/animations';
+import { trigger, transition, style as style$1, animate } from '@angular/animations';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, signal, booleanAttribute, HostListener, Input, Directive, Pipe, forwardRef, EventEmitter, numberAttribute, ContentChildren, ContentChild, ViewChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, input, booleanAttribute, inject, computed, 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 { OverlayService, TranslationKeys, SharedModule, PrimeTemplate } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
-import { BaseComponent } from 'primeng/basecomponent';
+import { BaseEditableHolder } from 'primeng/baseeditableholder';
+import { BaseInput } from 'primeng/baseinput';
 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 { css, dt } from '@primeuix/styled';
+import { style } from '@primeuix/styles/password';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-password {
-    display: inline-flex;
-    position: relative;
-}
-
-.p-password .p-password-overlay {
-    min-width: 100%;
-}
-
-.p-password-meter {
-    height: ${dt('password.meter.height')};
-    background: ${dt('password.meter.background')};
-    border-radius: ${dt('password.meter.border.radius')};
-}
-
-.p-password-meter-label {
-    height: 100%;
-    width: 0;
-    transition: width 1s ease-in-out;
-    border-radius: ${dt('password.meter.border.radius')};
-}
-
-.p-password-meter-weak {
-    background: ${dt('password.strength.weak.background')};
-}
-
-.p-password-meter-medium {
-    background: ${dt('password.strength.medium.background')};
-}
-
-.p-password-meter-strong {
-    background: ${dt('password.strength.strong.background')};
-}
-
-.p-password-fluid {
-    display: flex;
-}
-
-.p-password-fluid .p-password-input {
-    width: 100%;
-}
-
-.p-password-input::-ms-reveal,
-.p-password-input::-ms-clear {
-    display: none;
-}
-
-.p-password-overlay {
-    position: absolute;
-    padding: ${dt('password.overlay.padding')};
-    background: ${dt('password.overlay.background')};
-    color: ${dt('password.overlay.color')};
-    border: 1px solid ${dt('password.overlay.border.color')};
-    box-shadow: ${dt('password.overlay.shadow')};
-    border-radius: ${dt('password.overlay.border.radius')};
-}
-
-.p-password-content {
-    display: flex;
-    flex-direction: column;
-    gap: ${dt('password.content.gap')};
-}
-
-.p-password-toggle-mask-icon {
-    inset-inline-end: ${dt('form.field.padding.x')};
-    color: ${dt('password.icon.color')};
-    position: absolute;
-    top: 50%;
-    margin-top: calc(-1 * calc(${dt('icon.size')} / 2));
-    width: ${dt('icon.size')};
-    height: ${dt('icon.size')};
-}
-
-.p-password:has(.p-password-toggle-mask-icon) .p-password-clear-icon,
-.p-password:has(.p-password-toggle-mask-icon) .p-password-input {
-    padding-inline-end: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
-}
+const theme = css `
+    ${style}
 
-/* For PrimeNG */
-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')};
-}
+    /* For PrimeNG */
+    p-password.ng-invalid.ng-dirty .p-inputtext {
+        border-color: ${dt('inputtext.invalid.border.color')};
+    }
 
-p-password.ng-invalid.ng-dirty .p-inputtext::placeholder {
-    color: ${dt('inputtext.invalid.placeholder.color')};
-}
+    p-password.ng-invalid.ng-dirty .p-inputtext:enabled:focus {
+        border-color: ${dt('inputtext.focus.border.color')};
+    }
 
-.p-password-clear-icon {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-    cursor: pointer;
-    inset-inline-end: ${dt('form.field.padding.x')};
-    color: ${dt('form.field.icon.color')};
-}
+    p-password.ng-invalid.ng-dirty .p-inputtext::placeholder {
+        color: ${dt('inputtext.invalid.placeholder.color')};
+    }
 
-.p-password-fluid-directive {
-    width:100%
-}
+    .p-password-fluid-directive {
+        width: 100%;
+    }
 `;
 const inlineStyles = {
-    root: ({ instance }) => ({ position: instance.appendTo === 'self' ? 'relative' : undefined })
+    root: ({ instance }) => ({ position: instance.$appendTo() === 'self' ? 'relative' : undefined }),
+    overlay: { position: 'absolute' }
 };
 const classes = {
-    root: ({ instance }) => ({
-        'p-password p-component p-inputwrapper': true,
-        'p-inputwrapper-filled': instance.filled(),
-        'p-variant-filled': 'instance.variant === "filled" || instance.config.inputVariant() === "filled" || instance.config.inputStyle() === "filled"',
-        'p-inputwrapper-focus': instance.focused,
-        'p-password-fluid': instance.hasFluid
-    }),
-    pcInput: 'p-password-input',
+    root: ({ instance }) => [
+        'p-password p-component p-inputwrapper',
+        {
+            'p-inputwrapper-filled': instance.$filled(),
+            'p-variant-filled': instance.$variant() === 'filled',
+            'p-inputwrapper-focus': instance.focused,
+            'p-password-fluid': instance.hasFluid
+        }
+    ],
+    rootDirective: ({ instance }) => [
+        'p-password p-inputtext p-component p-inputwrapper',
+        {
+            'p-inputwrapper-filled': instance.$filled(),
+            'p-variant-filled': instance.$variant() === 'filled',
+            'p-password-fluid-directive': instance.hasFluid
+        }
+    ],
+    pcInputText: 'p-password-input',
     maskIcon: 'p-password-toggle-mask-icon p-password-mask-icon',
     unmaskIcon: 'p-password-toggle-mask-icon p-password-unmask-icon',
     overlay: 'p-password-overlay p-component',
     content: 'p-password-content',
     meter: 'p-password-meter',
     meterLabel: ({ instance }) => `p-password-meter-label ${instance.meter ? 'p-password-meter-' + instance.meter.strength : ''}`,
-    meterText: 'p-password-meter-text'
+    meterText: 'p-password-meter-text',
+    clearIcon: 'p-password-clear-icon'
 };
 class PasswordStyle extends BaseStyle {
     name = 'password';
     theme = theme;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PasswordStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PasswordStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PasswordStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PasswordStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PasswordStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PasswordStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -168,7 +99,7 @@ var PasswordClasses;
     /**
      * Class name of the pt input element
      */
-    PasswordClasses["pcInput"] = "p-password-input";
+    PasswordClasses["pcInputText"] = "p-password-input";
     /**
      * Class name of the mask icon element
      */
@@ -193,16 +124,17 @@ var PasswordClasses;
      * Class name of the meter text element
      */
     PasswordClasses["meterText"] = "p-password-meter-text";
+    /**
+     * Class name of the clear icon
+     */
+    PasswordClasses["clearIcon"] = "p-password-clear-icon";
 })(PasswordClasses || (PasswordClasses = {}));
 
 /**
  * Password directive.
  * @group Components
  */
-// strengthClass(meter: any) {
-//     return `p-password-meter-label p-password-meter${meter?.strength ? `-${meter.strength}` : ''}`;
-// }
-class PasswordDirective extends BaseComponent {
+class PasswordDirective extends BaseEditableHolder {
     zone;
     /**
      * Text to prompt password entry. Defaults to PrimeNG I18N API configuration.
@@ -231,6 +163,8 @@ class PasswordDirective extends BaseComponent {
     feedback = true;
     /**
      * Sets the visibility of the password field.
+     * @defaultValue false
+     * @type boolean
      * @group Props
      */
     set showPassword(show) {
@@ -238,14 +172,27 @@ class PasswordDirective extends BaseComponent {
     }
     /**
      * Specifies the input variant of the component.
+     * @defaultValue 'outlined'
      * @group Props
      */
-    variant;
+    variant = input();
     /**
      * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     * @group Props
+     */
+    fluid = input(undefined, { transform: booleanAttribute });
+    /**
+     * Specifies the size of the component.
+     * @defaultValue undefined
      * @group Props
      */
-    fluid = false;
+    size = input(undefined, { alias: 'pSize' });
+    pcFluid = inject(Fluid, { optional: true, host: true, skipSelf: true });
+    $variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant());
+    get hasFluid() {
+        return this.fluid() ?? !!this.pcFluid;
+    }
     panel;
     meter;
     info;
@@ -255,23 +202,12 @@ class PasswordDirective extends BaseComponent {
     scrollHandler;
     documentResizeListener;
     _componentStyle = inject(PasswordStyle);
-    get hasFluid() {
-        const nativeElement = this.el.nativeElement;
-        const fluidComponent = nativeElement.closest('p-fluid');
-        return this.fluid || !!fluidComponent;
-    }
     constructor(zone) {
         super();
         this.zone = zone;
     }
-    ngDoCheck() {
-        this.updateFilledState();
-    }
     onInput(e) {
-        this.updateFilledState();
-    }
-    updateFilledState() {
-        this.filled = this.el.nativeElement.value && this.el.nativeElement.value.length;
+        this.writeModelValue(this.el.nativeElement.value);
     }
     createPanel() {
         if (isPlatformBrowser(this.platformId)) {
@@ -401,9 +337,6 @@ class PasswordDirective extends BaseComponent {
         else
             return 1 + 0.5 * (x / (x + y / 4));
     }
-    get disabled() {
-        return this.el.nativeElement.disabled;
-    }
     bindScrollListener() {
         if (!this.scrollHandler) {
             this.scrollHandler = new ConnectedOverlayScrollHandler(this.el.nativeElement, () => {
@@ -452,19 +385,16 @@ class PasswordDirective extends BaseComponent {
         }
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PasswordDirective, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.10", type: PasswordDirective, isStandalone: true, selector: "[pPassword]", inputs: { promptLabel: "promptLabel", weakLabel: "weakLabel", mediumLabel: "mediumLabel", strongLabel: "strongLabel", feedback: ["feedback", "feedback", booleanAttribute], showPassword: "showPassword", variant: "variant", fluid: ["fluid", "fluid", booleanAttribute] }, host: { listeners: { "input": "onInput($event)", "focus": "onFocus()", "blur": "onBlur()", "keyup": "onKeyup($event)" }, properties: { "class.p-inputwrapper-filled": "filled", "class.p-variant-filled": "variant === \"filled\" || config.inputStyle() === \"filled\" || config.inputVariant() === \"filled\"", "class.p-password-fluid-directive": "hasFluid" }, classAttribute: "p-password p-inputtext p-component p-inputwrapper" }, providers: [PasswordStyle], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PasswordDirective, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", 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], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PasswordDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PasswordDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pPassword]',
                     standalone: true,
                     host: {
-                        class: 'p-password p-inputtext p-component p-inputwrapper',
-                        '[class.p-inputwrapper-filled]': 'filled',
-                        '[class.p-variant-filled]': 'variant === "filled" || config.inputStyle() === "filled" || config.inputVariant() === "filled"',
-                        '[class.p-password-fluid-directive]': 'hasFluid'
+                        '[class]': "cx('rootDirective')"
                     },
                     providers: [PasswordStyle]
                 }]
@@ -481,11 +411,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], showPassword: [{
                 type: Input
-            }], variant: [{
-                type: Input
-            }], fluid: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], onInput: [{
                 type: HostListener,
                 args: ['input', ['$event']]
@@ -503,10 +428,10 @@ class MapperPipe {
     transform(value, mapper, ...args) {
         return mapper(value, ...args);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MapperPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: MapperPipe, isStandalone: true, name: "mapper" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MapperPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: MapperPipe, isStandalone: true, name: "mapper" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MapperPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MapperPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'mapper',
@@ -523,17 +448,12 @@ const Password_VALUE_ACCESSOR = {
  * Password displays strength indicator for password fields.
  * @group Components
  */
-class Password extends BaseComponent {
+class Password extends BaseInput {
     /**
      * Defines a string that labels the input for accessibility.
      * @group Props
      */
     ariaLabel;
-    /**
-     * Whether the component should span the full width of its parent.
-     * @group Props
-     */
-    fluid;
     /**
      * Specifies one or more IDs in the DOM that labels the input field.
      * @group Props
@@ -544,11 +464,6 @@ class Password extends BaseComponent {
      * @group Props
      */
     label;
-    /**
-     * Indicates whether the component is disabled or not.
-     * @group Props
-     */
-    disabled;
     /**
      * Text to prompt password entry. Defaults to PrimeNG I18N API configuration.
      * @group Props
@@ -576,6 +491,7 @@ class Password extends BaseComponent {
     mediumLabel;
     /**
      * specifies the maximum number of characters allowed in the input element.
+     * @deprecated since v20.0.0, use maxlength instead.
      * @group Props
      */
     maxLength;
@@ -594,21 +510,11 @@ class Password extends BaseComponent {
      * @group Props
      */
     feedback = true;
-    /**
-     * Id of the element or "body" for document where the overlay should be appended to.
-     * @group Props
-     */
-    appendTo;
     /**
      * Whether to show an icon to display the password as plain text.
      * @group Props
      */
     toggleMask;
-    /**
-     * Defines the size of the component.
-     * @group Props
-     */
-    size;
     /**
      * Style class of the input field.
      * @group Props
@@ -616,14 +522,10 @@ class Password extends BaseComponent {
     inputStyleClass;
     /**
      * Style class of the element.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
-    /**
-     * Inline style of the component.
-     * @group Props
-     */
-    style;
     /**
      * Inline style of the input field.
      * @group Props
@@ -660,15 +562,16 @@ class Password extends BaseComponent {
      */
     autofocus;
     /**
-     * Specifies the input variant of the component.
+     * Index of the element in tabbing order.
      * @group Props
      */
-    variant;
+    tabindex;
     /**
-     * Index of the element in tabbing order.
+     * 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
      */
-    tabindex;
+    appendTo = input(undefined);
     /**
      * Callback to invoke when the component receives focus.
      * @param {Event} event - Browser event.
@@ -694,6 +597,7 @@ class Password extends BaseComponent {
     hideIconTemplate;
     showIconTemplate;
     templates;
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo());
     _contentTemplate;
     _footerTemplate;
     _headerTemplate;
@@ -715,11 +619,6 @@ class Password extends BaseComponent {
     onModelTouched = () => { };
     translationSubscription;
     _componentStyle = inject(PasswordStyle);
-    get hasFluid() {
-        const nativeElement = this.el.nativeElement;
-        const fluidComponent = nativeElement.closest('p-fluid');
-        return this.fluid || !!fluidComponent;
-    }
     overlayService = inject(OverlayService);
     ngOnInit() {
         super.ngOnInit();
@@ -762,6 +661,7 @@ class Password extends BaseComponent {
             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();
@@ -782,21 +682,14 @@ class Password extends BaseComponent {
         }
     }
     appendContainer() {
-        if (this.appendTo) {
-            if (this.appendTo === 'body')
-                this.renderer.appendChild(this.document.body, this.overlay);
-            else
-                this.document.getElementById(this.appendTo).appendChild(this.overlay);
-        }
+        DomHandler.appendOverlay(this.overlay, this.$appendTo() === 'body' ? this.document.body : this.$appendTo(), this.$appendTo());
     }
     alignOverlay() {
-        if (this.appendTo) {
-            this.overlay.style.minWidth = getOuterWidth(this.input.nativeElement) + 'px';
-            absolutePosition(this.overlay, this.input.nativeElement);
-        }
-        else {
-            relativePosition(this.overlay, this.input.nativeElement);
-        }
+        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;
@@ -889,6 +782,7 @@ class Password extends BaseComponent {
             this.value = value;
         if (this.feedback)
             this.updateUI(this.value || '');
+        this.writeModelValue(this.value);
         this.cd.markForCheck();
     }
     registerOnChange(fn) {
@@ -897,10 +791,6 @@ class Password extends BaseComponent {
     registerOnTouched(fn) {
         this.onModelTouched = fn;
     }
-    setDisabledState(val) {
-        this.disabled = val;
-        this.cd.markForCheck();
-    }
     bindScrollListener() {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.scrollHandler) {
@@ -936,21 +826,6 @@ class Password extends BaseComponent {
             this.resizeListener = null;
         }
     }
-    containerClass(toggleMask) {
-        return { 'p-password p-component p-inputwrapper': true, 'p-input-icon-right': toggleMask };
-    }
-    get rootClass() {
-        return this._componentStyle.classes.root({ instance: this });
-    }
-    inputFieldClass(disabled) {
-        return { 'p-password-input': true, 'p-disabled': disabled };
-    }
-    strengthClass(meter) {
-        return `p-password-meter-label p-password-meter${meter?.strength ? `-${meter.strength}` : ''}`;
-    }
-    filled() {
-        return this.value != null && this.value.toString().length > 0;
-    }
     promptText() {
         return this.promptLabel || this.getTranslation(TranslationKeys.PASSWORD_PROMPT);
     }
@@ -964,11 +839,11 @@ class Password extends BaseComponent {
         return this.strongLabel || this.getTranslation(TranslationKeys.STRONG);
     }
     restoreAppend() {
-        if (this.overlay && this.appendTo) {
-            if (this.appendTo === 'body')
+        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);
+                this.document.getElementById(this.$appendTo()).removeChild(this.overlay);
         }
     }
     inputType(unmasked) {
@@ -999,189 +874,193 @@ class Password extends BaseComponent {
         }
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Password, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: Password, isStandalone: true, selector: "p-password", inputs: { ariaLabel: "ariaLabel", fluid: ["fluid", "fluid", booleanAttribute], ariaLabelledBy: "ariaLabelledBy", label: "label", disabled: ["disabled", "disabled", booleanAttribute], promptLabel: "promptLabel", mediumRegex: "mediumRegex", strongRegex: "strongRegex", weakLabel: "weakLabel", mediumLabel: "mediumLabel", maxLength: ["maxLength", "maxLength", numberAttribute], strongLabel: "strongLabel", inputId: "inputId", feedback: ["feedback", "feedback", booleanAttribute], appendTo: "appendTo", toggleMask: ["toggleMask", "toggleMask", booleanAttribute], size: "size", inputStyleClass: "inputStyleClass", styleClass: "styleClass", style: "style", inputStyle: "inputStyle", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autocomplete: "autocomplete", placeholder: "placeholder", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], variant: "variant", tabindex: ["tabindex", "tabindex", numberAttribute] }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClear: "onClear" }, providers: [Password_VALUE_ACCESSOR, PasswordStyle], 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, ngImport: i0, template: `
-        <div [ngClass]="rootClass" [ngStyle]="style" [class]="styleClass" [attr.data-pc-name]="'password'" [attr.data-pc-section]="'root'">
-            <input
-                #input
-                [attr.label]="label"
-                [attr.aria-label]="ariaLabel"
-                [attr.aria-labelledBy]="ariaLabelledBy"
-                [attr.id]="inputId"
-                [attr.tabindex]="tabindex"
-                pInputText
-                [disabled]="disabled"
-                [pSize]="size"
-                [ngClass]="disabled | mapper: inputFieldClass"
-                [ngStyle]="inputStyle"
-                [class]="inputStyleClass"
-                [attr.type]="unmasked | mapper: inputType"
-                [attr.placeholder]="placeholder"
-                [attr.autocomplete]="autocomplete"
-                [value]="value"
-                [variant]="variant"
-                (input)="onInput($event)"
-                (focus)="onInputFocus($event)"
-                (blur)="onInputBlur($event)"
-                (keyup)="onKeyUp($event)"
-                [attr.maxlength]="maxLength"
-                [attr.data-pc-section]="'input'"
-                [pAutoFocus]="autofocus"
-            />
-            <ng-container *ngIf="showClear && value != null">
-                <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" class="p-password-clear-icon" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
-                <span (click)="clear()" class="p-password-clear-icon" [attr.data-pc-section]="'clearIcon'">
-                    <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Password, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", 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: { attributes: { "data-pc-name": "password", "data-pc-section": "root" }, properties: { "class": "cn(cx('root'), styleClass)", "style": "sx('root')" } }, providers: [Password_VALUE_ACCESSOR, PasswordStyle], 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, ngImport: i0, template: `
+        <input
+            #input
+            [attr.label]="label"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-labelledBy]="ariaLabelledBy"
+            [attr.id]="inputId"
+            [attr.tabindex]="tabindex"
+            pInputText
+            [pSize]="size()"
+            [ngStyle]="inputStyle"
+            [class]="cn(cx('pcInputText'), inputStyleClass)"
+            [attr.type]="unmasked | mapper: inputType"
+            [attr.placeholder]="placeholder"
+            [attr.autocomplete]="autocomplete"
+            [value]="value"
+            [variant]="$variant()"
+            [attr.name]="name()"
+            [attr.maxlength]="maxlength() || maxLength"
+            [attr.minlength]="minlength()"
+            [attr.required]="required() ? '' : undefined"
+            [attr.disabled]="disabled() ? '' : undefined"
+            [invalid]="invalid()"
+            (input)="onInput($event)"
+            (focus)="onInputFocus($event)"
+            (blur)="onInputBlur($event)"
+            (keyup)="onKeyUp($event)"
+            [attr.data-pc-section]="'input'"
+            [pAutoFocus]="autofocus"
+        />
+        <ng-container *ngIf="showClear && value != null">
+            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
+            <span (click)="clear()" [class]="cx('clearIcon')" [attr.data-pc-section]="'clearIcon'">
+                <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
+            </span>
+        </ng-container>
+
+        <ng-container *ngIf="toggleMask">
+            <ng-container *ngIf="unmasked">
+                <EyeSlashIcon [class]="cx('maskIcon')" *ngIf="!hideIconTemplate && !_hideIconTemplate" (click)="onMaskToggle()" [attr.data-pc-section]="'hideIcon'" />
+                <span *ngIf="hideIconTemplate || _hideIconTemplate" (click)="onMaskToggle()">
+                    <ng-template *ngTemplateOutlet="hideIconTemplate || _hideIconTemplate; context: { class: cx('maskIcon') }"></ng-template>
                 </span>
             </ng-container>
-
-            <ng-container *ngIf="toggleMask">
-                <ng-container *ngIf="unmasked">
-                    <EyeSlashIcon class="p-password-toggle-mask-icon p-password-mask-icon" *ngIf="!hideIconTemplate && !_hideIconTemplate" (click)="onMaskToggle()" [attr.data-pc-section]="'hideIcon'" />
-                    <span *ngIf="hideIconTemplate || _hideIconTemplate" (click)="onMaskToggle()">
-                        <ng-template *ngTemplateOutlet="hideIconTemplate || _hideIconTemplate; context: { class: 'p-password-toggle-mask-icon p-password-mask-icon' }"></ng-template>
-                    </span>
-                </ng-container>
-                <ng-container *ngIf="!unmasked">
-                    <EyeIcon *ngIf="!showIconTemplate && !_showIconTemplate" class="p-password-toggle-mask-icon p-password-mask-icon" (click)="onMaskToggle()" [attr.data-pc-section]="'showIcon'" />
-                    <span *ngIf="showIconTemplate || _showIconTemplate" (click)="onMaskToggle()">
-                        <ng-template *ngTemplateOutlet="showIconTemplate || _showIconTemplate"></ng-template>
-                    </span>
-                </ng-container>
+            <ng-container *ngIf="!unmasked">
+                <EyeIcon *ngIf="!showIconTemplate && !_showIconTemplate" [class]="cx('unmaskIcon')" (click)="onMaskToggle()" [attr.data-pc-section]="'showIcon'" />
+                <span *ngIf="showIconTemplate || _showIconTemplate" (click)="onMaskToggle()">
+                    <ng-template *ngTemplateOutlet="showIconTemplate || _showIconTemplate; context: { class: cx('unmaskIcon') }"></ng-template>
+                </span>
             </ng-container>
+        </ng-container>
 
-            <div
-                #overlay
-                *ngIf="overlayVisible"
-                class="p-password-overlay p-component"
-                (click)="onOverlayClick($event)"
-                [@overlayAnimation]="{
-                    value: 'visible',
-                    params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-                }"
-                (@overlayAnimation.start)="onAnimationStart($event)"
-                (@overlayAnimation.done)="onAnimationEnd($event)"
-                [attr.data-pc-section]="'panel'"
-            >
-                <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
-                <ng-container *ngIf="contentTemplate || _contentTemplate; else content">
-                    <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
-                </ng-container>
-                <ng-template #content>
-                    <div class="p-password-content">
-                        <div class="p-password-meter" [attr.data-pc-section]="'meter'">
-                            <div [ngClass]="meter | mapper: strengthClass" [ngStyle]="{ width: meter ? meter.width : '' }" [attr.data-pc-section]="'meterLabel'"></div>
-                        </div>
-                        <div class="p-password-meter-text" [attr.data-pc-section]="'info'">{{ infoText }}</div>
+        <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)"
+            [attr.data-pc-section]="'panel'"
+        >
+            <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
+            <ng-container *ngIf="contentTemplate || _contentTemplate; else content">
+                <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
+            </ng-container>
+            <ng-template #content>
+                <div [class]="cx('content')">
+                    <div [class]="cx('meter')" [attr.data-pc-section]="'meter'">
+                        <div [class]="cx('meterLabel')" [ngStyle]="{ width: meter ? meter.width : '' }" [attr.data-pc-section]="'meterLabel'"></div>
                     </div>
-                </ng-template>
-                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
-            </div>
+                    <div [class]="cx('meterText')" [attr.data-pc-section]="'info'">{{ infoText }}</div>
+                </div>
+            </ng-template>
+            <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus", "pAutoFocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: EyeSlashIcon, selector: "EyeSlashIcon" }, { kind: "component", type: EyeIcon, selector: "EyeIcon" }, { kind: "pipe", type: MapperPipe, name: "mapper" }, { 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: EyeSlashIcon, selector: "EyeSlashIcon" }, { kind: "component", type: EyeIcon, selector: "EyeIcon" }, { kind: "pipe", type: MapperPipe, name: "mapper" }, { 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.10", ngImport: i0, type: Password, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Password, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-password',
                     standalone: true,
                     imports: [CommonModule, InputText, AutoFocus, TimesIcon, EyeSlashIcon, EyeIcon, MapperPipe, SharedModule],
                     template: `
-        <div [ngClass]="rootClass" [ngStyle]="style" [class]="styleClass" [attr.data-pc-name]="'password'" [attr.data-pc-section]="'root'">
-            <input
-                #input
-                [attr.label]="label"
-                [attr.aria-label]="ariaLabel"
-                [attr.aria-labelledBy]="ariaLabelledBy"
-                [attr.id]="inputId"
-                [attr.tabindex]="tabindex"
-                pInputText
-                [disabled]="disabled"
-                [pSize]="size"
-                [ngClass]="disabled | mapper: inputFieldClass"
-                [ngStyle]="inputStyle"
-                [class]="inputStyleClass"
-                [attr.type]="unmasked | mapper: inputType"
-                [attr.placeholder]="placeholder"
-                [attr.autocomplete]="autocomplete"
-                [value]="value"
-                [variant]="variant"
-                (input)="onInput($event)"
-                (focus)="onInputFocus($event)"
-                (blur)="onInputBlur($event)"
-                (keyup)="onKeyUp($event)"
-                [attr.maxlength]="maxLength"
-                [attr.data-pc-section]="'input'"
-                [pAutoFocus]="autofocus"
-            />
-            <ng-container *ngIf="showClear && value != null">
-                <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" class="p-password-clear-icon" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
-                <span (click)="clear()" class="p-password-clear-icon" [attr.data-pc-section]="'clearIcon'">
-                    <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
+        <input
+            #input
+            [attr.label]="label"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-labelledBy]="ariaLabelledBy"
+            [attr.id]="inputId"
+            [attr.tabindex]="tabindex"
+            pInputText
+            [pSize]="size()"
+            [ngStyle]="inputStyle"
+            [class]="cn(cx('pcInputText'), inputStyleClass)"
+            [attr.type]="unmasked | mapper: inputType"
+            [attr.placeholder]="placeholder"
+            [attr.autocomplete]="autocomplete"
+            [value]="value"
+            [variant]="$variant()"
+            [attr.name]="name()"
+            [attr.maxlength]="maxlength() || maxLength"
+            [attr.minlength]="minlength()"
+            [attr.required]="required() ? '' : undefined"
+            [attr.disabled]="disabled() ? '' : undefined"
+            [invalid]="invalid()"
+            (input)="onInput($event)"
+            (focus)="onInputFocus($event)"
+            (blur)="onInputBlur($event)"
+            (keyup)="onKeyUp($event)"
+            [attr.data-pc-section]="'input'"
+            [pAutoFocus]="autofocus"
+        />
+        <ng-container *ngIf="showClear && value != null">
+            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
+            <span (click)="clear()" [class]="cx('clearIcon')" [attr.data-pc-section]="'clearIcon'">
+                <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
+            </span>
+        </ng-container>
+
+        <ng-container *ngIf="toggleMask">
+            <ng-container *ngIf="unmasked">
+                <EyeSlashIcon [class]="cx('maskIcon')" *ngIf="!hideIconTemplate && !_hideIconTemplate" (click)="onMaskToggle()" [attr.data-pc-section]="'hideIcon'" />
+                <span *ngIf="hideIconTemplate || _hideIconTemplate" (click)="onMaskToggle()">
+                    <ng-template *ngTemplateOutlet="hideIconTemplate || _hideIconTemplate; context: { class: cx('maskIcon') }"></ng-template>
                 </span>
             </ng-container>
-
-            <ng-container *ngIf="toggleMask">
-                <ng-container *ngIf="unmasked">
-                    <EyeSlashIcon class="p-password-toggle-mask-icon p-password-mask-icon" *ngIf="!hideIconTemplate && !_hideIconTemplate" (click)="onMaskToggle()" [attr.data-pc-section]="'hideIcon'" />
-                    <span *ngIf="hideIconTemplate || _hideIconTemplate" (click)="onMaskToggle()">
-                        <ng-template *ngTemplateOutlet="hideIconTemplate || _hideIconTemplate; context: { class: 'p-password-toggle-mask-icon p-password-mask-icon' }"></ng-template>
-                    </span>
-                </ng-container>
-                <ng-container *ngIf="!unmasked">
-                    <EyeIcon *ngIf="!showIconTemplate && !_showIconTemplate" class="p-password-toggle-mask-icon p-password-mask-icon" (click)="onMaskToggle()" [attr.data-pc-section]="'showIcon'" />
-                    <span *ngIf="showIconTemplate || _showIconTemplate" (click)="onMaskToggle()">
-                        <ng-template *ngTemplateOutlet="showIconTemplate || _showIconTemplate"></ng-template>
-                    </span>
-                </ng-container>
+            <ng-container *ngIf="!unmasked">
+                <EyeIcon *ngIf="!showIconTemplate && !_showIconTemplate" [class]="cx('unmaskIcon')" (click)="onMaskToggle()" [attr.data-pc-section]="'showIcon'" />
+                <span *ngIf="showIconTemplate || _showIconTemplate" (click)="onMaskToggle()">
+                    <ng-template *ngTemplateOutlet="showIconTemplate || _showIconTemplate; context: { class: cx('unmaskIcon') }"></ng-template>
+                </span>
             </ng-container>
+        </ng-container>
 
-            <div
-                #overlay
-                *ngIf="overlayVisible"
-                class="p-password-overlay p-component"
-                (click)="onOverlayClick($event)"
-                [@overlayAnimation]="{
-                    value: 'visible',
-                    params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
-                }"
-                (@overlayAnimation.start)="onAnimationStart($event)"
-                (@overlayAnimation.done)="onAnimationEnd($event)"
-                [attr.data-pc-section]="'panel'"
-            >
-                <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
-                <ng-container *ngIf="contentTemplate || _contentTemplate; else content">
-                    <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
-                </ng-container>
-                <ng-template #content>
-                    <div class="p-password-content">
-                        <div class="p-password-meter" [attr.data-pc-section]="'meter'">
-                            <div [ngClass]="meter | mapper: strengthClass" [ngStyle]="{ width: meter ? meter.width : '' }" [attr.data-pc-section]="'meterLabel'"></div>
-                        </div>
-                        <div class="p-password-meter-text" [attr.data-pc-section]="'info'">{{ infoText }}</div>
+        <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)"
+            [attr.data-pc-section]="'panel'"
+        >
+            <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
+            <ng-container *ngIf="contentTemplate || _contentTemplate; else content">
+                <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
+            </ng-container>
+            <ng-template #content>
+                <div [class]="cx('content')">
+                    <div [class]="cx('meter')" [attr.data-pc-section]="'meter'">
+                        <div [class]="cx('meterLabel')" [ngStyle]="{ width: meter ? meter.width : '' }" [attr.data-pc-section]="'meterLabel'"></div>
                     </div>
-                </ng-template>
-                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
-            </div>
+                    <div [class]="cx('meterText')" [attr.data-pc-section]="'info'">{{ infoText }}</div>
+                </div>
+            </ng-template>
+            <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
         </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: [Password_VALUE_ACCESSOR, PasswordStyle],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass)",
+                        '[style]': "sx('root')",
+                        'data-pc-name': 'password',
+                        'data-pc-section': 'root'
+                    }
                 }]
         }], propDecorators: { ariaLabel: [{
                 type: Input
-            }], fluid: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], ariaLabelledBy: [{
                 type: Input
             }], label: [{
                 type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], promptLabel: [{
                 type: Input
             }], mediumRegex: [{
@@ -1202,19 +1081,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], feedback: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], appendTo: [{
-                type: Input
             }], toggleMask: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], size: [{
-                type: Input
             }], inputStyleClass: [{
                 type: Input
             }], styleClass: [{
                 type: Input
-            }], style: [{
-                type: Input
             }], inputStyle: [{
                 type: Input
             }], showTransitionOptions: [{
@@ -1231,8 +1104,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], autofocus: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], variant: [{
-                type: Input
             }], tabindex: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
@@ -1268,11 +1139,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: [PrimeTemplate]
             }] } });
 class PasswordModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: PasswordModule, imports: [Password, PasswordDirective, SharedModule], exports: [PasswordDirective, Password, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PasswordModule, imports: [Password, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: PasswordModule, imports: [Password, PasswordDirective, SharedModule], exports: [PasswordDirective, Password, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PasswordModule, imports: [Password, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: PasswordModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: PasswordModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Password, PasswordDirective, SharedModule],