angular-dumb-lib 0.0.19 → 0.0.20

package/fesm2022/angular-dumb-lib.mjs

@@ -4,6 +4,7 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Subject, takeUntil } from 'rxjs';
 import * as i1$1 from '@angular/platform-browser';
 import * as i2$1 from 'primeng/table';
 import { TableModule } from 'primeng/table';
@@ -25,18 +26,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class AngularDumbLibComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularDumbLibComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AngularDumbLibComponent, selector: "lib-angular-dumb-lib", ngImport: i0, template: `
-    <p>
-      angular-dumb-lib works!
-    </p>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AngularDumbLibComponent, selector: "lib-angular-dumb-lib", ngImport: i0, template: `
+    <p>
+      angular-dumb-lib works!
+    </p>
   `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularDumbLibComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-angular-dumb-lib', template: `
-    <p>
-      angular-dumb-lib works!
-    </p>
+            args: [{ selector: 'lib-angular-dumb-lib', template: `
+    <p>
+      angular-dumb-lib works!
+    </p>
   ` }]
         }] });
 
@@ -113,14 +114,14 @@ var SelectionType;
     SelectionType["radio"] = "radio";
     SelectionType["checkbox"] = "checkbox";
 })(SelectionType || (SelectionType = {}));
-var LoadingSize;
-(function (LoadingSize) {
-    LoadingSize["Xbig"] = "xbig";
-    LoadingSize["Big"] = "big";
-    LoadingSize["Medium"] = "medium";
-    LoadingSize["Small"] = "small";
-    LoadingSize["Xsmall"] = "xsmall";
-})(LoadingSize || (LoadingSize = {}));
+var Size;
+(function (Size) {
+    Size["Xbig"] = "xbig";
+    Size["Big"] = "big";
+    Size["Medium"] = "medium";
+    Size["Small"] = "small";
+    Size["Xsmall"] = "xsmall";
+})(Size || (Size = {}));
 var MenuDirection;
 (function (MenuDirection) {
     MenuDirection["vertical"] = "vertical";
@@ -137,6 +138,12 @@ var LoadingType;
     LoadingType["black"] = "black";
     LoadingType["white"] = "white";
 })(LoadingType || (LoadingType = {}));
