angular-dumb-lib 0.0.30 → 0.0.32

package/fesm2022/angular-dumb-lib.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, NgModule, EventEmitter, Output, Input, forwardRef, ContentChild, ViewChild, HostListener } from '@angular/core';
+import { Injectable, Component, NgModule, EventEmitter, Output, Input, forwardRef, ViewChild, ContentChild, HostListener } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { Subject, takeUntil } from 'rxjs';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
+import { Subject, takeUntil, BehaviorSubject, of } from 'rxjs';
 import * as i1$1 from '@angular/platform-browser';
 import * as i2$1 from 'primeng/table';
 import { TableModule } from 'primeng/table';
@@ -101,6 +101,11 @@ var InputType;
     InputType["select"] = "select";
     InputType["file"] = "file";
 })(InputType || (InputType = {}));
+var TableColumnType;
+(function (TableColumnType) {
+    TableColumnType["text"] = "text";
+    TableColumnType["image"] = "image";
+})(TableColumnType || (TableColumnType = {}));
 var ContentDirection;
 (function (ContentDirection) {
     ContentDirection["left"] = "left";
@@ -108,12 +113,6 @@ var ContentDirection;
     ContentDirection["up"] = "up";
     ContentDirection["down"] = "down";
 })(ContentDirection || (ContentDirection = {}));
-var SelectionType;
-(function (SelectionType) {
-    SelectionType["dropdown"] = "dropdown";
-    SelectionType["radio"] = "radio";
-    SelectionType["checkbox"] = "checkbox";
-})(SelectionType || (SelectionType = {}));
 var Size;
 (function (Size) {
     Size["Xbig"] = "xbig";
@@ -247,19 +246,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
 
 class FileSelectionComponent {
     constructor() {
-        this.imageUrl = null; // Allow imageUrl to be passed externally
-        this.fileName = null; // Allow fileName to be passed externally
+        this.label = '';
+        this.chooseFileLabel = 'Select Image';
+        this.imageUrl = null;
+        this.fileName = null;
+        this.valueChange = new EventEmitter();
+        this._value = null;
+        this.isDisabled = false;
         this.onChange = () => { };
         this.onTouched = () => { };
-        this._value = undefined;
     }
     get value() {
         return this._value;
     }
-    set value(value) {
-        this._value = value;
-        this.onChange(this._value);
+    set value(val) {
+        this._value = val;
+        this.onChange(val);
         this.onTouched();
+        this.valueChange.emit(val);
     }
     ngOnInit() {
         this.config = {
@@ -269,25 +273,45 @@ class FileSelectionComponent {
     }
     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);
+        if (!input.files?.length)
+            return;
+        const file = input.files[0];
+        this.fileName = file.name;
+        this.value = file;
+        if (file.type.startsWith('image/')) {
+            this.previewImage(file);
         }
     }
+    previewImage(file) {
+        const reader = new FileReader();
+        reader.onload = () => {
+            this.imageUrl = reader.result;
+        };
+        reader.readAsDataURL(file);
+    }
     triggerFileInput() {
-        const fileInput = document.getElementById('fileInput');
-        fileInput.click(); // Programmatically click the hidden file input
+        if (!this.isDisabled) {
+            this.fileInputRef.nativeElement.click();
+        }
     }
     writeValue(value) {
         this._value = value;
+        if (value instanceof File) {
+            this.fileName = value.name;
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                this.imageUrl = e.target.result;
+            };
+            reader.readAsDataURL(value);
+        }
+        else if (typeof value === 'string') {
+            this.imageUrl = value;
+            this.fileName = value.split('/').pop() || 'image.jpg';
+        }
+        else {
+            this.imageUrl = null;
+            this.fileName = null;
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -296,14 +320,14 @@ class FileSelectionComponent {
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        // Implement if you need to handle disabled state
+        this.isDisabled = isDisabled;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FileSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: FileSelectionComponent, isStandalone: true, selector: "app-file-selection", inputs: { label: "label", chooseFileLabel: "chooseFileLabel", imageUrl: "imageUrl", fileName: "fileName" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: FileSelectionComponent, isStandalone: true, selector: "app-file-selection", inputs: { label: "label", chooseFileLabel: "chooseFileLabel", imageUrl: "imageUrl", fileName: "fileName" }, outputs: { valueChange: "valueChange" }, 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"] }] }); }
+            }], viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"file-selector\">\n  <label *ngIf=\"label\">{{ label }}</label>\n\n  <input\n    #fileInput\n    type=\"file\"\n    accept=\"image/*\"\n    (change)=\"onFileSelected($event)\"\n    class=\"hidden-file-input\"\n    [disabled]=\"isDisabled\"\n  />\n\n  <div class=\"file-selection\">\n    <app-button\n      [config]=\"config\"\n      class=\"custom-file-button\"\n      (clickEvent)=\"triggerFileInput()\"\n    >\n      {{ chooseFileLabel }}\n    </app-button>\n\n    <div *ngIf=\"fileName\" class=\"file-name\">\n      {{ fileName }}\n    </div>\n  </div>\n\n  <div *ngIf=\"imageUrl\" class=\"preview-container\">\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: "19.2.4", ngImport: i0, type: FileSelectionComponent, decorators: [{
             type: Component,
@@ -311,7 +335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                             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"] }]
+                        }], imports: [CommonModule, ButtonComponent], template: "<div class=\"file-selector\">\n  <label *ngIf=\"label\">{{ label }}</label>\n\n  <input\n    #fileInput\n    type=\"file\"\n    accept=\"image/*\"\n    (change)=\"onFileSelected($event)\"\n    class=\"hidden-file-input\"\n    [disabled]=\"isDisabled\"\n  />\n\n  <div class=\"file-selection\">\n    <app-button\n      [config]=\"config\"\n      class=\"custom-file-button\"\n      (clickEvent)=\"triggerFileInput()\"\n    >\n      {{ chooseFileLabel }}\n    </app-button>\n\n    <div *ngIf=\"fileName\" class=\"file-name\">\n      {{ fileName }}\n    </div>\n  </div>\n\n  <div *ngIf=\"imageUrl\" class=\"preview-container\">\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: [{
@@ -320,6 +344,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Input
             }], fileName: [{
                 type: Input
+            }], valueChange: [{
+                type: Output
+            }], fileInputRef: [{
+                type: ViewChild,
+                args: ['fileInput']
             }] } });
 
 class InputComponent {
@@ -406,48 +435,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
 
 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.label = '';
+        this.options = [];
+        this.isMultiSelect = false;
+        this.selectedChange = new EventEmitter();
+        this._value = [];
         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();
+        return this._value;
     }
