ng-prime-tools 1.0.85 → 1.0.86

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: [{