primeng 20.2.0 → 20.3.0-rc.1

package/fesm2022/primeng-password.mjs

@@ -1,24 +1,28 @@
-import { trigger, transition, style as style$1, animate } from '@angular/animations';
-import * as i1 from '@angular/common';
+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, input, booleanAttribute, inject, 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, 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 { PARENT_INSTANCE } from 'primeng/basecomponent';
 import { BaseEditableHolder } from 'primeng/baseeditableholder';
 import { BaseInput } from 'primeng/baseinput';
+import * as i1 from 'primeng/bind';
+import { Bind, BindModule } from 'primeng/bind';
 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 { style } from '@primeuix/styles/password';
+import { style as style$1 } from '@primeuix/styles/password';
 import { BaseStyle } from 'primeng/base';
 
-const theme = /*css*/ `
-    ${style}
+const style = /*css*/ `
+    ${style$1}
 
     /* For PrimeNG */
     p-password.ng-invalid.ng-dirty .p-inputtext {
@@ -71,13 +75,13 @@ const classes = {
 };
 class PasswordStyle extends BaseStyle {
     name = 'password';
-    theme = theme;
+    style = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PasswordStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PasswordStyle });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PasswordStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PasswordStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -129,12 +133,19 @@ var PasswordClasses;
     PasswordClasses["clearIcon"] = "p-password-clear-icon";
 })(PasswordClasses || (PasswordClasses = {}));
 
