angular-dumb-lib 0.0.10 → 0.0.12

package/fesm2022/angular-dumb-lib.mjs

@@ -1,12 +1,15 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, NgModule, EventEmitter, Input, Output, forwardRef, ContentChild, ViewContainerRef, ViewChild } from '@angular/core';
+import { Injectable, Component, NgModule, EventEmitter, Input, Output, forwardRef, ContentChild, ViewChild, HostListener } from '@angular/core';
 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 * as i1$1 from '@angular/platform-browser';
 import * as i2$1 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import * as i3 from 'primeng/api';
+import * as i2$2 from '@angular/router';
+import { RouterModule } from '@angular/router';
 
 class AngularDumbLibService {
     constructor() { }
@@ -22,18 +25,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>
   ` }]
         }] });
 
@@ -123,6 +126,17 @@ var MenuDirection;
     MenuDirection["vertical"] = "vertical";
     MenuDirection["horizontal"] = "horizontal";
 })(MenuDirection || (MenuDirection = {}));
+var WidgetPosition;
+(function (WidgetPosition) {
+    WidgetPosition["top"] = "top";
+    WidgetPosition["bottom"] = "bottom";
+    WidgetPosition["auto"] = "auto";
+})(WidgetPosition || (WidgetPosition = {}));
+var LoadingType;
+(function (LoadingType) {
+    LoadingType["black"] = "black";
+    LoadingType["white"] = "white";
+})(LoadingType || (LoadingType = {}));
 
 class ButtonComponent {
     constructor() {
@@ -141,11 +155,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\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:.25rem;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:#007bff;color:#fff}button.btn.btn-primary.normal:hover:not(:disabled){background-color:#0056d2}button.btn.btn-primary.contrast{color:#007bff;border:1px solid #4A90E2}button.btn.btn-primary.contrast:hover:not(:disabled){background-color:#e6f0fa;color:#1a1a1a}button.btn.btn-primary.active{background-color:#003d99;color:#fff}button.btn.btn-primary.active:hover:not(:disabled){background-color:#0056d2;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\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"] }] }); }
 }
 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\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:.25rem;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:#007bff;color:#fff}button.btn.btn-primary.normal:hover:not(:disabled){background-color:#0056d2}button.btn.btn-primary.contrast{color:#007bff;border:1px solid #4A90E2}button.btn.btn-primary.contrast:hover:not(:disabled){background-color:#e6f0fa;color:#1a1a1a}button.btn.btn-primary.active{background-color:#003d99;color:#fff}button.btn.btn-primary.active:hover:not(:disabled){background-color:#0056d2;color:#fff}\n"] }]
+            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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }], clickEvent: [{
@@ -318,7 +332,7 @@ class InputComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputComponent),
                 multi: true
-            }], 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"] }] }); }
+            }], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -326,7 +340,7 @@ 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\">\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"] }]
+                        }], 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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }] } });
@@ -334,16 +348,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class LoadingComponent {
     constructor() {
         this.size = LoadingSize.Medium;
-        this.imageSrc = '';
+        this.imageSrc = LoadingType.black;
+        this.loadingImage = 'https://innocons.s3.ap-southeast-1.amazonaws.com/wp-content/uploads/2024/10/13083249/Loader-White.gif';
     }
     ngOnInit() {
+        switch (this.imageSrc) {
+            case LoadingType.black:
+                this.loadingImage = 'https://innocons.s3.ap-southeast-1.amazonaws.com/wp-content/uploads/2024/10/13083256/Loader-Black.gif';
+                break;
+            case LoadingType.white:
+                this.loadingImage = 'https://innocons.s3.ap-southeast-1.amazonaws.com/wp-content/uploads/2024/10/13083249/Loader-White.gif';
+                break;
+            default:
+                this.loadingImage = 'https://innocons.s3.ap-southeast-1.amazonaws.com/wp-content/uploads/2024/10/13083249/Loader-White.gif';
+                break;
+        }
     }
     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\">\n  <img [src]=\"imageSrc\" />\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"] }] }); }
+    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"] }] }); }
 }
 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\">\n  <img [src]=\"imageSrc\" />\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"] }]
+            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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { size: [{
                 type: Input
             }], imageSrc: [{
@@ -527,7 +553,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class ContentDesignComponent {
-    constructor() {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
         this.clickEvent = new EventEmitter();
     }
     ngOnInit() {
@@ -535,17 +562,24 @@ class ContentDesignComponent {
             contentDirection: ContentDirection.left,
             ...this.content,
         };
+        // Sanitize the map address if it exists
+        if (this.content.mapAddress) {
+            this.sanitizedMapAddress = this.sanitizer.bypassSecurityTrustResourceUrl(this.content.mapAddress);
+        }
     }
-    onButtonClick() {
-        this.clickEvent.emit();
+    onButtonClick(action) {
+        if (action) {
+            this.content.contentAction = action;
+            this.clickEvent.emit(this.content);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentDesignComponent, deps: [], 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" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"content-designer\" [ngClass]=\"content.contentDirection\">\n  <div *ngIf=\"content.coverImage\" class=\"image\">\n    <img [src]=\"content.coverImage\" alt=\"Cover Image\">\n  </div>\n\n  <div class=\"content\">\n    <h2>{{ content.title }}</h2>\n    <p>{{ content.content }}</p>\n    <ng-container [ngTemplateOutlet]=\"content.template\"></ng-container>\n    <app-button *ngIf=\"content.button\" [config] = \"content.button\"\n    (clickEvent)=\"onButtonClick()\">\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 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%;padding:0 20px}.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%;justify-content:center}.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.ɵ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" }, 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>{{ content.title }}</h2>\r\n    <p>{{ 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"] }] }); }
 }
 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\">\n  <div *ngIf=\"content.coverImage\" class=\"image\">\n    <img [src]=\"content.coverImage\" alt=\"Cover Image\">\n  </div>\n\n  <div class=\"content\">\n    <h2>{{ content.title }}</h2>\n    <p>{{ content.content }}</p>\n    <ng-container [ngTemplateOutlet]=\"content.template\"></ng-container>\n    <app-button *ngIf=\"content.button\" [config] = \"content.button\"\n    (clickEvent)=\"onButtonClick()\">\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 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%;padding:0 20px}.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%;justify-content:center}.content-designer.up{flex-direction:column-reverse}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { content: [{
+            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>{{ content.title }}</h2>\r\n    <p>{{ 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"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { content: [{
                 type: Input
             }], clickEvent: [{
                 type: Output
@@ -554,17 +588,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class CardsComponent {
     constructor() {
         this.cardContents = [];
+        this.getCardConfig = new EventEmitter();
     }
     ngOnInit() {
     }
+    clickEvent(contentDesign) {
+        if (contentDesign.id) {
+            this.getCardConfig.emit(contentDesign);
+        }
+    }
     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" }, 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\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}.content{width:33%}.card ::ng-deep .content{padding:0 20px}\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"], 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\">\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"], 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\">\n  <ng-container *ngFor=\"let content of cardContents\">\n    <div class=\"card {{content.name}}\">\n      <app-content-design\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}.content{width:33%}.card ::ng-deep .content{padding:0 20px}\n"] }]
+            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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { cardContents: [{
                 type: Input
+            }], getCardConfig: [{
+                type: Output
             }] } });
 
 const textualInputTypes = [InputType.text, InputType.password, InputType.email, InputType.url,
@@ -610,12 +652,12 @@ class FormComponent {
         return InputGroupType.textual;
     }
     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\">\n  <ng-container *ngFor=\"let inputConfig of inputConfigs\">\n    <app-input *ngIf=\"checkFormConfigType(inputConfig.type) === 'textual'\"\n    [formControlName]=\"inputConfig.name\"\n    [config]=\"inputConfig\"\n    [required]=\"inputConfig.required\"></app-input>\n\n    <app-selection *ngIf=\"checkFormConfigType(inputConfig.type) === 'selection'\"\n    [formControlName]=\"inputConfig.name\"\n    [label]=\"inputConfig.label?? ''\"\n    [options]= \"inputConfig.options\">\n    </app-selection>\n\n    <app-file-selection\n    [formControlName]=\"inputConfig.name\"\n    *ngIf=\"checkFormConfigType(inputConfig.type) === 'file'\"\n    [label]=\"inputConfig.name \">\n    </app-file-selection>\n  </ng-container>\n\n  <app-button [config]=\"buttonConfig\"></app-button>\n</form>\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()\" #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"] }] }); }
 }
 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\">\n  <ng-container *ngFor=\"let inputConfig of inputConfigs\">\n    <app-input *ngIf=\"checkFormConfigType(inputConfig.type) === 'textual'\"\n    [formControlName]=\"inputConfig.name\"\n    [config]=\"inputConfig\"\n    [required]=\"inputConfig.required\"></app-input>\n\n    <app-selection *ngIf=\"checkFormConfigType(inputConfig.type) === 'selection'\"\n    [formControlName]=\"inputConfig.name\"\n    [label]=\"inputConfig.label?? ''\"\n    [options]= \"inputConfig.options\">\n    </app-selection>\n\n    <app-file-selection\n    [formControlName]=\"inputConfig.name\"\n    *ngIf=\"checkFormConfigType(inputConfig.type) === 'file'\"\n    [label]=\"inputConfig.name \">\n    </app-file-selection>\n  </ng-container>\n\n  <app-button [config]=\"buttonConfig\"></app-button>\n</form>\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"] }]
+                        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"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], inputConfigs: [{
@@ -660,11 +702,11 @@ 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\">\n  <div class=\"modal-content\" (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 *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", 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:600px;width:100%;max-height:calc(100vh - 7rem);overflow-y:auto}.modal-content.dark-mode{background-color:#27272a;color:#d1d5db}.modal-content .modal-header{display:flex;flex-direction:row;justify-content:space-between}h2{font-size:2rem;font-weight:700;margin:unset}p{color:#4b5563;margin-bottom:1.5rem}p.dark-mode{color:#d1d5db}.modal-actions{display:flex;justify-content:flex-end}.close-btn{background-color:transparent;border:none;font-size:1.5rem;cursor:pointer;padding:0;display:flex;align-items:center}.close-btn i.material-icons{font-size:24px;color:#888}.close-btn:hover i.material-icons{color:#444}.buttons{display:flex;flex-direction:row;justify-content:end;gap:15px}\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" }, 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"] }] }); }
 }
 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\">\n  <div class=\"modal-content\" (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 *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", 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:600px;width:100%;max-height:calc(100vh - 7rem);overflow-y:auto}.modal-content.dark-mode{background-color:#27272a;color:#d1d5db}.modal-content .modal-header{display:flex;flex-direction:row;justify-content:space-between}h2{font-size:2rem;font-weight:700;margin:unset}p{color:#4b5563;margin-bottom:1.5rem}p.dark-mode{color:#d1d5db}.modal-actions{display:flex;justify-content:flex-end}.close-btn{background-color:transparent;border:none;font-size:1.5rem;cursor:pointer;padding:0;display:flex;align-items:center}.close-btn i.material-icons{font-size:24px;color:#888}.close-btn:hover i.material-icons{color:#444}.buttons{display:flex;flex-direction:row;justify-content:end;gap:15px}\n"] }]
+            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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { modalEvent: [{
                 type: Input
             }] } });
@@ -722,6 +764,7 @@ class PaginatorComponent {
     }
     ngOnChanges() {
         this.calculateNumberOfPage(this.totalRecords, this.itemsPerPage);
+        this.updateButtonConfigs();
     }
     selectPage(i) {
         this.selectedPage = i;
@@ -767,11 +810,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\">\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}.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\">\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"] }] }); }
 }
 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\">\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}.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\">\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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { totalRecords: [{
                 type: Input
             }], paginator: [{
@@ -797,11 +840,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\">\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;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\">\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"] }] }); }
 }
 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\">\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;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\">\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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
                 type: Input
             }], columns: [{
@@ -824,11 +867,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\">\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"] }); }
+    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"] }); }
 }
 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\">\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"] }]
+            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"] }]
         }], ctorParameters: function () { return []; } });
 
 class LoginComponent {
@@ -846,41 +889,138 @@ class LoginComponent {
         }
     }
     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, read: ViewContainerRef }], 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 }] }); }
+    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 }] }); }
 }
 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\">\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"] }]
+            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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { buttonTemplate: [{
                 type: Input
             }], buttonContainer: [{
                 type: ViewChild,
-                args: ['buttonContainer', { read: ViewContainerRef }]
+                args: ['buttonContainer']
+            }] } });
+
+class MenuWidgetComponent {
+    constructor() {
+        // Input for menu items
+        this.items = [];
+        this.position = { top: '0px', left: '0px' };
+        // Output for item selection event
+        this.itemSelected = new EventEmitter();
+    }
+    // Function to handle item click
+    onItemClick(item) {
+        if (!item.isToggled) {
+            this.itemSelected.emit(item);
+            if (item.callback) {
+                item.callback();
+            }
+        }
+    }
+    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"] }] }); }
+}
+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"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], itemSelected: [{
+                type: Output
             }] } });
 
 class MenuComponent {
     constructor() {
         this.menuItems = [];
-        this.logoUrl = "";
+        this.logoUrl = '';
         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.isLanguageMenuVisible = false;
+        this.isLoginMenuVisible = false;
+        this.loginItems = [
+            { label: 'login', value: 'login', callback: () => this.login(), },
+        ];
     }
-    ngOnInit() {
-    }
+    ngOnInit() { }
+    // Getters for menu direction
     get isVertical() {
         return this.direction === MenuDirection.vertical;
     }
+    // Toggle language menu and set position
+    toggleLanguageMenu(event) {
+        this.isLanguageMenuVisible = !this.isLanguageMenuVisible;
+        if (this.isLanguageMenuVisible) {
+            this.languageMenuPosition = this.calculatePosition(event.currentTarget);
+        }
+    }
+    // Toggle login menu and set position
+    toggleLoginMenu(event) {
+        this.isLoginMenuVisible = !this.isLoginMenuVisible;
+        if (this.isLoginMenuVisible) {
+            this.loginMenuPosition = this.calculatePosition(event.currentTarget);
+        }
+    }
+    // Emit language selection and close the language menu
+    onLanguageSelected(item) {
+        this.languageSelected.emit(item);
+        this.isLanguageMenuVisible = false;
+    }
+    onLoginMenuItemSelected(item) {
+        item.callback;
+    }
+    // Hide menu if clicked outside of the relevant areas
+    handleClickOutside(event) {
+        const target = event.target;
+        // Helper method to check if clicked outside an element
+        const clickedOutside = (menuClass) => {
+            return !target.closest(`.${menuClass}`) && !target.closest('app-menu-widget');
+        };
+        if (clickedOutside('language')) {
+            this.isLanguageMenuVisible = false;
+        }
+        if (clickedOutside('login')) {
+            this.isLoginMenuVisible = false;
+        }
+    }
+    // Calculate the position for the widget
+    calculatePosition(triggerElement, offset = 50) {
+        const rect = triggerElement.getBoundingClientRect();
+        return {
+            top: `${rect.bottom + window.scrollY}px`,
+            left: `${rect.left + window.scrollX - offset}px`
+        };
+    }
+    login() {
+        this.loginSelected.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" }, ngImport: i0, template: "<nav class=\"menu\" [ngClass]=\"{'vertical': isVertical, 'horizontal': !isVertical}\">\n  <div class=\"logo\">\n    <img src=\"{{logoUrl}}\" alt=\"Logo\" />\n  </div>\n  <ul>\n    <li *ngFor=\"let item of menuItems\">\n      <a [href]=\"item.route\">{{ item.label }}</a>\n    </li>\n  </ul>\n  <div class=\"actions\">\n    <div class=\"language\">\n      <span class=\"material-icons\" aria-hidden=\"true\">language</span>\n    </div>\n    <div class=\"login\">\n      <span class=\"material-icons\" aria-hidden=\"true\">person</span>\n    </div>\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{padding:8px 16px}.menu.horizontal ul li:hover{background-color:#e9ecef;cursor:pointer}.menu .logo img{width:100%;height:100%}.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}\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"] }] }); }
+    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"] }] }); }
 }
 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], template: "<nav class=\"menu\" [ngClass]=\"{'vertical': isVertical, 'horizontal': !isVertical}\">\n  <div class=\"logo\">\n    <img src=\"{{logoUrl}}\" alt=\"Logo\" />\n  </div>\n  <ul>\n    <li *ngFor=\"let item of menuItems\">\n      <a [href]=\"item.route\">{{ item.label }}</a>\n    </li>\n  </ul>\n  <div class=\"actions\">\n    <div class=\"language\">\n      <span class=\"material-icons\" aria-hidden=\"true\">language</span>\n    </div>\n    <div class=\"login\">\n      <span class=\"material-icons\" aria-hidden=\"true\">person</span>\n    </div>\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{padding:8px 16px}.menu.horizontal ul li:hover{background-color:#e9ecef;cursor:pointer}.menu .logo img{width:100%;height:100%}.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}\n"] }]
+            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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { menuItems: [{
                 type: Input
             }], logoUrl: [{
                 type: Input
             }], direction: [{
                 type: Input
+            }], languageMenuItems: [{
+                type: Input
+            }], languageSelected: [{
+                type: Output
+            }], loginSelected: [{
+                type: Output
+            }], handleClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 class VersionComponent {
@@ -911,5 +1051,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, FileSelectionComponent, FooterComponent, FormComponent, InputComponent, InputDirection, InputGroupType, InputType, LoadingComponent, LoadingSize, LoginComponent, MenuComponent, MenuDirection, ModalComponent, PaginatorComponent, SelectionComponent, SelectionType, SliderComponent, TableComponent, TagsComponent, VersionComponent };
+export { AngularDumbLibComponent, AngularDumbLibModule, AngularDumbLibService, ButtonComponent, ButtonType, CardsComponent, ContentDesignComponent, ContentDirection, DatetimePickerComponent, DesignType, FileSelectionComponent, FooterComponent, FormComponent, InputComponent, InputDirection, InputGroupType, InputType, LoadingComponent, LoadingSize, LoadingType, LoginComponent, MenuComponent, MenuDirection, ModalComponent, PaginatorComponent, SelectionComponent, SelectionType, SliderComponent, TableComponent, TagsComponent, VersionComponent, WidgetPosition };
 //# sourceMappingURL=angular-dumb-lib.mjs.map