ng-prime-tools 1.0.85 → 1.0.87

package/fesm2022/ng-prime-tools.mjs

@@ -5886,6 +5886,7 @@ class PTLoginCardComponent {
         this.fb = fb;
         this.loginErrorMessage = null;
         this.loginSubmit = new EventEmitter();
+        this.destroy$ = new Subject();
         this.formGroup = this.fb.group({});
     }
     ngOnInit() {
@@ -5895,23 +5896,26 @@ class PTLoginCardComponent {
             username: this.loginPageConfig?.login?.username || '',
             password: this.loginPageConfig?.login?.password || '',
         });
-        // Enable/Disable the button based on form validity
-        this.formGroup.statusChanges.subscribe((status) => {
-            this.loginPageConfig.buttonConfig = {
-                ...this.loginPageConfig.buttonConfig,
-                disabled: status !== 'VALID',
-            };
+        this.updateButtonDisabledState(this.formGroup.valid);
+        this.formGroup.statusChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((status) => {
+            this.updateButtonDisabledState(status === 'VALID');
         });
     }
-    // Initialize default values for all fields in loginPageConfig if not set
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    get visibleAdditionalContent() {
+        return (this.loginPageConfig.additionalContent?.filter((item) => item.visible !== false) ?? []);
+    }
     initializeDefaults() {
-        // Initialize backgroundImage
         this.loginPageConfig.backgroundImage = {
             imageUrl: this.loginPageConfig.backgroundImage?.imageUrl || '',
             transparencyPercentage: this.loginPageConfig.backgroundImage?.transparencyPercentage || '100',
             ...this.loginPageConfig.backgroundImage,
         };
-        // Initialize title
         this.loginPageConfig.title = {
             text: this.loginPageConfig.title?.text || 'Login',
             position: this.loginPageConfig.title?.position || 'center',
@@ -5919,7 +5923,6 @@ class PTLoginCardComponent {
             fontSize: this.loginPageConfig.title?.fontSize || '24px',
             ...this.loginPageConfig.title,
         };
-        // Initialize logoUrl
         this.loginPageConfig.logoUrl = {
             altText: this.loginPageConfig.logoUrl?.altText || 'Logo',
             imageUrl: this.loginPageConfig.logoUrl?.imageUrl || '',
@@ -5927,13 +5930,11 @@ class PTLoginCardComponent {
             height: this.loginPageConfig.logoUrl?.height || 'auto',
             ...this.loginPageConfig.logoUrl,
         };
-        // Initialize footer
         this.loginPageConfig.footer = {
             version: this.loginPageConfig.footer?.version || 'V1.0',
             copyright: this.loginPageConfig.footer?.copyright || 'Your Company © 2024',
             ...this.loginPageConfig.footer,
         };
-        // Initialize login
         this.loginPageConfig.login = {
             username: this.loginPageConfig.login?.username || '',
             password: this.loginPageConfig.login?.password || '',
@@ -5942,14 +5943,12 @@ class PTLoginCardComponent {
                 "Veuillez saisir votre nom d'utilisateur et votre mot de passe !",
             ...this.loginPageConfig.login,
         };
-        // Initialize cardConfig
         this.loginPageConfig.loginCardConfig = {
             noBorder: this.loginPageConfig.loginCardConfig?.noBorder ?? true,
             width: this.loginPageConfig.loginCardConfig?.width ?? '400px',
             padding: this.loginPageConfig.loginCardConfig?.padding ?? '40px',
             ...this.loginPageConfig.loginCardConfig,
         };
-        // Initialize usernameField
         this.loginPageConfig.usernameField = {
             name: this.loginPageConfig.usernameField?.name || 'username',
             label: this.loginPageConfig.usernameField?.label || "Nom d'utilisateur",
@@ -5958,7 +5957,6 @@ class PTLoginCardComponent {
                 "Entrer votre nom d'utilisateur",
             ...this.loginPageConfig.usernameField,
         };
-        // Initialize passwordField
         this.loginPageConfig.passwordField = {
             name: this.loginPageConfig.passwordField?.name || 'password',
             label: this.loginPageConfig.passwordField?.label || 'Mot de passe',
@@ -5966,13 +5964,10 @@ class PTLoginCardComponent {
             placeholder: this.loginPageConfig.passwordField?.placeholder ||
                 'Entrer votre mot de passe',
             type: this.loginPageConfig.passwordField?.type || FormInputTypeEnum.PASSWORD,
-            // Show / hide password is now handled by pt-text-input via PrimeNG p-password.
             toggleMask: this.loginPageConfig.passwordField?.toggleMask ?? true,
-            // Disabled by default for login forms.
             feedback: this.loginPageConfig.passwordField?.feedback ?? false,
             ...this.loginPageConfig.passwordField,
         };
-        // Initialize buttonConfig
         this.loginPageConfig.buttonConfig = {
             label: this.loginPageConfig.buttonConfig?.label || 'Login',
             type: this.loginPageConfig.buttonConfig?.type || 'submit',
@@ -5983,40 +5978,77 @@ class PTLoginCardComponent {
             width: this.loginPageConfig.buttonConfig?.width ?? '100%',
             ...this.loginPageConfig.buttonConfig,
         };
+        this.loginPageConfig.additionalContent =
+            this.loginPageConfig.additionalContent?.map((item) => ({
+                type: item.type ?? this.resolveItemType(item),
+                target: item.target ?? '_self',
+                linkPosition: item.linkPosition ?? 'after',
+                align: item.align ?? 'center',
+                visible: item.visible ?? true,
+                ...item,
+            })) ?? [];
     }
     onSubmit() {
         if (this.formGroup.valid) {
-            this.loginSubmit.emit(this.formGroup.value);
-        }
-        else {
-            this.loginPageConfig.login.errorMessage =
-                this.loginPageConfig.login?.emptyFieldsErrorMessage;
+            this.loginSubmit.emit(this.formGroup.getRawValue());
+            return;
         }
+        this.formGroup.markAllAsTouched();
+        this.loginPageConfig.login.errorMessage =
+            this.loginPageConfig.login?.emptyFieldsErrorMessage;
     }
-    // Setup form fields using the usernameField and passwordField from LoginPageConfig
     setupFormFields() {
-        const usernameValidators = this.loginPageConfig.usernameField?.required
+        const usernameField = this.loginPageConfig.usernameField;
+        const passwordField = this.loginPageConfig.passwordField;
+        const usernameValidators = usernameField.required
             ? [Validators.required]
             : [];
-        const passwordValidators = this.loginPageConfig.passwordField?.required
+        const passwordValidators = passwordField.required
             ? [Validators.required]
             : [];
-        this.formGroup.addControl(this.loginPageConfig.usernameField.name, this.fb.control(this.loginPageConfig.login?.username, usernameValidators));
-        this.formGroup.addControl(this.loginPageConfig.passwordField.name, this.fb.control(this.loginPageConfig.login?.password, passwordValidators));
+        this.formGroup.addControl(usernameField.name, this.fb.control(this.loginPageConfig.login?.username ?? '', usernameValidators));
+        this.formGroup.addControl(passwordField.name, this.fb.control(this.loginPageConfig.login?.password ?? '', passwordValidators));
+    }
+    getAdditionalContentClass(item) {
+        return [
+            `additional-content-${item.align ?? 'center'}`,
+            item.styleClass ?? '',
+        ].filter(Boolean);
+    }
+    getLinkRel(item) {
+        if (item.rel) {
+            return item.rel;
+        }
+        return item.target === '_blank' ? 'noopener noreferrer' : null;
+    }
+    resolveItemType(item) {
+        if (item.text && item.linkText && item.url) {
+            return 'text-with-link';
+        }
+        if (item.linkText && item.url) {
+            return 'link';
+        }
+        return 'text';
+    }
+    updateButtonDisabledState(formValid) {
+        this.loginPageConfig.buttonConfig = {
+            ...this.loginPageConfig.buttonConfig,
+            disabled: !formValid,
+        };
     }
     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  <!-- Logo -->\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  <!-- Title -->\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  <!-- External Error Message -->\n  @if (loginErrorMessage) {\n    <div class=\"error-message\">\n      {{ loginErrorMessage }}\n    </div>\n  }\n\n  <!-- Form -->\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (loginPageConfig.login?.errorMessage) {\n      <div class=\"error-message\">\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    @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          [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    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n  </form>\n\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n    <span>{{ loginPageConfig.footer?.copyright }}</span>\n  </div>\n</pt-card>\n", styles: [".logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.title-container{text-align:center;margin-bottom:20px}.form-container{width:100%}.field{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.error-message{color:red;background-color:#ffe6e6;border:1px solid red;padding:10px;margin-bottom:10px;border-radius:5px;width:100%;text-align:center}.forgot-password-container{width:100%;display:flex;justify-content:center;margin-top:-10px;margin-bottom:20px}.forgot-password-left{justify-content:flex-start}.forgot-password-center{justify-content:center}.forgot-password-right{justify-content:flex-end}.forgot-password-link{color:#2563eb;font-size:.9rem;font-weight:500;text-decoration:none;cursor:pointer;transition:color .2s ease}.forgot-password-link:hover{color:#1d4ed8;text-decoration:underline}.submit-btn{display:flex;justify-content:center;width:100%}::ng-deep pt-button{width:100%}::ng-deep .submit-btn p-button button{width:100%}.login-footer{margin-top:20px;text-align:center;font-size:.9em;color:#555}.login-footer span{display:block;margin-top:.25rem}@media(max-width:768px){pt-card{max-width:300px}.submit-btn{min-width:100%}.forgot-password-container{justify-content:center}}\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?.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-login-card', imports: [
+            args: [{ selector: 'pt-login-card', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
                         PTCardModule,
                         PTButtonModule,
                         PTTextInputModule,
-                    ], template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  <!-- Logo -->\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  <!-- Title -->\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  <!-- External Error Message -->\n  @if (loginErrorMessage) {\n    <div class=\"error-message\">\n      {{ loginErrorMessage }}\n    </div>\n  }\n\n  <!-- Form -->\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (loginPageConfig.login?.errorMessage) {\n      <div class=\"error-message\">\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    @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          [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    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n  </form>\n\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n    <span>{{ loginPageConfig.footer?.copyright }}</span>\n  </div>\n</pt-card>\n", styles: [".logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.title-container{text-align:center;margin-bottom:20px}.form-container{width:100%}.field{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.error-message{color:red;background-color:#ffe6e6;border:1px solid red;padding:10px;margin-bottom:10px;border-radius:5px;width:100%;text-align:center}.forgot-password-container{width:100%;display:flex;justify-content:center;margin-top:-10px;margin-bottom:20px}.forgot-password-left{justify-content:flex-start}.forgot-password-center{justify-content:center}.forgot-password-right{justify-content:flex-end}.forgot-password-link{color:#2563eb;font-size:.9rem;font-weight:500;text-decoration:none;cursor:pointer;transition:color .2s ease}.forgot-password-link:hover{color:#1d4ed8;text-decoration:underline}.submit-btn{display:flex;justify-content:center;width:100%}::ng-deep pt-button{width:100%}::ng-deep .submit-btn p-button button{width:100%}.login-footer{margin-top:20px;text-align:center;font-size:.9em;color:#555}.login-footer span{display:block;margin-top:.25rem}@media(max-width:768px){pt-card{max-width:300px}.submit-btn{min-width:100%}.forgot-password-container{justify-content:center}}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { loginPageConfig: [{
                 type: Input
             }], loginErrorMessage: [{
@@ -7323,6 +7355,324 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+class PTChangePasswordCardComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.changePasswordErrorMessage = null;
+        this.passwordValueChange = new EventEmitter();
+        this.changePasswordSubmit = new EventEmitter();
+        this.destroy$ = new Subject();
+        this.formGroup = this.formBuilder.group({}, {
+            validators: [this.passwordMatchValidator()],
+        });
+    }
+    ngOnInit() {
+        this.initializeDefaults();
+        this.setupFormFields();
+        this.listenToPasswordChanges();
+        this.updateButtonDisabledState();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    get confirmationPasswordControl() {
+        return this.formGroup.get(this.changePasswordPageConfig.confirmationPasswordField?.name ??
+            'confirmationPassword');
+    }
+    get visiblePasswordPolicyRules() {
+        return (this.changePasswordPageConfig.passwordPolicyRules?.filter((rule) => rule.visible !== false) ?? []);
+    }
+    get visibleAdditionalContent() {
+        return (this.changePasswordPageConfig.additionalContent?.filter((item) => item.visible !== false) ?? []);
+    }
+    onSubmit() {
+        this.formGroup.markAllAsTouched();
+        if (!this.formGroup.valid) {
+            this.changePasswordPageConfig.errorMessage =
+                this.changePasswordPageConfig.emptyFieldsErrorMessage ??
+                    'Veuillez renseigner tous les champs obligatoires.';
+            return;
+        }
+        if (!this.areFrontendPasswordPolicyRulesValid()) {
+            this.changePasswordPageConfig.errorMessage =
+                'Le nouveau mot de passe ne respecte pas les règles de sécurité.';
+            return;
+        }
+        this.changePasswordPageConfig.errorMessage = '';
+        this.changePasswordSubmit.emit(this.buildChangePasswordModel());
+    }
+    getAdditionalContentClass(item) {
+        return [
+            `additional-content-${item.align ?? 'center'}`,
+            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) {
+            const currentPasswordField = this.changePasswordPageConfig.currentPasswordField;
+            this.formGroup.addControl(currentPasswordField.name, this.formBuilder.control(changePassword.currentPassword ?? '', currentPasswordField.required ? [Validators.required] : []));
+        }
+        const newPasswordField = this.changePasswordPageConfig.newPasswordField;
+        this.formGroup.addControl(newPasswordField.name, this.formBuilder.control(changePassword.newPassword ?? '', newPasswordField.required ? [Validators.required] : []));
+        const confirmationPasswordField = this.changePasswordPageConfig.confirmationPasswordField;
+        this.formGroup.addControl(confirmationPasswordField.name, this.formBuilder.control(changePassword.confirmationPassword ?? '', confirmationPasswordField.required ? [Validators.required] : []));
+    }
+    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();
+        });
+        this.formGroup.statusChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.updateButtonDisabledState();
+        });
+    }
+    buildChangePasswordModel() {
+        const currentPasswordFieldName = this.changePasswordPageConfig.currentPasswordField?.name ??
+            'currentPassword';
+        const newPasswordFieldName = this.changePasswordPageConfig.newPasswordField?.name ?? 'newPassword';
+        const confirmationPasswordFieldName = this.changePasswordPageConfig.confirmationPasswordField?.name ??
+            'confirmationPassword';
+        return {
+            currentPassword: this.changePasswordPageConfig.showCurrentPasswordField
+                ? String(this.formGroup.get(currentPasswordFieldName)?.value ?? '')
+                : undefined,
+            newPassword: String(this.formGroup.get(newPasswordFieldName)?.value ?? ''),
+            confirmationPassword: String(this.formGroup.get(confirmationPasswordFieldName)?.value ?? ''),
+        };
+    }
+    passwordMatchValidator() {
+        return (control) => {
+            const newPasswordFieldName = this.changePasswordPageConfig?.newPasswordField?.name ?? 'newPassword';
+            const confirmationPasswordFieldName = this.changePasswordPageConfig?.confirmationPasswordField?.name ??
+                'confirmationPassword';
+            const newPassword = String(control.get(newPasswordFieldName)?.value ?? '');
+            const confirmationPassword = String(control.get(confirmationPasswordFieldName)?.value ?? '');
+            if (!newPassword || !confirmationPassword) {
+                return null;
+            }
+            return newPassword === confirmationPassword
+                ? null
+                : { passwordMismatch: true };
+        };
+    }
+    areFrontendPasswordPolicyRulesValid() {
+        return this.visiblePasswordPolicyRules
+            .filter((rule) => !rule.backendOnly)
+            .every((rule) => rule.valid === true);
+    }
+    updateButtonDisabledState() {
+        const isFormValid = this.formGroup.valid;
+        const arePoliciesValid = this.areFrontendPasswordPolicyRulesValid();
+        this.changePasswordPageConfig.buttonConfig = {
+            ...this.changePasswordPageConfig.buttonConfig,
+            disabled: !isFormValid || !arePoliciesValid,
+        };
+    }
+    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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChangePasswordCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-change-password-card', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        PTCardModule,
+                        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"] }]
+        }], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { changePasswordPageConfig: [{
+                type: Input
+            }], changePasswordErrorMessage: [{
+                type: Input
+            }], passwordValueChange: [{
+                type: Output
+            }], changePasswordSubmit: [{
+                type: Output
+            }] } });
+
+class PTChangePasswordPageComponent {
+    constructor() {
+        this.changePasswordErrorMessage = null;
+        this.passwordValueChange = new EventEmitter();
+        this.changePasswordSubmit = new EventEmitter();
+        this.defaultCardConfig = {
+            borderRadius: '0',
+            margin: '0',
+            width: '100%',
+            height: '100%',
+            noBorder: true,
+            alignContent: 'center',
+            alignBodyContent: 'center',
+        };
+    }
+    ngOnInit() {
+        this.initializeDefaultPosition();
+        this.applyDefaultConfigs();
+    }
+    onPasswordValueChange(changePasswordModel) {
+        this.passwordValueChange.emit(changePasswordModel);
+    }
+    onChangePasswordSubmit(changePasswordModel) {
+        this.changePasswordSubmit.emit(changePasswordModel);
+    }
+    initializeDefaultPosition() {
+        this.changePasswordPageConfig.position =
+            this.changePasswordPageConfig.position ?? 'center';
+    }
+    applyDefaultConfigs() {
+        this.changePasswordPageConfig.centerCardConfig = this.applyDefaults(this.changePasswordPageConfig.centerCardConfig);
+        this.changePasswordPageConfig.leftCardConfig = this.applyDefaults(this.changePasswordPageConfig.leftCardConfig);
+        this.changePasswordPageConfig.rightCardConfig = this.applyDefaults(this.changePasswordPageConfig.rightCardConfig);
+    }
+    applyDefaults(config) {
+        return {
+            ...this.defaultCardConfig,
+            ...(config ?? {}),
+        };
+    }
+    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"] }] }); }
+}
+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"] }]
+        }], propDecorators: { changePasswordPageConfig: [{
+                type: Input
+            }], changePasswordErrorMessage: [{
+                type: Input
+            }], passwordValueChange: [{
+                type: Output
+            }], changePasswordSubmit: [{
+                type: Output
+            }] } });
+
+class PTChangePasswordPageModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChangePasswordPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTChangePasswordPageModule, declarations: [PTChangePasswordPageComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            PTTextInputModule,
+            PTCardModule,
+            PTButtonModule,
+            PTChangePasswordCardComponent], exports: [PTChangePasswordPageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChangePasswordPageModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            PTTextInputModule,
+            PTCardModule,
+            PTButtonModule,
+            PTChangePasswordCardComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChangePasswordPageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTChangePasswordPageComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        PTTextInputModule,
+                        PTCardModule,
+                        PTButtonModule,
+                        PTChangePasswordCardComponent,
+                    ],
+                    exports: [PTChangePasswordPageComponent],
+                }]
+        }] });
+
 // nav-bar-menu-config.model.ts
 
 // src/lib/models/pt-dialog-config.model.ts
@@ -7384,5 +7734,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, 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, PTPageSkeletonComponent, PTPageSkeletonModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, PTToastNotifierComponent, PTToastNotifierModule, SearchCriteriaTypeEnum, SeverityEnum, TableTypeEnum };
 //# sourceMappingURL=ng-prime-tools.mjs.map