+const PASSWORD_DIRECTIVE_INSTANCE = new InjectionToken('PASSWORD_DIRECTIVE_INSTANCE');
+const PASSWORD_INSTANCE = new InjectionToken('PASSWORD_INSTANCE');
 /**
  * Password directive.
  * @group Components
  */
 class PasswordDirective extends BaseEditableHolder {
     zone;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pcPasswordDirective = inject(PASSWORD_DIRECTIVE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
     /**
      * Text to prompt password entry. Defaults to PrimeNG I18N API configuration.
      * @group Props
@@ -256,7 +267,7 @@ class PasswordDirective extends BaseEditableHolder {
             this.unbindDocumentResizeListener();
             this.zone.runOutsideAngular(() => {
                 setTimeout(() => {
-                    this.ngOnDestroy();
+                    this.onDestroy();
                 }, 150);
             });
         }
@@ -374,7 +385,7 @@ class PasswordDirective extends BaseEditableHolder {
             this.hideOverlay();
         }
     }
-    ngOnDestroy() {
+    onDestroy() {
         if (this.panel) {
             if (this.scrollHandler) {
                 this.scrollHandler.destroy();
@@ -386,12 +397,11 @@ class PasswordDirective extends BaseEditableHolder {
             this.meter = null;
             this.info = null;
         }
-        super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PasswordDirective, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.2", 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 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PasswordDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PasswordDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pPassword]',
@@ -399,7 +409,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                     host: {
                         '[class]': "cx('rootDirective')"
                     },
-                    providers: [PasswordStyle]
+                    providers: [PasswordStyle, { provide: PASSWORD_DIRECTIVE_INSTANCE, useExisting: PasswordDirective }, { provide: PARENT_INSTANCE, useExisting: PasswordDirective }],
+                    hostDirectives: [Bind]
                 }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { promptLabel: [{
                 type: Input
@@ -431,10 +442,10 @@ class MapperPipe {
     transform(value, mapper, ...args) {
         return mapper(value, ...args);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MapperPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: MapperPipe, isStandalone: true, name: "mapper" });
+    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" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MapperPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MapperPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'mapper',
@@ -452,6 +463,11 @@ const Password_VALUE_ACCESSOR = {
  * @group Components
  */
 class Password extends BaseInput {
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pcPassword = inject(PASSWORD_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
     /**
      * Defines a string that labels the input for accessibility.
      * @group Props
@@ -621,8 +637,7 @@ class Password extends BaseInput {
     translationSubscription;
     _componentStyle = inject(PasswordStyle);
     overlayService = inject(OverlayService);
-    ngOnInit() {
-        super.ngOnInit();
+    onInit() {
         this.infoText = this.promptText();
         this.mediumCheckRegExp = new RegExp(this.mediumRegex);
         this.strongCheckRegExp = new RegExp(this.strongRegex);
@@ -630,7 +645,7 @@ class Password extends BaseInput {
             this.updateUI(this.value || '');
         });
     }
-    ngAfterContentInit() {
+    onAfterContentInit() {
         this.templates.forEach((item) => {
             switch (item.getType()) {
                 case 'content':
@@ -662,7 +677,7 @@ class Password extends BaseInput {
             case 'visible':
                 this.overlay = event.element;
                 ZIndexUtils.set('overlay', this.overlay, this.config.zIndex.overlay);
-                this.attrSelector && this.overlay.setAttribute(this.attrSelector, '');
+                this.$attrSelector && this.overlay.setAttribute(this.$attrSelector, '');
                 this.appendContainer();
                 this.alignOverlay();
                 this.bindScrollListener();
@@ -859,7 +874,7 @@ class Password extends BaseInput {
         setModelValue(this.value);
         this.cd.markForCheck();
     }
-    ngOnDestroy() {
+    onDestroy() {
         if (this.overlay) {
             ZIndexUtils.clear(this.overlay);
             this.overlay = null;
@@ -873,10 +888,9 @@ class Password extends BaseInput {
         if (this.translationSubscription) {
             this.translationSubscription.unsubscribe();
         }
-        super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Password, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", 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: `
+    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: `
         <input
             #input
             [attr.label]="label"
@@ -903,26 +917,26 @@ class Password extends BaseInput {
             (focus)="onInputFocus($event)"
             (blur)="onInputBlur($event)"
             (keyup)="onKeyUp($event)"
-            [attr.data-pc-section]="'input'"
             [pAutoFocus]="autofocus"
+            [pt]="ptm('pcInputText')"
         />
         <ng-container *ngIf="showClear && value != null">
-            <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
-            <span (click)="clear()" [class]="cx('clearIcon')" [attr.data-pc-section]="'clearIcon'">
+            <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" [pBind]="ptm('clearIcon')" />
+            <span (click)="clear()" [class]="cx('clearIcon')" [pBind]="ptm('clearIcon')">
                 <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
             </span>
         </ng-container>
 
         <ng-container *ngIf="toggleMask">
             <ng-container *ngIf="unmasked">
-                <svg data-p-icon="eyeslash" [class]="cx('maskIcon')" *ngIf="!hideIconTemplate && !_hideIconTemplate" (click)="onMaskToggle()" [attr.data-pc-section]="'hideIcon'" />
-                <span *ngIf="hideIconTemplate || _hideIconTemplate" (click)="onMaskToggle()">
+                <svg data-p-icon="eyeslash" [class]="cx('maskIcon')" [pBind]="ptm('maskIcon')" *ngIf="!hideIconTemplate && !_hideIconTemplate" (click)="onMaskToggle()" />
+                <span *ngIf="hideIconTemplate || _hideIconTemplate" (click)="onMaskToggle()" [pBind]="ptm('maskIcon')">
                     <ng-template *ngTemplateOutlet="hideIconTemplate || _hideIconTemplate; context: { class: cx('maskIcon') }"></ng-template>
                 </span>
             </ng-container>
             <ng-container *ngIf="!unmasked">
-                <svg data-p-icon="eye" *ngIf="!showIconTemplate && !_showIconTemplate" [class]="cx('unmaskIcon')" (click)="onMaskToggle()" [attr.data-pc-section]="'showIcon'" />
-                <span *ngIf="showIconTemplate || _showIconTemplate" (click)="onMaskToggle()">
+                <svg data-p-icon="eye" *ngIf="!showIconTemplate && !_showIconTemplate" [class]="cx('unmaskIcon')" [pBind]="ptm('unmaskIcon')" (click)="onMaskToggle()" />
+                <span *ngIf="showIconTemplate || _showIconTemplate" (click)="onMaskToggle()" [pBind]="ptm('unmaskIcon')">
                     <ng-template *ngTemplateOutlet="showIconTemplate || _showIconTemplate; context: { class: cx('unmaskIcon') }"></ng-template>
                 </span>
             </ng-container>
@@ -940,30 +954,30 @@ class Password extends BaseInput {
             }"
             (@overlayAnimation.start)="onAnimationStart($event)"
             (@overlayAnimation.done)="onAnimationEnd($event)"
-            [attr.data-pc-section]="'panel'"
+            [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>
             <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 [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')" [attr.data-pc-section]="'info'">{{ infoText }}</div>
+                    <div [class]="cx('meterText')" [pBind]="ptm('meterText')">{{ infoText }}</div>
                 </div>
             </ng-template>
             <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
         </div>
-    `, 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", "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 }], 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 });
+    `, 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Password, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Password, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-password',
                     standalone: true,
-                    imports: [CommonModule, InputText, AutoFocus, TimesIcon, EyeSlashIcon, EyeIcon, SharedModule],
+                    imports: [CommonModule, InputText, AutoFocus, TimesIcon, EyeSlashIcon, EyeIcon, SharedModule, BindModule],
                     template: `
         <input
             #input
@@ -991,26 +1005,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
             (focus)="onInputFocus($event)"
             (blur)="onInputBlur($event)"
             (keyup)="onKeyUp($event)"
-            [attr.data-pc-section]="'input'"
             [pAutoFocus]="autofocus"
+            [pt]="ptm('pcInputText')"
         />
         <ng-container *ngIf="showClear && value != null">
-            <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
-            <span (click)="clear()" [class]="cx('clearIcon')" [attr.data-pc-section]="'clearIcon'">
+            <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" [pBind]="ptm('clearIcon')" />
+            <span (click)="clear()" [class]="cx('clearIcon')" [pBind]="ptm('clearIcon')">
                 <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
             </span>
         </ng-container>
 
         <ng-container *ngIf="toggleMask">
             <ng-container *ngIf="unmasked">
-                <svg data-p-icon="eyeslash" [class]="cx('maskIcon')" *ngIf="!hideIconTemplate && !_hideIconTemplate" (click)="onMaskToggle()" [attr.data-pc-section]="'hideIcon'" />
-                <span *ngIf="hideIconTemplate || _hideIconTemplate" (click)="onMaskToggle()">
+                <svg data-p-icon="eyeslash" [class]="cx('maskIcon')" [pBind]="ptm('maskIcon')" *ngIf="!hideIconTemplate && !_hideIconTemplate" (click)="onMaskToggle()" />
+                <span *ngIf="hideIconTemplate || _hideIconTemplate" (click)="onMaskToggle()" [pBind]="ptm('maskIcon')">
                     <ng-template *ngTemplateOutlet="hideIconTemplate || _hideIconTemplate; context: { class: cx('maskIcon') }"></ng-template>
                 </span>
             </ng-container>
             <ng-container *ngIf="!unmasked">
-                <svg data-p-icon="eye" *ngIf="!showIconTemplate && !_showIconTemplate" [class]="cx('unmaskIcon')" (click)="onMaskToggle()" [attr.data-pc-section]="'showIcon'" />
-                <span *ngIf="showIconTemplate || _showIconTemplate" (click)="onMaskToggle()">
+                <svg data-p-icon="eye" *ngIf="!showIconTemplate && !_showIconTemplate" [class]="cx('unmaskIcon')" [pBind]="ptm('unmaskIcon')" (click)="onMaskToggle()" />
+                <span *ngIf="showIconTemplate || _showIconTemplate" (click)="onMaskToggle()" [pBind]="ptm('unmaskIcon')">
                     <ng-template *ngTemplateOutlet="showIconTemplate || _showIconTemplate; context: { class: cx('unmaskIcon') }"></ng-template>
                 </span>
             </ng-container>
@@ -1028,33 +1042,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
             }"
             (@overlayAnimation.start)="onAnimationStart($event)"
             (@overlayAnimation.done)="onAnimationEnd($event)"
-            [attr.data-pc-section]="'panel'"
+            [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>
             <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 [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')" [attr.data-pc-section]="'info'">{{ infoText }}</div>
+                    <div [class]="cx('meterText')" [pBind]="ptm('meterText')">{{ infoText }}</div>
                 </div>
             </ng-template>
             <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
         </div>
     `,
-                    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],
+                    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')",
-                        'data-pc-name': 'password',
-                        'data-pc-section': 'root'
-                    }
+                        '[style]': "sx('root')"
+                    },
+                    hostDirectives: [Bind]
                 }]
         }], propDecorators: { ariaLabel: [{
                 type: Input
@@ -1140,15 +1153,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class PasswordModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: PasswordModule, imports: [Password, PasswordDirective, SharedModule], exports: [PasswordDirective, Password, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PasswordModule, imports: [Password, SharedModule, SharedModule] });
+    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] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PasswordModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PasswordModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [Password, PasswordDirective, SharedModule],
-                    exports: [PasswordDirective, Password, SharedModule]
+                    imports: [Password, PasswordDirective, SharedModule, BindModule],
+                    exports: [PasswordDirective, Password, SharedModule, BindModule]
                 }]
         }] });