primeng 18.0.0-rc.2 → 18.0.1

package/fesm2022/primeng-password.mjs

@@ -2,10 +2,10 @@ import { trigger, transition, style, 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, booleanAttribute, Directive, Input, HostListener, Pipe, forwardRef, EventEmitter, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { Injectable, inject, signal, booleanAttribute, Directive, Input, HostListener, Pipe, forwardRef, EventEmitter, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, ViewChild, ContentChild, ContentChildren, 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 } from 'primeng/api';
+import { OverlayService, TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
 import { BaseComponent } from 'primeng/basecomponent';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
@@ -194,7 +194,7 @@ var PasswordClasses;
 })(PasswordClasses || (PasswordClasses = {}));
 
 const _c0 = ["content"];
-const _c1 = ["footerT"];
+const _c1 = ["footer"];
 const _c2 = ["header"];
 const _c3 = ["clearicon"];
 const _c4 = ["headericon"];
@@ -228,11 +228,11 @@ function Password_ng_container_5_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r3.cleariconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r3.clearIconTemplate && !ctx_r3._clearIconTemplate);
     i0.ɵɵadvance();
     i0.ɵɵattribute("data-pc-section", "clearIcon");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.cleariconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.clearIconTemplate || ctx_r3._clearIconTemplate);
 } }
 function Password_ng_container_6_ng_container_1_EyeSlashIcon_1_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -255,7 +255,7 @@ function Password_ng_container_6_ng_container_1_span_2_Template(rf, ctx) { if (r
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.hideiconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction0(2, _c7));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.hideIconTemplate || ctx_r3._hideIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction0(2, _c7));
 } }
 function Password_ng_container_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -264,9 +264,9 @@ function Password_ng_container_6_ng_container_1_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r3.hideiconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r3.hideIconTemplate && !ctx_r3._hideIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.hideiconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r3.hideIconTemplate || ctx_r3._hideIconTemplate);
 } }
 function Password_ng_container_6_ng_container_2_EyeIcon_1_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
@@ -289,7 +289,7 @@ function Password_ng_container_6_ng_container_2_span_2_Template(rf, ctx) { if (r
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.showiconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.showIconTemplate || ctx_r3._showIconTemplate);
 } }
 function Password_ng_container_6_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -298,9 +298,9 @@ function Password_ng_container_6_ng_container_2_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r3.showiconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r3.showIconTemplate && !ctx_r3._showIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.showiconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r3.showIconTemplate || ctx_r3._showIconTemplate);
 } }
 function Password_ng_container_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -326,7 +326,7 @@ function Password_div_7_ng_container_3_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.contentTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.contentTemplate || ctx_r3._contentTemplate);
 } }
 function Password_div_7_ng_template_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 17)(1, "div", 18);
@@ -363,16 +363,19 @@ function Password_div_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("@overlayAnimation", i0.ɵɵpureFunction1(9, _c9, i0.ɵɵpureFunction2(6, _c8, ctx_r3.showTransitionOptions, ctx_r3.hideTransitionOptions)));
     i0.ɵɵattribute("data-pc-section", "panel");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.headerTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.headerTemplate || ctx_r3._headerTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.contentTemplate)("ngIfElse", content_r10);
+    i0.ɵɵproperty("ngIf", ctx_r3.contentTemplate || ctx_r3._contentTemplate)("ngIfElse", content_r10);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.footerTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.footerTemplate || ctx_r3._footerTemplate);
 } }
 /**
  * Password directive.
  * @group Components
  */