+var CRUDType;
+(function (CRUDType) {
+    CRUDType["create"] = "create";
+    CRUDType["update"] = "update";
+    CRUDType["delete"] = "delete";
+})(CRUDType || (CRUDType = {}));
 
 class ButtonComponent {
     constructor() {
@@ -155,11 +162,11 @@ class ButtonComponent {
         this.clickEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { config: "config" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<button\r\n  type=\"{{config.type}}\"\r\n  class=\"btn btn-primary\"\r\n  [disabled]=\"config.isDisabled\"\r\n  [ngClass]=\"{'active': config.isActive,\r\n            'normal': config.designType === 'normal',\r\n            'contrast': config.designType === 'contrast'}\"\r\n  (click)=\"onButtonClick()\">\r\n    <div class=\"button-content\">\r\n      <ng-container *ngIf=\"config.iconValue\">\r\n      <i class=\"material-icons\" data-toggle=\"tooltip\" title=\"Delete\">{{config.iconValue}}</i>\r\n    </ng-container>\r\n    <span>{{ config.label }}</span>\r\n    </div>\r\n</button>\r\n", styles: ["button.btn.btn-primary{padding:.5rem 1rem;border:none;border-radius:50px;cursor:pointer;height:3rem}button.btn.btn-primary .button-content{display:flex;flex-direction:row;justify-content:center;align-items:center;height:100%;gap:10px}button.btn.btn-primary:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important;border-color:#666!important}button.btn.btn-primary.normal{background-color:#f6ad15;color:#fff}button.btn.btn-primary.normal:hover:not(:disabled){background-color:#e09a14}button.btn.btn-primary.contrast{color:#f6ad15;border:1px solid #d58f13}button.btn.btn-primary.contrast:hover:not(:disabled){background-color:#f4d87e;color:#1a1a1a}button.btn.btn-primary.active{background-color:#e09a14;color:#fff}button.btn.btn-primary.active:hover:not(:disabled){background-color:#e09a14;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { config: "config" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<button\n  type=\"{{config.type}}\"\n  class=\"btn btn-primary\"\n  [disabled]=\"config.isDisabled\"\n  [ngClass]=\"{'active': config.isActive,\n            'normal': config.designType === 'normal',\n            'contrast': config.designType === 'contrast'}\"\n  (click)=\"onButtonClick()\">\n    <div class=\"button-content\">\n      <ng-container *ngIf=\"config.iconValue\">\n      <i class=\"material-icons\" data-toggle=\"tooltip\" title=\"Delete\">{{config.iconValue}}</i>\n    </ng-container>\n    <span>{{ config.label }}</span>\n    </div>\n</button>\n", styles: ["button.btn.btn-primary{padding:.5rem 1rem;border:none;border-radius:50px;cursor:pointer;height:3rem}button.btn.btn-primary .button-content{display:flex;flex-direction:row;justify-content:center;align-items:center;height:100%}button.btn.btn-primary:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important;border-color:#666!important}button.btn.btn-primary.normal{background-color:#f6ad15;color:#fff}button.btn.btn-primary.normal:hover:not(:disabled){background-color:#e09a14}button.btn.btn-primary.contrast{color:#f6ad15;border:1px solid #d58f13}button.btn.btn-primary.contrast:hover:not(:disabled){background-color:#f4d87e;color:#1a1a1a}button.btn.btn-primary.active{background-color:#e09a14;color:#fff}button.btn.btn-primary.active:hover:not(:disabled){background-color:#e09a14;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-button', standalone: true, imports: [CommonModule], template: "<button\r\n  type=\"{{config.type}}\"\r\n  class=\"btn btn-primary\"\r\n  [disabled]=\"config.isDisabled\"\r\n  [ngClass]=\"{'active': config.isActive,\r\n            'normal': config.designType === 'normal',\r\n            'contrast': config.designType === 'contrast'}\"\r\n  (click)=\"onButtonClick()\">\r\n    <div class=\"button-content\">\r\n      <ng-container *ngIf=\"config.iconValue\">\r\n      <i class=\"material-icons\" data-toggle=\"tooltip\" title=\"Delete\">{{config.iconValue}}</i>\r\n    </ng-container>\r\n    <span>{{ config.label }}</span>\r\n    </div>\r\n</button>\r\n", styles: ["button.btn.btn-primary{padding:.5rem 1rem;border:none;border-radius:50px;cursor:pointer;height:3rem}button.btn.btn-primary .button-content{display:flex;flex-direction:row;justify-content:center;align-items:center;height:100%;gap:10px}button.btn.btn-primary:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important;border-color:#666!important}button.btn.btn-primary.normal{background-color:#f6ad15;color:#fff}button.btn.btn-primary.normal:hover:not(:disabled){background-color:#e09a14}button.btn.btn-primary.contrast{color:#f6ad15;border:1px solid #d58f13}button.btn.btn-primary.contrast:hover:not(:disabled){background-color:#f4d87e;color:#1a1a1a}button.btn.btn-primary.active{background-color:#e09a14;color:#fff}button.btn.btn-primary.active:hover:not(:disabled){background-color:#e09a14;color:#fff}\n"] }]
+            args: [{ selector: 'app-button', standalone: true, imports: [CommonModule], template: "<button\n  type=\"{{config.type}}\"\n  class=\"btn btn-primary\"\n  [disabled]=\"config.isDisabled\"\n  [ngClass]=\"{'active': config.isActive,\n            'normal': config.designType === 'normal',\n            'contrast': config.designType === 'contrast'}\"\n  (click)=\"onButtonClick()\">\n    <div class=\"button-content\">\n      <ng-container *ngIf=\"config.iconValue\">\n      <i class=\"material-icons\" data-toggle=\"tooltip\" title=\"Delete\">{{config.iconValue}}</i>\n    </ng-container>\n    <span>{{ config.label }}</span>\n    </div>\n</button>\n", styles: ["button.btn.btn-primary{padding:.5rem 1rem;border:none;border-radius:50px;cursor:pointer;height:3rem}button.btn.btn-primary .button-content{display:flex;flex-direction:row;justify-content:center;align-items:center;height:100%}button.btn.btn-primary:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important;border-color:#666!important}button.btn.btn-primary.normal{background-color:#f6ad15;color:#fff}button.btn.btn-primary.normal:hover:not(:disabled){background-color:#e09a14}button.btn.btn-primary.contrast{color:#f6ad15;border:1px solid #d58f13}button.btn.btn-primary.contrast:hover:not(:disabled){background-color:#f4d87e;color:#1a1a1a}button.btn.btn-primary.active{background-color:#e09a14;color:#fff}button.btn.btn-primary.active:hover:not(:disabled){background-color:#e09a14;color:#fff}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }], clickEvent: [{
@@ -351,7 +358,7 @@ class InputComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputComponent),
                 multi: true
-            }], ngImport: i0, template: "<div class=\"input-item\" [ngClass]=\"config.direction\">\r\n  <label *ngIf=\"config.label\">\r\n    {{ config.label }}\r\n    <span *ngIf=\"config.required\" class=\"required-indicator\">*</span>\r\n  </label>\r\n\r\n  <div class=\"input-container\">\r\n    <input *ngIf=\"config.type !== 'textarea' && config.type !== 'richText' && config.type !== 'image'\"\r\n      [type]=\"config.type\"\r\n      [name]=\"config.name\"\r\n      [required]=\"config.required\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder] = \"config.placeholder\"\r\n      [ngClass]=\"{'input-error': !config.isValid}\">\r\n    <textarea *ngIf=\"config.type === 'textarea'\"\r\n        [name]=\"config.name\"\r\n        [required]=\"config.required\"\r\n        [(ngModel)]=\"value\"\r\n        [placeholder] = \"config.placeholder\"\r\n        [ngClass]=\"{'input-error': !config.isValid}\">\r\n    </textarea>\r\n    <i *ngIf=\"!config.isValid\" class=\"material-icons warning-icon\">error</i>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.type === 'image'\">\r\n    <img *ngIf=\"value\" [src]=\"value\" alt=\"Selected Image\" class=\"preview-image\"/>\r\n  </div>\r\n</div>\r\n", styles: [".input-item{display:flex;width:100%;gap:10px}.input-item .input-container{display:flex;width:inherit}.input-item .input-container .input-error{border-color:red}.input-item label{display:flex;align-items:center}.input-item.horizontal{flex-direction:row}.input-item.horizontal label{width:30%}.input-item.vertical{flex-direction:column}.input-item .preview-image{max-width:150px;max-height:150px;border:1px solid #ccc;margin-top:8px}.input-item .required-indicator,.input-item .warning-icon{display:flex;align-items:center;color:red;margin-left:4px}.input-item .warning-icon{font-weight:700}.input-item input,.input-item textarea{padding:.5rem;border:1px solid #ccc;border-radius:.25rem;width:-webkit-fill-available}.input-item quill-editor{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+            }], ngImport: i0, template: "<div class=\"input-item\" [ngClass]=\"config.direction\">\n  <label *ngIf=\"config.label\">\n    {{ config.label }}\n    <span *ngIf=\"config.required\" class=\"required-indicator\">*</span>\n  </label>\n\n  <div class=\"input-container\">\n    <input *ngIf=\"config.type !== 'textarea' && config.type !== 'richText' && config.type !== 'image'\"\n      [type]=\"config.type\"\n      [name]=\"config.name\"\n      [required]=\"config.required\"\n      [(ngModel)]=\"value\"\n      [placeholder] = \"config.placeholder\"\n      [ngClass]=\"{'input-error': !config.isValid}\">\n    <textarea *ngIf=\"config.type === 'textarea'\"\n        [name]=\"config.name\"\n        [required]=\"config.required\"\n        [(ngModel)]=\"value\"\n        [placeholder] = \"config.placeholder\"\n        [ngClass]=\"{'input-error': !config.isValid}\">\n    </textarea>\n    <i *ngIf=\"!config.isValid\" class=\"material-icons warning-icon\">error</i>\n  </div>\n\n  <div *ngIf=\"config.type === 'image'\">\n    <img *ngIf=\"value\" [src]=\"value\" alt=\"Selected Image\" class=\"preview-image\"/>\n  </div>\n</div>\n", styles: [".input-item{display:flex;width:100%;gap:10px}.input-item .input-container{display:flex;width:inherit}.input-item .input-container .input-error{border-color:red}.input-item label{display:flex;align-items:center}.input-item.horizontal{flex-direction:row}.input-item.horizontal label{width:30%}.input-item.vertical{flex-direction:column}.input-item .preview-image{max-width:150px;max-height:150px;border:1px solid #ccc;margin-top:8px}.input-item .required-indicator,.input-item .warning-icon{display:flex;align-items:center;color:red;margin-left:4px}.input-item .warning-icon{font-weight:700}.input-item input,.input-item textarea{padding:.5rem;border:1px solid #ccc;border-radius:.25rem;width:-webkit-fill-available}.input-item quill-editor{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -359,14 +366,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputComponent),
                             multi: true
-                        }], imports: [CommonModule, FormsModule], template: "<div class=\"input-item\" [ngClass]=\"config.direction\">\r\n  <label *ngIf=\"config.label\">\r\n    {{ config.label }}\r\n    <span *ngIf=\"config.required\" class=\"required-indicator\">*</span>\r\n  </label>\r\n\r\n  <div class=\"input-container\">\r\n    <input *ngIf=\"config.type !== 'textarea' && config.type !== 'richText' && config.type !== 'image'\"\r\n      [type]=\"config.type\"\r\n      [name]=\"config.name\"\r\n      [required]=\"config.required\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder] = \"config.placeholder\"\r\n      [ngClass]=\"{'input-error': !config.isValid}\">\r\n    <textarea *ngIf=\"config.type === 'textarea'\"\r\n        [name]=\"config.name\"\r\n        [required]=\"config.required\"\r\n        [(ngModel)]=\"value\"\r\n        [placeholder] = \"config.placeholder\"\r\n        [ngClass]=\"{'input-error': !config.isValid}\">\r\n    </textarea>\r\n    <i *ngIf=\"!config.isValid\" class=\"material-icons warning-icon\">error</i>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.type === 'image'\">\r\n    <img *ngIf=\"value\" [src]=\"value\" alt=\"Selected Image\" class=\"preview-image\"/>\r\n  </div>\r\n</div>\r\n", styles: [".input-item{display:flex;width:100%;gap:10px}.input-item .input-container{display:flex;width:inherit}.input-item .input-container .input-error{border-color:red}.input-item label{display:flex;align-items:center}.input-item.horizontal{flex-direction:row}.input-item.horizontal label{width:30%}.input-item.vertical{flex-direction:column}.input-item .preview-image{max-width:150px;max-height:150px;border:1px solid #ccc;margin-top:8px}.input-item .required-indicator,.input-item .warning-icon{display:flex;align-items:center;color:red;margin-left:4px}.input-item .warning-icon{font-weight:700}.input-item input,.input-item textarea{padding:.5rem;border:1px solid #ccc;border-radius:.25rem;width:-webkit-fill-available}.input-item quill-editor{width:100%}\n"] }]
+                        }], imports: [CommonModule, FormsModule], template: "<div class=\"input-item\" [ngClass]=\"config.direction\">\n  <label *ngIf=\"config.label\">\n    {{ config.label }}\n    <span *ngIf=\"config.required\" class=\"required-indicator\">*</span>\n  </label>\n\n  <div class=\"input-container\">\n    <input *ngIf=\"config.type !== 'textarea' && config.type !== 'richText' && config.type !== 'image'\"\n      [type]=\"config.type\"\n      [name]=\"config.name\"\n      [required]=\"config.required\"\n      [(ngModel)]=\"value\"\n      [placeholder] = \"config.placeholder\"\n      [ngClass]=\"{'input-error': !config.isValid}\">\n    <textarea *ngIf=\"config.type === 'textarea'\"\n        [name]=\"config.name\"\n        [required]=\"config.required\"\n        [(ngModel)]=\"value\"\n        [placeholder] = \"config.placeholder\"\n        [ngClass]=\"{'input-error': !config.isValid}\">\n    </textarea>\n    <i *ngIf=\"!config.isValid\" class=\"material-icons warning-icon\">error</i>\n  </div>\n\n  <div *ngIf=\"config.type === 'image'\">\n    <img *ngIf=\"value\" [src]=\"value\" alt=\"Selected Image\" class=\"preview-image\"/>\n  </div>\n</div>\n", styles: [".input-item{display:flex;width:100%;gap:10px}.input-item .input-container{display:flex;width:inherit}.input-item .input-container .input-error{border-color:red}.input-item label{display:flex;align-items:center}.input-item.horizontal{flex-direction:row}.input-item.horizontal label{width:30%}.input-item.vertical{flex-direction:column}.input-item .preview-image{max-width:150px;max-height:150px;border:1px solid #ccc;margin-top:8px}.input-item .required-indicator,.input-item .warning-icon{display:flex;align-items:center;color:red;margin-left:4px}.input-item .warning-icon{font-weight:700}.input-item input,.input-item textarea{padding:.5rem;border:1px solid #ccc;border-radius:.25rem;width:-webkit-fill-available}.input-item quill-editor{width:100%}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }] } });
 
 class LoadingComponent {
     constructor() {
-        this.size = LoadingSize.Medium;
+        this.size = Size.Medium;
         this.imageSrc = LoadingType.black;
         this.loadingImage = 'https://innocons.s3.ap-southeast-1.amazonaws.com/wp-content/uploads/2024/10/13083249/Loader-White.gif';
     }
@@ -384,11 +391,11 @@ class LoadingComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoadingComponent, isStandalone: true, selector: "app-loading", inputs: { size: "size", imageSrc: "imageSrc" }, ngImport: i0, template: "<div [ngClass]=\"size\" class=\"loading-content\">\r\n  <img [src]=\"loadingImage\" />\r\n</div>\r\n", styles: [":host{width:100%;height:100%;display:table;text-align:center}.loading-content{display:table-cell;vertical-align:middle}.xbig img{width:256px;height:256px}.big img{width:128px;height:128px}.medium img{width:64px;height:64px}.small img{width:32px;height:32px}.xsmall img{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoadingComponent, isStandalone: true, selector: "app-loading", inputs: { size: "size", imageSrc: "imageSrc" }, ngImport: i0, template: "<div [ngClass]=\"size\" class=\"loading-content\">\n  <img [src]=\"loadingImage\" />\n</div>\n", styles: [":host{width:100%;height:100%;display:table;text-align:center}.loading-content{display:table-cell;vertical-align:middle}.xbig img{width:256px;height:256px}.big img{width:128px;height:128px}.medium img{width:64px;height:64px}.small img{width:32px;height:32px}.xsmall img{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loading', standalone: true, imports: [CommonModule], template: "<div [ngClass]=\"size\" class=\"loading-content\">\r\n  <img [src]=\"loadingImage\" />\r\n</div>\r\n", styles: [":host{width:100%;height:100%;display:table;text-align:center}.loading-content{display:table-cell;vertical-align:middle}.xbig img{width:256px;height:256px}.big img{width:128px;height:128px}.medium img{width:64px;height:64px}.small img{width:32px;height:32px}.xsmall img{width:16px;height:16px}\n"] }]
+            args: [{ selector: 'app-loading', standalone: true, imports: [CommonModule], template: "<div [ngClass]=\"size\" class=\"loading-content\">\n  <img [src]=\"loadingImage\" />\n</div>\n", styles: [":host{width:100%;height:100%;display:table;text-align:center}.loading-content{display:table-cell;vertical-align:middle}.xbig img{width:256px;height:256px}.big img{width:128px;height:128px}.medium img{width:64px;height:64px}.small img{width:32px;height:32px}.xsmall img{width:16px;height:16px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { size: [{
                 type: Input
             }], imageSrc: [{
@@ -571,6 +578,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+function isDefined(obj) {
+    return obj !== undefined && obj !== null;
+}
+function isNullOrWhilespace(obj) {
+    return !isDefined(obj) || obj.trim().length === 0;
+}
+function groupBy(arr, key) {
+    return arr.reduce((groups, item) => {
+        (groups[key(item)] ||= []).push(item);
+        return groups;
+    }, {});
+}
+function withValuesOf(value, callback) {
+    Object.values(value).forEach(val => {
+        callback(val);
+    });
+}
+function as(obj) {
+    return obj;
+}
+function makeDestroy() {
+    const _destroy$ = new Subject();
+    _destroy$.next(null);
+    _destroy$.complete();
+    return (source) => source.pipe(takeUntil(_destroy$));
+}
+function mapEnumToDropdownOptions(enumObj) {
+    return Object.keys(enumObj).map(key => ({
+        label: enumObj[key],
+        value: key // The key of the enum (e.g., 'Item1')
+    }));
+}
 function truncateContent(content, maxLength) {
     // Remove HTML tags
     const plainText = content.replace(/<[^>]+>/g, ''); // This regex removes HTML tags
@@ -606,11 +645,11 @@ class ContentDesignComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentDesignComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContentDesignComponent, isStandalone: true, selector: "app-content-design", inputs: { content: "content", contentLength: "contentLength" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"content-designer\" [ngClass]=\"content.contentDirection\">\r\n  <ng-container *ngIf=\"content?.mapAddress; else imageTemplate\">\r\n    <div class=\"map\">\r\n      <iframe\r\n        width=\"600\"\r\n        height=\"450\"\r\n        style=\"border:0;\"\r\n        allowfullscreen=\"\"\r\n        loading=\"lazy\"\r\n        referrerpolicy=\"no-referrer-when-downgrade\"\r\n        [src]=\"sanitizedMapAddress\">\r\n      </iframe>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-template #imageTemplate>\r\n    <div *ngIf=\"content.coverImage\" class=\"image\">\r\n      <img [src]=\"content.coverImage\" alt=\"Cover Image\">\r\n    </div>\r\n  </ng-template>\r\n\r\n  <div class=\"content\">\r\n    <h2 *ngIf=\"content.title\">{{ content.title }}</h2>\r\n    <p *ngIf=\"content.content\">{{ truncateContent(content.content) }}</p>\r\n    <ng-container [ngTemplateOutlet]=\"content.template\"></ng-container>\r\n    <app-button *ngIf=\"content.button\" [config] = \"content.button\"\r\n    (clickEvent)=\"onButtonClick(content.button.action)\">\r\n    </app-button>\r\n  </div>\r\n</div>\r\n", styles: [".content-designer{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;align-items:center;text-align:center}.content-designer img{max-width:100%;height:auto}.content-designer .content{display:flex;flex-direction:column}.content-designer .content p{text-align:justify}.content-designer.left,.content-designer.right{flex-direction:row}.content-designer.left .image,.content-designer.left .content,.content-designer.right .image,.content-designer.right .content{flex:1;width:50%}.content-designer.left .content,.content-designer.right .content{text-align:justify}.content-designer.left .image,.content-designer.right .image{display:flex}.content-designer.left{flex-direction:row-reverse}.content-designer.left .image{justify-content:end}.content-designer.right .image{justify-content:start}.content-designer.up,.content-designer.down{flex-direction:column}.content-designer.up .image,.content-designer.down .image{width:100%;height:300px;overflow:hidden;justify-content:center;align-items:center}.content-designer.up .image image,.content-designer.down .image image{height:100%;width:auto;object-fit:cover}.content-designer.up{flex-direction:column-reverse}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContentDesignComponent, isStandalone: true, selector: "app-content-design", inputs: { content: "content", contentLength: "contentLength" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"content-designer\" [ngClass]=\"content.contentDirection\">\n  <ng-container *ngIf=\"content?.mapAddress; else imageTemplate\">\n    <div class=\"map\">\n      <iframe\n        width=\"600\"\n        height=\"450\"\n        style=\"border:0;\"\n        allowfullscreen=\"\"\n        loading=\"lazy\"\n        referrerpolicy=\"no-referrer-when-downgrade\"\n        [src]=\"sanitizedMapAddress\">\n      </iframe>\n    </div>\n  </ng-container>\n\n  <ng-template #imageTemplate>\n    <div *ngIf=\"content.coverImage\" class=\"image\">\n      <img [src]=\"content.coverImage\" alt=\"Cover Image\">\n    </div>\n  </ng-template>\n\n  <div class=\"content\">\n    <h2 *ngIf=\"content.title\">{{ content.title }}</h2>\n    <p *ngIf=\"content.content\">{{ truncateContent(content.content) }}</p>\n    <ng-container [ngTemplateOutlet]=\"content.template\"></ng-container>\n    <app-button *ngIf=\"content.button\" [config] = \"content.button\"\n    (clickEvent)=\"onButtonClick(content.button.action)\">\n    </app-button>\n  </div>\n</div>\n", styles: [".content-designer{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;align-items:center;text-align:center}.content-designer img{max-width:100%;height:auto}.content-designer .content{display:flex;flex-direction:column}.content-designer .content p{text-align:justify}.content-designer.left,.content-designer.right{flex-direction:row}.content-designer.left .image,.content-designer.left .content,.content-designer.right .image,.content-designer.right .content{flex:1;width:50%}.content-designer.left .content,.content-designer.right .content{text-align:justify}.content-designer.left .image,.content-designer.right .image{display:flex}.content-designer.left{flex-direction:row-reverse}.content-designer.left .image{justify-content:end}.content-designer.right .image{justify-content:start}.content-designer.up,.content-designer.down{flex-direction:column}.content-designer.up .image,.content-designer.down .image{width:100%;height:300px;overflow:hidden;justify-content:center;align-items:center}.content-designer.up .image image,.content-designer.down .image image{height:100%;width:auto;object-fit:cover}.content-designer.up{flex-direction:column-reverse}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentDesignComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-content-design', standalone: true, imports: [CommonModule, ButtonComponent], template: "<div class=\"content-designer\" [ngClass]=\"content.contentDirection\">\r\n  <ng-container *ngIf=\"content?.mapAddress; else imageTemplate\">\r\n    <div class=\"map\">\r\n      <iframe\r\n        width=\"600\"\r\n        height=\"450\"\r\n        style=\"border:0;\"\r\n        allowfullscreen=\"\"\r\n        loading=\"lazy\"\r\n        referrerpolicy=\"no-referrer-when-downgrade\"\r\n        [src]=\"sanitizedMapAddress\">\r\n      </iframe>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-template #imageTemplate>\r\n    <div *ngIf=\"content.coverImage\" class=\"image\">\r\n      <img [src]=\"content.coverImage\" alt=\"Cover Image\">\r\n    </div>\r\n  </ng-template>\r\n\r\n  <div class=\"content\">\r\n    <h2 *ngIf=\"content.title\">{{ content.title }}</h2>\r\n    <p *ngIf=\"content.content\">{{ truncateContent(content.content) }}</p>\r\n    <ng-container [ngTemplateOutlet]=\"content.template\"></ng-container>\r\n    <app-button *ngIf=\"content.button\" [config] = \"content.button\"\r\n    (clickEvent)=\"onButtonClick(content.button.action)\">\r\n    </app-button>\r\n  </div>\r\n</div>\r\n", styles: [".content-designer{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;align-items:center;text-align:center}.content-designer img{max-width:100%;height:auto}.content-designer .content{display:flex;flex-direction:column}.content-designer .content p{text-align:justify}.content-designer.left,.content-designer.right{flex-direction:row}.content-designer.left .image,.content-designer.left .content,.content-designer.right .image,.content-designer.right .content{flex:1;width:50%}.content-designer.left .content,.content-designer.right .content{text-align:justify}.content-designer.left .image,.content-designer.right .image{display:flex}.content-designer.left{flex-direction:row-reverse}.content-designer.left .image{justify-content:end}.content-designer.right .image{justify-content:start}.content-designer.up,.content-designer.down{flex-direction:column}.content-designer.up .image,.content-designer.down .image{width:100%;height:300px;overflow:hidden;justify-content:center;align-items:center}.content-designer.up .image image,.content-designer.down .image image{height:100%;width:auto;object-fit:cover}.content-designer.up{flex-direction:column-reverse}\n"] }]
+            args: [{ selector: 'app-content-design', standalone: true, imports: [CommonModule, ButtonComponent], template: "<div class=\"content-designer\" [ngClass]=\"content.contentDirection\">\n  <ng-container *ngIf=\"content?.mapAddress; else imageTemplate\">\n    <div class=\"map\">\n      <iframe\n        width=\"600\"\n        height=\"450\"\n        style=\"border:0;\"\n        allowfullscreen=\"\"\n        loading=\"lazy\"\n        referrerpolicy=\"no-referrer-when-downgrade\"\n        [src]=\"sanitizedMapAddress\">\n      </iframe>\n    </div>\n  </ng-container>\n\n  <ng-template #imageTemplate>\n    <div *ngIf=\"content.coverImage\" class=\"image\">\n      <img [src]=\"content.coverImage\" alt=\"Cover Image\">\n    </div>\n  </ng-template>\n\n  <div class=\"content\">\n    <h2 *ngIf=\"content.title\">{{ content.title }}</h2>\n    <p *ngIf=\"content.content\">{{ truncateContent(content.content) }}</p>\n    <ng-container [ngTemplateOutlet]=\"content.template\"></ng-container>\n    <app-button *ngIf=\"content.button\" [config] = \"content.button\"\n    (clickEvent)=\"onButtonClick(content.button.action)\">\n    </app-button>\n  </div>\n</div>\n", styles: [".content-designer{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;align-items:center;text-align:center}.content-designer img{max-width:100%;height:auto}.content-designer .content{display:flex;flex-direction:column}.content-designer .content p{text-align:justify}.content-designer.left,.content-designer.right{flex-direction:row}.content-designer.left .image,.content-designer.left .content,.content-designer.right .image,.content-designer.right .content{flex:1;width:50%}.content-designer.left .content,.content-designer.right .content{text-align:justify}.content-designer.left .image,.content-designer.right .image{display:flex}.content-designer.left{flex-direction:row-reverse}.content-designer.left .image{justify-content:end}.content-designer.right .image{justify-content:start}.content-designer.up,.content-designer.down{flex-direction:column}.content-designer.up .image,.content-designer.down .image{width:100%;height:300px;overflow:hidden;justify-content:center;align-items:center}.content-designer.up .image image,.content-designer.down .image image{height:100%;width:auto;object-fit:cover}.content-designer.up{flex-direction:column-reverse}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { content: [{
                 type: Input
             }], contentLength: [{
@@ -632,11 +671,11 @@ class CardsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardsComponent, isStandalone: true, selector: "app-cards", inputs: { cardContents: "cardContents" }, outputs: { getCardConfig: "getCardConfig" }, ngImport: i0, template: "<div class=\"cards-content\">\r\n  <ng-container *ngFor=\"let content of cardContents\">\r\n    <div class=\"card {{content.name}}\">\r\n      <app-content-design (clickEvent)=\"clickEvent($event)\"\r\n      [content] = \"content\">\r\n      </app-content-design>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".cards-content{display:flex;flex-direction:row;gap:20px}.content{width:33%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ContentDesignComponent, selector: "app-content-design", inputs: ["content", "contentLength"], outputs: ["clickEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardsComponent, isStandalone: true, selector: "app-cards", inputs: { cardContents: "cardContents" }, outputs: { getCardConfig: "getCardConfig" }, ngImport: i0, template: "<div class=\"cards-content\">\n  <ng-container *ngFor=\"let content of cardContents\">\n    <div class=\"card {{content.name}}\">\n      <app-content-design (clickEvent)=\"clickEvent($event)\"\n      [content] = \"content\">\n      </app-content-design>\n    </div>\n  </ng-container>\n</div>\n\n\n\n", styles: [".cards-content{display:flex;flex-direction:row;gap:20px}.content{width:33%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ContentDesignComponent, selector: "app-content-design", inputs: ["content", "contentLength"], outputs: ["clickEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cards', standalone: true, imports: [CommonModule, ContentDesignComponent], template: "<div class=\"cards-content\">\r\n  <ng-container *ngFor=\"let content of cardContents\">\r\n    <div class=\"card {{content.name}}\">\r\n      <app-content-design (clickEvent)=\"clickEvent($event)\"\r\n      [content] = \"content\">\r\n      </app-content-design>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".cards-content{display:flex;flex-direction:row;gap:20px}.content{width:33%}\n"] }]
+            args: [{ selector: 'app-cards', standalone: true, imports: [CommonModule, ContentDesignComponent], template: "<div class=\"cards-content\">\n  <ng-container *ngFor=\"let content of cardContents\">\n    <div class=\"card {{content.name}}\">\n      <app-content-design (clickEvent)=\"clickEvent($event)\"\n      [content] = \"content\">\n      </app-content-design>\n    </div>\n  </ng-container>\n</div>\n\n\n\n", styles: [".cards-content{display:flex;flex-direction:row;gap:20px}.content{width:33%}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { cardContents: [{
                 type: Input
             }], getCardConfig: [{
@@ -650,13 +689,14 @@ const selectionInputTypes = [InputType.checkbox, InputType.radio, InputType.sele
 
 class FormComponent {
     constructor() {
-        this.buttonConfig = {
-            label: "Submit"
-        };
+        this.inputConfigs = [];
+        this.buttonConfig = { label: "Submit" };
+        this.validationMessages = {};
         this.formSubmit = new EventEmitter();
         this.formChange = new EventEmitter();
+        // ✅ Expose InputGroupType to the template
+        this.InputGroupType = InputGroupType;
     }
-    // Define the editor configuration
     onSubmit() {
         if (this.formGroup.valid) {
             this.formSubmit.emit(this.formGroup.value);
@@ -670,28 +710,29 @@ class FormComponent {
     }
     checkFormConfigType(inputType) {
         if (inputType) {
-            if (textualInputTypes.includes(inputType)) {
+            if (textualInputTypes.includes(inputType))
                 return InputGroupType.textual;
-            }
-            if (selectionInputTypes.includes(inputType)) {
+            if (selectionInputTypes.includes(inputType))
                 return InputGroupType.selection;
-            }
-            if (inputType === InputType.file) {
+            if (inputType === InputType.file)
                 return InputGroupType.file;
-            }
-            if (inputType === InputType.datetime) {
+            if (inputType === InputType.datetime)
                 return InputGroupType.datetime;
-            }
         }
         return InputGroupType.textual;
     }
+    trackByFn(index, item) {
+        return item.name;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormComponent, isStandalone: true, selector: "app-form", inputs: { formGroup: "formGroup", inputConfigs: "inputConfigs", buttonConfig: "buttonConfig", validationMessages: "validationMessages" }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, ngImport: i0, template: "<form (ngSubmit)=\"onSubmit()\" #form=\"ngForm\" [formGroup]=\"formGroup\">\r\n  <ng-container *ngFor=\"let inputConfig of inputConfigs\">\r\n    <app-input *ngIf=\"checkFormConfigType(inputConfig.type) === 'textual'\"\r\n    [formControlName]=\"inputConfig.name\"\r\n    [config]=\"inputConfig\"\r\n    [required]=\"inputConfig.required\"></app-input>\r\n\r\n    <app-selection *ngIf=\"checkFormConfigType(inputConfig.type) === 'selection'\"\r\n    [formControlName]=\"inputConfig.name\"\r\n    [label]=\"inputConfig.label?? ''\"\r\n    [options]= \"inputConfig.options\">\r\n    </app-selection>\r\n\r\n    <app-file-selection\r\n    [formControlName]=\"inputConfig.name\"\r\n    *ngIf=\"checkFormConfigType(inputConfig.type) === 'file'\"\r\n    [label]=\"inputConfig.name \">\r\n    </app-file-selection>\r\n  </ng-container>\r\n\r\n  <app-button [config]=\"buttonConfig\"></app-button>\r\n</form>\r\n", styles: ["form{display:flex;flex-direction:column;gap:15px}label{display:block;margin-bottom:.5rem}input,textarea{width:100%;padding:.5rem;border:1px solid #ccc;border-radius:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["config"] }, { kind: "component", type: SelectionComponent, selector: "app-selection", inputs: ["label", "options", "selectedValue", "selectedValues", "isMultiSelect", "displayType"], outputs: ["selectedChange"] }, { kind: "component", type: FileSelectionComponent, selector: "app-file-selection", inputs: ["label", "chooseFileLabel", "imageUrl", "fileName"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormComponent, isStandalone: true, selector: "app-form", inputs: { formGroup: "formGroup", inputConfigs: "inputConfigs", buttonConfig: "buttonConfig", validationMessages: "validationMessages" }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, ngImport: i0, template: "<form (ngSubmit)=\"onSubmit()\" [formGroup]=\"formGroup\">\n  <ng-container *ngIf=\"inputConfigs && inputConfigs.length > 0; else noInputs\">\n    <ng-container *ngFor=\"let inputConfig of inputConfigs; trackBy: trackByFn\">\n\n      <!-- Input Field -->\n      <app-input\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.textual\"\n        [formControlName]=\"inputConfig.name\"\n        [config]=\"inputConfig\"\n        [required]=\"inputConfig.required\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-input>\n\n      <!-- Selection Field -->\n      <app-selection\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.selection\"\n        [formControlName]=\"inputConfig.name\"\n        [label]=\"inputConfig.label ?? ''\"\n        [options]=\"inputConfig.options\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-selection>\n\n      <!-- File Selection -->\n      <app-file-selection\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.file\"\n        [formControlName]=\"inputConfig.name\"\n        [label]=\"inputConfig.label ?? inputConfig.name\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-file-selection>\n\n      <!-- Validation Messages -->\n      <div *ngIf=\"formGroup.controls[inputConfig.name]?.invalid && formGroup.controls[inputConfig.name]?.touched\" class=\"error-message\">\n        {{ validationMessages[inputConfig.name] || 'Invalid input' }}\n      </div>\n\n    </ng-container>\n  </ng-container>\n\n  <!-- Submit Button -->\n  <app-button [config]=\"buttonConfig\"></app-button>\n</form>\n\n<!-- No Inputs Placeholder -->\n<ng-template #noInputs>\n  <p>No inputs configured.</p>\n</ng-template>\n", styles: ["form{display:flex;flex-direction:column;gap:15px}label{display:block;margin-bottom:.5rem}input,textarea{width:100%;padding:.5rem;border:1px solid #ccc;border-radius:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["config"] }, { kind: "component", type: SelectionComponent, selector: "app-selection", inputs: ["label", "options", "selectedValue", "selectedValues", "isMultiSelect", "displayType"], outputs: ["selectedChange"] }, { kind: "component", type: FileSelectionComponent, selector: "app-file-selection", inputs: ["label", "chooseFileLabel", "imageUrl", "fileName"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-form', standalone: true, imports: [CommonModule, InputComponent, SelectionComponent,
-                        FileSelectionComponent, ButtonComponent, FormsModule, ReactiveFormsModule], template: "<form (ngSubmit)=\"onSubmit()\" #form=\"ngForm\" [formGroup]=\"formGroup\">\r\n  <ng-container *ngFor=\"let inputConfig of inputConfigs\">\r\n    <app-input *ngIf=\"checkFormConfigType(inputConfig.type) === 'textual'\"\r\n    [formControlName]=\"inputConfig.name\"\r\n    [config]=\"inputConfig\"\r\n    [required]=\"inputConfig.required\"></app-input>\r\n\r\n    <app-selection *ngIf=\"checkFormConfigType(inputConfig.type) === 'selection'\"\r\n    [formControlName]=\"inputConfig.name\"\r\n    [label]=\"inputConfig.label?? ''\"\r\n    [options]= \"inputConfig.options\">\r\n    </app-selection>\r\n\r\n    <app-file-selection\r\n    [formControlName]=\"inputConfig.name\"\r\n    *ngIf=\"checkFormConfigType(inputConfig.type) === 'file'\"\r\n    [label]=\"inputConfig.name \">\r\n    </app-file-selection>\r\n  </ng-container>\r\n\r\n  <app-button [config]=\"buttonConfig\"></app-button>\r\n</form>\r\n", styles: ["form{display:flex;flex-direction:column;gap:15px}label{display:block;margin-bottom:.5rem}input,textarea{width:100%;padding:.5rem;border:1px solid #ccc;border-radius:.25rem}\n"] }]
+            args: [{ selector: 'app-form', standalone: true, imports: [
+                        CommonModule, InputComponent, SelectionComponent,
+                        FileSelectionComponent, ButtonComponent, FormsModule, ReactiveFormsModule
+                    ], template: "<form (ngSubmit)=\"onSubmit()\" [formGroup]=\"formGroup\">\n  <ng-container *ngIf=\"inputConfigs && inputConfigs.length > 0; else noInputs\">\n    <ng-container *ngFor=\"let inputConfig of inputConfigs; trackBy: trackByFn\">\n\n      <!-- Input Field -->\n      <app-input\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.textual\"\n        [formControlName]=\"inputConfig.name\"\n        [config]=\"inputConfig\"\n        [required]=\"inputConfig.required\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-input>\n\n      <!-- Selection Field -->\n      <app-selection\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.selection\"\n        [formControlName]=\"inputConfig.name\"\n        [label]=\"inputConfig.label ?? ''\"\n        [options]=\"inputConfig.options\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-selection>\n\n      <!-- File Selection -->\n      <app-file-selection\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.file\"\n        [formControlName]=\"inputConfig.name\"\n        [label]=\"inputConfig.label ?? inputConfig.name\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-file-selection>\n\n      <!-- Validation Messages -->\n      <div *ngIf=\"formGroup.controls[inputConfig.name]?.invalid && formGroup.controls[inputConfig.name]?.touched\" class=\"error-message\">\n        {{ validationMessages[inputConfig.name] || 'Invalid input' }}\n      </div>\n\n    </ng-container>\n  </ng-container>\n\n  <!-- Submit Button -->\n  <app-button [config]=\"buttonConfig\"></app-button>\n</form>\n\n<!-- No Inputs Placeholder -->\n<ng-template #noInputs>\n  <p>No inputs configured.</p>\n</ng-template>\n", styles: ["form{display:flex;flex-direction:column;gap:15px}label{display:block;margin-bottom:.5rem}input,textarea{width:100%;padding:.5rem;border:1px solid #ccc;border-radius:.25rem}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], inputConfigs: [{
@@ -708,6 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class ModalComponent {
     constructor() {
+        this.size = Size.Medium;
         this.okConfig = {
             label: "Ok"
         };
@@ -736,13 +778,15 @@ class ModalComponent {
         this.closeModal();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, isStandalone: true, selector: "app-modal", inputs: { modalEvent: "modalEvent" }, ngImport: i0, template: "<div class=\"modal-overlay\" (click)=\"handleOverlayClick($event)\" *ngIf=\"modalEvent?.isModalVisible\">\r\n  <div class=\"modal-content\" (click)=\"handleContentClick($event)\">\r\n    <div class=\"modal-header\">\r\n      <h2>{{modalEvent.title }}</h2>\r\n      <button class=\"close-btn\" (click)=\"closeModal()\">\r\n        <i class=\"material-icons\">close</i>\r\n      </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <div *ngIf=\"modalEvent.params && modalEvent.params['content']\">{{modalEvent.params['content'] }}</div>\r\n      <ng-container *ngTemplateOutlet=\"modalEvent.template; context: modalEvent.params\"></ng-container>\r\n      <div *ngIf=\"!modalEvent?.isDialog\" class=\"buttons\">\r\n        <app-button [config]=\"okConfig\" (clickEvent)=\"ok()\"></app-button>\r\n        <app-button [config]=\"cancelConfig\" (clickEvent)=\"cancel()\"></app-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".modal-overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:50}.modal-content{display:flex;flex-direction:column;gap:20px;background-color:#fff;color:#000;border-radius:.5rem;padding:2rem;max-width:70%;width:100%;max-height:calc(100vh - 10rem);height:100%}.modal-content.dark-mode{background-color:#27272a;color:#d1d5db}.modal-content .modal-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;position:sticky;top:0;background-color:inherit;z-index:10;border-bottom:1px solid #e5e7eb}.modal-content .modal-header h2{font-size:2rem;font-weight:700;margin:0}.modal-content .modal-header .close-btn{background-color:transparent;border:none;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;padding:0}.modal-content .modal-header .close-btn i.material-icons{font-size:24px;color:#888}.modal-content .modal-header .close-btn:hover i.material-icons{color:#444}.modal-content .modal-body{flex-grow:1;overflow-y:auto;padding:1rem 0;scrollbar-width:thin;scrollbar-color:#888 #f1f1f1}.modal-content .modal-body::-webkit-scrollbar{width:10px}.modal-content .modal-body::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.modal-content .modal-body::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;border:2px solid #f1f1f1}.modal-content .modal-body::-webkit-scrollbar-thumb:hover{background-color:#555}.modal-content .buttons{display:flex;justify-content:flex-end;gap:15px;padding:1.5rem 0;border-top:1px solid #e5e7eb}.modal-content .buttons app-button{flex:0 1 auto}p{color:#4b5563;margin-bottom:1.5rem}p.dark-mode{color:#d1d5db}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, isStandalone: true, selector: "app-modal", inputs: { modalEvent: "modalEvent", size: "size" }, ngImport: i0, template: "<div class=\"modal-overlay\" (click)=\"handleOverlayClick($event)\" *ngIf=\"modalEvent?.isModalVisible\">\n  <div class=\"modal-content\" [ngClass]=\"size\" (click)=\"handleContentClick($event)\">\n    <div class=\"modal-header\">\n      <h2>{{modalEvent.title }}</h2>\n      <button class=\"close-btn\" (click)=\"closeModal()\">\n        <i class=\"material-icons\">close</i>\n      </button>\n    </div>\n    <div class=\"modal-body\">\n      <div *ngIf=\"modalEvent.params && modalEvent.params['content']\">{{modalEvent.params['content'] }}</div>\n      <ng-container *ngTemplateOutlet=\"modalEvent.template; context: modalEvent.params\"></ng-container>\n      <div *ngIf=\"!modalEvent?.isDialog\" class=\"buttons\">\n        <app-button [config]=\"okConfig\" (clickEvent)=\"ok()\"></app-button>\n        <app-button [config]=\"cancelConfig\" (clickEvent)=\"cancel()\"></app-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".modal-overlay{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;width:100%;height:100%;background-color:#00000080;z-index:50}.modal-content{display:flex;flex-direction:column;background-color:#fff;color:#000;border-radius:8px;padding:2rem;width:100%;max-height:calc(100vh - 10rem)}.modal-content.small{width:30%;max-width:300px}.modal-content.medium{width:50%;max-width:600px}.modal-content.large{width:80%;max-width:900px}.modal-content.dark-mode{background-color:#27272a;color:#d1d5db}.modal-content .modal-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;position:sticky;top:0;background-color:inherit;z-index:10;border-bottom:1px solid #e5e7eb}.modal-content .modal-header h2{font-size:2rem;font-weight:700;margin:0}.modal-content .modal-header .close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;display:flex;align-items:center}.modal-content .modal-header .close-btn i.material-icons{font-size:24px;color:#888;transition:color .2s}.modal-content .modal-header .close-btn:hover i.material-icons{color:#444}.modal-content .modal-body{flex-grow:1;overflow-y:auto;padding:1rem 0;scrollbar-width:thin;scrollbar-color:#888 #f1f1f1}.modal-content .modal-body::-webkit-scrollbar{width:10px}.modal-content .modal-body::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.modal-content .modal-body::-webkit-scrollbar-thumb{background:#888;border-radius:10px;border:2px solid #f1f1f1;-webkit-transition:background .2s;transition:background .2s}.modal-content .modal-body::-webkit-scrollbar-thumb:hover{background:#555}.modal-content .buttons{display:flex;justify-content:flex-end;gap:15px;padding:1.5rem 0;border-top:1px solid #e5e7eb}p{color:#4b5563;margin-bottom:1.5rem}.dark-mode p{color:#d1d5db}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-modal', standalone: true, imports: [CommonModule, ButtonComponent], template: "<div class=\"modal-overlay\" (click)=\"handleOverlayClick($event)\" *ngIf=\"modalEvent?.isModalVisible\">\r\n  <div class=\"modal-content\" (click)=\"handleContentClick($event)\">\r\n    <div class=\"modal-header\">\r\n      <h2>{{modalEvent.title }}</h2>\r\n      <button class=\"close-btn\" (click)=\"closeModal()\">\r\n        <i class=\"material-icons\">close</i>\r\n      </button>\r\n    </div>\r\n    <div class=\"modal-body\">\r\n      <div *ngIf=\"modalEvent.params && modalEvent.params['content']\">{{modalEvent.params['content'] }}</div>\r\n      <ng-container *ngTemplateOutlet=\"modalEvent.template; context: modalEvent.params\"></ng-container>\r\n      <div *ngIf=\"!modalEvent?.isDialog\" class=\"buttons\">\r\n        <app-button [config]=\"okConfig\" (clickEvent)=\"ok()\"></app-button>\r\n        <app-button [config]=\"cancelConfig\" (clickEvent)=\"cancel()\"></app-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".modal-overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:50}.modal-content{display:flex;flex-direction:column;gap:20px;background-color:#fff;color:#000;border-radius:.5rem;padding:2rem;max-width:70%;width:100%;max-height:calc(100vh - 10rem);height:100%}.modal-content.dark-mode{background-color:#27272a;color:#d1d5db}.modal-content .modal-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;position:sticky;top:0;background-color:inherit;z-index:10;border-bottom:1px solid #e5e7eb}.modal-content .modal-header h2{font-size:2rem;font-weight:700;margin:0}.modal-content .modal-header .close-btn{background-color:transparent;border:none;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;padding:0}.modal-content .modal-header .close-btn i.material-icons{font-size:24px;color:#888}.modal-content .modal-header .close-btn:hover i.material-icons{color:#444}.modal-content .modal-body{flex-grow:1;overflow-y:auto;padding:1rem 0;scrollbar-width:thin;scrollbar-color:#888 #f1f1f1}.modal-content .modal-body::-webkit-scrollbar{width:10px}.modal-content .modal-body::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.modal-content .modal-body::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;border:2px solid #f1f1f1}.modal-content .modal-body::-webkit-scrollbar-thumb:hover{background-color:#555}.modal-content .buttons{display:flex;justify-content:flex-end;gap:15px;padding:1.5rem 0;border-top:1px solid #e5e7eb}.modal-content .buttons app-button{flex:0 1 auto}p{color:#4b5563;margin-bottom:1.5rem}p.dark-mode{color:#d1d5db}\n"] }]
+            args: [{ selector: 'app-modal', standalone: true, imports: [CommonModule, ButtonComponent], template: "<div class=\"modal-overlay\" (click)=\"handleOverlayClick($event)\" *ngIf=\"modalEvent?.isModalVisible\">\n  <div class=\"modal-content\" [ngClass]=\"size\" (click)=\"handleContentClick($event)\">\n    <div class=\"modal-header\">\n      <h2>{{modalEvent.title }}</h2>\n      <button class=\"close-btn\" (click)=\"closeModal()\">\n        <i class=\"material-icons\">close</i>\n      </button>\n    </div>\n    <div class=\"modal-body\">\n      <div *ngIf=\"modalEvent.params && modalEvent.params['content']\">{{modalEvent.params['content'] }}</div>\n      <ng-container *ngTemplateOutlet=\"modalEvent.template; context: modalEvent.params\"></ng-container>\n      <div *ngIf=\"!modalEvent?.isDialog\" class=\"buttons\">\n        <app-button [config]=\"okConfig\" (clickEvent)=\"ok()\"></app-button>\n        <app-button [config]=\"cancelConfig\" (clickEvent)=\"cancel()\"></app-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".modal-overlay{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;width:100%;height:100%;background-color:#00000080;z-index:50}.modal-content{display:flex;flex-direction:column;background-color:#fff;color:#000;border-radius:8px;padding:2rem;width:100%;max-height:calc(100vh - 10rem)}.modal-content.small{width:30%;max-width:300px}.modal-content.medium{width:50%;max-width:600px}.modal-content.large{width:80%;max-width:900px}.modal-content.dark-mode{background-color:#27272a;color:#d1d5db}.modal-content .modal-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;position:sticky;top:0;background-color:inherit;z-index:10;border-bottom:1px solid #e5e7eb}.modal-content .modal-header h2{font-size:2rem;font-weight:700;margin:0}.modal-content .modal-header .close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;display:flex;align-items:center}.modal-content .modal-header .close-btn i.material-icons{font-size:24px;color:#888;transition:color .2s}.modal-content .modal-header .close-btn:hover i.material-icons{color:#444}.modal-content .modal-body{flex-grow:1;overflow-y:auto;padding:1rem 0;scrollbar-width:thin;scrollbar-color:#888 #f1f1f1}.modal-content .modal-body::-webkit-scrollbar{width:10px}.modal-content .modal-body::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.modal-content .modal-body::-webkit-scrollbar-thumb{background:#888;border-radius:10px;border:2px solid #f1f1f1;-webkit-transition:background .2s;transition:background .2s}.modal-content .modal-body::-webkit-scrollbar-thumb:hover{background:#555}.modal-content .buttons{display:flex;justify-content:flex-end;gap:15px;padding:1.5rem 0;border-top:1px solid #e5e7eb}p{color:#4b5563;margin-bottom:1.5rem}.dark-mode p{color:#d1d5db}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { modalEvent: [{
                 type: Input
+            }], size: [{
+                type: Input
             }] } });
 
 class PaginatorComponent {
@@ -752,7 +796,8 @@ class PaginatorComponent {
             label: 'Go to page',
             direction: InputDirection.horizontal,
             name: 'inputConfig',
-            required: false
+            required: false,
+            validator: ''
         };
         this.previousButtonConfig = {
             iconValue: 'chevron_left',
@@ -844,11 +889,11 @@ class PaginatorComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PaginatorComponent, isStandalone: true, selector: "app-paginator", inputs: { totalRecords: "totalRecords" }, outputs: { paginator: "paginator" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-footer\">\r\n  <div class=\"number-of-page\">\r\n    <app-selection [options] = \"itemsPerPageList\"\r\n                  [selectedValue]=\"this.itemsPerPage\"\r\n                  (selectedChange) = \"onChangeNumberOfPage($event)\">\r\n    </app-selection>\r\n    <app-input [config]=\"inputConfig\"></app-input>\r\n  </div>\r\n  <div class=\"paginator\">\r\n    <app-button (clickEvent)=\"selectPage(selectedPage - 1)\"\r\n                [config]=\"previousButtonConfig\"/>\r\n\r\n    <!-- Page Numbers -->\r\n    <ng-container *ngFor=\"let page of pageNumbers\">\r\n      <app-button\r\n        (clickEvent)=\"selectPage(page)\"\r\n        [config]=\"getPageButtonConfig(page)\">\r\n      </app-button>\r\n    </ng-container>\r\n\r\n    <!-- Next Button -->\r\n    <app-button (clickEvent)=\"selectPage(selectedPage + 1)\"\r\n                [config]=\"nextButtonConfig\"/>\r\n  </div>\r\n</div>\r\n", styles: ["body{color:#566787;background:#f5f5f5;font-family:Varela Round,sans-serif;font-size:13px}.table-footer{display:flex}.table-footer .number-of-page{width:70%;display:flex;align-items:center;gap:20px}.table-footer .paginator{display:flex;justify-content:flex-end;width:100%}.table-footer .paginator app-button{margin:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }, { kind: "component", type: SelectionComponent, selector: "app-selection", inputs: ["label", "options", "selectedValue", "selectedValues", "isMultiSelect", "displayType"], outputs: ["selectedChange"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["config"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PaginatorComponent, isStandalone: true, selector: "app-paginator", inputs: { totalRecords: "totalRecords" }, outputs: { paginator: "paginator" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-footer\">\n  <div class=\"number-of-page\">\n    <app-selection [options] = \"itemsPerPageList\"\n                  [selectedValue]=\"this.itemsPerPage\"\n                  (selectedChange) = \"onChangeNumberOfPage($event)\">\n    </app-selection>\n    <app-input [config]=\"inputConfig\"></app-input>\n  </div>\n  <div class=\"paginator\">\n    <app-button (clickEvent)=\"selectPage(selectedPage - 1)\"\n                [config]=\"previousButtonConfig\"/>\n\n    <!-- Page Numbers -->\n    <ng-container *ngFor=\"let page of pageNumbers\">\n      <app-button\n        (clickEvent)=\"selectPage(page)\"\n        [config]=\"getPageButtonConfig(page)\">\n      </app-button>\n    </ng-container>\n\n    <!-- Next Button -->\n    <app-button (clickEvent)=\"selectPage(selectedPage + 1)\"\n                [config]=\"nextButtonConfig\"/>\n  </div>\n</div>\n", styles: ["body{color:#566787;background:#f5f5f5;font-family:Varela Round,sans-serif;font-size:13px}.table-footer{display:flex;padding:10px 0}.table-footer .number-of-page{width:70%;display:flex;align-items:center;gap:20px}.table-footer .paginator{display:flex;justify-content:flex-end;width:100%}.table-footer .paginator app-button{margin:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }, { kind: "component", type: SelectionComponent, selector: "app-selection", inputs: ["label", "options", "selectedValue", "selectedValues", "isMultiSelect", "displayType"], outputs: ["selectedChange"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["config"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-paginator', standalone: true, imports: [CommonModule, ButtonComponent, SelectionComponent, InputComponent], template: "<div class=\"table-footer\">\r\n  <div class=\"number-of-page\">\r\n    <app-selection [options] = \"itemsPerPageList\"\r\n                  [selectedValue]=\"this.itemsPerPage\"\r\n                  (selectedChange) = \"onChangeNumberOfPage($event)\">\r\n    </app-selection>\r\n    <app-input [config]=\"inputConfig\"></app-input>\r\n  </div>\r\n  <div class=\"paginator\">\r\n    <app-button (clickEvent)=\"selectPage(selectedPage - 1)\"\r\n                [config]=\"previousButtonConfig\"/>\r\n\r\n    <!-- Page Numbers -->\r\n    <ng-container *ngFor=\"let page of pageNumbers\">\r\n      <app-button\r\n        (clickEvent)=\"selectPage(page)\"\r\n        [config]=\"getPageButtonConfig(page)\">\r\n      </app-button>\r\n    </ng-container>\r\n\r\n    <!-- Next Button -->\r\n    <app-button (clickEvent)=\"selectPage(selectedPage + 1)\"\r\n                [config]=\"nextButtonConfig\"/>\r\n  </div>\r\n</div>\r\n", styles: ["body{color:#566787;background:#f5f5f5;font-family:Varela Round,sans-serif;font-size:13px}.table-footer{display:flex}.table-footer .number-of-page{width:70%;display:flex;align-items:center;gap:20px}.table-footer .paginator{display:flex;justify-content:flex-end;width:100%}.table-footer .paginator app-button{margin:0 2px}\n"] }]
+            args: [{ selector: 'app-paginator', standalone: true, imports: [CommonModule, ButtonComponent, SelectionComponent, InputComponent], template: "<div class=\"table-footer\">\n  <div class=\"number-of-page\">\n    <app-selection [options] = \"itemsPerPageList\"\n                  [selectedValue]=\"this.itemsPerPage\"\n                  (selectedChange) = \"onChangeNumberOfPage($event)\">\n    </app-selection>\n    <app-input [config]=\"inputConfig\"></app-input>\n  </div>\n  <div class=\"paginator\">\n    <app-button (clickEvent)=\"selectPage(selectedPage - 1)\"\n                [config]=\"previousButtonConfig\"/>\n\n    <!-- Page Numbers -->\n    <ng-container *ngFor=\"let page of pageNumbers\">\n      <app-button\n        (clickEvent)=\"selectPage(page)\"\n        [config]=\"getPageButtonConfig(page)\">\n      </app-button>\n    </ng-container>\n\n    <!-- Next Button -->\n    <app-button (clickEvent)=\"selectPage(selectedPage + 1)\"\n                [config]=\"nextButtonConfig\"/>\n  </div>\n</div>\n", styles: ["body{color:#566787;background:#f5f5f5;font-family:Varela Round,sans-serif;font-size:13px}.table-footer{display:flex;padding:10px 0}.table-footer .number-of-page{width:70%;display:flex;align-items:center;gap:20px}.table-footer .paginator{display:flex;justify-content:flex-end;width:100%}.table-footer .paginator app-button{margin:0 2px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { totalRecords: [{
                 type: Input
             }], paginator: [{
@@ -874,11 +919,11 @@ class TableComponent {
         this.paginator.emit(paging);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { items: "items", columns: "columns", totalRecords: "totalRecords", tableName: "tableName", loadingState: "loadingState" }, outputs: { paginator: "paginator" }, queries: [{ propertyName: "bodyTemplate", first: true, predicate: ["bodyTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"container-xl table-wrapper\">\r\n  <div class=\"table-title\">\r\n      <h2><b>{{tableName }}</b></h2>\r\n  </div>\r\n  <div class=\"loading-wrapper\">\r\n    <ng-container *ngIf=\"!(loadingState | async); else loading; then table\">\r\n    </ng-container>\r\n  </div>\r\n  <app-paginator [totalRecords] = \"totalRecords\" (paginator)=\"changePaginator($event)\"></app-paginator>\r\n</div>\r\n\r\n<ng-template #loading>\r\n  <div class=\"loading-wrapper\">\r\n    <app-loading></app-loading>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #table>\r\n  <ng-container *ngIf=\"totalRecords == 0; then emptyContent; else tableContent\">\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  <p-table [value]=\"items\" class=\"table table-striped table-hover\">\r\n    <ng-template pTemplate=\"header\">\r\n      <tr>\r\n        <th>\r\n          <ng-content select=\"[selectAllCheckbox]\"></ng-content>\r\n        </th>\r\n        <ng-container *ngFor=\" let col of columns\">\r\n          <th>{{col.name }}</th>\r\n        </ng-container>\r\n      </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-item>\r\n      <ng-container [ngTemplateOutlet]=\"bodyTemplate\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\r\n    </ng-template>\r\n  </p-table>\r\n</ng-template>\r\n\r\n<ng-template #emptyContent>\r\n  <div class=\"no-record-message\">\r\n    <div>No records</div>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{width:100%}body{color:#566787;background:#f5f5f5;font-family:Varela Round,sans-serif;font-size:13px}.table-responsive{margin:30px 0}.table-wrapper{background:#fff;border-radius:3px;min-width:1000px;box-shadow:0 1px 1px #0000000d}.table-title{background:#435d7d;color:#fff;border-radius:3px 3px 0 0;padding:0 12px;display:flex}.table-title .table-name{width:70%}.table-title .table-add{width:30%;display:flex;align-items:center;justify-content:flex-end}.table-title .table-add a{cursor:pointer}.table-title h2{font-size:24px}.table-title .btn-group{float:right}.table-title .btn{color:#fff;float:right;font-size:13px;min-width:50px;border-radius:2px;border:none;outline:none!important;margin-left:10px}.table-title .btn i{float:left;font-size:21px;margin-right:5px}.table-title .btn span{float:left;margin-top:2px}::ng-deep .table tr th,::ng-deep .table tr td{border-color:#e9e9e9;padding:12px 15px;vertical-align:middle}::ng-deep .table tr th:first-child{width:60px;display:flex}::ng-deep .table tr th:last-child{width:150px}table.table-striped tbody tr:nth-of-type(odd){background-color:#fcfcfc}table.table-striped.table-hover tbody tr:hover{background:#f5f5f5}::ng-deep .table th{text-align:left}::ng-deep .table th i{font-size:13px;margin:0 5px;cursor:pointer}::ng-deep .table td:last-child i{opacity:.9;font-size:22px;margin:0 5px}::ng-deep .table td a{font-weight:700;color:#566787;display:inline-block;text-decoration:none;outline:none!important}.hint-text{float:left;margin-top:10px;font-size:13px}.no-record-message{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.excel{display:flex}.excel a{display:inline-flex;align-items:center}.loading-wrapper{height:calc(100vh - 220px);display:flex;flex-direction:column;width:100%;overflow-y:auto;overflow-x:hidden}.loading-wrapper::-webkit-scrollbar{width:12px}.loading-wrapper::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px;box-shadow:inset 0 0 5px #0000001a}.loading-wrapper::-webkit-scrollbar-thumb{background:#888;border-radius:10px;border:3px solid #f1f1f1;-webkit-transition:background .3s;transition:background .3s}.loading-wrapper::-webkit-scrollbar-thumb:hover{background:#555}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["size", "imageSrc"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["totalRecords"], outputs: ["paginator"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { items: "items", columns: "columns", totalRecords: "totalRecords", tableName: "tableName", loadingState: "loadingState" }, outputs: { paginator: "paginator" }, queries: [{ propertyName: "bodyTemplate", first: true, predicate: ["bodyTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"container-xl table-wrapper\">\n  <div class=\"table-title\">\n      <h2><b>{{tableName }}</b></h2>\n  </div>\n  <div class=\"loading-wrapper\">\n    <ng-container *ngIf=\"!(loadingState | async); else loading; then table\">\n    </ng-container>\n  </div>\n  <app-paginator [totalRecords] = \"totalRecords\" (paginator)=\"changePaginator($event)\"></app-paginator>\n</div>\n\n<ng-template #loading>\n  <div class=\"loading-wrapper\">\n    <app-loading></app-loading>\n  </div>\n</ng-template>\n\n<ng-template #table>\n  <ng-container *ngIf=\"totalRecords == 0; then emptyContent; else tableContent\">\n  </ng-container>\n</ng-template>\n\n<ng-template #tableContent>\n  <p-table [value]=\"items\" class=\"table table-striped table-hover\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th>\n          <ng-content select=\"[selectAllCheckbox]\"></ng-content>\n        </th>\n        <ng-container *ngFor=\" let col of columns\">\n          <th>{{col.name }}</th>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-item>\n      <ng-container [ngTemplateOutlet]=\"bodyTemplate\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n    </ng-template>\n  </p-table>\n</ng-template>\n\n<ng-template #emptyContent>\n  <div class=\"no-record-message\">\n    <div>No records</div>\n  </div>\n</ng-template>\n", styles: [":host{width:100%}body{color:#566787;background:#f5f5f5;font-family:Varela Round,sans-serif;font-size:13px}.table-responsive{margin:30px 0}.table-wrapper{background:#fff;border-radius:3px;box-shadow:0 1px 1px #0000000d}.table-title{background:#435d7d;color:#fff;border-radius:3px 3px 0 0;padding:0 12px;display:flex}.table-title .table-name{width:70%}.table-title .table-add{width:30%;display:flex;align-items:center;justify-content:flex-end}.table-title .table-add a{cursor:pointer}.table-title h2{font-size:24px}.table-title .btn-group{float:right}.table-title .btn{color:#fff;float:right;font-size:13px;min-width:50px;border-radius:2px;border:none;outline:none!important;margin-left:10px}.table-title .btn i{float:left;font-size:21px;margin-right:5px}.table-title .btn span{float:left;margin-top:2px}::ng-deep .table tr th,::ng-deep .table tr td{border-color:#e9e9e9;padding:12px 15px;vertical-align:middle}::ng-deep .table tr th:first-child{width:60px;display:flex}::ng-deep .table tr th:last-child{width:150px}table.table-striped tbody tr:nth-of-type(odd){background-color:#fcfcfc}table.table-striped.table-hover tbody tr:hover{background:#f5f5f5}::ng-deep .table th{text-align:left}::ng-deep .table th i{font-size:13px;margin:0 5px;cursor:pointer}::ng-deep .table td:last-child i{opacity:.9;font-size:22px;margin:0 5px}::ng-deep .table td a{font-weight:700;color:#566787;display:inline-block;text-decoration:none;outline:none!important}.hint-text{float:left;margin-top:10px;font-size:13px}.no-record-message{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.excel{display:flex}.excel a{display:inline-flex;align-items:center}.loading-wrapper{height:calc(100vh - 220px);display:flex;flex-direction:column;width:100%;overflow-y:auto;overflow-x:hidden}.loading-wrapper::-webkit-scrollbar{width:12px}.loading-wrapper::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px;box-shadow:inset 0 0 5px #0000001a}.loading-wrapper::-webkit-scrollbar-thumb{background:#888;border-radius:10px;border:3px solid #f1f1f1;-webkit-transition:background .3s;transition:background .3s}.loading-wrapper::-webkit-scrollbar-thumb:hover{background:#555}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["size", "imageSrc"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["totalRecords"], outputs: ["paginator"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table', standalone: true, imports: [CommonModule, TableModule, LoadingComponent, PaginatorComponent], template: "<div class=\"container-xl table-wrapper\">\r\n  <div class=\"table-title\">\r\n      <h2><b>{{tableName }}</b></h2>\r\n  </div>\r\n  <div class=\"loading-wrapper\">\r\n    <ng-container *ngIf=\"!(loadingState | async); else loading; then table\">\r\n    </ng-container>\r\n  </div>\r\n  <app-paginator [totalRecords] = \"totalRecords\" (paginator)=\"changePaginator($event)\"></app-paginator>\r\n</div>\r\n\r\n<ng-template #loading>\r\n  <div class=\"loading-wrapper\">\r\n    <app-loading></app-loading>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #table>\r\n  <ng-container *ngIf=\"totalRecords == 0; then emptyContent; else tableContent\">\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  <p-table [value]=\"items\" class=\"table table-striped table-hover\">\r\n    <ng-template pTemplate=\"header\">\r\n      <tr>\r\n        <th>\r\n          <ng-content select=\"[selectAllCheckbox]\"></ng-content>\r\n        </th>\r\n        <ng-container *ngFor=\" let col of columns\">\r\n          <th>{{col.name }}</th>\r\n        </ng-container>\r\n      </tr>\r\n    </ng-template>\r\n    <ng-template pTemplate=\"body\" let-item>\r\n      <ng-container [ngTemplateOutlet]=\"bodyTemplate\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\r\n    </ng-template>\r\n  </p-table>\r\n</ng-template>\r\n\r\n<ng-template #emptyContent>\r\n  <div class=\"no-record-message\">\r\n    <div>No records</div>\r\n  </div>\r\n</ng-template>\r\n", styles: [":host{width:100%}body{color:#566787;background:#f5f5f5;font-family:Varela Round,sans-serif;font-size:13px}.table-responsive{margin:30px 0}.table-wrapper{background:#fff;border-radius:3px;min-width:1000px;box-shadow:0 1px 1px #0000000d}.table-title{background:#435d7d;color:#fff;border-radius:3px 3px 0 0;padding:0 12px;display:flex}.table-title .table-name{width:70%}.table-title .table-add{width:30%;display:flex;align-items:center;justify-content:flex-end}.table-title .table-add a{cursor:pointer}.table-title h2{font-size:24px}.table-title .btn-group{float:right}.table-title .btn{color:#fff;float:right;font-size:13px;min-width:50px;border-radius:2px;border:none;outline:none!important;margin-left:10px}.table-title .btn i{float:left;font-size:21px;margin-right:5px}.table-title .btn span{float:left;margin-top:2px}::ng-deep .table tr th,::ng-deep .table tr td{border-color:#e9e9e9;padding:12px 15px;vertical-align:middle}::ng-deep .table tr th:first-child{width:60px;display:flex}::ng-deep .table tr th:last-child{width:150px}table.table-striped tbody tr:nth-of-type(odd){background-color:#fcfcfc}table.table-striped.table-hover tbody tr:hover{background:#f5f5f5}::ng-deep .table th{text-align:left}::ng-deep .table th i{font-size:13px;margin:0 5px;cursor:pointer}::ng-deep .table td:last-child i{opacity:.9;font-size:22px;margin:0 5px}::ng-deep .table td a{font-weight:700;color:#566787;display:inline-block;text-decoration:none;outline:none!important}.hint-text{float:left;margin-top:10px;font-size:13px}.no-record-message{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.excel{display:flex}.excel a{display:inline-flex;align-items:center}.loading-wrapper{height:calc(100vh - 220px);display:flex;flex-direction:column;width:100%;overflow-y:auto;overflow-x:hidden}.loading-wrapper::-webkit-scrollbar{width:12px}.loading-wrapper::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px;box-shadow:inset 0 0 5px #0000001a}.loading-wrapper::-webkit-scrollbar-thumb{background:#888;border-radius:10px;border:3px solid #f1f1f1;-webkit-transition:background .3s;transition:background .3s}.loading-wrapper::-webkit-scrollbar-thumb:hover{background:#555}\n"] }]
+            args: [{ selector: 'app-table', standalone: true, imports: [CommonModule, TableModule, LoadingComponent, PaginatorComponent], template: "<div class=\"container-xl table-wrapper\">\n  <div class=\"table-title\">\n      <h2><b>{{tableName }}</b></h2>\n  </div>\n  <div class=\"loading-wrapper\">\n    <ng-container *ngIf=\"!(loadingState | async); else loading; then table\">\n    </ng-container>\n  </div>\n  <app-paginator [totalRecords] = \"totalRecords\" (paginator)=\"changePaginator($event)\"></app-paginator>\n</div>\n\n<ng-template #loading>\n  <div class=\"loading-wrapper\">\n    <app-loading></app-loading>\n  </div>\n</ng-template>\n\n<ng-template #table>\n  <ng-container *ngIf=\"totalRecords == 0; then emptyContent; else tableContent\">\n  </ng-container>\n</ng-template>\n\n<ng-template #tableContent>\n  <p-table [value]=\"items\" class=\"table table-striped table-hover\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th>\n          <ng-content select=\"[selectAllCheckbox]\"></ng-content>\n        </th>\n        <ng-container *ngFor=\" let col of columns\">\n          <th>{{col.name }}</th>\n        </ng-container>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-item>\n      <ng-container [ngTemplateOutlet]=\"bodyTemplate\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n    </ng-template>\n  </p-table>\n</ng-template>\n\n<ng-template #emptyContent>\n  <div class=\"no-record-message\">\n    <div>No records</div>\n  </div>\n</ng-template>\n", styles: [":host{width:100%}body{color:#566787;background:#f5f5f5;font-family:Varela Round,sans-serif;font-size:13px}.table-responsive{margin:30px 0}.table-wrapper{background:#fff;border-radius:3px;box-shadow:0 1px 1px #0000000d}.table-title{background:#435d7d;color:#fff;border-radius:3px 3px 0 0;padding:0 12px;display:flex}.table-title .table-name{width:70%}.table-title .table-add{width:30%;display:flex;align-items:center;justify-content:flex-end}.table-title .table-add a{cursor:pointer}.table-title h2{font-size:24px}.table-title .btn-group{float:right}.table-title .btn{color:#fff;float:right;font-size:13px;min-width:50px;border-radius:2px;border:none;outline:none!important;margin-left:10px}.table-title .btn i{float:left;font-size:21px;margin-right:5px}.table-title .btn span{float:left;margin-top:2px}::ng-deep .table tr th,::ng-deep .table tr td{border-color:#e9e9e9;padding:12px 15px;vertical-align:middle}::ng-deep .table tr th:first-child{width:60px;display:flex}::ng-deep .table tr th:last-child{width:150px}table.table-striped tbody tr:nth-of-type(odd){background-color:#fcfcfc}table.table-striped.table-hover tbody tr:hover{background:#f5f5f5}::ng-deep .table th{text-align:left}::ng-deep .table th i{font-size:13px;margin:0 5px;cursor:pointer}::ng-deep .table td:last-child i{opacity:.9;font-size:22px;margin:0 5px}::ng-deep .table td a{font-weight:700;color:#566787;display:inline-block;text-decoration:none;outline:none!important}.hint-text{float:left;margin-top:10px;font-size:13px}.no-record-message{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.excel{display:flex}.excel a{display:inline-flex;align-items:center}.loading-wrapper{height:calc(100vh - 220px);display:flex;flex-direction:column;width:100%;overflow-y:auto;overflow-x:hidden}.loading-wrapper::-webkit-scrollbar{width:12px}.loading-wrapper::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px;box-shadow:inset 0 0 5px #0000001a}.loading-wrapper::-webkit-scrollbar-thumb{background:#888;border-radius:10px;border:3px solid #f1f1f1;-webkit-transition:background .3s;transition:background .3s}.loading-wrapper::-webkit-scrollbar-thumb:hover{background:#555}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
                 type: Input
             }], columns: [{
@@ -922,11 +967,11 @@ class FormatedTextComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormatedTextComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormatedTextComponent, isStandalone: true, selector: "app-formated-text", inputs: { content: "content" }, ngImport: i0, template: "<app-content-design [content] = \"content\"></app-content-design>\r\n<br/>\r\n<div [innerHTML]=\"safeContent\"></div>\r\n", styles: [""], dependencies: [{ kind: "component", type: ContentDesignComponent, selector: "app-content-design", inputs: ["content", "contentLength"], outputs: ["clickEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormatedTextComponent, isStandalone: true, selector: "app-formated-text", inputs: { content: "content" }, ngImport: i0, template: "<app-content-design [content] = \"content\"></app-content-design>\n<br/>\n<div [innerHTML]=\"safeContent\"></div>\n", styles: [""], dependencies: [{ kind: "component", type: ContentDesignComponent, selector: "app-content-design", inputs: ["content", "contentLength"], outputs: ["clickEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormatedTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-formated-text', standalone: true, imports: [ContentDesignComponent], template: "<app-content-design [content] = \"content\"></app-content-design>\r\n<br/>\r\n<div [innerHTML]=\"safeContent\"></div>\r\n" }]
+            args: [{ selector: 'app-formated-text', standalone: true, imports: [ContentDesignComponent], template: "<app-content-design [content] = \"content\"></app-content-design>\n<br/>\n<div [innerHTML]=\"safeContent\"></div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { content: [{
                 type: Input
             }] } });
@@ -936,11 +981,11 @@ class FooterComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FooterComponent, isStandalone: true, selector: "app-footer", ngImport: i0, template: "<footer class=\"footer\">\r\n  <div class=\"footer-container\">\r\n    <div class=\"footer-section\">\r\n      <h3>About Us</h3>\r\n      <p>We are a company dedicated to providing excellent services and products to our customers.</p>\r\n    </div>\r\n\r\n    <div class=\"footer-section\">\r\n      <h3>Quick Links</h3>\r\n      <ul>\r\n        <li><a href=\"#\">Home</a></li>\r\n        <li><a href=\"#\">Services</a></li>\r\n        <li><a href=\"#\">Contact</a></li>\r\n        <li><a href=\"#\">Privacy Policy</a></li>\r\n      </ul>\r\n    </div>\r\n\r\n    <div class=\"footer-section\">\r\n      <h3>Follow Us</h3>\r\n      <div class=\"social-icons\">\r\n        <a href=\"#\" aria-label=\"Facebook\"><i class=\"fab fa-facebook-f\"></i></a>\r\n        <a href=\"#\" aria-label=\"Twitter\"><i class=\"fab fa-twitter\"></i></a>\r\n        <a href=\"#\" aria-label=\"Instagram\"><i class=\"fab fa-instagram\"></i></a>\r\n        <a href=\"#\" aria-label=\"LinkedIn\"><i class=\"fab fa-linkedin-in\"></i></a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"footer-bottom\">\r\n    <p>&copy; 2024 Your Company. All Rights Reserved.</p>\r\n  </div>\r\n</footer>\r\n", styles: [".footer{background-color:#333;color:#fff;padding:20px 0;text-align:center;font-family:Roboto,sans-serif}.footer-container{display:flex;justify-content:space-around;flex-wrap:wrap;max-width:1200px;margin:0 auto}.footer-section{flex:1;margin:15px;min-width:200px}.footer-section h3{margin-bottom:15px;font-size:18px}.footer-section p,.footer-section ul,.footer-section a{font-size:14px;color:#ccc;text-decoration:none}.footer-section ul{list-style:none;padding:0}.footer-section ul li{margin:5px 0}.footer-section ul li a:hover{color:#fff}.social-icons{margin-top:10px}.social-icons a{display:inline-block;color:#ccc;margin:0 10px;font-size:20px}.social-icons a:hover{color:#fff}.footer-bottom{margin-top:20px;border-top:1px solid #444;padding-top:10px;font-size:12px}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FooterComponent, isStandalone: true, selector: "app-footer", ngImport: i0, template: "<footer class=\"footer\">\n  <div class=\"footer-container\">\n    <div class=\"footer-section\">\n      <h3>About Us</h3>\n      <p>We are a company dedicated to providing excellent services and products to our customers.</p>\n    </div>\n\n    <div class=\"footer-section\">\n      <h3>Quick Links</h3>\n      <ul>\n        <li><a href=\"#\">Home</a></li>\n        <li><a href=\"#\">Services</a></li>\n        <li><a href=\"#\">Contact</a></li>\n        <li><a href=\"#\">Privacy Policy</a></li>\n      </ul>\n    </div>\n\n    <div class=\"footer-section\">\n      <h3>Follow Us</h3>\n      <div class=\"social-icons\">\n        <a href=\"#\" aria-label=\"Facebook\"><i class=\"fab fa-facebook-f\"></i></a>\n        <a href=\"#\" aria-label=\"Twitter\"><i class=\"fab fa-twitter\"></i></a>\n        <a href=\"#\" aria-label=\"Instagram\"><i class=\"fab fa-instagram\"></i></a>\n        <a href=\"#\" aria-label=\"LinkedIn\"><i class=\"fab fa-linkedin-in\"></i></a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"footer-bottom\">\n    <p>&copy; 2024 Your Company. All Rights Reserved.</p>\n  </div>\n</footer>\n", styles: [".footer{background-color:#333;color:#fff;padding:20px 0;text-align:center;font-family:Roboto,sans-serif}.footer-container{display:flex;justify-content:space-around;flex-wrap:wrap;max-width:1200px;margin:0 auto}.footer-section{flex:1;margin:15px;min-width:200px}.footer-section h3{margin-bottom:15px;font-size:18px}.footer-section p,.footer-section ul,.footer-section a{font-size:14px;color:#ccc;text-decoration:none}.footer-section ul{list-style:none;padding:0}.footer-section ul li{margin:5px 0}.footer-section ul li a:hover{color:#fff}.social-icons{margin-top:10px}.social-icons a{display:inline-block;color:#ccc;margin:0 10px;font-size:20px}.social-icons a:hover{color:#fff}.footer-bottom{margin-top:20px;border-top:1px solid #444;padding-top:10px;font-size:12px}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-footer', standalone: true, template: "<footer class=\"footer\">\r\n  <div class=\"footer-container\">\r\n    <div class=\"footer-section\">\r\n      <h3>About Us</h3>\r\n      <p>We are a company dedicated to providing excellent services and products to our customers.</p>\r\n    </div>\r\n\r\n    <div class=\"footer-section\">\r\n      <h3>Quick Links</h3>\r\n      <ul>\r\n        <li><a href=\"#\">Home</a></li>\r\n        <li><a href=\"#\">Services</a></li>\r\n        <li><a href=\"#\">Contact</a></li>\r\n        <li><a href=\"#\">Privacy Policy</a></li>\r\n      </ul>\r\n    </div>\r\n\r\n    <div class=\"footer-section\">\r\n      <h3>Follow Us</h3>\r\n      <div class=\"social-icons\">\r\n        <a href=\"#\" aria-label=\"Facebook\"><i class=\"fab fa-facebook-f\"></i></a>\r\n        <a href=\"#\" aria-label=\"Twitter\"><i class=\"fab fa-twitter\"></i></a>\r\n        <a href=\"#\" aria-label=\"Instagram\"><i class=\"fab fa-instagram\"></i></a>\r\n        <a href=\"#\" aria-label=\"LinkedIn\"><i class=\"fab fa-linkedin-in\"></i></a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"footer-bottom\">\r\n    <p>&copy; 2024 Your Company. All Rights Reserved.</p>\r\n  </div>\r\n</footer>\r\n", styles: [".footer{background-color:#333;color:#fff;padding:20px 0;text-align:center;font-family:Roboto,sans-serif}.footer-container{display:flex;justify-content:space-around;flex-wrap:wrap;max-width:1200px;margin:0 auto}.footer-section{flex:1;margin:15px;min-width:200px}.footer-section h3{margin-bottom:15px;font-size:18px}.footer-section p,.footer-section ul,.footer-section a{font-size:14px;color:#ccc;text-decoration:none}.footer-section ul{list-style:none;padding:0}.footer-section ul li{margin:5px 0}.footer-section ul li a:hover{color:#fff}.social-icons{margin-top:10px}.social-icons a{display:inline-block;color:#ccc;margin:0 10px;font-size:20px}.social-icons a:hover{color:#fff}.footer-bottom{margin-top:20px;border-top:1px solid #444;padding-top:10px;font-size:12px}\n"] }]
+            args: [{ selector: 'app-footer', standalone: true, template: "<footer class=\"footer\">\n  <div class=\"footer-container\">\n    <div class=\"footer-section\">\n      <h3>About Us</h3>\n      <p>We are a company dedicated to providing excellent services and products to our customers.</p>\n    </div>\n\n    <div class=\"footer-section\">\n      <h3>Quick Links</h3>\n      <ul>\n        <li><a href=\"#\">Home</a></li>\n        <li><a href=\"#\">Services</a></li>\n        <li><a href=\"#\">Contact</a></li>\n        <li><a href=\"#\">Privacy Policy</a></li>\n      </ul>\n    </div>\n\n    <div class=\"footer-section\">\n      <h3>Follow Us</h3>\n      <div class=\"social-icons\">\n        <a href=\"#\" aria-label=\"Facebook\"><i class=\"fab fa-facebook-f\"></i></a>\n        <a href=\"#\" aria-label=\"Twitter\"><i class=\"fab fa-twitter\"></i></a>\n        <a href=\"#\" aria-label=\"Instagram\"><i class=\"fab fa-instagram\"></i></a>\n        <a href=\"#\" aria-label=\"LinkedIn\"><i class=\"fab fa-linkedin-in\"></i></a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"footer-bottom\">\n    <p>&copy; 2024 Your Company. All Rights Reserved.</p>\n  </div>\n</footer>\n", styles: [".footer{background-color:#333;color:#fff;padding:20px 0;text-align:center;font-family:Roboto,sans-serif}.footer-container{display:flex;justify-content:space-around;flex-wrap:wrap;max-width:1200px;margin:0 auto}.footer-section{flex:1;margin:15px;min-width:200px}.footer-section h3{margin-bottom:15px;font-size:18px}.footer-section p,.footer-section ul,.footer-section a{font-size:14px;color:#ccc;text-decoration:none}.footer-section ul{list-style:none;padding:0}.footer-section ul li{margin:5px 0}.footer-section ul li a:hover{color:#fff}.social-icons{margin-top:10px}.social-icons a{display:inline-block;color:#ccc;margin:0 10px;font-size:20px}.social-icons a:hover{color:#fff}.footer-bottom{margin-top:20px;border-top:1px solid #444;padding-top:10px;font-size:12px}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class LoginComponent {
@@ -950,19 +995,17 @@ class LoginComponent {
     }
     // After the view initializes, we render the button
     ngAfterViewInit() {
-        // Clear any existing content in the container
-        this.buttonContainer.clear();
         // Render the provided button template inside the container
         if (this.buttonTemplate) {
             this.buttonContainer.createEmbeddedView(this.buttonTemplate);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoginComponent, isStandalone: true, selector: "app-login", inputs: { buttonTemplate: "buttonTemplate" }, viewQueries: [{ propertyName: "buttonContainer", first: true, predicate: ["buttonContainer"], descendants: true }], ngImport: i0, template: "<div class=\"login-page\">\r\n    <div class=\"icon-area\">\r\n      <div class=\"icon\">\r\n        <span>innocons</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"login-button\" id=\"buttonDiv\">\r\n      <ng-template #buttonContainer></ng-template>\r\n    </div>\r\n</div>\r\n", styles: [".login-button{width:100%;align-items:center;justify-content:center;display:flex}.login-page{height:100%;width:100%;flex-direction:row;display:flex}.icon-area{width:38%;background-color:#2a76d7;height:100%;display:flex}.icon{width:100%;align-items:center;justify-content:center;display:flex}.icon span{color:#fff;font-size:xxx-large;font-family:fantasy}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoginComponent, isStandalone: true, selector: "app-login", inputs: { buttonTemplate: "buttonTemplate" }, viewQueries: [{ propertyName: "buttonContainer", first: true, predicate: ["buttonContainer"], descendants: true }], ngImport: i0, template: "<div class=\"login-page\">\n    <div class=\"icon-area\">\n      <div class=\"icon\">\n        <span>innocons</span>\n      </div>\n    </div>\n    <div class=\"login-button\" id=\"buttonDiv\">\n      <ng-template #buttonContainer></ng-template>\n    </div>\n</div>\n", styles: [".login-button{width:100%;align-items:center;justify-content:center;display:flex}.login-page{height:100%;width:100%;flex-direction:row;display:flex}.icon-area{width:38%;background-color:#2a76d7;height:100%;display:flex}.icon{width:100%;align-items:center;justify-content:center;display:flex}.icon span{color:#fff;font-size:xxx-large;font-family:fantasy}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-login', standalone: true, imports: [CommonModule], template: "<div class=\"login-page\">\r\n    <div class=\"icon-area\">\r\n      <div class=\"icon\">\r\n        <span>innocons</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"login-button\" id=\"buttonDiv\">\r\n      <ng-template #buttonContainer></ng-template>\r\n    </div>\r\n</div>\r\n", styles: [".login-button{width:100%;align-items:center;justify-content:center;display:flex}.login-page{height:100%;width:100%;flex-direction:row;display:flex}.icon-area{width:38%;background-color:#2a76d7;height:100%;display:flex}.icon{width:100%;align-items:center;justify-content:center;display:flex}.icon span{color:#fff;font-size:xxx-large;font-family:fantasy}\n"] }]
+            args: [{ selector: 'app-login', standalone: true, imports: [CommonModule], template: "<div class=\"login-page\">\n    <div class=\"icon-area\">\n      <div class=\"icon\">\n        <span>innocons</span>\n      </div>\n    </div>\n    <div class=\"login-button\" id=\"buttonDiv\">\n      <ng-template #buttonContainer></ng-template>\n    </div>\n</div>\n", styles: [".login-button{width:100%;align-items:center;justify-content:center;display:flex}.login-page{height:100%;width:100%;flex-direction:row;display:flex}.icon-area{width:38%;background-color:#2a76d7;height:100%;display:flex}.icon{width:100%;align-items:center;justify-content:center;display:flex}.icon span{color:#fff;font-size:xxx-large;font-family:fantasy}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { buttonTemplate: [{
                 type: Input
             }], buttonContainer: [{
@@ -974,7 +1017,7 @@ class MenuWidgetComponent {
     constructor() {
         // Input for menu items
         this.items = [];
-        this.position = { top: '0px', left: '0px' };
+        this.position = { left: '0px' };
         // Output for item selection event
         this.itemSelected = new EventEmitter();
     }
@@ -988,11 +1031,11 @@ class MenuWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MenuWidgetComponent, isStandalone: true, selector: "app-menu-widget", inputs: { items: "items", position: "position" }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"menu-widget\" [ngStyle]=\"{ top: position.top, left: position.left }\">\n  <ul>\n    <li *ngFor=\"let item of items\"\n        [class.disabled]=\"item.isToggled\"\n        (click)=\"onItemClick(item)\">\n      {{ item.label }}\n    </li>\n  </ul>\n</div>\n", styles: [".menu-widget{position:absolute;background-color:#fff;border:1px solid #ccc;padding:10px;list-style:none;box-shadow:0 2px 10px #0000001a;z-index:1000}.menu-widget ul{margin:0;padding:0;list-style:none}.menu-widget li{padding:8px 12px;cursor:pointer;transition:background-color .2s ease}.menu-widget li:hover{background-color:#f0f0f0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MenuWidgetComponent, isStandalone: true, selector: "app-menu-widget", inputs: { items: "items", position: "position" }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"menu-widget\" [ngStyle]=\"{ top: position.top ?? 'auto', left: position.left, bottom: position.bottom ?? 'auto' }\">\n  <ul>\n    <li *ngFor=\"let item of items\"\n        [class.disabled]=\"item.isToggled\"\n        (click)=\"onItemClick(item)\">\n      {{ item.label }}\n    </li>\n  </ul>\n</div>\n", styles: [".menu-widget{position:absolute;background-color:#fff;border:1px solid #ccc;padding:10px;list-style:none;box-shadow:0 2px 10px #0000001a;z-index:1000}.menu-widget ul{margin:0;padding:0;list-style:none}.menu-widget li{padding:8px 12px;cursor:pointer;transition:background-color .2s ease}.menu-widget li:hover{background-color:#f0f0f0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-menu-widget', standalone: true, imports: [CommonModule], template: "<div class=\"menu-widget\" [ngStyle]=\"{ top: position.top, left: position.left }\">\n  <ul>\n    <li *ngFor=\"let item of items\"\n        [class.disabled]=\"item.isToggled\"\n        (click)=\"onItemClick(item)\">\n      {{ item.label }}\n    </li>\n  </ul>\n</div>\n", styles: [".menu-widget{position:absolute;background-color:#fff;border:1px solid #ccc;padding:10px;list-style:none;box-shadow:0 2px 10px #0000001a;z-index:1000}.menu-widget ul{margin:0;padding:0;list-style:none}.menu-widget li{padding:8px 12px;cursor:pointer;transition:background-color .2s ease}.menu-widget li:hover{background-color:#f0f0f0}\n"] }]
+            args: [{ selector: 'app-menu-widget', standalone: true, imports: [CommonModule], template: "<div class=\"menu-widget\" [ngStyle]=\"{ top: position.top ?? 'auto', left: position.left, bottom: position.bottom ?? 'auto' }\">\n  <ul>\n    <li *ngFor=\"let item of items\"\n        [class.disabled]=\"item.isToggled\"\n        (click)=\"onItemClick(item)\">\n      {{ item.label }}\n    </li>\n  </ul>\n</div>\n", styles: [".menu-widget{position:absolute;background-color:#fff;border:1px solid #ccc;padding:10px;list-style:none;box-shadow:0 2px 10px #0000001a;z-index:1000}.menu-widget ul{margin:0;padding:0;list-style:none}.menu-widget li{padding:8px 12px;cursor:pointer;transition:background-color .2s ease}.menu-widget li:hover{background-color:#f0f0f0}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], position: [{
@@ -1005,17 +1048,22 @@ class MenuComponent {
     constructor() {
         this.menuItems = [];
         this.logoUrl = '';
+        this.logoRouter = '/';
         this.direction = MenuDirection.horizontal;
         this.languageMenuItems = [];
         this.languageSelected = new EventEmitter();
         this.loginSelected = new EventEmitter();
-        this.languageMenuPosition = { top: '0px', left: '0px' };
-        this.loginMenuPosition = { top: '0px', left: '0px' };
+        this.logoutSelected = new EventEmitter();
+        this.languageMenuPosition = { left: '0px' };
+        this.loginMenuPosition = { left: '0px' };
         this.isLanguageMenuVisible = false;
         this.isLoginMenuVisible = false;
         this.loginItems = [
             { label: 'login', value: 'login', callback: () => this.login(), },
         ];
+        this.logoutItems = [
+            { label: 'logout', value: 'logout', callback: () => this.logout(), },
+        ];
     }
     ngOnInit() { }
     // Getters for menu direction
@@ -1044,6 +1092,9 @@ class MenuComponent {
     onLoginMenuItemSelected(item) {
         item.callback;
     }
+    onLogoutMenuItemSelected(item) {
+        item.callback;
+    }
     // Hide menu if clicked outside of the relevant areas
     handleClickOutside(event) {
         const target = event.target;
@@ -1061,32 +1112,49 @@ class MenuComponent {
     // Calculate the position for the widget
     calculatePosition(triggerElement, offset = 50) {
         const rect = triggerElement.getBoundingClientRect();
+        const scrollTop = window.scrollY || document.documentElement.scrollTop;
+        const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+        if (this.direction === MenuDirection.horizontal) {
+            return {
+                top: `${rect.bottom + scrollTop}px`,
+                left: `${rect.left + scrollLeft - offset}px`
+            };
+        }
         return {
-            top: `${rect.bottom + window.scrollY}px`,
-            left: `${rect.left + window.scrollX - offset}px`
+            left: `${rect.left + scrollLeft + 210}px`,
+            bottom: `${window.innerHeight - rect.bottom}px`
         };
     }
     login() {
         this.loginSelected.emit();
     }
+    logout() {
+        this.logoutSelected.emit();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MenuComponent, isStandalone: true, selector: "app-menu", inputs: { menuItems: "menuItems", logoUrl: "logoUrl", direction: "direction", languageMenuItems: "languageMenuItems" }, outputs: { languageSelected: "languageSelected", loginSelected: "loginSelected" }, host: { listeners: { "document:click": "handleClickOutside($event)" } }, ngImport: i0, template: "<nav class=\"menu\" [ngClass]=\"{ 'vertical': isVertical, 'horizontal': !isVertical }\">\r\n  <div class=\"logo\">\r\n    <a [routerLink]=\"'/'\">\r\n      <img [src]=\"logoUrl\" alt=\"Logo\" />\r\n    </a>\r\n  </div>\r\n  <ul>\r\n    <li *ngFor=\"let item of menuItems\">\r\n      <a [routerLink]=\"item.route\"\r\n         routerLinkActive=\"active\"\r\n         [routerLinkActiveOptions]=\"{ exact: true }\">{{ item.label }}</a>\r\n    </li>\r\n  </ul>\r\n  <div class=\"actions\">\r\n    <!-- Language selector -->\r\n    <div class=\"language\" (click)=\"toggleLanguageMenu($event)\">\r\n      <span class=\"material-icons\" aria-hidden=\"true\">language</span>\r\n    </div>\r\n    <app-menu-widget *ngIf=\"isLanguageMenuVisible\"\r\n                     [items]=\"languageMenuItems\"\r\n                     (itemSelected)=\"onLanguageSelected($event)\"\r\n                     [position]=\"languageMenuPosition\">\r\n    </app-menu-widget>\r\n\r\n    <!-- Login menu -->\r\n    <div class=\"login\" (click)=\"toggleLoginMenu($event)\">\r\n      <span class=\"material-icons\" aria-hidden=\"true\">person</span>\r\n    </div>\r\n    <app-menu-widget *ngIf=\"isLoginMenuVisible\"\r\n                     [items]=\"loginItems\"\r\n                     (itemSelected)=\"onLoginMenuItemSelected($event)\"\r\n                     [position]=\"loginMenuPosition\">\r\n    </app-menu-widget>\r\n  </div>\r\n</nav>\r\n", styles: [":host{display:flex}.menu{background-color:#f8f9fa;padding:10px;box-shadow:0 2px 5px #0000001a}.menu.vertical{display:flex;justify-content:space-between;flex-direction:column;width:200px}.menu.vertical ul{list-style-type:none;padding:0;height:100%}.menu.vertical ul li{padding:8px 0}.menu.vertical ul li:hover{background-color:#e9ecef;cursor:pointer}.menu.vertical .actions{display:flex;flex-direction:column;align-items:baseline}.menu.horizontal{display:flex;flex-direction:row;width:100%;height:80px}.menu.horizontal ul{display:flex;list-style-type:none;padding:0;margin:0;flex-grow:1;align-items:center}.menu.horizontal ul li a{padding:18px 26px}.menu.horizontal ul li a:hover{background-color:#e9ecef;cursor:pointer}.menu .logo img{width:100%;height:100%;max-height:60px}.menu .actions{display:flex;align-items:center}.menu .actions .language,.menu .actions .login{margin-left:10px}a{text-decoration:none;color:inherit;display:block;padding:10px;transition:background-color .3s ease}a.active{color:#f6ad15;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: MenuWidgetComponent, selector: "app-menu-widget", inputs: ["items", "position"], outputs: ["itemSelected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MenuComponent, isStandalone: true, selector: "app-menu", inputs: { menuItems: "menuItems", logoUrl: "logoUrl", logoRouter: "logoRouter", direction: "direction", languageMenuItems: "languageMenuItems", loginUser: "loginUser" }, outputs: { languageSelected: "languageSelected", loginSelected: "loginSelected", logoutSelected: "logoutSelected" }, host: { listeners: { "document:click": "handleClickOutside($event)" } }, ngImport: i0, template: "<nav class=\"menu\" [ngClass]=\"{ 'vertical': isVertical, 'horizontal': !isVertical }\">\n  <div class=\"logo\">\n    <a [routerLink]=\"logoRouter\">\n      <img [src]=\"logoUrl\" alt=\"Logo\" />\n    </a>\n  </div>\n  <ul>\n    <li *ngFor=\"let item of menuItems\">\n      <a [routerLink]=\"item.route\"\n         routerLinkActive=\"active\"\n         [routerLinkActiveOptions]=\"{ exact: true }\">{{ item.label }}</a>\n    </li>\n  </ul>\n  <div class=\"actions\">\n    <!-- Language selector -->\n    <div class=\"language\" (click)=\"toggleLanguageMenu($event)\">\n      <span class=\"material-icons\" aria-hidden=\"true\">language</span>\n    </div>\n    <app-menu-widget *ngIf=\"isLanguageMenuVisible\"\n                     [items]=\"languageMenuItems\"\n                     (itemSelected)=\"onLanguageSelected($event)\"\n                     [position]=\"languageMenuPosition\">\n    </app-menu-widget>\n\n    <!-- Login menu -->\n    <div class=\"login\" (click)=\"toggleLoginMenu($event)\">\n      <ng-container *ngIf=\"loginUser?.picture; else defaultIcon\">\n        <img [src]=\"loginUser?.picture\" alt=\"User Avatar\" class=\"user-avatar\" />\n      </ng-container>\n      <ng-template #defaultIcon>\n        <span class=\"material-icons\" aria-hidden=\"true\">person</span>\n      </ng-template>\n    </div>\n    <app-menu-widget *ngIf=\"isLoginMenuVisible && !loginUser\"\n                     [items]=\"loginItems\"\n                     (itemSelected)=\"onLoginMenuItemSelected($event)\"\n                     [position]=\"loginMenuPosition\">\n    </app-menu-widget>\n    <app-menu-widget *ngIf=\"isLoginMenuVisible && loginUser\"\n        [items]=\"logoutItems\"\n        (itemSelected)=\"onLogoutMenuItemSelected($event)\"\n        [position]=\"loginMenuPosition\">\n    </app-menu-widget>\n  </div>\n</nav>\n", styles: [":host{display:flex}.menu{background-color:#f8f9fa;padding:10px;box-shadow:0 2px 5px #0000001a}.menu.vertical{display:flex;justify-content:space-between;flex-direction:column;width:200px}.menu.vertical ul{list-style-type:none;padding:0;height:100%}.menu.vertical ul li{padding:8px 0}.menu.vertical ul li:hover{background-color:#e9ecef;cursor:pointer}.menu.vertical .actions{display:flex;flex-direction:column;align-items:baseline}.menu.horizontal{display:flex;flex-direction:row;width:100%;height:80px}.menu.horizontal ul{display:flex;list-style-type:none;padding:0;margin:0;flex-grow:1;align-items:center}.menu.horizontal ul li a{padding:18px 26px}.menu.horizontal ul li a:hover{background-color:#e9ecef;cursor:pointer}.menu .logo img{width:100%;height:100%;max-height:60px}.menu .actions{display:flex;align-items:center}.menu .actions .language,.menu .actions .login{margin-left:10px}.menu .actions .language img,.menu .actions .login img{border-radius:50%}a{text-decoration:none;color:inherit;display:block;padding:10px;transition:background-color .3s ease}a.active{color:#f6ad15;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: MenuWidgetComponent, selector: "app-menu-widget", inputs: ["items", "position"], outputs: ["itemSelected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-menu', standalone: true, imports: [CommonModule, RouterModule, MenuWidgetComponent], template: "<nav class=\"menu\" [ngClass]=\"{ 'vertical': isVertical, 'horizontal': !isVertical }\">\r\n  <div class=\"logo\">\r\n    <a [routerLink]=\"'/'\">\r\n      <img [src]=\"logoUrl\" alt=\"Logo\" />\r\n    </a>\r\n  </div>\r\n  <ul>\r\n    <li *ngFor=\"let item of menuItems\">\r\n      <a [routerLink]=\"item.route\"\r\n         routerLinkActive=\"active\"\r\n         [routerLinkActiveOptions]=\"{ exact: true }\">{{ item.label }}</a>\r\n    </li>\r\n  </ul>\r\n  <div class=\"actions\">\r\n    <!-- Language selector -->\r\n    <div class=\"language\" (click)=\"toggleLanguageMenu($event)\">\r\n      <span class=\"material-icons\" aria-hidden=\"true\">language</span>\r\n    </div>\r\n    <app-menu-widget *ngIf=\"isLanguageMenuVisible\"\r\n                     [items]=\"languageMenuItems\"\r\n                     (itemSelected)=\"onLanguageSelected($event)\"\r\n                     [position]=\"languageMenuPosition\">\r\n    </app-menu-widget>\r\n\r\n    <!-- Login menu -->\r\n    <div class=\"login\" (click)=\"toggleLoginMenu($event)\">\r\n      <span class=\"material-icons\" aria-hidden=\"true\">person</span>\r\n    </div>\r\n    <app-menu-widget *ngIf=\"isLoginMenuVisible\"\r\n                     [items]=\"loginItems\"\r\n                     (itemSelected)=\"onLoginMenuItemSelected($event)\"\r\n                     [position]=\"loginMenuPosition\">\r\n    </app-menu-widget>\r\n  </div>\r\n</nav>\r\n", styles: [":host{display:flex}.menu{background-color:#f8f9fa;padding:10px;box-shadow:0 2px 5px #0000001a}.menu.vertical{display:flex;justify-content:space-between;flex-direction:column;width:200px}.menu.vertical ul{list-style-type:none;padding:0;height:100%}.menu.vertical ul li{padding:8px 0}.menu.vertical ul li:hover{background-color:#e9ecef;cursor:pointer}.menu.vertical .actions{display:flex;flex-direction:column;align-items:baseline}.menu.horizontal{display:flex;flex-direction:row;width:100%;height:80px}.menu.horizontal ul{display:flex;list-style-type:none;padding:0;margin:0;flex-grow:1;align-items:center}.menu.horizontal ul li a{padding:18px 26px}.menu.horizontal ul li a:hover{background-color:#e9ecef;cursor:pointer}.menu .logo img{width:100%;height:100%;max-height:60px}.menu .actions{display:flex;align-items:center}.menu .actions .language,.menu .actions .login{margin-left:10px}a{text-decoration:none;color:inherit;display:block;padding:10px;transition:background-color .3s ease}a.active{color:#f6ad15;font-weight:700}\n"] }]
+            args: [{ selector: 'app-menu', standalone: true, imports: [CommonModule, RouterModule, MenuWidgetComponent], template: "<nav class=\"menu\" [ngClass]=\"{ 'vertical': isVertical, 'horizontal': !isVertical }\">\n  <div class=\"logo\">\n    <a [routerLink]=\"logoRouter\">\n      <img [src]=\"logoUrl\" alt=\"Logo\" />\n    </a>\n  </div>\n  <ul>\n    <li *ngFor=\"let item of menuItems\">\n      <a [routerLink]=\"item.route\"\n         routerLinkActive=\"active\"\n         [routerLinkActiveOptions]=\"{ exact: true }\">{{ item.label }}</a>\n    </li>\n  </ul>\n  <div class=\"actions\">\n    <!-- Language selector -->\n    <div class=\"language\" (click)=\"toggleLanguageMenu($event)\">\n      <span class=\"material-icons\" aria-hidden=\"true\">language</span>\n    </div>\n    <app-menu-widget *ngIf=\"isLanguageMenuVisible\"\n                     [items]=\"languageMenuItems\"\n                     (itemSelected)=\"onLanguageSelected($event)\"\n                     [position]=\"languageMenuPosition\">\n    </app-menu-widget>\n\n    <!-- Login menu -->\n    <div class=\"login\" (click)=\"toggleLoginMenu($event)\">\n      <ng-container *ngIf=\"loginUser?.picture; else defaultIcon\">\n        <img [src]=\"loginUser?.picture\" alt=\"User Avatar\" class=\"user-avatar\" />\n      </ng-container>\n      <ng-template #defaultIcon>\n        <span class=\"material-icons\" aria-hidden=\"true\">person</span>\n      </ng-template>\n    </div>\n    <app-menu-widget *ngIf=\"isLoginMenuVisible && !loginUser\"\n                     [items]=\"loginItems\"\n                     (itemSelected)=\"onLoginMenuItemSelected($event)\"\n                     [position]=\"loginMenuPosition\">\n    </app-menu-widget>\n    <app-menu-widget *ngIf=\"isLoginMenuVisible && loginUser\"\n        [items]=\"logoutItems\"\n        (itemSelected)=\"onLogoutMenuItemSelected($event)\"\n        [position]=\"loginMenuPosition\">\n    </app-menu-widget>\n  </div>\n</nav>\n", styles: [":host{display:flex}.menu{background-color:#f8f9fa;padding:10px;box-shadow:0 2px 5px #0000001a}.menu.vertical{display:flex;justify-content:space-between;flex-direction:column;width:200px}.menu.vertical ul{list-style-type:none;padding:0;height:100%}.menu.vertical ul li{padding:8px 0}.menu.vertical ul li:hover{background-color:#e9ecef;cursor:pointer}.menu.vertical .actions{display:flex;flex-direction:column;align-items:baseline}.menu.horizontal{display:flex;flex-direction:row;width:100%;height:80px}.menu.horizontal ul{display:flex;list-style-type:none;padding:0;margin:0;flex-grow:1;align-items:center}.menu.horizontal ul li a{padding:18px 26px}.menu.horizontal ul li a:hover{background-color:#e9ecef;cursor:pointer}.menu .logo img{width:100%;height:100%;max-height:60px}.menu .actions{display:flex;align-items:center}.menu .actions .language,.menu .actions .login{margin-left:10px}.menu .actions .language img,.menu .actions .login img{border-radius:50%}a{text-decoration:none;color:inherit;display:block;padding:10px;transition:background-color .3s ease}a.active{color:#f6ad15;font-weight:700}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { menuItems: [{
                 type: Input
             }], logoUrl: [{
                 type: Input
+            }], logoRouter: [{
+                type: Input
             }], direction: [{
                 type: Input
             }], languageMenuItems: [{
                 type: Input
+            }], loginUser: [{
+                type: Input
             }], languageSelected: [{
                 type: Output
             }], loginSelected: [{
                 type: Output
+            }], logoutSelected: [{
+                type: Output
             }], handleClickOutside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -1137,5 +1205,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AngularDumbLibComponent, AngularDumbLibModule, AngularDumbLibService, ButtonComponent, ButtonType, CardsComponent, ContentDesignComponent, ContentDirection, DatetimePickerComponent, DesignType, DetailComponent, FileSelectionComponent, FooterComponent, FormComponent, FormatedTextComponent, InputComponent, InputDirection, InputGroupType, InputType, LoadingComponent, LoadingSize, LoadingType, LoginComponent, MenuComponent, MenuDirection, ModalComponent, PaginatorComponent, ScrollToTopComponent, SelectionComponent, SelectionType, SliderComponent, TableComponent, TagsComponent, VersionComponent, WidgetPosition };
+export { AngularDumbLibComponent, AngularDumbLibModule, AngularDumbLibService, ButtonComponent, ButtonType, CRUDType, CardsComponent, ContentDesignComponent, ContentDirection, DatetimePickerComponent, DesignType, DetailComponent, FileSelectionComponent, FooterComponent, FormComponent, FormatedTextComponent, InputComponent, InputDirection, InputGroupType, InputType, LoadingComponent, LoadingType, LoginComponent, MenuComponent, MenuDirection, ModalComponent, PaginatorComponent, ScrollToTopComponent, SelectionComponent, SelectionType, Size, SliderComponent, TableComponent, TagsComponent, VersionComponent, WidgetPosition };
 //# sourceMappingURL=angular-dumb-lib.mjs.map