ng-prime-tools 1.0.87 → 1.0.89

package/fesm2022/ng-prime-tools.mjs

@@ -7355,6 +7355,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 +7441,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 +7482,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 +7506,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 +7519,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 +7574,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 +7585,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?.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChangePasswordCardComponent, decorators: [{
             type: Component,
@@ -7624,11 +7648,11 @@ class PTChangePasswordPageComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChangePasswordPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTChangePasswordPageComponent, isStandalone: false, selector: "pt-change-password-page", inputs: { changePasswordPageConfig: "changePasswordPageConfig", changePasswordErrorMessage: "changePasswordErrorMessage" }, outputs: { passwordValueChange: "passwordValueChange", changePasswordSubmit: "changePasswordSubmit" }, ngImport: i0, template: "<!-- Center Position -->\n<ng-container>\n  @if (changePasswordPageConfig.position === \"center\") {\n    <div class=\"center-container\">\n      @if (changePasswordPageConfig.centerCardConfig) {\n        <pt-card [config]=\"changePasswordPageConfig.centerCardConfig\">\n          <pt-change-password-card\n            [changePasswordErrorMessage]=\"changePasswordErrorMessage\"\n            [changePasswordPageConfig]=\"changePasswordPageConfig\"\n            (passwordValueChange)=\"onPasswordValueChange($event)\"\n            (changePasswordSubmit)=\"onChangePasswordSubmit($event)\"\n          ></pt-change-password-card>\n        </pt-card>\n      }\n    </div>\n  }\n\n  @if (\n    changePasswordPageConfig.position === \"left\" ||\n    changePasswordPageConfig.position === \"right\"\n  ) {\n    <div class=\"left-right-container\">\n      @if (changePasswordPageConfig.leftCardConfig) {\n        <pt-card [config]=\"changePasswordPageConfig.leftCardConfig\">\n          @if (changePasswordPageConfig.position === \"left\") {\n            <pt-change-password-card\n              [changePasswordErrorMessage]=\"changePasswordErrorMessage\"\n              [changePasswordPageConfig]=\"changePasswordPageConfig\"\n              (passwordValueChange)=\"onPasswordValueChange($event)\"\n              (changePasswordSubmit)=\"onChangePasswordSubmit($event)\"\n            ></pt-change-password-card>\n          }\n        </pt-card>\n      }\n\n      @if (changePasswordPageConfig.rightCardConfig) {\n        <pt-card [config]=\"changePasswordPageConfig.rightCardConfig\">\n          @if (changePasswordPageConfig.position === \"right\") {\n            <pt-change-password-card\n              [changePasswordErrorMessage]=\"changePasswordErrorMessage\"\n              [changePasswordPageConfig]=\"changePasswordPageConfig\"\n              (passwordValueChange)=\"onPasswordValueChange($event)\"\n              (changePasswordSubmit)=\"onChangePasswordSubmit($event)\"\n            ></pt-change-password-card>\n          }\n        </pt-card>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [":host{display:block;width:100%;min-width:0}.left-right-container{display:flex;width:100%;min-height:100vh}.left-right-container pt-card{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;width:50%;max-width:50%;min-height:100vh;box-sizing:border-box}.center-container{display:flex;align-items:center;justify-content:center;width:100%;min-height:100vh;box-sizing:border-box;margin:0;padding:0}.center-container pt-card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100vh;box-sizing:border-box}.center-container pt-card pt-change-password-card,.left-right-container pt-card pt-change-password-card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box;margin:0;padding:1rem}@media(max-width:768px){.left-right-container{flex-direction:column}.left-right-container pt-card{width:100%;max-width:100%;min-height:50vh}.center-container{align-items:flex-start;padding:1rem}.center-container pt-card{min-height:auto}.center-container pt-card pt-change-password-card,.left-right-container pt-card pt-change-password-card{padding:0}}\n"], dependencies: [{ kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTChangePasswordCardComponent, selector: "pt-change-password-card", inputs: ["changePasswordPageConfig", "changePasswordErrorMessage"], outputs: ["passwordValueChange", "changePasswordSubmit"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTChangePasswordPageComponent, isStandalone: false, selector: "pt-change-password-page", inputs: { changePasswordPageConfig: "changePasswordPageConfig", changePasswordErrorMessage: "changePasswordErrorMessage" }, outputs: { passwordValueChange: "passwordValueChange", changePasswordSubmit: "changePasswordSubmit" }, ngImport: i0, template: "<!-- Center Position -->\n<ng-container>\n  @if (changePasswordPageConfig.position === \"center\") {\n    <div class=\"center-container\">\n      @if (changePasswordPageConfig.centerCardConfig) {\n        <pt-card [config]=\"changePasswordPageConfig.centerCardConfig\">\n          <pt-change-password-card\n            [changePasswordErrorMessage]=\"changePasswordErrorMessage\"\n            [changePasswordPageConfig]=\"changePasswordPageConfig\"\n            (passwordValueChange)=\"onPasswordValueChange($event)\"\n            (changePasswordSubmit)=\"onChangePasswordSubmit($event)\"\n          ></pt-change-password-card>\n        </pt-card>\n      }\n    </div>\n  }\n\n  @if (\n    changePasswordPageConfig.position === \"left\" ||\n    changePasswordPageConfig.position === \"right\"\n  ) {\n    <div class=\"left-right-container\">\n      @if (changePasswordPageConfig.leftCardConfig) {\n        <pt-card [config]=\"changePasswordPageConfig.leftCardConfig\">\n          @if (changePasswordPageConfig.position === \"left\") {\n            <pt-change-password-card\n              [changePasswordErrorMessage]=\"changePasswordErrorMessage\"\n              [changePasswordPageConfig]=\"changePasswordPageConfig\"\n              (passwordValueChange)=\"onPasswordValueChange($event)\"\n              (changePasswordSubmit)=\"onChangePasswordSubmit($event)\"\n            ></pt-change-password-card>\n          }\n        </pt-card>\n      }\n\n      @if (changePasswordPageConfig.rightCardConfig) {\n        <pt-card [config]=\"changePasswordPageConfig.rightCardConfig\">\n          @if (changePasswordPageConfig.position === \"right\") {\n            <pt-change-password-card\n              [changePasswordErrorMessage]=\"changePasswordErrorMessage\"\n              [changePasswordPageConfig]=\"changePasswordPageConfig\"\n              (passwordValueChange)=\"onPasswordValueChange($event)\"\n              (changePasswordSubmit)=\"onChangePasswordSubmit($event)\"\n            ></pt-change-password-card>\n          }\n        </pt-card>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [":host{display:block;width:100%;min-width:0}.left-right-container{display:flex;width:100%;height:100vh;overflow:hidden}.left-right-container pt-card{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;max-width:50%;height:100%;box-sizing:border-box}.center-container{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;box-sizing:border-box;margin:0;padding:0;overflow:hidden}.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-change-password-card,.left-right-container pt-card pt-change-password-card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box;margin:0;padding:16px}@media(max-width:768px){.left-right-container{flex-direction:column;height:auto;min-height:100vh;overflow:visible}.left-right-container pt-card{width:100%;max-width:100%;min-height:50vh}.center-container{width:100%;height:auto;min-height:100vh;padding:1rem;overflow:visible}.center-container pt-card{height:auto;min-height:100%}.center-container pt-card pt-change-password-card,.left-right-container pt-card pt-change-password-card{padding:0}}\n"], dependencies: [{ kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTChangePasswordCardComponent, selector: "pt-change-password-card", inputs: ["changePasswordPageConfig", "changePasswordErrorMessage"], outputs: ["passwordValueChange", "changePasswordSubmit"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChangePasswordPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-change-password-page', standalone: false, template: "<!-- Center Position -->\n<ng-container>\n  @if (changePasswordPageConfig.position === \"center\") {\n    <div class=\"center-container\">\n      @if (changePasswordPageConfig.centerCardConfig) {\n        <pt-card [config]=\"changePasswordPageConfig.centerCardConfig\">\n          <pt-change-password-card\n            [changePasswordErrorMessage]=\"changePasswordErrorMessage\"\n            [changePasswordPageConfig]=\"changePasswordPageConfig\"\n            (passwordValueChange)=\"onPasswordValueChange($event)\"\n            (changePasswordSubmit)=\"onChangePasswordSubmit($event)\"\n          ></pt-change-password-card>\n        </pt-card>\n      }\n    </div>\n  }\n\n  @if (\n    changePasswordPageConfig.position === \"left\" ||\n    changePasswordPageConfig.position === \"right\"\n  ) {\n    <div class=\"left-right-container\">\n      @if (changePasswordPageConfig.leftCardConfig) {\n        <pt-card [config]=\"changePasswordPageConfig.leftCardConfig\">\n          @if (changePasswordPageConfig.position === \"left\") {\n            <pt-change-password-card\n              [changePasswordErrorMessage]=\"changePasswordErrorMessage\"\n              [changePasswordPageConfig]=\"changePasswordPageConfig\"\n              (passwordValueChange)=\"onPasswordValueChange($event)\"\n              (changePasswordSubmit)=\"onChangePasswordSubmit($event)\"\n            ></pt-change-password-card>\n          }\n        </pt-card>\n      }\n\n      @if (changePasswordPageConfig.rightCardConfig) {\n        <pt-card [config]=\"changePasswordPageConfig.rightCardConfig\">\n          @if (changePasswordPageConfig.position === \"right\") {\n            <pt-change-password-card\n              [changePasswordErrorMessage]=\"changePasswordErrorMessage\"\n              [changePasswordPageConfig]=\"changePasswordPageConfig\"\n              (passwordValueChange)=\"onPasswordValueChange($event)\"\n              (changePasswordSubmit)=\"onChangePasswordSubmit($event)\"\n            ></pt-change-password-card>\n          }\n        </pt-card>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [":host{display:block;width:100%;min-width:0}.left-right-container{display:flex;width:100%;min-height:100vh}.left-right-container pt-card{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;width:50%;max-width:50%;min-height:100vh;box-sizing:border-box}.center-container{display:flex;align-items:center;justify-content:center;width:100%;min-height:100vh;box-sizing:border-box;margin:0;padding:0}.center-container pt-card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100vh;box-sizing:border-box}.center-container pt-card pt-change-password-card,.left-right-container pt-card pt-change-password-card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box;margin:0;padding:1rem}@media(max-width:768px){.left-right-container{flex-direction:column}.left-right-container pt-card{width:100%;max-width:100%;min-height:50vh}.center-container{align-items:flex-start;padding:1rem}.center-container pt-card{min-height:auto}.center-container pt-card pt-change-password-card,.left-right-container pt-card pt-change-password-card{padding:0}}\n"] }]
+            args: [{ selector: 'pt-change-password-page', standalone: false, template: "<!-- Center Position -->\n<ng-container>\n  @if (changePasswordPageConfig.position === \"center\") {\n    <div class=\"center-container\">\n      @if (changePasswordPageConfig.centerCardConfig) {\n        <pt-card [config]=\"changePasswordPageConfig.centerCardConfig\">\n          <pt-change-password-card\n            [changePasswordErrorMessage]=\"changePasswordErrorMessage\"\n            [changePasswordPageConfig]=\"changePasswordPageConfig\"\n            (passwordValueChange)=\"onPasswordValueChange($event)\"\n            (changePasswordSubmit)=\"onChangePasswordSubmit($event)\"\n          ></pt-change-password-card>\n        </pt-card>\n      }\n    </div>\n  }\n\n  @if (\n    changePasswordPageConfig.position === \"left\" ||\n    changePasswordPageConfig.position === \"right\"\n  ) {\n    <div class=\"left-right-container\">\n      @if (changePasswordPageConfig.leftCardConfig) {\n        <pt-card [config]=\"changePasswordPageConfig.leftCardConfig\">\n          @if (changePasswordPageConfig.position === \"left\") {\n            <pt-change-password-card\n              [changePasswordErrorMessage]=\"changePasswordErrorMessage\"\n              [changePasswordPageConfig]=\"changePasswordPageConfig\"\n              (passwordValueChange)=\"onPasswordValueChange($event)\"\n              (changePasswordSubmit)=\"onChangePasswordSubmit($event)\"\n            ></pt-change-password-card>\n          }\n        </pt-card>\n      }\n\n      @if (changePasswordPageConfig.rightCardConfig) {\n        <pt-card [config]=\"changePasswordPageConfig.rightCardConfig\">\n          @if (changePasswordPageConfig.position === \"right\") {\n            <pt-change-password-card\n              [changePasswordErrorMessage]=\"changePasswordErrorMessage\"\n              [changePasswordPageConfig]=\"changePasswordPageConfig\"\n              (passwordValueChange)=\"onPasswordValueChange($event)\"\n              (changePasswordSubmit)=\"onChangePasswordSubmit($event)\"\n            ></pt-change-password-card>\n          }\n        </pt-card>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [":host{display:block;width:100%;min-width:0}.left-right-container{display:flex;width:100%;height:100vh;overflow:hidden}.left-right-container pt-card{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;max-width:50%;height:100%;box-sizing:border-box}.center-container{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;box-sizing:border-box;margin:0;padding:0;overflow:hidden}.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-change-password-card,.left-right-container pt-card pt-change-password-card{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box;margin:0;padding:16px}@media(max-width:768px){.left-right-container{flex-direction:column;height:auto;min-height:100vh;overflow:visible}.left-right-container pt-card{width:100%;max-width:100%;min-height:50vh}.center-container{width:100%;height:auto;min-height:100vh;padding:1rem;overflow:visible}.center-container pt-card{height:auto;min-height:100%}.center-container pt-card pt-change-password-card,.left-right-container pt-card pt-change-password-card{padding:0}}\n"] }]
         }], propDecorators: { changePasswordPageConfig: [{
                 type: Input
             }], changePasswordErrorMessage: [{