primeng 18.0.0-rc.1 → 18.0.0

package/fesm2022/primeng-password.mjs

@@ -2,7 +2,7 @@ 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, 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';
@@ -79,7 +79,7 @@ const theme = ({ dt }) => `
 }
 
 .p-password-toggle-mask-icon {
-    right: ${dt('form.field.padding.x')};
+    inset-inline-end: ${dt('form.field.padding.x')};
     color: ${dt('password.icon.color')};
     position: absolute;
     top: 50%;
@@ -89,12 +89,20 @@ const theme = ({ dt }) => `
 }
 
 .p-password:has(.p-password-toggle-mask-icon) .p-password-input {
-    padding-right: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
+    padding-inline-end: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
 }
 
 /* For PrimeNG */
-p-password.ng-invalid.ng-dirty > .p-password.p-inputwrapper > .p-inputtext {
-    border-color: ${dt('form.field.invalid.border.color')};
+p-password.ng-invalid.ng-dirty .p-inputtext {
+    border-color: ${dt('inputtext.invalid.border.color')};
+}
+
+p-password.ng-invalid.ng-dirty .p-inputtext:enabled:focus {
+    border-color: ${dt('inputtext.focus.border.color')};
+}
+
+p-password.ng-invalid.ng-dirty .p-inputtext::placeholder {
+    color: ${dt('inputtext.invalid.placeholder.color')};
 }
 
 .p-password-clear-icon {
@@ -102,7 +110,7 @@ p-password.ng-invalid.ng-dirty > .p-password.p-inputwrapper > .p-inputtext {
     top: 50%;
     margin-top: -0.5rem;
     cursor: pointer;
-    right: ${dt('form.field.padding.x')};
+    inset-inline-end: ${dt('form.field.padding.x')};
     color: ${dt('form.field.icon.color')};
 }
 
@@ -220,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);
     i0.ɵɵadvance();
     i0.ɵɵattribute("data-pc-section", "clearIcon");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.clearIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r3.cleariconTemplate);
 } }
 function Password_ng_container_6_ng_container_1_EyeSlashIcon_1_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -247,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)("ngTemplateOutletContext", i0.ɵɵpureFunction0(2, _c7));
 } }
 function Password_ng_container_6_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -256,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);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.hideIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r3.hideiconTemplate);
 } }
 function Password_ng_container_6_ng_container_2_EyeIcon_1_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
@@ -281,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);
 } }
 function Password_ng_container_6_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -290,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);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.showIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r3.showiconTemplate);
 } }
 function Password_ng_container_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -365,6 +373,9 @@ function Password_div_7_Template(rf, ctx) { if (rf & 1) {
  * Password directive.
  * @group Components
  */
+// strengthClass(meter: any) {
+//     return `p-password-meter-label p-password-meter${meter?.strength ? `-${meter.strength}` : ''}`;
+// }
 class PasswordDirective extends BaseComponent {
     zone;
     /**
@@ -456,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() {
@@ -494,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;
@@ -515,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();
@@ -523,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;
@@ -832,9 +863,9 @@ class Password extends BaseComponent {
     contentTemplate;
     footerTemplate;
     headerTemplate;
-    clearIconTemplate;
-    hideIconTemplate;
-    showIconTemplate;
+    cleariconTemplate;
+    hideiconTemplate;
+    showiconTemplate;
     overlayVisible = false;
     meter;
     infoText;
@@ -1120,15 +1151,15 @@ class Password extends BaseComponent {
             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);
         } }, 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");
@@ -1143,7 +1174,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);
@@ -1169,7 +1200,7 @@ class Password extends BaseComponent {
                 [attr.id]="inputId"
                 pInputText
                 [disabled]="disabled"
-                [size]="size"
+                [pSize]="size"
                 [ngClass]="disabled | mapper: inputFieldClass"
                 [ngStyle]="inputStyle"
                 [class]="inputStyleClass"
@@ -1187,23 +1218,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" 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"></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" (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>
                     </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" 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>
                     </span>
                 </ng-container>
             </ng-container>
@@ -1323,13 +1354,13 @@ class Password extends BaseComponent {
         }], headerTemplate: [{
             type: ContentChild,
             args: ['header']
-        }], clearIconTemplate: [{
+        }], cleariconTemplate: [{
             type: ContentChild,
             args: ['clearicon']
-        }], hideIconTemplate: [{
+        }], hideiconTemplate: [{
             type: ContentChild,
             args: ['headericon']
-        }], showIconTemplate: [{
+        }], showiconTemplate: [{
             type: ContentChild,
             args: ['showicon']
         }] }); })();