-    ngOnInit() {
-        if (this.options && this.options.length > 0 && !this.isMultiSelect) {
-            this.selectedValue = this.options[0].value;
-            this.onChange(this.selectedValue);
+    set value(val) {
+        if (JSON.stringify(this._value) !== JSON.stringify(val)) {
+            this._value = val;
+            this.onChange(val);
+            this.onTouched();
+            this.selectedChange.emit(val);
         }
     }
-    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;
+    onDropdownChange(value) {
+        this.value = this.isMultiSelect
+            ? value
+            : (Array.isArray(value) ? value[0] : value);
     }
     writeValue(value) {
-        this.selectedValue = value;
+        this._value = this.isMultiSelect
+            ? (Array.isArray(value) ? [...value] : [])
+            : value;
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -455,35 +470,30 @@ class SelectionComponent {
     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: "19.2.4", ngImport: i0, type: SelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SelectionComponent, isStandalone: true, selector: "app-selection", inputs: { label: "label", options: "options", selectedValue: "selectedValue", selectedValues: "selectedValues", isMultiSelect: "isMultiSelect", displayType: "displayType" }, outputs: { selectedChange: "selectedChange" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SelectionComponent, isStandalone: true, selector: "app-selection", inputs: { label: "label", options: "options", isMultiSelect: "isMultiSelect" }, 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"] }] }); }
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"dropdown\">\n  <label *ngIf=\"label\">{{ label }}</label>\n  <select\n    [multiple]=\"isMultiSelect\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onDropdownChange($event)\">\n    <option *ngFor=\"let option of options\" [value]=\"option.value\">\n      {{ option.label }}\n    </option>\n  </select>\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: "19.2.4", ngImport: i0, type: SelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-selection', standalone: true, providers: [{
+            args: [{ selector: 'app-selection', standalone: true, imports: [CommonModule, FormsModule], 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"] }]
+                            multi: true,
+                        },
+                    ], template: "<div class=\"dropdown\">\n  <label *ngIf=\"label\">{{ label }}</label>\n  <select\n    [multiple]=\"isMultiSelect\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onDropdownChange($event)\">\n    <option *ngFor=\"let option of options\" [value]=\"option.value\">\n      {{ option.label }}\n    </option>\n  </select>\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
             }] } });
