ng-prime-tools 1.0.16 → 1.0.18

package/esm2022/lib/pt-text-input/pt-text-input.component.mjs

@@ -89,14 +89,14 @@ export class PTTextInputComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTTextInputComponent, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto'\n  }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\n  <ng-container *ngIf=\"formField.iconClass; else noIcon\">\n    <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n      <p-inputIcon\n        *ngIf=\"formField.iconClass\"\n        [styleClass]=\"formField.iconClass\"\n      ></p-inputIcon>\n      <input\n        [type]=\"getInputType()\"\n        pInputText\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [ngStyle]=\"{\n          width: formField.width || '100%',\n          height: formField.height || 'auto'\n        }\"\n      />\n    </p-iconField>\n  </ng-container>\n\n  <ng-template #noIcon>\n    <input\n      [type]=\"getInputType()\"\n      pInputText\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder ?? ''\"\n      [attr.minlength]=\"formField.minLength\"\n      [attr.maxlength]=\"formField.maxLength\"\n      [ngStyle]=\"{\n        width: formField.width || '100%',\n        height: formField.height || 'auto'\n      }\"\n    />\n  </ng-template>\n\n  <div class=\"form-info-row\">\n    <small\n      *ngIf=\"\n        formGroup.get(formField.name)?.invalid &&\n        formGroup.get(formField.name)?.touched\n      \"\n      class=\"p-error\"\n    >\n      {{ getErrorMessage() }}\n    </small>\n    <div class=\"spacer\"></div>\n    <div\n      *ngIf=\"!formField.disabled && formField.maxLength !== undefined\"\n      class=\"character-counter\"\n    >\n      {{ characterCount }}/{{ formField.maxLength }} characters\n    </div>\n  </div>\n</div>\n", styles: [".form-field{position:relative;margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.form-info-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.spacer{flex-grow:1}.character-counter{font-size:.8rem;color:#888;text-align:right;margin-left:auto}.p-error{font-size:.8rem;color:#f44336}input:focus{outline:none;box-shadow:none;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i4.IconField, selector: "p-iconField", inputs: ["iconPosition"] }, { kind: "component", type: i5.InputIcon, selector: "p-inputIcon", inputs: ["styleClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTTextInputComponent, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto'\n  }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\n  <ng-container *ngIf=\"formField.iconClass; else noIcon\">\n    <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n      <p-inputIcon\n        *ngIf=\"formField.iconClass\"\n        [styleClass]=\"formField.iconClass\"\n      ></p-inputIcon>\n      <input\n        [type]=\"getInputType()\"\n        pInputText\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [ngStyle]=\"{\n          width: formField.width || '100%',\n          height: formField.height || 'auto'\n        }\"\n      />\n    </p-iconField>\n  </ng-container>\n\n  <ng-template #noIcon>\n    <input\n      [type]=\"getInputType()\"\n      pInputText\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder ?? ''\"\n      [attr.minlength]=\"formField.minLength\"\n      [attr.maxlength]=\"formField.maxLength\"\n      [ngStyle]=\"{\n        width: formField.width || '100%',\n        height: formField.height || 'auto'\n      }\"\n    />\n  </ng-template>\n\n  <div class=\"form-info-row\">\n    <small\n      *ngIf=\"\n        formGroup.get(formField.name)?.invalid &&\n        formGroup.get(formField.name)?.touched\n      \"\n      class=\"p-error\"\n    >\n      {{ getErrorMessage() }}\n    </small>\n    <div class=\"spacer\"></div>\n    <div\n      *ngIf=\"!formField.disabled && formField.maxLength !== undefined\"\n      class=\"character-counter\"\n    >\n      {{ characterCount }}/{{ formField.maxLength }} characters\n    </div>\n  </div>\n</div>\n", styles: [".form-field{position:relative}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.form-info-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.spacer{flex-grow:1}.character-counter{font-size:.8rem;color:#888;text-align:right;margin-left:auto}.p-error{font-size:.8rem;color:#f44336}input:focus{outline:none;box-shadow:none;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i4.IconField, selector: "p-iconField", inputs: ["iconPosition"] }, { kind: "component", type: i5.InputIcon, selector: "p-inputIcon", inputs: ["styleClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTTextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-text-input', template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto'\n  }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\n  <ng-container *ngIf=\"formField.iconClass; else noIcon\">\n    <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n      <p-inputIcon\n        *ngIf=\"formField.iconClass\"\n        [styleClass]=\"formField.iconClass\"\n      ></p-inputIcon>\n      <input\n        [type]=\"getInputType()\"\n        pInputText\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [ngStyle]=\"{\n          width: formField.width || '100%',\n          height: formField.height || 'auto'\n        }\"\n      />\n    </p-iconField>\n  </ng-container>\n\n  <ng-template #noIcon>\n    <input\n      [type]=\"getInputType()\"\n      pInputText\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder ?? ''\"\n      [attr.minlength]=\"formField.minLength\"\n      [attr.maxlength]=\"formField.maxLength\"\n      [ngStyle]=\"{\n        width: formField.width || '100%',\n        height: formField.height || 'auto'\n      }\"\n    />\n  </ng-template>\n\n  <div class=\"form-info-row\">\n    <small\n      *ngIf=\"\n        formGroup.get(formField.name)?.invalid &&\n        formGroup.get(formField.name)?.touched\n      \"\n      class=\"p-error\"\n    >\n      {{ getErrorMessage() }}\n    </small>\n    <div class=\"spacer\"></div>\n    <div\n      *ngIf=\"!formField.disabled && formField.maxLength !== undefined\"\n      class=\"character-counter\"\n    >\n      {{ characterCount }}/{{ formField.maxLength }} characters\n    </div>\n  </div>\n</div>\n", styles: [".form-field{position:relative;margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.form-info-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.spacer{flex-grow:1}.character-counter{font-size:.8rem;color:#888;text-align:right;margin-left:auto}.p-error{font-size:.8rem;color:#f44336}input:focus{outline:none;box-shadow:none;border-color:inherit}\n"] }]
+            args: [{ selector: 'pt-text-input', template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto'\n  }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\n  <ng-container *ngIf=\"formField.iconClass; else noIcon\">\n    <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n      <p-inputIcon\n        *ngIf=\"formField.iconClass\"\n        [styleClass]=\"formField.iconClass\"\n      ></p-inputIcon>\n      <input\n        [type]=\"getInputType()\"\n        pInputText\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [ngStyle]=\"{\n          width: formField.width || '100%',\n          height: formField.height || 'auto'\n        }\"\n      />\n    </p-iconField>\n  </ng-container>\n\n  <ng-template #noIcon>\n    <input\n      [type]=\"getInputType()\"\n      pInputText\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder ?? ''\"\n      [attr.minlength]=\"formField.minLength\"\n      [attr.maxlength]=\"formField.maxLength\"\n      [ngStyle]=\"{\n        width: formField.width || '100%',\n        height: formField.height || 'auto'\n      }\"\n    />\n  </ng-template>\n\n  <div class=\"form-info-row\">\n    <small\n      *ngIf=\"\n        formGroup.get(formField.name)?.invalid &&\n        formGroup.get(formField.name)?.touched\n      \"\n      class=\"p-error\"\n    >\n      {{ getErrorMessage() }}\n    </small>\n    <div class=\"spacer\"></div>\n    <div\n      *ngIf=\"!formField.disabled && formField.maxLength !== undefined\"\n      class=\"character-counter\"\n    >\n      {{ characterCount }}/{{ formField.maxLength }} characters\n    </div>\n  </div>\n</div>\n", styles: [".form-field{position:relative}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.form-info-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.spacer{flex-grow:1}.character-counter{font-size:.8rem;color:#888;text-align:right;margin-left:auto}.p-error{font-size:.8rem;color:#f44336}input:focus{outline:none;box-shadow:none;border-color:inherit}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHQtdGV4dC1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1wcmltZS10b29scy9zcmMvbGliL3B0LXRleHQtaW5wdXQvcHQtdGV4dC1pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1wcmltZS10b29scy9zcmMvbGliL3B0LXRleHQtaW5wdXQvcHQtdGV4dC1pbnB1dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUN6RCxPQUFPLEVBRUwsVUFBVSxHQUdYLE1BQU0sZ0JBQWdCLENBQUM7QUFHeEIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sK0JBQStCLENBQUM7Ozs7Ozs7QUFPbEUsTUFBTSxPQUFPLG9CQUFvQjtJQUxqQztRQVNFLG1CQUFjLEdBQVcsQ0FBQyxDQUFDO0tBcUY1QjtJQW5GQyxRQUFRO1FBQ04sSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3BCLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxDQUFDO0lBQzlCLENBQUM7SUFFRCxZQUFZO1FBQ1YsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQWdCLENBQUM7UUFDdkUsSUFBSSxPQUFPLEVBQUUsQ0FBQztZQUNaLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUN4QyxPQUFPLENBQUMsYUFBYSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1lBRWxDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7Z0JBQ2QsSUFBSSxJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsRUFBRSxDQUFDO29CQUM1QixPQUFPLENBQUMsT0FBTyxDQUFDLEVBQUUsU0FBUyxFQUFFLEtBQUss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LElBQUksT0FBTyxFQUFFLFFBQVEsQ0FBQyxXQUFXLENBQUMsRUFBRSxDQUFDO1lBQzFDLE9BQU8sR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUsscUJBQXFCLElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUyxhQUFhLENBQUM7UUFDM0YsQ0FBQzthQUFNLElBQUksT0FBTyxFQUFFLFFBQVEsQ0FBQyxXQUFXLENBQUMsRUFBRSxDQUFDO1lBQzFDLE9BQU8sR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssb0JBQW9CLElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUyxhQUFhLENBQUM7UUFDMUYsQ0FBQzthQUFNLElBQUksT0FBTyxFQUFFLFFBQVEsQ0FBQyxTQUFTLENBQUMsRUFBRSxDQUFDO1lBQ3hDLE9BQU8sR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssYUFBYSxDQUFDO1FBQzlDLENBQUM7UUFDRCxPQUFPLEVBQUUsQ0FBQztJQUNaLENBQUM7K0dBeEZVLG9CQUFvQjttR0FBcEIsb0JBQW9CLGlIQ2hCakMsZzNEQWtFQTs7NEZEbERhLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDRSxlQUFlOzhCQUtoQixTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gIEZvcm1Hcm91cCxcbiAgVmFsaWRhdG9ycyxcbiAgVmFsaWRhdG9yRm4sXG4gIEZvcm1Db250cm9sLFxufSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBJbnB1dFZhbGlkYXRpb25FbnVtIH0gZnJvbSAnLi4vZW51bXMvaW5wdXQtdmFsaWRhdGlvbi5lbnVtJztcbmltcG9ydCB7IEZvcm1UZXh0RmllbGQgfSBmcm9tICcuLi9tb2RlbHMvZm9ybS10ZXh0LWZpZWxkLm1vZGVsJztcbmltcG9ydCB7IEZvcm1JbnB1dFR5cGVFbnVtIH0gZnJvbSAnLi4vZW51bXMvZm9ybS1pbnB1dC10eXBlLmVudW0nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdwdC10ZXh0LWlucHV0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3B0LXRleHQtaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9wdC10ZXh0LWlucHV0LmNvbXBvbmVudC5jc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgUFRUZXh0SW5wdXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBmb3JtR3JvdXAhOiBGb3JtR3JvdXA7XG4gIEBJbnB1dCgpIGZvcm1GaWVsZCE6IEZvcm1UZXh0RmllbGQ7XG5cbiAgY2hhcmFjdGVyQ291bnQ6IG51bWJlciA9IDA7XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5zZXR1cENvbnRyb2woKTtcbiAgICB0aGlzLnVwZGF0ZUNoYXJhY3RlckNvdW50KCk7XG4gIH1cblxuICBzZXR1cENvbnRyb2woKSB7XG4gICAgY29uc3QgY29udHJvbCA9IHRoaXMuZm9ybUdyb3VwLmdldCh0aGlzLmZvcm1GaWVsZC5uYW1lKSBhcyBGb3JtQ29udHJvbDtcbiAgICBpZiAoY29udHJvbCkge1xuICAgICAgY29uc3QgdmFsaWRhdG9ycyA9IHRoaXMuZ2V0VmFsaWRhdG9ycygpO1xuICAgICAgY29udHJvbC5zZXRWYWxpZGF0b3JzKHZhbGlkYXRvcnMpO1xuXG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgaWYgKHRoaXMuZm9ybUZpZWxkLmRpc2FibGVkKSB7XG4gICAgICAgICAgY29udHJvbC5kaXNhYmxlKHsgZW1pdEV2ZW50OiBmYWxzZSB9KTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICBjb250cm9sLmVuYWJsZSh7IGVtaXRFdmVudDogZmFsc2UgfSk7XG4gICAgICAgICAgY29udHJvbC52YWx1ZUNoYW5nZXMuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgICAgICAgIHRoaXMudXBkYXRlQ2hhcmFjdGVyQ291bnQoKTtcbiAgICAgICAgICB9KTtcbiAgICAgICAgfVxuICAgICAgICBjb250cm9sLnVwZGF0ZVZhbHVlQW5kVmFsaWRpdHkoeyBlbWl0RXZlbnQ6IGZhbHNlIH0pO1xuICAgICAgfSk7XG4gICAgfVxuICB9XG5cbiAgdXBkYXRlQ2hhcmFjdGVyQ291bnQoKSB7XG4gICAgY29uc3QgY29udHJvbCA9IHRoaXMuZm9ybUdyb3VwLmdldCh0aGlzLmZvcm1GaWVsZC5uYW1lKSBhcyBGb3JtQ29udHJvbDtcbiAgICBpZiAoY29udHJvbCAmJiBjb250cm9sLnZhbHVlICE9PSBudWxsKSB7XG4gICAgICB0aGlzLmNoYXJhY3RlckNvdW50ID0gY29udHJvbC52YWx1ZSA/IGNvbnRyb2wudmFsdWUubGVuZ3RoIDogMDtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5jaGFyYWN0ZXJDb3VudCA9IDA7XG4gICAgfVxuICB9XG5cbiAgZ2V0SW5wdXRUeXBlKCk6IHN0cmluZyB7XG4gICAgc3dpdGNoICh0aGlzLmZvcm1GaWVsZC50eXBlKSB7XG4gICAgICBjYXNlIEZvcm1JbnB1dFR5cGVFbnVtLlBBU1NXT1JEOlxuICAgICAgICByZXR1cm4gJ3Bhc3N3b3JkJztcbiAgICAgIGNhc2UgRm9ybUlucHV0VHlwZUVudW0uTlVNQkVSOlxuICAgICAgICByZXR1cm4gJ251bWJlcic7XG4gICAgICBkZWZhdWx0OlxuICAgICAgICByZXR1cm4gJ3RleHQnO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgZ2V0VmFsaWRhdG9ycygpOiBWYWxpZGF0b3JGbltdIHtcbiAgICBjb25zdCB2YWxpZGF0b3JzOiBWYWxpZGF0b3JGbltdID0gW107XG4gICAgaWYgKHRoaXMuZm9ybUZpZWxkLnJlcXVpcmVkKSB7XG4gICAgICB2YWxpZGF0b3JzLnB1c2goVmFsaWRhdG9ycy5yZXF1aXJlZCk7XG4gICAgfVxuICAgIGlmICh0aGlzLmZvcm1GaWVsZC5taW5MZW5ndGggIT09IHVuZGVmaW5lZCkge1xuICAgICAgdmFsaWRhdG9ycy5wdXNoKFZhbGlkYXRvcnMubWluTGVuZ3RoKHRoaXMuZm9ybUZpZWxkLm1pbkxlbmd0aCkpO1xuICAgIH1cbiAgICBpZiAodGhpcy5mb3JtRmllbGQubWF4TGVuZ3RoICE9PSB1bmRlZmluZWQpIHtcbiAgICAgIHZhbGlkYXRvcnMucHVzaChWYWxpZGF0b3JzLm1heExlbmd0aCh0aGlzLmZvcm1GaWVsZC5tYXhMZW5ndGgpKTtcbiAgICB9XG4gICAgaWYgKHRoaXMuZm9ybUZpZWxkLmlucHV0VmFsaWRhdGlvbikge1xuICAgICAgdmFsaWRhdG9ycy5wdXNoKFxuICAgICAgICB0aGlzLnZhbGlkYXRlV2l0aElucHV0VmFsaWRhdGlvbih0aGlzLmZvcm1GaWVsZC5pbnB1dFZhbGlkYXRpb24pXG4gICAgICApO1xuICAgIH1cbiAgICByZXR1cm4gdmFsaWRhdG9ycztcbiAgfVxuXG4gIHByaXZhdGUgdmFsaWRhdGVXaXRoSW5wdXRWYWxpZGF0aW9uKFxuICAgIGlucHV0VmFsaWRhdGlvbjogSW5wdXRWYWxpZGF0aW9uRW51bVxuICApOiBWYWxpZGF0b3JGbiB7XG4gICAgcmV0dXJuIFZhbGlkYXRvcnMucGF0dGVybihuZXcgUmVnRXhwKGlucHV0VmFsaWRhdGlvbikpO1xuICB9XG5cbiAgZ2V0RXJyb3JNZXNzYWdlKCk6IHN0cmluZyB7XG4gICAgY29uc3QgY29udHJvbCA9IHRoaXMuZm9ybUdyb3VwLmdldCh0aGlzLmZvcm1GaWVsZC5uYW1lKTtcbiAgICBpZiAoY29udHJvbD8uaGFzRXJyb3IoJ3JlcXVpcmVkJykpIHtcbiAgICAgIHJldHVybiBgJHt0aGlzLmZvcm1GaWVsZC5sYWJlbH0gaXMgcmVxdWlyZWRgO1xuICAgIH0gZWxzZSBpZiAoY29udHJvbD8uaGFzRXJyb3IoJ21pbmxlbmd0aCcpKSB7XG4gICAgICByZXR1cm4gYCR7dGhpcy5mb3JtRmllbGQubGFiZWx9IG11c3QgYmUgYXQgbGVhc3QgJHt0aGlzLmZvcm1GaWVsZC5taW5MZW5ndGh9IGNoYXJhY3RlcnNgO1xuICAgIH0gZWxzZSBpZiAoY29udHJvbD8uaGFzRXJyb3IoJ21heGxlbmd0aCcpKSB7XG4gICAgICByZXR1cm4gYCR7dGhpcy5mb3JtRmllbGQubGFiZWx9IG11c3QgYmUgYXQgbW9zdCAke3RoaXMuZm9ybUZpZWxkLm1heExlbmd0aH0gY2hhcmFjdGVyc2A7XG4gICAgfSBlbHNlIGlmIChjb250cm9sPy5oYXNFcnJvcigncGF0dGVybicpKSB7XG4gICAgICByZXR1cm4gYCR7dGhpcy5mb3JtRmllbGQubGFiZWx9IGlzIGludmFsaWRgO1xuICAgIH1cbiAgICByZXR1cm4gJyc7XG4gIH1cbn1cbiIsIjxkaXZcbiAgW2Zvcm1Hcm91cF09XCJmb3JtR3JvdXBcIlxuICBjbGFzcz1cImZvcm0tZmllbGRcIlxuICBbbmdTdHlsZV09XCJ7XG4gICAgd2lkdGg6IGZvcm1GaWVsZC53aWR0aCB8fCAnMTAwJScsXG4gICAgaGVpZ2h0OiBmb3JtRmllbGQuaGVpZ2h0IHx8ICdhdXRvJ1xuICB9XCJcbiAgKm5nSWY9XCIhZm9ybUZpZWxkLmhpZGRlblwiXG4+XG4gIDxsYWJlbCAqbmdJZj1cImZvcm1GaWVsZC5sYWJlbFwiPnt7IGZvcm1GaWVsZC5sYWJlbCB9fTwvbGFiZWw+XG5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImZvcm1GaWVsZC5pY29uQ2xhc3M7IGVsc2Ugbm9JY29uXCI+XG4gICAgPHAtaWNvbkZpZWxkIFtpY29uUG9zaXRpb25dPVwiZm9ybUZpZWxkLmljb25Qb3NpdGlvbiB8fCAnbGVmdCdcIj5cbiAgICAgIDxwLWlucHV0SWNvblxuICAgICAgICAqbmdJZj1cImZvcm1GaWVsZC5pY29uQ2xhc3NcIlxuICAgICAgICBbc3R5bGVDbGFzc109XCJmb3JtRmllbGQuaWNvbkNsYXNzXCJcbiAgICAgID48L3AtaW5wdXRJY29uPlxuICAgICAgPGlucHV0XG4gICAgICAgIFt0eXBlXT1cImdldElucHV0VHlwZSgpXCJcbiAgICAgICAgcElucHV0VGV4dFxuICAgICAgICBbZm9ybUNvbnRyb2xOYW1lXT1cImZvcm1GaWVsZC5uYW1lXCJcbiAgICAgICAgW3BsYWNlaG9sZGVyXT1cImZvcm1GaWVsZC5wbGFjZWhvbGRlciA/PyAnJ1wiXG4gICAgICAgIFthdHRyLm1pbmxlbmd0aF09XCJmb3JtRmllbGQubWluTGVuZ3RoXCJcbiAgICAgICAgW2F0dHIubWF4bGVuZ3RoXT1cImZvcm1GaWVsZC5tYXhMZW5ndGhcIlxuICAgICAgICBbbmdTdHlsZV09XCJ7XG4gICAgICAgICAgd2lkdGg6IGZvcm1GaWVsZC53aWR0aCB8fCAnMTAwJScsXG4gICAgICAgICAgaGVpZ2h0OiBmb3JtRmllbGQuaGVpZ2h0IHx8ICdhdXRvJ1xuICAgICAgICB9XCJcbiAgICAgIC8+XG4gICAgPC9wLWljb25GaWVsZD5cbiAgPC9uZy1jb250YWluZXI+XG5cbiAgPG5nLXRlbXBsYXRlICNub0ljb24+XG4gICAgPGlucHV0XG4gICAgICBbdHlwZV09XCJnZXRJbnB1dFR5cGUoKVwiXG4gICAgICBwSW5wdXRUZXh0XG4gICAgICBbZm9ybUNvbnRyb2xOYW1lXT1cImZvcm1GaWVsZC5uYW1lXCJcbiAgICAgIFtwbGFjZWhvbGRlcl09XCJmb3JtRmllbGQucGxhY2Vob2xkZXIgPz8gJydcIlxuICAgICAgW2F0dHIubWlubGVuZ3RoXT1cImZvcm1GaWVsZC5taW5MZW5ndGhcIlxuICAgICAgW2F0dHIubWF4bGVuZ3RoXT1cImZvcm1GaWVsZC5tYXhMZW5ndGhcIlxuICAgICAgW25nU3R5bGVdPVwie1xuICAgICAgICB3aWR0aDogZm9ybUZpZWxkLndpZHRoIHx8ICcxMDAlJyxcbiAgICAgICAgaGVpZ2h0OiBmb3JtRmllbGQuaGVpZ2h0IHx8ICdhdXRvJ1xuICAgICAgfVwiXG4gICAgLz5cbiAgPC9uZy10ZW1wbGF0ZT5cblxuICA8ZGl2IGNsYXNzPVwiZm9ybS1pbmZvLXJvd1wiPlxuICAgIDxzbWFsbFxuICAgICAgKm5nSWY9XCJcbiAgICAgICAgZm9ybUdyb3VwLmdldChmb3JtRmllbGQubmFtZSk/LmludmFsaWQgJiZcbiAgICAgICAgZm9ybUdyb3VwLmdldChmb3JtRmllbGQubmFtZSk/LnRvdWNoZWRcbiAgICAgIFwiXG4gICAgICBjbGFzcz1cInAtZXJyb3JcIlxuICAgID5cbiAgICAgIHt7IGdldEVycm9yTWVzc2FnZSgpIH19XG4gICAgPC9zbWFsbD5cbiAgICA8ZGl2IGNsYXNzPVwic3BhY2VyXCI+PC9kaXY+XG4gICAgPGRpdlxuICAgICAgKm5nSWY9XCIhZm9ybUZpZWxkLmRpc2FibGVkICYmIGZvcm1GaWVsZC5tYXhMZW5ndGggIT09IHVuZGVmaW5lZFwiXG4gICAgICBjbGFzcz1cImNoYXJhY3Rlci1jb3VudGVyXCJcbiAgICA+XG4gICAgICB7eyBjaGFyYWN0ZXJDb3VudCB9fS97eyBmb3JtRmllbGQubWF4TGVuZ3RoIH19IGNoYXJhY3RlcnNcbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHQtdGV4dC1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1wcmltZS10b29scy9zcmMvbGliL3B0LXRleHQtaW5wdXQvcHQtdGV4dC1pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1wcmltZS10b29scy9zcmMvbGliL3B0LXRleHQtaW5wdXQvcHQtdGV4dC1pbnB1dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUN6RCxPQUFPLEVBRUwsVUFBVSxHQUdYLE1BQU0sZ0JBQWdCLENBQUM7QUFHeEIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sK0JBQStCLENBQUM7Ozs7Ozs7QUFRbEUsTUFBTSxPQUFPLG9CQUFvQjtJQUxqQztRQVNFLG1CQUFjLEdBQVcsQ0FBQyxDQUFDO0tBcUY1QjtJQW5GQyxRQUFRO1FBQ04sSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3BCLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxDQUFDO0lBQzlCLENBQUM7SUFFRCxZQUFZO1FBQ1YsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQWdCLENBQUM7UUFDdkUsSUFBSSxPQUFPLEVBQUUsQ0FBQztZQUNaLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUN4QyxPQUFPLENBQUMsYUFBYSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1lBRWxDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7Z0JBQ2QsSUFBSSxJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsRUFBRSxDQUFDO29CQUM1QixPQUFPLENBQUMsT0FBTyxDQUFDLEVBQUUsU0FBUyxFQUFFLEtBQUss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LElBQUksT0FBTyxFQUFFLFFBQVEsQ0FBQyxXQUFXLENBQUMsRUFBRSxDQUFDO1lBQzFDLE9BQU8sR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUsscUJBQXFCLElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUyxhQUFhLENBQUM7UUFDM0YsQ0FBQzthQUFNLElBQUksT0FBTyxFQUFFLFFBQVEsQ0FBQyxXQUFXLENBQUMsRUFBRSxDQUFDO1lBQzFDLE9BQU8sR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssb0JBQW9CLElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUyxhQUFhLENBQUM7UUFDMUYsQ0FBQzthQUFNLElBQUksT0FBTyxFQUFFLFFBQVEsQ0FBQyxTQUFTLENBQUMsRUFBRSxDQUFDO1lBQ3hDLE9BQU8sR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssYUFBYSxDQUFDO1FBQzlDLENBQUM7UUFDRCxPQUFPLEVBQUUsQ0FBQztJQUNaLENBQUM7K0dBeEZVLG9CQUFvQjttR0FBcEIsb0JBQW9CLGlIQ2pCakMsZzNEQWtFQTs7NEZEakRhLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDRSxlQUFlOzhCQUtoQixTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gIEZvcm1Hcm91cCxcbiAgVmFsaWRhdG9ycyxcbiAgVmFsaWRhdG9yRm4sXG4gIEZvcm1Db250cm9sLFxufSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBJbnB1dFZhbGlkYXRpb25FbnVtIH0gZnJvbSAnLi4vZW51bXMvaW5wdXQtdmFsaWRhdGlvbi5lbnVtJztcbmltcG9ydCB7IEZvcm1UZXh0RmllbGQgfSBmcm9tICcuLi9tb2RlbHMvZm9ybS10ZXh0LWZpZWxkLm1vZGVsJztcbmltcG9ydCB7IEZvcm1JbnB1dFR5cGVFbnVtIH0gZnJvbSAnLi4vZW51bXMvZm9ybS1pbnB1dC10eXBlLmVudW0nO1xuaW1wb3J0IHsgQ2FyZENvbmZpZyB9IGZyb20gJy4uL21vZGVscyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3B0LXRleHQtaW5wdXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vcHQtdGV4dC1pbnB1dC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3B0LXRleHQtaW5wdXQuY29tcG9uZW50LmNzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBQVFRleHRJbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGZvcm1Hcm91cCE6IEZvcm1Hcm91cDtcbiAgQElucHV0KCkgZm9ybUZpZWxkITogRm9ybVRleHRGaWVsZDtcblxuICBjaGFyYWN0ZXJDb3VudDogbnVtYmVyID0gMDtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnNldHVwQ29udHJvbCgpO1xuICAgIHRoaXMudXBkYXRlQ2hhcmFjdGVyQ291bnQoKTtcbiAgfVxuXG4gIHNldHVwQ29udHJvbCgpIHtcbiAgICBjb25zdCBjb250cm9sID0gdGhpcy5mb3JtR3JvdXAuZ2V0KHRoaXMuZm9ybUZpZWxkLm5hbWUpIGFzIEZvcm1Db250cm9sO1xuICAgIGlmIChjb250cm9sKSB7XG4gICAgICBjb25zdCB2YWxpZGF0b3JzID0gdGhpcy5nZXRWYWxpZGF0b3JzKCk7XG4gICAgICBjb250cm9sLnNldFZhbGlkYXRvcnModmFsaWRhdG9ycyk7XG5cbiAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICBpZiAodGhpcy5mb3JtRmllbGQuZGlzYWJsZWQpIHtcbiAgICAgICAgICBjb250cm9sLmRpc2FibGUoeyBlbWl0RXZlbnQ6IGZhbHNlIH0pO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIGNvbnRyb2wuZW5hYmxlKHsgZW1pdEV2ZW50OiBmYWxzZSB9KTtcbiAgICAgICAgICBjb250cm9sLnZhbHVlQ2hhbmdlcy5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICAgICAgdGhpcy51cGRhdGVDaGFyYWN0ZXJDb3VudCgpO1xuICAgICAgICAgIH0pO1xuICAgICAgICB9XG4gICAgICAgIGNvbnRyb2wudXBkYXRlVmFsdWVBbmRWYWxpZGl0eSh7IGVtaXRFdmVudDogZmFsc2UgfSk7XG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICB1cGRhdGVDaGFyYWN0ZXJDb3VudCgpIHtcbiAgICBjb25zdCBjb250cm9sID0gdGhpcy5mb3JtR3JvdXAuZ2V0KHRoaXMuZm9ybUZpZWxkLm5hbWUpIGFzIEZvcm1Db250cm9sO1xuICAgIGlmIChjb250cm9sICYmIGNvbnRyb2wudmFsdWUgIT09IG51bGwpIHtcbiAgICAgIHRoaXMuY2hhcmFjdGVyQ291bnQgPSBjb250cm9sLnZhbHVlID8gY29udHJvbC52YWx1ZS5sZW5ndGggOiAwO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmNoYXJhY3RlckNvdW50ID0gMDtcbiAgICB9XG4gIH1cblxuICBnZXRJbnB1dFR5cGUoKTogc3RyaW5nIHtcbiAgICBzd2l0Y2ggKHRoaXMuZm9ybUZpZWxkLnR5cGUpIHtcbiAgICAgIGNhc2UgRm9ybUlucHV0VHlwZUVudW0uUEFTU1dPUkQ6XG4gICAgICAgIHJldHVybiAncGFzc3dvcmQnO1xuICAgICAgY2FzZSBGb3JtSW5wdXRUeXBlRW51bS5OVU1CRVI6XG4gICAgICAgIHJldHVybiAnbnVtYmVyJztcbiAgICAgIGRlZmF1bHQ6XG4gICAgICAgIHJldHVybiAndGV4dCc7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBnZXRWYWxpZGF0b3JzKCk6IFZhbGlkYXRvckZuW10ge1xuICAgIGNvbnN0IHZhbGlkYXRvcnM6IFZhbGlkYXRvckZuW10gPSBbXTtcbiAgICBpZiAodGhpcy5mb3JtRmllbGQucmVxdWlyZWQpIHtcbiAgICAgIHZhbGlkYXRvcnMucHVzaChWYWxpZGF0b3JzLnJlcXVpcmVkKTtcbiAgICB9XG4gICAgaWYgKHRoaXMuZm9ybUZpZWxkLm1pbkxlbmd0aCAhPT0gdW5kZWZpbmVkKSB7XG4gICAgICB2YWxpZGF0b3JzLnB1c2goVmFsaWRhdG9ycy5taW5MZW5ndGgodGhpcy5mb3JtRmllbGQubWluTGVuZ3RoKSk7XG4gICAgfVxuICAgIGlmICh0aGlzLmZvcm1GaWVsZC5tYXhMZW5ndGggIT09IHVuZGVmaW5lZCkge1xuICAgICAgdmFsaWRhdG9ycy5wdXNoKFZhbGlkYXRvcnMubWF4TGVuZ3RoKHRoaXMuZm9ybUZpZWxkLm1heExlbmd0aCkpO1xuICAgIH1cbiAgICBpZiAodGhpcy5mb3JtRmllbGQuaW5wdXRWYWxpZGF0aW9uKSB7XG4gICAgICB2YWxpZGF0b3JzLnB1c2goXG4gICAgICAgIHRoaXMudmFsaWRhdGVXaXRoSW5wdXRWYWxpZGF0aW9uKHRoaXMuZm9ybUZpZWxkLmlucHV0VmFsaWRhdGlvbilcbiAgICAgICk7XG4gICAgfVxuICAgIHJldHVybiB2YWxpZGF0b3JzO1xuICB9XG5cbiAgcHJpdmF0ZSB2YWxpZGF0ZVdpdGhJbnB1dFZhbGlkYXRpb24oXG4gICAgaW5wdXRWYWxpZGF0aW9uOiBJbnB1dFZhbGlkYXRpb25FbnVtXG4gICk6IFZhbGlkYXRvckZuIHtcbiAgICByZXR1cm4gVmFsaWRhdG9ycy5wYXR0ZXJuKG5ldyBSZWdFeHAoaW5wdXRWYWxpZGF0aW9uKSk7XG4gIH1cblxuICBnZXRFcnJvck1lc3NhZ2UoKTogc3RyaW5nIHtcbiAgICBjb25zdCBjb250cm9sID0gdGhpcy5mb3JtR3JvdXAuZ2V0KHRoaXMuZm9ybUZpZWxkLm5hbWUpO1xuICAgIGlmIChjb250cm9sPy5oYXNFcnJvcigncmVxdWlyZWQnKSkge1xuICAgICAgcmV0dXJuIGAke3RoaXMuZm9ybUZpZWxkLmxhYmVsfSBpcyByZXF1aXJlZGA7XG4gICAgfSBlbHNlIGlmIChjb250cm9sPy5oYXNFcnJvcignbWlubGVuZ3RoJykpIHtcbiAgICAgIHJldHVybiBgJHt0aGlzLmZvcm1GaWVsZC5sYWJlbH0gbXVzdCBiZSBhdCBsZWFzdCAke3RoaXMuZm9ybUZpZWxkLm1pbkxlbmd0aH0gY2hhcmFjdGVyc2A7XG4gICAgfSBlbHNlIGlmIChjb250cm9sPy5oYXNFcnJvcignbWF4bGVuZ3RoJykpIHtcbiAgICAgIHJldHVybiBgJHt0aGlzLmZvcm1GaWVsZC5sYWJlbH0gbXVzdCBiZSBhdCBtb3N0ICR7dGhpcy5mb3JtRmllbGQubWF4TGVuZ3RofSBjaGFyYWN0ZXJzYDtcbiAgICB9IGVsc2UgaWYgKGNvbnRyb2w/Lmhhc0Vycm9yKCdwYXR0ZXJuJykpIHtcbiAgICAgIHJldHVybiBgJHt0aGlzLmZvcm1GaWVsZC5sYWJlbH0gaXMgaW52YWxpZGA7XG4gICAgfVxuICAgIHJldHVybiAnJztcbiAgfVxufVxuIiwiPGRpdlxuICBbZm9ybUdyb3VwXT1cImZvcm1Hcm91cFwiXG4gIGNsYXNzPVwiZm9ybS1maWVsZFwiXG4gIFtuZ1N0eWxlXT1cIntcbiAgICB3aWR0aDogZm9ybUZpZWxkLndpZHRoIHx8ICcxMDAlJyxcbiAgICBoZWlnaHQ6IGZvcm1GaWVsZC5oZWlnaHQgfHwgJ2F1dG8nXG4gIH1cIlxuICAqbmdJZj1cIiFmb3JtRmllbGQuaGlkZGVuXCJcbj5cbiAgPGxhYmVsICpuZ0lmPVwiZm9ybUZpZWxkLmxhYmVsXCI+e3sgZm9ybUZpZWxkLmxhYmVsIH19PC9sYWJlbD5cblxuICA8bmctY29udGFpbmVyICpuZ0lmPVwiZm9ybUZpZWxkLmljb25DbGFzczsgZWxzZSBub0ljb25cIj5cbiAgICA8cC1pY29uRmllbGQgW2ljb25Qb3NpdGlvbl09XCJmb3JtRmllbGQuaWNvblBvc2l0aW9uIHx8ICdsZWZ0J1wiPlxuICAgICAgPHAtaW5wdXRJY29uXG4gICAgICAgICpuZ0lmPVwiZm9ybUZpZWxkLmljb25DbGFzc1wiXG4gICAgICAgIFtzdHlsZUNsYXNzXT1cImZvcm1GaWVsZC5pY29uQ2xhc3NcIlxuICAgICAgPjwvcC1pbnB1dEljb24+XG4gICAgICA8aW5wdXRcbiAgICAgICAgW3R5cGVdPVwiZ2V0SW5wdXRUeXBlKClcIlxuICAgICAgICBwSW5wdXRUZXh0XG4gICAgICAgIFtmb3JtQ29udHJvbE5hbWVdPVwiZm9ybUZpZWxkLm5hbWVcIlxuICAgICAgICBbcGxhY2Vob2xkZXJdPVwiZm9ybUZpZWxkLnBsYWNlaG9sZGVyID8/ICcnXCJcbiAgICAgICAgW2F0dHIubWlubGVuZ3RoXT1cImZvcm1GaWVsZC5taW5MZW5ndGhcIlxuICAgICAgICBbYXR0ci5tYXhsZW5ndGhdPVwiZm9ybUZpZWxkLm1heExlbmd0aFwiXG4gICAgICAgIFtuZ1N0eWxlXT1cIntcbiAgICAgICAgICB3aWR0aDogZm9ybUZpZWxkLndpZHRoIHx8ICcxMDAlJyxcbiAgICAgICAgICBoZWlnaHQ6IGZvcm1GaWVsZC5oZWlnaHQgfHwgJ2F1dG8nXG4gICAgICAgIH1cIlxuICAgICAgLz5cbiAgICA8L3AtaWNvbkZpZWxkPlxuICA8L25nLWNvbnRhaW5lcj5cblxuICA8bmctdGVtcGxhdGUgI25vSWNvbj5cbiAgICA8aW5wdXRcbiAgICAgIFt0eXBlXT1cImdldElucHV0VHlwZSgpXCJcbiAgICAgIHBJbnB1dFRleHRcbiAgICAgIFtmb3JtQ29udHJvbE5hbWVdPVwiZm9ybUZpZWxkLm5hbWVcIlxuICAgICAgW3BsYWNlaG9sZGVyXT1cImZvcm1GaWVsZC5wbGFjZWhvbGRlciA/PyAnJ1wiXG4gICAgICBbYXR0ci5taW5sZW5ndGhdPVwiZm9ybUZpZWxkLm1pbkxlbmd0aFwiXG4gICAgICBbYXR0ci5tYXhsZW5ndGhdPVwiZm9ybUZpZWxkLm1heExlbmd0aFwiXG4gICAgICBbbmdTdHlsZV09XCJ7XG4gICAgICAgIHdpZHRoOiBmb3JtRmllbGQud2lkdGggfHwgJzEwMCUnLFxuICAgICAgICBoZWlnaHQ6IGZvcm1GaWVsZC5oZWlnaHQgfHwgJ2F1dG8nXG4gICAgICB9XCJcbiAgICAvPlxuICA8L25nLXRlbXBsYXRlPlxuXG4gIDxkaXYgY2xhc3M9XCJmb3JtLWluZm8tcm93XCI+XG4gICAgPHNtYWxsXG4gICAgICAqbmdJZj1cIlxuICAgICAgICBmb3JtR3JvdXAuZ2V0KGZvcm1GaWVsZC5uYW1lKT8uaW52YWxpZCAmJlxuICAgICAgICBmb3JtR3JvdXAuZ2V0KGZvcm1GaWVsZC5uYW1lKT8udG91Y2hlZFxuICAgICAgXCJcbiAgICAgIGNsYXNzPVwicC1lcnJvclwiXG4gICAgPlxuICAgICAge3sgZ2V0RXJyb3JNZXNzYWdlKCkgfX1cbiAgICA8L3NtYWxsPlxuICAgIDxkaXYgY2xhc3M9XCJzcGFjZXJcIj48L2Rpdj5cbiAgICA8ZGl2XG4gICAgICAqbmdJZj1cIiFmb3JtRmllbGQuZGlzYWJsZWQgJiYgZm9ybUZpZWxkLm1heExlbmd0aCAhPT0gdW5kZWZpbmVkXCJcbiAgICAgIGNsYXNzPVwiY2hhcmFjdGVyLWNvdW50ZXJcIlxuICAgID5cbiAgICAgIHt7IGNoYXJhY3RlckNvdW50IH19L3t7IGZvcm1GaWVsZC5tYXhMZW5ndGggfX0gY2hhcmFjdGVyc1xuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19

package/fesm2022/ng-prime-tools.mjs

@@ -1337,11 +1337,11 @@ class PTTextInputComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTTextInputComponent, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto'\n  }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\n  <ng-container *ngIf=\"formField.iconClass; else noIcon\">\n    <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n      <p-inputIcon\n        *ngIf=\"formField.iconClass\"\n        [styleClass]=\"formField.iconClass\"\n      ></p-inputIcon>\n      <input\n        [type]=\"getInputType()\"\n        pInputText\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [ngStyle]=\"{\n          width: formField.width || '100%',\n          height: formField.height || 'auto'\n        }\"\n      />\n    </p-iconField>\n  </ng-container>\n\n  <ng-template #noIcon>\n    <input\n      [type]=\"getInputType()\"\n      pInputText\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder ?? ''\"\n      [attr.minlength]=\"formField.minLength\"\n      [attr.maxlength]=\"formField.maxLength\"\n      [ngStyle]=\"{\n        width: formField.width || '100%',\n        height: formField.height || 'auto'\n      }\"\n    />\n  </ng-template>\n\n  <div class=\"form-info-row\">\n    <small\n      *ngIf=\"\n        formGroup.get(formField.name)?.invalid &&\n        formGroup.get(formField.name)?.touched\n      \"\n      class=\"p-error\"\n    >\n      {{ getErrorMessage() }}\n    </small>\n    <div class=\"spacer\"></div>\n    <div\n      *ngIf=\"!formField.disabled && formField.maxLength !== undefined\"\n      class=\"character-counter\"\n    >\n      {{ characterCount }}/{{ formField.maxLength }} characters\n    </div>\n  </div>\n</div>\n", styles: [".form-field{position:relative;margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.form-info-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.spacer{flex-grow:1}.character-counter{font-size:.8rem;color:#888;text-align:right;margin-left:auto}.p-error{font-size:.8rem;color:#f44336}input:focus{outline:none;box-shadow:none;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i10.IconField, selector: "p-iconField", inputs: ["iconPosition"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputIcon", inputs: ["styleClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTTextInputComponent, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto'\n  }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\n  <ng-container *ngIf=\"formField.iconClass; else noIcon\">\n    <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n      <p-inputIcon\n        *ngIf=\"formField.iconClass\"\n        [styleClass]=\"formField.iconClass\"\n      ></p-inputIcon>\n      <input\n        [type]=\"getInputType()\"\n        pInputText\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [ngStyle]=\"{\n          width: formField.width || '100%',\n          height: formField.height || 'auto'\n        }\"\n      />\n    </p-iconField>\n  </ng-container>\n\n  <ng-template #noIcon>\n    <input\n      [type]=\"getInputType()\"\n      pInputText\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder ?? ''\"\n      [attr.minlength]=\"formField.minLength\"\n      [attr.maxlength]=\"formField.maxLength\"\n      [ngStyle]=\"{\n        width: formField.width || '100%',\n        height: formField.height || 'auto'\n      }\"\n    />\n  </ng-template>\n\n  <div class=\"form-info-row\">\n    <small\n      *ngIf=\"\n        formGroup.get(formField.name)?.invalid &&\n        formGroup.get(formField.name)?.touched\n      \"\n      class=\"p-error\"\n    >\n      {{ getErrorMessage() }}\n    </small>\n    <div class=\"spacer\"></div>\n    <div\n      *ngIf=\"!formField.disabled && formField.maxLength !== undefined\"\n      class=\"character-counter\"\n    >\n      {{ characterCount }}/{{ formField.maxLength }} characters\n    </div>\n  </div>\n</div>\n", styles: [".form-field{position:relative}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.form-info-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.spacer{flex-grow:1}.character-counter{font-size:.8rem;color:#888;text-align:right;margin-left:auto}.p-error{font-size:.8rem;color:#f44336}input:focus{outline:none;box-shadow:none;border-color:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i10.IconField, selector: "p-iconField", inputs: ["iconPosition"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputIcon", inputs: ["styleClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTTextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-text-input', template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto'\n  }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\n  <ng-container *ngIf=\"formField.iconClass; else noIcon\">\n    <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n      <p-inputIcon\n        *ngIf=\"formField.iconClass\"\n        [styleClass]=\"formField.iconClass\"\n      ></p-inputIcon>\n      <input\n        [type]=\"getInputType()\"\n        pInputText\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [ngStyle]=\"{\n          width: formField.width || '100%',\n          height: formField.height || 'auto'\n        }\"\n      />\n    </p-iconField>\n  </ng-container>\n\n  <ng-template #noIcon>\n    <input\n      [type]=\"getInputType()\"\n      pInputText\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder ?? ''\"\n      [attr.minlength]=\"formField.minLength\"\n      [attr.maxlength]=\"formField.maxLength\"\n      [ngStyle]=\"{\n        width: formField.width || '100%',\n        height: formField.height || 'auto'\n      }\"\n    />\n  </ng-template>\n\n  <div class=\"form-info-row\">\n    <small\n      *ngIf=\"\n        formGroup.get(formField.name)?.invalid &&\n        formGroup.get(formField.name)?.touched\n      \"\n      class=\"p-error\"\n    >\n      {{ getErrorMessage() }}\n    </small>\n    <div class=\"spacer\"></div>\n    <div\n      *ngIf=\"!formField.disabled && formField.maxLength !== undefined\"\n      class=\"character-counter\"\n    >\n      {{ characterCount }}/{{ formField.maxLength }} characters\n    </div>\n  </div>\n</div>\n", styles: [".form-field{position:relative;margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.form-info-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.spacer{flex-grow:1}.character-counter{font-size:.8rem;color:#888;text-align:right;margin-left:auto}.p-error{font-size:.8rem;color:#f44336}input:focus{outline:none;box-shadow:none;border-color:inherit}\n"] }]
+            args: [{ selector: 'pt-text-input', template: "<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto'\n  }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\n  <ng-container *ngIf=\"formField.iconClass; else noIcon\">\n    <p-iconField [iconPosition]=\"formField.iconPosition || 'left'\">\n      <p-inputIcon\n        *ngIf=\"formField.iconClass\"\n        [styleClass]=\"formField.iconClass\"\n      ></p-inputIcon>\n      <input\n        [type]=\"getInputType()\"\n        pInputText\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [ngStyle]=\"{\n          width: formField.width || '100%',\n          height: formField.height || 'auto'\n        }\"\n      />\n    </p-iconField>\n  </ng-container>\n\n  <ng-template #noIcon>\n    <input\n      [type]=\"getInputType()\"\n      pInputText\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder ?? ''\"\n      [attr.minlength]=\"formField.minLength\"\n      [attr.maxlength]=\"formField.maxLength\"\n      [ngStyle]=\"{\n        width: formField.width || '100%',\n        height: formField.height || 'auto'\n      }\"\n    />\n  </ng-template>\n\n  <div class=\"form-info-row\">\n    <small\n      *ngIf=\"\n        formGroup.get(formField.name)?.invalid &&\n        formGroup.get(formField.name)?.touched\n      \"\n      class=\"p-error\"\n    >\n      {{ getErrorMessage() }}\n    </small>\n    <div class=\"spacer\"></div>\n    <div\n      *ngIf=\"!formField.disabled && formField.maxLength !== undefined\"\n      class=\"character-counter\"\n    >\n      {{ characterCount }}/{{ formField.maxLength }} characters\n    </div>\n  </div>\n</div>\n", styles: [".form-field{position:relative}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.form-info-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.spacer{flex-grow:1}.character-counter{font-size:.8rem;color:#888;text-align:right;margin-left:auto}.p-error{font-size:.8rem;color:#f44336}input:focus{outline:none;box-shadow:none;border-color:inherit}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
@@ -2259,12 +2259,23 @@ class PTCardComponent {
         return this.config.menuPosition || PTCardComponent.DEFAULT_MENU_POSITION;
     }
     getCardStyles() {
-        const transparency = this.config.pattern?.transparencyPercentage
+        // Transparency for the background color
+        const backgroundTransparency = this.config.transparencyPercentage
+            ? parseFloat(this.config.transparencyPercentage) / 100
+            : 1;
+        // Transparency for the pattern image
+        const patternTransparency = this.config.pattern?.transparencyPercentage
             ? parseFloat(this.config.pattern.transparencyPercentage) / 100
             : 1;
-        const imageUrl = this.config.pattern?.imageUrl || '';
-        const backgroundColor = this.config.pattern?.backgroundColor ||
-            PTCardComponent.DEFAULT_BACKGROUND_COLOR;
+        // Background color with transparency
+        const backgroundColor = this.config.backgroundColor && this.config.transparencyPercentage !== '0'
+            ? this.hexToRgba(this.config.backgroundColor, backgroundTransparency)
+            : 'transparent';
+        // Pattern image with transparency applied via linear-gradient
+        const backgroundImage = this.config.pattern?.imageUrl &&
+            this.config.pattern.transparencyPercentage !== '0'
+            ? `linear-gradient(rgba(255, 255, 255, ${1 - patternTransparency}), rgba(255, 255, 255, ${1 - patternTransparency})), url('${this.config.pattern.imageUrl}')`
+            : '';
         const patternWidth = this.config.pattern?.width || '100%';
         const patternHeight = this.config.pattern?.height || 'auto';
         // Determine background-repeat value
@@ -2278,8 +2289,18 @@ class PTCardComponent {
             : `${patternWidth} ${patternHeight}`;
         // Determine background-position based on the position parameter
         const backgroundPosition = this.config.pattern?.position || 'center';
+        const justifyContent = this.config.alignContent === 'center' ? 'center' : 'flex-start';
+        const alignItems = this.config.alignContent === 'center' ? 'center' : 'stretch';
         return {
-            backgroundColor,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent, // Apply conditional vertical alignment
+            alignItems, // Apply conditional horizontal alignment
+            backgroundColor, // Background color with transparency
+            backgroundImage, // Pattern image with transparency
+            backgroundSize,
+            backgroundPosition,
+            backgroundRepeat,
             width: this.config.width || PTCardComponent.DEFAULT_WIDTH,
             height: this.config.height || PTCardComponent.DEFAULT_HEIGHT,
             border: this.config.noBorder
@@ -2290,25 +2311,64 @@ class PTCardComponent {
             borderRadius: this.config.borderRadius || '8px',
             boxShadow: this.config.boxShadow || '0 2px 4px rgba(0, 0, 0, 0.1)',
             position: 'relative',
-            backgroundImage: imageUrl ? `url(${imageUrl})` : 'none',
-            backgroundSize,
-            backgroundPosition,
-            backgroundRepeat,
             zIndex: this.config.zIndex !== undefined ? this.config.zIndex : 'auto',
         };
     }
+    // Utility function to convert hex color to rgba
+    hexToRgba(hex, alpha) {
+        const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+        hex = hex.replace(shorthandRegex, (_, r, g, b) => r + r + g + g + b + b);
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result
+            ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`
+            : hex;
+    }
+    getBodyStyles() {
+        const justifyContent = this.config.alignBodyContent === 'center' ? 'center' : 'flex-start';
+        const alignItems = this.config.alignBodyContent === 'center' ? 'center' : 'stretch';
+        return {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent,
+            alignItems,
+            flexGrow: 1,
+            maxWidth: '100%',
+            padding: '16px', // Default padding for body
+            boxSizing: 'border-box',
+        };
+    }
+    getHeaderStyles() {
+        const justifyContent = this.config.alignHeaderContent === 'center' ? 'center' : 'flex-start';
+        const alignItems = this.config.alignHeaderContent === 'center' ? 'center' : 'stretch';
+        return {
+            display: 'flex',
+            justifyContent,
+            alignItems,
+            marginBottom: '16px', // Default margin for header
+            position: 'relative',
+        };
+    }
     isScrollableHorizontal() {
         return !!this.config.scrollableHorizontal;
     }
     isScrollableVertical() {
         return !!this.config.scrollableVertical;
     }
+    getCardClass() {
+        return this.config.alignContent === 'center' ? 'center-align' : '';
+    }
+    getBodyClass() {
+        return this.config.alignBodyContent === 'center' ? 'center-align' : '';
+    }
+    getHeaderClass() {
+        return this.config.alignHeaderContent === 'center' ? 'center-align' : '';
+    }
     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 }); }
-    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 *ngIf=\"hasTitle()\" class=\"card-header\" [ngStyle]=\"getTitleStyles()\">\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  <div\n    class=\"card-body\"\n    [ngClass]=\"{\n      'card-body-scrollable-vertical': isScrollableVertical(),\n      'card-body-scrollable-horizontal': isScrollableHorizontal()\n    }\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".pt-card .card{padding:16px;margin:16px 0;display:flex;flex-direction:column;max-height:100vh;overflow:hidden;position:relative}.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{flex-grow:1;max-width:100%;z-index:1}.pt-card .card-body-scrollable-horizontal{overflow-x:auto;padding-bottom:8px}.pt-card .card-body-scrollable-vertical{flex-grow:1;overflow-y:auto;padding-right:8px}.pt-card .card-header{margin-bottom:16px;display:flex;align-items:center;justify-content:var(--text-align, left);position:relative}.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"] }] }); }
+    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;background-color:transparent}.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;background-color:var( --background-color, rgba(255, 255, 255, 0) );background-image:var( --background-image-url, none );opacity:var(--image-opacity, 1);z-index:-1}.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-card', template: "<div\n  class=\"pt-card card\"\n  [attr.id]=\"config.identifier\"\n  [ngStyle]=\"getCardStyles()\"\n>\n  <div *ngIf=\"hasTitle()\" class=\"card-header\" [ngStyle]=\"getTitleStyles()\">\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  <div\n    class=\"card-body\"\n    [ngClass]=\"{\n      'card-body-scrollable-vertical': isScrollableVertical(),\n      'card-body-scrollable-horizontal': isScrollableHorizontal()\n    }\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".pt-card .card{padding:16px;margin:16px 0;display:flex;flex-direction:column;max-height:100vh;overflow:hidden;position:relative}.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{flex-grow:1;max-width:100%;z-index:1}.pt-card .card-body-scrollable-horizontal{overflow-x:auto;padding-bottom:8px}.pt-card .card-body-scrollable-vertical{flex-grow:1;overflow-y:auto;padding-right:8px}.pt-card .card-header{margin-bottom:16px;display:flex;align-items:center;justify-content:var(--text-align, left);position:relative}.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"] }]
+            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;background-color:transparent}.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;background-color:var( --background-color, rgba(255, 255, 255, 0) );background-image:var( --background-image-url, none );opacity:var(--image-opacity, 1);z-index:-1}.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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -2592,15 +2652,18 @@ class PTSideBarMenuComponent {
             height: '100vh',
             scrollable: true,
             backgroundColor: 'white',
-            fontColor: '#333', // Default main font color
-            fontColorSubMenu: '#666', // Default submenu font color
-            hoverColor: '#f1f1f1', // Default hover color for main menu
-            hoverColorSubMenu: '#e0e0e0', // Default hover color for submenu
+            fontColor: '#333',
+            fontColorSubMenu: '#666',
+            hoverColor: '#f1f1f1',
+            hoverColorSubMenu: '#e0e0e0',
         };
         this.searchCardConfig = {
+            alignContent: 'center',
+            alignBodyContent: 'center',
             identifier: 'pt-side-bar-menu/search',
             backgroundColor: 'white',
             height: '72px',
+            padding: '0',
         };
         this.cardConfig = {
             identifier: 'pt-side-bar-menu',
@@ -2772,11 +2835,11 @@ class PTSideBarMenuComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTSideBarMenuComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: { menuConfig: "menuConfig" }, ngImport: i0, template: "<div class=\"pt-side-bar-menu\">\n  <pt-card\n    *ngIf=\"menuConfig.searchable\"\n    [config]=\"searchCardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n  >\n    <div class=\"search-input\">\n      <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n      </pt-text-input>\n    </div>\n  </pt-card>\n\n  <pt-card\n    [config]=\"cardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n  >\n    <ul class=\"menu-list\">\n      <li\n        *ngFor=\"let item of filteredMenus\"\n        class=\"menu-item\"\n        [ngClass]=\"{ 'menu-item-expanded': item.isExpanded }\"\n        [ngStyle]=\"getMenuItemStyles()\"\n      >\n        <!-- Main menu items without children -->\n        <a\n          *ngIf=\"!item.children?.length\"\n          [routerLink]=\"item.url\"\n          class=\"menu-link\"\n          [ngStyle]=\"getMenuLinkStyles()\"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n          <span>{{ item.label }}</span>\n          <span\n            *ngIf=\"item.badge\"\n            [ngStyle]=\"getBadgeStyles(item.badge)\"\n            class=\"badge\"\n          >\n            {{ item.badge.count }}\n          </span>\n        </a>\n\n        <!-- Menu items with children -->\n        <a\n          *ngIf=\"item.children?.length\"\n          class=\"menu-link\"\n          (click)=\"toggleMenu(item, $event)\"\n          [ngStyle]=\"getMenuLinkStyles()\"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n          <span>{{ item.label }}</span>\n          <span\n            *ngIf=\"item.badge\"\n            [ngStyle]=\"getBadgeStyles(item.badge)\"\n            class=\"badge\"\n          >\n            {{ item.badge.count }}\n          </span>\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n\n        <!-- Submenu -->\n        <ul class=\"submenu-list\">\n          <li *ngFor=\"let child of item.children\" class=\"submenu-item\">\n            <a\n              [routerLink]=\"child.url\"\n              class=\"submenu-link\"\n              [ngStyle]=\"getSubMenuLinkStyles()\"\n            >\n              <i [ngClass]=\"child.icon\"></i>\n              <span class=\"submenu-title\">{{ child.label }}</span>\n              <span\n                *ngIf=\"child.badge\"\n                [ngStyle]=\"getBadgeStyles(child.badge)\"\n                class=\"badge\"\n              >\n                {{ child.badge.count }}\n              </span>\n            </a>\n          </li>\n        </ul>\n      </li>\n    </ul>\n  </pt-card>\n</div>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-item-expanded .submenu-list{max-height:500px;padding-bottom:5px;padding-top:5px}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:15px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .search-input{margin-left:10px}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:50%;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-item:last-child:after{content:none}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-list{border-left:1px solid #e5e7eb;list-style-type:none;margin-left:23px;margin-top:5px;max-height:0;overflow:hidden;padding-left:25px;position:relative;transition:max-height .3s ease-out,padding .3s ease-out}.pt-side-bar-menu .submenu-list:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-title{margin-left:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: { menuConfig: "menuConfig" }, ngImport: i0, template: "<div class=\"pt-side-bar-menu\">\n  <pt-card\n    *ngIf=\"menuConfig.searchable\"\n    [config]=\"searchCardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n  >\n    <div class=\"search-input\">\n      <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n      </pt-text-input>\n    </div>\n  </pt-card>\n\n  <pt-card\n    [config]=\"cardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n  >\n    <ul class=\"menu-list\">\n      <li\n        *ngFor=\"let item of filteredMenus\"\n        class=\"menu-item\"\n        [ngClass]=\"{ 'menu-item-expanded': item.isExpanded }\"\n        [ngStyle]=\"getMenuItemStyles()\"\n      >\n        <!-- Main menu items without children -->\n        <a\n          *ngIf=\"!item.children?.length\"\n          [routerLink]=\"item.url\"\n          class=\"menu-link\"\n          [ngStyle]=\"getMenuLinkStyles()\"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n          <span>{{ item.label }}</span>\n          <span\n            *ngIf=\"item.badge\"\n            [ngStyle]=\"getBadgeStyles(item.badge)\"\n            class=\"badge\"\n          >\n            {{ item.badge.count }}\n          </span>\n        </a>\n\n        <!-- Menu items with children -->\n        <a\n          *ngIf=\"item.children?.length\"\n          class=\"menu-link\"\n          (click)=\"toggleMenu(item, $event)\"\n          [ngStyle]=\"getMenuLinkStyles()\"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n          <span>{{ item.label }}</span>\n          <span\n            *ngIf=\"item.badge\"\n            [ngStyle]=\"getBadgeStyles(item.badge)\"\n            class=\"badge\"\n          >\n            {{ item.badge.count }}\n          </span>\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n\n        <!-- Submenu -->\n        <ul class=\"submenu-list\">\n          <li *ngFor=\"let child of item.children\" class=\"submenu-item\">\n            <a\n              [routerLink]=\"child.url\"\n              class=\"submenu-link\"\n              [ngStyle]=\"getSubMenuLinkStyles()\"\n            >\n              <i [ngClass]=\"child.icon\"></i>\n              <span class=\"submenu-title\">{{ child.label }}</span>\n              <span\n                *ngIf=\"child.badge\"\n                [ngStyle]=\"getBadgeStyles(child.badge)\"\n                class=\"badge\"\n              >\n                {{ child.badge.count }}\n              </span>\n            </a>\n          </li>\n        </ul>\n      </li>\n    </ul>\n  </pt-card>\n</div>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-item-expanded .submenu-list{max-height:500px;padding-bottom:5px;padding-top:5px}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:15px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:50%;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-item:last-child:after{content:none}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-list{border-left:1px solid #e5e7eb;list-style-type:none;margin-left:23px;margin-top:5px;max-height:0;overflow:hidden;padding-left:25px;position:relative;transition:max-height .3s ease-out,padding .3s ease-out}.pt-side-bar-menu .submenu-list:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-title{margin-left:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTSideBarMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-side-bar-menu', template: "<div class=\"pt-side-bar-menu\">\n  <pt-card\n    *ngIf=\"menuConfig.searchable\"\n    [config]=\"searchCardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n  >\n    <div class=\"search-input\">\n      <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n      </pt-text-input>\n    </div>\n  </pt-card>\n\n  <pt-card\n    [config]=\"cardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n  >\n    <ul class=\"menu-list\">\n      <li\n        *ngFor=\"let item of filteredMenus\"\n        class=\"menu-item\"\n        [ngClass]=\"{ 'menu-item-expanded': item.isExpanded }\"\n        [ngStyle]=\"getMenuItemStyles()\"\n      >\n        <!-- Main menu items without children -->\n        <a\n          *ngIf=\"!item.children?.length\"\n          [routerLink]=\"item.url\"\n          class=\"menu-link\"\n          [ngStyle]=\"getMenuLinkStyles()\"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n          <span>{{ item.label }}</span>\n          <span\n            *ngIf=\"item.badge\"\n            [ngStyle]=\"getBadgeStyles(item.badge)\"\n            class=\"badge\"\n          >\n            {{ item.badge.count }}\n          </span>\n        </a>\n\n        <!-- Menu items with children -->\n        <a\n          *ngIf=\"item.children?.length\"\n          class=\"menu-link\"\n          (click)=\"toggleMenu(item, $event)\"\n          [ngStyle]=\"getMenuLinkStyles()\"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n          <span>{{ item.label }}</span>\n          <span\n            *ngIf=\"item.badge\"\n            [ngStyle]=\"getBadgeStyles(item.badge)\"\n            class=\"badge\"\n          >\n            {{ item.badge.count }}\n          </span>\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n\n        <!-- Submenu -->\n        <ul class=\"submenu-list\">\n          <li *ngFor=\"let child of item.children\" class=\"submenu-item\">\n            <a\n              [routerLink]=\"child.url\"\n              class=\"submenu-link\"\n              [ngStyle]=\"getSubMenuLinkStyles()\"\n            >\n              <i [ngClass]=\"child.icon\"></i>\n              <span class=\"submenu-title\">{{ child.label }}</span>\n              <span\n                *ngIf=\"child.badge\"\n                [ngStyle]=\"getBadgeStyles(child.badge)\"\n                class=\"badge\"\n              >\n                {{ child.badge.count }}\n              </span>\n            </a>\n          </li>\n        </ul>\n      </li>\n    </ul>\n  </pt-card>\n</div>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-item-expanded .submenu-list{max-height:500px;padding-bottom:5px;padding-top:5px}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:15px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .search-input{margin-left:10px}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:50%;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-item:last-child:after{content:none}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-list{border-left:1px solid #e5e7eb;list-style-type:none;margin-left:23px;margin-top:5px;max-height:0;overflow:hidden;padding-left:25px;position:relative;transition:max-height .3s ease-out,padding .3s ease-out}.pt-side-bar-menu .submenu-list:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-title{margin-left:5px}\n"] }]
+            args: [{ selector: 'pt-side-bar-menu', template: "<div class=\"pt-side-bar-menu\">\n  <pt-card\n    *ngIf=\"menuConfig.searchable\"\n    [config]=\"searchCardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n  >\n    <div class=\"search-input\">\n      <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n      </pt-text-input>\n    </div>\n  </pt-card>\n\n  <pt-card\n    [config]=\"cardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n  >\n    <ul class=\"menu-list\">\n      <li\n        *ngFor=\"let item of filteredMenus\"\n        class=\"menu-item\"\n        [ngClass]=\"{ 'menu-item-expanded': item.isExpanded }\"\n        [ngStyle]=\"getMenuItemStyles()\"\n      >\n        <!-- Main menu items without children -->\n        <a\n          *ngIf=\"!item.children?.length\"\n          [routerLink]=\"item.url\"\n          class=\"menu-link\"\n          [ngStyle]=\"getMenuLinkStyles()\"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n          <span>{{ item.label }}</span>\n          <span\n            *ngIf=\"item.badge\"\n            [ngStyle]=\"getBadgeStyles(item.badge)\"\n            class=\"badge\"\n          >\n            {{ item.badge.count }}\n          </span>\n        </a>\n\n        <!-- Menu items with children -->\n        <a\n          *ngIf=\"item.children?.length\"\n          class=\"menu-link\"\n          (click)=\"toggleMenu(item, $event)\"\n          [ngStyle]=\"getMenuLinkStyles()\"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n          <span>{{ item.label }}</span>\n          <span\n            *ngIf=\"item.badge\"\n            [ngStyle]=\"getBadgeStyles(item.badge)\"\n            class=\"badge\"\n          >\n            {{ item.badge.count }}\n          </span>\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n\n        <!-- Submenu -->\n        <ul class=\"submenu-list\">\n          <li *ngFor=\"let child of item.children\" class=\"submenu-item\">\n            <a\n              [routerLink]=\"child.url\"\n              class=\"submenu-link\"\n              [ngStyle]=\"getSubMenuLinkStyles()\"\n            >\n              <i [ngClass]=\"child.icon\"></i>\n              <span class=\"submenu-title\">{{ child.label }}</span>\n              <span\n                *ngIf=\"child.badge\"\n                [ngStyle]=\"getBadgeStyles(child.badge)\"\n                class=\"badge\"\n              >\n                {{ child.badge.count }}\n              </span>\n            </a>\n          </li>\n        </ul>\n      </li>\n    </ul>\n  </pt-card>\n</div>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-item-expanded .submenu-list{max-height:500px;padding-bottom:5px;padding-top:5px}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:15px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:50%;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-item:last-child:after{content:none}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-list{border-left:1px solid #e5e7eb;list-style-type:none;margin-left:23px;margin-top:5px;max-height:0;overflow:hidden;padding-left:25px;position:relative;transition:max-height .3s ease-out,padding .3s ease-out}.pt-side-bar-menu .submenu-list:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-title{margin-left:5px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { menuConfig: [{
                 type: Input
             }] } });
@@ -3125,21 +3188,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Input
             }] } });
 
-class PTLoginPageComponent {
+class PTButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTButtonModule, declarations: [PTButtonComponent], imports: [CommonModule, ButtonModule], exports: [PTButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonModule, imports: [CommonModule, ButtonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTButtonComponent],
+                    imports: [CommonModule, ButtonModule],
+                    exports: [PTButtonComponent],
+                }]
+        }] });
+
+class PTLoginCardComponent {
     constructor(fb) {
         this.fb = fb;
         this.loginSubmit = new EventEmitter();
-        this.backgroundImageStyle = '';
         this.formGroup = this.fb.group({});
     }
     ngOnInit() {
         this.initializeDefaults();
         this.setupFormFields();
         this.formGroup.patchValue({
-            username: this.loginPageConfig.login?.username || '',
-            password: this.loginPageConfig.login?.password || '',
+            username: this.loginPageConfig?.login?.username || '',
+            password: this.loginPageConfig?.login?.password || '',
         });
-        this.setBackgroundImageStyle();
         // Enable/Disable the button based on form validity
         this.formGroup.statusChanges.subscribe((status) => {
             this.loginPageConfig.buttonConfig.disabled = status !== 'VALID';
@@ -3185,11 +3260,11 @@ class PTLoginPageComponent {
             ...this.loginPageConfig.login,
         };
         // Initialize cardConfig
-        this.loginPageConfig.cardConfig = {
-            noBorder: this.loginPageConfig.cardConfig?.noBorder ?? true,
-            width: this.loginPageConfig.cardConfig?.width ?? '400px',
-            padding: this.loginPageConfig.cardConfig?.padding ?? '40px',
-            ...this.loginPageConfig.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 = {
@@ -3222,11 +3297,7 @@ class PTLoginPageComponent {
             ...this.loginPageConfig.buttonConfig,
         };
     }
-    setBackgroundImageStyle() {
-        const transparency = parseFloat(this.loginPageConfig?.backgroundImage?.transparencyPercentage) / 100;
-        this.backgroundImageStyle = `linear-gradient(rgba(255,255,255,${1 - transparency}), rgba(255,255,255,${1 - transparency})), url(${this.loginPageConfig?.backgroundImage?.imageUrl})`;
-    }
-    login() {
+    onSubmit() {
         if (this.formGroup.valid) {
             this.loginSubmit.emit(this.formGroup.value);
         }
@@ -3246,31 +3317,70 @@ class PTLoginPageComponent {
         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));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    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: "<div\n  class=\"login-container\"\n  [ngStyle]=\"{\n    'background-image': backgroundImageStyle\n  }\"\n>\n  <pt-card [config]=\"loginPageConfig.cardConfig!\">\n    <div class=\"logo-container\" *ngIf=\"loginPageConfig.logoUrl?.imageUrl\">\n      <img\n        [src]=\"loginPageConfig.logoUrl?.imageUrl\"\n        [alt]=\"loginPageConfig.logoUrl?.altText\"\n        [style.width]=\"loginPageConfig.logoUrl?.width\"\n        [style.height]=\"loginPageConfig.logoUrl?.height\"\n      />\n    </div>\n\n    <div\n      class=\"title-container\"\n      [ngStyle]=\"{ 'text-align': loginPageConfig.title?.position }\"\n    >\n      <h1\n        [ngStyle]=\"{\n          color: loginPageConfig.title?.color,\n          'font-size': loginPageConfig.title?.fontSize\n        }\"\n      >\n        {{ loginPageConfig.title?.text }}\n      </h1>\n    </div>\n\n    <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"login()\">\n      <div *ngIf=\"loginPageConfig.login?.errorMessage\" class=\"error-message\">\n        {{ loginPageConfig.login?.errorMessage }}\n      </div>\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      <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</div>\n", styles: [".login-container{background-size:cover;background-position:center;background-repeat:no-repeat;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center}.error-message{color:red;background-color:#ffe6e6;border:1px solid red;padding:10px;margin-bottom:10px;border-radius:5px;width:100%}.logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.title-container{text-align:center;margin-bottom:20px}.field{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.submit-btn{display:flex;justify-content:center;width:100%}::ng-deep pt-button{width:100%}::ng-deep .submit-btn p-button button{width:100%}@media (max-width: 768px){.submit-btn{min-width:100%}}.login-footer{margin-top:20px;text-align:center;font-size:.9em;color:#555}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }] }); }
+    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 }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-login-page', template: "<div\n  class=\"login-container\"\n  [ngStyle]=\"{\n    'background-image': backgroundImageStyle\n  }\"\n>\n  <pt-card [config]=\"loginPageConfig.cardConfig!\">\n    <div class=\"logo-container\" *ngIf=\"loginPageConfig.logoUrl?.imageUrl\">\n      <img\n        [src]=\"loginPageConfig.logoUrl?.imageUrl\"\n        [alt]=\"loginPageConfig.logoUrl?.altText\"\n        [style.width]=\"loginPageConfig.logoUrl?.width\"\n        [style.height]=\"loginPageConfig.logoUrl?.height\"\n      />\n    </div>\n\n    <div\n      class=\"title-container\"\n      [ngStyle]=\"{ 'text-align': loginPageConfig.title?.position }\"\n    >\n      <h1\n        [ngStyle]=\"{\n          color: loginPageConfig.title?.color,\n          'font-size': loginPageConfig.title?.fontSize\n        }\"\n      >\n        {{ loginPageConfig.title?.text }}\n      </h1>\n    </div>\n\n    <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"login()\">\n      <div *ngIf=\"loginPageConfig.login?.errorMessage\" class=\"error-message\">\n        {{ loginPageConfig.login?.errorMessage }}\n      </div>\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      <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</div>\n", styles: [".login-container{background-size:cover;background-position:center;background-repeat:no-repeat;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center}.error-message{color:red;background-color:#ffe6e6;border:1px solid red;padding:10px;margin-bottom:10px;border-radius:5px;width:100%}.logo-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.title-container{text-align:center;margin-bottom:20px}.field{display:flex;flex-direction:column;margin-bottom:20px;width:100%}.submit-btn{display:flex;justify-content:center;width:100%}::ng-deep pt-button{width:100%}::ng-deep .submit-btn p-button button{width:100%}@media (max-width: 768px){.submit-btn{min-width:100%}}.login-footer{margin-top:20px;text-align:center;font-size:.9em;color:#555}\n"] }]
+            args: [{ selector: 'pt-login-card', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        PTCardModule,
+                        PTButtonModule,
+                        PTTextInputModule,
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i2$1.FormBuilder }], propDecorators: { loginPageConfig: [{
                 type: Input
             }], loginSubmit: [{
                 type: Output
             }] } });
 
-class PTButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTButtonModule, declarations: [PTButtonComponent], imports: [CommonModule, ButtonModule], exports: [PTButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonModule, imports: [CommonModule, ButtonModule] }); }
+class PTLoginPageComponent {
+    constructor() {
+        this.loginSubmit = new EventEmitter();
+        this.defaultCardConfig = {
+            borderRadius: '0',
+            margin: '0',
+            width: '100%',
+            height: '100%',
+            noBorder: true,
+            alignContent: 'center',
+            alignBodyContent: 'center',
+        };
+    }
+    ngOnInit() {
+        this.applyDefaultConfigs();
+    }
+    applyDefaultConfigs() {
+        // Apply defaults to centerCardConfig
+        this.loginPageConfig.centerCardConfig = this.applyDefaults(this.loginPageConfig.centerCardConfig);
+        // Apply defaults to leftCardConfig
+        this.loginPageConfig.leftCardConfig = this.applyDefaults(this.loginPageConfig.leftCardConfig);
+        // Apply defaults to rightCardConfig
+        this.loginPageConfig.rightCardConfig = this.applyDefaults(this.loginPageConfig.rightCardConfig);
+    }
+    applyDefaults(config) {
+        return {
+            ...this.defaultCardConfig,
+            ...(config || {}),
+        };
+    }
+    onLoginSubmit(loginModel) {
+        console.log('Login Submitted:', loginModel);
+        this.loginSubmit.emit(loginModel);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [PTButtonComponent],
-                    imports: [CommonModule, ButtonModule],
-                    exports: [PTButtonComponent],
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], propDecorators: { loginPageConfig: [{
+                type: Input
+            }], loginSubmit: [{
+                type: Output
+            }] } });
 
 class PTLoginPageModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -3279,13 +3389,15 @@ class PTLoginPageModule {
             ReactiveFormsModule,
             PTTextInputModule,
             PTCardModule,
-            PTButtonModule], exports: [PTLoginPageComponent] }); }
+            PTButtonModule,
+            PTLoginCardComponent], exports: [PTLoginPageComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             PTTextInputModule,
             PTCardModule,
-            PTButtonModule] }); }
+            PTButtonModule,
+            PTLoginCardComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTLoginPageModule, decorators: [{
             type: NgModule,
@@ -3298,6 +3410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         PTTextInputModule,
                         PTCardModule,
                         PTButtonModule,
+                        PTLoginCardComponent,
                     ],
                     exports: [PTLoginPageComponent],
                 }]