ng-prime-tools 1.0.88 → 1.0.90

package/fesm2022/ng-prime-tools.mjs

@@ -45,6 +45,8 @@ import * as i6$1 from 'primeng/password';
 import { PasswordModule } from 'primeng/password';
 import * as i3$5 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
+import * as i3$6 from 'primeng/inputotp';
+import { InputOtpModule } from 'primeng/inputotp';
 import { Chart, registerables } from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { Subject, interval, BehaviorSubject } from 'rxjs';
@@ -53,7 +55,7 @@ import * as i1$2 from '@angular/router';
 import { RouterModule, NavigationEnd } from '@angular/router';
 import * as i2$1 from 'primeng/breadcrumb';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
-import * as i3$6 from 'primeng/confirmdialog';
+import * as i3$7 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import * as i2$2 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
@@ -1791,6 +1793,7 @@ var FormInputTypeEnum;
     FormInputTypeEnum["CHECKBOX"] = "CHECKBOX";
     FormInputTypeEnum["SWITCH"] = "SWITCH";
     FormInputTypeEnum["PASSWORD"] = "PASSWORD";
+    FormInputTypeEnum["OTP"] = "OTP";
 })(FormInputTypeEnum || (FormInputTypeEnum = {}));
 
 var ButtonColorEnum;
@@ -3123,6 +3126,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Output
             }] } });
 
+class PTOtpInputComponent {
+    ngOnInit() {
+        this.initializeDefaults();
+        this.setupControl();
+    }
+    ngOnDestroy() {
+        this.valueChangesSubscription?.unsubscribe();
+    }
+    get inputId() {
+        return `pt-otp-input-${this.formField?.name || 'field'}`;
+    }
+    get resolvedLength() {
+        return this.formField.otpLength ?? 6;
+    }
+    get resolvedIntegerOnly() {
+        return this.formField.otpIntegerOnly ?? true;
+    }
+    get resolvedMask() {
+        return this.formField.otpMask ?? false;
+    }
+    get control() {
+        return this.formGroup.get(this.formField.name);
+    }
+    setupControl() {
+        const control = this.control;
+        if (!control) {
+            return;
+        }
+        control.setValidators(this.getValidators());
+        this.valueChangesSubscription?.unsubscribe();
+        if (this.formField.disabled) {
+            control.disable({ emitEvent: false });
+        }
+        else {
+            control.enable({ emitEvent: false });
+            this.valueChangesSubscription = control.valueChanges.subscribe((value) => {
+                this.normalizeOtpValue(value);
+            });
+        }
+        control.updateValueAndValidity({ emitEvent: false });
+    }
+    hasError() {
+        const control = this.control;
+        return !!(control?.invalid && (control.touched || control.dirty));
+    }
+    getErrorMessage() {
+        const control = this.control;
+        if (control?.hasError('required')) {
+            return (this.formField.errorText ??
+                `${this.formField.label ?? 'OTP code'} is required`);
+        }
+        if (control?.hasError('pattern')) {
+            return (this.formField.errorText ??
+                `${this.formField.label ?? 'OTP code'} must contain exactly ${this.resolvedLength} ${this.resolvedIntegerOnly ? 'digits' : 'characters'}`);
+        }
+        return '';
+    }
+    initializeDefaults() {
+        this.formField = {
+            required: true,
+            otpLength: 6,
+            otpIntegerOnly: true,
+            otpMask: false,
+            width: '100%',
+            ...this.formField,
+        };
+    }
+    getValidators() {
+        const validators = [];
+        if (this.formField.required) {
+            validators.push(Validators.required);
+        }
+        validators.push(Validators.pattern(this.buildOtpPattern()));
+        return validators;
+    }
+    buildOtpPattern() {
+        if (this.resolvedIntegerOnly) {
+            return new RegExp(`^[0-9]{${this.resolvedLength}}$`);
+        }
+        return new RegExp(`^[A-Za-z0-9]{${this.resolvedLength}}$`);
+    }
+    normalizeOtpValue(value) {
+        const control = this.control;
+        if (!control || value === null || value === undefined) {
+            return;
+        }
+        let normalizedValue = String(value).trim();
+        if (this.resolvedIntegerOnly) {
+            normalizedValue = normalizedValue.replace(/[^0-9]/g, '');
+        }
+        else {
+            normalizedValue = normalizedValue.replace(/[^A-Za-z0-9]/g, '');
+        }
+        normalizedValue = normalizedValue.slice(0, this.resolvedLength);
+        if (normalizedValue !== String(value)) {
+            control.setValue(normalizedValue, { emitEvent: false });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTOtpInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTOtpInputComponent, isStandalone: false, selector: "pt-otp-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{\n      width: formField.width || '100%',\n      height: formField.height || 'auto',\n      margin: formField.margin || null,\n    }\"\n  >\n    @if (formField.label) {\n      <label class=\"field-label\">\n        {{ formField.label }}\n      </label>\n    }\n\n    <div class=\"otp-input-wrapper\">\n      <p-inputOtp\n        [formControlName]=\"formField.name\"\n        [length]=\"resolvedLength\"\n        [integerOnly]=\"resolvedIntegerOnly\"\n        [mask]=\"resolvedMask\"\n        [readonly]=\"formField.disabled ?? false\"\n        styleClass=\"pt-otp-input\"\n      ></p-inputOtp>\n    </div>\n\n    @if (hasError()) {\n      <div class=\"form-info-row\">\n        <small class=\"field-error\">\n          {{ getErrorMessage() }}\n        </small>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.85rem;color:#172554;font-size:1.1rem;font-weight:700;letter-spacing:.01em}.otp-input-wrapper{display:flex;width:100%;justify-content:center}.form-info-row{display:flex;min-height:1.35rem;margin-top:.65rem;justify-content:center}.field-error{color:#fca5a5;font-size:.82rem;font-weight:600;text-align:center}:host ::ng-deep .pt-otp-input{display:flex;width:100%;justify-content:center;gap:.7rem}:host ::ng-deep .pt-otp-input .p-inputotp-input{width:3.7rem;height:4rem;border:2px solid rgba(255,255,255,.62);border-radius:.85rem;background:#fffffff0;box-shadow:0 6px 14px #0f172a29,inset 0 1px #ffffffe6;color:#172554;font-size:1.75rem;font-weight:800;text-align:center;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}:host ::ng-deep .pt-otp-input .p-inputotp-input:hover{border-color:#60a5fa;transform:translateY(-2px)}:host ::ng-deep .pt-otp-input .p-inputotp-input:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb33,0 8px 18px #0f172a33;outline:none}@media(max-width:480px){:host ::ng-deep .pt-otp-input{gap:.42rem}:host ::ng-deep .pt-otp-input .p-inputotp-input{width:2.85rem;height:3.3rem;font-size:1.4rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$6.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["readonly", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTOtpInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-otp-input', standalone: false, template: "@if (!formField.hidden) {\n  <div\n    [formGroup]=\"formGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{\n      width: formField.width || '100%',\n      height: formField.height || 'auto',\n      margin: formField.margin || null,\n    }\"\n  >\n    @if (formField.label) {\n      <label class=\"field-label\">\n        {{ formField.label }}\n      </label>\n    }\n\n    <div class=\"otp-input-wrapper\">\n      <p-inputOtp\n        [formControlName]=\"formField.name\"\n        [length]=\"resolvedLength\"\n        [integerOnly]=\"resolvedIntegerOnly\"\n        [mask]=\"resolvedMask\"\n        [readonly]=\"formField.disabled ?? false\"\n        styleClass=\"pt-otp-input\"\n      ></p-inputOtp>\n    </div>\n\n    @if (hasError()) {\n      <div class=\"form-info-row\">\n        <small class=\"field-error\">\n          {{ getErrorMessage() }}\n        </small>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.85rem;color:#172554;font-size:1.1rem;font-weight:700;letter-spacing:.01em}.otp-input-wrapper{display:flex;width:100%;justify-content:center}.form-info-row{display:flex;min-height:1.35rem;margin-top:.65rem;justify-content:center}.field-error{color:#fca5a5;font-size:.82rem;font-weight:600;text-align:center}:host ::ng-deep .pt-otp-input{display:flex;width:100%;justify-content:center;gap:.7rem}:host ::ng-deep .pt-otp-input .p-inputotp-input{width:3.7rem;height:4rem;border:2px solid rgba(255,255,255,.62);border-radius:.85rem;background:#fffffff0;box-shadow:0 6px 14px #0f172a29,inset 0 1px #ffffffe6;color:#172554;font-size:1.75rem;font-weight:800;text-align:center;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}:host ::ng-deep .pt-otp-input .p-inputotp-input:hover{border-color:#60a5fa;transform:translateY(-2px)}:host ::ng-deep .pt-otp-input .p-inputotp-input:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb33,0 8px 18px #0f172a33;outline:none}@media(max-width:480px){:host ::ng-deep .pt-otp-input{gap:.42rem}:host ::ng-deep .pt-otp-input .p-inputotp-input{width:2.85rem;height:3.3rem;font-size:1.4rem}}\n"] }]
+        }], propDecorators: { formGroup: [{
+                type: Input
+            }], formField: [{
+                type: Input
+            }] } });
+
 class PTDynamicFormFieldComponent {
     constructor() {
         this.FormInputTypeEnum = FormInputTypeEnum;
@@ -3151,12 +3264,15 @@ class PTDynamicFormFieldComponent {
     asSwitchField(field) {
         return field;
     }
+    asOtpField(field) {
+        return field;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDynamicFormFieldComponent, isStandalone: false, selector: "pt-dynamic-form-field", inputs: { field: "field", form: "form", inputWidth: "inputWidth" }, ngImport: i0, template: "<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX\n        ? field.width || inputWidth\n        : 'auto',\n  }\"\n>\n  @switch (field.type) {\n    <!-- TEXT -->\n    @case (FormInputTypeEnum.TEXT) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n\n    <!-- EMAIL -->\n    @case (FormInputTypeEnum.EMAIL) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n\n    <!-- NUMBER -->\n    @case (FormInputTypeEnum.NUMBER) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n\n    <!-- AMOUNT -->\n    @case (FormInputTypeEnum.AMOUNT) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n\n    <!-- TEXTAREA -->\n    @case (FormInputTypeEnum.TEXTAREA) {\n      <pt-text-area-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextAreaField(field)\"\n      ></pt-text-area-input>\n    }\n\n    <!-- DATE -->\n    @case (FormInputTypeEnum.DATE) {\n      <pt-date-input\n        [formGroup]=\"form\"\n        [formField]=\"asDateField(field)\"\n      ></pt-date-input>\n    }\n\n    <!-- MULTISELECT -->\n    @case (FormInputTypeEnum.MULTISELECT) {\n      <pt-multi-select\n        [formGroup]=\"form\"\n        [formField]=\"asMultiSelectField(field)\"\n      ></pt-multi-select>\n    }\n\n    <!-- SELECT -->\n    @case (FormInputTypeEnum.SELECT) {\n      <pt-dropdown\n        [formGroup]=\"form\"\n        [formField]=\"asSelectField(field)\"\n      ></pt-dropdown>\n    }\n\n    <!-- CHECKBOX -->\n    @case (FormInputTypeEnum.CHECKBOX) {\n      <pt-check-box-input\n        [formGroup]=\"form\"\n        [formField]=\"asCheckboxField(field)\"\n      ></pt-check-box-input>\n    }\n\n    <!-- SWITCH -->\n    @case (FormInputTypeEnum.SWITCH) {\n      <pt-switch-input\n        [formGroup]=\"form\"\n        [formField]=\"asSwitchField(field)\"\n      ></pt-switch-input>\n    }\n  }\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PTCheckBoxInputComponent, selector: "pt-check-box-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDateInputComponent, selector: "pt-date-input", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "dateChange"] }, { kind: "component", type: PTNumberInputComponent, selector: "pt-number-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTSwitchInputComponent, selector: "pt-switch-input", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "switchChange"] }, { kind: "component", type: PTTextAreaInputComponent, selector: "pt-text-area-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDropdownComponent, selector: "pt-dropdown", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "selectionChange"] }, { kind: "component", type: PTMultiSelectComponent, selector: "pt-multi-select", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "selectionChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDynamicFormFieldComponent, isStandalone: false, selector: "pt-dynamic-form-field", inputs: { field: "field", form: "form", inputWidth: "inputWidth" }, ngImport: i0, template: "<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX\n        ? field.width || inputWidth\n        : 'auto',\n  }\"\n>\n  @switch (field.type) {\n    <!-- TEXT -->\n    @case (FormInputTypeEnum.TEXT) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n\n    <!-- EMAIL -->\n    @case (FormInputTypeEnum.EMAIL) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n\n    <!-- NUMBER -->\n    @case (FormInputTypeEnum.NUMBER) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n\n    <!-- AMOUNT -->\n    @case (FormInputTypeEnum.AMOUNT) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n\n    <!-- TEXTAREA -->\n    @case (FormInputTypeEnum.TEXTAREA) {\n      <pt-text-area-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextAreaField(field)\"\n      ></pt-text-area-input>\n    }\n\n    <!-- DATE -->\n    @case (FormInputTypeEnum.DATE) {\n      <pt-date-input\n        [formGroup]=\"form\"\n        [formField]=\"asDateField(field)\"\n      ></pt-date-input>\n    }\n\n    <!-- MULTISELECT -->\n    @case (FormInputTypeEnum.MULTISELECT) {\n      <pt-multi-select\n        [formGroup]=\"form\"\n        [formField]=\"asMultiSelectField(field)\"\n      ></pt-multi-select>\n    }\n\n    <!-- SELECT -->\n    @case (FormInputTypeEnum.SELECT) {\n      <pt-dropdown\n        [formGroup]=\"form\"\n        [formField]=\"asSelectField(field)\"\n      ></pt-dropdown>\n    }\n\n    <!-- OTP -->\n    @case (FormInputTypeEnum.OTP) {\n      <pt-otp-input\n        [formGroup]=\"form\"\n        [formField]=\"asOtpField(field)\"\n      ></pt-otp-input>\n    }\n\n    <!-- CHECKBOX -->\n    @case (FormInputTypeEnum.CHECKBOX) {\n      <pt-check-box-input\n        [formGroup]=\"form\"\n        [formField]=\"asCheckboxField(field)\"\n      ></pt-check-box-input>\n    }\n\n    <!-- SWITCH -->\n    @case (FormInputTypeEnum.SWITCH) {\n      <pt-switch-input\n        [formGroup]=\"form\"\n        [formField]=\"asSwitchField(field)\"\n      ></pt-switch-input>\n    }\n  }\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PTCheckBoxInputComponent, selector: "pt-check-box-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDateInputComponent, selector: "pt-date-input", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "dateChange"] }, { kind: "component", type: PTNumberInputComponent, selector: "pt-number-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTSwitchInputComponent, selector: "pt-switch-input", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "switchChange"] }, { kind: "component", type: PTTextAreaInputComponent, selector: "pt-text-area-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDropdownComponent, selector: "pt-dropdown", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "selectionChange"] }, { kind: "component", type: PTMultiSelectComponent, selector: "pt-multi-select", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "selectionChange"] }, { kind: "component", type: PTOtpInputComponent, selector: "pt-otp-input", inputs: ["formGroup", "formField"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-dynamic-form-field', standalone: false, template: "<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX\n        ? field.width || inputWidth\n        : 'auto',\n  }\"\n>\n  @switch (field.type) {\n    <!-- TEXT -->\n    @case (FormInputTypeEnum.TEXT) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n\n    <!-- EMAIL -->\n    @case (FormInputTypeEnum.EMAIL) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n\n    <!-- NUMBER -->\n    @case (FormInputTypeEnum.NUMBER) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n\n    <!-- AMOUNT -->\n    @case (FormInputTypeEnum.AMOUNT) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n\n    <!-- TEXTAREA -->\n    @case (FormInputTypeEnum.TEXTAREA) {\n      <pt-text-area-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextAreaField(field)\"\n      ></pt-text-area-input>\n    }\n\n    <!-- DATE -->\n    @case (FormInputTypeEnum.DATE) {\n      <pt-date-input\n        [formGroup]=\"form\"\n        [formField]=\"asDateField(field)\"\n      ></pt-date-input>\n    }\n\n    <!-- MULTISELECT -->\n    @case (FormInputTypeEnum.MULTISELECT) {\n      <pt-multi-select\n        [formGroup]=\"form\"\n        [formField]=\"asMultiSelectField(field)\"\n      ></pt-multi-select>\n    }\n\n    <!-- SELECT -->\n    @case (FormInputTypeEnum.SELECT) {\n      <pt-dropdown\n        [formGroup]=\"form\"\n        [formField]=\"asSelectField(field)\"\n      ></pt-dropdown>\n    }\n\n    <!-- CHECKBOX -->\n    @case (FormInputTypeEnum.CHECKBOX) {\n      <pt-check-box-input\n        [formGroup]=\"form\"\n        [formField]=\"asCheckboxField(field)\"\n      ></pt-check-box-input>\n    }\n\n    <!-- SWITCH -->\n    @case (FormInputTypeEnum.SWITCH) {\n      <pt-switch-input\n        [formGroup]=\"form\"\n        [formField]=\"asSwitchField(field)\"\n      ></pt-switch-input>\n    }\n  }\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
+            args: [{ selector: 'pt-dynamic-form-field', standalone: false, template: "<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX\n        ? field.width || inputWidth\n        : 'auto',\n  }\"\n>\n  @switch (field.type) {\n    <!-- TEXT -->\n    @case (FormInputTypeEnum.TEXT) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n\n    <!-- EMAIL -->\n    @case (FormInputTypeEnum.EMAIL) {\n      <pt-text-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextField(field)\"\n      ></pt-text-input>\n    }\n\n    <!-- NUMBER -->\n    @case (FormInputTypeEnum.NUMBER) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n\n    <!-- AMOUNT -->\n    @case (FormInputTypeEnum.AMOUNT) {\n      <pt-number-input\n        [formGroup]=\"form\"\n        [formField]=\"asNumberField(field)\"\n      ></pt-number-input>\n    }\n\n    <!-- TEXTAREA -->\n    @case (FormInputTypeEnum.TEXTAREA) {\n      <pt-text-area-input\n        [formGroup]=\"form\"\n        [formField]=\"asTextAreaField(field)\"\n      ></pt-text-area-input>\n    }\n\n    <!-- DATE -->\n    @case (FormInputTypeEnum.DATE) {\n      <pt-date-input\n        [formGroup]=\"form\"\n        [formField]=\"asDateField(field)\"\n      ></pt-date-input>\n    }\n\n    <!-- MULTISELECT -->\n    @case (FormInputTypeEnum.MULTISELECT) {\n      <pt-multi-select\n        [formGroup]=\"form\"\n        [formField]=\"asMultiSelectField(field)\"\n      ></pt-multi-select>\n    }\n\n    <!-- SELECT -->\n    @case (FormInputTypeEnum.SELECT) {\n      <pt-dropdown\n        [formGroup]=\"form\"\n        [formField]=\"asSelectField(field)\"\n      ></pt-dropdown>\n    }\n\n    <!-- OTP -->\n    @case (FormInputTypeEnum.OTP) {\n      <pt-otp-input\n        [formGroup]=\"form\"\n        [formField]=\"asOtpField(field)\"\n      ></pt-otp-input>\n    }\n\n    <!-- CHECKBOX -->\n    @case (FormInputTypeEnum.CHECKBOX) {\n      <pt-check-box-input\n        [formGroup]=\"form\"\n        [formField]=\"asCheckboxField(field)\"\n      ></pt-check-box-input>\n    }\n\n    <!-- SWITCH -->\n    @case (FormInputTypeEnum.SWITCH) {\n      <pt-switch-input\n        [formGroup]=\"form\"\n        [formField]=\"asSwitchField(field)\"\n      ></pt-switch-input>\n    }\n  }\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
         }], propDecorators: { field: [{
                 type: Input
             }], form: [{
@@ -3266,11 +3382,22 @@ class PTFormBuilderComponent {
             case FormInputTypeEnum.EMAIL:
                 validators.push(Validators.email);
                 break;
+            case FormInputTypeEnum.OTP:
+                validators.push(Validators.pattern(this.buildOtpPattern(field)));
+                break;
             default:
                 break;
         }
         return validators;
     }
+    buildOtpPattern(field) {
+        const length = field.otpLength ?? 6;
+        const integerOnly = field.otpIntegerOnly ?? true;
+        if (integerOnly) {
+            return new RegExp(`^[0-9]{${length}}$`);
+        }
+        return new RegExp(`^[A-Za-z0-9]{${length}}$`);
+    }
     isInvalid(field) {
         const control = this.form.get(field.name);
         return !!control && control.invalid && (control.touched || control.dirty);
@@ -3493,6 +3620,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+class PTOtpInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTOtpInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTOtpInputModule, declarations: [PTOtpInputComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule, InputOtpModule], exports: [PTOtpInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTOtpInputModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, InputOtpModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTOtpInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTOtpInputComponent],
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule, InputOtpModule],
+                    exports: [PTOtpInputComponent],
+                }]
+        }] });
+
 class PTDynamicFormFieldModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldModule, declarations: [PTDynamicFormFieldComponent], imports: [CommonModule,
@@ -3505,7 +3646,8 @@ class PTDynamicFormFieldModule {
             PTTextAreaInputModule,
             PTTextInputModule,
             PTDropdownModule,
-            PTMultiSelectModule], exports: [PTDynamicFormFieldComponent] }); }
+            PTMultiSelectModule,
+            PTOtpInputModule], exports: [PTDynamicFormFieldComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldModule, imports: [CommonModule,
             ReactiveFormsModule,
             // Inputs
@@ -3516,7 +3658,8 @@ class PTDynamicFormFieldModule {
             PTTextAreaInputModule,
             PTTextInputModule,
             PTDropdownModule,
-            PTMultiSelectModule] }); }
+            PTMultiSelectModule,
+            PTOtpInputModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldModule, decorators: [{
             type: NgModule,
@@ -3534,6 +3677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         PTTextInputModule,
                         PTDropdownModule,
                         PTMultiSelectModule,
+                        PTOtpInputModule,
                     ],
                     exports: [PTDynamicFormFieldComponent],
                 }]