@@ -737,14 +747,14 @@ class FormComponent {
         return !!(control && control.invalid && (control.dirty || control.touched));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: FormComponent, isStandalone: true, selector: "app-form", inputs: { formGroup: "formGroup", inputConfigs: "inputConfigs", buttonConfig: "buttonConfig", validationMessages: "validationMessages" }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, ngImport: i0, template: "<form (ngSubmit)=\"onSubmit()\" [formGroup]=\"formGroup\">\n  <ng-container *ngIf=\"inputConfigs && inputConfigs.length > 0; else noInputs\">\n    <ng-container *ngFor=\"let inputConfig of inputConfigs; trackBy: trackByFn\">\n\n      <!-- Input Field -->\n      <app-input\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.textual\"\n        [formControlName]=\"inputConfig.name\"\n        [config]=\"inputConfig\"\n        [required]=\"inputConfig.required!\"\n        [isInvalid]=\"isControlInvalid(inputConfig.name)\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-input>\n\n      <!-- Selection Field -->\n      <app-selection\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.selection\"\n        [formControlName]=\"inputConfig.name\"\n        [label]=\"inputConfig.label!\"\n        [options]=\"inputConfig.options\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-selection>\n\n      <!-- File Selection -->\n      <app-file-selection\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.file\"\n        [formControlName]=\"inputConfig.name\"\n        [label]=\"inputConfig.label!\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-file-selection>\n\n      <!-- Validation Messages -->\n      <div *ngIf=\"formGroup.controls[inputConfig.name]?.invalid && formGroup.controls[inputConfig.name]?.touched\" class=\"error-message\">\n        <ng-container *ngIf=\"formGroup.controls[inputConfig.name]?.errors as errors\">\n          <ng-container *ngFor=\"let errorKey of getErrorKeys(errors)\">\n            <div *ngIf=\"validationMessages[inputConfig.name]?.[errorKey]\">\n              {{ validationMessages[inputConfig.name][errorKey] }}\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n\n    </ng-container>\n  </ng-container>\n\n  <!-- Submit Button -->\n  <app-button [config]=\"buttonConfig\"></app-button>\n</form>\n\n<!-- No Inputs Placeholder -->\n<ng-template #noInputs>\n  <p>No inputs configured.</p>\n</ng-template>\n", styles: ["form{display:flex;flex-direction:column;gap:15px}label{display:block;margin-bottom:.5rem}input,textarea{width:100%;padding:.5rem;border:1px solid #ccc;border-radius:.25rem}.error-message{color:red;font-size:12px;margin-top:4px}\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", "isInvalid"] }, { kind: "component", type: SelectionComponent, selector: "app-selection", inputs: ["label", "options", "selectedValue", "selectedValues", "isMultiSelect", "displayType"], outputs: ["selectedChange"] }, { kind: "component", type: FileSelectionComponent, selector: "app-file-selection", inputs: ["label", "chooseFileLabel", "imageUrl", "fileName"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: FormComponent, isStandalone: true, selector: "app-form", inputs: { formGroup: "formGroup", inputConfigs: "inputConfigs", buttonConfig: "buttonConfig", validationMessages: "validationMessages" }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, ngImport: i0, template: "<form (ngSubmit)=\"onSubmit()\" [formGroup]=\"formGroup\">\n  <ng-container *ngIf=\"inputConfigs && inputConfigs.length > 0; else noInputs\">\n    <ng-container *ngFor=\"let inputConfig of inputConfigs; trackBy: trackByFn\">\n\n      <!-- Input Field -->\n      <app-input\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.textual\"\n        [formControlName]=\"inputConfig.name\"\n        [config]=\"inputConfig\"\n        [required]=\"inputConfig.required!\"\n        [isInvalid]=\"isControlInvalid(inputConfig.name)\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-input>\n\n      <!-- Selection Field -->\n      <app-selection\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.selection\"\n        [formControlName]=\"inputConfig.name\"\n        [label]=\"inputConfig.label!\"\n        [options]=\"inputConfig.options\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-selection>\n\n      <!-- File Selection -->\n      <app-file-selection\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.file\"\n        [formControlName]=\"inputConfig.name\"\n        [label]=\"inputConfig.label!\"\n        [chooseFileLabel]=\"'Choose Image'\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-file-selection>\n\n      <!-- Validation Messages -->\n      <div *ngIf=\"formGroup.controls[inputConfig.name]?.invalid && formGroup.controls[inputConfig.name]?.touched\" class=\"error-message\">\n        <ng-container *ngIf=\"formGroup.controls[inputConfig.name]?.errors as errors\">\n          <ng-container *ngFor=\"let errorKey of getErrorKeys(errors)\">\n            <div *ngIf=\"validationMessages[inputConfig.name]?.[errorKey]\">\n              {{ validationMessages[inputConfig.name][errorKey] }}\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n\n    </ng-container>\n  </ng-container>\n\n  <!-- Submit Button -->\n  <app-button [config]=\"buttonConfig\"></app-button>\n</form>\n\n<!-- No Inputs Placeholder -->\n<ng-template #noInputs>\n  <p>No inputs configured.</p>\n</ng-template>\n", styles: ["form{display:flex;flex-direction:column;gap:15px}label{display:block;margin-bottom:.5rem}input,textarea{width:100%;padding:.5rem;border:1px solid #ccc;border-radius:.25rem}.error-message{color:red;font-size:12px;margin-top:4px}\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", "isInvalid"] }, { kind: "component", type: SelectionComponent, selector: "app-selection", inputs: ["label", "options", "isMultiSelect"], outputs: ["selectedChange"] }, { kind: "component", type: FileSelectionComponent, selector: "app-file-selection", inputs: ["label", "chooseFileLabel", "imageUrl", "fileName"], outputs: ["valueChange"] }, { 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: "19.2.4", 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()\" [formGroup]=\"formGroup\">\n  <ng-container *ngIf=\"inputConfigs && inputConfigs.length > 0; else noInputs\">\n    <ng-container *ngFor=\"let inputConfig of inputConfigs; trackBy: trackByFn\">\n\n      <!-- Input Field -->\n      <app-input\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.textual\"\n        [formControlName]=\"inputConfig.name\"\n        [config]=\"inputConfig\"\n        [required]=\"inputConfig.required!\"\n        [isInvalid]=\"isControlInvalid(inputConfig.name)\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-input>\n\n      <!-- Selection Field -->\n      <app-selection\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.selection\"\n        [formControlName]=\"inputConfig.name\"\n        [label]=\"inputConfig.label!\"\n        [options]=\"inputConfig.options\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-selection>\n\n      <!-- File Selection -->\n      <app-file-selection\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.file\"\n        [formControlName]=\"inputConfig.name\"\n        [label]=\"inputConfig.label!\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-file-selection>\n\n      <!-- Validation Messages -->\n      <div *ngIf=\"formGroup.controls[inputConfig.name]?.invalid && formGroup.controls[inputConfig.name]?.touched\" class=\"error-message\">\n        <ng-container *ngIf=\"formGroup.controls[inputConfig.name]?.errors as errors\">\n          <ng-container *ngFor=\"let errorKey of getErrorKeys(errors)\">\n            <div *ngIf=\"validationMessages[inputConfig.name]?.[errorKey]\">\n              {{ validationMessages[inputConfig.name][errorKey] }}\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n\n    </ng-container>\n  </ng-container>\n\n  <!-- Submit Button -->\n  <app-button [config]=\"buttonConfig\"></app-button>\n</form>\n\n<!-- No Inputs Placeholder -->\n<ng-template #noInputs>\n  <p>No inputs configured.</p>\n</ng-template>\n", styles: ["form{display:flex;flex-direction:column;gap:15px}label{display:block;margin-bottom:.5rem}input,textarea{width:100%;padding:.5rem;border:1px solid #ccc;border-radius:.25rem}.error-message{color:red;font-size:12px;margin-top:4px}\n"] }]
