angular-dumb-lib 0.0.8 → 0.0.10

package/fesm2022/angular-dumb-lib.mjs

@@ -1,9 +1,12 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, NgModule, EventEmitter, Input, Output, forwardRef } from '@angular/core';
+import { Injectable, Component, NgModule, EventEmitter, Input, Output, forwardRef, ContentChild, ViewContainerRef, ViewChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2$1 from 'primeng/table';
+import { TableModule } from 'primeng/table';
+import * as i3 from 'primeng/api';
 
 class AngularDumbLibService {
     constructor() { }
@@ -36,12 +39,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class AngularDumbLibModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularDumbLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AngularDumbLibModule, declarations: [AngularDumbLibComponent], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule], exports: [AngularDumbLibComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularDumbLibModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AngularDumbLibModule, declarations: [AngularDumbLibComponent], exports: [AngularDumbLibComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularDumbLibModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularDumbLibModule, decorators: [{
             type: NgModule,
@@ -49,11 +48,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     declarations: [
                         AngularDumbLibComponent,
                     ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                    ],
+                    imports: [],
                     exports: [
                         AngularDumbLibComponent,
                     ]
@@ -146,17 +141,147 @@ class ButtonComponent {
         this.clickEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { config: "config" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<button\r\n  type=\"{{config.type}}\"\r\n  class=\"btn btn-primary\"\r\n  [disabled]=\"config.isDisabled\"\r\n  [ngClass]=\"{'active': config.isActive,\r\n            'normal': config.designType === 'normal',\r\n            'contrast': config.designType === 'contrast'}\"\r\n  (click)=\"onButtonClick()\">\r\n    <div class=\"button-content\">\r\n      <ng-container *ngIf=\"config.iconValue\">\r\n      <i class=\"material-icons\" data-toggle=\"tooltip\" title=\"Delete\">{{config.iconValue}}</i>\r\n    </ng-container>\r\n    <span>{{ config.label }}</span>\r\n    </div>\r\n</button>\r\n", styles: ["button.btn.btn-primary{padding:.5rem 1rem;border:none;border-radius:.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\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-button', standalone: true, imports: [CommonModule], template: "<button\r\n  type=\"{{config.type}}\"\r\n  class=\"btn btn-primary\"\r\n  [disabled]=\"config.isDisabled\"\r\n  [ngClass]=\"{'active': config.isActive,\r\n            'normal': config.designType === 'normal',\r\n            'contrast': config.designType === 'contrast'}\"\r\n  (click)=\"onButtonClick()\">\r\n    <div class=\"button-content\">\r\n      <ng-container *ngIf=\"config.iconValue\">\r\n      <i class=\"material-icons\" data-toggle=\"tooltip\" title=\"Delete\">{{config.iconValue}}</i>\r\n    </ng-container>\r\n    <span>{{ config.label }}</span>\r\n    </div>\r\n</button>\r\n", styles: ["button.btn.btn-primary{padding:.5rem 1rem;border:none;border-radius:.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\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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }], clickEvent: [{
                 type: Output
             }] } });
 
+class DatetimePickerComponent {
+    constructor() {
+        this.selectedDate = null;
+        this.selectedTime = null;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    writeValue(value) {
+        if (value) {
+            const date = new Date(value);
+            this.selectedDate = date.toISOString().split('T')[0]; // Extract the date part (YYYY-MM-DD)
+            this.selectedTime = date.toTimeString().split(' ')[0]; // Extract the time part (HH:mm:ss)
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Handle disabled state
+    }
+    onDateChange(event) {
+        this.selectedDate = event.target.value;
+        this.emitChange();
+    }
+    onTimeChange(event) {
+        this.selectedTime = event.target.value;
+        this.emitChange();
+    }
+    emitChange() {
+        if (this.selectedDate && this.selectedTime) {
+            const dateTime = `${this.selectedDate}T${this.selectedTime}`;
+            this.onChange(new Date(dateTime));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DatetimePickerComponent, isStandalone: true, selector: "app-datetime-picker", providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DatetimePickerComponent),
+                multi: true
+            }], ngImport: i0, template: "<div class=\"datetime-picker-container\">\n  <label for=\"date\">Datetime:</label>\n  <div class=\"inputs-container\">\n    <input id=\"date\" type=\"date\" [(ngModel)]=\"selectedDate\" (ngModelChange)=\"onDateChange($event)\" (blur)=\"onTouched()\">\n    <input id=\"time\" type=\"time\" [(ngModel)]=\"selectedTime\" (ngModelChange)=\"onTimeChange($event)\" (blur)=\"onTouched()\">\n  </div>\n</div>\n", styles: [".datetime-picker-container{display:flex;flex-direction:column;margin-bottom:1rem}.datetime-picker-container label{margin-bottom:.5rem;font-weight:700}.inputs-container{display:flex;gap:1rem}.inputs-container input[type=date],.inputs-container input[type=time]{padding:.5rem;font-size:1rem;border:1px solid #ccc;border-radius:4px;width:150px}\n"], dependencies: [{ 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.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: DatetimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-datetime-picker', standalone: true, providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DatetimePickerComponent),
+                            multi: true
+                        }], imports: [FormsModule], template: "<div class=\"datetime-picker-container\">\n  <label for=\"date\">Datetime:</label>\n  <div class=\"inputs-container\">\n    <input id=\"date\" type=\"date\" [(ngModel)]=\"selectedDate\" (ngModelChange)=\"onDateChange($event)\" (blur)=\"onTouched()\">\n    <input id=\"time\" type=\"time\" [(ngModel)]=\"selectedTime\" (ngModelChange)=\"onTimeChange($event)\" (blur)=\"onTouched()\">\n  </div>\n</div>\n", styles: [".datetime-picker-container{display:flex;flex-direction:column;margin-bottom:1rem}.datetime-picker-container label{margin-bottom:.5rem;font-weight:700}.inputs-container{display:flex;gap:1rem}.inputs-container input[type=date],.inputs-container input[type=time]{padding:.5rem;font-size:1rem;border:1px solid #ccc;border-radius:4px;width:150px}\n"] }]
+        }] });
+
+class FileSelectionComponent {
+    constructor() {
+        this.imageUrl = null; // Allow imageUrl to be passed externally
+        this.fileName = null; // Allow fileName to be passed externally
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this._value = undefined;
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+        this.onChange(this._value);
+        this.onTouched();
+    }
+    ngOnInit() {
+        this.config = {
+            type: ButtonType.button,
+            label: this.chooseFileLabel
+        };
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            const file = input.files[0];
+            // Store the file name to display it in the UI
+            this.fileName = file.name;
+            this.value = file;
+            // Generate image preview URL if it's an image
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                this.imageUrl = e.target.result; // Set image URL for preview
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    triggerFileInput() {
+        const fileInput = document.getElementById('fileInput');
+        fileInput.click(); // Programmatically click the hidden file input
+    }
+    writeValue(value) {
+        this._value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Implement if you need to handle disabled state
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileSelectionComponent, isStandalone: true, selector: "app-file-selection", inputs: { label: "label", chooseFileLabel: "chooseFileLabel", imageUrl: "imageUrl", fileName: "fileName" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FileSelectionComponent),
+                multi: true
+            }], ngImport: i0, template: "<div class=\"file-selector\">\n  <label *ngIf=\"label\">{{ label }}</label>\n  <input\n  id=\"fileInput\"\n  type=\"file\"\n  (change)=\"onFileSelected($event)\"\n  accept=\"image/*\"\n  class=\"hidden-file-input\">\n  <div class=\"file-selection\">\n    <!-- Custom button to trigger file input -->\n    <app-button [config]=\"config\"\n    class=\"custom-file-button\"\n    (clickEvent)=\"triggerFileInput()\">\n      Select Image\n    </app-button>\n    <div *ngIf=\"fileName\" class=\"file-name\">\n      {{ fileName }}\n    </div>\n  </div>\n\n  <div *ngIf=\"imageUrl\">\n    <img [src]=\"imageUrl\" alt=\"Selected Image\" class=\"preview-image\"/>\n  </div>\n</div>\n", styles: [".file-selector{display:flex;flex-direction:column;align-items:flex-start}.file-selector label{font-size:14px;color:#666;margin-bottom:8px;font-weight:700}.file-selector input[type=file]{margin-bottom:16px}.file-selector .preview-image{max-width:150px;max-height:150px;border:1px solid #ccc;margin-top:8px}.file-selector .hidden-file-input{opacity:0;position:absolute;z-index:-1}.file-selector .file-selection{display:flex;align-items:center;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileSelectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-file-selection', standalone: true, providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FileSelectionComponent),
+                            multi: true
+                        }], imports: [CommonModule, ButtonComponent], template: "<div class=\"file-selector\">\n  <label *ngIf=\"label\">{{ label }}</label>\n  <input\n  id=\"fileInput\"\n  type=\"file\"\n  (change)=\"onFileSelected($event)\"\n  accept=\"image/*\"\n  class=\"hidden-file-input\">\n  <div class=\"file-selection\">\n    <!-- Custom button to trigger file input -->\n    <app-button [config]=\"config\"\n    class=\"custom-file-button\"\n    (clickEvent)=\"triggerFileInput()\">\n      Select Image\n    </app-button>\n    <div *ngIf=\"fileName\" class=\"file-name\">\n      {{ fileName }}\n    </div>\n  </div>\n\n  <div *ngIf=\"imageUrl\">\n    <img [src]=\"imageUrl\" alt=\"Selected Image\" class=\"preview-image\"/>\n  </div>\n</div>\n", styles: [".file-selector{display:flex;flex-direction:column;align-items:flex-start}.file-selector label{font-size:14px;color:#666;margin-bottom:8px;font-weight:700}.file-selector input[type=file]{margin-bottom:16px}.file-selector .preview-image{max-width:150px;max-height:150px;border:1px solid #ccc;margin-top:8px}.file-selector .hidden-file-input{opacity:0;position:absolute;z-index:-1}.file-selector .file-selection{display:flex;align-items:center;gap:10px}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], chooseFileLabel: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], fileName: [{
+                type: Input
+            }] } });
+
 class InputComponent {
     get value() {
         return this._value;
@@ -193,7 +318,7 @@ class InputComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputComponent),
                 multi: true
-            }], ngImport: i0, template: "<div class=\"input-item\" [ngClass]=\"config.direction\">\r\n  <label *ngIf=\"config.label\">\r\n    {{ config.label }}\r\n    <span *ngIf=\"config.required\" class=\"required-indicator\">*</span>\r\n  </label>\r\n\r\n  <div class=\"input-container\">\r\n    <input *ngIf=\"config.type !== 'textarea' && config.type !== 'richText' && config.type !== 'image'\"\r\n      [type]=\"config.type\"\r\n      [name]=\"config.name\"\r\n      [required]=\"config.required\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder] = \"config.placeholder\"\r\n      [ngClass]=\"{'input-error': !config.isValid}\">\r\n    <textarea *ngIf=\"config.type === 'textarea'\"\r\n        [name]=\"config.name\"\r\n        [required]=\"config.required\"\r\n        [(ngModel)]=\"value\"\r\n        [placeholder] = \"config.placeholder\"\r\n        [ngClass]=\"{'input-error': !config.isValid}\">\r\n    </textarea>\r\n    <i *ngIf=\"!config.isValid\" class=\"material-icons warning-icon\">error</i>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.type === 'image'\">\r\n    <img *ngIf=\"value\" [src]=\"value\" alt=\"Selected Image\" class=\"preview-image\"/>\r\n  </div>\r\n</div>\r\n", styles: [".input-item{display:flex;width:100%;gap:10px}.input-item .input-container{display:flex;width:inherit}.input-item .input-container .input-error{border-color:red}.input-item label{display:flex;align-items:center}.input-item.horizontal{flex-direction:row}.input-item.horizontal label{width:30%}.input-item.vertical{flex-direction:column}.input-item .preview-image{max-width:150px;max-height:150px;border:1px solid #ccc;margin-top:8px}.input-item .required-indicator,.input-item .warning-icon{display:flex;align-items:center;color:red;margin-left:4px}.input-item .warning-icon{font-weight:700}.input-item input,.input-item textarea{padding:.5rem;border:1px solid #ccc;border-radius:.25rem;width:-webkit-fill-available}.input-item quill-editor{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+            }], ngImport: i0, template: "<div class=\"input-item\" [ngClass]=\"config.direction\">\n  <label *ngIf=\"config.label\">\n    {{ config.label }}\n    <span *ngIf=\"config.required\" class=\"required-indicator\">*</span>\n  </label>\n\n  <div class=\"input-container\">\n    <input *ngIf=\"config.type !== 'textarea' && config.type !== 'richText' && config.type !== 'image'\"\n      [type]=\"config.type\"\n      [name]=\"config.name\"\n      [required]=\"config.required\"\n      [(ngModel)]=\"value\"\n      [placeholder] = \"config.placeholder\"\n      [ngClass]=\"{'input-error': !config.isValid}\">\n    <textarea *ngIf=\"config.type === 'textarea'\"\n        [name]=\"config.name\"\n        [required]=\"config.required\"\n        [(ngModel)]=\"value\"\n        [placeholder] = \"config.placeholder\"\n        [ngClass]=\"{'input-error': !config.isValid}\">\n    </textarea>\n    <i *ngIf=\"!config.isValid\" class=\"material-icons warning-icon\">error</i>\n  </div>\n\n  <div *ngIf=\"config.type === 'image'\">\n    <img *ngIf=\"value\" [src]=\"value\" alt=\"Selected Image\" class=\"preview-image\"/>\n  </div>\n</div>\n", styles: [".input-item{display:flex;width:100%;gap:10px}.input-item .input-container{display:flex;width:inherit}.input-item .input-container .input-error{border-color:red}.input-item label{display:flex;align-items:center}.input-item.horizontal{flex-direction:row}.input-item.horizontal label{width:30%}.input-item.vertical{flex-direction:column}.input-item .preview-image{max-width:150px;max-height:150px;border:1px solid #ccc;margin-top:8px}.input-item .required-indicator,.input-item .warning-icon{display:flex;align-items:center;color:red;margin-left:4px}.input-item .warning-icon{font-weight:700}.input-item input,.input-item textarea{padding:.5rem;border:1px solid #ccc;border-radius:.25rem;width:-webkit-fill-available}.input-item quill-editor{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -201,11 +326,206 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputComponent),
                             multi: true
-                        }], imports: [CommonModule, FormsModule], template: "<div class=\"input-item\" [ngClass]=\"config.direction\">\r\n  <label *ngIf=\"config.label\">\r\n    {{ config.label }}\r\n    <span *ngIf=\"config.required\" class=\"required-indicator\">*</span>\r\n  </label>\r\n\r\n  <div class=\"input-container\">\r\n    <input *ngIf=\"config.type !== 'textarea' && config.type !== 'richText' && config.type !== 'image'\"\r\n      [type]=\"config.type\"\r\n      [name]=\"config.name\"\r\n      [required]=\"config.required\"\r\n      [(ngModel)]=\"value\"\r\n      [placeholder] = \"config.placeholder\"\r\n      [ngClass]=\"{'input-error': !config.isValid}\">\r\n    <textarea *ngIf=\"config.type === 'textarea'\"\r\n        [name]=\"config.name\"\r\n        [required]=\"config.required\"\r\n        [(ngModel)]=\"value\"\r\n        [placeholder] = \"config.placeholder\"\r\n        [ngClass]=\"{'input-error': !config.isValid}\">\r\n    </textarea>\r\n    <i *ngIf=\"!config.isValid\" class=\"material-icons warning-icon\">error</i>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.type === 'image'\">\r\n    <img *ngIf=\"value\" [src]=\"value\" alt=\"Selected Image\" class=\"preview-image\"/>\r\n  </div>\r\n</div>\r\n", styles: [".input-item{display:flex;width:100%;gap:10px}.input-item .input-container{display:flex;width:inherit}.input-item .input-container .input-error{border-color:red}.input-item label{display:flex;align-items:center}.input-item.horizontal{flex-direction:row}.input-item.horizontal label{width:30%}.input-item.vertical{flex-direction:column}.input-item .preview-image{max-width:150px;max-height:150px;border:1px solid #ccc;margin-top:8px}.input-item .required-indicator,.input-item .warning-icon{display:flex;align-items:center;color:red;margin-left:4px}.input-item .warning-icon{font-weight:700}.input-item input,.input-item textarea{padding:.5rem;border:1px solid #ccc;border-radius:.25rem;width:-webkit-fill-available}.input-item quill-editor{width:100%}\n"] }]
+                        }], imports: [CommonModule, FormsModule], template: "<div class=\"input-item\" [ngClass]=\"config.direction\">\n  <label *ngIf=\"config.label\">\n    {{ config.label }}\n    <span *ngIf=\"config.required\" class=\"required-indicator\">*</span>\n  </label>\n\n  <div class=\"input-container\">\n    <input *ngIf=\"config.type !== 'textarea' && config.type !== 'richText' && config.type !== 'image'\"\n      [type]=\"config.type\"\n      [name]=\"config.name\"\n      [required]=\"config.required\"\n      [(ngModel)]=\"value\"\n      [placeholder] = \"config.placeholder\"\n      [ngClass]=\"{'input-error': !config.isValid}\">\n    <textarea *ngIf=\"config.type === 'textarea'\"\n        [name]=\"config.name\"\n        [required]=\"config.required\"\n        [(ngModel)]=\"value\"\n        [placeholder] = \"config.placeholder\"\n        [ngClass]=\"{'input-error': !config.isValid}\">\n    </textarea>\n    <i *ngIf=\"!config.isValid\" class=\"material-icons warning-icon\">error</i>\n  </div>\n\n  <div *ngIf=\"config.type === 'image'\">\n    <img *ngIf=\"value\" [src]=\"value\" alt=\"Selected Image\" class=\"preview-image\"/>\n  </div>\n</div>\n", styles: [".input-item{display:flex;width:100%;gap:10px}.input-item .input-container{display:flex;width:inherit}.input-item .input-container .input-error{border-color:red}.input-item label{display:flex;align-items:center}.input-item.horizontal{flex-direction:row}.input-item.horizontal label{width:30%}.input-item.vertical{flex-direction:column}.input-item .preview-image{max-width:150px;max-height:150px;border:1px solid #ccc;margin-top:8px}.input-item .required-indicator,.input-item .warning-icon{display:flex;align-items:center;color:red;margin-left:4px}.input-item .warning-icon{font-weight:700}.input-item input,.input-item textarea{padding:.5rem;border:1px solid #ccc;border-radius:.25rem;width:-webkit-fill-available}.input-item quill-editor{width:100%}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }] } });
 
+class LoadingComponent {
+    constructor() {
+        this.size = LoadingSize.Medium;
+        this.imageSrc = '';
+    }
+    ngOnInit() {
+    }
+    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"] }] }); }
+}
+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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { size: [{
+                type: Input
+            }], imageSrc: [{
+                type: Input
+            }] } });
+
+class SelectionComponent {
+    constructor() {
+        this.label = ''; // Label for the dropdown
+        this.options = []; // Array of options
+        this.selectedValues = []; // Pre-selected values (multi-selection)
+        this.isMultiSelect = false; // Enable multi-selection for dropdown
+        this.displayType = SelectionType.dropdown; // Control the display type (dropdown, radio, or checkbox)
+        this.selectedChange = new EventEmitter(); // Event emitter for value changes
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    get value() {
+        return this.selectedValue;
+    }
+    set value(value) {
+        this.selectedValue = (this.isMultiSelect === false && Array.isArray(value)) ? value[0] : value;
+        this.onChange(this.selectedValue);
+        this.onTouched();
+    }
+    ngOnInit() {
+        if (this.options && this.options.length > 0 && !this.isMultiSelect) {
+            this.selectedValue = this.options[0].value;
+            this.onChange(this.selectedValue);
+        }
+    }
+    onSelectChange(event) {
+        this.selectedChange.emit(this.selectedValue);
+    }
+    onMultiSelectChange(event) {
+        const target = event.target;
+        const value = target.value;
+        if (target.checked) {
+            this.selectedValues.push(value);
+        }
+        else {
+            this.selectedValues = this.selectedValues.filter(v => v !== value);
+        }
+        this.selectedChange.emit(this.selectedValues);
+    }
+    isSelected(value) {
+        return this.isMultiSelect ? this.selectedValues.includes(value) : value === this.selectedValue;
+    }
+    writeValue(value) {
+        this.selectedValue = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Implement if you need to handle disabled state
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectionComponent, isStandalone: true, selector: "app-selection", inputs: { label: "label", options: "options", selectedValue: "selectedValue", selectedValues: "selectedValues", isMultiSelect: "isMultiSelect", displayType: "displayType" }, outputs: { selectedChange: "selectedChange" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectionComponent),
+                multi: true
+            }], ngImport: i0, template: "<div class=\"dropdown\" *ngIf=\"displayType === 'dropdown'\">\n  <label *ngIf=\"label\">{{ label }}</label>\n  <select\n  (change)=\"onSelectChange($event)\"\n  [multiple]=\"isMultiSelect\"\n  [(ngModel)]=\"value\">\n    <option *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [selected]=\"isSelected(option.value)\">\n      {{ option.label }}\n    </option>\n  </select>\n</div>\n\n<div class=\"radio-group\" *ngIf=\"displayType === 'radio'\">\n  <label *ngIf=\"label\">{{ label }}</label>\n  <div *ngFor=\"let option of options\">\n    <input\n      type=\"radio\"\n      [value]=\"option.value\"\n      [checked]=\"option.value === selectedValue\"\n      (change)=\"onSelectChange($event)\"\n      name=\"radioGroup\"/>\n    <label>{{ option.label }}</label>\n  </div>\n</div>\n\n<div class=\"checkbox-group\" *ngIf=\"displayType === 'checkbox'\">\n  <label *ngIf=\"label\">{{ label }}</label>\n  <div *ngFor=\"let option of options\">\n    <input\n      type=\"checkbox\"\n      [value]=\"option.value\"\n      [checked]=\"isSelected(option.value)\"\n      (change)=\"onMultiSelectChange($event)\"/>\n    <label>{{ option.label }}</label>\n  </div>\n</div>\n", styles: [".dropdown,.radio-group,.checkbox-group{display:flex;flex-direction:column;width:100%;min-width:150px}.dropdown label,.radio-group label,.checkbox-group label{font-size:12px;color:#666;margin-bottom:4px;font-weight:700}.dropdown select{width:100%;padding:9px 8px;font-size:12px;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;appearance:none;cursor:pointer;transition:border-color .3s,box-shadow .3s}.dropdown select:hover{border-color:#888}.dropdown select:focus{border-color:#03a9f4;box-shadow:0 0 5px #03a9f480;outline:none}.radio-group div,.checkbox-group div{display:flex;align-items:center;margin-bottom:8px}.radio-group input[type=radio],.checkbox-group input[type=checkbox]{margin-right:8px;cursor:pointer}.radio-group label,.checkbox-group label{font-size:12px;color:#333;cursor:pointer}.radio-group input[type=radio]:focus,.checkbox-group input[type=checkbox]:focus{outline:2px solid #03A9F4;outline-offset:2px}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: SelectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-selection', standalone: true, providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectionComponent),
+                            multi: true
+                        }], imports: [CommonModule, FormsModule], template: "<div class=\"dropdown\" *ngIf=\"displayType === 'dropdown'\">\n  <label *ngIf=\"label\">{{ label }}</label>\n  <select\n  (change)=\"onSelectChange($event)\"\n  [multiple]=\"isMultiSelect\"\n  [(ngModel)]=\"value\">\n    <option *ngFor=\"let option of options\"\n    [value]=\"option.value\"\n    [selected]=\"isSelected(option.value)\">\n      {{ option.label }}\n    </option>\n  </select>\n</div>\n\n<div class=\"radio-group\" *ngIf=\"displayType === 'radio'\">\n  <label *ngIf=\"label\">{{ label }}</label>\n  <div *ngFor=\"let option of options\">\n    <input\n      type=\"radio\"\n      [value]=\"option.value\"\n      [checked]=\"option.value === selectedValue\"\n      (change)=\"onSelectChange($event)\"\n      name=\"radioGroup\"/>\n    <label>{{ option.label }}</label>\n  </div>\n</div>\n\n<div class=\"checkbox-group\" *ngIf=\"displayType === 'checkbox'\">\n  <label *ngIf=\"label\">{{ label }}</label>\n  <div *ngFor=\"let option of options\">\n    <input\n      type=\"checkbox\"\n      [value]=\"option.value\"\n      [checked]=\"isSelected(option.value)\"\n      (change)=\"onMultiSelectChange($event)\"/>\n    <label>{{ option.label }}</label>\n  </div>\n</div>\n", styles: [".dropdown,.radio-group,.checkbox-group{display:flex;flex-direction:column;width:100%;min-width:150px}.dropdown label,.radio-group label,.checkbox-group label{font-size:12px;color:#666;margin-bottom:4px;font-weight:700}.dropdown select{width:100%;padding:9px 8px;font-size:12px;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;appearance:none;cursor:pointer;transition:border-color .3s,box-shadow .3s}.dropdown select:hover{border-color:#888}.dropdown select:focus{border-color:#03a9f4;box-shadow:0 0 5px #03a9f480;outline:none}.radio-group div,.checkbox-group div{display:flex;align-items:center;margin-bottom:8px}.radio-group input[type=radio],.checkbox-group input[type=checkbox]{margin-right:8px;cursor:pointer}.radio-group label,.checkbox-group label{font-size:12px;color:#333;cursor:pointer}.radio-group input[type=radio]:focus,.checkbox-group input[type=checkbox]:focus{outline:2px solid #03A9F4;outline-offset:2px}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], selectedValue: [{
+                type: Input
+            }], selectedValues: [{
+                type: Input
+            }], isMultiSelect: [{
+                type: Input
+            }], displayType: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }] } });
+
+class SliderComponent {
+    constructor() {
+        this.images = [];
+        this.autoSlide = false;
+        this.slideInterval = 3000; // Time interval for auto slide
+        this.currentIndex = 0;
+    }
+    ngOnInit() {
+        if (this.autoSlide) {
+            this.startAutoSlide();
+        }
+    }
+    startAutoSlide() {
+        setInterval(() => {
+            this.nextSlide();
+        }, this.slideInterval);
+    }
+    prevSlide() {
+        this.currentIndex = this.currentIndex === 0 ? this.images.length - 1 : this.currentIndex - 1;
+    }
+    nextSlide() {
+        this.currentIndex = this.currentIndex === this.images.length - 1 ? 0 : this.currentIndex + 1;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SliderComponent, isStandalone: true, selector: "app-slider", inputs: { images: "images", autoSlide: "autoSlide", slideInterval: "slideInterval" }, ngImport: i0, template: "<div class=\"slider-container\">\n  <div class=\"slider-wrapper\">\n    <div\n      class=\"slide\"\n      *ngFor=\"let image of images; let i = index\"\n      [class.active]=\"i === currentIndex\"\n      [ngStyle]=\"{'background-image': 'url(' + image + ')'}\">\n    </div>\n  </div>\n\n  <!-- Navigation Buttons -->\n  <button class=\"prev\" (click)=\"prevSlide()\">&#10094;</button>\n  <button class=\"next\" (click)=\"nextSlide()\">&#10095;</button>\n</div>\n", styles: [".slider-container{position:relative;width:100%;margin:auto;overflow:hidden}.slider-wrapper{position:relative;width:100%;height:400px}.slide{position:absolute;width:100%;height:100%;background-size:cover;background-position:center;opacity:0;transition:opacity .5s ease-in-out}.slide.active{opacity:1}.prev,.next{position:absolute;top:50%;transform:translateY(-50%);background-color:#00000080;color:#fff;border:none;padding:10px;cursor:pointer;font-size:18px}.prev{left:10px}.next{right:10px}.prev:hover,.next:hover{background-color:#000c}\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: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-slider', standalone: true, imports: [CommonModule], template: "<div class=\"slider-container\">\n  <div class=\"slider-wrapper\">\n    <div\n      class=\"slide\"\n      *ngFor=\"let image of images; let i = index\"\n      [class.active]=\"i === currentIndex\"\n      [ngStyle]=\"{'background-image': 'url(' + image + ')'}\">\n    </div>\n  </div>\n\n  <!-- Navigation Buttons -->\n  <button class=\"prev\" (click)=\"prevSlide()\">&#10094;</button>\n  <button class=\"next\" (click)=\"nextSlide()\">&#10095;</button>\n</div>\n", styles: [".slider-container{position:relative;width:100%;margin:auto;overflow:hidden}.slider-wrapper{position:relative;width:100%;height:400px}.slide{position:absolute;width:100%;height:100%;background-size:cover;background-position:center;opacity:0;transition:opacity .5s ease-in-out}.slide.active{opacity:1}.prev,.next{position:absolute;top:50%;transform:translateY(-50%);background-color:#00000080;color:#fff;border:none;padding:10px;cursor:pointer;font-size:18px}.prev{left:10px}.next{right:10px}.prev:hover,.next:hover{background-color:#000c}\n"] }]
+        }], propDecorators: { images: [{
+                type: Input
+            }], autoSlide: [{
+                type: Input
+            }], slideInterval: [{
+                type: Input
+            }] } });
+
+class TagsComponent {
+    constructor() {
+        this.availableTags = ['abc', 'dce'];
+        this.filteredTags = [];
+        this.selectedTags = [];
+        this.searchText = '';
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    ngOnInit() {
+        this.filteredTags = this.availableTags; // Initialize the filtered tags list
+    }
+    writeValue(value) {
+        if (value) {
+            this.selectedTags = value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    onTagSelectionChange(tag) {
+        if (!this.selectedTags.includes(tag)) {
+            this.selectedTags = [...this.selectedTags, tag]; // Add the tag
+            this.onChange(this.selectedTags);
+        }
+    }
+    removeTag(tag) {
+        this.selectedTags = this.selectedTags.filter(t => t !== tag); // Remove the tag
+        this.onChange(this.selectedTags);
+    }
+    filterTags() {
+        this.filteredTags = this.availableTags.filter(tag => tag.toLowerCase().includes(this.searchText.toLowerCase()) &&
+            !this.selectedTags.includes(tag));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagsComponent, isStandalone: true, selector: "app-tags", inputs: { availableTags: "availableTags" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TagsComponent),
+                multi: true
+            }], ngImport: i0, template: "<div class=\"tags-select-container\">\n  <label for=\"searchTags\">Search and Select Tags:</label>\n  <input\n    id=\"searchTags\"\n    type=\"text\"\n    [(ngModel)]=\"searchText\"\n    (input)=\"filterTags()\"\n    placeholder=\"Search tags...\"\n  />\n\n  <div *ngIf=\"filteredTags.length > 0\">\n    <ul class=\"tag-list\">\n      <li *ngFor=\"let tag of filteredTags\" (click)=\"onTagSelectionChange(tag)\">\n        {{ tag }}\n      </li>\n    </ul>\n  </div>\n\n  <div class=\"selected-tags\">\n    <button *ngFor=\"let tag of selectedTags\" class=\"tag-button\">\n      {{ tag }}\n      <span class=\"remove-tag\" (click)=\"removeTag(tag)\">x</span>\n    </button>\n  </div>\n</div>\n", styles: [".tags-select-container{display:flex;flex-direction:column}input[type=text]{padding:5px;border:1px solid #ccc;border-radius:4px;width:200px;margin-bottom:10px}.tag-list{list-style-type:none;padding-left:0;margin:0;border:1px solid #ccc;max-height:100px;overflow-y:auto}.tag-list li{padding:5px;cursor:pointer;border-bottom:1px solid #ddd}.tag-list li:hover{background-color:#f1f1f1}.selected-tags{display:flex;flex-wrap:wrap;gap:5px}.tag-button{background-color:#007bff;color:#fff;border:none;border-radius:20px;padding:5px 10px;display:flex;align-items:center;cursor:pointer}.tag-button .remove-tag{margin-left:8px;background:none;border:none;font-size:1rem;font-weight:700;color:#fff;cursor:pointer}\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: "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.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: TagsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-tags', standalone: true, providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TagsComponent),
+                            multi: true
+                        }], imports: [CommonModule, FormsModule], template: "<div class=\"tags-select-container\">\n  <label for=\"searchTags\">Search and Select Tags:</label>\n  <input\n    id=\"searchTags\"\n    type=\"text\"\n    [(ngModel)]=\"searchText\"\n    (input)=\"filterTags()\"\n    placeholder=\"Search tags...\"\n  />\n\n  <div *ngIf=\"filteredTags.length > 0\">\n    <ul class=\"tag-list\">\n      <li *ngFor=\"let tag of filteredTags\" (click)=\"onTagSelectionChange(tag)\">\n        {{ tag }}\n      </li>\n    </ul>\n  </div>\n\n  <div class=\"selected-tags\">\n    <button *ngFor=\"let tag of selectedTags\" class=\"tag-button\">\n      {{ tag }}\n      <span class=\"remove-tag\" (click)=\"removeTag(tag)\">x</span>\n    </button>\n  </div>\n</div>\n", styles: [".tags-select-container{display:flex;flex-direction:column}input[type=text]{padding:5px;border:1px solid #ccc;border-radius:4px;width:200px;margin-bottom:10px}.tag-list{list-style-type:none;padding-left:0;margin:0;border:1px solid #ccc;max-height:100px;overflow-y:auto}.tag-list li{padding:5px;cursor:pointer;border-bottom:1px solid #ddd}.tag-list li:hover{background-color:#f1f1f1}.selected-tags{display:flex;flex-wrap:wrap;gap:5px}.tag-button{background-color:#007bff;color:#fff;border:none;border-radius:20px;padding:5px 10px;display:flex;align-items:center;cursor:pointer}.tag-button .remove-tag{margin-left:8px;background:none;border:none;font-size:1rem;font-weight:700;color:#fff;cursor:pointer}\n"] }]
+        }], propDecorators: { availableTags: [{
+                type: Input
+            }] } });
+
 class ContentDesignComponent {
     constructor() {
         this.clickEvent = new EventEmitter();
@@ -231,6 +551,358 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+class CardsComponent {
+    constructor() {
+        this.cardContents = [];
+    }
+    ngOnInit() {
+    }
+    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"] }] }); }
+}
+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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { cardContents: [{
+                type: Input
+            }] } });
+
+const textualInputTypes = [InputType.text, InputType.password, InputType.email, InputType.url,
+    InputType.tel, InputType.search, InputType.number, InputType.range,
+    InputType.hidden, InputType.textarea, InputType.richText, InputType.image];
+const selectionInputTypes = [InputType.checkbox, InputType.radio, InputType.select];
+
+class FormComponent {
+    constructor() {
+        this.buttonConfig = {
+            label: "Submit"
+        };
+        this.formSubmit = new EventEmitter();
+        this.formChange = new EventEmitter();
+    }
+    // Define the editor configuration
+    onSubmit() {
+        if (this.formGroup.valid) {
+            this.formSubmit.emit(this.formGroup.value);
+        }
+        else {
+            console.log('Form not valid');
+        }
+    }
+    onValueChange(controlName, value) {
+        this.formChange.emit({ controlName, value });
+    }
+    checkFormConfigType(inputType) {
+        if (inputType) {
+            if (textualInputTypes.includes(inputType)) {
+                return InputGroupType.textual;
+            }
+            if (selectionInputTypes.includes(inputType)) {
+                return InputGroupType.selection;
+            }
+            if (inputType === InputType.file) {
+                return InputGroupType.file;
+            }
+            if (inputType === InputType.datetime) {
+                return InputGroupType.datetime;
+            }
+        }
+        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"] }] }); }
+}
+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"] }]
+        }], propDecorators: { formGroup: [{
+                type: Input
+            }], inputConfigs: [{
+                type: Input
+            }], buttonConfig: [{
+                type: Input
+            }], validationMessages: [{
+                type: Input
+            }], formSubmit: [{
+                type: Output
+            }], formChange: [{
+                type: Output
+            }] } });
+
+class ModalComponent {
+    constructor() {
+        this.okConfig = {
+            label: "Ok"
+        };
+        this.cancelConfig = {
+            label: "Cancel"
+        };
+    }
+    ngOnInit() {
+    }
+    closeModal() {
+        this.modalEvent.isModalVisible = false;
+    }
+    handleOverlayClick(event) {
+        this.closeModal();
+    }
+    handleContentClick(event) {
+        event.stopPropagation();
+    }
+    ok() {
+        if (this.modalEvent && this.modalEvent.onOk) {
+            this.modalEvent.onOk();
+            this.closeModal();
+        }
+    }
+    cancel() {
+        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"] }] }); }
+}
+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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { modalEvent: [{
+                type: Input
+            }] } });
+
+class PaginatorComponent {
+    constructor() {
+        this.itemsPerPageList = [];
+        this.inputConfig = {
+            label: 'Go to page',
+            direction: InputDirection.horizontal,
+            name: 'inputConfig',
+            required: false
+        };
+        this.previousButtonConfig = {
+            iconValue: 'chevron_left',
+            type: ButtonType.button,
+            isDisabled: true
+        };
+        this.nextButtonConfig = {
+            iconValue: 'chevron_right',
+            type: ButtonType.button,
+            isDisabled: false
+        };
+        this.numberOfPage = 0;
+        this.itemsPerPage = 0;
+        this.selectedPage = 0;
+        this.totalRecords = 0;
+        this.paginator = new EventEmitter();
+    }
+    get pageNumbers() {
+        return Array.from({ length: this.numberOfPage }, (_, i) => i + 1);
+    }
+    ngOnInit() {
+        this.itemsPerPageList = [
+            {
+                label: "3",
+                value: 1
+            },
+            {
+                label: "5",
+                value: 2
+            },
+            {
+                label: "20",
+                value: 3
+            }
+        ];
+        this.selectedPage = 1;
+        this.buttonType = ButtonType.button;
+        this.inputDirection = InputDirection.horizontal;
+        this.itemsPerPage = parseInt(this.itemsPerPageList[0].label);
+        this.calculateNumberOfPage(this.totalRecords, this.itemsPerPage);
+        this.updateButtonConfigs();
+        this.emitPaging();
+    }
+    ngOnChanges() {
+        this.calculateNumberOfPage(this.totalRecords, this.itemsPerPage);
+    }
+    selectPage(i) {
+        this.selectedPage = i;
+        this.updateButtonConfigs();
+        this.emitPaging();
+    }
+    onChangeNumberOfPage(itemsPerPageId) {
+        this.selectedPage = 1;
+        this.itemsPerPage = parseInt(this.itemsPerPageList.find(i => i.value === parseInt(itemsPerPageId))?.label ??
+            this.itemsPerPage.toString());
+        this.calculateNumberOfPage(this.totalRecords, this.itemsPerPage);
+        this.updateButtonConfigs();
+        this.emitPaging();
+    }
+    emitPaging() {
+        let paging = {
+            itemsPerPage: this.itemsPerPage,
+            selectedPage: this.selectedPage
+        };
+        this.paginator.emit(paging);
+    }
+    calculateNumberOfPage(totalRecords, itemsPerPage) {
+        return this.numberOfPage = Math.ceil(totalRecords / itemsPerPage);
+    }
+    updateButtonConfigs() {
+        // Re-assign the button configuration to trigger change detection
+        this.previousButtonConfig = {
+            ...this.previousButtonConfig,
+            isDisabled: this.selectedPage <= 1
+        };
+        this.nextButtonConfig = {
+            ...this.nextButtonConfig,
+            isDisabled: this.selectedPage >= this.numberOfPage
+        };
+    }
+    // Method to return config for page number buttons
+    getPageButtonConfig(page) {
+        return {
+            label: page.toString(),
+            type: ButtonType.button,
+            isActive: page === this.selectedPage,
+            isDisabled: false // Page buttons are never disabled
+        };
+    }
+    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"] }] }); }
+}
+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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { totalRecords: [{
+                type: Input
+            }], paginator: [{
+                type: Output
+            }] } });
+
+class TableComponent {
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        this.items = [];
+        this.columns = [];
+        this.totalRecords = 0;
+        this.tableName = '';
+        this.paginator = new EventEmitter();
+        this.allSelected = false;
+    }
+    ngOnInit() {
+        this.loadingState.subscribe(() => {
+            this.cdRef.detectChanges(); // Explicitly mark for change detection
+        });
+    }
+    changePaginator(paging) {
+        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"] }] }); }
+}
+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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], totalRecords: [{
+                type: Input
+            }], tableName: [{
+                type: Input
+            }], loadingState: [{
+                type: Input
+            }], paginator: [{
+                type: Output
+            }], bodyTemplate: [{
+                type: ContentChild,
+                args: ['bodyTemplate']
+            }] } });
+
+class FooterComponent {
+    constructor() { }
+    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"] }); }
+}
+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"] }]
+        }], ctorParameters: function () { return []; } });
+
+class LoginComponent {
+    constructor() {
+    }
+    ngOnInit() {
+    }
+    // After the view initializes, we render the button
+    ngAfterViewInit() {
+        // Clear any existing content in the container
+        this.buttonContainer.clear();
+        // Render the provided button template inside the container
+        if (this.buttonTemplate) {
+            this.buttonContainer.createEmbeddedView(this.buttonTemplate);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoginComponent, isStandalone: true, selector: "app-login", inputs: { buttonTemplate: "buttonTemplate" }, viewQueries: [{ propertyName: "buttonContainer", first: true, predicate: ["buttonContainer"], descendants: true, 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 }] }); }
+}
+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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { buttonTemplate: [{
+                type: Input
+            }], buttonContainer: [{
+                type: ViewChild,
+                args: ['buttonContainer', { read: ViewContainerRef }]
+            }] } });
+
+class MenuComponent {
+    constructor() {
+        this.menuItems = [];
+        this.logoUrl = "";
+        this.direction = MenuDirection.horizontal;
+    }
+    ngOnInit() {
+    }
+    get isVertical() {
+        return this.direction === MenuDirection.vertical;
+    }
+    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"] }] }); }
+}
+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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { menuItems: [{
+                type: Input
+            }], logoUrl: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }] } });
+
+class VersionComponent {
+    constructor() {
+        this.content = {
+            title: 'Card 2 Title',
+            content: 'This is an example of left-aligned content.',
+            coverImage: 'https://via.placeholder.com/150',
+            contentDirection: ContentDirection.right,
+            template: null
+        };
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VersionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: VersionComponent, isStandalone: true, selector: "app-version", ngImport: i0, template: "<app-content-design\n[content] = \"content\">\n</app-content-design>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: VersionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-version', standalone: true, imports: [CommonModule, ContentDesignComponent], template: "<app-content-design\n[content] = \"content\">\n</app-content-design>\n" }]
+        }], ctorParameters: function () { return []; } });
+
 /*
  * Public API Surface of angular-dumb-lib
  */
@@ -239,5 +911,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AngularDumbLibComponent, AngularDumbLibModule, AngularDumbLibService, ButtonComponent, ContentDesignComponent, InputComponent };
+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 };
 //# sourceMappingURL=angular-dumb-lib.mjs.map