@@ -6037,7 +6181,7 @@ class PTLoginCardComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginCardComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginCardComponent, isStandalone: true, selector: "pt-login-card", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  @if (loginPageConfig.logoUrl?.imageUrl) {\n    <div class=\"logo-container\">\n      <img\n        [src]=\"loginPageConfig.logoUrl?.imageUrl\"\n        [alt]=\"loginPageConfig.logoUrl?.altText || 'Logo'\"\n        [style.width]=\"loginPageConfig.logoUrl?.width || '100px'\"\n        [style.height]=\"loginPageConfig.logoUrl?.height || 'auto'\"\n      />\n    </div>\n  }\n\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: loginPageConfig.title?.color || '#333',\n        'font-size': loginPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ loginPageConfig.title?.text || \"Default Title\" }}\n    </h1>\n  </div>\n\n  @if (loginErrorMessage) {\n    <div class=\"error-message\" role=\"alert\">\n      {{ loginErrorMessage }}\n    </div>\n  }\n\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (loginPageConfig.login?.errorMessage) {\n      <div class=\"error-message\" role=\"alert\">\n        {{ loginPageConfig.login?.errorMessage }}\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.usernameField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.passwordField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n\n    @if (\n      loginPageConfig.forgotPasswordConfig?.text &&\n      loginPageConfig.forgotPasswordConfig?.url\n    ) {\n      <div\n        class=\"forgot-password-container\"\n        [ngClass]=\"\n          'forgot-password-' +\n          (loginPageConfig.forgotPasswordConfig?.align || 'center')\n        \"\n      >\n        <a\n          [href]=\"loginPageConfig.forgotPasswordConfig?.url\"\n          [target]=\"loginPageConfig.forgotPasswordConfig?.target || '_self'\"\n          [rel]=\"\n            loginPageConfig.forgotPasswordConfig?.target === '_blank'\n              ? 'noopener noreferrer'\n              : null\n          \"\n          [ngStyle]=\"loginPageConfig.forgotPasswordConfig?.style\"\n          [class]=\"\n            loginPageConfig.forgotPasswordConfig?.styleClass ||\n            'forgot-password-link'\n          \"\n        >\n          {{ loginPageConfig.forgotPasswordConfig?.text }}\n        </a>\n      </div>\n    }\n\n    @if (visibleAdditionalContent.length > 0) {\n      <div class=\"additional-content-list\">\n        @for (item of visibleAdditionalContent; track item.id || $index) {\n          <div\n            class=\"additional-content-item\"\n            [ngClass]=\"getAdditionalContentClass(item)\"\n            [ngStyle]=\"item.style\"\n          >\n            @switch (item.type) {\n              @case (\"link\") {\n                @if (item.linkText && item.url) {\n                  <a\n                    [href]=\"item.url\"\n                    [target]=\"item.target || '_self'\"\n                    [rel]=\"getLinkRel(item)\"\n                    [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                    [ngStyle]=\"item.linkStyle\"\n                  >\n                    {{ item.linkText }}\n                  </a>\n                }\n              }\n\n              @case (\"text-with-link\") {\n                @if (\n                  item.linkPosition === \"before\" && item.linkText && item.url\n                ) {\n                  <a\n                    [href]=\"item.url\"\n                    [target]=\"item.target || '_self'\"\n                    [rel]=\"getLinkRel(item)\"\n                    [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                    [ngStyle]=\"item.linkStyle\"\n                  >\n                    {{ item.linkText }}\n                  </a>\n\n                  @if (item.text) {\n                    <span class=\"additional-content-text\">\n                      {{ item.text }}\n                    </span>\n                  }\n                } @else {\n                  @if (item.text) {\n                    <span class=\"additional-content-text\">\n                      {{ item.text }}\n                    </span>\n                  }\n\n                  @if (item.linkText && item.url) {\n                    <a\n                      [href]=\"item.url\"\n                      [target]=\"item.target || '_self'\"\n                      [rel]=\"getLinkRel(item)\"\n                      [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                      [ngStyle]=\"item.linkStyle\"\n                    >\n                      {{ item.linkText }}\n                    </a>\n                  }\n                }\n              }\n\n              @default {\n                @if (item.text) {\n                  <span class=\"additional-content-text\">\n                    {{ item.text }}\n                  </span>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </form>\n\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n\n    <span>\n      {{ loginPageConfig.footer?.copyright }}\n    </span>\n  </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.forgot-password-container{display:flex;width:100%;box-sizing:border-box;margin-top:.875rem;margin-bottom:0;font-size:.875rem;line-height:1.4}.forgot-password-left{justify-content:flex-start;text-align:left}.forgot-password-center{justify-content:center;text-align:center}.forgot-password-right{justify-content:flex-end;text-align:right}.forgot-password-link,.additional-content-link{color:var(--p-primary-color, #2563eb);font-size:.875rem;font-weight:500;line-height:1.4;text-decoration:none;cursor:pointer;transition:color .16s ease,text-decoration-color .16s ease}.forgot-password-link:hover,.additional-content-link:hover{color:var(--p-primary-hover-color, #1d4ed8);text-decoration:underline;text-underline-offset:.2rem}.forgot-password-link:focus-visible,.additional-content-link:focus-visible{outline:2px solid var(--p-primary-color, #2563eb);outline-offset:.2rem;border-radius:.2rem}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.forgot-password-container+.additional-content-list{margin-top:.75rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.login-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.login-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .forgot-password-link,:host-context(.app-dark) .forgot-password-link,:host-context(.dark) .forgot-password-link,:host-context(.dark-mode) .forgot-password-link,:host-context([data-theme=\"dark\"]) .forgot-password-link,:host-context(.p-dark) .additional-content-link,:host-context(.app-dark) .additional-content-link,:host-context(.dark) .additional-content-link,:host-context(.dark-mode) .additional-content-link,:host-context([data-theme=\"dark\"]) .additional-content-link{color:var(--p-primary-color, #60a5fa)}:host-context(.p-dark) .forgot-password-link:hover,:host-context(.app-dark) .forgot-password-link:hover,:host-context(.dark) .forgot-password-link:hover,:host-context(.dark-mode) .forgot-password-link:hover,:host-context([data-theme=\"dark\"]) .forgot-password-link:hover,:host-context(.p-dark) .additional-content-link:hover,:host-context(.app-dark) .additional-content-link:hover,:host-context(.dark) .additional-content-link:hover,:host-context(.dark-mode) .additional-content-link:hover,:host-context([data-theme=\"dark\"]) .additional-content-link:hover{color:var(--p-primary-hover-color, #93c5fd)}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .login-footer,:host-context(.app-dark) .login-footer,:host-context(.dark) .login-footer,:host-context(.dark-mode) .login-footer,:host-context([data-theme=\"dark\"]) .login-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.forgot-password-container{margin-top:.75rem}.additional-content-list{margin-top:.875rem}.forgot-password-container+.additional-content-list{margin-top:.65rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.forgot-password-container,.forgot-password-link,.additional-content-item,.additional-content-link{font-size:.82rem}.additional-content-list{gap:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginCardComponent, isStandalone: true, selector: "pt-login-card", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  @if (loginPageConfig.logoUrl; as logoUrl) {\n    @if (logoUrl.imageUrl) {\n      <div class=\"logo-container\">\n        <img\n          [src]=\"logoUrl.imageUrl\"\n          [alt]=\"logoUrl.altText || 'Logo'\"\n          [style.width]=\"logoUrl.width || '100px'\"\n          [style.height]=\"logoUrl.height || 'auto'\"\n        />\n      </div>\n    }\n  }\n\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: loginPageConfig.title?.color || '#333',\n        'font-size': loginPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ loginPageConfig.title?.text || \"Default Title\" }}\n    </h1>\n  </div>\n\n  @if (loginErrorMessage) {\n    <div class=\"error-message\" role=\"alert\">\n      {{ loginErrorMessage }}\n    </div>\n  }\n\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (loginPageConfig.login; as login) {\n      @if (login.errorMessage) {\n        <div class=\"error-message\" role=\"alert\">\n          {{ login.errorMessage }}\n        </div>\n      }\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.usernameField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.passwordField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n\n    @if (loginPageConfig.forgotPasswordConfig; as forgotPasswordConfig) {\n      @if (forgotPasswordConfig.text && forgotPasswordConfig.url) {\n        <div\n          class=\"forgot-password-container\"\n          [ngClass]=\"\n            'forgot-password-' + (forgotPasswordConfig.align || 'center')\n          \"\n        >\n          <a\n            [href]=\"forgotPasswordConfig.url\"\n            [target]=\"forgotPasswordConfig.target || '_self'\"\n            [rel]=\"\n              forgotPasswordConfig.target === '_blank'\n                ? 'noopener noreferrer'\n                : null\n            \"\n            [ngStyle]=\"forgotPasswordConfig.style\"\n            [class]=\"forgotPasswordConfig.styleClass || 'forgot-password-link'\"\n          >\n            {{ forgotPasswordConfig.text }}\n          </a>\n        </div>\n      }\n    }\n\n    @if (visibleAdditionalContent.length > 0) {\n      <div class=\"additional-content-list\">\n        @for (item of visibleAdditionalContent; track item.id || $index) {\n          <div\n            class=\"additional-content-item\"\n            [ngClass]=\"getAdditionalContentClass(item)\"\n            [ngStyle]=\"item.style\"\n          >\n            @switch (item.type) {\n              @case (\"link\") {\n                @if (item.linkText && item.url) {\n                  <a\n                    [href]=\"item.url\"\n                    [target]=\"item.target || '_self'\"\n                    [rel]=\"getLinkRel(item)\"\n                    [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                    [ngStyle]=\"item.linkStyle\"\n                  >\n                    {{ item.linkText }}\n                  </a>\n                }\n              }\n\n              @case (\"text-with-link\") {\n                @if (\n                  item.linkPosition === \"before\" && item.linkText && item.url\n                ) {\n                  <a\n                    [href]=\"item.url\"\n                    [target]=\"item.target || '_self'\"\n                    [rel]=\"getLinkRel(item)\"\n                    [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                    [ngStyle]=\"item.linkStyle\"\n                  >\n                    {{ item.linkText }}\n                  </a>\n\n                  @if (item.text) {\n                    <span class=\"additional-content-text\">\n                      {{ item.text }}\n                    </span>\n                  }\n                } @else {\n                  @if (item.text) {\n                    <span class=\"additional-content-text\">\n                      {{ item.text }}\n                    </span>\n                  }\n\n                  @if (item.linkText && item.url) {\n                    <a\n                      [href]=\"item.url\"\n                      [target]=\"item.target || '_self'\"\n                      [rel]=\"getLinkRel(item)\"\n                      [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                      [ngStyle]=\"item.linkStyle\"\n                    >\n                      {{ item.linkText }}\n                    </a>\n                  }\n                }\n              }\n\n              @default {\n                @if (item.text) {\n                  <span class=\"additional-content-text\">\n                    {{ item.text }}\n                  </span>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </form>\n\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n\n    <span>\n      {{ loginPageConfig.footer?.copyright }}\n    </span>\n  </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.forgot-password-container{display:flex;width:100%;box-sizing:border-box;margin-top:.875rem;margin-bottom:0;font-size:.875rem;line-height:1.4}.forgot-password-left{justify-content:flex-start;text-align:left}.forgot-password-center{justify-content:center;text-align:center}.forgot-password-right{justify-content:flex-end;text-align:right}.forgot-password-link,.additional-content-link{color:var(--p-primary-color, #2563eb);font-size:.875rem;font-weight:500;line-height:1.4;text-decoration:none;cursor:pointer;transition:color .16s ease,text-decoration-color .16s ease}.forgot-password-link:hover,.additional-content-link:hover{color:var(--p-primary-hover-color, #1d4ed8);text-decoration:underline;text-underline-offset:.2rem}.forgot-password-link:focus-visible,.additional-content-link:focus-visible{outline:2px solid var(--p-primary-color, #2563eb);outline-offset:.2rem;border-radius:.2rem}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.forgot-password-container+.additional-content-list{margin-top:.75rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.login-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.login-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .forgot-password-link,:host-context(.app-dark) .forgot-password-link,:host-context(.dark) .forgot-password-link,:host-context(.dark-mode) .forgot-password-link,:host-context([data-theme=\"dark\"]) .forgot-password-link,:host-context(.p-dark) .additional-content-link,:host-context(.app-dark) .additional-content-link,:host-context(.dark) .additional-content-link,:host-context(.dark-mode) .additional-content-link,:host-context([data-theme=\"dark\"]) .additional-content-link{color:var(--p-primary-color, #60a5fa)}:host-context(.p-dark) .forgot-password-link:hover,:host-context(.app-dark) .forgot-password-link:hover,:host-context(.dark) .forgot-password-link:hover,:host-context(.dark-mode) .forgot-password-link:hover,:host-context([data-theme=\"dark\"]) .forgot-password-link:hover,:host-context(.p-dark) .additional-content-link:hover,:host-context(.app-dark) .additional-content-link:hover,:host-context(.dark) .additional-content-link:hover,:host-context(.dark-mode) .additional-content-link:hover,:host-context([data-theme=\"dark\"]) .additional-content-link:hover{color:var(--p-primary-hover-color, #93c5fd)}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .login-footer,:host-context(.app-dark) .login-footer,:host-context(.dark) .login-footer,:host-context(.dark-mode) .login-footer,:host-context([data-theme=\"dark\"]) .login-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.forgot-password-container{margin-top:.75rem}.additional-content-list{margin-top:.875rem}.forgot-password-container+.additional-content-list{margin-top:.65rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.forgot-password-container,.forgot-password-link,.additional-content-item,.additional-content-link{font-size:.82rem}.additional-content-list{gap:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginCardComponent, decorators: [{
             type: Component,
@@ -6048,7 +6192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         PTCardModule,
                         PTButtonModule,
                         PTTextInputModule,
-                    ], template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  @if (loginPageConfig.logoUrl?.imageUrl) {\n    <div class=\"logo-container\">\n      <img\n        [src]=\"loginPageConfig.logoUrl?.imageUrl\"\n        [alt]=\"loginPageConfig.logoUrl?.altText || 'Logo'\"\n        [style.width]=\"loginPageConfig.logoUrl?.width || '100px'\"\n        [style.height]=\"loginPageConfig.logoUrl?.height || 'auto'\"\n      />\n    </div>\n  }\n\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: loginPageConfig.title?.color || '#333',\n        'font-size': loginPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ loginPageConfig.title?.text || \"Default Title\" }}\n    </h1>\n  </div>\n\n  @if (loginErrorMessage) {\n    <div class=\"error-message\" role=\"alert\">\n      {{ loginErrorMessage }}\n    </div>\n  }\n\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (loginPageConfig.login?.errorMessage) {\n      <div class=\"error-message\" role=\"alert\">\n        {{ loginPageConfig.login?.errorMessage }}\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.usernameField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.passwordField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n\n    @if (\n      loginPageConfig.forgotPasswordConfig?.text &&\n      loginPageConfig.forgotPasswordConfig?.url\n    ) {\n      <div\n        class=\"forgot-password-container\"\n        [ngClass]=\"\n          'forgot-password-' +\n          (loginPageConfig.forgotPasswordConfig?.align || 'center')\n        \"\n      >\n        <a\n          [href]=\"loginPageConfig.forgotPasswordConfig?.url\"\n          [target]=\"loginPageConfig.forgotPasswordConfig?.target || '_self'\"\n          [rel]=\"\n            loginPageConfig.forgotPasswordConfig?.target === '_blank'\n              ? 'noopener noreferrer'\n              : null\n          \"\n          [ngStyle]=\"loginPageConfig.forgotPasswordConfig?.style\"\n          [class]=\"\n            loginPageConfig.forgotPasswordConfig?.styleClass ||\n            'forgot-password-link'\n          \"\n        >\n          {{ loginPageConfig.forgotPasswordConfig?.text }}\n        </a>\n      </div>\n    }\n\n    @if (visibleAdditionalContent.length > 0) {\n      <div class=\"additional-content-list\">\n        @for (item of visibleAdditionalContent; track item.id || $index) {\n          <div\n            class=\"additional-content-item\"\n            [ngClass]=\"getAdditionalContentClass(item)\"\n            [ngStyle]=\"item.style\"\n          >\n            @switch (item.type) {\n              @case (\"link\") {\n                @if (item.linkText && item.url) {\n                  <a\n                    [href]=\"item.url\"\n                    [target]=\"item.target || '_self'\"\n                    [rel]=\"getLinkRel(item)\"\n                    [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                    [ngStyle]=\"item.linkStyle\"\n                  >\n                    {{ item.linkText }}\n                  </a>\n                }\n              }\n\n              @case (\"text-with-link\") {\n                @if (\n                  item.linkPosition === \"before\" && item.linkText && item.url\n                ) {\n                  <a\n                    [href]=\"item.url\"\n                    [target]=\"item.target || '_self'\"\n                    [rel]=\"getLinkRel(item)\"\n                    [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                    [ngStyle]=\"item.linkStyle\"\n                  >\n                    {{ item.linkText }}\n                  </a>\n\n                  @if (item.text) {\n                    <span class=\"additional-content-text\">\n                      {{ item.text }}\n                    </span>\n                  }\n                } @else {\n                  @if (item.text) {\n                    <span class=\"additional-content-text\">\n                      {{ item.text }}\n                    </span>\n                  }\n\n                  @if (item.linkText && item.url) {\n                    <a\n                      [href]=\"item.url\"\n                      [target]=\"item.target || '_self'\"\n                      [rel]=\"getLinkRel(item)\"\n                      [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                      [ngStyle]=\"item.linkStyle\"\n                    >\n                      {{ item.linkText }}\n                    </a>\n                  }\n                }\n              }\n\n              @default {\n                @if (item.text) {\n                  <span class=\"additional-content-text\">\n                    {{ item.text }}\n                  </span>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </form>\n\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n\n    <span>\n      {{ loginPageConfig.footer?.copyright }}\n    </span>\n  </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.forgot-password-container{display:flex;width:100%;box-sizing:border-box;margin-top:.875rem;margin-bottom:0;font-size:.875rem;line-height:1.4}.forgot-password-left{justify-content:flex-start;text-align:left}.forgot-password-center{justify-content:center;text-align:center}.forgot-password-right{justify-content:flex-end;text-align:right}.forgot-password-link,.additional-content-link{color:var(--p-primary-color, #2563eb);font-size:.875rem;font-weight:500;line-height:1.4;text-decoration:none;cursor:pointer;transition:color .16s ease,text-decoration-color .16s ease}.forgot-password-link:hover,.additional-content-link:hover{color:var(--p-primary-hover-color, #1d4ed8);text-decoration:underline;text-underline-offset:.2rem}.forgot-password-link:focus-visible,.additional-content-link:focus-visible{outline:2px solid var(--p-primary-color, #2563eb);outline-offset:.2rem;border-radius:.2rem}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.forgot-password-container+.additional-content-list{margin-top:.75rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.login-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.login-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .forgot-password-link,:host-context(.app-dark) .forgot-password-link,:host-context(.dark) .forgot-password-link,:host-context(.dark-mode) .forgot-password-link,:host-context([data-theme=\"dark\"]) .forgot-password-link,:host-context(.p-dark) .additional-content-link,:host-context(.app-dark) .additional-content-link,:host-context(.dark) .additional-content-link,:host-context(.dark-mode) .additional-content-link,:host-context([data-theme=\"dark\"]) .additional-content-link{color:var(--p-primary-color, #60a5fa)}:host-context(.p-dark) .forgot-password-link:hover,:host-context(.app-dark) .forgot-password-link:hover,:host-context(.dark) .forgot-password-link:hover,:host-context(.dark-mode) .forgot-password-link:hover,:host-context([data-theme=\"dark\"]) .forgot-password-link:hover,:host-context(.p-dark) .additional-content-link:hover,:host-context(.app-dark) .additional-content-link:hover,:host-context(.dark) .additional-content-link:hover,:host-context(.dark-mode) .additional-content-link:hover,:host-context([data-theme=\"dark\"]) .additional-content-link:hover{color:var(--p-primary-hover-color, #93c5fd)}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .login-footer,:host-context(.app-dark) .login-footer,:host-context(.dark) .login-footer,:host-context(.dark-mode) .login-footer,:host-context([data-theme=\"dark\"]) .login-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.forgot-password-container{margin-top:.75rem}.additional-content-list{margin-top:.875rem}.forgot-password-container+.additional-content-list{margin-top:.65rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.forgot-password-container,.forgot-password-link,.additional-content-item,.additional-content-link{font-size:.82rem}.additional-content-list{gap:.5rem}}\n"] }]
+                    ], template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  @if (loginPageConfig.logoUrl; as logoUrl) {\n    @if (logoUrl.imageUrl) {\n      <div class=\"logo-container\">\n        <img\n          [src]=\"logoUrl.imageUrl\"\n          [alt]=\"logoUrl.altText || 'Logo'\"\n          [style.width]=\"logoUrl.width || '100px'\"\n          [style.height]=\"logoUrl.height || 'auto'\"\n        />\n      </div>\n    }\n  }\n\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: loginPageConfig.title?.color || '#333',\n        'font-size': loginPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ loginPageConfig.title?.text || \"Default Title\" }}\n    </h1>\n  </div>\n\n  @if (loginErrorMessage) {\n    <div class=\"error-message\" role=\"alert\">\n      {{ loginErrorMessage }}\n    </div>\n  }\n\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (loginPageConfig.login; as login) {\n      @if (login.errorMessage) {\n        <div class=\"error-message\" role=\"alert\">\n          {{ login.errorMessage }}\n        </div>\n      }\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.usernameField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.passwordField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n\n    @if (loginPageConfig.forgotPasswordConfig; as forgotPasswordConfig) {\n      @if (forgotPasswordConfig.text && forgotPasswordConfig.url) {\n        <div\n          class=\"forgot-password-container\"\n          [ngClass]=\"\n            'forgot-password-' + (forgotPasswordConfig.align || 'center')\n          \"\n        >\n          <a\n            [href]=\"forgotPasswordConfig.url\"\n            [target]=\"forgotPasswordConfig.target || '_self'\"\n            [rel]=\"\n              forgotPasswordConfig.target === '_blank'\n                ? 'noopener noreferrer'\n                : null\n            \"\n            [ngStyle]=\"forgotPasswordConfig.style\"\n            [class]=\"forgotPasswordConfig.styleClass || 'forgot-password-link'\"\n          >\n            {{ forgotPasswordConfig.text }}\n          </a>\n        </div>\n      }\n    }\n\n    @if (visibleAdditionalContent.length > 0) {\n      <div class=\"additional-content-list\">\n        @for (item of visibleAdditionalContent; track item.id || $index) {\n          <div\n            class=\"additional-content-item\"\n            [ngClass]=\"getAdditionalContentClass(item)\"\n            [ngStyle]=\"item.style\"\n          >\n            @switch (item.type) {\n              @case (\"link\") {\n                @if (item.linkText && item.url) {\n                  <a\n                    [href]=\"item.url\"\n                    [target]=\"item.target || '_self'\"\n                    [rel]=\"getLinkRel(item)\"\n                    [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                    [ngStyle]=\"item.linkStyle\"\n                  >\n                    {{ item.linkText }}\n                  </a>\n                }\n              }\n\n              @case (\"text-with-link\") {\n                @if (\n                  item.linkPosition === \"before\" && item.linkText && item.url\n                ) {\n                  <a\n                    [href]=\"item.url\"\n                    [target]=\"item.target || '_self'\"\n                    [rel]=\"getLinkRel(item)\"\n                    [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                    [ngStyle]=\"item.linkStyle\"\n                  >\n                    {{ item.linkText }}\n                  </a>\n\n                  @if (item.text) {\n                    <span class=\"additional-content-text\">\n                      {{ item.text }}\n                    </span>\n                  }\n                } @else {\n                  @if (item.text) {\n                    <span class=\"additional-content-text\">\n                      {{ item.text }}\n                    </span>\n                  }\n\n                  @if (item.linkText && item.url) {\n                    <a\n                      [href]=\"item.url\"\n                      [target]=\"item.target || '_self'\"\n                      [rel]=\"getLinkRel(item)\"\n                      [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                      [ngStyle]=\"item.linkStyle\"\n                    >\n                      {{ item.linkText }}\n                    </a>\n                  }\n                }\n              }\n\n              @default {\n                @if (item.text) {\n                  <span class=\"additional-content-text\">\n                    {{ item.text }}\n                  </span>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </form>\n\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n\n    <span>\n      {{ loginPageConfig.footer?.copyright }}\n    </span>\n  </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.forgot-password-container{display:flex;width:100%;box-sizing:border-box;margin-top:.875rem;margin-bottom:0;font-size:.875rem;line-height:1.4}.forgot-password-left{justify-content:flex-start;text-align:left}.forgot-password-center{justify-content:center;text-align:center}.forgot-password-right{justify-content:flex-end;text-align:right}.forgot-password-link,.additional-content-link{color:var(--p-primary-color, #2563eb);font-size:.875rem;font-weight:500;line-height:1.4;text-decoration:none;cursor:pointer;transition:color .16s ease,text-decoration-color .16s ease}.forgot-password-link:hover,.additional-content-link:hover{color:var(--p-primary-hover-color, #1d4ed8);text-decoration:underline;text-underline-offset:.2rem}.forgot-password-link:focus-visible,.additional-content-link:focus-visible{outline:2px solid var(--p-primary-color, #2563eb);outline-offset:.2rem;border-radius:.2rem}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.forgot-password-container+.additional-content-list{margin-top:.75rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.login-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.login-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .forgot-password-link,:host-context(.app-dark) .forgot-password-link,:host-context(.dark) .forgot-password-link,:host-context(.dark-mode) .forgot-password-link,:host-context([data-theme=\"dark\"]) .forgot-password-link,:host-context(.p-dark) .additional-content-link,:host-context(.app-dark) .additional-content-link,:host-context(.dark) .additional-content-link,:host-context(.dark-mode) .additional-content-link,:host-context([data-theme=\"dark\"]) .additional-content-link{color:var(--p-primary-color, #60a5fa)}:host-context(.p-dark) .forgot-password-link:hover,:host-context(.app-dark) .forgot-password-link:hover,:host-context(.dark) .forgot-password-link:hover,:host-context(.dark-mode) .forgot-password-link:hover,:host-context([data-theme=\"dark\"]) .forgot-password-link:hover,:host-context(.p-dark) .additional-content-link:hover,:host-context(.app-dark) .additional-content-link:hover,:host-context(.dark) .additional-content-link:hover,:host-context(.dark-mode) .additional-content-link:hover,:host-context([data-theme=\"dark\"]) .additional-content-link:hover{color:var(--p-primary-hover-color, #93c5fd)}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .login-footer,:host-context(.app-dark) .login-footer,:host-context(.dark) .login-footer,:host-context(.dark-mode) .login-footer,:host-context([data-theme=\"dark\"]) .login-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.forgot-password-container{margin-top:.75rem}.additional-content-list{margin-top:.875rem}.forgot-password-container+.additional-content-list{margin-top:.65rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.forgot-password-container,.forgot-password-link,.additional-content-item,.additional-content-link{font-size:.82rem}.additional-content-list{gap:.5rem}}\n"] }]
         }], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { loginPageConfig: [{
                 type: Input
             }], loginErrorMessage: [{
@@ -6475,7 +6619,7 @@ class PTConfirmDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTConfirmDialogComponent, deps: [{ token: i1$1.ConfirmationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTConfirmDialogComponent, isStandalone: false, selector: "pt-confirm-dialog", inputs: { dialogConfig: "dialogConfig", formGroup: "formGroup" }, outputs: { confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, providers: [ConfirmationService], queries: [{ propertyName: "dialogBodyTpl", first: true, predicate: ["dialogBody"], descendants: true }, { propertyName: "projectedFormBuilder", first: true, predicate: PTFormBuilderComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-confirm-dialog\">\n  <p-confirmDialog\n    #cd\n    [styleClass]=\"overlayStyleClass\"\n    [appendTo]=\"'body'\"\n    [closable]=\"false\"\n    [closeOnEscape]=\"false\"\n  >\n    <ng-template pTemplate=\"header\"></ng-template>\n\n    <ng-template pTemplate=\"message\">\n      <div class=\"pt-confirm-dialog-wrapper\">\n        <div class=\"pt-confirm-dialog-body\" [ngStyle]=\"getDialogBodyStyle()\">\n          <button\n            type=\"button\"\n            class=\"pt-confirm-dialog-close\"\n            aria-label=\"Fermer\"\n            (click)=\"onCancelClick()\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n\n          <div class=\"pt-confirm-dialog-content\">\n            <div\n              class=\"pt-confirm-dialog-icon-wrapper\"\n              [ngStyle]=\"getIconWrapperStyle()\"\n            >\n              <i\n                class=\"pt-confirm-dialog-icon\"\n                [class]=\"getDialogIconClass()\"\n                [ngStyle]=\"getDialogIconStyle()\"\n              ></i>\n            </div>\n\n            <div class=\"pt-confirm-dialog-text-wrapper\">\n              <h3\n                class=\"pt-confirm-dialog-title\"\n                [ngStyle]=\"getDialogHeaderStyle()\"\n              >\n                {{ getDialogHeaderText() }}\n              </h3>\n\n              @if (dialogBodyTpl) {\n                <ng-container [ngTemplateOutlet]=\"dialogBodyTpl\"></ng-container>\n              } @else {\n                <p\n                  class=\"pt-confirm-dialog-message-text\"\n                  [ngStyle]=\"getDialogContentStyle()\"\n                >\n                  {{ getDialogContentText() }}\n                </p>\n              }\n            </div>\n          </div>\n        </div>\n\n        @if (hasFooter()) {\n          <div class=\"pt-confirm-dialog-custom-footer\">\n            <div\n              class=\"pt-confirm-dialog-footer-buttons\"\n              [ngStyle]=\"getFooterButtonsStyle()\"\n            >\n              @if (dialogConfig.cancelButtonConfig) {\n                <div class=\"pt-confirm-dialog-button-slot\">\n                  <pt-button\n                    [buttonConfig]=\"cancelButtonModel\"\n                    (click)=\"onCancelClick()\"\n                  ></pt-button>\n                </div>\n              }\n\n              @if (dialogConfig.confirmButtonConfig) {\n                <div class=\"pt-confirm-dialog-button-slot\">\n                  <pt-button\n                    [buttonConfig]=\"confirmButtonModel\"\n                    (click)=\"onConfirmClick()\"\n                  ></pt-button>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .pt-confirm-dialog-overlay.p-dialog,::ng-deep .p-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirm-dialog,::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirmdialog,::ng-deep .p-confirmdialog.pt-confirm-dialog-overlay{width:560px!important;max-width:calc(100vw - 2rem)!important;height:auto!important;min-height:unset!important;max-height:none!important;border:0!important;border-radius:28px!important;overflow:hidden!important;background:var(--pt-confirm-dialog-bg, #ffffff)!important;box-shadow:var( --pt-confirm-dialog-shadow, 0 24px 60px rgba(15, 23, 42, .3) )!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-header{display:none!important;padding:0!important;border:0!important;height:0!important;min-height:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-content{padding:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}::ng-deep .pt-confirm-dialog-overlay .p-confirm-dialog-message,::ng-deep .pt-confirm-dialog-overlay .p-confirmdialog-message{display:block!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-footer{display:none!important;padding:0!important;margin:0!important;border:0!important;height:0!important;min-height:0!important;max-height:0!important}.pt-confirm-dialog-wrapper{width:100%;background:var(--pt-confirm-dialog-bg, #ffffff);color:var(--pt-confirm-dialog-text, #0f172a);overflow:hidden}.pt-confirm-dialog-body{position:relative;width:100%;min-height:190px;padding:2rem 2.25rem;border-bottom:1px solid var(--pt-confirm-dialog-border, #e5e7eb);box-sizing:border-box}.pt-confirm-dialog-no-footer .pt-confirm-dialog-body{border-bottom:0!important}.pt-confirm-dialog-content{display:flex;align-items:center;gap:1.25rem;min-height:126px;padding-right:3rem}.pt-confirm-dialog-text-wrapper{flex:1;min-width:0}.pt-confirm-dialog-title{margin:0 0 .45rem;line-height:1.25;color:var(--pt-confirm-dialog-title, #0f172a)}.pt-confirm-dialog-message-text{margin:0;line-height:1.55;font-weight:400;color:var(--pt-confirm-dialog-message, #475569)}.pt-confirm-dialog-close{position:absolute;top:1.25rem;right:1.25rem;z-index:5;width:2.75rem;height:2.75rem;border:2px solid currentColor;border-radius:999px;background:var(--pt-confirm-dialog-close-bg, rgba(255, 255, 255, .85));color:var(--pt-confirm-dialog-close-color, #64748b);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:background-color .2s ease,color .2s ease,transform .2s ease}.pt-confirm-dialog-close:hover{background:var(--pt-confirm-dialog-close-hover-bg, #ffffff);color:var(--pt-confirm-dialog-close-hover-color, #0f172a);transform:scale(1.04)}.pt-confirm-dialog-close i{font-size:1.15rem}.pt-confirm-dialog-icon-wrapper{width:4.25rem;height:4.25rem;min-width:4.25rem;border:1px solid;border-radius:999px;display:flex;align-items:center;justify-content:center}.pt-confirm-dialog-icon{line-height:1}.pt-confirm-dialog-custom-footer{width:100%;padding:1rem 1.5rem 1.35rem;background:var(--pt-confirm-dialog-footer-bg, #ffffff);box-sizing:border-box}.pt-confirm-dialog-footer-buttons{display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:.75rem;width:100%}.pt-confirm-dialog-button-slot{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot>pt-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot p-button,::ng-deep .pt-confirm-dialog-button-slot>p-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{width:auto!important;min-width:7.5rem;max-width:max-content!important;border-radius:999px!important;padding:.7rem 1.35rem!important;font-weight:600!important;white-space:nowrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button .pi{margin-right:.45rem}@media(max-width:768px){.pt-confirm-dialog-body{min-height:170px;padding:1.5rem}.pt-confirm-dialog-content{gap:.85rem;padding-right:2rem}.pt-confirm-dialog-icon-wrapper{width:3.2rem;height:3.2rem;min-width:3.2rem}.pt-confirm-dialog-footer-buttons{justify-content:center;flex-wrap:wrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{min-width:6.5rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$6.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTConfirmDialogComponent, isStandalone: false, selector: "pt-confirm-dialog", inputs: { dialogConfig: "dialogConfig", formGroup: "formGroup" }, outputs: { confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, providers: [ConfirmationService], queries: [{ propertyName: "dialogBodyTpl", first: true, predicate: ["dialogBody"], descendants: true }, { propertyName: "projectedFormBuilder", first: true, predicate: PTFormBuilderComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-confirm-dialog\">\n  <p-confirmDialog\n    #cd\n    [styleClass]=\"overlayStyleClass\"\n    [appendTo]=\"'body'\"\n    [closable]=\"false\"\n    [closeOnEscape]=\"false\"\n  >\n    <ng-template pTemplate=\"header\"></ng-template>\n\n    <ng-template pTemplate=\"message\">\n      <div class=\"pt-confirm-dialog-wrapper\">\n        <div class=\"pt-confirm-dialog-body\" [ngStyle]=\"getDialogBodyStyle()\">\n          <button\n            type=\"button\"\n            class=\"pt-confirm-dialog-close\"\n            aria-label=\"Fermer\"\n            (click)=\"onCancelClick()\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n\n          <div class=\"pt-confirm-dialog-content\">\n            <div\n              class=\"pt-confirm-dialog-icon-wrapper\"\n              [ngStyle]=\"getIconWrapperStyle()\"\n            >\n              <i\n                class=\"pt-confirm-dialog-icon\"\n                [class]=\"getDialogIconClass()\"\n                [ngStyle]=\"getDialogIconStyle()\"\n              ></i>\n            </div>\n\n            <div class=\"pt-confirm-dialog-text-wrapper\">\n              <h3\n                class=\"pt-confirm-dialog-title\"\n                [ngStyle]=\"getDialogHeaderStyle()\"\n              >\n                {{ getDialogHeaderText() }}\n              </h3>\n\n              @if (dialogBodyTpl) {\n                <ng-container [ngTemplateOutlet]=\"dialogBodyTpl\"></ng-container>\n              } @else {\n                <p\n                  class=\"pt-confirm-dialog-message-text\"\n                  [ngStyle]=\"getDialogContentStyle()\"\n                >\n                  {{ getDialogContentText() }}\n                </p>\n              }\n            </div>\n          </div>\n        </div>\n\n        @if (hasFooter()) {\n          <div class=\"pt-confirm-dialog-custom-footer\">\n            <div\n              class=\"pt-confirm-dialog-footer-buttons\"\n              [ngStyle]=\"getFooterButtonsStyle()\"\n            >\n              @if (dialogConfig.cancelButtonConfig) {\n                <div class=\"pt-confirm-dialog-button-slot\">\n                  <pt-button\n                    [buttonConfig]=\"cancelButtonModel\"\n                    (click)=\"onCancelClick()\"\n                  ></pt-button>\n                </div>\n              }\n\n              @if (dialogConfig.confirmButtonConfig) {\n                <div class=\"pt-confirm-dialog-button-slot\">\n                  <pt-button\n                    [buttonConfig]=\"confirmButtonModel\"\n                    (click)=\"onConfirmClick()\"\n                  ></pt-button>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .pt-confirm-dialog-overlay.p-dialog,::ng-deep .p-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirm-dialog,::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay,::ng-deep .pt-confirm-dialog-overlay.p-confirmdialog,::ng-deep .p-confirmdialog.pt-confirm-dialog-overlay{width:560px!important;max-width:calc(100vw - 2rem)!important;height:auto!important;min-height:unset!important;max-height:none!important;border:0!important;border-radius:28px!important;overflow:hidden!important;background:var(--pt-confirm-dialog-bg, #ffffff)!important;box-shadow:var( --pt-confirm-dialog-shadow, 0 24px 60px rgba(15, 23, 42, .3) )!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-header{display:none!important;padding:0!important;border:0!important;height:0!important;min-height:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-content{padding:0!important;margin:0!important;overflow:hidden!important;background:transparent!important}::ng-deep .pt-confirm-dialog-overlay .p-confirm-dialog-message,::ng-deep .pt-confirm-dialog-overlay .p-confirmdialog-message{display:block!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .pt-confirm-dialog-overlay .p-dialog-footer{display:none!important;padding:0!important;margin:0!important;border:0!important;height:0!important;min-height:0!important;max-height:0!important}.pt-confirm-dialog-wrapper{width:100%;background:var(--pt-confirm-dialog-bg, #ffffff);color:var(--pt-confirm-dialog-text, #0f172a);overflow:hidden}.pt-confirm-dialog-body{position:relative;width:100%;min-height:190px;padding:2rem 2.25rem;border-bottom:1px solid var(--pt-confirm-dialog-border, #e5e7eb);box-sizing:border-box}.pt-confirm-dialog-no-footer .pt-confirm-dialog-body{border-bottom:0!important}.pt-confirm-dialog-content{display:flex;align-items:center;gap:1.25rem;min-height:126px;padding-right:3rem}.pt-confirm-dialog-text-wrapper{flex:1;min-width:0}.pt-confirm-dialog-title{margin:0 0 .45rem;line-height:1.25;color:var(--pt-confirm-dialog-title, #0f172a)}.pt-confirm-dialog-message-text{margin:0;line-height:1.55;font-weight:400;color:var(--pt-confirm-dialog-message, #475569)}.pt-confirm-dialog-close{position:absolute;top:1.25rem;right:1.25rem;z-index:5;width:2.75rem;height:2.75rem;border:2px solid currentColor;border-radius:999px;background:var(--pt-confirm-dialog-close-bg, rgba(255, 255, 255, .85));color:var(--pt-confirm-dialog-close-color, #64748b);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:background-color .2s ease,color .2s ease,transform .2s ease}.pt-confirm-dialog-close:hover{background:var(--pt-confirm-dialog-close-hover-bg, #ffffff);color:var(--pt-confirm-dialog-close-hover-color, #0f172a);transform:scale(1.04)}.pt-confirm-dialog-close i{font-size:1.15rem}.pt-confirm-dialog-icon-wrapper{width:4.25rem;height:4.25rem;min-width:4.25rem;border:1px solid;border-radius:999px;display:flex;align-items:center;justify-content:center}.pt-confirm-dialog-icon{line-height:1}.pt-confirm-dialog-custom-footer{width:100%;padding:1rem 1.5rem 1.35rem;background:var(--pt-confirm-dialog-footer-bg, #ffffff);box-sizing:border-box}.pt-confirm-dialog-footer-buttons{display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:.75rem;width:100%}.pt-confirm-dialog-button-slot{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot>pt-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot p-button,::ng-deep .pt-confirm-dialog-button-slot>p-button{display:inline-flex!important;flex:0 0 auto!important;width:auto!important;max-width:max-content!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{width:auto!important;min-width:7.5rem;max-width:max-content!important;border-radius:999px!important;padding:.7rem 1.35rem!important;font-weight:600!important;white-space:nowrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button .pi{margin-right:.45rem}@media(max-width:768px){.pt-confirm-dialog-body{min-height:170px;padding:1.5rem}.pt-confirm-dialog-content{gap:.85rem;padding-right:2rem}.pt-confirm-dialog-icon-wrapper{width:3.2rem;height:3.2rem;min-width:3.2rem}.pt-confirm-dialog-footer-buttons{justify-content:center;flex-wrap:wrap!important}::ng-deep .pt-confirm-dialog-button-slot .p-button,::ng-deep .pt-confirm-dialog-button-slot button{min-width:6.5rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$7.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTConfirmDialogComponent, decorators: [{
             type: Component,
@@ -6732,6 +6876,272 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+class PTOtpCardComponent {
+    set otpErrorMessage(value) {
+        this.externalOtpErrorMessage = value;
+        if (value) {
+            this.otpValidated = false;
+        }
+    }
+    constructor(fb) {
+        this.fb = fb;
+        this.otpValidated = null;
+        this.otpSubmit = new EventEmitter();
+        this.backClick = new EventEmitter();
+        this.externalOtpErrorMessage = null;
+        this.destroy$ = new Subject();
+        this.formGroup = this.fb.group({});
+    }
+    ngOnInit() {
+        this.initializeDefaults();
+        this.setupFormField();
+        this.formGroup.patchValue({
+            otpCode: this.otpPageConfig.otp?.otpCode ?? '',
+        });
+        this.updateButtonDisabledState(this.formGroup.invalid);
+        this.formGroup.statusChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.updateButtonDisabledState(this.formGroup.invalid);
+        });
+        this.otpControl?.valueChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.clearOtpValidationState();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    get otpControl() {
+        const otpCodeField = this.otpPageConfig.otpCodeField;
+        if (!otpCodeField) {
+            return null;
+        }
+        return this.formGroup.get(otpCodeField.name);
+    }
+    get otpIconClass() {
+        return this.otpValidated === true ? 'pi pi-lock-open' : 'pi pi-lock';
+    }
+    get otpIconStateClass() {
+        return this.otpValidated === true ? 'otp-icon-valid' : 'otp-icon-invalid';
+    }
+    onSubmit() {
+        if (this.formGroup.invalid) {
+            this.formGroup.markAllAsTouched();
+            this.otpValidated = false;
+            this.otpPageConfig.otp = {
+                ...this.otpPageConfig.otp,
+                errorMessage: this.otpPageConfig.otp?.emptyFieldErrorMessage ??
+                    'Veuillez saisir le code de vérification.',
+            };
+            return;
+        }
+        this.otpValidated = null;
+        this.externalOtpErrorMessage = null;
+        this.otpPageConfig.otp = {
+            ...this.otpPageConfig.otp,
+            errorMessage: '',
+        };
+        const otpCode = String(this.formGroup.getRawValue().otpCode ?? '').trim();
+        this.otpSubmit.emit(otpCode);
+    }
+    onBack() {
+        this.backClick.emit();
+    }
+    initializeDefaults() {
+        this.otpPageConfig.logoUrl = {
+            altText: 'Logo',
+            imageUrl: '',
+            width: '100px',
+            height: 'auto',
+            ...this.otpPageConfig.logoUrl,
+        };
+        this.otpPageConfig.title = {
+            text: 'Vérification à deux facteurs',
+            position: 'center',
+            color: '#333',
+            fontSize: '24px',
+            ...this.otpPageConfig.title,
+        };
+        this.otpPageConfig.description = {
+            text: 'Saisissez le code de vérification envoyé à votre adresse e-mail.',
+            color: 'var(--p-text-muted-color, #64748b)',
+            fontSize: '0.95rem',
+            ...this.otpPageConfig.description,
+        };
+        this.otpPageConfig.otp = {
+            otpCode: '',
+            errorMessage: '',
+            emptyFieldErrorMessage: 'Veuillez saisir le code de vérification.',
+            ...this.otpPageConfig.otp,
+        };
+        this.otpPageConfig.otpCardConfig = {
+            noBorder: true,
+            width: '400px',
+            padding: '40px',
+            ...this.otpPageConfig.otpCardConfig,
+        };
+        this.otpPageConfig.otpCodeField = {
+            name: 'otpCode',
+            label: 'Code de vérification',
+            required: true,
+            placeholder: 'Saisissez le code à 6 chiffres',
+            type: FormInputTypeEnum.OTP,
+            otpLength: 6,
+            otpIntegerOnly: true,
+            otpMask: false,
+            width: '100%',
+            ...this.otpPageConfig.otpCodeField,
+        };
+        this.otpPageConfig.buttonConfig = {
+            label: 'Vérifier le code',
+            type: 'submit',
+            icon: 'pi pi-shield',
+            iconPos: 'left',
+            styleClass: 'p-button-primary',
+            disabled: true,
+            width: '100%',
+            ...this.otpPageConfig.buttonConfig,
+        };
+        this.otpPageConfig.backButtonConfig = {
+            label: 'Retour',
+            type: 'button',
+            icon: 'pi pi-arrow-left',
+            iconPos: 'left',
+            styleClass: 'p-button-text',
+            width: '100%',
+            ...this.otpPageConfig.backButtonConfig,
+        };
+        this.otpPageConfig.footer = {
+            version: 'V1.0',
+            copyright: 'Your Company © 2026',
+            ...this.otpPageConfig.footer,
+        };
+    }
+    setupFormField() {
+        const otpCodeField = this.otpPageConfig.otpCodeField;
+        const otpLength = otpCodeField.otpLength ?? 6;
+        const integerOnly = otpCodeField.otpIntegerOnly ?? true;
+        const otpPattern = integerOnly
+            ? new RegExp(`^[0-9]{${otpLength}}$`)
+            : new RegExp(`^[A-Za-z0-9]{${otpLength}}$`);
+        const validators = otpCodeField.required
+            ? [Validators.required, Validators.pattern(otpPattern)]
+            : [Validators.pattern(otpPattern)];
+        this.formGroup.addControl(otpCodeField.name, this.fb.control(this.otpPageConfig.otp?.otpCode ?? '', validators));
+    }
+    clearOtpValidationState() {
+        this.otpValidated = null;
+        this.externalOtpErrorMessage = null;
+        if (this.otpPageConfig.otp?.errorMessage) {
+            this.otpPageConfig.otp = {
+                ...this.otpPageConfig.otp,
+                errorMessage: '',
+            };
+        }
+    }
+    updateButtonDisabledState(disabled) {
+        this.otpPageConfig.buttonConfig = {
+            ...this.otpPageConfig.buttonConfig,
+            disabled,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTOtpCardComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTOtpCardComponent, isStandalone: true, selector: "pt-otp-card", inputs: { otpPageConfig: "otpPageConfig", otpErrorMessage: "otpErrorMessage", otpValidated: "otpValidated" }, outputs: { otpSubmit: "otpSubmit", backClick: "backClick" }, ngImport: i0, template: "<pt-card [config]=\"otpPageConfig.otpCardConfig!\">\n  @if (otpPageConfig.logoUrl; as logoUrl) {\n    @if (logoUrl.imageUrl) {\n      <div class=\"logo-container\">\n        <img\n          [src]=\"logoUrl.imageUrl\"\n          [alt]=\"logoUrl.altText || 'Logo'\"\n          [style.width]=\"logoUrl.width || '100px'\"\n          [style.height]=\"logoUrl.height || 'auto'\"\n        />\n      </div>\n    }\n  }\n\n  <div\n    class=\"title-container\"\n    [style.text-align]=\"otpPageConfig.title?.position || 'center'\"\n  >\n    <h1\n      [ngStyle]=\"{\n        color: otpPageConfig.title?.color || '#333',\n        'font-size': otpPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ otpPageConfig.title?.text }}\n    </h1>\n  </div>\n\n  @if (otpPageConfig.description; as description) {\n    @if (description.text) {\n      <p\n        class=\"description\"\n        [ngStyle]=\"{\n          color: description.color,\n          'font-size': description.fontSize,\n        }\"\n      >\n        {{ description.text }}\n      </p>\n    }\n  }\n\n  <div class=\"otp-icon-container\" aria-hidden=\"true\">\n    <div class=\"otp-icon\" [ngClass]=\"otpIconStateClass\">\n      <i [class]=\"otpIconClass\"></i>\n    </div>\n  </div>\n\n  @if (externalOtpErrorMessage) {\n    <div class=\"error-message\" role=\"alert\">\n      {{ externalOtpErrorMessage }}\n    </div>\n  }\n\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (otpPageConfig.otp; as otp) {\n      @if (otp.errorMessage) {\n        <div class=\"error-message\" role=\"alert\">\n          {{ otp.errorMessage }}\n        </div>\n      }\n    }\n\n    <div class=\"field\">\n      <pt-otp-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"otpPageConfig.otpCodeField!\"\n      ></pt-otp-input>\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"otpPageConfig.buttonConfig!\"></pt-button>\n    </div>\n\n    <div class=\"back-btn\">\n      <pt-button\n        [buttonConfig]=\"otpPageConfig.backButtonConfig!\"\n        (click)=\"onBack()\"\n      ></pt-button>\n    </div>\n  </form>\n\n  <div class=\"otp-footer\">\n    {{ otpPageConfig.footer?.version }}\n\n    <span>\n      {{ otpPageConfig.footer?.copyright }}\n    </span>\n  </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:.75rem}.title-container h1{margin:0;line-height:1.25}.description{margin:0;line-height:1.5;text-align:center}.otp-icon-container{display:flex;justify-content:center;width:100%;margin:1.25rem 0}.otp-icon{display:flex;align-items:center;justify-content:center;width:4.75rem;height:4.75rem;border:2px solid;border-radius:50%;transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease}.otp-icon i{font-size:2.1rem;transition:color .25s ease,transform .25s ease}.otp-icon-invalid{border-color:#fecacad9;background:#dc2626e6;box-shadow:0 10px 24px #7f1d1d59,inset 0 1px #ffffff47}.otp-icon-invalid i{color:#fff}.otp-icon-valid{border-color:#bbf7d0e6;background:#16a34af0;box-shadow:0 10px 24px #14532d59,inset 0 1px #ffffff4d;transform:scale(1.04)}.otp-icon-valid i{color:#fff;transform:scale(1.08)}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.submit-btn,.back-btn{display:flex;justify-content:center;width:100%}.back-btn{margin-top:.5rem}:host ::ng-deep .submit-btn pt-button,:host ::ng-deep .back-btn pt-button,:host ::ng-deep .submit-btn p-button,:host ::ng-deep .back-btn p-button,:host ::ng-deep .submit-btn p-button button,:host ::ng-deep .back-btn p-button button{width:100%}.otp-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.otp-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}@media(max-width:480px){.logo-container{margin-bottom:1rem}.otp-icon-container{margin:1rem 0}.otp-icon{width:4rem;height:4rem}.otp-icon i{font-size:1.75rem}.field{margin-bottom:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTOtpInputModule }, { kind: "component", type: PTOtpInputComponent, selector: "pt-otp-input", inputs: ["formGroup", "formField"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTOtpCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-otp-card', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        PTCardModule,
+                        PTButtonModule,
+                        PTOtpInputModule,
+                    ], template: "<pt-card [config]=\"otpPageConfig.otpCardConfig!\">\n  @if (otpPageConfig.logoUrl; as logoUrl) {\n    @if (logoUrl.imageUrl) {\n      <div class=\"logo-container\">\n        <img\n          [src]=\"logoUrl.imageUrl\"\n          [alt]=\"logoUrl.altText || 'Logo'\"\n          [style.width]=\"logoUrl.width || '100px'\"\n          [style.height]=\"logoUrl.height || 'auto'\"\n        />\n      </div>\n    }\n  }\n\n  <div\n    class=\"title-container\"\n    [style.text-align]=\"otpPageConfig.title?.position || 'center'\"\n  >\n    <h1\n      [ngStyle]=\"{\n        color: otpPageConfig.title?.color || '#333',\n        'font-size': otpPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ otpPageConfig.title?.text }}\n    </h1>\n  </div>\n\n  @if (otpPageConfig.description; as description) {\n    @if (description.text) {\n      <p\n        class=\"description\"\n        [ngStyle]=\"{\n          color: description.color,\n          'font-size': description.fontSize,\n        }\"\n      >\n        {{ description.text }}\n      </p>\n    }\n  }\n\n  <div class=\"otp-icon-container\" aria-hidden=\"true\">\n    <div class=\"otp-icon\" [ngClass]=\"otpIconStateClass\">\n      <i [class]=\"otpIconClass\"></i>\n    </div>\n  </div>\n\n  @if (externalOtpErrorMessage) {\n    <div class=\"error-message\" role=\"alert\">\n      {{ externalOtpErrorMessage }}\n    </div>\n  }\n\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (otpPageConfig.otp; as otp) {\n      @if (otp.errorMessage) {\n        <div class=\"error-message\" role=\"alert\">\n          {{ otp.errorMessage }}\n        </div>\n      }\n    }\n\n    <div class=\"field\">\n      <pt-otp-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"otpPageConfig.otpCodeField!\"\n      ></pt-otp-input>\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"otpPageConfig.buttonConfig!\"></pt-button>\n    </div>\n\n    <div class=\"back-btn\">\n      <pt-button\n        [buttonConfig]=\"otpPageConfig.backButtonConfig!\"\n        (click)=\"onBack()\"\n      ></pt-button>\n    </div>\n  </form>\n\n  <div class=\"otp-footer\">\n    {{ otpPageConfig.footer?.version }}\n\n    <span>\n      {{ otpPageConfig.footer?.copyright }}\n    </span>\n  </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:.75rem}.title-container h1{margin:0;line-height:1.25}.description{margin:0;line-height:1.5;text-align:center}.otp-icon-container{display:flex;justify-content:center;width:100%;margin:1.25rem 0}.otp-icon{display:flex;align-items:center;justify-content:center;width:4.75rem;height:4.75rem;border:2px solid;border-radius:50%;transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease}.otp-icon i{font-size:2.1rem;transition:color .25s ease,transform .25s ease}.otp-icon-invalid{border-color:#fecacad9;background:#dc2626e6;box-shadow:0 10px 24px #7f1d1d59,inset 0 1px #ffffff47}.otp-icon-invalid i{color:#fff}.otp-icon-valid{border-color:#bbf7d0e6;background:#16a34af0;box-shadow:0 10px 24px #14532d59,inset 0 1px #ffffff4d;transform:scale(1.04)}.otp-icon-valid i{color:#fff;transform:scale(1.08)}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.submit-btn,.back-btn{display:flex;justify-content:center;width:100%}.back-btn{margin-top:.5rem}:host ::ng-deep .submit-btn pt-button,:host ::ng-deep .back-btn pt-button,:host ::ng-deep .submit-btn p-button,:host ::ng-deep .back-btn p-button,:host ::ng-deep .submit-btn p-button button,:host ::ng-deep .back-btn p-button button{width:100%}.otp-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.otp-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}@media(max-width:480px){.logo-container{margin-bottom:1rem}.otp-icon-container{margin:1rem 0}.otp-icon{width:4rem;height:4rem}.otp-icon i{font-size:1.75rem}.field{margin-bottom:1rem}}\n"] }]
+        }], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { otpPageConfig: [{
+                type: Input,
+                args: [{ required: true }]
+            }], otpErrorMessage: [{
+                type: Input
+            }], otpValidated: [{
+                type: Input
+            }], otpSubmit: [{
+                type: Output
+            }], backClick: [{
+                type: Output
+            }] } });
+
+class PTOtpPageComponent {
+    constructor() {
+        this.otpErrorMessage = null;
+        this.otpValidated = null;
+        this.otpSubmit = new EventEmitter();
+        this.backClick = new EventEmitter();
+        this.defaultCardConfig = {
+            borderRadius: '0',
+            margin: '0',
+            width: '100%',
+            height: '100%',
+            noBorder: true,
+            alignContent: 'center',
+            alignBodyContent: 'center',
+        };
+    }
+    ngOnInit() {
+        this.applyDefaultConfigs();
+    }
+    onOtpSubmit(otpCode) {
+        this.otpSubmit.emit(otpCode);
+    }
+    onBackClick() {
+        this.backClick.emit();
+    }
+    applyDefaultConfigs() {
+        this.otpPageConfig.centerCardConfig = this.applyDefaults(this.otpPageConfig.centerCardConfig);
+        this.otpPageConfig.leftCardConfig = this.applyDefaults(this.otpPageConfig.leftCardConfig);
+        this.otpPageConfig.rightCardConfig = this.applyDefaults(this.otpPageConfig.rightCardConfig);
+    }
+    applyDefaults(config) {
+        return {
+            ...this.defaultCardConfig,
+            ...(config ?? {}),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTOtpPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTOtpPageComponent, isStandalone: false, selector: "pt-otp-page", inputs: { otpPageConfig: "otpPageConfig", otpErrorMessage: "otpErrorMessage", otpValidated: "otpValidated" }, outputs: { otpSubmit: "otpSubmit", backClick: "backClick" }, ngImport: i0, template: "<ng-container>\n  @if (otpPageConfig.position === \"center\") {\n    <div class=\"center-container\">\n      @if (otpPageConfig.centerCardConfig) {\n        <pt-card [config]=\"otpPageConfig.centerCardConfig\">\n          <pt-otp-card\n            [otpPageConfig]=\"otpPageConfig\"\n            [otpErrorMessage]=\"otpErrorMessage\"\n            [otpValidated]=\"otpValidated\"\n            (otpSubmit)=\"onOtpSubmit($event)\"\n            (backClick)=\"onBackClick()\"\n          ></pt-otp-card>\n        </pt-card>\n      }\n    </div>\n  }\n\n  @if (\n    otpPageConfig.position === \"left\" || otpPageConfig.position === \"right\"\n  ) {\n    <div class=\"left-right-container\">\n      @if (otpPageConfig.leftCardConfig) {\n        <pt-card [config]=\"otpPageConfig.leftCardConfig\">\n          @if (otpPageConfig.position === \"left\") {\n            <pt-otp-card\n              [otpPageConfig]=\"otpPageConfig\"\n              [otpErrorMessage]=\"otpErrorMessage\"\n              [otpValidated]=\"otpValidated\"\n              (otpSubmit)=\"onOtpSubmit($event)\"\n              (backClick)=\"onBackClick()\"\n            ></pt-otp-card>\n          }\n        </pt-card>\n      }\n\n      @if (otpPageConfig.rightCardConfig) {\n        <pt-card [config]=\"otpPageConfig.rightCardConfig\">\n          @if (otpPageConfig.position === \"right\") {\n            <pt-otp-card\n              [otpPageConfig]=\"otpPageConfig\"\n              [otpErrorMessage]=\"otpErrorMessage\"\n              [otpValidated]=\"otpValidated\"\n              (otpSubmit)=\"onOtpSubmit($event)\"\n              (backClick)=\"onBackClick()\"\n            ></pt-otp-card>\n          }\n        </pt-card>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".left-right-container{display:flex;width:100%;height:100vh}.left-right-container pt-card{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;max-width:50%;height:100%}.center-container{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;margin:0;padding:0;overflow:hidden;box-sizing:border-box}.center-container pt-card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;box-sizing:border-box}.center-container pt-card pt-otp-card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;margin:0;padding:1rem;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTOtpCardComponent, selector: "pt-otp-card", inputs: ["otpPageConfig", "otpErrorMessage", "otpValidated"], outputs: ["otpSubmit", "backClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTOtpPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-otp-page', standalone: false, template: "<ng-container>\n  @if (otpPageConfig.position === \"center\") {\n    <div class=\"center-container\">\n      @if (otpPageConfig.centerCardConfig) {\n        <pt-card [config]=\"otpPageConfig.centerCardConfig\">\n          <pt-otp-card\n            [otpPageConfig]=\"otpPageConfig\"\n            [otpErrorMessage]=\"otpErrorMessage\"\n            [otpValidated]=\"otpValidated\"\n            (otpSubmit)=\"onOtpSubmit($event)\"\n            (backClick)=\"onBackClick()\"\n          ></pt-otp-card>\n        </pt-card>\n      }\n    </div>\n  }\n\n  @if (\n    otpPageConfig.position === \"left\" || otpPageConfig.position === \"right\"\n  ) {\n    <div class=\"left-right-container\">\n      @if (otpPageConfig.leftCardConfig) {\n        <pt-card [config]=\"otpPageConfig.leftCardConfig\">\n          @if (otpPageConfig.position === \"left\") {\n            <pt-otp-card\n              [otpPageConfig]=\"otpPageConfig\"\n              [otpErrorMessage]=\"otpErrorMessage\"\n              [otpValidated]=\"otpValidated\"\n              (otpSubmit)=\"onOtpSubmit($event)\"\n              (backClick)=\"onBackClick()\"\n            ></pt-otp-card>\n          }\n        </pt-card>\n      }\n\n      @if (otpPageConfig.rightCardConfig) {\n        <pt-card [config]=\"otpPageConfig.rightCardConfig\">\n          @if (otpPageConfig.position === \"right\") {\n            <pt-otp-card\n              [otpPageConfig]=\"otpPageConfig\"\n              [otpErrorMessage]=\"otpErrorMessage\"\n              [otpValidated]=\"otpValidated\"\n              (otpSubmit)=\"onOtpSubmit($event)\"\n              (backClick)=\"onBackClick()\"\n            ></pt-otp-card>\n          }\n        </pt-card>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".left-right-container{display:flex;width:100%;height:100vh}.left-right-container pt-card{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;max-width:50%;height:100%}.center-container{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;margin:0;padding:0;overflow:hidden;box-sizing:border-box}.center-container pt-card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;box-sizing:border-box}.center-container pt-card pt-otp-card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;margin:0;padding:1rem;box-sizing:border-box}\n"] }]
+        }], propDecorators: { otpPageConfig: [{
+                type: Input,
+                args: [{ required: true }]
+            }], otpErrorMessage: [{
+                type: Input
+            }], otpValidated: [{
+                type: Input
+            }], otpSubmit: [{
+                type: Output
+            }], backClick: [{
+                type: Output
+            }] } });
+
+class PTOtpPageModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTOtpPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTOtpPageModule, declarations: [PTOtpPageComponent], imports: [PTCardModule, PTOtpCardComponent], exports: [PTOtpPageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTOtpPageModule, imports: [PTCardModule, PTOtpCardComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTOtpPageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTOtpPageComponent],
+                    imports: [PTCardModule, PTOtpCardComponent],
+                    exports: [PTOtpPageComponent],
+                }]
+        }] });
+
 class NgPrimeToolsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgPrimeToolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: NgPrimeToolsModule, imports: [CommonModule,
@@ -6747,6 +7157,7 @@ class NgPrimeToolsModule {
             PTTextAreaInputModule,
             PTTextInputModule,
             PTMultiSelectModule,
+            PTOtpInputModule,
             // Dashboard
             PTMetricCardModule,
             PTMetricCardGroupModule,
@@ -6769,6 +7180,7 @@ class NgPrimeToolsModule {
             PTBreadCrumbModule,
             // Login
             PTLoginPageModule,
+            PTOtpPageModule,
             // Button
             PTButtonModule,
             // Dialog
@@ -6785,6 +7197,7 @@ class NgPrimeToolsModule {
             PTTextAreaInputModule,
             PTTextInputModule,
             PTMultiSelectModule,
+            PTOtpInputModule,
             // Dashboard
             PTMetricCardModule,
             PTMetricCardGroupModule,
@@ -6807,6 +7220,7 @@ class NgPrimeToolsModule {
             PTBreadCrumbModule,
             // Login
             PTLoginPageModule,
+            PTOtpPageModule,
             // Button
             PTButtonModule,
             // Dialog
@@ -6827,6 +7241,7 @@ class NgPrimeToolsModule {
             PTTextAreaInputModule,
             PTTextInputModule,
             PTMultiSelectModule,
+            PTOtpInputModule,
             // Dashboard
             PTMetricCardModule,
             PTMetricCardGroupModule,
@@ -6849,6 +7264,7 @@ class NgPrimeToolsModule {
             PTBreadCrumbModule,
             // Login
             PTLoginPageModule,
+            PTOtpPageModule,
             // Button
             PTButtonModule,
             // Dialog
@@ -6865,6 +7281,7 @@ class NgPrimeToolsModule {
             PTTextAreaInputModule,
             PTTextInputModule,
             PTMultiSelectModule,
+            PTOtpInputModule,
             // Dashboard
             PTMetricCardModule,
             PTMetricCardGroupModule,
@@ -6887,6 +7304,7 @@ class NgPrimeToolsModule {
             PTBreadCrumbModule,
             // Login
             PTLoginPageModule,
+            PTOtpPageModule,
             // Button
             PTButtonModule,
             // Dialog
@@ -6912,6 +7330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         PTTextAreaInputModule,
                         PTTextInputModule,
                         PTMultiSelectModule,
+                        PTOtpInputModule,
                         // Dashboard
                         PTMetricCardModule,
                         PTMetricCardGroupModule,
@@ -6934,6 +7353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         PTBreadCrumbModule,
                         // Login
                         PTLoginPageModule,
+                        PTOtpPageModule,
                         // Button
                         PTButtonModule,
                         // Dialog
@@ -6953,6 +7373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         PTTextAreaInputModule,
                         PTTextInputModule,
                         PTMultiSelectModule,
+                        PTOtpInputModule,
                         // Dashboard
                         PTMetricCardModule,
                         PTMetricCardGroupModule,
@@ -6975,6 +7396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         PTBreadCrumbModule,
                         // Login
                         PTLoginPageModule,
+                        PTOtpPageModule,
                         // Button
                         PTButtonModule,
                         // Dialog
@@ -7355,6 +7777,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+const applyChangePasswordCardDefaults = (config) => {
+    config.title = {
+        text: 'Changer le mot de passe',
+        position: 'center',
+        color: '#333',
+        fontSize: '24px',
+        ...config.title,
+    };
+    config.logoUrl = {
+        altText: 'Logo',
+        imageUrl: '',
+        width: '100px',
+        height: 'auto',
+        ...config.logoUrl,
+    };
+    config.footer = {
+        version: 'V1.0',
+        copyright: 'Your Company © 2026',
+        ...config.footer,
+    };
+    config.changePassword = {
+        currentPassword: config.changePassword?.currentPassword ?? '',
+        newPassword: config.changePassword?.newPassword ?? '',
+        confirmationPassword: config.changePassword?.confirmationPassword ?? '',
+    };
+    config.changePasswordCardConfig = {
+        noBorder: true,
+        width: '480px',
+        padding: '40px',
+        ...config.changePasswordCardConfig,
+    };
+    config.showCurrentPasswordField = config.showCurrentPasswordField ?? false;
+    config.showPasswordStrength = config.showPasswordStrength ?? true;
+    config.newPasswordField = {
+        name: 'newPassword',
+        label: 'Nouveau mot de passe',
+        required: true,
+        placeholder: 'Saisir le nouveau mot de passe',
+        type: FormInputTypeEnum.PASSWORD,
+        toggleMask: true,
+        feedback: false,
+        ...config.newPasswordField,
+    };
+    config.confirmationPasswordField = {
+        name: 'confirmationPassword',
+        label: 'Confirmer le mot de passe',
+        required: true,
+        placeholder: 'Confirmer le nouveau mot de passe',
+        type: FormInputTypeEnum.PASSWORD,
+        toggleMask: true,
+        feedback: false,
+        ...config.confirmationPasswordField,
+    };
+    if (config.showCurrentPasswordField) {
+        config.currentPasswordField = {
+            name: 'currentPassword',
+            label: 'Mot de passe actuel',
+            required: true,
+            placeholder: 'Saisir le mot de passe actuel',
+            type: FormInputTypeEnum.PASSWORD,
+            toggleMask: true,
+            feedback: false,
+            ...config.currentPasswordField,
+        };
+    }
+    config.buttonConfig = {
+        label: 'Changer le mot de passe',
+        type: 'submit',
+        icon: 'pi pi-lock',
+        iconPos: 'left',
+        styleClass: 'p-button-primary',
+        disabled: true,
+        width: '100%',
+        ...config.buttonConfig,
+    };
+    config.passwordPolicyRules = config.passwordPolicyRules ?? [];
+    config.additionalContent = config.additionalContent ?? [];
+};
+
 class PTChangePasswordCardComponent {
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
@@ -7362,14 +7863,29 @@ class PTChangePasswordCardComponent {
         this.passwordValueChange = new EventEmitter();
         this.changePasswordSubmit = new EventEmitter();
         this.destroy$ = new Subject();
+        this.initialized = false;
         this.formGroup = this.formBuilder.group({}, {
             validators: [this.passwordMatchValidator()],
         });
     }
     ngOnInit() {
-        this.initializeDefaults();
+        applyChangePasswordCardDefaults(this.changePasswordPageConfig);
         this.setupFormFields();
         this.listenToPasswordChanges();
+        this.initialized = true;
+        this.updateButtonDisabledState();
+    }
+    ngOnChanges(changes) {
+        const configChange = changes['changePasswordPageConfig'];
+        if (!configChange?.currentValue || !this.initialized) {
+            return;
+        }
+        applyChangePasswordCardDefaults(this.changePasswordPageConfig);
+        /*
+         * The parent recreates the configuration after calculating
+         * passwordPolicyRules. Therefore the button must be recalculated
+         * each time the input configuration changes.
+         */
         this.updateButtonDisabledState();
     }
     ngOnDestroy() {
@@ -7388,6 +7904,10 @@ class PTChangePasswordCardComponent {
     }
     onSubmit() {
         this.formGroup.markAllAsTouched();
+        this.formGroup.updateValueAndValidity({
+            emitEvent: false,
+        });
+        this.updateButtonDisabledState();
         if (!this.formGroup.valid) {
             this.changePasswordPageConfig.errorMessage =
                 this.changePasswordPageConfig.emptyFieldsErrorMessage ??
@@ -7408,89 +7928,6 @@ class PTChangePasswordCardComponent {
             item.styleClass ?? '',
         ].filter(Boolean);
     }
-    initializeDefaults() {
-        this.changePasswordPageConfig.title = {
-            text: 'Changer le mot de passe',
-            position: 'center',
-            color: '#333',
-            fontSize: '24px',
-            ...this.changePasswordPageConfig.title,
-        };
-        this.changePasswordPageConfig.logoUrl = {
-            altText: 'Logo',
-            imageUrl: '',
-            width: '100px',
-            height: 'auto',
-            ...this.changePasswordPageConfig.logoUrl,
-        };
-        this.changePasswordPageConfig.footer = {
-            version: 'V1.0',
-            copyright: 'Your Company © 2026',
-            ...this.changePasswordPageConfig.footer,
-        };
-        this.changePasswordPageConfig.changePassword = {
-            currentPassword: this.changePasswordPageConfig.changePassword?.currentPassword ?? '',
-            newPassword: this.changePasswordPageConfig.changePassword?.newPassword ?? '',
-            confirmationPassword: this.changePasswordPageConfig.changePassword?.confirmationPassword ??
-                '',
-        };
-        this.changePasswordPageConfig.changePasswordCardConfig = {
-            noBorder: true,
-            width: '480px',
-            padding: '40px',
-            ...this.changePasswordPageConfig.changePasswordCardConfig,
-        };
-        this.changePasswordPageConfig.showCurrentPasswordField =
-            this.changePasswordPageConfig.showCurrentPasswordField ?? false;
-        this.changePasswordPageConfig.showPasswordStrength =
-            this.changePasswordPageConfig.showPasswordStrength ?? true;
-        this.changePasswordPageConfig.newPasswordField = {
-            name: 'newPassword',
-            label: 'Nouveau mot de passe',
-            required: true,
-            placeholder: 'Saisir le nouveau mot de passe',
-            type: FormInputTypeEnum.PASSWORD,
-            toggleMask: true,
-            feedback: false,
-            ...this.changePasswordPageConfig.newPasswordField,
-        };
-        this.changePasswordPageConfig.confirmationPasswordField = {
-            name: 'confirmationPassword',
-            label: 'Confirmer le mot de passe',
-            required: true,
-            placeholder: 'Confirmer le nouveau mot de passe',
-            type: FormInputTypeEnum.PASSWORD,
-            toggleMask: true,
-            feedback: false,
-            ...this.changePasswordPageConfig.confirmationPasswordField,
-        };
-        if (this.changePasswordPageConfig.showCurrentPasswordField) {
-            this.changePasswordPageConfig.currentPasswordField = {
-                name: 'currentPassword',
-                label: 'Mot de passe actuel',
-                required: true,
-                placeholder: 'Saisir le mot de passe actuel',
-                type: FormInputTypeEnum.PASSWORD,
-                toggleMask: true,
-                feedback: false,
-                ...this.changePasswordPageConfig.currentPasswordField,
-            };
-        }
-        this.changePasswordPageConfig.buttonConfig = {
-            label: 'Changer le mot de passe',
-            type: 'submit',
-            icon: 'pi pi-lock',
-            iconPos: 'left',
-            styleClass: 'p-button-primary',
-            disabled: true,
-            width: '100%',
-            ...this.changePasswordPageConfig.buttonConfig,
-        };
-        this.changePasswordPageConfig.passwordPolicyRules =
-            this.changePasswordPageConfig.passwordPolicyRules ?? [];
-        this.changePasswordPageConfig.additionalContent =
-            this.changePasswordPageConfig.additionalContent ?? [];
-    }
     setupFormFields() {
         const changePassword = this.changePasswordPageConfig.changePassword;
         if (this.changePasswordPageConfig.showCurrentPasswordField) {
@@ -7504,13 +7941,19 @@ class PTChangePasswordCardComponent {
     }
     listenToPasswordChanges() {
         this.formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            const changePasswordModel = this.buildChangePasswordModel();
-            this.changePasswordPageConfig.changePassword = changePasswordModel;
-            this.passwordValueChange.emit(changePasswordModel);
             this.formGroup.updateValueAndValidity({
                 emitEvent: false,
             });
-            this.updateButtonDisabledState();
+            /*
+             * First synchronize the local form state.
+             */
+            const changePasswordModel = this.buildChangePasswordModel();
+            this.changePasswordPageConfig.changePassword = changePasswordModel;
+            /*
+             * The parent will compute the policy state and replace the config.
+             * ngOnChanges() then recalculates disabled status with fresh rules.
+             */
+            this.passwordValueChange.emit(changePasswordModel);
         });
         this.formGroup.statusChanges
             .pipe(takeUntil(this.destroy$))
@@ -7553,6 +7996,9 @@ class PTChangePasswordCardComponent {
             .every((rule) => rule.valid === true);
     }
     updateButtonDisabledState() {
+        if (!this.changePasswordPageConfig?.buttonConfig) {
+            return;
+        }
         const isFormValid = this.formGroup.valid;
         const arePoliciesValid = this.areFrontendPasswordPolicyRulesValid();
         this.changePasswordPageConfig.buttonConfig = {
@@ -7561,7 +8007,7 @@ class PTChangePasswordCardComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChangePasswordCardComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTChangePasswordCardComponent, isStandalone: true, selector: "pt-change-password-card", inputs: { changePasswordPageConfig: "changePasswordPageConfig", changePasswordErrorMessage: "changePasswordErrorMessage" }, outputs: { passwordValueChange: "passwordValueChange", changePasswordSubmit: "changePasswordSubmit" }, ngImport: i0, template: "<pt-card [config]=\"changePasswordPageConfig.changePasswordCardConfig!\">\n  @if (changePasswordPageConfig.logoUrl?.imageUrl) {\n    <div class=\"logo-container\">\n      <img\n        [src]=\"changePasswordPageConfig.logoUrl?.imageUrl\"\n        [alt]=\"changePasswordPageConfig.logoUrl?.altText || 'Logo'\"\n        [style.width]=\"changePasswordPageConfig.logoUrl?.width || '100px'\"\n        [style.height]=\"changePasswordPageConfig.logoUrl?.height || 'auto'\"\n      />\n    </div>\n  }\n\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: changePasswordPageConfig.title?.color || '#333',\n        'font-size': changePasswordPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ changePasswordPageConfig.title?.text || \"Changer le mot de passe\" }}\n    </h1>\n  </div>\n\n  @if (changePasswordErrorMessage) {\n    <div class=\"error-message\" role=\"alert\">\n      {{ changePasswordErrorMessage }}\n    </div>\n  }\n\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (changePasswordPageConfig.errorMessage) {\n      <div class=\"error-message\" role=\"alert\">\n        {{ changePasswordPageConfig.errorMessage }}\n      </div>\n    }\n\n    @if (changePasswordPageConfig.showCurrentPasswordField) {\n      <div class=\"field\">\n        <pt-text-input\n          [formGroup]=\"formGroup\"\n          [formField]=\"changePasswordPageConfig.currentPasswordField!\"\n        ></pt-text-input>\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"changePasswordPageConfig.newPasswordField!\"\n      ></pt-text-input>\n    </div>\n\n    @if (changePasswordPageConfig.showPasswordStrength) {\n      <div class=\"password-strength-section\">\n        <div class=\"password-strength-header\">\n          <span>\n            {{\n              changePasswordPageConfig.passwordStrengthLabel ||\n                \"Robustesse du mot de passe\"\n            }}\n          </span>\n\n          <span\n            class=\"strength-label\"\n            [ngClass]=\"\n              'strength-' +\n              (changePasswordPageConfig.passwordStrengthSeverity || 'neutral')\n            \"\n          >\n            {{\n              changePasswordPageConfig.passwordStrengthText || \"Non renseign\u00E9\"\n            }}\n          </span>\n        </div>\n\n        <p-progressbar\n          [value]=\"changePasswordPageConfig.passwordStrengthPercentage || 0\"\n          [showValue]=\"false\"\n          [ngClass]=\"\n            'password-progressbar strength-' +\n            (changePasswordPageConfig.passwordStrengthSeverity || 'neutral')\n          \"\n        ></p-progressbar>\n      </div>\n    }\n\n    @if (visiblePasswordPolicyRules.length > 0) {\n      <div class=\"password-policy-section\">\n        <strong class=\"password-policy-title\">\n          {{\n            changePasswordPageConfig.passwordPolicyTitle || \"R\u00E8gles de s\u00E9curit\u00E9\"\n          }}\n        </strong>\n\n        <ul class=\"password-policy-list\">\n          @for (rule of visiblePasswordPolicyRules; track rule.code) {\n            <li\n              [class.valid]=\"rule.valid\"\n              [class.invalid]=\"!rule.valid && !rule.backendOnly\"\n              [class.backend-only]=\"rule.backendOnly\"\n            >\n              @if (rule.backendOnly) {\n                <i class=\"pi pi-shield\"></i>\n              } @else if (rule.valid) {\n                <i class=\"pi pi-check-circle\"></i>\n              } @else {\n                <i class=\"pi pi-times-circle\"></i>\n              }\n\n              <span>{{ rule.label }}</span>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"changePasswordPageConfig.confirmationPasswordField!\"\n      ></pt-text-input>\n\n      @if (\n        confirmationPasswordControl?.touched &&\n        formGroup.hasError(\"passwordMismatch\")\n      ) {\n        <small class=\"field-error\">\n          {{\n            changePasswordPageConfig.passwordMismatchErrorMessage ||\n              \"Les deux mots de passe ne correspondent pas.\"\n          }}\n        </small>\n      }\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button\n        [buttonConfig]=\"changePasswordPageConfig.buttonConfig!\"\n      ></pt-button>\n    </div>\n\n    @if (visibleAdditionalContent.length > 0) {\n      <div class=\"additional-content-list\">\n        @for (item of visibleAdditionalContent; track item.id || $index) {\n          <div\n            class=\"additional-content-item\"\n            [ngClass]=\"getAdditionalContentClass(item)\"\n            [ngStyle]=\"item.style\"\n          >\n            @if (item.text) {\n              <span class=\"additional-content-text\">\n                {{ item.text }}\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n  </form>\n\n  <div class=\"change-password-footer\">\n    {{ changePasswordPageConfig.footer?.version }}\n\n    <span>\n      {{ changePasswordPageConfig.footer?.copyright }}\n    </span>\n  </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.password-strength-section{width:100%;margin-top:-.25rem;margin-bottom:1.25rem}.password-strength-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem;color:var(--p-text-color, #1e293b);font-size:.875rem;font-weight:600}.strength-label{font-size:.82rem;font-weight:700;white-space:nowrap}.strength-neutral{color:var(--p-text-muted-color, #64748b)}.strength-danger{color:var(--p-red-500, #ef4444)}.strength-warn{color:var(--p-orange-500, #f97316)}.strength-success{color:var(--p-green-500, #22c55e)}:host ::ng-deep .password-progressbar{height:.65rem;overflow:hidden;border-radius:999px}:host ::ng-deep .password-progressbar .p-progressbar-value{transition:width .22s ease,background-color .22s ease}:host ::ng-deep .password-progressbar.strength-neutral .p-progressbar-value{background:var(--p-surface-400, #94a3b8)}:host ::ng-deep .password-progressbar.strength-danger .p-progressbar-value{background:var(--p-red-500, #ef4444)}:host ::ng-deep .password-progressbar.strength-warn .p-progressbar-value{background:var(--p-orange-500, #f97316)}:host ::ng-deep .password-progressbar.strength-success .p-progressbar-value{background:var(--p-green-500, #22c55e)}.password-policy-section{width:100%;box-sizing:border-box;margin-bottom:1.25rem;padding:1rem;background:var(--p-content-background, rgba(255, 255, 255, .12));border:1px solid var(--p-content-border-color, rgba(255, 255, 255, .25));border-radius:var(--p-content-border-radius, .5rem)}.password-policy-title{display:block;margin-bottom:.75rem;color:var(--p-text-color, #1e293b);font-size:.9rem;font-weight:700}.password-policy-list{display:flex;flex-direction:column;margin:0;padding:0;gap:.55rem;list-style:none}.password-policy-list li{display:flex;align-items:flex-start;gap:.6rem;color:var(--p-text-muted-color, #64748b);font-size:.84rem;line-height:1.35}.password-policy-list li i{width:1rem;margin-top:.1rem;text-align:center}.password-policy-list li.valid{color:var(--p-green-600, #16a34a)}.password-policy-list li.invalid{color:var(--p-red-500, #ef4444)}.password-policy-list li.backend-only{color:var(--p-text-muted-color, #64748b)}.password-policy-list li.backend-only i{color:var(--p-primary-color, #3b82f6)}.field-error{display:block;margin-top:.45rem;color:var(--p-message-error-color, #b91c1c);font-size:.78rem;line-height:1.35}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.change-password-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.change-password-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .password-strength-header,:host-context(.app-dark) .password-strength-header,:host-context(.dark) .password-strength-header,:host-context(.dark-mode) .password-strength-header,:host-context([data-theme=\"dark\"]) .password-strength-header,:host-context(.p-dark) .password-policy-title,:host-context(.app-dark) .password-policy-title,:host-context(.dark) .password-policy-title,:host-context(.dark-mode) .password-policy-title,:host-context([data-theme=\"dark\"]) .password-policy-title{color:var(--p-text-color, #f8fafc)}:host-context(.p-dark) .password-policy-section,:host-context(.app-dark) .password-policy-section,:host-context(.dark) .password-policy-section,:host-context(.dark-mode) .password-policy-section,:host-context([data-theme=\"dark\"]) .password-policy-section{background:#0f172a59;border-color:#94a3b84d}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .change-password-footer,:host-context(.app-dark) .change-password-footer,:host-context(.dark) .change-password-footer,:host-context(.dark-mode) .change-password-footer,:host-context([data-theme=\"dark\"]) .change-password-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.password-strength-header{align-items:flex-start;flex-direction:column;gap:.25rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.additional-content-item{font-size:.82rem}.additional-content-list{gap:.5rem}.password-policy-section{padding:.85rem}.password-policy-list li{font-size:.8rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i13.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTChangePasswordCardComponent, isStandalone: true, selector: "pt-change-password-card", inputs: { changePasswordPageConfig: "changePasswordPageConfig", changePasswordErrorMessage: "changePasswordErrorMessage" }, outputs: { passwordValueChange: "passwordValueChange", changePasswordSubmit: "changePasswordSubmit" }, usesOnChanges: true, ngImport: i0, template: "<pt-card [config]=\"changePasswordPageConfig.changePasswordCardConfig!\">\n  @if (changePasswordPageConfig.logoUrl; as logoUrl) {\n    @if (logoUrl.imageUrl) {\n      <div class=\"logo-container\">\n        <img\n          [src]=\"logoUrl.imageUrl\"\n          [alt]=\"logoUrl.altText || 'Logo'\"\n          [style.width]=\"logoUrl.width || '100px'\"\n          [style.height]=\"logoUrl.height || 'auto'\"\n        />\n      </div>\n    }\n  }\n\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: changePasswordPageConfig.title?.color || '#333',\n        'font-size': changePasswordPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ changePasswordPageConfig.title?.text || \"Changer le mot de passe\" }}\n    </h1>\n  </div>\n\n  @if (changePasswordErrorMessage) {\n    <div class=\"error-message\" role=\"alert\">\n      {{ changePasswordErrorMessage }}\n    </div>\n  }\n\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (changePasswordPageConfig.errorMessage) {\n      <div class=\"error-message\" role=\"alert\">\n        {{ changePasswordPageConfig.errorMessage }}\n      </div>\n    }\n\n    @if (changePasswordPageConfig.showCurrentPasswordField) {\n      <div class=\"field\">\n        <pt-text-input\n          [formGroup]=\"formGroup\"\n          [formField]=\"changePasswordPageConfig.currentPasswordField!\"\n        ></pt-text-input>\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"changePasswordPageConfig.newPasswordField!\"\n      ></pt-text-input>\n    </div>\n\n    @if (changePasswordPageConfig.showPasswordStrength) {\n      <div class=\"password-strength-section\">\n        <div class=\"password-strength-header\">\n          <span>\n            {{\n              changePasswordPageConfig.passwordStrengthLabel ||\n                \"Robustesse du mot de passe\"\n            }}\n          </span>\n\n          <span\n            class=\"strength-label\"\n            [ngClass]=\"\n              'strength-' +\n              (changePasswordPageConfig.passwordStrengthSeverity || 'neutral')\n            \"\n          >\n            {{\n              changePasswordPageConfig.passwordStrengthText || \"Non renseign\u00E9\"\n            }}\n          </span>\n        </div>\n\n        <p-progressbar\n          [value]=\"changePasswordPageConfig.passwordStrengthPercentage || 0\"\n          [showValue]=\"false\"\n          [ngClass]=\"\n            'password-progressbar strength-' +\n            (changePasswordPageConfig.passwordStrengthSeverity || 'neutral')\n          \"\n        ></p-progressbar>\n      </div>\n    }\n\n    @if (visiblePasswordPolicyRules.length > 0) {\n      <div class=\"password-policy-section\">\n        <strong class=\"password-policy-title\">\n          {{\n            changePasswordPageConfig.passwordPolicyTitle || \"R\u00E8gles de s\u00E9curit\u00E9\"\n          }}\n        </strong>\n\n        <ul class=\"password-policy-list\">\n          @for (rule of visiblePasswordPolicyRules; track rule.code) {\n            <li\n              [class.valid]=\"rule.valid\"\n              [class.invalid]=\"!rule.valid && !rule.backendOnly\"\n              [class.backend-only]=\"rule.backendOnly\"\n            >\n              @if (rule.backendOnly) {\n                <i class=\"pi pi-shield\"></i>\n              } @else if (rule.valid) {\n                <i class=\"pi pi-check-circle\"></i>\n              } @else {\n                <i class=\"pi pi-times-circle\"></i>\n              }\n\n              <span>{{ rule.label }}</span>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"changePasswordPageConfig.confirmationPasswordField!\"\n      ></pt-text-input>\n\n      @if (\n        confirmationPasswordControl?.touched &&\n        formGroup.hasError(\"passwordMismatch\")\n      ) {\n        <small class=\"field-error\">\n          {{\n            changePasswordPageConfig.passwordMismatchErrorMessage ||\n              \"Les deux mots de passe ne correspondent pas.\"\n          }}\n        </small>\n      }\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button\n        [buttonConfig]=\"changePasswordPageConfig.buttonConfig!\"\n      ></pt-button>\n    </div>\n\n    @if (visibleAdditionalContent.length > 0) {\n      <div class=\"additional-content-list\">\n        @for (item of visibleAdditionalContent; track item.id || $index) {\n          <div\n            class=\"additional-content-item\"\n            [ngClass]=\"getAdditionalContentClass(item)\"\n            [ngStyle]=\"item.style\"\n          >\n            @if (item.text) {\n              <span class=\"additional-content-text\">\n                {{ item.text }}\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n  </form>\n\n  <div class=\"change-password-footer\">\n    {{ changePasswordPageConfig.footer?.version }}\n\n    <span>\n      {{ changePasswordPageConfig.footer?.copyright }}\n    </span>\n  </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.password-strength-section{width:100%;margin-top:-.25rem;margin-bottom:1.25rem}.password-strength-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem;color:var(--p-text-color, #1e293b);font-size:.875rem;font-weight:600}.strength-label{font-size:.82rem;font-weight:700;white-space:nowrap}.strength-neutral{color:var(--p-text-muted-color, #64748b)}.strength-danger{color:var(--p-red-500, #ef4444)}.strength-warn{color:var(--p-orange-500, #f97316)}.strength-success{color:var(--p-green-500, #22c55e)}:host ::ng-deep .password-progressbar{height:.65rem;overflow:hidden;border-radius:999px}:host ::ng-deep .password-progressbar .p-progressbar-value{transition:width .22s ease,background-color .22s ease}:host ::ng-deep .password-progressbar.strength-neutral .p-progressbar-value{background:var(--p-surface-400, #94a3b8)}:host ::ng-deep .password-progressbar.strength-danger .p-progressbar-value{background:var(--p-red-500, #ef4444)}:host ::ng-deep .password-progressbar.strength-warn .p-progressbar-value{background:var(--p-orange-500, #f97316)}:host ::ng-deep .password-progressbar.strength-success .p-progressbar-value{background:var(--p-green-500, #22c55e)}.password-policy-section{width:100%;box-sizing:border-box;margin-bottom:1.25rem;padding:1rem;background:var(--p-content-background, rgba(255, 255, 255, .12));border:1px solid var(--p-content-border-color, rgba(255, 255, 255, .25));border-radius:var(--p-content-border-radius, .5rem)}.password-policy-title{display:block;margin-bottom:.75rem;color:var(--p-text-color, #1e293b);font-size:.9rem;font-weight:700}.password-policy-list{display:flex;flex-direction:column;margin:0;padding:0;gap:.55rem;list-style:none}.password-policy-list li{display:flex;align-items:flex-start;gap:.6rem;color:var(--p-text-muted-color, #64748b);font-size:.84rem;line-height:1.35}.password-policy-list li i{width:1rem;margin-top:.1rem;text-align:center}.password-policy-list li.valid{color:var(--p-green-600, #16a34a)}.password-policy-list li.invalid{color:var(--p-red-500, #ef4444)}.password-policy-list li.backend-only{color:var(--p-text-muted-color, #64748b)}.password-policy-list li.backend-only i{color:var(--p-primary-color, #3b82f6)}.field-error{display:block;margin-top:.45rem;color:var(--p-message-error-color, #b91c1c);font-size:.78rem;line-height:1.35}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.change-password-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.change-password-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .password-strength-header,:host-context(.app-dark) .password-strength-header,:host-context(.dark) .password-strength-header,:host-context(.dark-mode) .password-strength-header,:host-context([data-theme=\"dark\"]) .password-strength-header,:host-context(.p-dark) .password-policy-title,:host-context(.app-dark) .password-policy-title,:host-context(.dark) .password-policy-title,:host-context(.dark-mode) .password-policy-title,:host-context([data-theme=\"dark\"]) .password-policy-title{color:var(--p-text-color, #f8fafc)}:host-context(.p-dark) .password-policy-section,:host-context(.app-dark) .password-policy-section,:host-context(.dark) .password-policy-section,:host-context(.dark-mode) .password-policy-section,:host-context([data-theme=\"dark\"]) .password-policy-section{background:#0f172a59;border-color:#94a3b84d}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .change-password-footer,:host-context(.app-dark) .change-password-footer,:host-context(.dark) .change-password-footer,:host-context(.dark-mode) .change-password-footer,:host-context([data-theme=\"dark\"]) .change-password-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.password-strength-header{align-items:flex-start;flex-direction:column;gap:.25rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.additional-content-item{font-size:.82rem}.additional-content-list{gap:.5rem}.password-policy-section{padding:.85rem}.password-policy-list li{font-size:.8rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i13.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChangePasswordCardComponent, decorators: [{
             type: Component,
@@ -7572,7 +8018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         PTButtonModule,
                         PTTextInputModule,
                         ProgressBarModule,
-                    ], template: "<pt-card [config]=\"changePasswordPageConfig.changePasswordCardConfig!\">\n  @if (changePasswordPageConfig.logoUrl?.imageUrl) {\n    <div class=\"logo-container\">\n      <img\n        [src]=\"changePasswordPageConfig.logoUrl?.imageUrl\"\n        [alt]=\"changePasswordPageConfig.logoUrl?.altText || 'Logo'\"\n        [style.width]=\"changePasswordPageConfig.logoUrl?.width || '100px'\"\n        [style.height]=\"changePasswordPageConfig.logoUrl?.height || 'auto'\"\n      />\n    </div>\n  }\n\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: changePasswordPageConfig.title?.color || '#333',\n        'font-size': changePasswordPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ changePasswordPageConfig.title?.text || \"Changer le mot de passe\" }}\n    </h1>\n  </div>\n\n  @if (changePasswordErrorMessage) {\n    <div class=\"error-message\" role=\"alert\">\n      {{ changePasswordErrorMessage }}\n    </div>\n  }\n\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (changePasswordPageConfig.errorMessage) {\n      <div class=\"error-message\" role=\"alert\">\n        {{ changePasswordPageConfig.errorMessage }}\n      </div>\n    }\n\n    @if (changePasswordPageConfig.showCurrentPasswordField) {\n      <div class=\"field\">\n        <pt-text-input\n          [formGroup]=\"formGroup\"\n          [formField]=\"changePasswordPageConfig.currentPasswordField!\"\n        ></pt-text-input>\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"changePasswordPageConfig.newPasswordField!\"\n      ></pt-text-input>\n    </div>\n\n    @if (changePasswordPageConfig.showPasswordStrength) {\n      <div class=\"password-strength-section\">\n        <div class=\"password-strength-header\">\n          <span>\n            {{\n              changePasswordPageConfig.passwordStrengthLabel ||\n                \"Robustesse du mot de passe\"\n            }}\n          </span>\n\n          <span\n            class=\"strength-label\"\n            [ngClass]=\"\n              'strength-' +\n              (changePasswordPageConfig.passwordStrengthSeverity || 'neutral')\n            \"\n          >\n            {{\n              changePasswordPageConfig.passwordStrengthText || \"Non renseign\u00E9\"\n            }}\n          </span>\n        </div>\n\n        <p-progressbar\n          [value]=\"changePasswordPageConfig.passwordStrengthPercentage || 0\"\n          [showValue]=\"false\"\n          [ngClass]=\"\n            'password-progressbar strength-' +\n            (changePasswordPageConfig.passwordStrengthSeverity || 'neutral')\n          \"\n        ></p-progressbar>\n      </div>\n    }\n\n    @if (visiblePasswordPolicyRules.length > 0) {\n      <div class=\"password-policy-section\">\n        <strong class=\"password-policy-title\">\n          {{\n            changePasswordPageConfig.passwordPolicyTitle || \"R\u00E8gles de s\u00E9curit\u00E9\"\n          }}\n        </strong>\n\n        <ul class=\"password-policy-list\">\n          @for (rule of visiblePasswordPolicyRules; track rule.code) {\n            <li\n              [class.valid]=\"rule.valid\"\n              [class.invalid]=\"!rule.valid && !rule.backendOnly\"\n              [class.backend-only]=\"rule.backendOnly\"\n            >\n              @if (rule.backendOnly) {\n                <i class=\"pi pi-shield\"></i>\n              } @else if (rule.valid) {\n                <i class=\"pi pi-check-circle\"></i>\n              } @else {\n                <i class=\"pi pi-times-circle\"></i>\n              }\n\n              <span>{{ rule.label }}</span>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"changePasswordPageConfig.confirmationPasswordField!\"\n      ></pt-text-input>\n\n      @if (\n        confirmationPasswordControl?.touched &&\n        formGroup.hasError(\"passwordMismatch\")\n      ) {\n        <small class=\"field-error\">\n          {{\n            changePasswordPageConfig.passwordMismatchErrorMessage ||\n              \"Les deux mots de passe ne correspondent pas.\"\n          }}\n        </small>\n      }\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button\n        [buttonConfig]=\"changePasswordPageConfig.buttonConfig!\"\n      ></pt-button>\n    </div>\n\n    @if (visibleAdditionalContent.length > 0) {\n      <div class=\"additional-content-list\">\n        @for (item of visibleAdditionalContent; track item.id || $index) {\n          <div\n            class=\"additional-content-item\"\n            [ngClass]=\"getAdditionalContentClass(item)\"\n            [ngStyle]=\"item.style\"\n          >\n            @if (item.text) {\n              <span class=\"additional-content-text\">\n                {{ item.text }}\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n  </form>\n\n  <div class=\"change-password-footer\">\n    {{ changePasswordPageConfig.footer?.version }}\n\n    <span>\n      {{ changePasswordPageConfig.footer?.copyright }}\n    </span>\n  </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.password-strength-section{width:100%;margin-top:-.25rem;margin-bottom:1.25rem}.password-strength-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem;color:var(--p-text-color, #1e293b);font-size:.875rem;font-weight:600}.strength-label{font-size:.82rem;font-weight:700;white-space:nowrap}.strength-neutral{color:var(--p-text-muted-color, #64748b)}.strength-danger{color:var(--p-red-500, #ef4444)}.strength-warn{color:var(--p-orange-500, #f97316)}.strength-success{color:var(--p-green-500, #22c55e)}:host ::ng-deep .password-progressbar{height:.65rem;overflow:hidden;border-radius:999px}:host ::ng-deep .password-progressbar .p-progressbar-value{transition:width .22s ease,background-color .22s ease}:host ::ng-deep .password-progressbar.strength-neutral .p-progressbar-value{background:var(--p-surface-400, #94a3b8)}:host ::ng-deep .password-progressbar.strength-danger .p-progressbar-value{background:var(--p-red-500, #ef4444)}:host ::ng-deep .password-progressbar.strength-warn .p-progressbar-value{background:var(--p-orange-500, #f97316)}:host ::ng-deep .password-progressbar.strength-success .p-progressbar-value{background:var(--p-green-500, #22c55e)}.password-policy-section{width:100%;box-sizing:border-box;margin-bottom:1.25rem;padding:1rem;background:var(--p-content-background, rgba(255, 255, 255, .12));border:1px solid var(--p-content-border-color, rgba(255, 255, 255, .25));border-radius:var(--p-content-border-radius, .5rem)}.password-policy-title{display:block;margin-bottom:.75rem;color:var(--p-text-color, #1e293b);font-size:.9rem;font-weight:700}.password-policy-list{display:flex;flex-direction:column;margin:0;padding:0;gap:.55rem;list-style:none}.password-policy-list li{display:flex;align-items:flex-start;gap:.6rem;color:var(--p-text-muted-color, #64748b);font-size:.84rem;line-height:1.35}.password-policy-list li i{width:1rem;margin-top:.1rem;text-align:center}.password-policy-list li.valid{color:var(--p-green-600, #16a34a)}.password-policy-list li.invalid{color:var(--p-red-500, #ef4444)}.password-policy-list li.backend-only{color:var(--p-text-muted-color, #64748b)}.password-policy-list li.backend-only i{color:var(--p-primary-color, #3b82f6)}.field-error{display:block;margin-top:.45rem;color:var(--p-message-error-color, #b91c1c);font-size:.78rem;line-height:1.35}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.change-password-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.change-password-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .password-strength-header,:host-context(.app-dark) .password-strength-header,:host-context(.dark) .password-strength-header,:host-context(.dark-mode) .password-strength-header,:host-context([data-theme=\"dark\"]) .password-strength-header,:host-context(.p-dark) .password-policy-title,:host-context(.app-dark) .password-policy-title,:host-context(.dark) .password-policy-title,:host-context(.dark-mode) .password-policy-title,:host-context([data-theme=\"dark\"]) .password-policy-title{color:var(--p-text-color, #f8fafc)}:host-context(.p-dark) .password-policy-section,:host-context(.app-dark) .password-policy-section,:host-context(.dark) .password-policy-section,:host-context(.dark-mode) .password-policy-section,:host-context([data-theme=\"dark\"]) .password-policy-section{background:#0f172a59;border-color:#94a3b84d}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .change-password-footer,:host-context(.app-dark) .change-password-footer,:host-context(.dark) .change-password-footer,:host-context(.dark-mode) .change-password-footer,:host-context([data-theme=\"dark\"]) .change-password-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.password-strength-header{align-items:flex-start;flex-direction:column;gap:.25rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.additional-content-item{font-size:.82rem}.additional-content-list{gap:.5rem}.password-policy-section{padding:.85rem}.password-policy-list li{font-size:.8rem}}\n"] }]
+                    ], template: "<pt-card [config]=\"changePasswordPageConfig.changePasswordCardConfig!\">\n  @if (changePasswordPageConfig.logoUrl; as logoUrl) {\n    @if (logoUrl.imageUrl) {\n      <div class=\"logo-container\">\n        <img\n          [src]=\"logoUrl.imageUrl\"\n          [alt]=\"logoUrl.altText || 'Logo'\"\n          [style.width]=\"logoUrl.width || '100px'\"\n          [style.height]=\"logoUrl.height || 'auto'\"\n        />\n      </div>\n    }\n  }\n\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: changePasswordPageConfig.title?.color || '#333',\n        'font-size': changePasswordPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ changePasswordPageConfig.title?.text || \"Changer le mot de passe\" }}\n    </h1>\n  </div>\n\n  @if (changePasswordErrorMessage) {\n    <div class=\"error-message\" role=\"alert\">\n      {{ changePasswordErrorMessage }}\n    </div>\n  }\n\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (changePasswordPageConfig.errorMessage) {\n      <div class=\"error-message\" role=\"alert\">\n        {{ changePasswordPageConfig.errorMessage }}\n      </div>\n    }\n\n    @if (changePasswordPageConfig.showCurrentPasswordField) {\n      <div class=\"field\">\n        <pt-text-input\n          [formGroup]=\"formGroup\"\n          [formField]=\"changePasswordPageConfig.currentPasswordField!\"\n        ></pt-text-input>\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"changePasswordPageConfig.newPasswordField!\"\n      ></pt-text-input>\n    </div>\n\n    @if (changePasswordPageConfig.showPasswordStrength) {\n      <div class=\"password-strength-section\">\n        <div class=\"password-strength-header\">\n          <span>\n            {{\n              changePasswordPageConfig.passwordStrengthLabel ||\n                \"Robustesse du mot de passe\"\n            }}\n          </span>\n\n          <span\n            class=\"strength-label\"\n            [ngClass]=\"\n              'strength-' +\n              (changePasswordPageConfig.passwordStrengthSeverity || 'neutral')\n            \"\n          >\n            {{\n              changePasswordPageConfig.passwordStrengthText || \"Non renseign\u00E9\"\n            }}\n          </span>\n        </div>\n\n        <p-progressbar\n          [value]=\"changePasswordPageConfig.passwordStrengthPercentage || 0\"\n          [showValue]=\"false\"\n          [ngClass]=\"\n            'password-progressbar strength-' +\n            (changePasswordPageConfig.passwordStrengthSeverity || 'neutral')\n          \"\n        ></p-progressbar>\n      </div>\n    }\n\n    @if (visiblePasswordPolicyRules.length > 0) {\n      <div class=\"password-policy-section\">\n        <strong class=\"password-policy-title\">\n          {{\n            changePasswordPageConfig.passwordPolicyTitle || \"R\u00E8gles de s\u00E9curit\u00E9\"\n          }}\n        </strong>\n\n        <ul class=\"password-policy-list\">\n          @for (rule of visiblePasswordPolicyRules; track rule.code) {\n            <li\n              [class.valid]=\"rule.valid\"\n              [class.invalid]=\"!rule.valid && !rule.backendOnly\"\n              [class.backend-only]=\"rule.backendOnly\"\n            >\n              @if (rule.backendOnly) {\n                <i class=\"pi pi-shield\"></i>\n              } @else if (rule.valid) {\n                <i class=\"pi pi-check-circle\"></i>\n              } @else {\n                <i class=\"pi pi-times-circle\"></i>\n              }\n\n              <span>{{ rule.label }}</span>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"changePasswordPageConfig.confirmationPasswordField!\"\n      ></pt-text-input>\n\n      @if (\n        confirmationPasswordControl?.touched &&\n        formGroup.hasError(\"passwordMismatch\")\n      ) {\n        <small class=\"field-error\">\n          {{\n            changePasswordPageConfig.passwordMismatchErrorMessage ||\n              \"Les deux mots de passe ne correspondent pas.\"\n          }}\n        </small>\n      }\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button\n        [buttonConfig]=\"changePasswordPageConfig.buttonConfig!\"\n      ></pt-button>\n    </div>\n\n    @if (visibleAdditionalContent.length > 0) {\n      <div class=\"additional-content-list\">\n        @for (item of visibleAdditionalContent; track item.id || $index) {\n          <div\n            class=\"additional-content-item\"\n            [ngClass]=\"getAdditionalContentClass(item)\"\n            [ngStyle]=\"item.style\"\n          >\n            @if (item.text) {\n              <span class=\"additional-content-text\">\n                {{ item.text }}\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n  </form>\n\n  <div class=\"change-password-footer\">\n    {{ changePasswordPageConfig.footer?.version }}\n\n    <span>\n      {{ changePasswordPageConfig.footer?.copyright }}\n    </span>\n  </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.password-strength-section{width:100%;margin-top:-.25rem;margin-bottom:1.25rem}.password-strength-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem;color:var(--p-text-color, #1e293b);font-size:.875rem;font-weight:600}.strength-label{font-size:.82rem;font-weight:700;white-space:nowrap}.strength-neutral{color:var(--p-text-muted-color, #64748b)}.strength-danger{color:var(--p-red-500, #ef4444)}.strength-warn{color:var(--p-orange-500, #f97316)}.strength-success{color:var(--p-green-500, #22c55e)}:host ::ng-deep .password-progressbar{height:.65rem;overflow:hidden;border-radius:999px}:host ::ng-deep .password-progressbar .p-progressbar-value{transition:width .22s ease,background-color .22s ease}:host ::ng-deep .password-progressbar.strength-neutral .p-progressbar-value{background:var(--p-surface-400, #94a3b8)}:host ::ng-deep .password-progressbar.strength-danger .p-progressbar-value{background:var(--p-red-500, #ef4444)}:host ::ng-deep .password-progressbar.strength-warn .p-progressbar-value{background:var(--p-orange-500, #f97316)}:host ::ng-deep .password-progressbar.strength-success .p-progressbar-value{background:var(--p-green-500, #22c55e)}.password-policy-section{width:100%;box-sizing:border-box;margin-bottom:1.25rem;padding:1rem;background:var(--p-content-background, rgba(255, 255, 255, .12));border:1px solid var(--p-content-border-color, rgba(255, 255, 255, .25));border-radius:var(--p-content-border-radius, .5rem)}.password-policy-title{display:block;margin-bottom:.75rem;color:var(--p-text-color, #1e293b);font-size:.9rem;font-weight:700}.password-policy-list{display:flex;flex-direction:column;margin:0;padding:0;gap:.55rem;list-style:none}.password-policy-list li{display:flex;align-items:flex-start;gap:.6rem;color:var(--p-text-muted-color, #64748b);font-size:.84rem;line-height:1.35}.password-policy-list li i{width:1rem;margin-top:.1rem;text-align:center}.password-policy-list li.valid{color:var(--p-green-600, #16a34a)}.password-policy-list li.invalid{color:var(--p-red-500, #ef4444)}.password-policy-list li.backend-only{color:var(--p-text-muted-color, #64748b)}.password-policy-list li.backend-only i{color:var(--p-primary-color, #3b82f6)}.field-error{display:block;margin-top:.45rem;color:var(--p-message-error-color, #b91c1c);font-size:.78rem;line-height:1.35}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.change-password-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.change-password-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .password-strength-header,:host-context(.app-dark) .password-strength-header,:host-context(.dark) .password-strength-header,:host-context(.dark-mode) .password-strength-header,:host-context([data-theme=\"dark\"]) .password-strength-header,:host-context(.p-dark) .password-policy-title,:host-context(.app-dark) .password-policy-title,:host-context(.dark) .password-policy-title,:host-context(.dark-mode) .password-policy-title,:host-context([data-theme=\"dark\"]) .password-policy-title{color:var(--p-text-color, #f8fafc)}:host-context(.p-dark) .password-policy-section,:host-context(.app-dark) .password-policy-section,:host-context(.dark) .password-policy-section,:host-context(.dark-mode) .password-policy-section,:host-context([data-theme=\"dark\"]) .password-policy-section{background:#0f172a59;border-color:#94a3b84d}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .change-password-footer,:host-context(.app-dark) .change-password-footer,:host-context(.dark) .change-password-footer,:host-context(.dark-mode) .change-password-footer,:host-context([data-theme=\"dark\"]) .change-password-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.password-strength-header{align-items:flex-start;flex-direction:column;gap:.25rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.additional-content-item{font-size:.82rem}.additional-content-list{gap:.5rem}.password-policy-section{padding:.85rem}.password-policy-list li{font-size:.8rem}}\n"] }]
         }], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { changePasswordPageConfig: [{
                 type: Input
             }], changePasswordErrorMessage: [{
@@ -7734,5 +8180,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlignEnum, BadgeType, BadgeTypeStyles, ButtonColorEnum, DateUtilityService, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChangePasswordPageComponent, PTChangePasswordPageModule, PTChartComparisonComponent, PTChartComparisonModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTConfirmDialogComponent, PTConfirmDialogModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTGroupComponent, PTGroupModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTMetricPanelComponent, PTMetricPanelModule, PTMultiSelectComponent, PTMultiSelectModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, PTToastNotifierComponent, PTToastNotifierModule, SearchCriteriaTypeEnum, SeverityEnum, TableTypeEnum };
+export { AlignEnum, BadgeType, BadgeTypeStyles, ButtonColorEnum, DateUtilityService, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChangePasswordPageComponent, PTChangePasswordPageModule, PTChartComparisonComponent, PTChartComparisonModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTConfirmDialogComponent, PTConfirmDialogModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTGroupComponent, PTGroupModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTMetricPanelComponent, PTMetricPanelModule, PTMultiSelectComponent, PTMultiSelectModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTOtpInputComponent, PTOtpInputModule, PTOtpPageComponent, PTOtpPageModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, PTToastNotifierComponent, PTToastNotifierModule, SearchCriteriaTypeEnum, SeverityEnum, TableTypeEnum };
 //# sourceMappingURL=ng-prime-tools.mjs.map