ng-prime-tools 1.0.16 → 1.0.17
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.
- package/README.md +4 -0
- package/esm2022/lib/models/card-config.model.mjs +1 -1
- package/esm2022/lib/models/login-page-config.model.mjs +1 -1
- package/esm2022/lib/pt-card/pt-card.component.mjs +43 -3
- package/esm2022/lib/pt-login-page/pt-login-card/pt-login-card.component.mjs +147 -0
- package/esm2022/lib/pt-login-page/pt-login-page.component.mjs +35 -126
- package/esm2022/lib/pt-login-page/pt-login-page.module.mjs +7 -3
- package/fesm2022/ng-prime-tools.mjs +125 -35
- package/fesm2022/ng-prime-tools.mjs.map +1 -1
- package/lib/models/card-config.model.d.ts +3 -0
- package/lib/models/card-config.model.d.ts.map +1 -1
- package/lib/models/login-page-config.model.d.ts +5 -1
- package/lib/models/login-page-config.model.d.ts.map +1 -1
- package/lib/pt-card/pt-card.component.d.ts +24 -0
- package/lib/pt-card/pt-card.component.d.ts.map +1 -1
- package/lib/pt-login-page/pt-login-card/pt-login-card.component.d.ts +18 -0
- package/lib/pt-login-page/pt-login-card/pt-login-card.component.d.ts.map +1 -0
- package/lib/pt-login-page/pt-login-page.component.d.ts +5 -10
- package/lib/pt-login-page/pt-login-page.component.d.ts.map +1 -1
- package/lib/pt-login-page/pt-login-page.module.d.ts +2 -1
- package/lib/pt-login-page/pt-login-page.module.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -2278,7 +2278,13 @@ class PTCardComponent {
|
|
|
2278
2278
|
: `${patternWidth} ${patternHeight}`;
|
|
2279
2279
|
// Determine background-position based on the position parameter
|
|
2280
2280
|
const backgroundPosition = this.config.pattern?.position || 'center';
|
|
2281
|
+
const justifyContent = this.config.alignContent === 'center' ? 'center' : 'flex-start';
|
|
2282
|
+
const alignItems = this.config.alignContent === 'center' ? 'center' : 'stretch';
|
|
2281
2283
|
return {
|
|
2284
|
+
display: 'flex',
|
|
2285
|
+
flexDirection: 'column',
|
|
2286
|
+
justifyContent, // Apply conditional vertical alignment
|
|
2287
|
+
alignItems, // Apply conditional horizontal alignment
|
|
2282
2288
|
backgroundColor,
|
|
2283
2289
|
width: this.config.width || PTCardComponent.DEFAULT_WIDTH,
|
|
2284
2290
|
height: this.config.height || PTCardComponent.DEFAULT_HEIGHT,
|
|
@@ -2297,18 +2303,52 @@ class PTCardComponent {
|
|
|
2297
2303
|
zIndex: this.config.zIndex !== undefined ? this.config.zIndex : 'auto',
|
|
2298
2304
|
};
|
|
2299
2305
|
}
|
|
2306
|
+
getBodyStyles() {
|
|
2307
|
+
const justifyContent = this.config.alignBodyContent === 'center' ? 'center' : 'flex-start';
|
|
2308
|
+
const alignItems = this.config.alignBodyContent === 'center' ? 'center' : 'stretch';
|
|
2309
|
+
return {
|
|
2310
|
+
display: 'flex',
|
|
2311
|
+
flexDirection: 'column',
|
|
2312
|
+
justifyContent,
|
|
2313
|
+
alignItems,
|
|
2314
|
+
flexGrow: 1,
|
|
2315
|
+
maxWidth: '100%',
|
|
2316
|
+
padding: '16px', // Default padding for body
|
|
2317
|
+
boxSizing: 'border-box',
|
|
2318
|
+
};
|
|
2319
|
+
}
|
|
2320
|
+
getHeaderStyles() {
|
|
2321
|
+
const justifyContent = this.config.alignHeaderContent === 'center' ? 'center' : 'flex-start';
|
|
2322
|
+
const alignItems = this.config.alignHeaderContent === 'center' ? 'center' : 'stretch';
|
|
2323
|
+
return {
|
|
2324
|
+
display: 'flex',
|
|
2325
|
+
justifyContent,
|
|
2326
|
+
alignItems,
|
|
2327
|
+
marginBottom: '16px', // Default margin for header
|
|
2328
|
+
position: 'relative',
|
|
2329
|
+
};
|
|
2330
|
+
}
|
|
2300
2331
|
isScrollableHorizontal() {
|
|
2301
2332
|
return !!this.config.scrollableHorizontal;
|
|
2302
2333
|
}
|
|
2303
2334
|
isScrollableVertical() {
|
|
2304
2335
|
return !!this.config.scrollableVertical;
|
|
2305
2336
|
}
|
|
2337
|
+
getCardClass() {
|
|
2338
|
+
return this.config.alignContent === 'center' ? 'center-align' : '';
|
|
2339
|
+
}
|
|
2340
|
+
getBodyClass() {
|
|
2341
|
+
return this.config.alignBodyContent === 'center' ? 'center-align' : '';
|
|
2342
|
+
}
|
|
2343
|
+
getHeaderClass() {
|
|
2344
|
+
return this.config.alignHeaderContent === 'center' ? 'center-align' : '';
|
|
2345
|
+
}
|
|
2306
2346
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2307
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTCardComponent, selector: "pt-card", inputs: { config: "config" }, ngImport: i0, template: "<div\n class=\"pt-card card\"\n [attr.id]=\"config.identifier\"\n [ngStyle]=\"getCardStyles()\"\n>\n <div
|
|
2347
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTCardComponent, selector: "pt-card", inputs: { config: "config" }, ngImport: i0, template: "<div\n class=\"pt-card card\"\n [ngClass]=\"getCardClass()\"\n [attr.id]=\"config.identifier\"\n [ngStyle]=\"getCardStyles()\"\n>\n <!-- Card Header -->\n <div\n *ngIf=\"hasTitle()\"\n class=\"card-header\"\n [ngClass]=\"getHeaderClass()\"\n [ngStyle]=\"getHeaderStyles()\"\n >\n <i\n *ngIf=\"getIconClass() && getIconPosition() === 'left'\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n class=\"card-header-icon-left\"\n ></i>\n <span>{{ getTitleText() }}</span>\n <i\n *ngIf=\"getIconClass() && getIconPosition() === 'right'\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n class=\"card-header-icon-right\"\n ></i>\n <pt-menu\n *ngIf=\"config.menu\"\n [config]=\"config.menu\"\n [ngClass]=\"{\n 'menu-left': getMenuPosition() === 'left',\n 'menu-right': getMenuPosition() === 'right'\n }\"\n ></pt-menu>\n </div>\n\n <!-- Card Body -->\n <div class=\"card-body\" [ngClass]=\"getBodyClass()\" [ngStyle]=\"getBodyStyles()\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".pt-card .card{display:flex;flex-direction:column;padding:16px;margin:0 auto;max-height:100vh;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;justify-content:flex-start;align-items:stretch}.pt-card .card.center-align{justify-content:center;align-items:center}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none}.pt-card .card-body{display:flex;flex-direction:column;flex-grow:1;max-width:100%;z-index:1;padding:0;box-sizing:border-box;justify-content:flex-start;align-items:stretch}.pt-card .card-body.center-align{justify-content:center;align-items:center}.pt-card .card-header{margin-bottom:16px;display:flex;position:relative;justify-content:flex-start;align-items:stretch}.pt-card .card-header.center-align{justify-content:center;align-items:center}.pt-card .card-header-icon-left{margin-right:6px}.pt-card .card-header-icon-right{margin-left:6px}.pt-card .menu-left{position:absolute;left:0;top:0}.pt-card .menu-right{position:absolute;right:0;top:-2px}.pt-card .card-menu{margin-left:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTMenuComponent, selector: "pt-menu", inputs: ["config"] }] }); }
|
|
2308
2348
|
}
|
|
2309
2349
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCardComponent, decorators: [{
|
|
2310
2350
|
type: Component,
|
|
2311
|
-
args: [{ selector: 'pt-card', template: "<div\n class=\"pt-card card\"\n [attr.id]=\"config.identifier\"\n [ngStyle]=\"getCardStyles()\"\n>\n <div
|
|
2351
|
+
args: [{ selector: 'pt-card', template: "<div\n class=\"pt-card card\"\n [ngClass]=\"getCardClass()\"\n [attr.id]=\"config.identifier\"\n [ngStyle]=\"getCardStyles()\"\n>\n <!-- Card Header -->\n <div\n *ngIf=\"hasTitle()\"\n class=\"card-header\"\n [ngClass]=\"getHeaderClass()\"\n [ngStyle]=\"getHeaderStyles()\"\n >\n <i\n *ngIf=\"getIconClass() && getIconPosition() === 'left'\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n class=\"card-header-icon-left\"\n ></i>\n <span>{{ getTitleText() }}</span>\n <i\n *ngIf=\"getIconClass() && getIconPosition() === 'right'\"\n [ngClass]=\"getIconClass()\"\n [ngStyle]=\"getIconStyles()\"\n class=\"card-header-icon-right\"\n ></i>\n <pt-menu\n *ngIf=\"config.menu\"\n [config]=\"config.menu\"\n [ngClass]=\"{\n 'menu-left': getMenuPosition() === 'left',\n 'menu-right': getMenuPosition() === 'right'\n }\"\n ></pt-menu>\n </div>\n\n <!-- Card Body -->\n <div class=\"card-body\" [ngClass]=\"getBodyClass()\" [ngStyle]=\"getBodyStyles()\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".pt-card .card{display:flex;flex-direction:column;padding:16px;margin:0 auto;max-height:100vh;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;justify-content:flex-start;align-items:stretch}.pt-card .card.center-align{justify-content:center;align-items:center}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none}.pt-card .card-body{display:flex;flex-direction:column;flex-grow:1;max-width:100%;z-index:1;padding:0;box-sizing:border-box;justify-content:flex-start;align-items:stretch}.pt-card .card-body.center-align{justify-content:center;align-items:center}.pt-card .card-header{margin-bottom:16px;display:flex;position:relative;justify-content:flex-start;align-items:stretch}.pt-card .card-header.center-align{justify-content:center;align-items:center}.pt-card .card-header-icon-left{margin-right:6px}.pt-card .card-header-icon-right{margin-left:6px}.pt-card .menu-left{position:absolute;left:0;top:0}.pt-card .menu-right{position:absolute;right:0;top:-2px}.pt-card .card-menu{margin-left:auto;cursor:pointer}\n"] }]
|
|
2312
2352
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
|
|
2313
2353
|
type: Input
|
|
2314
2354
|
}] } });
|
|
@@ -3125,21 +3165,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
|
|
|
3125
3165
|
type: Input
|
|
3126
3166
|
}] } });
|
|
3127
3167
|
|
|
3128
|
-
class
|
|
3168
|
+
class PTButtonModule {
|
|
3169
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3170
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTButtonModule, declarations: [PTButtonComponent], imports: [CommonModule, ButtonModule], exports: [PTButtonComponent] }); }
|
|
3171
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonModule, imports: [CommonModule, ButtonModule] }); }
|
|
3172
|
+
}
|
|
3173
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonModule, decorators: [{
|
|
3174
|
+
type: NgModule,
|
|
3175
|
+
args: [{
|
|
3176
|
+
declarations: [PTButtonComponent],
|
|
3177
|
+
imports: [CommonModule, ButtonModule],
|
|
3178
|
+
exports: [PTButtonComponent],
|
|
3179
|
+
}]
|
|
3180
|
+
}] });
|
|
3181
|
+
|
|
3182
|
+
class PTLoginCardComponent {
|
|
3129
3183
|
constructor(fb) {
|
|
3130
3184
|
this.fb = fb;
|
|
3131
3185
|
this.loginSubmit = new EventEmitter();
|
|
3132
|
-
this.backgroundImageStyle = '';
|
|
3133
3186
|
this.formGroup = this.fb.group({});
|
|
3134
3187
|
}
|
|
3135
3188
|
ngOnInit() {
|
|
3136
3189
|
this.initializeDefaults();
|
|
3137
3190
|
this.setupFormFields();
|
|
3138
3191
|
this.formGroup.patchValue({
|
|
3139
|
-
username: this.loginPageConfig
|
|
3140
|
-
password: this.loginPageConfig
|
|
3192
|
+
username: this.loginPageConfig?.login?.username || '',
|
|
3193
|
+
password: this.loginPageConfig?.login?.password || '',
|
|
3141
3194
|
});
|
|
3142
|
-
this.setBackgroundImageStyle();
|
|
3143
3195
|
// Enable/Disable the button based on form validity
|
|
3144
3196
|
this.formGroup.statusChanges.subscribe((status) => {
|
|
3145
3197
|
this.loginPageConfig.buttonConfig.disabled = status !== 'VALID';
|
|
@@ -3185,11 +3237,11 @@ class PTLoginPageComponent {
|
|
|
3185
3237
|
...this.loginPageConfig.login,
|
|
3186
3238
|
};
|
|
3187
3239
|
// Initialize cardConfig
|
|
3188
|
-
this.loginPageConfig.
|
|
3189
|
-
noBorder: this.loginPageConfig.
|
|
3190
|
-
width: this.loginPageConfig.
|
|
3191
|
-
padding: this.loginPageConfig.
|
|
3192
|
-
...this.loginPageConfig.
|
|
3240
|
+
this.loginPageConfig.loginCardConfig = {
|
|
3241
|
+
noBorder: this.loginPageConfig.loginCardConfig?.noBorder ?? true,
|
|
3242
|
+
width: this.loginPageConfig.loginCardConfig?.width ?? '400px',
|
|
3243
|
+
padding: this.loginPageConfig.loginCardConfig?.padding ?? '40px',
|
|
3244
|
+
...this.loginPageConfig.loginCardConfig,
|
|
3193
3245
|
};
|
|
3194
3246
|
// Initialize usernameField
|
|
3195
3247
|
this.loginPageConfig.usernameField = {
|
|
@@ -3222,11 +3274,7 @@ class PTLoginPageComponent {
|
|
|
3222
3274
|
...this.loginPageConfig.buttonConfig,
|
|
3223
3275
|
};
|
|
3224
3276
|
}
|
|
3225
|
-
|
|
3226
|
-
const transparency = parseFloat(this.loginPageConfig?.backgroundImage?.transparencyPercentage) / 100;
|
|
3227
|
-
this.backgroundImageStyle = `linear-gradient(rgba(255,255,255,${1 - transparency}), rgba(255,255,255,${1 - transparency})), url(${this.loginPageConfig?.backgroundImage?.imageUrl})`;
|
|
3228
|
-
}
|
|
3229
|
-
login() {
|
|
3277
|
+
onSubmit() {
|
|
3230
3278
|
if (this.formGroup.valid) {
|
|
3231
3279
|
this.loginSubmit.emit(this.formGroup.value);
|
|
3232
3280
|
}
|
|
@@ -3246,31 +3294,70 @@ class PTLoginPageComponent {
|
|
|
3246
3294
|
this.formGroup.addControl(this.loginPageConfig.usernameField.name, this.fb.control(this.loginPageConfig.login?.username, usernameValidators));
|
|
3247
3295
|
this.formGroup.addControl(this.loginPageConfig.passwordField.name, this.fb.control(this.loginPageConfig.login?.password, passwordValidators));
|
|
3248
3296
|
}
|
|
3249
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type:
|
|
3250
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type:
|
|
3297
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginCardComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3298
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTLoginCardComponent, isStandalone: true, selector: "pt-login-card", inputs: { loginPageConfig: "loginPageConfig" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n <!-- Logo -->\n <div class=\"logo-container\" *ngIf=\"loginPageConfig.logoUrl?.imageUrl\">\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 <!-- 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 <!-- Form -->\n <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n <div *ngIf=\"loginPageConfig.login?.errorMessage\" class=\"error-message\">\n {{ loginPageConfig.login?.errorMessage }}\n </div>\n\n <div class=\"field\">\n <pt-text-input\n [formGroup]=\"formGroup\"\n [formField]=\"loginPageConfig.usernameField!\"\n ></pt-text-input>\n </div>\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 </form>\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}.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}@media (max-width: 768px){pt-card{max-width:300px}.submit-btn{min-width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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"] }] }); }
|
|
3251
3299
|
}
|
|
3252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type:
|
|
3300
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginCardComponent, decorators: [{
|
|
3253
3301
|
type: Component,
|
|
3254
|
-
args: [{ selector: 'pt-login-
|
|
3302
|
+
args: [{ selector: 'pt-login-card', standalone: true, imports: [
|
|
3303
|
+
CommonModule,
|
|
3304
|
+
FormsModule,
|
|
3305
|
+
ReactiveFormsModule,
|
|
3306
|
+
PTCardModule,
|
|
3307
|
+
PTButtonModule,
|
|
3308
|
+
PTTextInputModule,
|
|
3309
|
+
], template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n <!-- Logo -->\n <div class=\"logo-container\" *ngIf=\"loginPageConfig.logoUrl?.imageUrl\">\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 <!-- 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 <!-- Form -->\n <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n <div *ngIf=\"loginPageConfig.login?.errorMessage\" class=\"error-message\">\n {{ loginPageConfig.login?.errorMessage }}\n </div>\n\n <div class=\"field\">\n <pt-text-input\n [formGroup]=\"formGroup\"\n [formField]=\"loginPageConfig.usernameField!\"\n ></pt-text-input>\n </div>\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 </form>\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}.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}@media (max-width: 768px){pt-card{max-width:300px}.submit-btn{min-width:100%}}\n"] }]
|
|
3255
3310
|
}], ctorParameters: () => [{ type: i2$1.FormBuilder }], propDecorators: { loginPageConfig: [{
|
|
3256
3311
|
type: Input
|
|
3257
3312
|
}], loginSubmit: [{
|
|
3258
3313
|
type: Output
|
|
3259
3314
|
}] } });
|
|
3260
3315
|
|
|
3261
|
-
class
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3316
|
+
class PTLoginPageComponent {
|
|
3317
|
+
constructor() {
|
|
3318
|
+
this.loginSubmit = new EventEmitter();
|
|
3319
|
+
this.defaultCardConfig = {
|
|
3320
|
+
borderRadius: '0',
|
|
3321
|
+
margin: '0',
|
|
3322
|
+
width: '100%',
|
|
3323
|
+
height: '100%',
|
|
3324
|
+
noBorder: true,
|
|
3325
|
+
alignContent: 'center',
|
|
3326
|
+
alignBodyContent: 'center',
|
|
3327
|
+
};
|
|
3328
|
+
}
|
|
3329
|
+
ngOnInit() {
|
|
3330
|
+
this.applyDefaultConfigs();
|
|
3331
|
+
}
|
|
3332
|
+
applyDefaultConfigs() {
|
|
3333
|
+
// Apply defaults to centerCardConfig
|
|
3334
|
+
this.loginPageConfig.centerCardConfig = this.applyDefaults(this.loginPageConfig.centerCardConfig);
|
|
3335
|
+
// Apply defaults to leftCardConfig
|
|
3336
|
+
this.loginPageConfig.leftCardConfig = this.applyDefaults(this.loginPageConfig.leftCardConfig);
|
|
3337
|
+
// Apply defaults to rightCardConfig
|
|
3338
|
+
this.loginPageConfig.rightCardConfig = this.applyDefaults(this.loginPageConfig.rightCardConfig);
|
|
3339
|
+
}
|
|
3340
|
+
applyDefaults(config) {
|
|
3341
|
+
return {
|
|
3342
|
+
...this.defaultCardConfig,
|
|
3343
|
+
...(config || {}),
|
|
3344
|
+
};
|
|
3345
|
+
}
|
|
3346
|
+
onLoginSubmit(loginModel) {
|
|
3347
|
+
console.log('Login Submitted:', loginModel);
|
|
3348
|
+
this.loginSubmit.emit(loginModel);
|
|
3349
|
+
}
|
|
3350
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3351
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTLoginPageComponent, selector: "pt-login-page", inputs: { loginPageConfig: "loginPageConfig" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<!-- Center Position -->\n<ng-container>\n <div *ngIf=\"loginPageConfig.position === 'center'\" class=\"center-container\">\n <pt-card\n *ngIf=\"loginPageConfig.centerCardConfig\"\n [config]=\"loginPageConfig.centerCardConfig\"\n >\n <pt-login-card\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n </pt-card>\n </div>\n <!-- Left and Right Positions -->\n <div\n *ngIf=\"\n loginPageConfig.position === 'left' ||\n loginPageConfig.position === 'right'\n \"\n class=\"left-right-container\"\n >\n <!-- Left Card -->\n <pt-card\n *ngIf=\"loginPageConfig.leftCardConfig\"\n [config]=\"loginPageConfig.leftCardConfig\"\n >\n <pt-login-card\n *ngIf=\"loginPageConfig.position === 'left'\"\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n </pt-card>\n\n <!-- Right Card -->\n <pt-card\n *ngIf=\"loginPageConfig.rightCardConfig\"\n [config]=\"loginPageConfig.rightCardConfig\"\n >\n <pt-login-card\n *ngIf=\"loginPageConfig.position === 'right'\"\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n </pt-card>\n </div>\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTLoginCardComponent, selector: "pt-login-card", inputs: ["loginPageConfig"], outputs: ["loginSubmit"] }] }); }
|
|
3265
3352
|
}
|
|
3266
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type:
|
|
3267
|
-
type:
|
|
3268
|
-
args: [{
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
|
|
3273
|
-
|
|
3353
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageComponent, decorators: [{
|
|
3354
|
+
type: Component,
|
|
3355
|
+
args: [{ selector: 'pt-login-page', template: "<!-- Center Position -->\n<ng-container>\n <div *ngIf=\"loginPageConfig.position === 'center'\" class=\"center-container\">\n <pt-card\n *ngIf=\"loginPageConfig.centerCardConfig\"\n [config]=\"loginPageConfig.centerCardConfig\"\n >\n <pt-login-card\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n </pt-card>\n </div>\n <!-- Left and Right Positions -->\n <div\n *ngIf=\"\n loginPageConfig.position === 'left' ||\n loginPageConfig.position === 'right'\n \"\n class=\"left-right-container\"\n >\n <!-- Left Card -->\n <pt-card\n *ngIf=\"loginPageConfig.leftCardConfig\"\n [config]=\"loginPageConfig.leftCardConfig\"\n >\n <pt-login-card\n *ngIf=\"loginPageConfig.position === 'left'\"\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n </pt-card>\n\n <!-- Right Card -->\n <pt-card\n *ngIf=\"loginPageConfig.rightCardConfig\"\n [config]=\"loginPageConfig.rightCardConfig\"\n >\n <pt-login-card\n *ngIf=\"loginPageConfig.position === 'right'\"\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n </pt-card>\n </div>\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"] }]
|
|
3356
|
+
}], propDecorators: { loginPageConfig: [{
|
|
3357
|
+
type: Input
|
|
3358
|
+
}], loginSubmit: [{
|
|
3359
|
+
type: Output
|
|
3360
|
+
}] } });
|
|
3274
3361
|
|
|
3275
3362
|
class PTLoginPageModule {
|
|
3276
3363
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
@@ -3279,13 +3366,15 @@ class PTLoginPageModule {
|
|
|
3279
3366
|
ReactiveFormsModule,
|
|
3280
3367
|
PTTextInputModule,
|
|
3281
3368
|
PTCardModule,
|
|
3282
|
-
PTButtonModule
|
|
3369
|
+
PTButtonModule,
|
|
3370
|
+
PTLoginCardComponent], exports: [PTLoginPageComponent] }); }
|
|
3283
3371
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageModule, imports: [CommonModule,
|
|
3284
3372
|
FormsModule,
|
|
3285
3373
|
ReactiveFormsModule,
|
|
3286
3374
|
PTTextInputModule,
|
|
3287
3375
|
PTCardModule,
|
|
3288
|
-
PTButtonModule
|
|
3376
|
+
PTButtonModule,
|
|
3377
|
+
PTLoginCardComponent] }); }
|
|
3289
3378
|
}
|
|
3290
3379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageModule, decorators: [{
|
|
3291
3380
|
type: NgModule,
|
|
@@ -3298,6 +3387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
|
|
|
3298
3387
|
PTTextInputModule,
|
|
3299
3388
|
PTCardModule,
|
|
3300
3389
|
PTButtonModule,
|
|
3390
|
+
PTLoginCardComponent,
|
|
3301
3391
|
],
|
|
3302
3392
|
exports: [PTLoginPageComponent],
|
|
3303
3393
|
}]
|