+// strengthClass(meter: any) {
+//     return `p-password-meter-label p-password-meter${meter?.strength ? `-${meter.strength}` : ''}`;
+// }
 class PasswordDirective extends BaseComponent {
     zone;
     /**
@@ -464,6 +467,7 @@ class PasswordDirective extends BaseComponent {
             this.renderer.appendChild(this.content, this.info);
             this.renderer.setStyle(this.panel, 'minWidth', `${this.el.nativeElement.offsetWidth}px`);
             this.renderer.appendChild(document.body, this.panel);
+            this.updateMeter();
         }
     }
     showOverlay() {
@@ -502,6 +506,7 @@ class PasswordDirective extends BaseComponent {
     onBlur() {
         this.hideOverlay();
     }
+    labelSignal = signal('');
     onKeyup(e) {
         if (this.feedback) {
             let value = e.target.value, label = null, meterPos = null;
@@ -523,6 +528,8 @@ class PasswordDirective extends BaseComponent {
                     label = this.strongLabel;
                     meterPos = '0px -30px';
                 }
+                this.labelSignal.set(label);
+                this.updateMeter();
             }
             if (!this.panel || !hasClass(this.panel, 'p-connected-overlay-visible')) {
                 this.showOverlay();
@@ -531,6 +538,22 @@ class PasswordDirective extends BaseComponent {
             this.info.textContent = label;
         }
     }
+    updateMeter() {
+        if (this.labelSignal()) {
+            const label = this.labelSignal();
+            const strengthClass = this.strengthClass(label.toLowerCase());
+            const width = this.getWidth(label.toLowerCase());
+            this.renderer.addClass(this.meter, strengthClass);
+            this.renderer.setStyle(this.meter, 'width', width);
+            this.info.textContent = label;
+        }
+    }
+    getWidth(label) {
+        return label === 'weak' ? '33.33%' : label === 'medium' ? '66.66%' : label === 'strong' ? '100%' : '';
+    }
+    strengthClass(label) {
+        return `p-password-meter${label ? `-${label}` : ''}`;
+    }
     testStrength(str) {
         let grade = 0;
         let val;
@@ -840,9 +863,16 @@ class Password extends BaseComponent {
     contentTemplate;
     footerTemplate;
     headerTemplate;
-    cleariconTemplate;
-    hideiconTemplate;
-    showiconTemplate;
+    clearIconTemplate;
+    hideIconTemplate;
+    showIconTemplate;
+    templates;
+    _contentTemplate;
+    _footerTemplate;
+    _headerTemplate;
+    _clearIconTemplate;
+    _hideIconTemplate;
+    _showIconTemplate;
     overlayVisible = false;
     meter;
     infoText;
@@ -873,6 +903,33 @@ class Password extends BaseComponent {
             this.updateUI(this.value || '');
         });
     }
+    ngAfterContentInit() {
+        this.templates.forEach((item) => {
+            switch (item.getType()) {
+                case 'content':
+                    this._contentTemplate = item.template;
+                    break;
+                case 'header':
+                    this._headerTemplate = item.template;
+                    break;
+                case 'footer':
+                    this._footerTemplate = item.template;
+                    break;
+                case 'clearicon':
+                    this._clearIconTemplate = item.template;
+                    break;
+                case 'hideicon':
+                    this._hideIconTemplate = item.template;
+                    break;
+                case 'showicon':
+                    this._showIconTemplate = item.template;
+                    break;
+                default:
+                    this._contentTemplate = item.template;
+                    break;
+            }
+        });
+    }
     onAnimationStart(event) {
         switch (event.toState) {
             case 'visible':
@@ -1117,26 +1174,28 @@ class Password extends BaseComponent {
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵPassword_BaseFactory; return function Password_Factory(__ngFactoryType__) { return (ɵPassword_BaseFactory || (ɵPassword_BaseFactory = i0.ɵɵgetInheritedFactory(Password)))(__ngFactoryType__ || Password); }; })();
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Password, selectors: [["p-password"]], contentQueries: function Password_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, _c0, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c1, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c2, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c3, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c4, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c5, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c0, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c1, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c2, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c3, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c4, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c5, 4);
+            i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.cleariconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.hideiconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.showiconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.clearIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.hideIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.showIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
         } }, viewQuery: function Password_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c6, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.input = _t.first);
-        } }, inputs: { ariaLabel: "ariaLabel", fluid: [2, "fluid", "fluid", booleanAttribute], ariaLabelledBy: "ariaLabelledBy", label: "label", disabled: [2, "disabled", "disabled", booleanAttribute], promptLabel: "promptLabel", mediumRegex: "mediumRegex", strongRegex: "strongRegex", weakLabel: "weakLabel", mediumLabel: "mediumLabel", maxLength: [2, "maxLength", "maxLength", numberAttribute], strongLabel: "strongLabel", inputId: "inputId", feedback: [2, "feedback", "feedback", booleanAttribute], appendTo: "appendTo", toggleMask: [2, "toggleMask", "toggleMask", booleanAttribute], size: "size", inputStyleClass: "inputStyleClass", styleClass: "styleClass", style: "style", inputStyle: "inputStyle", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autocomplete: "autocomplete", placeholder: "placeholder", showClear: [2, "showClear", "showClear", booleanAttribute], autofocus: [2, "autofocus", "autofocus", booleanAttribute], variant: "variant" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClear: "onClear" }, standalone: true, features: [i0.ɵɵProvidersFeature([Password_VALUE_ACCESSOR, PasswordStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 8, vars: 33, consts: [["input", ""], ["overlay", ""], ["content", ""], [3, "ngClass", "ngStyle"], ["pInputText", "", 3, "input", "focus", "blur", "keyup", "disabled", "size", "ngClass", "ngStyle", "value", "variant", "pAutoFocus"], [4, "ngIf"], ["class", "p-password-overlay p-component", 3, "click", 4, "ngIf"], ["class", "p-password-clear-icon", 3, "click", 4, "ngIf"], [1, "p-password-clear-icon", 3, "click"], [4, "ngTemplateOutlet"], ["class", "p-password-toggle-mask-icon p-password-mask-icon", 3, "click", 4, "ngIf"], [3, "click", 4, "ngIf"], [1, "p-password-toggle-mask-icon", "p-password-mask-icon", 3, "click"], [3, "click"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "p-password-overlay", "p-component", 3, "click"], [4, "ngIf", "ngIfElse"], [1, "p-password-content"], [1, "p-password-meter"], [1, "p-password-meter-text"]], template: function Password_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { ariaLabel: "ariaLabel", fluid: [2, "fluid", "fluid", booleanAttribute], ariaLabelledBy: "ariaLabelledBy", label: "label", disabled: [2, "disabled", "disabled", booleanAttribute], promptLabel: "promptLabel", mediumRegex: "mediumRegex", strongRegex: "strongRegex", weakLabel: "weakLabel", mediumLabel: "mediumLabel", maxLength: [2, "maxLength", "maxLength", numberAttribute], strongLabel: "strongLabel", inputId: "inputId", feedback: [2, "feedback", "feedback", booleanAttribute], appendTo: "appendTo", toggleMask: [2, "toggleMask", "toggleMask", booleanAttribute], size: "size", inputStyleClass: "inputStyleClass", styleClass: "styleClass", style: "style", inputStyle: "inputStyle", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autocomplete: "autocomplete", placeholder: "placeholder", showClear: [2, "showClear", "showClear", booleanAttribute], autofocus: [2, "autofocus", "autofocus", booleanAttribute], variant: "variant" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClear: "onClear" }, standalone: true, features: [i0.ɵɵProvidersFeature([Password_VALUE_ACCESSOR, PasswordStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 8, vars: 33, consts: [["input", ""], ["overlay", ""], ["content", ""], [3, "ngClass", "ngStyle"], ["pInputText", "", 3, "input", "focus", "blur", "keyup", "disabled", "pSize", "ngClass", "ngStyle", "value", "variant", "pAutoFocus"], [4, "ngIf"], ["class", "p-password-overlay p-component", 3, "click", 4, "ngIf"], ["class", "p-password-clear-icon", 3, "click", 4, "ngIf"], [1, "p-password-clear-icon", 3, "click"], [4, "ngTemplateOutlet"], ["class", "p-password-toggle-mask-icon p-password-mask-icon", 3, "click", 4, "ngIf"], [3, "click", 4, "ngIf"], [1, "p-password-toggle-mask-icon", "p-password-mask-icon", 3, "click"], [3, "click"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "p-password-overlay", "p-component", 3, "click"], [4, "ngIf", "ngIfElse"], [1, "p-password-content"], [1, "p-password-meter"], [1, "p-password-meter-text"]], template: function Password_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 3)(1, "input", 4, 0);
             i0.ɵɵpipe(3, "mapper");
@@ -1151,7 +1210,7 @@ class Password extends BaseComponent {
             i0.ɵɵattribute("data-pc-name", "password")("data-pc-section", "root");
             i0.ɵɵadvance();
             i0.ɵɵclassMap(ctx.inputStyleClass);
-            i0.ɵɵproperty("disabled", ctx.disabled)("size", ctx.size)("ngClass", i0.ɵɵpipeBind2(3, 27, ctx.disabled, ctx.inputFieldClass))("ngStyle", ctx.inputStyle)("value", ctx.value)("variant", ctx.variant)("pAutoFocus", ctx.autofocus);
+            i0.ɵɵproperty("disabled", ctx.disabled)("pSize", ctx.size)("ngClass", i0.ɵɵpipeBind2(3, 27, ctx.disabled, ctx.inputFieldClass))("ngStyle", ctx.inputStyle)("value", ctx.value)("variant", ctx.variant)("pAutoFocus", ctx.autofocus);
             i0.ɵɵattribute("label", ctx.label)("aria-label", ctx.ariaLabel)("aria-labelledBy", ctx.ariaLabelledBy)("id", ctx.inputId)("type", i0.ɵɵpipeBind2(4, 30, ctx.unmasked, ctx.inputType))("placeholder", ctx.placeholder)("autocomplete", ctx.autocomplete)("maxlength", ctx.maxLength)("data-pc-section", "input");
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("ngIf", ctx.showClear && ctx.value != null);
@@ -1177,7 +1236,7 @@ class Password extends BaseComponent {
                 [attr.id]="inputId"
                 pInputText
                 [disabled]="disabled"
-                [size]="size"
+                [pSize]="size"
                 [ngClass]="disabled | mapper: inputFieldClass"
                 [ngStyle]="inputStyle"
                 [class]="inputStyleClass"
@@ -1195,23 +1254,23 @@ class Password extends BaseComponent {
                 [pAutoFocus]="autofocus"
             />
             <ng-container *ngIf="showClear && value != null">
-                <TimesIcon *ngIf="!cleariconTemplate" class="p-password-clear-icon" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
+                <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"></ng-template>
+                    <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></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" (click)="onMaskToggle()" [attr.data-pc-section]="'hideIcon'" />
-                    <span *ngIf="hideiconTemplate" (click)="onMaskToggle()">
-                        <ng-template *ngTemplateOutlet="hideiconTemplate; context: { class: 'p-password-toggle-mask-icon p-password-mask-icon' }"></ng-template>
+                    <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" class="p-password-toggle-mask-icon p-password-mask-icon" (click)="onMaskToggle()" [attr.data-pc-section]="'showIcon'" />
-                    <span *ngIf="showiconTemplate" (click)="onMaskToggle()">
-                        <ng-template *ngTemplateOutlet="showiconTemplate"></ng-template>
+                    <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>
@@ -1229,9 +1288,9 @@ class Password extends BaseComponent {
                 (@overlayAnimation.done)="onAnimationEnd($event)"
                 [attr.data-pc-section]="'panel'"
             >
-                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-                <ng-container *ngIf="contentTemplate; else content">
-                    <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+                <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">
@@ -1241,7 +1300,7 @@ class Password extends BaseComponent {
                         <div class="p-password-meter-text" [attr.data-pc-section]="'info'">{{ infoText }}</div>
                     </div>
                 </ng-template>
-                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
             </div>
         </div>
     `,
@@ -1324,22 +1383,25 @@ class Password extends BaseComponent {
             args: ['input']
         }], contentTemplate: [{
             type: ContentChild,
-            args: ['content']
+            args: ['content', { descendants: false }]
         }], footerTemplate: [{
             type: ContentChild,
-            args: ['footerT']
+            args: ['footer', { descendants: false }]
         }], headerTemplate: [{
             type: ContentChild,
-            args: ['header']
-        }], cleariconTemplate: [{
+            args: ['header', { descendants: false }]
+        }], clearIconTemplate: [{
             type: ContentChild,
-            args: ['clearicon']
-        }], hideiconTemplate: [{
+            args: ['clearicon', { descendants: false }]
+        }], hideIconTemplate: [{
             type: ContentChild,
-            args: ['headericon']
-        }], showiconTemplate: [{
+            args: ['headericon', { descendants: false }]
+        }], showIconTemplate: [{
             type: ContentChild,
-            args: ['showicon']
+            args: ['showicon', { descendants: false }]
+        }], templates: [{
+            type: ContentChildren,
+            args: [PrimeTemplate]
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Password, { className: "Password" }); })();
 class PasswordModule {