+                    ], template: "<form (ngSubmit)=\"onSubmit()\" [formGroup]=\"formGroup\">\n  <ng-container *ngIf=\"inputConfigs && inputConfigs.length > 0; else noInputs\">\n    <ng-container *ngFor=\"let inputConfig of inputConfigs; trackBy: trackByFn\">\n\n      <!-- Input Field -->\n      <app-input\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.textual\"\n        [formControlName]=\"inputConfig.name\"\n        [config]=\"inputConfig\"\n        [required]=\"inputConfig.required!\"\n        [isInvalid]=\"isControlInvalid(inputConfig.name)\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-input>\n\n      <!-- Selection Field -->\n      <app-selection\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.selection\"\n        [formControlName]=\"inputConfig.name\"\n        [label]=\"inputConfig.label!\"\n        [options]=\"inputConfig.options\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-selection>\n\n      <!-- File Selection -->\n      <app-file-selection\n        *ngIf=\"checkFormConfigType(inputConfig.type) === InputGroupType.file\"\n        [formControlName]=\"inputConfig.name\"\n        [label]=\"inputConfig.label!\"\n        [chooseFileLabel]=\"'Choose Image'\"\n        (valueChange)=\"onValueChange(inputConfig.name, $event)\">\n      </app-file-selection>\n\n      <!-- Validation Messages -->\n      <div *ngIf=\"formGroup.controls[inputConfig.name]?.invalid && formGroup.controls[inputConfig.name]?.touched\" class=\"error-message\">\n        <ng-container *ngIf=\"formGroup.controls[inputConfig.name]?.errors as errors\">\n          <ng-container *ngFor=\"let errorKey of getErrorKeys(errors)\">\n            <div *ngIf=\"validationMessages[inputConfig.name]?.[errorKey]\">\n              {{ validationMessages[inputConfig.name][errorKey] }}\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n\n    </ng-container>\n  </ng-container>\n\n  <!-- Submit Button -->\n  <app-button [config]=\"buttonConfig\"></app-button>\n</form>\n\n<!-- No Inputs Placeholder -->\n<ng-template #noInputs>\n  <p>No inputs configured.</p>\n</ng-template>\n", styles: ["form{display:flex;flex-direction:column;gap:15px}label{display:block;margin-bottom:.5rem}input,textarea{width:100%;padding:.5rem;border:1px solid #ccc;border-radius:.25rem}.error-message{color:red;font-size:12px;margin-top:4px}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], inputConfigs: [{
@@ -834,21 +844,21 @@ class PaginatorComponent {
         this.itemsPerPageList = [
             {
                 label: "3",
-                value: 1
+                value: 3
             },
             {
                 label: "5",
-                value: 2
+                value: 5
             },
             {
                 label: "20",
-                value: 3
+                value: 20
             }
         ];
         this.selectedPage = 1;
         this.buttonType = ButtonType.button;
         this.inputDirection = InputDirection.horizontal;
-        this.itemsPerPage = parseInt(this.itemsPerPageList[0].label);
+        this.itemsPerPage = parseInt(this.itemsPerPageList[0].value);
         this.calculateNumberOfPage(this.totalRecords, this.itemsPerPage);
         this.updateButtonConfigs();
         this.emitPaging();
@@ -862,11 +872,10 @@ class PaginatorComponent {
         this.updateButtonConfigs();
         this.emitPaging();
     }
-    onChangeNumberOfPage(itemsPerPageId) {
+    onChangeNumberOfPage(itemsPerPage) {
         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.itemsPerPage = itemsPerPage;
+        this.calculateNumberOfPage(this.totalRecords, itemsPerPage);
         this.updateButtonConfigs();
         this.emitPaging();
     }
@@ -901,11 +910,11 @@ class PaginatorComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: PaginatorComponent, isStandalone: true, selector: "app-paginator", inputs: { totalRecords: "totalRecords" }, outputs: { paginator: "paginator" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-footer\">\n  <div class=\"number-of-page\">\n    <app-selection [options] = \"itemsPerPageList\"\n                  [selectedValue]=\"this.itemsPerPage\"\n                  (selectedChange) = \"onChangeNumberOfPage($event)\">\n    </app-selection>\n    <app-input [config]=\"inputConfig\"></app-input>\n  </div>\n  <div class=\"paginator\">\n    <app-button (clickEvent)=\"selectPage(selectedPage - 1)\"\n                [config]=\"previousButtonConfig\"/>\n\n    <!-- Page Numbers -->\n    <ng-container *ngFor=\"let page of pageNumbers\">\n      <app-button\n        (clickEvent)=\"selectPage(page)\"\n        [config]=\"getPageButtonConfig(page)\">\n      </app-button>\n    </ng-container>\n\n    <!-- Next Button -->\n    <app-button (clickEvent)=\"selectPage(selectedPage + 1)\"\n                [config]=\"nextButtonConfig\"/>\n  </div>\n</div>\n", styles: ["body{color:#566787;background:#f5f5f5;font-family:Varela Round,sans-serif;font-size:13px}.table-footer{display:flex;padding:10px 0}.table-footer .number-of-page{width:70%;display:flex;align-items:center;gap:20px}.table-footer .paginator{display:flex;justify-content:flex-end;width:100%}.table-footer .paginator app-button{margin:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }, { kind: "component", type: SelectionComponent, selector: "app-selection", inputs: ["label", "options", "selectedValue", "selectedValues", "isMultiSelect", "displayType"], outputs: ["selectedChange"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["config", "isInvalid"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", 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              [(ngModel)]=\"itemsPerPage\"\n              (selectedChange) = \"onChangeNumberOfPage($event)\">\n    </app-selection>\n    <app-input [config]=\"inputConfig\"></app-input>\n  </div>\n  <div class=\"paginator\">\n    <app-button (clickEvent)=\"selectPage(selectedPage - 1)\"\n                [config]=\"previousButtonConfig\"/>\n\n    <!-- Page Numbers -->\n    <ng-container *ngFor=\"let page of pageNumbers\">\n      <app-button\n        (clickEvent)=\"selectPage(page)\"\n        [config]=\"getPageButtonConfig(page)\">\n      </app-button>\n    </ng-container>\n\n    <!-- Next Button -->\n    <app-button (clickEvent)=\"selectPage(selectedPage + 1)\"\n                [config]=\"nextButtonConfig\"/>\n  </div>\n</div>\n", styles: ["body{color:#566787;background:#f5f5f5;font-family:Varela Round,sans-serif;font-size:13px}.table-footer{display:flex;padding:10px 0}.table-footer .number-of-page{width:70%;display:flex;align-items:center;gap:20px}.table-footer .paginator{display:flex;justify-content:flex-end;width:100%}.table-footer .paginator app-button{margin:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }, { kind: "component", type: SelectionComponent, selector: "app-selection", inputs: ["label", "options", "isMultiSelect"], outputs: ["selectedChange"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["config", "isInvalid"] }, { kind: "ngmodule", type: FormsModule }, { 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: "19.2.4", 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;padding:10px 0}.table-footer .number-of-page{width:70%;display:flex;align-items:center;gap:20px}.table-footer .paginator{display:flex;justify-content:flex-end;width:100%}.table-footer .paginator app-button{margin:0 2px}\n"] }]
+            args: [{ selector: 'app-paginator', standalone: true, imports: [CommonModule, ButtonComponent, SelectionComponent, InputComponent, FormsModule], template: "<div class=\"table-footer\">\n  <div class=\"number-of-page\">\n    <app-selection [options] = \"itemsPerPageList\"\n              [(ngModel)]=\"itemsPerPage\"\n              (selectedChange) = \"onChangeNumberOfPage($event)\">\n    </app-selection>\n    <app-input [config]=\"inputConfig\"></app-input>\n  </div>\n  <div class=\"paginator\">\n    <app-button (clickEvent)=\"selectPage(selectedPage - 1)\"\n                [config]=\"previousButtonConfig\"/>\n\n    <!-- Page Numbers -->\n    <ng-container *ngFor=\"let page of pageNumbers\">\n      <app-button\n        (clickEvent)=\"selectPage(page)\"\n        [config]=\"getPageButtonConfig(page)\">\n      </app-button>\n    </ng-container>\n\n    <!-- Next Button -->\n    <app-button (clickEvent)=\"selectPage(selectedPage + 1)\"\n                [config]=\"nextButtonConfig\"/>\n  </div>\n</div>\n", styles: ["body{color:#566787;background:#f5f5f5;font-family:Varela Round,sans-serif;font-size:13px}.table-footer{display:flex;padding:10px 0}.table-footer .number-of-page{width:70%;display:flex;align-items:center;gap:20px}.table-footer .paginator{display:flex;justify-content:flex-end;width:100%}.table-footer .paginator app-button{margin:0 2px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { totalRecords: [{
                 type: Input
             }], paginator: [{
@@ -1209,6 +1218,255 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Input
             }] } });
 
+class ActionsComponent {
+    constructor() {
+        this.actionButtons = [];
+        this.crudActions = [CRUDType.create, CRUDType.delete, CRUDType.update];
+        this.selectedAction = new EventEmitter();
+        this.crudButtons = [
+            {
+                label: CRUDType.create,
+                action: CRUDType.create
+            },
+            {
+                label: CRUDType.delete,
+                action: CRUDType.delete
+            },
+            {
+                label: CRUDType.update,
+                action: CRUDType.update
+            },
+        ];
+    }
+    ngOnInit() {
+    }
+    clickButton(action) {
+        this.selectedAction.emit(action);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ActionsComponent, isStandalone: true, selector: "app-actions", inputs: { actionButtons: "actionButtons", crudActions: "crudActions" }, outputs: { selectedAction: "selectedAction" }, ngImport: i0, template: "<div class=\"actions\">\n  <div class=\"actions-buttons buttons\">\n    <!-- Action buttons -->\n    <ng-container *ngFor=\"let button of actionButtons\">\n      <app-button [config]=\"button\" (clickEvent)=\"clickButton(button.action)\">\n      </app-button>\n    </ng-container>\n  </div>\n  <div class=\"crud-buttons buttons\">\n      <!-- CRUD buttons -->\n      <ng-container *ngFor=\"let button of crudButtons\">\n        <app-button [config]=\"button\" (clickEvent)=\"clickButton(button.action)\">\n        </app-button>\n      </ng-container>\n  </div>\n</div>\n", styles: [".actions{display:flex;padding:10px 0}.actions .buttons{display:flex;gap:4px;width:50%}.actions .actions-buttons{justify-content:start}.actions .crud-buttons{justify-content:end}\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-actions', standalone: true, imports: [CommonModule, ButtonComponent], template: "<div class=\"actions\">\n  <div class=\"actions-buttons buttons\">\n    <!-- Action buttons -->\n    <ng-container *ngFor=\"let button of actionButtons\">\n      <app-button [config]=\"button\" (clickEvent)=\"clickButton(button.action)\">\n      </app-button>\n    </ng-container>\n  </div>\n  <div class=\"crud-buttons buttons\">\n      <!-- CRUD buttons -->\n      <ng-container *ngFor=\"let button of crudButtons\">\n        <app-button [config]=\"button\" (clickEvent)=\"clickButton(button.action)\">\n        </app-button>\n      </ng-container>\n  </div>\n</div>\n", styles: [".actions{display:flex;padding:10px 0}.actions .buttons{display:flex;gap:4px;width:50%}.actions .actions-buttons{justify-content:start}.actions .crud-buttons{justify-content:end}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { actionButtons: [{
+                type: Input
+            }], crudActions: [{
+                type: Input
+            }], selectedAction: [{
+                type: Output
+            }] } });
+
+class EventAbstractFacade {
+    constructor() {
+        this._eventsDictionary = new Map();
+    }
+    addEventListener(name, handler) {
+        this._eventsDictionary.set(name, handler);
+    }
+    dispatch(name, ...args) {
+        const handler = this._eventsDictionary.get(name);
+        if (isDefined(handler)) {
+            handler(...args);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EventAbstractFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EventAbstractFacade }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: EventAbstractFacade, decorators: [{
+            type: Injectable
+        }] });
+
+var PageEvent;
+(function (PageEvent) {
+    PageEvent["Modal"] = "Modal";
+    PageEvent["Loading"] = "Loading";
+})(PageEvent || (PageEvent = {}));
+class PagesFacade extends EventAbstractFacade {
+    constructor() {
+        super(...arguments);
+        this._isPageReady = new BehaviorSubject(false);
+        this._params = {};
+        this._validated = false;
+    }
+    get isPageReady() {
+        return this._isPageReady.asObservable();
+    }
+    get params() {
+        return this._params;
+    }
+    get validated() {
+        return this._validated;
+    }
+    setParams(value) {
+        this._params = value || {};
+    }
+    markAsReady() {
+        this._isPageReady.next(true);
+    }
+    markAsLoading() {
+        this._isPageReady.next(false);
+    }
+    validate(status) {
+        this._validated = status;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PagesFacade, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PagesFacade }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PagesFacade, decorators: [{
+            type: Injectable
+        }] });
+
+class AdminComponent {
+    constructor(pageFacade) {
+        this.pageFacade = pageFacade;
+        this.selectedItems = [];
+        this.TableColumnType = TableColumnType;
+        this.tableContents = [];
+        this.columns = [];
+        this.formFields = [];
+        this.tableName = '';
+        this.totalRecords = 0;
+        this.loadingState = of(false);
+        this.actionButtons = [];
+        this.validationMessages = {};
+        this.paginator = new EventEmitter();
+        this.itemAction = new EventEmitter();
+        this.formSubmit = new EventEmitter();
+    }
+    ngOnInit() {
+        this._initPageEventHandler();
+        this._subscribeToPageReady();
+        this._initializeForm();
+    }
+    changePaginator(paginator) { }
+    toggleSelection(item, event) {
+        const checked = event.target.checked;
+        if (checked) {
+            this.selectedItems.push(item);
+        }
+        else {
+            this.selectedItems = this.selectedItems.filter(i => i !== item);
+        }
+    }
+    isSelected(item) {
+        return this.selectedItems.includes(item);
+    }
+    _initPageEventHandler() {
+        withValuesOf(PageEvent, (pageEvent) => {
+            this.pageFacade.addEventListener(pageEvent, (...args) => {
+                this.modalEvent = args[0]?.details;
+            });
+        });
+    }
+    _subscribeToPageReady() {
+        this.pageFacade.isPageReady.subscribe(isReady => {
+            if (isReady && this.modalEvent) {
+                this.modalEvent.isModalVisible = false;
+            }
+        });
+    }
+    _initializeForm() {
+        const formControls = this.formFields.reduce((controls, field) => {
+            // Ensure validator is an array of ValidatorFn or empty
+            const validators = Array.isArray(field.validator) ? field.validator : [];
+            // Create form control dynamically
+            controls[field.name] = new FormControl('', validators);
+            return controls;
+        }, {});
+        // Create form group from dynamically generated controls
+        this.formGroup = new FormGroup(formControls);
+    }
+    openDialog(detailAction, items) {
+        let dialogTitle = "";
+        let dialogTemplate = null;
+        switch (detailAction) {
+            case CRUDType.create:
+                dialogTitle = "Create Post";
+                dialogTemplate = this.itemFormTpl;
+                break;
+            case CRUDType.update:
+                dialogTitle = "Edit Post";
+                dialogTemplate = this.itemFormTpl;
+                break;
+            case CRUDType.delete:
+                dialogTitle = "Delete Post";
+                dialogTemplate = this.warningDialogTpl;
+                break;
+            default:
+                dialogTitle = "Unknown Action";
+                dialogTemplate = null;
+        }
+        ;
+        this.modalEvent = {
+            isModalVisible: true,
+            isDialog: true,
+            title: dialogTitle,
+            template: dialogTemplate
+        };
+        this.pageFacade.dispatch(PageEvent.Modal, { details: this.modalEvent });
+    }
+    selectedItem(action) {
+        this.formGroup.reset();
+        if (action === CRUDType.update && this.selectedItems?.length === 1) {
+            const updatedValues = Object.keys(this.formGroup.controls).reduce((values, key) => {
+                values[key] = this.selectedItems[0][key] || ''; // Assign value dynamically or default to ''
+                return values;
+            }, {});
+            this.formGroup.setValue(updatedValues);
+            this.openDialog(CRUDType.update, this.selectedItems);
+        }
+        else if (action === CRUDType.delete && this.selectedItems?.length > 0) {
+            this.openDialog(CRUDType.delete, this.selectedItems);
+        }
+        else if (action === CRUDType.create) {
+            this.openDialog(action);
+        }
+        else {
+            this.itemAction.emit({ action: action, item: this.selectedItems });
+        }
+    }
+    saveForm(formGroup) {
+        this.formSubmit.emit(this.formGroup.value);
+        // Close modal
+        this.modalEvent.isModalVisible = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AdminComponent, deps: [{ token: PagesFacade }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: AdminComponent, isStandalone: true, selector: "app-admin", inputs: { tableContents: "tableContents", columns: "columns", formFields: "formFields", tableName: "tableName", totalRecords: "totalRecords", loadingState: "loadingState", actionButtons: "actionButtons", validationMessages: "validationMessages" }, outputs: { paginator: "paginator", itemAction: "itemAction", formSubmit: "formSubmit" }, providers: [PagesFacade], viewQueries: [{ propertyName: "itemFormTpl", first: true, predicate: ["itemForm"], descendants: true, static: true }, { propertyName: "warningDialogTpl", first: true, predicate: ["warningDialog"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"admin\">\n  <app-table\n    [columns]=\"columns\"\n    [items]=\"tableContents\"\n    [totalRecords]=\"totalRecords\"\n    [tableName]=\"tableName\"\n    [loadingState]=\"loadingState\"\n    (paginator)=\"changePaginator($event)\"\n  >\n    <ng-template #bodyTemplate let-item=\"item\" pTemplate=\"body\">\n      <tr>\n        <td>\n          <input type=\"checkbox\" [value]=\"item\" [checked]=\"isSelected(item)\"\n            (change)=\"toggleSelection(item, $event)\">\n        </td>\n        <td *ngFor=\"let column of columns\">\n          <ng-container *ngIf=\"column.type === TableColumnType.image; else textCell\">\n            <img\n              [src]=\"item[column.name]\"\n              alt=\"{{ column.label }}\"\n              style=\"max-width: 50px; max-height: 50px\"\n            />\n          </ng-container>\n          <ng-template #textCell>\n            {{ item[column.name] }}\n          </ng-template>\n        </td>\n      </tr>\n    </ng-template>\n  </app-table>\n\n  <app-actions (selectedAction)=\"selectedItem($event)\" [actionButtons]=\"actionButtons\"></app-actions>\n</div>\n\n<app-modal [modalEvent]=\"modalEvent\"></app-modal>\n\n<ng-template #itemForm>\n  <app-form [formGroup]=\"formGroup\" [inputConfigs]=\"formFields\" [validationMessages]=\"validationMessages\" (formSubmit)=\"saveForm($event)\"></app-form>\n</ng-template>\n\n<ng-template #warningDialog>\n  <div>Do you want to delete this?</div>\n</ng-template>\n", styles: [".admin{display:flex;flex-direction:column;height:100vh}.admin app-table{flex:1}\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: TableComponent, selector: "app-table", inputs: ["items", "columns", "totalRecords", "tableName", "loadingState"], outputs: ["paginator"] }, { kind: "component", type: ActionsComponent, selector: "app-actions", inputs: ["actionButtons", "crudActions"], outputs: ["selectedAction"] }, { kind: "component", type: FormComponent, selector: "app-form", inputs: ["formGroup", "inputConfigs", "buttonConfig", "validationMessages"], outputs: ["formSubmit", "formChange"] }, { kind: "component", type: ModalComponent, selector: "app-modal", inputs: ["modalEvent", "size"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AdminComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-admin', standalone: true, imports: [CommonModule, TableComponent, ActionsComponent, FormComponent, ModalComponent, ReactiveFormsModule], providers: [PagesFacade], template: "<div class=\"admin\">\n  <app-table\n    [columns]=\"columns\"\n    [items]=\"tableContents\"\n    [totalRecords]=\"totalRecords\"\n    [tableName]=\"tableName\"\n    [loadingState]=\"loadingState\"\n    (paginator)=\"changePaginator($event)\"\n  >\n    <ng-template #bodyTemplate let-item=\"item\" pTemplate=\"body\">\n      <tr>\n        <td>\n          <input type=\"checkbox\" [value]=\"item\" [checked]=\"isSelected(item)\"\n            (change)=\"toggleSelection(item, $event)\">\n        </td>\n        <td *ngFor=\"let column of columns\">\n          <ng-container *ngIf=\"column.type === TableColumnType.image; else textCell\">\n            <img\n              [src]=\"item[column.name]\"\n              alt=\"{{ column.label }}\"\n              style=\"max-width: 50px; max-height: 50px\"\n            />\n          </ng-container>\n          <ng-template #textCell>\n            {{ item[column.name] }}\n          </ng-template>\n        </td>\n      </tr>\n    </ng-template>\n  </app-table>\n\n  <app-actions (selectedAction)=\"selectedItem($event)\" [actionButtons]=\"actionButtons\"></app-actions>\n</div>\n\n<app-modal [modalEvent]=\"modalEvent\"></app-modal>\n\n<ng-template #itemForm>\n  <app-form [formGroup]=\"formGroup\" [inputConfigs]=\"formFields\" [validationMessages]=\"validationMessages\" (formSubmit)=\"saveForm($event)\"></app-form>\n</ng-template>\n\n<ng-template #warningDialog>\n  <div>Do you want to delete this?</div>\n</ng-template>\n", styles: [".admin{display:flex;flex-direction:column;height:100vh}.admin app-table{flex:1}\n"] }]
+        }], ctorParameters: () => [{ type: PagesFacade }], propDecorators: { itemFormTpl: [{
+                type: ViewChild,
+                args: ['itemForm', { static: true }]
+            }], warningDialogTpl: [{
+                type: ViewChild,
+                args: ['warningDialog', { static: true }]
+            }], tableContents: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], formFields: [{
+                type: Input
+            }], tableName: [{
+                type: Input
+            }], totalRecords: [{
+                type: Input
+            }], loadingState: [{
+                type: Input
+            }], actionButtons: [{
+                type: Input
+            }], validationMessages: [{
+                type: Input
+            }], paginator: [{
+                type: Output
+            }], itemAction: [{
+                type: Output
+            }], formSubmit: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of angular-dumb-lib
  */
@@ -1217,5 +1475,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AngularDumbLibComponent, AngularDumbLibModule, AngularDumbLibService, ButtonComponent, ButtonType, CRUDType, CardsComponent, ContentDesignComponent, ContentDirection, DatetimePickerComponent, DesignType, DetailComponent, FileSelectionComponent, FooterComponent, FormComponent, FormatedTextComponent, InputComponent, InputDirection, InputGroupType, InputType, LoadingComponent, LoadingType, LoginComponent, MenuComponent, MenuDirection, ModalComponent, PaginatorComponent, ScrollToTopComponent, SelectionComponent, SelectionType, Size, SliderComponent, TableComponent, TagsComponent, VersionComponent, WidgetPosition };
+export { AdminComponent, AngularDumbLibComponent, AngularDumbLibModule, AngularDumbLibService, ButtonComponent, ButtonType, CRUDType, CardsComponent, ContentDesignComponent, ContentDirection, DatetimePickerComponent, DesignType, DetailComponent, FileSelectionComponent, FooterComponent, FormComponent, FormatedTextComponent, InputComponent, InputDirection, InputGroupType, InputType, LoadingComponent, LoadingType, LoginComponent, MenuComponent, MenuDirection, ModalComponent, PaginatorComponent, ScrollToTopComponent, SelectionComponent, Size, SliderComponent, TableColumnType, TableComponent, TagsComponent, VersionComponent, WidgetPosition };
 //# sourceMappingURL=angular-dumb-lib.mjs.map