ng-prime-tools 1.1.26 → 1.1.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8373,6 +8373,7 @@ class PTLoginCardComponent {
|
|
|
8373
8373
|
constructor(fb) {
|
|
8374
8374
|
this.fb = fb;
|
|
8375
8375
|
this.loginErrorMessage = null;
|
|
8376
|
+
this.loginLoading = false;
|
|
8376
8377
|
this.loginSubmit = new EventEmitter();
|
|
8377
8378
|
this.destroy$ = new Subject();
|
|
8378
8379
|
this.formGroup = this.fb.group({});
|
|
@@ -8384,13 +8385,20 @@ class PTLoginCardComponent {
|
|
|
8384
8385
|
username: this.loginPageConfig?.login?.username || '',
|
|
8385
8386
|
password: this.loginPageConfig?.login?.password || '',
|
|
8386
8387
|
});
|
|
8387
|
-
this.
|
|
8388
|
+
this.updateButtonState();
|
|
8388
8389
|
this.formGroup.statusChanges
|
|
8389
8390
|
.pipe(takeUntil(this.destroy$))
|
|
8390
|
-
.subscribe((
|
|
8391
|
-
this.
|
|
8391
|
+
.subscribe(() => {
|
|
8392
|
+
this.updateButtonState();
|
|
8392
8393
|
});
|
|
8393
8394
|
}
|
|
8395
|
+
ngOnChanges(changes) {
|
|
8396
|
+
if (changes['loginLoading'] &&
|
|
8397
|
+
!changes['loginLoading'].firstChange &&
|
|
8398
|
+
this.loginPageConfig?.buttonConfig) {
|
|
8399
|
+
this.updateButtonState();
|
|
8400
|
+
}
|
|
8401
|
+
}
|
|
8394
8402
|
ngOnDestroy() {
|
|
8395
8403
|
this.destroy$.next();
|
|
8396
8404
|
this.destroy$.complete();
|
|
@@ -8463,6 +8471,7 @@ class PTLoginCardComponent {
|
|
|
8463
8471
|
iconPos: this.loginPageConfig.buttonConfig?.iconPos || 'left',
|
|
8464
8472
|
styleClass: this.loginPageConfig.buttonConfig?.styleClass || 'p-button-success',
|
|
8465
8473
|
disabled: this.loginPageConfig.buttonConfig?.disabled ?? true,
|
|
8474
|
+
loading: this.loginLoading,
|
|
8466
8475
|
width: this.loginPageConfig.buttonConfig?.width ?? '100%',
|
|
8467
8476
|
...this.loginPageConfig.buttonConfig,
|
|
8468
8477
|
};
|
|
@@ -8477,6 +8486,9 @@ class PTLoginCardComponent {
|
|
|
8477
8486
|
})) ?? [];
|
|
8478
8487
|
}
|
|
8479
8488
|
onSubmit() {
|
|
8489
|
+
if (this.loginLoading) {
|
|
8490
|
+
return;
|
|
8491
|
+
}
|
|
8480
8492
|
if (this.formGroup.valid) {
|
|
8481
8493
|
this.loginSubmit.emit(this.formGroup.getRawValue());
|
|
8482
8494
|
return;
|
|
@@ -8518,14 +8530,18 @@ class PTLoginCardComponent {
|
|
|
8518
8530
|
}
|
|
8519
8531
|
return 'text';
|
|
8520
8532
|
}
|
|
8521
|
-
|
|
8533
|
+
updateButtonState() {
|
|
8534
|
+
if (!this.loginPageConfig?.buttonConfig) {
|
|
8535
|
+
return;
|
|
8536
|
+
}
|
|
8522
8537
|
this.loginPageConfig.buttonConfig = {
|
|
8523
8538
|
...this.loginPageConfig.buttonConfig,
|
|
8524
|
-
|
|
8539
|
+
loading: this.loginLoading,
|
|
8540
|
+
disabled: this.loginLoading || this.formGroup.invalid,
|
|
8525
8541
|
};
|
|
8526
8542
|
}
|
|
8527
8543
|
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 }); }
|
|
8528
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginCardComponent, isStandalone: true, selector: "pt-login-card", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n @if (loginPageConfig.logoUrl; as logoUrl) {\n @if (logoUrl.imageUrl) {\n <div class=\"logo-container\">\n <img\n [src]=\"logoUrl.imageUrl\"\n [alt]=\"logoUrl.altText || 'Logo'\"\n [style.width]=\"logoUrl.width || '100px'\"\n [style.height]=\"logoUrl.height || 'auto'\"\n />\n </div>\n }\n }\n\n <div class=\"title-container\">\n <h1\n [ngStyle]=\"{\n color: loginPageConfig.title?.color || '#333',\n 'font-size': loginPageConfig.title?.fontSize || '24px',\n }\"\n >\n {{ loginPageConfig.title?.text || \"Default Title\" }}\n </h1>\n </div>\n\n @if (loginErrorMessage) {\n <div class=\"error-message\" role=\"alert\">\n {{ loginErrorMessage }}\n </div>\n }\n\n <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n @if (loginPageConfig.login; as login) {\n @if (login.errorMessage) {\n <div class=\"error-message\" role=\"alert\">\n {{ login.errorMessage }}\n </div>\n }\n }\n\n <div class=\"field\">\n <pt-text-input\n [formGroup]=\"formGroup\"\n [formField]=\"loginPageConfig.usernameField!\"\n ></pt-text-input>\n </div>\n\n <div class=\"field\">\n <pt-text-input\n [formGroup]=\"formGroup\"\n [formField]=\"loginPageConfig.passwordField!\"\n ></pt-text-input>\n </div>\n\n <div class=\"submit-btn\">\n <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n </div>\n\n @if (loginPageConfig.forgotPasswordConfig; as forgotPasswordConfig) {\n @if (forgotPasswordConfig.text && forgotPasswordConfig.url) {\n <div\n class=\"forgot-password-container\"\n [ngClass]=\"\n 'forgot-password-' + (forgotPasswordConfig.align || 'center')\n \"\n >\n <a\n [href]=\"forgotPasswordConfig.url\"\n [target]=\"forgotPasswordConfig.target || '_self'\"\n [rel]=\"\n forgotPasswordConfig.target === '_blank'\n ? 'noopener noreferrer'\n : null\n \"\n [ngStyle]=\"forgotPasswordConfig.style\"\n [class]=\"forgotPasswordConfig.styleClass || 'forgot-password-link'\"\n >\n {{ forgotPasswordConfig.text }}\n </a>\n </div>\n }\n }\n\n @if (visibleAdditionalContent.length > 0) {\n <div class=\"additional-content-list\">\n @for (item of visibleAdditionalContent; track item.id || $index) {\n <div\n class=\"additional-content-item\"\n [ngClass]=\"getAdditionalContentClass(item)\"\n [ngStyle]=\"item.style\"\n >\n @switch (item.type) {\n @case (\"link\") {\n @if (item.linkText && item.url) {\n <a\n [href]=\"item.url\"\n [target]=\"item.target || '_self'\"\n [rel]=\"getLinkRel(item)\"\n [class]=\"item.linkStyleClass || 'additional-content-link'\"\n [ngStyle]=\"item.linkStyle\"\n >\n {{ item.linkText }}\n </a>\n }\n }\n\n @case (\"text-with-link\") {\n @if (\n item.linkPosition === \"before\" && item.linkText && item.url\n ) {\n <a\n [href]=\"item.url\"\n [target]=\"item.target || '_self'\"\n [rel]=\"getLinkRel(item)\"\n [class]=\"item.linkStyleClass || 'additional-content-link'\"\n [ngStyle]=\"item.linkStyle\"\n >\n {{ item.linkText }}\n </a>\n\n @if (item.text) {\n <span class=\"additional-content-text\">\n {{ item.text }}\n </span>\n }\n } @else {\n @if (item.text) {\n <span class=\"additional-content-text\">\n {{ item.text }}\n </span>\n }\n\n @if (item.linkText && item.url) {\n <a\n [href]=\"item.url\"\n [target]=\"item.target || '_self'\"\n [rel]=\"getLinkRel(item)\"\n [class]=\"item.linkStyleClass || 'additional-content-link'\"\n [ngStyle]=\"item.linkStyle\"\n >\n {{ item.linkText }}\n </a>\n }\n }\n }\n\n @default {\n @if (item.text) {\n <span class=\"additional-content-text\">\n {{ item.text }}\n </span>\n }\n }\n }\n </div>\n }\n </div>\n }\n </form>\n\n <div class=\"login-footer\">\n {{ loginPageConfig.footer?.version }}\n\n <span>\n {{ loginPageConfig.footer?.copyright }}\n </span>\n </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.forgot-password-container{display:flex;width:100%;box-sizing:border-box;margin-top:.875rem;margin-bottom:0;font-size:.875rem;line-height:1.4}.forgot-password-left{justify-content:flex-start;text-align:left}.forgot-password-center{justify-content:center;text-align:center}.forgot-password-right{justify-content:flex-end;text-align:right}.forgot-password-link,.additional-content-link{color:var(--p-primary-color, #2563eb);font-size:.875rem;font-weight:500;line-height:1.4;text-decoration:none;cursor:pointer;transition:color .16s ease,text-decoration-color .16s ease}.forgot-password-link:hover,.additional-content-link:hover{color:var(--p-primary-hover-color, #1d4ed8);text-decoration:underline;text-underline-offset:.2rem}.forgot-password-link:focus-visible,.additional-content-link:focus-visible{outline:2px solid var(--p-primary-color, #2563eb);outline-offset:.2rem;border-radius:.2rem}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.forgot-password-container+.additional-content-list{margin-top:.75rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.login-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.login-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .forgot-password-link,:host-context(.app-dark) .forgot-password-link,:host-context(.dark) .forgot-password-link,:host-context(.dark-mode) .forgot-password-link,:host-context([data-theme=\"dark\"]) .forgot-password-link,:host-context(.p-dark) .additional-content-link,:host-context(.app-dark) .additional-content-link,:host-context(.dark) .additional-content-link,:host-context(.dark-mode) .additional-content-link,:host-context([data-theme=\"dark\"]) .additional-content-link{color:var(--p-primary-color, #60a5fa)}:host-context(.p-dark) .forgot-password-link:hover,:host-context(.app-dark) .forgot-password-link:hover,:host-context(.dark) .forgot-password-link:hover,:host-context(.dark-mode) .forgot-password-link:hover,:host-context([data-theme=\"dark\"]) .forgot-password-link:hover,:host-context(.p-dark) .additional-content-link:hover,:host-context(.app-dark) .additional-content-link:hover,:host-context(.dark) .additional-content-link:hover,:host-context(.dark-mode) .additional-content-link:hover,:host-context([data-theme=\"dark\"]) .additional-content-link:hover{color:var(--p-primary-hover-color, #93c5fd)}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .login-footer,:host-context(.app-dark) .login-footer,:host-context(.dark) .login-footer,:host-context(.dark-mode) .login-footer,:host-context([data-theme=\"dark\"]) .login-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.forgot-password-container{margin-top:.75rem}.additional-content-list{margin-top:.875rem}.forgot-password-container+.additional-content-list{margin-top:.65rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.forgot-password-container,.forgot-password-link,.additional-content-item,.additional-content-link{font-size:.82rem}.additional-content-list{gap:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
|
|
8544
|
+
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", loginLoading: "loginLoading" }, outputs: { loginSubmit: "loginSubmit" }, usesOnChanges: true, ngImport: i0, template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n @if (loginPageConfig.logoUrl; as logoUrl) {\n @if (logoUrl.imageUrl) {\n <div class=\"logo-container\">\n <img\n [src]=\"logoUrl.imageUrl\"\n [alt]=\"logoUrl.altText || 'Logo'\"\n [style.width]=\"logoUrl.width || '100px'\"\n [style.height]=\"logoUrl.height || 'auto'\"\n />\n </div>\n }\n }\n\n <div class=\"title-container\">\n <h1\n [ngStyle]=\"{\n color: loginPageConfig.title?.color || '#333',\n 'font-size': loginPageConfig.title?.fontSize || '24px',\n }\"\n >\n {{ loginPageConfig.title?.text || \"Default Title\" }}\n </h1>\n </div>\n\n @if (loginErrorMessage) {\n <div class=\"error-message\" role=\"alert\">\n {{ loginErrorMessage }}\n </div>\n }\n\n <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n @if (loginPageConfig.login; as login) {\n @if (login.errorMessage) {\n <div class=\"error-message\" role=\"alert\">\n {{ login.errorMessage }}\n </div>\n }\n }\n\n <div class=\"field\">\n <pt-text-input\n [formGroup]=\"formGroup\"\n [formField]=\"loginPageConfig.usernameField!\"\n ></pt-text-input>\n </div>\n\n <div class=\"field\">\n <pt-text-input\n [formGroup]=\"formGroup\"\n [formField]=\"loginPageConfig.passwordField!\"\n ></pt-text-input>\n </div>\n\n <div class=\"submit-btn\">\n <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n </div>\n\n @if (loginPageConfig.forgotPasswordConfig; as forgotPasswordConfig) {\n @if (forgotPasswordConfig.text && forgotPasswordConfig.url) {\n <div\n class=\"forgot-password-container\"\n [ngClass]=\"\n 'forgot-password-' + (forgotPasswordConfig.align || 'center')\n \"\n >\n <a\n [href]=\"forgotPasswordConfig.url\"\n [target]=\"forgotPasswordConfig.target || '_self'\"\n [rel]=\"\n forgotPasswordConfig.target === '_blank'\n ? 'noopener noreferrer'\n : null\n \"\n [ngStyle]=\"forgotPasswordConfig.style\"\n [class]=\"forgotPasswordConfig.styleClass || 'forgot-password-link'\"\n >\n {{ forgotPasswordConfig.text }}\n </a>\n </div>\n }\n }\n\n @if (visibleAdditionalContent.length > 0) {\n <div class=\"additional-content-list\">\n @for (item of visibleAdditionalContent; track item.id || $index) {\n <div\n class=\"additional-content-item\"\n [ngClass]=\"getAdditionalContentClass(item)\"\n [ngStyle]=\"item.style\"\n >\n @switch (item.type) {\n @case (\"link\") {\n @if (item.linkText && item.url) {\n <a\n [href]=\"item.url\"\n [target]=\"item.target || '_self'\"\n [rel]=\"getLinkRel(item)\"\n [class]=\"item.linkStyleClass || 'additional-content-link'\"\n [ngStyle]=\"item.linkStyle\"\n >\n {{ item.linkText }}\n </a>\n }\n }\n\n @case (\"text-with-link\") {\n @if (\n item.linkPosition === \"before\" && item.linkText && item.url\n ) {\n <a\n [href]=\"item.url\"\n [target]=\"item.target || '_self'\"\n [rel]=\"getLinkRel(item)\"\n [class]=\"item.linkStyleClass || 'additional-content-link'\"\n [ngStyle]=\"item.linkStyle\"\n >\n {{ item.linkText }}\n </a>\n\n @if (item.text) {\n <span class=\"additional-content-text\">\n {{ item.text }}\n </span>\n }\n } @else {\n @if (item.text) {\n <span class=\"additional-content-text\">\n {{ item.text }}\n </span>\n }\n\n @if (item.linkText && item.url) {\n <a\n [href]=\"item.url\"\n [target]=\"item.target || '_self'\"\n [rel]=\"getLinkRel(item)\"\n [class]=\"item.linkStyleClass || 'additional-content-link'\"\n [ngStyle]=\"item.linkStyle\"\n >\n {{ item.linkText }}\n </a>\n }\n }\n }\n\n @default {\n @if (item.text) {\n <span class=\"additional-content-text\">\n {{ item.text }}\n </span>\n }\n }\n }\n </div>\n }\n </div>\n }\n </form>\n\n <div class=\"login-footer\">\n {{ loginPageConfig.footer?.version }}\n\n <span>\n {{ loginPageConfig.footer?.copyright }}\n </span>\n </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.forgot-password-container{display:flex;width:100%;box-sizing:border-box;margin-top:.875rem;margin-bottom:0;font-size:.875rem;line-height:1.4}.forgot-password-left{justify-content:flex-start;text-align:left}.forgot-password-center{justify-content:center;text-align:center}.forgot-password-right{justify-content:flex-end;text-align:right}.forgot-password-link,.additional-content-link{color:var(--p-primary-color, #2563eb);font-size:.875rem;font-weight:500;line-height:1.4;text-decoration:none;cursor:pointer;transition:color .16s ease,text-decoration-color .16s ease}.forgot-password-link:hover,.additional-content-link:hover{color:var(--p-primary-hover-color, #1d4ed8);text-decoration:underline;text-underline-offset:.2rem}.forgot-password-link:focus-visible,.additional-content-link:focus-visible{outline:2px solid var(--p-primary-color, #2563eb);outline-offset:.2rem;border-radius:.2rem}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.forgot-password-container+.additional-content-list{margin-top:.75rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.login-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.login-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .forgot-password-link,:host-context(.app-dark) .forgot-password-link,:host-context(.dark) .forgot-password-link,:host-context(.dark-mode) .forgot-password-link,:host-context([data-theme=\"dark\"]) .forgot-password-link,:host-context(.p-dark) .additional-content-link,:host-context(.app-dark) .additional-content-link,:host-context(.dark) .additional-content-link,:host-context(.dark-mode) .additional-content-link,:host-context([data-theme=\"dark\"]) .additional-content-link{color:var(--p-primary-color, #60a5fa)}:host-context(.p-dark) .forgot-password-link:hover,:host-context(.app-dark) .forgot-password-link:hover,:host-context(.dark) .forgot-password-link:hover,:host-context(.dark-mode) .forgot-password-link:hover,:host-context([data-theme=\"dark\"]) .forgot-password-link:hover,:host-context(.p-dark) .additional-content-link:hover,:host-context(.app-dark) .additional-content-link:hover,:host-context(.dark) .additional-content-link:hover,:host-context(.dark-mode) .additional-content-link:hover,:host-context([data-theme=\"dark\"]) .additional-content-link:hover{color:var(--p-primary-hover-color, #93c5fd)}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .login-footer,:host-context(.app-dark) .login-footer,:host-context(.dark) .login-footer,:host-context(.dark-mode) .login-footer,:host-context([data-theme=\"dark\"]) .login-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.forgot-password-container{margin-top:.75rem}.additional-content-list{margin-top:.875rem}.forgot-password-container+.additional-content-list{margin-top:.65rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.forgot-password-container,.forgot-password-link,.additional-content-item,.additional-content-link{font-size:.82rem}.additional-content-list{gap:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
|
|
8529
8545
|
}
|
|
8530
8546
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginCardComponent, decorators: [{
|
|
8531
8547
|
type: Component,
|
|
@@ -8541,6 +8557,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
8541
8557
|
type: Input
|
|
8542
8558
|
}], loginErrorMessage: [{
|
|
8543
8559
|
type: Input
|
|
8560
|
+
}], loginLoading: [{
|
|
8561
|
+
type: Input
|
|
8544
8562
|
}], loginSubmit: [{
|
|
8545
8563
|
type: Output
|
|
8546
8564
|
}] } });
|
|
@@ -8548,6 +8566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
8548
8566
|
class PTLoginPageComponent {
|
|
8549
8567
|
constructor() {
|
|
8550
8568
|
this.loginErrorMessage = null;
|
|
8569
|
+
this.loginLoading = false;
|
|
8551
8570
|
this.loginSubmit = new EventEmitter();
|
|
8552
8571
|
this.defaultCardConfig = {
|
|
8553
8572
|
borderRadius: '0',
|
|
@@ -8562,12 +8581,15 @@ class PTLoginPageComponent {
|
|
|
8562
8581
|
ngOnInit() {
|
|
8563
8582
|
this.applyDefaultConfigs();
|
|
8564
8583
|
}
|
|
8584
|
+
onLoginSubmit(loginModel) {
|
|
8585
|
+
if (this.loginLoading) {
|
|
8586
|
+
return;
|
|
8587
|
+
}
|
|
8588
|
+
this.loginSubmit.emit(loginModel);
|
|
8589
|
+
}
|
|
8565
8590
|
applyDefaultConfigs() {
|
|
8566
|
-
// Apply defaults to centerCardConfig
|
|
8567
8591
|
this.loginPageConfig.centerCardConfig = this.applyDefaults(this.loginPageConfig.centerCardConfig);
|
|
8568
|
-
// Apply defaults to leftCardConfig
|
|
8569
8592
|
this.loginPageConfig.leftCardConfig = this.applyDefaults(this.loginPageConfig.leftCardConfig);
|
|
8570
|
-
// Apply defaults to rightCardConfig
|
|
8571
8593
|
this.loginPageConfig.rightCardConfig = this.applyDefaults(this.loginPageConfig.rightCardConfig);
|
|
8572
8594
|
}
|
|
8573
8595
|
applyDefaults(config) {
|
|
@@ -8576,19 +8598,18 @@ class PTLoginPageComponent {
|
|
|
8576
8598
|
...(config || {}),
|
|
8577
8599
|
};
|
|
8578
8600
|
}
|
|
8579
|
-
onLoginSubmit(loginModel) {
|
|
8580
|
-
this.loginSubmit.emit(loginModel);
|
|
8581
|
-
}
|
|
8582
8601
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8583
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginPageComponent, isStandalone: false, selector: "pt-login-page", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<!-- Center Position -->\n<ng-container>\n @if (loginPageConfig.position ===
|
|
8602
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginPageComponent, isStandalone: false, selector: "pt-login-page", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage", loginLoading: "loginLoading" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<!-- Center Position -->\n<ng-container>\n @if (loginPageConfig.position === \"center\") {\n <div class=\"center-container\">\n @if (loginPageConfig.centerCardConfig) {\n <pt-card [config]=\"loginPageConfig.centerCardConfig\">\n <pt-login-card\n [loginErrorMessage]=\"loginErrorMessage\"\n [loginLoading]=\"loginLoading\"\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n </pt-card>\n }\n </div>\n }\n\n <!-- Left and Right Positions -->\n @if (\n loginPageConfig.position === \"left\" || loginPageConfig.position === \"right\"\n ) {\n <div class=\"left-right-container\">\n <!-- Left Card -->\n @if (loginPageConfig.leftCardConfig) {\n <pt-card [config]=\"loginPageConfig.leftCardConfig\">\n @if (loginPageConfig.position === \"left\") {\n <pt-login-card\n [loginErrorMessage]=\"loginErrorMessage\"\n [loginLoading]=\"loginLoading\"\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n }\n </pt-card>\n }\n\n <!-- Right Card -->\n @if (loginPageConfig.rightCardConfig) {\n <pt-card [config]=\"loginPageConfig.rightCardConfig\">\n @if (loginPageConfig.position === \"right\") {\n <pt-login-card\n [loginErrorMessage]=\"loginErrorMessage\"\n [loginLoading]=\"loginLoading\"\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n }\n </pt-card>\n }\n </div>\n }\n</ng-container>\n", styles: [".left-right-container{display:flex;height:100vh;width:100%}.left-right-container pt-card{flex:1;max-width:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;margin:0;padding:0;box-sizing:border-box;overflow:hidden}.center-container pt-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;box-sizing:border-box}.center-container pt-card pt-login-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:16px;box-sizing:border-box;margin:0}\n"], dependencies: [{ kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTLoginCardComponent, selector: "pt-login-card", inputs: ["loginPageConfig", "loginErrorMessage", "loginLoading"], outputs: ["loginSubmit"] }] }); }
|
|
8584
8603
|
}
|
|
8585
8604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginPageComponent, decorators: [{
|
|
8586
8605
|
type: Component,
|
|
8587
|
-
args: [{ selector: 'pt-login-page', standalone: false, template: "<!-- Center Position -->\n<ng-container>\n @if (loginPageConfig.position ===
|
|
8606
|
+
args: [{ selector: 'pt-login-page', standalone: false, template: "<!-- Center Position -->\n<ng-container>\n @if (loginPageConfig.position === \"center\") {\n <div class=\"center-container\">\n @if (loginPageConfig.centerCardConfig) {\n <pt-card [config]=\"loginPageConfig.centerCardConfig\">\n <pt-login-card\n [loginErrorMessage]=\"loginErrorMessage\"\n [loginLoading]=\"loginLoading\"\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n </pt-card>\n }\n </div>\n }\n\n <!-- Left and Right Positions -->\n @if (\n loginPageConfig.position === \"left\" || loginPageConfig.position === \"right\"\n ) {\n <div class=\"left-right-container\">\n <!-- Left Card -->\n @if (loginPageConfig.leftCardConfig) {\n <pt-card [config]=\"loginPageConfig.leftCardConfig\">\n @if (loginPageConfig.position === \"left\") {\n <pt-login-card\n [loginErrorMessage]=\"loginErrorMessage\"\n [loginLoading]=\"loginLoading\"\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n }\n </pt-card>\n }\n\n <!-- Right Card -->\n @if (loginPageConfig.rightCardConfig) {\n <pt-card [config]=\"loginPageConfig.rightCardConfig\">\n @if (loginPageConfig.position === \"right\") {\n <pt-login-card\n [loginErrorMessage]=\"loginErrorMessage\"\n [loginLoading]=\"loginLoading\"\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n }\n </pt-card>\n }\n </div>\n }\n</ng-container>\n", styles: [".left-right-container{display:flex;height:100vh;width:100%}.left-right-container pt-card{flex:1;max-width:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;margin:0;padding:0;box-sizing:border-box;overflow:hidden}.center-container pt-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;box-sizing:border-box}.center-container pt-card pt-login-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:16px;box-sizing:border-box;margin:0}\n"] }]
|
|
8588
8607
|
}], propDecorators: { loginPageConfig: [{
|
|
8589
8608
|
type: Input
|
|
8590
8609
|
}], loginErrorMessage: [{
|
|
8591
8610
|
type: Input
|
|
8611
|
+
}], loginLoading: [{
|
|
8612
|
+
type: Input
|
|
8592
8613
|
}], loginSubmit: [{
|
|
8593
8614
|
type: Output
|
|
8594
8615
|
}] } });
|