ets-fe-ng-sdk 17.0.308 → 17.0.310

package/fesm2022/ets-fe-ng-sdk.mjs

@@ -3,10 +3,10 @@ import { FormControl, Validators, FormArray, FormGroup, FormBuilder, NG_VALUE_AC
 import 'zone.js/plugins/zone-error';
 import { cloneDeep, clone, isEqual, isEmpty, uniqBy } from 'lodash-es';
 import * as i0 from '@angular/core';
-import { Injectable, Pipe, NgModule, signal, inject, Directive, Input, booleanAttribute, input, computed, EventEmitter, DestroyRef, effect, Component, Output, ViewChild, forwardRef, HostListener, viewChild, Inject, HostBinding, ContentChild, InjectionToken, ErrorHandler } from '@angular/core';
+import { Injectable, Pipe, NgModule, signal, inject, Directive, Input, booleanAttribute, input, computed, EventEmitter, DestroyRef, effect, Component, Output, ViewChild, forwardRef, HostListener, viewChild, Inject, HostBinding, ContentChild, model, InjectionToken, ErrorHandler } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, Location, CurrencyPipe, TitleCasePipe, DatePipe, DecimalPipe, NgClass, AsyncPipe, NgIf, NgFor, UpperCasePipe, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgStyle, JsonPipe } from '@angular/common';
-import { faPlus, faSlidersH, faMoneyCheck, faCancel, faCheck, faListAlt, faClone, faCogs, faTrash, faDownload, faEdit, faFileExport, faFile, faFilter, faPenFancy, faUserShield, faHistory, faHome, faFileImport, faInfoCircle, faLock, faArrowRight, faPen, faArrowLeft, faRecycle, faSave, faSearch, faEye, faBellSlash, faUpload, faUnlock, faUsers, faTruck, faTag, faReceipt, faBank, faArrowsH, faPlay, faPercent, faHandshake, faCircleExclamation, faTable, faSpoon } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faSlidersH, faMoneyCheck, faCancel, faCheck, faListAlt, faClone, faCogs, faTrash, faDownload, faEdit, faFileExport, faFile, faFilter, faPenFancy, faUserShield, faHistory, faHome, faFileImport, faInfoCircle, faLock, faArrowRight, faPause, faPen, faArrowLeft, faRecycle, faSave, faSearch, faEye, faBellSlash, faUpload, faUnlock, faUsers, faStop, faTruck, faTag, faReceipt, faBank, faArrowsH, faPlay, faPercent, faHandshake, faCircleExclamation, faTable, faSpoon } from '@fortawesome/free-solid-svg-icons';
 import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
 import { timer, take, tap, merge, Observable, BehaviorSubject, debounceTime, filter, ReplaySubject, lastValueFrom, isObservable, of, firstValueFrom, throwError, fromEvent, map as map$1, distinct, interval, concat, Subject, debounce } from 'rxjs';
 import { catchError, tap as tap$1, map, retry, debounceTime as debounceTime$1, filter as filter$1, startWith, switchMap, first, timeout } from 'rxjs/operators';
@@ -52,14 +52,14 @@ import * as i6$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { toSignal } from '@angular/core/rxjs-interop';
 import PerfectScrollbar from 'perfect-scrollbar';
-import { moveItemInArray, transferArrayItem, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragHandle } from '@angular/cdk/drag-drop';
-import * as i1$4 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { NGTelInputDirective } from '@serene-dev/ng-tel-input';
 import * as i2$2 from 'ngx-quill';
 import { QuillEditorComponent, QuillModule } from 'ngx-quill';
 import 'quill-emoji/dist/quill-emoji.js';
 import 'quill-mention';
+import { moveItemInArray, transferArrayItem, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragHandle } from '@angular/cdk/drag-drop';
+import * as i1$4 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i1$5 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i1$6 from '@angular/material/paginator';
@@ -1302,169 +1302,173 @@ class BtnService {
                 _mclass: 'btn btn-lg btn-success w-100',
             },
         };
-        this.getIcon = (iconType) => {
-            const index = {
-                add: {
-                    icon: faPlus,
-                },
-                adjust: {
-                    icon: faSlidersH,
-                },
-                calendar: {
-                    iconString: 'fas fa-calendar-alt',
-                },
-                cash: {
-                    icon: faMoneyCheck,
-                },
-                cancel: {
-                    icon: faCancel,
-                },
-                checked: {
-                    icon: faCheck,
-                },
-                checklist: {
-                    icon: faListAlt,
-                },
-                clone: {
-                    icon: faClone,
-                },
-                close: {
-                    iconString: 'fa fa-close',
-                },
-                cogs: {
-                    icon: faCogs,
-                },
-                delete: {
-                    icon: faTrash,
-                },
-                download: {
-                    icon: faDownload,
-                },
-                dropdown: {
-                    iconPosition: 'right',
-                    iconString: 'fa fa-chevron-down',
-                },
-                edit: {
-                    icon: faEdit,
-                },
-                export: {
-                    icon: faFileExport,
-                },
-                file: {
-                    icon: faFile,
-                },
-                filter: {
-                    icon: faFilter,
-                },
-                generate: {
-                    icon: faPenFancy,
-                },
-                guard: {
-                    icon: faUserShield,
-                },
-                access: {
-                    icon: faUserShield,
-                },
-                history: {
-                    icon: faHistory,
-                },
-                home: {
-                    icon: faHome,
-                },
-                import: {
-                    icon: faFileImport,
-                },
-                info: {
-                    icon: faInfoCircle,
-                },
-                link: {
-                    iconString: 'fas fa-chain',
-                },
-                lock: {
-                    icon: faLock,
-                },
-                next: {
-                    icon: faArrowRight,
-                    iconPosition: 'right',
-                },
-                pen: {
-                    icon: faPen,
-                },
-                post: {
-                    icon: faPaperPlane,
-                },
-                previous: {
-                    icon: faArrowLeft,
-                },
-                renew: {
-                    icon: faRecycle,
-                },
-                save: {
-                    icon: faSave,
-                },
-                search: {
-                    icon: faSearch,
-                },
-                show: {
-                    icon: faEye,
-                },
-                view: {
-                    icon: faEye,
-                },
-                snooze: {
-                    icon: faBellSlash,
-                },
-                upload: {
-                    icon: faUpload,
-                },
-                unlock: {
-                    icon: faUnlock,
-                },
-                users: {
-                    icon: faUsers,
-                },
-                recycle: {
-                    icon: faRecycle,
-                },
-                refresh: {
-                    iconString: 'fa fa-refresh',
-                },
-                truck: {
-                    icon: faTruck,
-                },
-                tag: {
-                    icon: faTag,
-                },
-                receipt: {
-                    icon: faReceipt,
-                },
-                bank: {
-                    icon: faBank,
-                },
-                arrowh: {
-                    icon: faArrowsH,
-                },
-                play: {
-                    icon: faPlay,
-                },
-                percent: {
-                    icon: faPercent,
-                },
-                shake: {
-                    icon: faHandshake,
-                },
-                error: {
-                    icon: faCircleExclamation,
-                },
-                table: {
-                    icon: faTable,
-                },
-                spoon: {
-                    icon: faSpoon,
-                },
-            };
-            return index[iconType];
+        this.buttonIconIndex = {
+            add: {
+                icon: faPlus,
+            },
+            adjust: {
+                icon: faSlidersH,
+            },
+            calendar: {
+                iconString: 'fas fa-calendar-alt',
+            },
+            cash: {
+                icon: faMoneyCheck,
+            },
+            cancel: {
+                icon: faCancel,
+            },
+            checked: {
+                icon: faCheck,
+            },
+            checklist: {
+                icon: faListAlt,
+            },
+            clone: {
+                icon: faClone,
+            },
+            close: {
+                iconString: 'fa fa-close',
+            },
+            cogs: {
+                icon: faCogs,
+            },
+            delete: {
+                icon: faTrash,
+            },
+            download: {
+                icon: faDownload,
+            },
+            dropdown: {
+                iconPosition: 'right',
+                iconString: 'fa fa-chevron-down',
+            },
+            edit: {
+                icon: faEdit,
+            },
+            export: {
+                icon: faFileExport,
+            },
+            file: {
+                icon: faFile,
+            },
+            filter: {
+                icon: faFilter,
+            },
+            generate: {
+                icon: faPenFancy,
+            },
+            guard: {
+                icon: faUserShield,
+            },
+            access: {
+                icon: faUserShield,
+            },
+            history: {
+                icon: faHistory,
+            },
+            home: {
+                icon: faHome,
+            },
+            import: {
+                icon: faFileImport,
+            },
+            info: {
+                icon: faInfoCircle,
+            },
+            link: {
+                iconString: 'fas fa-chain',
+            },
+            lock: {
+                icon: faLock,
+            },
+            next: {
+                icon: faArrowRight,
+                iconPosition: 'right',
+            },
+            pause: {
+                icon: faPause,
+            },
+            pen: {
+                icon: faPen,
+            },
+            post: {
+                icon: faPaperPlane,
+            },
+            previous: {
+                icon: faArrowLeft,
+            },
+            renew: {
+                icon: faRecycle,
+            },
+            save: {
+                icon: faSave,
+            },
+            search: {
+                icon: faSearch,
+            },
+            show: {
+                icon: faEye,
+            },
+            view: {
+                icon: faEye,
+            },
+            snooze: {
+                icon: faBellSlash,
+            },
+            upload: {
+                icon: faUpload,
+            },
+            unlock: {
+                icon: faUnlock,
+            },
+            users: {
+                icon: faUsers,
+            },
+            recycle: {
+                icon: faRecycle,
+            },
+            refresh: {
+                iconString: 'fa fa-refresh',
+            },
+            stop: {
+                icon: faStop,
+            },
+            truck: {
+                icon: faTruck,
+            },
+            tag: {
+                icon: faTag,
+            },
+            receipt: {
+                icon: faReceipt,
+            },
+            bank: {
+                icon: faBank,
+            },
+            arrowh: {
+                icon: faArrowsH,
+            },
+            play: {
+                icon: faPlay,
+            },
+            percent: {
+                icon: faPercent,
+            },
+            shake: {
+                icon: faHandshake,
+            },
+            error: {
+                icon: faCircleExclamation,
+            },
+            table: {
+                icon: faTable,
+            },
+            spoon: {
+                icon: faSpoon,
+            },
         };
+        this.getIcon = (iconType) => this.buttonIconIndex[iconType];
         this.defaultType = 'secondary';
         this.setFormState = (btn) => {
             btn.checkFormStateSub?.unsubscribe();
@@ -5277,13 +5281,15 @@ class ValidationMessageComponent {
         this.label = signal(undefined);
         this.hideOverflow = input(true);
         this.minLength = computed(() => {
-            const t = this._minLength, i = this.input()?.minLength, i2 = this.input()?.minSignal();
+            const t = this._minLength(), i = this.input()?.minLength, i2 = this.input()?.minSignal();
             return t || i || +i2;
         });
+        this._minLength = input(undefined, { alias: 'minLength' });
         this.maxLength = computed(() => {
-            const t = this._maxLength, i = this.input()?.maxLength, i2 = this.input()?.maxSignal();
+            const t = this._maxLength(), i = this.input()?.maxLength, i2 = this.input()?.maxSignal();
             return t || i || +i2;
         });
+        this._maxLength = input(undefined, { alias: 'maxLength' });
         this.ignoreDirtiness = input();
         this.customMessage = input('Value is invalid');
         this.input = signal(undefined);
@@ -5319,7 +5325,7 @@ class ValidationMessageComponent {
         this.sub?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ValidationMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: ValidationMessageComponent, isStandalone: true, selector: "app-validation-message", inputs: { debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, _label: { classPropertyName: "_label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, hideOverflow: { classPropertyName: "hideOverflow", publicName: "hideOverflow", isSignal: true, isRequired: false, transformFunction: null }, _minLength: { classPropertyName: "_minLength", publicName: "minLength", isSignal: false, isRequired: false, transformFunction: null }, _maxLength: { classPropertyName: "_maxLength", publicName: "maxLength", isSignal: false, isRequired: false, transformFunction: null }, ignoreDirtiness: { classPropertyName: "ignoreDirtiness", publicName: "ignoreDirtiness", isSignal: true, isRequired: false, transformFunction: null }, customMessage: { classPropertyName: "customMessage", publicName: "customMessage", isSignal: true, isRequired: false, transformFunction: null }, _control: { classPropertyName: "_control", publicName: "control", isSignal: false, isRequired: false, transformFunction: null }, _input: { classPropertyName: "_input", publicName: "input", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"text-danger\" [ngClass]=\"{ hideOverflow: hideOverflow() }\" #el>\n  @for (error of computedErrors(); track error) {\n    <span\n      class=\"me-2 errormssg hide-scroll\"\n      [matTooltip]=\"ele.innerText\"\n      [matTooltipDisabled]=\"ele.scrollHeight <= ele.offsetHeight && ele.scrollWidth <= ele.offsetWidth\"\n      #ele>\n      {{ error | appTranslate | async }}\n    </span>\n  }\n</div>\n", styles: [".text-danger{margin-top:5px;min-height:25px;position:relative}.errormssg{height:25px;display:block;overflow:auto}.hideOverflow{height:25px;overflow:hidden}\n"], dependencies: [{ kind: "pipe", type: i0.forwardRef(() => AsyncPipe), name: "async" }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i0.forwardRef(() => TranslatePipe), name: "appTranslate" }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: ValidationMessageComponent, isStandalone: true, selector: "app-validation-message", inputs: { debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, _label: { classPropertyName: "_label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, hideOverflow: { classPropertyName: "hideOverflow", publicName: "hideOverflow", isSignal: true, isRequired: false, transformFunction: null }, _minLength: { classPropertyName: "_minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, _maxLength: { classPropertyName: "_maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, ignoreDirtiness: { classPropertyName: "ignoreDirtiness", publicName: "ignoreDirtiness", isSignal: true, isRequired: false, transformFunction: null }, customMessage: { classPropertyName: "customMessage", publicName: "customMessage", isSignal: true, isRequired: false, transformFunction: null }, _control: { classPropertyName: "_control", publicName: "control", isSignal: false, isRequired: false, transformFunction: null }, _input: { classPropertyName: "_input", publicName: "input", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"text-danger\" [ngClass]=\"{ hideOverflow: hideOverflow() }\" #el>\n  @for (error of computedErrors(); track error) {\n    <span\n      class=\"me-2 errormssg hide-scroll\"\n      [matTooltip]=\"ele.innerText\"\n      [matTooltipDisabled]=\"ele.scrollHeight <= ele.offsetHeight && ele.scrollWidth <= ele.offsetWidth\"\n      #ele>\n      {{ error | appTranslate | async }}\n    </span>\n  }\n</div>\n", styles: [".text-danger{margin-top:5px;min-height:25px;position:relative}.errormssg{height:25px;display:block;overflow:auto}.hideOverflow{height:25px;overflow:hidden}\n"], dependencies: [{ kind: "pipe", type: i0.forwardRef(() => AsyncPipe), name: "async" }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i0.forwardRef(() => TranslatePipe), name: "appTranslate" }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ValidationMessageComponent, decorators: [{
             type: Component,
@@ -5327,12 +5333,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
         }], ctorParameters: () => [], propDecorators: { _label: [{
                 type: Input,
                 args: ['label']
-            }], _minLength: [{
-                type: Input,
-                args: ['minLength']
-            }], _maxLength: [{
-                type: Input,
-                args: ['maxLength']
             }], _control: [{
                 type: Input,
                 args: ['control']
@@ -6220,7 +6220,7 @@ class InputBase {
         this.mchange.emit(this.control.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.2.1", type: InputBase, isStandalone: true, selector: "ng-component", inputs: { cls: { classPropertyName: "cls", publicName: "cls", isSignal: true, isRequired: false, transformFunction: null }, dontFormatAsInputSignal: { classPropertyName: "dontFormatAsInputSignal", publicName: "dontFormatAsInput", isSignal: true, isRequired: false, transformFunction: null }, duplicateCheckSignal: { classPropertyName: "duplicateCheckSignal", publicName: "duplicateCheck", isSignal: true, isRequired: false, transformFunction: null }, presetValue: { classPropertyName: "presetValue", publicName: "presetValue", isSignal: true, isRequired: false, transformFunction: null }, endLabelSignal: { classPropertyName: "endLabelSignal", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null }, endLabelTooltipSignal: { classPropertyName: "endLabelTooltipSignal", publicName: "endLabelTooltip", isSignal: true, isRequired: false, transformFunction: null }, idSignal: { classPropertyName: "idSignal", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, inputContClassSignal: { classPropertyName: "inputContClassSignal", publicName: "inputContClass", isSignal: true, isRequired: false, transformFunction: null }, labelSignal: { classPropertyName: "labelSignal", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, noFormat: { classPropertyName: "noFormat", publicName: "noFormat", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlySignal: { classPropertyName: "readonlySignal", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, requiredSignal: { classPropertyName: "requiredSignal", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showRequiredTagSignal: { classPropertyName: "showRequiredTagSignal", publicName: "showRequiredTag", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, textareaRowsSignal: { classPropertyName: "textareaRowsSignal", publicName: "textareaRows", isSignal: true, isRequired: false, transformFunction: null }, translateOptions: { classPropertyName: "translateOptions", publicName: "translateOptions", isSignal: true, isRequired: false, transformFunction: null }, _form: { classPropertyName: "_form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, inlineHint: { classPropertyName: "inlineHint", publicName: "inlineHint", isSignal: false, isRequired: false, transformFunction: null }, autoPickValueField: { classPropertyName: "autoPickValueField", publicName: "autoPickValueField", isSignal: false, isRequired: false, transformFunction: null }, labelField: { classPropertyName: "labelField", publicName: "labelField", isSignal: false, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: false, isRequired: false, transformFunction: null }, optionFormatter: { classPropertyName: "optionFormatter", publicName: "optionFormatter", isSignal: false, isRequired: false, transformFunction: null }, _name: { classPropertyName: "_name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, _indeterminate: { classPropertyName: "_indeterminate", publicName: "indeterminate", isSignal: false, isRequired: false, transformFunction: null }, _max: { classPropertyName: "_max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, _min: { classPropertyName: "_min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, maxToday: { classPropertyName: "maxToday", publicName: "maxToday", isSignal: false, isRequired: false, transformFunction: null }, minToday: { classPropertyName: "minToday", publicName: "minToday", isSignal: false, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: false, isRequired: false, transformFunction: null }, prefixSignal: { classPropertyName: "prefixSignal", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, miniSignal: { classPropertyName: "miniSignal", publicName: "mini", isSignal: true, isRequired: false, transformFunction: null }, inpClSignal: { classPropertyName: "inpClSignal", publicName: "inpCl", isSignal: true, isRequired: false, transformFunction: null }, showEmptyOptionSignal: { classPropertyName: "showEmptyOptionSignal", publicName: "showEmptyOption", isSignal: true, isRequired: false, transformFunction: null }, showLabelSignal: { classPropertyName: "showLabelSignal", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showValidationSignal: { classPropertyName: "showValidationSignal", publicName: "showValidation", isSignal: true, isRequired: false, transformFunction: null }, showValidationIconSignal: { classPropertyName: "showValidationIconSignal", publicName: "showValidationIcon", isSignal: true, isRequired: false, transformFunction: null }, smallSignal: { classPropertyName: "smallSignal", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, showValidationMsgSignal: { classPropertyName: "showValidationMsgSignal", publicName: "showValidationMsg", isSignal: true, isRequired: false, transformFunction: null }, stackedSignal: { classPropertyName: "stackedSignal", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, clearOnDisable: { classPropertyName: "clearOnDisable", publicName: "clearOnDisable", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, _type: { classPropertyName: "_type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, coloredSignal: { classPropertyName: "coloredSignal", publicName: "colored", isSignal: true, isRequired: false, transformFunction: null }, checkedSignal: { classPropertyName: "checkedSignal", publicName: "checkedSignal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mchange: "mchange" }, viewQueries: [{ propertyName: "dateInputRef", first: true, predicate: DateInputComponent, descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.2.1", type: InputBase, isStandalone: true, selector: "ng-component", inputs: { cls: { classPropertyName: "cls", publicName: "cls", isSignal: true, isRequired: false, transformFunction: null }, dontFormatAsInputSignal: { classPropertyName: "dontFormatAsInputSignal", publicName: "dontFormatAsInput", isSignal: true, isRequired: false, transformFunction: null }, duplicateCheckSignal: { classPropertyName: "duplicateCheckSignal", publicName: "duplicateCheck", isSignal: true, isRequired: false, transformFunction: null }, presetValue: { classPropertyName: "presetValue", publicName: "presetValue", isSignal: true, isRequired: false, transformFunction: null }, endLabelSignal: { classPropertyName: "endLabelSignal", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null }, endLabelTooltipSignal: { classPropertyName: "endLabelTooltipSignal", publicName: "endLabelTooltip", isSignal: true, isRequired: false, transformFunction: null }, idSignal: { classPropertyName: "idSignal", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, inputContClassSignal: { classPropertyName: "inputContClassSignal", publicName: "inputContClass", isSignal: true, isRequired: false, transformFunction: null }, labelSignal: { classPropertyName: "labelSignal", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, noFormat: { classPropertyName: "noFormat", publicName: "noFormat", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlySignal: { classPropertyName: "readonlySignal", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, requiredSignal: { classPropertyName: "requiredSignal", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showRequiredTagSignal: { classPropertyName: "showRequiredTagSignal", publicName: "showRequiredTag", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, textareaRowsSignal: { classPropertyName: "textareaRowsSignal", publicName: "textareaRows", isSignal: true, isRequired: false, transformFunction: null }, translateOptions: { classPropertyName: "translateOptions", publicName: "translateOptions", isSignal: true, isRequired: false, transformFunction: null }, _form: { classPropertyName: "_form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, inlineHint: { classPropertyName: "inlineHint", publicName: "inlineHint", isSignal: false, isRequired: false, transformFunction: null }, autoPickValueField: { classPropertyName: "autoPickValueField", publicName: "autoPickValueField", isSignal: false, isRequired: false, transformFunction: null }, labelField: { classPropertyName: "labelField", publicName: "labelField", isSignal: false, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: false, isRequired: false, transformFunction: null }, optionFormatter: { classPropertyName: "optionFormatter", publicName: "optionFormatter", isSignal: false, isRequired: false, transformFunction: null }, _name: { classPropertyName: "_name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, _indeterminate: { classPropertyName: "_indeterminate", publicName: "indeterminate", isSignal: false, isRequired: false, transformFunction: null }, _max: { classPropertyName: "_max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, _min: { classPropertyName: "_min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, maxToday: { classPropertyName: "maxToday", publicName: "maxToday", isSignal: false, isRequired: false, transformFunction: null }, minToday: { classPropertyName: "minToday", publicName: "minToday", isSignal: false, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: false, isRequired: false, transformFunction: null }, prefixSignal: { classPropertyName: "prefixSignal", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, miniSignal: { classPropertyName: "miniSignal", publicName: "mini", isSignal: true, isRequired: false, transformFunction: null }, inpClSignal: { classPropertyName: "inpClSignal", publicName: "inpCl", isSignal: true, isRequired: false, transformFunction: null }, showEmptyOptionSignal: { classPropertyName: "showEmptyOptionSignal", publicName: "showEmptyOption", isSignal: true, isRequired: false, transformFunction: null }, showLabelSignal: { classPropertyName: "showLabelSignal", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showValidationSignal: { classPropertyName: "showValidationSignal", publicName: "showValidation", isSignal: true, isRequired: false, transformFunction: null }, showValidationIconSignal: { classPropertyName: "showValidationIconSignal", publicName: "showValidationIcon", isSignal: true, isRequired: false, transformFunction: null }, smallSignal: { classPropertyName: "smallSignal", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, showValidationMsgSignal: { classPropertyName: "showValidationMsgSignal", publicName: "showValidationMsg", isSignal: true, isRequired: false, transformFunction: null }, stackedSignal: { classPropertyName: "stackedSignal", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, clearOnDisable: { classPropertyName: "clearOnDisable", publicName: "clearOnDisable", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: false, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: false, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, _type: { classPropertyName: "_type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, coloredSignal: { classPropertyName: "coloredSignal", publicName: "colored", isSignal: true, isRequired: false, transformFunction: null }, checkedSignal: { classPropertyName: "checkedSignal", publicName: "checkedSignal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mchange: "mchange" }, viewQueries: [{ propertyName: "dateInputRef", first: true, predicate: DateInputComponent, descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputBase, decorators: [{
             type: Component,
@@ -6259,6 +6259,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 type: Input
             }], valueField: [{
                 type: Input
+            }], minLength: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
             }], _disabled: [{
                 type: Input,
                 args: ['disabled']
@@ -6368,11 +6372,11 @@ class InputBasicComponent extends InputBase {
         this.mchange.emit(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputBasicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: InputBasicComponent, isStandalone: true, selector: "app-input-basic,app-input", inputs: { accept: "accept", autocomplete: "autocomplete", inp: ["input", "inp"], contextData: "contextData", decimalPoints: "decimalPoints", files: "files", hide: "hide", hint: "hint", labelLink: "labelLink", lblCl: "lblCl", light: "light", loading: "loading", minLength: "minLength", maxLength: "maxLength", multiple: "multiple", optionsFunc: "optionsFunc", theme: "theme", vms: "vms", xsmall: "xsmall", _setCurrentDate: ["setCurrentDate", "_setCurrentDate"], _options: ["options", "_options"], _value: ["mvalue", "_value"] }, outputs: { mSelectOptionChange: "mSelectOptionChange", mSelectedOptionLabel: "mSelectedOptionLabel" }, providers: InputProviders, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelectTag"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\" [formGroup]=\"formSignal()\" [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\"></app-input-label>\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal()\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholder() }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input type=\"file\" [id]=\"idSignal()\" [class]=\"inputClassSignal()\" (change)=\"upload($event)\" [accept]=\"accept\" [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\n              </mat-option>\n            }\n            @for (item of options(); track iS.trackByValue($index, item)) {\n              <mat-option [value]=\"item.value\">\n                <div class=\"option\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\" #ele>\n                  {{ item.label | appTranslate: translateOptions() | async }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div class=\"password-icons pointer\" (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div [class]=\"inputClassSignal()\" [ngClass]=\"{ 'has-prefix': !!prefixSignal(), disabled: readonlySignal() || disabledSignal() }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div class=\"col-auto text-primary ms-2\" (click)=\"iS.log(formSignal())\" [matTooltip]=\"endLabelTooltipSignal() | appTranslate | async\">\n        {{ endLabelSignal() | appTranslate | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"controlSignal()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i1.MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["debug", "label", "hideOverflow", "minLength", "maxLength", "ignoreDirtiness", "customMessage", "control", "input"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: InputBasicComponent, isStandalone: true, selector: "app-input-basic,app-input", inputs: { accept: "accept", autocomplete: "autocomplete", inp: ["input", "inp"], contextData: "contextData", decimalPoints: "decimalPoints", files: "files", hide: "hide", hint: "hint", labelLink: "labelLink", lblCl: "lblCl", light: "light", loading: "loading", multiple: "multiple", optionsFunc: "optionsFunc", theme: "theme", vms: "vms", xsmall: "xsmall", _setCurrentDate: ["setCurrentDate", "_setCurrentDate"], _options: ["options", "_options"], _value: ["mvalue", "_value"] }, outputs: { mSelectOptionChange: "mSelectOptionChange", mSelectedOptionLabel: "mSelectedOptionLabel" }, providers: InputProviders, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelectTag"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\" [formGroup]=\"formSignal()\" [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\"></app-input-label>\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal()\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholder() }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input type=\"file\" [id]=\"idSignal()\" [class]=\"inputClassSignal()\" (change)=\"upload($event)\" [accept]=\"accept\" [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\n              </mat-option>\n            }\n            @for (item of options(); track iS.trackByValue($index, item)) {\n              <mat-option [value]=\"item.value\">\n                <div class=\"option\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\" #ele>\n                  {{ item.label | appTranslate: translateOptions() | async }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div class=\"password-icons pointer\" (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div [class]=\"inputClassSignal()\" [ngClass]=\"{ 'has-prefix': !!prefixSignal(), disabled: readonlySignal() || disabledSignal() }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div class=\"col-auto text-primary ms-2\" (click)=\"iS.log(formSignal())\" [matTooltip]=\"endLabelTooltipSignal() | appTranslate | async\">\n        {{ endLabelSignal() | appTranslate | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [minLength]=\"minLength\" [maxLength]=\"maxLength\" [control]=\"controlSignal()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i1.MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["debug", "label", "hideOverflow", "minLength", "maxLength", "ignoreDirtiness", "customMessage", "control", "input"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputBasicComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-input-basic,app-input', standalone: true, providers: InputProviders, imports: [DateInputComponent, InputSharedModules], template: "<div class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\" [formGroup]=\"formSignal()\" [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\"></app-input-label>\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal()\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholder() }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input type=\"file\" [id]=\"idSignal()\" [class]=\"inputClassSignal()\" (change)=\"upload($event)\" [accept]=\"accept\" [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\n              </mat-option>\n            }\n            @for (item of options(); track iS.trackByValue($index, item)) {\n              <mat-option [value]=\"item.value\">\n                <div class=\"option\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\" #ele>\n                  {{ item.label | appTranslate: translateOptions() | async }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div class=\"password-icons pointer\" (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div [class]=\"inputClassSignal()\" [ngClass]=\"{ 'has-prefix': !!prefixSignal(), disabled: readonlySignal() || disabledSignal() }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div class=\"col-auto text-primary ms-2\" (click)=\"iS.log(formSignal())\" [matTooltip]=\"endLabelTooltipSignal() | appTranslate | async\">\n        {{ endLabelSignal() | appTranslate | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"controlSignal()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+            args: [{ selector: 'app-input-basic,app-input', standalone: true, providers: InputProviders, imports: [DateInputComponent, InputSharedModules], template: "<div class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\" [formGroup]=\"formSignal()\" [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\"></app-input-label>\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal()\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholder() }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input type=\"file\" [id]=\"idSignal()\" [class]=\"inputClassSignal()\" (change)=\"upload($event)\" [accept]=\"accept\" [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\n              </mat-option>\n            }\n            @for (item of options(); track iS.trackByValue($index, item)) {\n              <mat-option [value]=\"item.value\">\n                <div class=\"option\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\" #ele>\n                  {{ item.label | appTranslate: translateOptions() | async }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div class=\"password-icons pointer\" (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div [class]=\"inputClassSignal()\" [ngClass]=\"{ 'has-prefix': !!prefixSignal(), disabled: readonlySignal() || disabledSignal() }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div class=\"col-auto text-primary ms-2\" (click)=\"iS.log(formSignal())\" [matTooltip]=\"endLabelTooltipSignal() | appTranslate | async\">\n        {{ endLabelSignal() | appTranslate | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [minLength]=\"minLength\" [maxLength]=\"maxLength\" [control]=\"controlSignal()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { accept: [{
                 type: Input
             }], autocomplete: [{
@@ -6398,10 +6402,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 type: Input
             }], loading: [{
                 type: Input
-            }], minLength: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
             }], multiple: [{
                 type: Input
             }], optionsFunc: [{
@@ -6504,11 +6504,11 @@ class InputTD_RFComponent extends InputBasicComponent {
         super.ngAfterViewInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputTD_RFComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: InputTD_RFComponent, isStandalone: true, selector: "app-input-td-rf", inputs: { _validators: ["validators", "_validators"], _asyncValidators: ["asyncValidators", "_asyncValidators"], _model: ["model", "_model"], _disabled: ["disabled", "_disabled"] }, outputs: { modelChange: "modelChange" }, providers: InputProviders, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\" [formGroup]=\"formSignal()\" [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\"></app-input-label>\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal()\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholder() }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input type=\"file\" [id]=\"idSignal()\" [class]=\"inputClassSignal()\" (change)=\"upload($event)\" [accept]=\"accept\" [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\n              </mat-option>\n            }\n            @for (item of options(); track iS.trackByValue($index, item)) {\n              <mat-option [value]=\"item.value\">\n                <div class=\"option\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\" #ele>\n                  {{ item.label | appTranslate: translateOptions() | async }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div class=\"password-icons pointer\" (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div [class]=\"inputClassSignal()\" [ngClass]=\"{ 'has-prefix': !!prefixSignal(), disabled: readonlySignal() || disabledSignal() }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div class=\"col-auto text-primary ms-2\" (click)=\"iS.log(formSignal())\" [matTooltip]=\"endLabelTooltipSignal() | appTranslate | async\">\n        {{ endLabelSignal() | appTranslate | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"controlSignal()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i1.MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["debug", "label", "hideOverflow", "minLength", "maxLength", "ignoreDirtiness", "customMessage", "control", "input"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: InputTD_RFComponent, isStandalone: true, selector: "app-input-td-rf", inputs: { _validators: ["validators", "_validators"], _asyncValidators: ["asyncValidators", "_asyncValidators"], _model: ["model", "_model"], _disabled: ["disabled", "_disabled"] }, outputs: { modelChange: "modelChange" }, providers: InputProviders, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\" [formGroup]=\"formSignal()\" [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\"></app-input-label>\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal()\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholder() }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input type=\"file\" [id]=\"idSignal()\" [class]=\"inputClassSignal()\" (change)=\"upload($event)\" [accept]=\"accept\" [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\n              </mat-option>\n            }\n            @for (item of options(); track iS.trackByValue($index, item)) {\n              <mat-option [value]=\"item.value\">\n                <div class=\"option\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\" #ele>\n                  {{ item.label | appTranslate: translateOptions() | async }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div class=\"password-icons pointer\" (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div [class]=\"inputClassSignal()\" [ngClass]=\"{ 'has-prefix': !!prefixSignal(), disabled: readonlySignal() || disabledSignal() }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div class=\"col-auto text-primary ms-2\" (click)=\"iS.log(formSignal())\" [matTooltip]=\"endLabelTooltipSignal() | appTranslate | async\">\n        {{ endLabelSignal() | appTranslate | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [minLength]=\"minLength\" [maxLength]=\"maxLength\" [control]=\"controlSignal()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i1.MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["debug", "label", "hideOverflow", "minLength", "maxLength", "ignoreDirtiness", "customMessage", "control", "input"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputTD_RFComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-input-td-rf', standalone: true, providers: InputProviders, imports: [DateInputComponent, InputSharedModules], template: "<div class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\" [formGroup]=\"formSignal()\" [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\"></app-input-label>\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal()\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholder() }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input type=\"file\" [id]=\"idSignal()\" [class]=\"inputClassSignal()\" (change)=\"upload($event)\" [accept]=\"accept\" [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\n              </mat-option>\n            }\n            @for (item of options(); track iS.trackByValue($index, item)) {\n              <mat-option [value]=\"item.value\">\n                <div class=\"option\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\" #ele>\n                  {{ item.label | appTranslate: translateOptions() | async }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div class=\"password-icons pointer\" (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div [class]=\"inputClassSignal()\" [ngClass]=\"{ 'has-prefix': !!prefixSignal(), disabled: readonlySignal() || disabledSignal() }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div class=\"col-auto text-primary ms-2\" (click)=\"iS.log(formSignal())\" [matTooltip]=\"endLabelTooltipSignal() | appTranslate | async\">\n        {{ endLabelSignal() | appTranslate | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"controlSignal()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+            args: [{ selector: 'app-input-td-rf', standalone: true, providers: InputProviders, imports: [DateInputComponent, InputSharedModules], template: "<div class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\" [formGroup]=\"formSignal()\" [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\"></app-input-label>\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal()\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholder() }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input type=\"file\" [id]=\"idSignal()\" [class]=\"inputClassSignal()\" (change)=\"upload($event)\" [accept]=\"accept\" [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\n              </mat-option>\n            }\n            @for (item of options(); track iS.trackByValue($index, item)) {\n              <mat-option [value]=\"item.value\">\n                <div class=\"option\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\" #ele>\n                  {{ item.label | appTranslate: translateOptions() | async }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div class=\"password-icons pointer\" (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div [class]=\"inputClassSignal()\" [ngClass]=\"{ 'has-prefix': !!prefixSignal(), disabled: readonlySignal() || disabledSignal() }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div class=\"col-auto text-primary ms-2\" (click)=\"iS.log(formSignal())\" [matTooltip]=\"endLabelTooltipSignal() | appTranslate | async\">\n        {{ endLabelSignal() | appTranslate | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [minLength]=\"minLength\" [maxLength]=\"maxLength\" [control]=\"controlSignal()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _validators: [{
                 type: Input,
                 args: ['validators']
@@ -7851,7 +7851,7 @@ class EditableTextCaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditableTextCaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: EditableTextCaseComponent, isStandalone: true, selector: "app-editable-text-case", inputs: { action: "action", coloredLbl: "coloredLbl", coloredVal: "coloredVal", form: "form", formatter: "formatter", hint: "hint", valueHint: "valueHint", label: "label", light: "light", mini: "mini", name: "name", route: "route", routeFunc: "routeFunc", showEditing: "showEditing", stacked: "stacked", type: "type", value: "value", wrapLabel: "wrapLabel" }, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <label\n    [matTooltip]=\"hint\"\n    class=\"col-md-{{\n      stacked ? '12 pb-0' : mini ? 'auto' : ''\n    }} m-0 hide-scroll-x\"\n    [ngClass]=\"{\n      'text-primary': coloredLbl,\n      light,\n      'overflow-x-auto': wrapLabel\n    }\"\n  >\n    {{ label | appTranslate | async }}\n  </label>\n  <div class=\"{{ stacked ? 'col-12' : 'col-md' }} position-relative\">\n    <div class=\"row align-items-center\">\n      @if (editing) {\n        <div class=\"col-9 pe-0\">\n          <app-input-basic\n            [form]=\"form\"\n            [stacked]=\"true\"\n            [showLabel]=\"false\"\n            [name]=\"name\"\n            [type]=\"type\"\n          >\n          </app-input-basic>\n        </div>\n        <div class=\"col-auto\">\n          <i\n            (click)=\"reset()\"\n            class=\"ps-1 pointer fas fa-undo-alt text-danger\"\n          ></i>\n        </div>\n      } @else {\n        <a\n          [matTooltip]=\"valueHint\"\n          [mrouterLink]=\"route || (routeFunc | functionCaller1: value | async)\"\n          class=\"{{ !coloredVal ? '' : 'text-primary' }} col-{{\n            !stacked ? 'auto' : showEditing ? '9' : '12'\n          }} lbl\"\n        >\n          <div class=\"hide-scroll-x overflow-x-auto\">\n            {{ (value | valueFormatter: formatter | async) || \"-\" }}\n          </div>\n        </a>\n        <div class=\"col-auto\" *ngIf=\"showEditing\">\n          <i\n            (click)=\"unreset()\"\n            class=\"ps-1 pointer fas fa-pencil-alt {{\n              !coloredVal ? '' : 'text-primary'\n            }}\"\n          ></i>\n        </div>\n      }\n      <ng-template #elseTemplate>\n        <a\n          [matTooltip]=\"valueHint\"\n          [mrouterLink]=\"route || (routeFunc | functionCaller1: value | async)\"\n          class=\"{{ !coloredVal ? '' : 'text-primary' }} col-{{\n            !stacked ? 'auto' : showEditing ? '9' : '12'\n          }} lbl\"\n        >\n          <div class=\"hide-scroll-x overflow-x-auto\">\n            {{ (value | valueFormatter: formatter | async) || \"-\" }}\n          </div>\n        </a>\n        @if (showEditing) {\n          <div class=\"col-auto\">\n            <i\n              (click)=\"unreset()\"\n              class=\"ps-1 pointer fas fa-pencil-alt {{\n                !coloredVal ? '' : 'text-primary'\n              }}\"\n            ></i>\n          </div>\n        }\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".lbl{display:flex;align-items:center}.light{font-weight:500}.fas{font-size:.7rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "hint", "labelLink", "lblCl", "light", "loading", "minLength", "maxLength", "multiple", "optionsFunc", "theme", "vms", "xsmall", "setCurrentDate", "options", "mvalue"], outputs: ["mSelectOptionChange", "mSelectedOptionLabel"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "pipe", type: ValueFormatterPipe, name: "valueFormatter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: EditableTextCaseComponent, isStandalone: true, selector: "app-editable-text-case", inputs: { action: "action", coloredLbl: "coloredLbl", coloredVal: "coloredVal", form: "form", formatter: "formatter", hint: "hint", valueHint: "valueHint", label: "label", light: "light", mini: "mini", name: "name", route: "route", routeFunc: "routeFunc", showEditing: "showEditing", stacked: "stacked", type: "type", value: "value", wrapLabel: "wrapLabel" }, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <label\n    [matTooltip]=\"hint\"\n    class=\"col-md-{{\n      stacked ? '12 pb-0' : mini ? 'auto' : ''\n    }} m-0 hide-scroll-x\"\n    [ngClass]=\"{\n      'text-primary': coloredLbl,\n      light,\n      'overflow-x-auto': wrapLabel\n    }\"\n  >\n    {{ label | appTranslate | async }}\n  </label>\n  <div class=\"{{ stacked ? 'col-12' : 'col-md' }} position-relative\">\n    <div class=\"row align-items-center\">\n      @if (editing) {\n        <div class=\"col-9 pe-0\">\n          <app-input-basic\n            [form]=\"form\"\n            [stacked]=\"true\"\n            [showLabel]=\"false\"\n            [name]=\"name\"\n            [type]=\"type\"\n          >\n          </app-input-basic>\n        </div>\n        <div class=\"col-auto\">\n          <i\n            (click)=\"reset()\"\n            class=\"ps-1 pointer fas fa-undo-alt text-danger\"\n          ></i>\n        </div>\n      } @else {\n        <a\n          [matTooltip]=\"valueHint\"\n          [mrouterLink]=\"route || (routeFunc | functionCaller1: value | async)\"\n          class=\"{{ !coloredVal ? '' : 'text-primary' }} col-{{\n            !stacked ? 'auto' : showEditing ? '9' : '12'\n          }} lbl\"\n        >\n          <div class=\"hide-scroll-x overflow-x-auto\">\n            {{ (value | valueFormatter: formatter | async) || \"-\" }}\n          </div>\n        </a>\n        <div class=\"col-auto\" *ngIf=\"showEditing\">\n          <i\n            (click)=\"unreset()\"\n            class=\"ps-1 pointer fas fa-pencil-alt {{\n              !coloredVal ? '' : 'text-primary'\n            }}\"\n          ></i>\n        </div>\n      }\n      <ng-template #elseTemplate>\n        <a\n          [matTooltip]=\"valueHint\"\n          [mrouterLink]=\"route || (routeFunc | functionCaller1: value | async)\"\n          class=\"{{ !coloredVal ? '' : 'text-primary' }} col-{{\n            !stacked ? 'auto' : showEditing ? '9' : '12'\n          }} lbl\"\n        >\n          <div class=\"hide-scroll-x overflow-x-auto\">\n            {{ (value | valueFormatter: formatter | async) || \"-\" }}\n          </div>\n        </a>\n        @if (showEditing) {\n          <div class=\"col-auto\">\n            <i\n              (click)=\"unreset()\"\n              class=\"ps-1 pointer fas fa-pencil-alt {{\n                !coloredVal ? '' : 'text-primary'\n              }}\"\n            ></i>\n          </div>\n        }\n      </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".lbl{display:flex;align-items:center}.light{font-weight:500}.fas{font-size:.7rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "hint", "labelLink", "lblCl", "light", "loading", "multiple", "optionsFunc", "theme", "vms", "xsmall", "setCurrentDate", "options", "mvalue"], outputs: ["mSelectOptionChange", "mSelectedOptionLabel"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "pipe", type: ValueFormatterPipe, name: "valueFormatter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: EditableTextCaseComponent, decorators: [{
             type: Component,
@@ -8001,91 +8001,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 args: ['searchQuery']
             }] } });
 
-class FileUploadComponent {
-    set _accept(v) {
-        switch (v) {
-            case 'image':
-                this.accept = '.png,.jpg,.docx,.pdf';
-                break;
-            default:
-                this.accept = v;
-                break;
-        }
-    }
-    constructor() {
-        this.class = input();
-        this.mini = input(true);
-        this.listFiles = input(true);
-        this.fileChange = new EventEmitter();
-        this.filesChange = new EventEmitter();
-        this.uS = inject(UtilityService);
-    }
-    ngOnInit() { }
-    get isSingle() {
-        return !this.multiple;
-    }
-    acceptFiles(...files) {
-        this.files = files;
-        this.file = files ? files[0] : null;
-    }
-    emitFiles() {
-        if (this.multiple)
-            this.filesChange.emit(this.files);
-        else
-            this.fileChange.emit(this.file);
-    }
-    onUpload(event) {
-        const files = Array.from(event.target.files);
-        this.acceptFiles(...files);
-        this.emitFiles();
-    }
-    removeFile(index) {
-        this.files.splice(index, 1);
-        this.file = this.files ? this.files[0] : null;
-        this.fileChange.emit(this.file);
-        this.filesChange.emit(this.files);
-    }
-    openDialog() {
-        const inp = document.createElement('input');
-        inp.type = 'file';
-        inp.accept = this.accept;
-        inp.multiple = this.multiple;
-        inp.onchange = (e) => {
-            this.onUpload(e);
-            inp.remove();
-        };
-        // document.body.appendChild(inp);
-        inp.click();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: FileUploadComponent, isStandalone: true, selector: "app-file-upload", inputs: { help: { classPropertyName: "help", publicName: "help", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, mini: { classPropertyName: "mini", publicName: "mini", isSignal: true, isRequired: false, transformFunction: null }, useDocumentModal: { classPropertyName: "useDocumentModal", publicName: "useDocumentModal", isSignal: false, isRequired: false, transformFunction: null }, listFiles: { classPropertyName: "listFiles", publicName: "listFiles", isSignal: true, isRequired: false, transformFunction: null }, _accept: { classPropertyName: "_accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: false, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileChange", filesChange: "filesChange" }, ngImport: i0, template: "\n@if (listFiles()) {\n<div [ngClass]=\"{meta:mini()}\" class=\"{{class()}} form-label mb-2 hide-scroll\">\n  @for (item of files; track item;) {\n  <div class=\"row align-items-start mb-1\">\n    <div class=\"col\">\n      <div class=\"hide-scroll file-name\">\n        {{item?.name}}\n      </div>\n    </div>\n    <div class=\"col-auto text-end\">\n      <span class=\"text-danger pointer p-1 fa fa-close\" (click)=\"removeFile($index);\"></span>\n    </div>\n  </div>\n}\n</div>\n}\n<!-- <input type=\"file\"  style=\"display: none;\" accept=\"{{accept}}\" (change)=\"onUpload($event)\" #uploadInput [multiple]=\"multiple\"> -->\n<app-btn icon=\"upload\" (mclick)=\"openDialog()\" [type]=\"file?'primary':'secondary'\"\n  [disabled]=\"disabled\" [help]=\"help\" [text]=\"label\">\n\n</app-btn>", styles: [".meta,.file-name{height:23px}.meta{overflow-y:auto}.file-name{overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FileUploadComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-file-upload', standalone: true, imports: [NgIf, NgClass, NgFor, BtnComponent], template: "\n@if (listFiles()) {\n<div [ngClass]=\"{meta:mini()}\" class=\"{{class()}} form-label mb-2 hide-scroll\">\n  @for (item of files; track item;) {\n  <div class=\"row align-items-start mb-1\">\n    <div class=\"col\">\n      <div class=\"hide-scroll file-name\">\n        {{item?.name}}\n      </div>\n    </div>\n    <div class=\"col-auto text-end\">\n      <span class=\"text-danger pointer p-1 fa fa-close\" (click)=\"removeFile($index);\"></span>\n    </div>\n  </div>\n}\n</div>\n}\n<!-- <input type=\"file\"  style=\"display: none;\" accept=\"{{accept}}\" (change)=\"onUpload($event)\" #uploadInput [multiple]=\"multiple\"> -->\n<app-btn icon=\"upload\" (mclick)=\"openDialog()\" [type]=\"file?'primary':'secondary'\"\n  [disabled]=\"disabled\" [help]=\"help\" [text]=\"label\">\n\n</app-btn>", styles: [".meta,.file-name{height:23px}.meta{overflow-y:auto}.file-name{overflow:auto}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { help: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], useDocumentModal: [{
-                type: Input
-            }], _accept: [{
-                type: Input,
-                args: ['accept']
-            }], file: [{
-                type: Input
-            }], fileChange: [{
-                type: Output
-            }], files: [{
-                type: Input
-            }], filesChange: [{
-                type: Output
-            }] } });
-
 class FadingCirclesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FadingCirclesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: FadingCirclesComponent, isStandalone: true, selector: "fading-circles", ngImport: i0, template: "<div class=\"lds-ellipsis\">\n    <div></div>\n    <div></div>\n    <div></div>\n    <div></div>\n</div>", styles: [".lds-ellipsis{display:inline-block;position:relative;width:80px;height:80px}.lds-ellipsis div{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:var(--primary);animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:nth-child(1){left:8px;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:8px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:32px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:56px;animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(24px)}}\n"] }); }
@@ -12072,7 +11987,7 @@ class FormGeneratorComponent extends BaseFormGenerator {
             this.onSubmit.emit(this.form.getRawValue());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FormGeneratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: FormGeneratorComponent, isStandalone: true, selector: "form-generator", inputs: { keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: false, isRequired: false, transformFunction: null }, presetValueForSingleOption: { classPropertyName: "presetValueForSingleOption", publicName: "presetValueForSingleOption", isSignal: true, isRequired: false, transformFunction: null }, isCreate: { classPropertyName: "isCreate", publicName: "isCreate", isSignal: true, isRequired: false, transformFunction: null }, submitOnEnterKey: { classPropertyName: "submitOnEnterKey", publicName: "submitOnEnterKey", isSignal: true, isRequired: false, transformFunction: null }, submitFunc: { classPropertyName: "submitFunc", publicName: "submitFunc", isSignal: false, isRequired: false, transformFunction: null }, submitBtnText: { classPropertyName: "submitBtnText", publicName: "submitBtnText", isSignal: true, isRequired: false, transformFunction: null }, submitBtnTemplate: { classPropertyName: "submitBtnTemplate", publicName: "submitBtnTemplate", isSignal: true, isRequired: false, transformFunction: null }, submitSuccessText: { classPropertyName: "submitSuccessText", publicName: "submitSuccessText", isSignal: true, isRequired: false, transformFunction: null }, showSubmitBtn: { classPropertyName: "showSubmitBtn", publicName: "showSubmitBtn", isSignal: true, isRequired: false, transformFunction: null }, gridStyle: { classPropertyName: "gridStyle", publicName: "gridStyle", isSignal: true, isRequired: false, transformFunction: null }, gridMDStyle: { classPropertyName: "gridMDStyle", publicName: "gridMDStyle", isSignal: true, isRequired: false, transformFunction: null }, gridLGStyle: { classPropertyName: "gridLGStyle", publicName: "gridLGStyle", isSignal: true, isRequired: false, transformFunction: null }, gridXXLStyle: { classPropertyName: "gridXXLStyle", publicName: "gridXXLStyle", isSignal: true, isRequired: false, transformFunction: null }, formGridClass: { classPropertyName: "formGridClass", publicName: "formGridClass", isSignal: true, isRequired: false, transformFunction: null }, useLoader: { classPropertyName: "useLoader", publicName: "useLoader", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, _formSchema: { classPropertyName: "_formSchema", publicName: "formSchema", isSignal: false, isRequired: true, transformFunction: null }, _isShow: { classPropertyName: "_isShow", publicName: "isShow", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", mchange: "mchange", _submissionResponse: "submissionResponse" }, viewQueries: [{ propertyName: "formTagRef", first: true, predicate: ["formTag"], descendants: true, isSignal: true }, { propertyName: "submitBtnRef", first: true, predicate: ["submitBtn"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"computedLoading()\">\n  <form [formGroup]=\"form\" #formTag >\n    <div\n      class=\"row row-cols-{{ gridStyle() }} row-cols-md-{{ gridMDStyle() }} row-cols-lg-{{ gridLGStyle() }} row-cols-xxl-{{\n        gridXXLStyle()\n      }} align-items-center {{ formGridClass() }}\">\n      @for (scheme of computedFormSchema(); track scheme.id) {\n        <div class=\"col {{ scheme.cls }} \">\n          @switch (true) {\n            @case (scheme.type == 'tel') {\n              <app-phone-number\n                [form]=\"scheme.form || form\"\n                [label]=\"scheme.label\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [stacked]=\"scheme.stacked\"\n                [name]=\"scheme.field\"\n                [noFormat]=\"scheme.noFormat\"\n                [debug]=\"scheme.debug\"\n                (mchange)=\"mchangeEmitter()\"\n                [showValidation]=\"scheme.showValidation\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [showValidationIcon]=\"scheme.showValidationIcon\"\n                [countryCode3]=\"scheme.countryCode3\"\n                [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\" />\n            }\n            @case (scheme.type == 'autocomplete') {\n              <app-autocomplete\n                [form]=\"scheme.form || form\"\n                [label]=\"scheme.label\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [stacked]=\"scheme.stacked\"\n                [presetValue]=\"scheme.presetValue\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"scheme.noFormat\"\n                [labelType]=\"scheme.labelType | toAny\"\n                (mchange)=\"mchangeEmitter()\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [name]=\"scheme.field\"\n                [debug]=\"scheme.debug\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [valueField]=\"scheme.valueField\"\n                [optionsFunc]=\"scheme.optionsFunc\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n                [hint]=\"scheme.hint\"\n                [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\" />\n            }\n            @case (scheme.type == 'richtext') {\n              <rich-text-editor-rf\n                [form]=\"scheme.form || form\"\n                [label]=\"scheme.label!\"\n                [clearOnDisable]=\"scheme.clearOnDisable!\"\n                [stacked]=\"scheme.stacked\"\n                [labelField]=\"scheme.labelField!\"\n                [noFormat]=\"scheme.noFormat!\"\n                [labelType]=\"scheme.labelType | toAny\"\n                (mchange)=\"mchangeEmitter()\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [name]=\"scheme.field\"\n                [debug]=\"scheme.debug!\"\n                [showRequiredTag]=\"scheme.showRequiredTag!\"\n                [optionFormatter]=\"scheme.optionFormatter!\"\n                [valueField]=\"scheme.valueField!\"\n                [optionsFunc]=\"scheme.optionsFunc!\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [autoPickValueField]=\"scheme.autoPickValueField!\"\n                [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n                [hint]=\"scheme.hint!\"\n                [disabled]=\"scheme.disabled || (scheme.disabledIf! | functionCaller2: form.value : (scheme.field | toAny))\" />\n            }\n            @default {\n              <app-input-basic\n                [noFormat]=\"scheme.noFormat\"\n                [name]=\"scheme.field\"\n                [form]=\"scheme.form || form\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [type]=\"scheme.type\"\n                [valueField]=\"scheme.valueField\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [presetValue]=\"scheme.presetValue\"\n                [stacked]=\"scheme.stacked\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [checkedSignal]=\"scheme.checked\"\n                [showValidation]=\"!!scheme.asyncValidators\"\n                [showValidationIcon]=\"!!scheme.asyncValidators\"\n                [debug]=\"scheme.debug\"\n                (mchange)=\"mchangeEmitter()\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [labelField]=\"scheme.labelField\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\" />\n            }\n          }\n        </div>\n      }\n    </div>\n    <div class=\"row row-cols-auto justify-content-end\">\n      <div class=\"\">\n        @if (showSubmitBtn()) {\n          <app-btn [text]=\"submitBtnText()\"  group=\"submit\" [form]=\"form\" (mclick)=\"submit(submitBtn)\" #submitBtn />\n        }\n        @if (submitBtnTemplate()) {\n          <ng-container *ngTemplateOutlet=\"submitBtnTemplate()\"></ng-container>\n        }\n      </div>\n    </div>\n  </form>\n</loader>\n", styles: [""], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "options"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "hint", "labelLink", "lblCl", "light", "loading", "minLength", "maxLength", "multiple", "optionsFunc", "theme", "vms", "xsmall", "setCurrentDate", "options", "mvalue"], outputs: ["mSelectOptionChange", "mSelectedOptionLabel"] }, { kind: "component", type: RichTextEditorRFComponent, selector: "rich-text-editor-rf" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: FormGeneratorComponent, isStandalone: true, selector: "form-generator", inputs: { keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: false, isRequired: false, transformFunction: null }, presetValueForSingleOption: { classPropertyName: "presetValueForSingleOption", publicName: "presetValueForSingleOption", isSignal: true, isRequired: false, transformFunction: null }, isCreate: { classPropertyName: "isCreate", publicName: "isCreate", isSignal: true, isRequired: false, transformFunction: null }, submitOnEnterKey: { classPropertyName: "submitOnEnterKey", publicName: "submitOnEnterKey", isSignal: true, isRequired: false, transformFunction: null }, submitFunc: { classPropertyName: "submitFunc", publicName: "submitFunc", isSignal: false, isRequired: false, transformFunction: null }, submitBtnText: { classPropertyName: "submitBtnText", publicName: "submitBtnText", isSignal: true, isRequired: false, transformFunction: null }, submitBtnTemplate: { classPropertyName: "submitBtnTemplate", publicName: "submitBtnTemplate", isSignal: true, isRequired: false, transformFunction: null }, submitSuccessText: { classPropertyName: "submitSuccessText", publicName: "submitSuccessText", isSignal: true, isRequired: false, transformFunction: null }, showSubmitBtn: { classPropertyName: "showSubmitBtn", publicName: "showSubmitBtn", isSignal: true, isRequired: false, transformFunction: null }, gridStyle: { classPropertyName: "gridStyle", publicName: "gridStyle", isSignal: true, isRequired: false, transformFunction: null }, gridMDStyle: { classPropertyName: "gridMDStyle", publicName: "gridMDStyle", isSignal: true, isRequired: false, transformFunction: null }, gridLGStyle: { classPropertyName: "gridLGStyle", publicName: "gridLGStyle", isSignal: true, isRequired: false, transformFunction: null }, gridXXLStyle: { classPropertyName: "gridXXLStyle", publicName: "gridXXLStyle", isSignal: true, isRequired: false, transformFunction: null }, formGridClass: { classPropertyName: "formGridClass", publicName: "formGridClass", isSignal: true, isRequired: false, transformFunction: null }, useLoader: { classPropertyName: "useLoader", publicName: "useLoader", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, _formSchema: { classPropertyName: "_formSchema", publicName: "formSchema", isSignal: false, isRequired: true, transformFunction: null }, _isShow: { classPropertyName: "_isShow", publicName: "isShow", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", mchange: "mchange", _submissionResponse: "submissionResponse" }, viewQueries: [{ propertyName: "formTagRef", first: true, predicate: ["formTag"], descendants: true, isSignal: true }, { propertyName: "submitBtnRef", first: true, predicate: ["submitBtn"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"computedLoading()\">\n  <form [formGroup]=\"form\" #formTag >\n    <div\n      class=\"row row-cols-{{ gridStyle() }} row-cols-md-{{ gridMDStyle() }} row-cols-lg-{{ gridLGStyle() }} row-cols-xxl-{{\n        gridXXLStyle()\n      }} align-items-center {{ formGridClass() }}\">\n      @for (scheme of computedFormSchema(); track scheme.id) {\n        <div class=\"col {{ scheme.cls }} \">\n          @switch (true) {\n            @case (scheme.type == 'tel') {\n              <app-phone-number\n                [form]=\"scheme.form || form\"\n                [label]=\"scheme.label\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [stacked]=\"scheme.stacked\"\n                [name]=\"scheme.field\"\n                [noFormat]=\"scheme.noFormat\"\n                [debug]=\"scheme.debug\"\n                (mchange)=\"mchangeEmitter()\"\n                [showValidation]=\"scheme.showValidation\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [showValidationIcon]=\"scheme.showValidationIcon\"\n                [countryCode3]=\"scheme.countryCode3\"\n                [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\" />\n            }\n            @case (scheme.type == 'autocomplete') {\n              <app-autocomplete\n                [form]=\"scheme.form || form\"\n                [label]=\"scheme.label\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [stacked]=\"scheme.stacked\"\n                [presetValue]=\"scheme.presetValue\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"scheme.noFormat\"\n                [labelType]=\"scheme.labelType | toAny\"\n                (mchange)=\"mchangeEmitter()\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [name]=\"scheme.field\"\n                [debug]=\"scheme.debug\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [valueField]=\"scheme.valueField\"\n                [optionsFunc]=\"scheme.optionsFunc\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n                [hint]=\"scheme.hint\"\n                [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\" />\n            }\n            @case (scheme.type == 'richtext') {\n              <rich-text-editor-rf\n                [form]=\"scheme.form || form\"\n                [label]=\"scheme.label!\"\n                [clearOnDisable]=\"scheme.clearOnDisable!\"\n                [stacked]=\"scheme.stacked\"\n                [labelField]=\"scheme.labelField!\"\n                [noFormat]=\"scheme.noFormat!\"\n                [labelType]=\"scheme.labelType | toAny\"\n                (mchange)=\"mchangeEmitter()\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [name]=\"scheme.field\"\n                [debug]=\"scheme.debug!\"\n                [showRequiredTag]=\"scheme.showRequiredTag!\"\n                [optionFormatter]=\"scheme.optionFormatter!\"\n                [valueField]=\"scheme.valueField!\"\n                [optionsFunc]=\"scheme.optionsFunc!\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [autoPickValueField]=\"scheme.autoPickValueField!\"\n                [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n                [hint]=\"scheme.hint!\"\n                [maxLength]=\"scheme.maxLength\"\n                [minLength]=\"scheme.minLength\"\n                [disabled]=\"scheme.disabled || (scheme.disabledIf! | functionCaller2: form.value : (scheme.field | toAny))\" />\n            }\n            @default {\n              <app-input-basic\n                [noFormat]=\"scheme.noFormat\"\n                [name]=\"scheme.field\"\n                [form]=\"scheme.form || form\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [type]=\"scheme.type\"\n                [valueField]=\"scheme.valueField\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [presetValue]=\"scheme.presetValue\"\n                [stacked]=\"scheme.stacked\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [checkedSignal]=\"scheme.checked\"\n                [showValidation]=\"!!scheme.asyncValidators\"\n                [showValidationIcon]=\"!!scheme.asyncValidators\"\n                [debug]=\"scheme.debug\"\n                (mchange)=\"mchangeEmitter()\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [labelField]=\"scheme.labelField\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [maxLength]=\"scheme.maxLength\"\n                [minLength]=\"scheme.minLength\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\" />\n            }\n          }\n        </div>\n      }\n    </div>\n    <div class=\"row row-cols-auto justify-content-end\">\n      <div class=\"\">\n        @if (showSubmitBtn()) {\n          <app-btn [text]=\"submitBtnText()\"  group=\"submit\" [form]=\"form\" (mclick)=\"submit(submitBtn)\" #submitBtn />\n        }\n        @if (submitBtnTemplate()) {\n          <ng-container *ngTemplateOutlet=\"submitBtnTemplate()\"></ng-container>\n        }\n      </div>\n    </div>\n  </form>\n</loader>\n", styles: [""], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "options"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "hint", "labelLink", "lblCl", "light", "loading", "multiple", "optionsFunc", "theme", "vms", "xsmall", "setCurrentDate", "options", "mvalue"], outputs: ["mSelectOptionChange", "mSelectedOptionLabel"] }, { kind: "component", type: RichTextEditorRFComponent, selector: "rich-text-editor-rf" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FormGeneratorComponent, decorators: [{
             type: Component,
@@ -12091,7 +12006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                         ReactiveFormsModule,
                         FunctionCaller2,
                         ToAnyPipe,
-                    ], template: "<loader [loading]=\"computedLoading()\">\n  <form [formGroup]=\"form\" #formTag >\n    <div\n      class=\"row row-cols-{{ gridStyle() }} row-cols-md-{{ gridMDStyle() }} row-cols-lg-{{ gridLGStyle() }} row-cols-xxl-{{\n        gridXXLStyle()\n      }} align-items-center {{ formGridClass() }}\">\n      @for (scheme of computedFormSchema(); track scheme.id) {\n        <div class=\"col {{ scheme.cls }} \">\n          @switch (true) {\n            @case (scheme.type == 'tel') {\n              <app-phone-number\n                [form]=\"scheme.form || form\"\n                [label]=\"scheme.label\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [stacked]=\"scheme.stacked\"\n                [name]=\"scheme.field\"\n                [noFormat]=\"scheme.noFormat\"\n                [debug]=\"scheme.debug\"\n                (mchange)=\"mchangeEmitter()\"\n                [showValidation]=\"scheme.showValidation\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [showValidationIcon]=\"scheme.showValidationIcon\"\n                [countryCode3]=\"scheme.countryCode3\"\n                [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\" />\n            }\n            @case (scheme.type == 'autocomplete') {\n              <app-autocomplete\n                [form]=\"scheme.form || form\"\n                [label]=\"scheme.label\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [stacked]=\"scheme.stacked\"\n                [presetValue]=\"scheme.presetValue\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"scheme.noFormat\"\n                [labelType]=\"scheme.labelType | toAny\"\n                (mchange)=\"mchangeEmitter()\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [name]=\"scheme.field\"\n                [debug]=\"scheme.debug\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [valueField]=\"scheme.valueField\"\n                [optionsFunc]=\"scheme.optionsFunc\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n                [hint]=\"scheme.hint\"\n                [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\" />\n            }\n            @case (scheme.type == 'richtext') {\n              <rich-text-editor-rf\n                [form]=\"scheme.form || form\"\n                [label]=\"scheme.label!\"\n                [clearOnDisable]=\"scheme.clearOnDisable!\"\n                [stacked]=\"scheme.stacked\"\n                [labelField]=\"scheme.labelField!\"\n                [noFormat]=\"scheme.noFormat!\"\n                [labelType]=\"scheme.labelType | toAny\"\n                (mchange)=\"mchangeEmitter()\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [name]=\"scheme.field\"\n                [debug]=\"scheme.debug!\"\n                [showRequiredTag]=\"scheme.showRequiredTag!\"\n                [optionFormatter]=\"scheme.optionFormatter!\"\n                [valueField]=\"scheme.valueField!\"\n                [optionsFunc]=\"scheme.optionsFunc!\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [autoPickValueField]=\"scheme.autoPickValueField!\"\n                [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n                [hint]=\"scheme.hint!\"\n                [disabled]=\"scheme.disabled || (scheme.disabledIf! | functionCaller2: form.value : (scheme.field | toAny))\" />\n            }\n            @default {\n              <app-input-basic\n                [noFormat]=\"scheme.noFormat\"\n                [name]=\"scheme.field\"\n                [form]=\"scheme.form || form\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [type]=\"scheme.type\"\n                [valueField]=\"scheme.valueField\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [presetValue]=\"scheme.presetValue\"\n                [stacked]=\"scheme.stacked\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [checkedSignal]=\"scheme.checked\"\n                [showValidation]=\"!!scheme.asyncValidators\"\n                [showValidationIcon]=\"!!scheme.asyncValidators\"\n                [debug]=\"scheme.debug\"\n                (mchange)=\"mchangeEmitter()\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [labelField]=\"scheme.labelField\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\" />\n            }\n          }\n        </div>\n      }\n    </div>\n    <div class=\"row row-cols-auto justify-content-end\">\n      <div class=\"\">\n        @if (showSubmitBtn()) {\n          <app-btn [text]=\"submitBtnText()\"  group=\"submit\" [form]=\"form\" (mclick)=\"submit(submitBtn)\" #submitBtn />\n        }\n        @if (submitBtnTemplate()) {\n          <ng-container *ngTemplateOutlet=\"submitBtnTemplate()\"></ng-container>\n        }\n      </div>\n    </div>\n  </form>\n</loader>\n" }]
+                    ], template: "<loader [loading]=\"computedLoading()\">\n  <form [formGroup]=\"form\" #formTag >\n    <div\n      class=\"row row-cols-{{ gridStyle() }} row-cols-md-{{ gridMDStyle() }} row-cols-lg-{{ gridLGStyle() }} row-cols-xxl-{{\n        gridXXLStyle()\n      }} align-items-center {{ formGridClass() }}\">\n      @for (scheme of computedFormSchema(); track scheme.id) {\n        <div class=\"col {{ scheme.cls }} \">\n          @switch (true) {\n            @case (scheme.type == 'tel') {\n              <app-phone-number\n                [form]=\"scheme.form || form\"\n                [label]=\"scheme.label\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [stacked]=\"scheme.stacked\"\n                [name]=\"scheme.field\"\n                [noFormat]=\"scheme.noFormat\"\n                [debug]=\"scheme.debug\"\n                (mchange)=\"mchangeEmitter()\"\n                [showValidation]=\"scheme.showValidation\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [showValidationIcon]=\"scheme.showValidationIcon\"\n                [countryCode3]=\"scheme.countryCode3\"\n                [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\" />\n            }\n            @case (scheme.type == 'autocomplete') {\n              <app-autocomplete\n                [form]=\"scheme.form || form\"\n                [label]=\"scheme.label\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [stacked]=\"scheme.stacked\"\n                [presetValue]=\"scheme.presetValue\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"scheme.noFormat\"\n                [labelType]=\"scheme.labelType | toAny\"\n                (mchange)=\"mchangeEmitter()\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [name]=\"scheme.field\"\n                [debug]=\"scheme.debug\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [valueField]=\"scheme.valueField\"\n                [optionsFunc]=\"scheme.optionsFunc\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n                [hint]=\"scheme.hint\"\n                [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\" />\n            }\n            @case (scheme.type == 'richtext') {\n              <rich-text-editor-rf\n                [form]=\"scheme.form || form\"\n                [label]=\"scheme.label!\"\n                [clearOnDisable]=\"scheme.clearOnDisable!\"\n                [stacked]=\"scheme.stacked\"\n                [labelField]=\"scheme.labelField!\"\n                [noFormat]=\"scheme.noFormat!\"\n                [labelType]=\"scheme.labelType | toAny\"\n                (mchange)=\"mchangeEmitter()\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [name]=\"scheme.field\"\n                [debug]=\"scheme.debug!\"\n                [showRequiredTag]=\"scheme.showRequiredTag!\"\n                [optionFormatter]=\"scheme.optionFormatter!\"\n                [valueField]=\"scheme.valueField!\"\n                [optionsFunc]=\"scheme.optionsFunc!\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [autoPickValueField]=\"scheme.autoPickValueField!\"\n                [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n                [hint]=\"scheme.hint!\"\n                [maxLength]=\"scheme.maxLength\"\n                [minLength]=\"scheme.minLength\"\n                [disabled]=\"scheme.disabled || (scheme.disabledIf! | functionCaller2: form.value : (scheme.field | toAny))\" />\n            }\n            @default {\n              <app-input-basic\n                [noFormat]=\"scheme.noFormat\"\n                [name]=\"scheme.field\"\n                [form]=\"scheme.form || form\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [type]=\"scheme.type\"\n                [valueField]=\"scheme.valueField\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [presetValue]=\"scheme.presetValue\"\n                [stacked]=\"scheme.stacked\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [checkedSignal]=\"scheme.checked\"\n                [showValidation]=\"!!scheme.asyncValidators\"\n                [showValidationIcon]=\"!!scheme.asyncValidators\"\n                [debug]=\"scheme.debug\"\n                (mchange)=\"mchangeEmitter()\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [labelField]=\"scheme.labelField\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [maxLength]=\"scheme.maxLength\"\n                [minLength]=\"scheme.minLength\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\" />\n            }\n          }\n        </div>\n      }\n    </div>\n    <div class=\"row row-cols-auto justify-content-end\">\n      <div class=\"\">\n        @if (showSubmitBtn()) {\n          <app-btn [text]=\"submitBtnText()\"  group=\"submit\" [form]=\"form\" (mclick)=\"submit(submitBtn)\" #submitBtn />\n        }\n        @if (submitBtnTemplate()) {\n          <ng-container *ngTemplateOutlet=\"submitBtnTemplate()\"></ng-container>\n        }\n      </div>\n    </div>\n  </form>\n</loader>\n" }]
         }], ctorParameters: () => [], propDecorators: { keyField: [{
                 type: Input
             }], onSubmit: [{
@@ -12159,6 +12074,356 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
 
 const ModalComponents = [ModalComponent, ModalFormComponent, ModalHeaderComponent, ModalBodyDirective, ModalFooterDirective];
 
+class WebcamMediaComponent {
+    constructor() {
+        this.closed = new EventEmitter();
+        this.recorderStopped = new EventEmitter();
+        this.recorderErrored = new EventEmitter();
+        this.recorderStarted = new EventEmitter();
+        this.recordingState = new EventEmitter();
+        this.recordingChanged = new EventEmitter();
+        this.isVideo = input();
+        this.useAudio = input();
+        this.fileName = input();
+        this.fileNameFactory = input();
+        this.fileType = input();
+        this.extraClass = input();
+        /**
+         * Seconds
+         */
+        this.recordingNotificationInterval = input(5);
+        this.isBackground = input(false);
+        this.computedRecordingNotificationInterval = computed(() => (this.recordingNotificationInterval() || 5) * 1000);
+        this.isPicture = computed(() => !this.isVideo());
+        this.subject = computed(() => (this.isPicture() ? 'Image' : 'Video'));
+        this.isPaused = toSignal(this.recordingState.pipe(map$1((r) => r == 'paused')));
+        this.computedFileType = computed(() => {
+            const ft = this.fileType(), isp = this.isPicture();
+            return ft || (isp ? 'image/jpeg' : 'video/mp4');
+        });
+        this.computedFileExtension = computed(() => this.computedFileType()?.split('/')[1]);
+        this.computedFileName = computed(() => {
+            const ff = this.fileNameFactory(), fn = this.fileName() || ff?.(this), fx = this.computedFileExtension(), subject = this.subject();
+            return fn?.includes('.' + fx) ? fn : `${fn || subject}.${fx}`;
+        });
+        this.streamingVideoTemplate = viewChild('streamVideoTemp');
+        this.recordingVideoRef = viewChild('recordingVideoTag');
+        this.recordingVideoRefEl = computed(() => this.recordingVideoRef()?.nativeElement);
+        this.streaming = signal(undefined);
+        this.preview = signal(false);
+        this.computedPreview = computed(() => !this.isBackground() && this.preview());
+        // The width and height of the captured photo. We will set the
+        // width to the value defined here, but the height will be
+        // calculated based on the aspect ratio of the input stream.
+        this.width = model(1080); // We will scale the photo width to this
+        this.height = computed(() => {
+            const width = this.width();
+            return width / (4 / 3);
+        }); // This will be computed based on the input stream
+        // The various HTML elements we need to configure or control. These
+        // will be set by the startup() function.
+        this.canvas = signal(undefined);
+        this.mediaFile = signal(undefined);
+        this.photoSrc = signal(undefined);
+        this.videoSrc = signal(undefined);
+        this.stream = signal(undefined);
+        this.isRecording = toSignal(this.recordingState.pipe(map$1((r) => r == 'recording' || r == 'paused')));
+        this.recordedBlobs = [];
+        this.recordedTime = signal(0);
+        this.startRecording = (stream = this.stream()) => {
+            if (!this.isVideo())
+                return;
+            this.recorder = new MediaRecorder(stream);
+            this.recordedBlobs = [];
+            this.recordedTime.set(0);
+            const lengths = [];
+            this.recorder.ondataavailable = (event) => {
+                this.recordedBlobs.push(event.data);
+                this.mediaFile.set(new File(this.recordedBlobs, this.computedFileName(), { type: this.computedFileType() }));
+                lengths.push([this.mediaFile().size, event.data.size]);
+            };
+            // this.recorder.ondataavailable = (event) => {
+            //   this.recordedBlobs = [event.data];
+            //   lengths.push(event.data.size);
+            // };
+            // this.recorder.ondataavailable = (event) => this.recordedBlobs.push(event.data);
+            this.recorder.start();
+            let notifSub;
+            const startTimer = () => {
+                let lastDateTime = Date.now();
+                notifSub = timer(1000, 1000)
+                    .pipe(tap(() => this.recordedTime.update((t) => (t += 1))), tap(() => console.log(Date.now(), this.computedRecordingNotificationInterval(), this.recordingNotificationInterval())), filter(() => Date.now() - lastDateTime > this.computedRecordingNotificationInterval()), tap(() => this.recorder.requestData()))
+                    .subscribe((r) => {
+                    lastDateTime = Date.now();
+                    this.recordingChanged.emit(this.mediaFile());
+                });
+            };
+            this.recorder.onstart = (e) => {
+                this.recordingState.emit(this.recorder.state);
+                this.recorderStarted.emit(e);
+                startTimer();
+            };
+            this.recorder.onstop = (e) => {
+                this.recordingState.emit(this.recorder.state);
+                this.recorderStopped.emit(e);
+                console.log('new length', lengths);
+                notifSub?.unsubscribe();
+            };
+            this.recorder.onpause = (e) => {
+                this.recordingState.emit(this.recorder.state);
+                notifSub?.unsubscribe();
+            };
+            this.recorder.onresume = (e) => {
+                this.recordingState.emit(this.recorder.state);
+                startTimer();
+            };
+            this.recorder.onerror = (e) => {
+                this.recordingState.emit(this.recorder.state);
+                this.recorderErrored.emit(e);
+                notifSub?.unsubscribe();
+            };
+        };
+    }
+    ngAfterViewInit() {
+        this.startUpWebcam();
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    /**
+     * Start the webcam stream
+     */
+    startUpWebcam() {
+        this.clear();
+        navigator.mediaDevices
+            .getUserMedia({ video: true, audio: this.useAudio() })
+            .then((stream) => {
+            this.streaming.set(true);
+            this.canvas.set(document.createElement('canvas'));
+            this.canvas()?.setAttribute('width', this.width() + 'px');
+            this.canvas()?.setAttribute('height', this.height() + 'px');
+            this.stream.set(stream);
+            // debugger;
+        })
+            .catch((err) => {
+            console.error(`An error occurred:`, err);
+        });
+    }
+    /**
+     * Indicate that the user is done with the webcam component.
+     *
+     * Any media obtained will be emitted
+     */
+    save() {
+        if (this.isPicture())
+            new Observable((sub) => this.canvas().toBlob((blob) => {
+                if (blob) {
+                    this.mediaFile.set(new File([blob], this.computedFileName()));
+                    sub.next(this.mediaFile());
+                    sub.complete();
+                }
+                else
+                    sub.error(`No ${this.subject()} file generated`);
+            }, this.computedFileType(), 1)).subscribe(() => {
+                this.closed.emit(this.mediaFile());
+                this.closeWebcam();
+            });
+        else {
+            this.closed.emit(this.mediaFile());
+            this.closeWebcam();
+        }
+    }
+    /**
+     * Indicate that the user is done with the webcam component.
+     *
+     * Any media obtained will be deleted
+     */
+    cancel() {
+        this.closed.emit(null);
+        this.closeWebcam();
+    }
+    /**
+     * Clear the media taken and close preview
+     */
+    clear() {
+        if (this.canvas()) {
+            const context = this.canvas()?.getContext('2d');
+            context.fillStyle = '#AAA';
+            context.fillRect(0, 0, this.canvas().width, this.canvas().height);
+            const data = this.canvas().toDataURL(this.computedFileType());
+            this.photoSrc.set(data);
+            this.streaming.set(true);
+            this.preview.set(false);
+        }
+    }
+    /**
+     * Shutdown the webcam stream
+     */
+    closeWebcam() {
+        this.stream()
+            ?.getTracks()
+            .forEach((x) => x.stop());
+        this.stream.set(undefined);
+        this.streaming.set(undefined);
+        // this.stream.set(this.stream()?.getTracks[0].stop());
+    }
+    /**
+     * Capture a photo by fetching the current contents of the video
+     * and drawing it into a canvas, then converting that to a PNG
+     * format data URL.
+     *
+     * By drawing it on an offscreen canvas and then
+     * drawing that to the screen, we can change its size and/or apply
+     * other changes before drawing it.
+     */
+    takePicture() {
+        if (!this.isPicture())
+            return;
+        const context = this.canvas().getContext('2d'), width = this.width(), height = this.height();
+        if (width && height && context) {
+            this.canvas.update((canvas) => {
+                if (canvas)
+                    canvas.width = width;
+                return canvas;
+            });
+            this.canvas.update((canvas) => {
+                if (canvas)
+                    canvas.height = height;
+                return canvas;
+            });
+            context.drawImage(this.recordingVideoRefEl(), 0, 0, width, height);
+            const data = this.canvas().toDataURL('image/png');
+            this.photoSrc.set(data);
+        }
+        else
+            this.clear();
+        this.streaming.set(false);
+        this.preview.set(true);
+    }
+    stopRecording() {
+        if (this.recorder.state === 'recording')
+            this.recorder.stop();
+        this.preview.set(true);
+        this.streaming.set(false);
+    }
+    pauseRecording() {
+        // debugger;
+        if (this.recorder.state === 'paused')
+            this.recorder.resume();
+        else
+            this.recorder.pause();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: WebcamMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: WebcamMediaComponent, isStandalone: true, selector: "lib-webcam-media", inputs: { isVideo: { classPropertyName: "isVideo", publicName: "isVideo", isSignal: true, isRequired: false, transformFunction: null }, useAudio: { classPropertyName: "useAudio", publicName: "useAudio", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, fileNameFactory: { classPropertyName: "fileNameFactory", publicName: "fileNameFactory", isSignal: true, isRequired: false, transformFunction: null }, fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, recordingNotificationInterval: { classPropertyName: "recordingNotificationInterval", publicName: "recordingNotificationInterval", isSignal: true, isRequired: false, transformFunction: null }, isBackground: { classPropertyName: "isBackground", publicName: "isBackground", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", recorderStopped: "recorderStopped", recorderErrored: "recorderErrored", recorderStarted: "recorderStarted", recordingState: "recordingState", recordingChanged: "recordingChanged", width: "widthChange" }, viewQueries: [{ propertyName: "streamingVideoTemplate", first: true, predicate: ["streamVideoTemp"], descendants: true, isSignal: true }, { propertyName: "recordingVideoRef", first: true, predicate: ["recordingVideoTag"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"\" [hidden]=\"streaming() != true || isBackground()\">\n  <ng-container *ngTemplateOutlet=\"streamVideoTemp\" />\n\n  @if (!isBackground()) {\n    <div class=\"wm-buttons\">\n      <div class=\"  row row-cols-lg-auto g-3 justify-content-start\">\n        @if (!isRecording()) {\n          <div>\n            <app-btn [text]=\"isPicture() ? 'Take Picture' : 'Record Video'\" (mclick)=\"isPicture() ? takePicture() : startRecording()\" />\n          </div>\n        } @else {\n          <div>\n            <app-btn text=\"{{isPaused()?'Play': 'Pause'}} Recording\" (mclick)=\"pauseRecording()\" type=\"outline\" [icon]=\"isPaused()?'play':'pause'\" />\n          </div>\n          <div>\n            <app-btn [text]=\"'Stop Recording'\" (mclick)=\"stopRecording()\" type=\"danger\" icon=\"stop\" />\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<ng-template #streamVideoTemp>\n  <div class=\"wm-recording-video-cont\">\n    <video #recordingVideoTag [srcObject]=\"stream()\" autoplay class=\"wm-recording-video {{ extraClass() }}\"></video>\n    @if (isRecording()) {\n      <div class=\"wm-recordingDot\"></div>\n    }\n  </div>\n</ng-template>\n\n@if (computedPreview()) {\n  <div class=\"wm-preview\">\n    <div>\n      @if (isPicture()) {\n        <img class=\"w-100\" [style.width.px]=\"width()\" [style.height.px]=\"height()\" [src]=\"photoSrc()\" />\n      } @else {\n        <video class=\"w-100\" [style.width.px]=\"width()\" [style.height.px]=\"height()\" [src]=\"mediaFile()\"></video>\n      }\n    </div>\n    <div class=\"mt-3 row row-cols-lg-auto g-3\">\n      <div>\n        <app-btn text=\"Retake {{ subject() }}\" type=\"outline\" (mclick)=\"clear()\" />\n      </div>\n      <div>\n        <app-btn (mclick)=\"save()\" text=\"Done\" type=\"primary\" icon=\"save\" />\n      </div>\n      <div>\n        <app-btn (mclick)=\"cancel()\" text=\"Cancel\" type=\"danger\" icon=\"cancel\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:block}:host .wm-recording-video{width:100%}:host .wm-preview image,:host .wm-preview video{object-fit:contain}:host .wm-recording-video-cont{position:relative}@keyframes wmAnimateDot{0%{background-color:transparent}50%{background-color:#ff000086}}:host .wm-recordingDot{animation-name:wmAnimateDot;animation-duration:1s;animation-iteration-count:infinite;border-radius:5px;--dimen: 20px;width:var(--dimen);height:var(--dimen);position:absolute;top:10px;right:10px}:host .wm-buttons{margin-top:var(--space-16)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: WebcamMediaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-webcam-media', standalone: true, imports: [CommonModule, BtnComponent], template: "<div class=\"\" [hidden]=\"streaming() != true || isBackground()\">\n  <ng-container *ngTemplateOutlet=\"streamVideoTemp\" />\n\n  @if (!isBackground()) {\n    <div class=\"wm-buttons\">\n      <div class=\"  row row-cols-lg-auto g-3 justify-content-start\">\n        @if (!isRecording()) {\n          <div>\n            <app-btn [text]=\"isPicture() ? 'Take Picture' : 'Record Video'\" (mclick)=\"isPicture() ? takePicture() : startRecording()\" />\n          </div>\n        } @else {\n          <div>\n            <app-btn text=\"{{isPaused()?'Play': 'Pause'}} Recording\" (mclick)=\"pauseRecording()\" type=\"outline\" [icon]=\"isPaused()?'play':'pause'\" />\n          </div>\n          <div>\n            <app-btn [text]=\"'Stop Recording'\" (mclick)=\"stopRecording()\" type=\"danger\" icon=\"stop\" />\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<ng-template #streamVideoTemp>\n  <div class=\"wm-recording-video-cont\">\n    <video #recordingVideoTag [srcObject]=\"stream()\" autoplay class=\"wm-recording-video {{ extraClass() }}\"></video>\n    @if (isRecording()) {\n      <div class=\"wm-recordingDot\"></div>\n    }\n  </div>\n</ng-template>\n\n@if (computedPreview()) {\n  <div class=\"wm-preview\">\n    <div>\n      @if (isPicture()) {\n        <img class=\"w-100\" [style.width.px]=\"width()\" [style.height.px]=\"height()\" [src]=\"photoSrc()\" />\n      } @else {\n        <video class=\"w-100\" [style.width.px]=\"width()\" [style.height.px]=\"height()\" [src]=\"mediaFile()\"></video>\n      }\n    </div>\n    <div class=\"mt-3 row row-cols-lg-auto g-3\">\n      <div>\n        <app-btn text=\"Retake {{ subject() }}\" type=\"outline\" (mclick)=\"clear()\" />\n      </div>\n      <div>\n        <app-btn (mclick)=\"save()\" text=\"Done\" type=\"primary\" icon=\"save\" />\n      </div>\n      <div>\n        <app-btn (mclick)=\"cancel()\" text=\"Cancel\" type=\"danger\" icon=\"cancel\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:block}:host .wm-recording-video{width:100%}:host .wm-preview image,:host .wm-preview video{object-fit:contain}:host .wm-recording-video-cont{position:relative}@keyframes wmAnimateDot{0%{background-color:transparent}50%{background-color:#ff000086}}:host .wm-recordingDot{animation-name:wmAnimateDot;animation-duration:1s;animation-iteration-count:infinite;border-radius:5px;--dimen: 20px;width:var(--dimen);height:var(--dimen);position:absolute;top:10px;right:10px}:host .wm-buttons{margin-top:var(--space-16)}\n"] }]
+        }], propDecorators: { closed: [{
+                type: Output
+            }], recorderStopped: [{
+                type: Output
+            }], recorderErrored: [{
+                type: Output
+            }], recorderStarted: [{
+                type: Output
+            }], recordingState: [{
+                type: Output
+            }], recordingChanged: [{
+                type: Output
+            }] } });
+
+class FileUploadComponent {
+    set _accept(v) {
+        switch (v) {
+            case 'image':
+                this.accept = '.png,.jpg,.docx,.pdf';
+                break;
+            default:
+                this.accept = v;
+                break;
+        }
+    }
+    constructor() {
+        this.mediaWidth = model(1080);
+        this.class = input();
+        this.useWebcam = input(false);
+        /**
+         * Only useful if using the webcam option
+         */
+        this.fileName = input();
+        this.mini = input(true);
+        this.listFiles = input(true);
+        this.fileChange = new EventEmitter();
+        this.filesChange = new EventEmitter();
+        this.uS = inject(UtilityService);
+    }
+    ngOnInit() { }
+    get isSingle() {
+        return !this.multiple;
+    }
+    acceptFiles(...files) {
+        this.files = files;
+        this.file = files ? files[0] : null;
+        this.emitFiles();
+    }
+    emitFiles() {
+        if (this.multiple)
+            this.filesChange.emit(this.files);
+        else
+            this.fileChange.emit(this.file);
+    }
+    onUpload(event) {
+        const files = Array.from(event.target.files);
+        this.acceptFiles(...files);
+    }
+    removeFile(index) {
+        this.files.splice(index, 1);
+        this.file = this.files ? this.files[0] : null;
+        this.fileChange.emit(this.file);
+        this.filesChange.emit(this.files);
+    }
+    openDialog() {
+        const inp = document.createElement('input');
+        inp.type = 'file';
+        inp.accept = this.accept;
+        inp.multiple = this.multiple;
+        inp.onchange = (e) => {
+            this.onUpload(e);
+            inp.remove();
+        };
+        // document.body.appendChild(inp);
+        inp.click();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: FileUploadComponent, isStandalone: true, selector: "app-file-upload", inputs: { help: { classPropertyName: "help", publicName: "help", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, mediaWidth: { classPropertyName: "mediaWidth", publicName: "mediaWidth", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, useWebcam: { classPropertyName: "useWebcam", publicName: "useWebcam", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, mini: { classPropertyName: "mini", publicName: "mini", isSignal: true, isRequired: false, transformFunction: null }, useDocumentModal: { classPropertyName: "useDocumentModal", publicName: "useDocumentModal", isSignal: false, isRequired: false, transformFunction: null }, listFiles: { classPropertyName: "listFiles", publicName: "listFiles", isSignal: true, isRequired: false, transformFunction: null }, _accept: { classPropertyName: "_accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: false, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { mediaWidth: "mediaWidthChange", fileChange: "fileChange", filesChange: "filesChange" }, ngImport: i0, template: "@if (listFiles()) {\n  <div [ngClass]=\"{ meta: mini() }\" class=\"{{ class() }} form-label mb-2 hide-scroll\">\n    @for (item of files; track item) {\n      <div class=\"row align-items-start mb-1\">\n        <div class=\"col\">\n          <div class=\"hide-scroll file-name\">\n            {{ item?.name }}\n          </div>\n        </div>\n        <div class=\"col-auto text-end\">\n          <span class=\"text-danger pointer p-1 fa fa-close\" (click)=\"removeFile($index)\"></span>\n        </div>\n      </div>\n    }\n  </div>\n}\n<!-- <input type=\"file\"  style=\"display: none;\" accept=\"{{accept}}\" (change)=\"onUpload($event)\" #uploadInput [multiple]=\"multiple\"> -->\n<app-btn\n  icon=\"upload\"\n  (mclick)=\"useWebcam() ? null : openDialog()\"\n  [type]=\"file ? 'primary' : 'secondary'\"\n  [disabled]=\"disabled\"\n  [help]=\"help\"\n  [text]=\"label\"\n  [matMenuTriggerFor]=\"useWebcam() ? menu : null\" />\n\n<mat-menu #menu=\"matMenu\">\n  <button mat-menu-item (click)=\"openDialog()\">Upload</button>\n  <button mat-menu-item (click)=\"webcamModal.open()\">Use Camera</button>\n</mat-menu>\n\n<modal-comp #webcamModal width=\"1080px\" header=\"Webcam\">\n  <ng-template modalBody>\n    <lib-webcam-media [fileName]=\"fileName()\" [width]=\"mediaWidth()\" (closed)=\"webcamModal.close(); acceptFiles($event)\" />\n  </ng-template>\n</modal-comp>\n", styles: [".meta,.file-name{height:23px}.meta{overflow-y:auto}.file-name{overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop"], outputs: ["modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: WebcamMediaComponent, selector: "lib-webcam-media", inputs: ["isVideo", "useAudio", "fileName", "fileNameFactory", "fileType", "extraClass", "recordingNotificationInterval", "isBackground", "width"], outputs: ["closed", "recorderStopped", "recorderErrored", "recorderStarted", "recordingState", "recordingChanged", "widthChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-file-upload', standalone: true, imports: [NgIf, NgClass, NgFor, BtnComponent, ModalComponents, MatMenuModule, WebcamMediaComponent], template: "@if (listFiles()) {\n  <div [ngClass]=\"{ meta: mini() }\" class=\"{{ class() }} form-label mb-2 hide-scroll\">\n    @for (item of files; track item) {\n      <div class=\"row align-items-start mb-1\">\n        <div class=\"col\">\n          <div class=\"hide-scroll file-name\">\n            {{ item?.name }}\n          </div>\n        </div>\n        <div class=\"col-auto text-end\">\n          <span class=\"text-danger pointer p-1 fa fa-close\" (click)=\"removeFile($index)\"></span>\n        </div>\n      </div>\n    }\n  </div>\n}\n<!-- <input type=\"file\"  style=\"display: none;\" accept=\"{{accept}}\" (change)=\"onUpload($event)\" #uploadInput [multiple]=\"multiple\"> -->\n<app-btn\n  icon=\"upload\"\n  (mclick)=\"useWebcam() ? null : openDialog()\"\n  [type]=\"file ? 'primary' : 'secondary'\"\n  [disabled]=\"disabled\"\n  [help]=\"help\"\n  [text]=\"label\"\n  [matMenuTriggerFor]=\"useWebcam() ? menu : null\" />\n\n<mat-menu #menu=\"matMenu\">\n  <button mat-menu-item (click)=\"openDialog()\">Upload</button>\n  <button mat-menu-item (click)=\"webcamModal.open()\">Use Camera</button>\n</mat-menu>\n\n<modal-comp #webcamModal width=\"1080px\" header=\"Webcam\">\n  <ng-template modalBody>\n    <lib-webcam-media [fileName]=\"fileName()\" [width]=\"mediaWidth()\" (closed)=\"webcamModal.close(); acceptFiles($event)\" />\n  </ng-template>\n</modal-comp>\n", styles: [".meta,.file-name{height:23px}.meta{overflow-y:auto}.file-name{overflow:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { help: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], useDocumentModal: [{
+                type: Input
+            }], _accept: [{
+                type: Input,
+                args: ['accept']
+            }], file: [{
+                type: Input
+            }], fileChange: [{
+                type: Output
+            }], files: [{
+                type: Input
+            }], filesChange: [{
+                type: Output
+            }] } });
+
 class FieldsToDisplayComponent {
     set _fields(v) {
         this.allFields.set(cloneDeep(v).map((x) => {
@@ -12974,7 +13239,7 @@ class DayHourMinInputComponent extends InputBasicComponent {
         this.sub3?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: DayHourMinInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: DayHourMinInputComponent, isStandalone: true, selector: "app-day-hour-min-input", inputs: { clearOnDisable: { classPropertyName: "clearOnDisable", publicName: "clearOnDisable", isSignal: true, isRequired: false, transformFunction: null }, toMins: { classPropertyName: "toMins", publicName: "toMins", isSignal: false, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, mins: { classPropertyName: "mins", publicName: "mins", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  @if (showLabelSignal()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <div class=\"row\">\n      <div class=\"col-4\">\n        <app-input-basic\n          [showLabel]=\"false\"\n          [form]=\"subForm\"\n          name=\"days\"\n          [min]=\"0\"\n          [type]=\"typeSignal()\"\n          [noFormat]=\"true\"\n          [stacked]=\"true\"\n          [clearOnDisable]=\"clearOnDisable()\"\n          placeholder=\"days\"\n          [showValidation]=\"daysTag.invalidSignal()\"\n          #daysTag />\n      </div>\n      <div class=\"col-4\">\n        <app-input-basic\n          [showLabel]=\"false\"\n          [form]=\"subForm\"\n          name=\"hours\"\n          [min]=\"0\"\n          [type]=\"typeSignal()\"\n          [noFormat]=\"true\"\n          [stacked]=\"true\"\n          [clearOnDisable]=\"clearOnDisable()\"\n          placeholder=\"hours\"\n          [showValidation]=\"hoursTag.invalidSignal()\"\n          #hoursTag />\n      </div>\n      <div class=\"col-4\">\n        <app-input-basic\n          [showLabel]=\"false\"\n          [form]=\"subForm\"\n          name=\"mins\"\n          [min]=\"0\"\n          [type]=\"typeSignal()\"\n          [noFormat]=\"true\"\n          [stacked]=\"true\"\n          [clearOnDisable]=\"clearOnDisable()\"\n          placeholder=\"minutes\"\n          [showValidation]=\"minsTag.invalidSignal()\"\n          #minsTag />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "hint", "labelLink", "lblCl", "light", "loading", "minLength", "maxLength", "multiple", "optionsFunc", "theme", "vms", "xsmall", "setCurrentDate", "options", "mvalue"], outputs: ["mSelectOptionChange", "mSelectedOptionLabel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: DayHourMinInputComponent, isStandalone: true, selector: "app-day-hour-min-input", inputs: { clearOnDisable: { classPropertyName: "clearOnDisable", publicName: "clearOnDisable", isSignal: true, isRequired: false, transformFunction: null }, toMins: { classPropertyName: "toMins", publicName: "toMins", isSignal: false, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, mins: { classPropertyName: "mins", publicName: "mins", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  @if (showLabelSignal()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <div class=\"row\">\n      <div class=\"col-4\">\n        <app-input-basic\n          [showLabel]=\"false\"\n          [form]=\"subForm\"\n          name=\"days\"\n          [min]=\"0\"\n          [type]=\"typeSignal()\"\n          [noFormat]=\"true\"\n          [stacked]=\"true\"\n          [clearOnDisable]=\"clearOnDisable()\"\n          placeholder=\"days\"\n          [showValidation]=\"daysTag.invalidSignal()\"\n          #daysTag />\n      </div>\n      <div class=\"col-4\">\n        <app-input-basic\n          [showLabel]=\"false\"\n          [form]=\"subForm\"\n          name=\"hours\"\n          [min]=\"0\"\n          [type]=\"typeSignal()\"\n          [noFormat]=\"true\"\n          [stacked]=\"true\"\n          [clearOnDisable]=\"clearOnDisable()\"\n          placeholder=\"hours\"\n          [showValidation]=\"hoursTag.invalidSignal()\"\n          #hoursTag />\n      </div>\n      <div class=\"col-4\">\n        <app-input-basic\n          [showLabel]=\"false\"\n          [form]=\"subForm\"\n          name=\"mins\"\n          [min]=\"0\"\n          [type]=\"typeSignal()\"\n          [noFormat]=\"true\"\n          [stacked]=\"true\"\n          [clearOnDisable]=\"clearOnDisable()\"\n          placeholder=\"minutes\"\n          [showValidation]=\"minsTag.invalidSignal()\"\n          #minsTag />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "hint", "labelLink", "lblCl", "light", "loading", "multiple", "optionsFunc", "theme", "vms", "xsmall", "setCurrentDate", "options", "mvalue"], outputs: ["mSelectOptionChange", "mSelectedOptionLabel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: DayHourMinInputComponent, decorators: [{
             type: Component,
@@ -13001,11 +13266,11 @@ class InputControlComponent extends InputBasicComponent {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: InputControlComponent, isStandalone: true, selector: "input-control", inputs: { control: "control" }, providers: InputProviders, usesInheritance: true, ngImport: i0, template: "<div class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\" [formGroup]=\"formSignal()\" [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\"></app-input-label>\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal()\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholder() }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input type=\"file\" [id]=\"idSignal()\" [class]=\"inputClassSignal()\" (change)=\"upload($event)\" [accept]=\"accept\" [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\n              </mat-option>\n            }\n            @for (item of options(); track iS.trackByValue($index, item)) {\n              <mat-option [value]=\"item.value\">\n                <div class=\"option\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\" #ele>\n                  {{ item.label | appTranslate: translateOptions() | async }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div class=\"password-icons pointer\" (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div [class]=\"inputClassSignal()\" [ngClass]=\"{ 'has-prefix': !!prefixSignal(), disabled: readonlySignal() || disabledSignal() }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div class=\"col-auto text-primary ms-2\" (click)=\"iS.log(formSignal())\" [matTooltip]=\"endLabelTooltipSignal() | appTranslate | async\">\n        {{ endLabelSignal() | appTranslate | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"controlSignal()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i1.MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["debug", "label", "hideOverflow", "minLength", "maxLength", "ignoreDirtiness", "customMessage", "control", "input"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: InputControlComponent, isStandalone: true, selector: "input-control", inputs: { control: "control" }, providers: InputProviders, usesInheritance: true, ngImport: i0, template: "<div class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\" [formGroup]=\"formSignal()\" [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\"></app-input-label>\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal()\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholder() }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input type=\"file\" [id]=\"idSignal()\" [class]=\"inputClassSignal()\" (change)=\"upload($event)\" [accept]=\"accept\" [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\n              </mat-option>\n            }\n            @for (item of options(); track iS.trackByValue($index, item)) {\n              <mat-option [value]=\"item.value\">\n                <div class=\"option\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\" #ele>\n                  {{ item.label | appTranslate: translateOptions() | async }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div class=\"password-icons pointer\" (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div [class]=\"inputClassSignal()\" [ngClass]=\"{ 'has-prefix': !!prefixSignal(), disabled: readonlySignal() || disabledSignal() }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div class=\"col-auto text-primary ms-2\" (click)=\"iS.log(formSignal())\" [matTooltip]=\"endLabelTooltipSignal() | appTranslate | async\">\n        {{ endLabelSignal() | appTranslate | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [minLength]=\"minLength\" [maxLength]=\"maxLength\" [control]=\"controlSignal()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i1.MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["debug", "label", "hideOverflow", "minLength", "maxLength", "ignoreDirtiness", "customMessage", "control", "input"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-control', standalone: true, providers: InputProviders, imports: [DateInputComponent, InputSharedModules], template: "<div class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\" [formGroup]=\"formSignal()\" [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\"></app-input-label>\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal()\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholder() }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input type=\"file\" [id]=\"idSignal()\" [class]=\"inputClassSignal()\" (change)=\"upload($event)\" [accept]=\"accept\" [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\n              </mat-option>\n            }\n            @for (item of options(); track iS.trackByValue($index, item)) {\n              <mat-option [value]=\"item.value\">\n                <div class=\"option\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\" #ele>\n                  {{ item.label | appTranslate: translateOptions() | async }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div class=\"password-icons pointer\" (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div [class]=\"inputClassSignal()\" [ngClass]=\"{ 'has-prefix': !!prefixSignal(), disabled: readonlySignal() || disabledSignal() }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div class=\"col-auto text-primary ms-2\" (click)=\"iS.log(formSignal())\" [matTooltip]=\"endLabelTooltipSignal() | appTranslate | async\">\n        {{ endLabelSignal() | appTranslate | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"controlSignal()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+            args: [{ selector: 'input-control', standalone: true, providers: InputProviders, imports: [DateInputComponent, InputSharedModules], template: "<div class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\" [formGroup]=\"formSignal()\" [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\"></app-input-label>\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal()\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholder() }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input type=\"file\" [id]=\"idSignal()\" [class]=\"inputClassSignal()\" (change)=\"upload($event)\" [accept]=\"accept\" [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\n              </mat-option>\n            }\n            @for (item of options(); track iS.trackByValue($index, item)) {\n              <mat-option [value]=\"item.value\">\n                <div class=\"option\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\" #ele>\n                  {{ item.label | appTranslate: translateOptions() | async }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div class=\"password-icons pointer\" (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div [class]=\"inputClassSignal()\" [ngClass]=\"{ 'has-prefix': !!prefixSignal(), disabled: readonlySignal() || disabledSignal() }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div class=\"col-auto text-primary ms-2\" (click)=\"iS.log(formSignal())\" [matTooltip]=\"endLabelTooltipSignal() | appTranslate | async\">\n        {{ endLabelSignal() | appTranslate | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [minLength]=\"minLength\" [maxLength]=\"maxLength\" [control]=\"controlSignal()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { control: [{
                 type: Input
             }] } });
@@ -13050,11 +13315,11 @@ class InputComponent extends InputBase {
             console.log(this.form);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: InputComponent, isStandalone: true, selector: "app-input-old", inputs: { _inp: ["input", "_inp"], accept: "accept", autocomplete: "autocomplete", endLabel: "endLabel", endLabelTooltip: "endLabelTooltip", files: "files", hint: "hint", id: "id", inpCl: "inpCl", labelLink: "labelLink", lblCl: "lblCl", light: "light", loading: "loading", multiple: "multiple", optionsFunc: "optionsFunc", showEmptyOption: "showEmptyOption", showLabel: "showLabel", showValidation: "showValidation", showValidationMsg: "showValidationMsg", showValidationIcon: "showValidationIcon", small: "small", stacked: "stacked", theme: "theme", xsmall: "xsmall", _value: ["value", "_value"] }, providers: InputProviders, usesInheritance: true, ngImport: i0, template: "<div class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\" [formGroup]=\"formSignal()\" [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\"></app-input-label>\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal()\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholder() }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input type=\"file\" [id]=\"idSignal()\" [class]=\"inputClassSignal()\" (change)=\"upload($event)\" [accept]=\"accept\" [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\n              </mat-option>\n            }\n            @for (item of options(); track iS.trackByValue($index, item)) {\n              <mat-option [value]=\"item.value\">\n                <div class=\"option\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\" #ele>\n                  {{ item.label | appTranslate: translateOptions() | async }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div class=\"password-icons pointer\" (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div [class]=\"inputClassSignal()\" [ngClass]=\"{ 'has-prefix': !!prefixSignal(), disabled: readonlySignal() || disabledSignal() }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div class=\"col-auto text-primary ms-2\" (click)=\"iS.log(formSignal())\" [matTooltip]=\"endLabelTooltipSignal() | appTranslate | async\">\n        {{ endLabelSignal() | appTranslate | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"controlSignal()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i1.MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["debug", "label", "hideOverflow", "minLength", "maxLength", "ignoreDirtiness", "customMessage", "control", "input"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: InputComponent, isStandalone: true, selector: "app-input-old", inputs: { _inp: ["input", "_inp"], accept: "accept", autocomplete: "autocomplete", endLabel: "endLabel", endLabelTooltip: "endLabelTooltip", files: "files", hint: "hint", id: "id", inpCl: "inpCl", labelLink: "labelLink", lblCl: "lblCl", light: "light", loading: "loading", multiple: "multiple", optionsFunc: "optionsFunc", showEmptyOption: "showEmptyOption", showLabel: "showLabel", showValidation: "showValidation", showValidationMsg: "showValidationMsg", showValidationIcon: "showValidationIcon", small: "small", stacked: "stacked", theme: "theme", xsmall: "xsmall", _value: ["value", "_value"] }, providers: InputProviders, usesInheritance: true, ngImport: i0, template: "<div class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\" [formGroup]=\"formSignal()\" [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\"></app-input-label>\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal()\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholder() }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input type=\"file\" [id]=\"idSignal()\" [class]=\"inputClassSignal()\" (change)=\"upload($event)\" [accept]=\"accept\" [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\n              </mat-option>\n            }\n            @for (item of options(); track iS.trackByValue($index, item)) {\n              <mat-option [value]=\"item.value\">\n                <div class=\"option\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\" #ele>\n                  {{ item.label | appTranslate: translateOptions() | async }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div class=\"password-icons pointer\" (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div [class]=\"inputClassSignal()\" [ngClass]=\"{ 'has-prefix': !!prefixSignal(), disabled: readonlySignal() || disabledSignal() }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div class=\"col-auto text-primary ms-2\" (click)=\"iS.log(formSignal())\" [matTooltip]=\"endLabelTooltipSignal() | appTranslate | async\">\n        {{ endLabelSignal() | appTranslate | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [minLength]=\"minLength\" [maxLength]=\"maxLength\" [control]=\"controlSignal()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i1.MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["debug", "label", "hideOverflow", "minLength", "maxLength", "ignoreDirtiness", "customMessage", "control", "input"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-input-old', standalone: true, providers: InputProviders, imports: [DateInputComponent, InputSharedModules], template: "<div class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\" [formGroup]=\"formSignal()\" [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\"></app-input-label>\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal()\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholder() }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input type=\"file\" [id]=\"idSignal()\" [class]=\"inputClassSignal()\" (change)=\"upload($event)\" [accept]=\"accept\" [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\n              </mat-option>\n            }\n            @for (item of options(); track iS.trackByValue($index, item)) {\n              <mat-option [value]=\"item.value\">\n                <div class=\"option\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\" #ele>\n                  {{ item.label | appTranslate: translateOptions() | async }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div class=\"password-icons pointer\" (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div [class]=\"inputClassSignal()\" [ngClass]=\"{ 'has-prefix': !!prefixSignal(), disabled: readonlySignal() || disabledSignal() }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div class=\"col-auto text-primary ms-2\" (click)=\"iS.log(formSignal())\" [matTooltip]=\"endLabelTooltipSignal() | appTranslate | async\">\n        {{ endLabelSignal() | appTranslate | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"controlSignal()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+            args: [{ selector: 'app-input-old', standalone: true, providers: InputProviders, imports: [DateInputComponent, InputSharedModules], template: "<div class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\" [formGroup]=\"formSignal()\" [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"formSignal()\"\n      [hint]=\"hint\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl\"\n      [light]=\"light\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme\"\n      [xsmall]=\"xsmall\"></app-input-label>\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal()\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholder() }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input type=\"file\" [id]=\"idSignal()\" [class]=\"inputClassSignal()\" (change)=\"upload($event)\" [accept]=\"accept\" [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\n              </mat-option>\n            }\n            @for (item of options(); track iS.trackByValue($index, item)) {\n              <mat-option [value]=\"item.value\">\n                <div class=\"option\" [matTooltip]=\"item.label\" [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\" #ele>\n                  {{ item.label | appTranslate: translateOptions() | async }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholder() }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div class=\"password-icons pointer\" (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div [class]=\"inputClassSignal()\" [ngClass]=\"{ 'has-prefix': !!prefixSignal(), disabled: readonlySignal() || disabledSignal() }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div class=\"col-auto text-primary ms-2\" (click)=\"iS.log(formSignal())\" [matTooltip]=\"endLabelTooltipSignal() | appTranslate | async\">\n        {{ endLabelSignal() | appTranslate | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [minLength]=\"minLength\" [maxLength]=\"maxLength\" [control]=\"controlSignal()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], propDecorators: { _inp: [{
                 type: Input,
                 args: ['input']
@@ -14598,7 +14863,7 @@ class TableInputRowComponent extends FormGeneratorComponent {
         this.childrenFormSchemaMap = input({});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: TableInputRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: TableInputRowComponent, isStandalone: true, selector: "tr[table-input-row]", inputs: { isShow: { classPropertyName: "isShow", publicName: "isShow", isSignal: true, isRequired: false, transformFunction: null }, hideAdd: { classPropertyName: "hideAdd", publicName: "hideAdd", isSignal: true, isRequired: false, transformFunction: null }, actionBtns: { classPropertyName: "actionBtns", publicName: "actionBtns", isSignal: true, isRequired: false, transformFunction: null }, childrenFormSchemaMap: { classPropertyName: "childrenFormSchemaMap", publicName: "childrenFormSchemaMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDeleteRowFunc: "onDeleteRowFunc", onAddRowFunc: "onAddRowFunc", onActionButtonClick: "onActionButtonClick" }, usesInheritance: true, ngImport: i0, template: "@for (scheme of formSchema(); track scheme.field) {\n  @switch (true) {\n    @case (scheme.type == 'tel') {\n      <td class=\"{{ scheme.cls }}\">\n        <app-phone-number\n          [form]=\"form\"\n          [clearOnDisable]=\"scheme.clearOnDisable\"\n          [name]=\"scheme.field\"\n          [showLabel]=\"false\"\n          [noFormat]=\"scheme.noFormat\"\n          [debug]=\"scheme.debug\"\n          [showValidation]=\"scheme.showValidation\"\n          [showValidationIcon]=\"scheme.showValidationIcon\"\n          [countryCode3]=\"scheme.countryCode3\"\n          [showValidationMsg]=\"true\"\n          [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\"\n          #inputTag></app-phone-number>\n      </td>\n    }\n    @case (scheme.type == 'autocomplete') {\n      <td class=\"{{ scheme.cls }}\">\n        <app-autocomplete\n          [form]=\"form\"\n          [clearOnDisable]=\"scheme.clearOnDisable\"\n          [labelField]=\"scheme.labelField\"\n          [noFormat]=\"scheme.noFormat\"\n          [labelType]=\"scheme.labelType | toAny\"\n          [showValidationMsg]=\"true\"\n          (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n          [name]=\"scheme.field | toAny\"\n          [debug]=\"scheme.debug\"\n          [optionFormatter]=\"scheme.optionFormatter\"\n          [valueField]=\"scheme.valueField\"\n          [options]=\"scheme.options || optionsMap[scheme.field | toAny]\"\n          [hint]=\"scheme.hint\"\n          [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\"\n          #inputTag></app-autocomplete>\n      </td>\n    }\n    @case (scheme.type == 'button') {\n      <td class=\"{{ scheme.cls }} w-1\">\n        <div class=\"d-flex\">\n          <app-btn\n            [text]=\"scheme.label\"\n            [type]=\"\n              (form | hasFormValue: (childrenFormSchemaMap()[scheme.field].formSchemaStr | toAny) : (form.valueChanges | async))\n                ? 'primary'\n                : 'secondary'\n            \"\n            onFormInvalid=\"warn\"\n            [form]=\"form\"\n            [icon]=\"scheme.icon\"\n            [formSchema]=\"childrenFormSchemaMap()[scheme.field].formSchema\"\n            [matTooltip]=\"form.value | formValue: childrenFormSchemaMap()[scheme.field].formSchema | toAny\"\n            (mclick)=\"dModal.open()\" />\n        </div>\n        <modal-comp #dModal [showFooter]=\"false\" header=\"{{ scheme.label }} Form\" width=\"70%\">\n          <ng-template modalBody>\n            <form-generator\n              [form]=\"form\"\n              [gridXXLStyle]=\"4\"\n              [gridLGStyle]=\"4\"\n              [showSubmitBtn]=\"false\"\n              [formSchema]=\"childrenFormSchemaMap()[scheme.field].formSchema\"\n              (onSubmit)=\"dModal.close()\"></form-generator>\n            @if (!isShow) {\n              <div class=\"d-flex justify-content-end\">\n                <app-btn (mclick)=\"dModal.close()\" text=\"Done\" />\n              </div>\n            }\n          </ng-template>\n        </modal-comp>\n      </td>\n    }\n    @default {\n      <td class=\"{{ scheme.cls }}\">\n        <app-input-basic\n          #formField\n          [name]=\"scheme.field | toAny\"\n          [form]=\"form\"\n          [dontFormatAsInput]=\"scheme.dontFormatAsInput\"\n          [clearOnDisable]=\"scheme.clearOnDisable\"\n          [type]=\"scheme.type\"\n          [valueField]=\"scheme.valueField\"\n          [labelType]=\"scheme.labelType | toAny\"\n          [showValidationMsg]=\"true\"\n          [checkedSignal]=\"scheme.checked\"\n          [showValidation]=\"!!scheme.asyncValidators\"\n          [noFormat]=\"scheme.noFormat\"\n          [showValidationIcon]=\"!!scheme.asyncValidators\"\n          [debug]=\"scheme.debug\"\n          [labelField]=\"scheme.labelField\"\n          [optionFormatter]=\"scheme.optionFormatter\"\n          (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n          [options]=\"scheme.options || optionsMap[scheme.field | toAny]\"\n          [decimalPoints]=\"scheme.decimalPoints\"\n          [hint]=\"scheme.hint\"\n          [max]=\"scheme.max\"\n          [min]=\"scheme.min\"\n          [placeholder]=\"scheme.placeholder\"\n          [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\"></app-input-basic>\n      </td>\n    }\n  }\n}\n@if (!isShow()) {\n  @if (onDeleteRowFunc) {\n    <td class=\"w-1\">\n      <app-btn group=\"delete\" [iconBtn]=\"true\" (mclick)=\"onDeleteRowFunc.emit({ btn: deleteBtn })\" #deleteBtn />\n    </td>\n  }\n  @if (onAddRowFunc) {\n    <td class=\"w-1\">\n      <app-btn [iconBtn]=\"true\" group=\"add\" [disabled]=\"hideAdd()\" (mclick)=\"onAddRowFunc.emit({ btn: addBtn })\" #addBtn></app-btn>\n    </td>\n  }\n  @for (actionBtn of actionBtns(); track actionBtn.icon) {\n    <td class=\"w-1\">\n      <app-btn\n        [iconBtn]=\"true\"\n        [group]=\"actionBtn.group\"\n        [icon]=\"actionBtn.icon\"\n        (mclick)=\"\n          onActionButtonClick.emit({\n            btn: actionBtnTemp,\n            actionButton: actionBtn\n          })\n        \"\n        #actionBtnTemp></app-btn>\n    </td>\n  }\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "options"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "component", type: FormGeneratorComponent, selector: "form-generator", inputs: ["keyField", "presetValueForSingleOption", "isCreate", "submitOnEnterKey", "submitFunc", "submitBtnText", "submitBtnTemplate", "submitSuccessText", "showSubmitBtn", "gridStyle", "gridMDStyle", "gridLGStyle", "gridXXLStyle", "formGridClass", "useLoader", "loading", "form", "formSchema", "isShow"], outputs: ["onSubmit", "mchange", "submissionResponse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: FormValuePipe, name: "formValue" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: HasFormValuePipe, name: "hasFormValue" }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "hint", "labelLink", "lblCl", "light", "loading", "minLength", "maxLength", "multiple", "optionsFunc", "theme", "vms", "xsmall", "setCurrentDate", "options", "mvalue"], outputs: ["mSelectOptionChange", "mSelectedOptionLabel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop"], outputs: ["modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: TableInputRowComponent, isStandalone: true, selector: "tr[table-input-row]", inputs: { isShow: { classPropertyName: "isShow", publicName: "isShow", isSignal: true, isRequired: false, transformFunction: null }, hideAdd: { classPropertyName: "hideAdd", publicName: "hideAdd", isSignal: true, isRequired: false, transformFunction: null }, actionBtns: { classPropertyName: "actionBtns", publicName: "actionBtns", isSignal: true, isRequired: false, transformFunction: null }, childrenFormSchemaMap: { classPropertyName: "childrenFormSchemaMap", publicName: "childrenFormSchemaMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDeleteRowFunc: "onDeleteRowFunc", onAddRowFunc: "onAddRowFunc", onActionButtonClick: "onActionButtonClick" }, usesInheritance: true, ngImport: i0, template: "@for (scheme of formSchema(); track scheme.field) {\n  @switch (true) {\n    @case (scheme.type == 'tel') {\n      <td class=\"{{ scheme.cls }}\">\n        <app-phone-number\n          [form]=\"form\"\n          [clearOnDisable]=\"scheme.clearOnDisable\"\n          [name]=\"scheme.field\"\n          [showLabel]=\"false\"\n          [noFormat]=\"scheme.noFormat\"\n          [debug]=\"scheme.debug\"\n          [showValidation]=\"scheme.showValidation\"\n          [showValidationIcon]=\"scheme.showValidationIcon\"\n          [countryCode3]=\"scheme.countryCode3\"\n          [showValidationMsg]=\"true\"\n          [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\"\n          #inputTag></app-phone-number>\n      </td>\n    }\n    @case (scheme.type == 'autocomplete') {\n      <td class=\"{{ scheme.cls }}\">\n        <app-autocomplete\n          [form]=\"form\"\n          [clearOnDisable]=\"scheme.clearOnDisable\"\n          [labelField]=\"scheme.labelField\"\n          [noFormat]=\"scheme.noFormat\"\n          [labelType]=\"scheme.labelType | toAny\"\n          [showValidationMsg]=\"true\"\n          (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n          [name]=\"scheme.field | toAny\"\n          [debug]=\"scheme.debug\"\n          [optionFormatter]=\"scheme.optionFormatter\"\n          [valueField]=\"scheme.valueField\"\n          [options]=\"scheme.options || optionsMap[scheme.field | toAny]\"\n          [hint]=\"scheme.hint\"\n          [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\"\n          #inputTag></app-autocomplete>\n      </td>\n    }\n    @case (scheme.type == 'button') {\n      <td class=\"{{ scheme.cls }} w-1\">\n        <div class=\"d-flex\">\n          <app-btn\n            [text]=\"scheme.label\"\n            [type]=\"\n              (form | hasFormValue: (childrenFormSchemaMap()[scheme.field].formSchemaStr | toAny) : (form.valueChanges | async))\n                ? 'primary'\n                : 'secondary'\n            \"\n            onFormInvalid=\"warn\"\n            [form]=\"form\"\n            [icon]=\"scheme.icon\"\n            [formSchema]=\"childrenFormSchemaMap()[scheme.field].formSchema\"\n            [matTooltip]=\"form.value | formValue: childrenFormSchemaMap()[scheme.field].formSchema | toAny\"\n            (mclick)=\"dModal.open()\" />\n        </div>\n        <modal-comp #dModal [showFooter]=\"false\" header=\"{{ scheme.label }} Form\" width=\"70%\">\n          <ng-template modalBody>\n            <form-generator\n              [form]=\"form\"\n              [gridXXLStyle]=\"4\"\n              [gridLGStyle]=\"4\"\n              [showSubmitBtn]=\"false\"\n              [formSchema]=\"childrenFormSchemaMap()[scheme.field].formSchema\"\n              (onSubmit)=\"dModal.close()\"></form-generator>\n            @if (!isShow) {\n              <div class=\"d-flex justify-content-end\">\n                <app-btn (mclick)=\"dModal.close()\" text=\"Done\" />\n              </div>\n            }\n          </ng-template>\n        </modal-comp>\n      </td>\n    }\n    @default {\n      <td class=\"{{ scheme.cls }}\">\n        <app-input-basic\n          #formField\n          [name]=\"scheme.field | toAny\"\n          [form]=\"form\"\n          [dontFormatAsInput]=\"scheme.dontFormatAsInput\"\n          [clearOnDisable]=\"scheme.clearOnDisable\"\n          [type]=\"scheme.type\"\n          [valueField]=\"scheme.valueField\"\n          [labelType]=\"scheme.labelType | toAny\"\n          [showValidationMsg]=\"true\"\n          [checkedSignal]=\"scheme.checked\"\n          [showValidation]=\"!!scheme.asyncValidators\"\n          [noFormat]=\"scheme.noFormat\"\n          [showValidationIcon]=\"!!scheme.asyncValidators\"\n          [debug]=\"scheme.debug\"\n          [labelField]=\"scheme.labelField\"\n          [optionFormatter]=\"scheme.optionFormatter\"\n          (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n          [options]=\"scheme.options || optionsMap[scheme.field | toAny]\"\n          [decimalPoints]=\"scheme.decimalPoints\"\n          [hint]=\"scheme.hint\"\n          [max]=\"scheme.max\"\n          [min]=\"scheme.min\"\n          [placeholder]=\"scheme.placeholder\"\n          [disabled]=\"scheme.disabled || (scheme.disabledIf | functionCaller2: form.value : (scheme.field | toAny))\"></app-input-basic>\n      </td>\n    }\n  }\n}\n@if (!isShow()) {\n  @if (onDeleteRowFunc) {\n    <td class=\"w-1\">\n      <app-btn group=\"delete\" [iconBtn]=\"true\" (mclick)=\"onDeleteRowFunc.emit({ btn: deleteBtn })\" #deleteBtn />\n    </td>\n  }\n  @if (onAddRowFunc) {\n    <td class=\"w-1\">\n      <app-btn [iconBtn]=\"true\" group=\"add\" [disabled]=\"hideAdd()\" (mclick)=\"onAddRowFunc.emit({ btn: addBtn })\" #addBtn></app-btn>\n    </td>\n  }\n  @for (actionBtn of actionBtns(); track actionBtn.icon) {\n    <td class=\"w-1\">\n      <app-btn\n        [iconBtn]=\"true\"\n        [group]=\"actionBtn.group\"\n        [icon]=\"actionBtn.icon\"\n        (mclick)=\"\n          onActionButtonClick.emit({\n            btn: actionBtnTemp,\n            actionButton: actionBtn\n          })\n        \"\n        #actionBtnTemp></app-btn>\n    </td>\n  }\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "options"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "component", type: FormGeneratorComponent, selector: "form-generator", inputs: ["keyField", "presetValueForSingleOption", "isCreate", "submitOnEnterKey", "submitFunc", "submitBtnText", "submitBtnTemplate", "submitSuccessText", "showSubmitBtn", "gridStyle", "gridMDStyle", "gridLGStyle", "gridXXLStyle", "formGridClass", "useLoader", "loading", "form", "formSchema", "isShow"], outputs: ["onSubmit", "mchange", "submissionResponse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: FormValuePipe, name: "formValue" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: HasFormValuePipe, name: "hasFormValue" }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "hint", "labelLink", "lblCl", "light", "loading", "multiple", "optionsFunc", "theme", "vms", "xsmall", "setCurrentDate", "options", "mvalue"], outputs: ["mSelectOptionChange", "mSelectedOptionLabel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop"], outputs: ["modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: TableInputRowComponent, decorators: [{
             type: Component,
@@ -15000,7 +15265,7 @@ class TablePlainComponent extends TableBaseComponent {
         this.filterChange.emit(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: TablePlainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: TablePlainComponent, isStandalone: true, selector: "table-plain", inputs: { customSelectClass: { classPropertyName: "customSelectClass", publicName: "customSelectClass", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, obsDataSource: { classPropertyName: "obsDataSource", publicName: "obsDataSource", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPager: { classPropertyName: "showPager", publicName: "showPager", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByField: { classPropertyName: "disableSelectionByField", publicName: "disableSelectionByField", isSignal: false, isRequired: false, transformFunction: null }, _data: { classPropertyName: "_data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, _filterFields: { classPropertyName: "_filterFields", publicName: "filterFields", isSignal: false, isRequired: false, transformFunction: null }, _filterFieldsMap: { classPropertyName: "_filterFieldsMap", publicName: "filterFieldsMap", isSignal: false, isRequired: false, transformFunction: null }, selectionPerPage: { classPropertyName: "selectionPerPage", publicName: "selectionPerPage", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { _view: "view", dataChanged: "dataChanged", filterChange: "filterChange", listMutated: "listMutated" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-plain\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  @if (filterFields()) {\n    <div class=\"d-flex\">\n      <app-btn\n        text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n        [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n        (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n    </div>\n    <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n      @for (scheme of filterFields(); track scheme) {\n        <div class=\"col-md-4 col-xxl-3\">\n          @switch (scheme.type) {\n            @case ('autocomplete') {\n              <div class=\"col\">\n                <app-autocomplete\n                  [form]=\"filterForm\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [name]=\"scheme.field | toAny\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                  #inputTag\n                  [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                  (mchange)=\"onFilterChange(dataSource().filteredData)\"></app-autocomplete>\n                <app-validation-message [input]=\"inputTag\" />\n              </div>\n            }\n            @default {\n              <app-input-basic\n                #formField\n                [name]=\"scheme.field | toAny\"\n                [form]=\"filterForm\"\n                [stacked]=\"true\"\n                [type]=\"scheme.type\"\n                [valueField]=\"scheme.valueField\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"true\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n              <app-validation-message [input]=\"formField\" />\n            }\n          }\n        </div>\n      }\n      <div class=\"col-md justify-content-end d-flex\">\n        <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\"></app-btn>\n      </div>\n    </div>\n  }\n\n  @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n    <div class=\" \">\n      <div class=\"row g-3 justify-content-between align-items-end\">\n        <div class=\"col-md\">\n          @if (startSectionTemplate) {\n            <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\"></ng-container>\n          }\n          @if (showFilter()) {\n            <form [formGroup]=\"filterForm\">\n              <div class=\"row justify-content-center align-items-end\">\n                <div class=\"col-md-auto\">\n                  <app-autocomplete\n                    label=\"Filter\"\n                    type=\"select\"\n                    [form]=\"filterForm\"\n                    name=\"field\"\n                    [stacked]=\"false\"\n                    [options]=\"filterOptions()\"\n                    valueField=\"code\"\n                    labelField=\"description\"></app-autocomplete>\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-input-basic label=\"Value\" type=\"text\" [form]=\"filterForm\" name=\"value\" [stacked]=\"false\"></app-input-basic>\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\"></app-btn>\n                </div>\n              </div>\n            </form>\n          }\n        </div>\n        @if (showExport() || showAdditionalColumns()) {\n          <div class=\"col-md-auto\">\n            <div class=\"row row-cols-auto g-3 justify-content-end\">\n              <span>\n                @if (showExport()) {\n                  <app-export-table\n                    [disabled]=\"!dataSource()?.data?.length\"\n                    [label]=\"label()\"\n                    [displayedColumns]=\"computedDisplayedColumns()\"\n                    [data]=\"dataSource()?.data\" />\n                }\n              </span>\n              @if (showAdditionalColumns()) {\n                <div class=\"d-flex\">\n                  <fields-to-display\n                    [fields]=\"allTableColumns()\"\n                    [currentColumns]=\"computedDisplayedColumns()\"\n                    (fieldsChanged)=\"fieldsChanged($event)\" />\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  <div [ngClass]=\"{ border: distinct() }\" class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n    <div class=\"table-responsive\">\n      <table\n        mat-table\n        [dataSource]=\"dataSource() || obsDataSource()\"\n        matSort\n        class=\"w-100 d-table table mb-0\"\n        [multiTemplateDataRows]=\"isExpandable\"\n        #table\n        [ngClass]=\"{ smallerFonts, nowrap, centerCells, curvy, 'table-striped': striped }\">\n        <!-- Checkbox Column -->\n        <ng-container matColumnDef=\"mselect\" [sticky]=\"!placeSelectionAtRight\" [stickyEnd]=\"placeSelectionAtRight\">\n          <th mat-header-cell *matHeaderCellDef>\n            @if (customSelectClass) {\n              <input\n                type=\"checkbox\"\n                [class]=\"customSelectClass\"\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [attr.aria-label]=\"checkboxLabel()\" />\n            }\n            @if (!customSelectClass) {\n              <mat-checkbox\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n            }\n          </th>\n          <td mat-cell *matCellDef=\"let row\">\n            @if (customSelectClass) {\n              <input\n                type=\"checkbox\"\n                class=\"form-control control-bg-gray\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [attr.aria-label]=\"checkboxLabel(row)\" />\n            }\n            @if (!customSelectClass) {\n              <mat-checkbox\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [aria-label]=\"checkboxLabel(row)\"\n                [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n            }\n          </td>\n        </ng-container>\n        <!-- Columns -->\n        @for (col of computedDisplayedColumns(); track col; let i = $index) {\n          @switch (col.type) {\n            <!-- CHECKBOX -->\n            @case ('textarea') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- <app-input-td-rf  [(model)]=\"col.\" [showLabel]=\"false\"  /> -->\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n            <!-- CHECKBOX -->\n            @case ('checkbox') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-ngmodel\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"checkbox\"\n                    [disabled]=\"col.disabled\"\n                    [checked]=\"col.checked\"\n                    [(model)]=\"row[col.f]\"\n                    (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Input -->\n            @case ('input') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-basic\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"text\"\n                    [disabled]=\"col.disabled\"\n                    [form]=\"row\"\n                    [name]=\"col.f\"\n                    [noFormat]=\"true\"></app-input-basic>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- PROGRESS BAR -->\n            @case ('progress') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"progress\">\n                    <div class=\"progress-bar progress-bar-striped bg-success\" role=\"progressbar\" [ngStyle]=\"{ width: row[col.f] }\">\n                      {{ row[col.f] }}\n                    </div>\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- COLOR -->\n            @case ('color') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Button -->\n            @case ('button') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n                  <app-btn\n                    [icon]=\"col.icon || col.btn?.icon\"\n                    [type]=\"col.btn?.type\"\n                    (mclick)=\"col.action ? col.action(row, col.f, getActionStatusCallback(col), index) : null\"\n                    [help]=\"col.btn?.help\"\n                    [showHelpIcon]=\"col.btn?.showHelpIcon\"\n                    [text]=\"col.btn?.label\"\n                    [loading]=\"col.btn?.loading\"\n                    [iconBtn]=\"col.btn?.iconBtn\"\n                    mclass=\"w-auto\"\n                    [disabled]=\"col.btn?.disabled || col.btn?.loading\"></app-btn>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Sub Table -->\n            @case ('table') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n                  <div class=\"inline-block\">\n                    <app-btn\n                      [icon]=\"col.icon\"\n                      [type]=\"col.btn?.type || 'dark'\"\n                      (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                      [group]=\"col.btn?.group\"\n                      [help]=\"col.subTable | tableToString: row | async\"\n                      [showHelpIcon]=\"false\"\n                      [text]=\"col.btn?.label\"\n                      [iconBtn]=\"true\"\n                      mclass=\"w-auto\"></app-btn>\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- ACTION COLUMNS -->\n            @case ('btns') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\" stickyEnd>\n                <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"btn-cell text-center\">\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n                  <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n                    @for (button of col.buttons; track button) {\n                      <div class=\"mx-2\">\n                        <app-btn\n                          [icon]=\"button.icon\"\n                          [text]=\"button.label\"\n                          [help]=\"button.help\"\n                          [showHelpIcon]=\"button.showHelpIcon\"\n                          [type]=\"button.type\"\n                          [group]=\"button.group\"\n                          [iconBtn]=\"!button.label\"\n                          mclass=\"w-auto\"\n                          (mclick)=\"button.action(row, i, btn)\"\n                          #btn></app-btn>\n                      </div>\n                    }\n                  </div>\n                </td>\n              </ng-container>\n            }\n\n            <!-- EDITABLE -->\n            @case ('editable') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <a\n                    class=\"cell\"\n                    [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n                    [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n                    [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                  <i (click)=\"col.action ? col.action(row, col.f) : null\" class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n                </td>\n              </ng-container>\n            }\n\n            <!-- DEFAULT -->\n            @default {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  @if (col.routeFormatter) {\n                    @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n                      <a\n                        class=\"cell\"\n                        [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                        (click)=\"col.action ? col.action(row, col.f) : null\"\n                        [queryParams]=\"cellRoute.queryParams\"\n                        routerLink=\"{{ cellRoute.route }}\"\n                        [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                    }\n                  } @else {\n                    <span\n                      class=\"cell\"\n                      [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                      (click)=\"col.action ? col.action(row, col.f) : null\"\n                      [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></span>\n                  }\n                </td>\n              </ng-container>\n            }\n\n            <!--// -->\n          }\n        }\n        <!-- EXPANDABLE COLUMN-->\n        @if (isExpandable()) {\n          <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\n            <td mat-cell *matCellDef=\"let row\">\n              <div class=\"d-flex justify-content-end\">\n                <app-btn\n                  [iconBtn]=\"true\"\n                  type=\"clear\"\n                  [customIcon]=\"expandedElement !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\"\n                  aria-label=\"expand row\"\n                  (mclick)=\"expandedElement = expandedElement === row ? null : row; $event.stopPropagation()\"></app-btn>\n              </div>\n            </td>\n          </ng-container>\n        }\n        <!--// -->\n        <!-- Options Column -->\n        @if (rowOptions()?.length > 0) {\n          <ng-container matColumnDef=\"option\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let row\">\n              <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                <i class=\"fa fa-ellipsis-v me-0\"></i>\n              </button>\n              <mat-menu #menu=\"matMenu\">\n                @for (option of rowOptions(); track option) {\n                  <button mat-menu-item class=\"{{ option.itemClass }}\" (click)=\"option.action(row)\">\n                    {{ option.t | appTranslate | async }}\n                  </button>\n                }\n              </mat-menu>\n            </td>\n          </ng-container>\n        }\n\n        @if (rawColumns(); as dcols) {\n          <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n          @if (isExpandable()) {\n            <ng-container matColumnDef=\"expandedDetail\">\n              <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"dcols?.length || 1\" [ngClass]=\"{ hideBorder: row != expandedElement }\">\n                <div class=\"example-element-detail\" [@detailExpand]=\"row == expandedElement ? 'expanded' : 'collapsed'\">\n                  <ng-container *ngTemplateOutlet=\"expandedRowTemplate(); context: { $implicit: { row } }\"></ng-container>\n                </div>\n              </td>\n            </ng-container>\n          }\n          <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: dcols\"\n            [ngClass]=\"{ pointer: showRowPointer(), disabled: isDisabledFunc() ? isDisabledFunc()(row) : false }\"\n            [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n            (click)=\"rowClick(row)\"></tr>\n          <tr class=\"mat-row\" *matNoDataRow>\n            <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n              {{ noItemTxt() | appTranslate | async }}\n            </td>\n          </tr>\n          @if (isExpandable()) {\n            <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"expanded-detail-row\" [style.height.px]=\"0\"></tr>\n          }\n        }\n      </table>\n    </div>\n    @if (showPager()) {\n      <mat-paginator\n        [length]=\"resultsLength()\"\n        [pageSizeOptions]=\"computedPageSizeOptions()\"\n        [pageSize]=\"pageSize()\"\n        showFirstLastButtons></mat-paginator>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "options"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ExportTableComponent, selector: "app-export-table", inputs: ["data", "displayedColumns", "searchFunc", "searchQuery", "label", "disabled"] }, { kind: "component", type: FieldsToDisplayComponent, selector: "fields-to-display", inputs: ["fields", "currentColumns"], outputs: ["fieldsChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "hint", "labelLink", "lblCl", "light", "loading", "minLength", "maxLength", "multiple", "optionsFunc", "theme", "vms", "xsmall", "setCurrentDate", "options", "mvalue"], outputs: ["mSelectOptionChange", "mSelectedOptionLabel"] }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "component", type: InputNGModelComponent, selector: "app-input-ngmodel", inputs: ["mvalue", "cls", "colored", "disabled", "hide", "hint", "id", "inpCl", "label", "lblCl", "lblPosition", "mini", "light", "name", "model", "optionFormatter", "options", "checked", "contextData", "decimalPoints", "labelField", "max", "min", "placeholder", "prefix", "readonly", "required", "showEmptyOption", "showLabel", "showValidation", "showValidationIcon", "small", "stacked", "suffix", "theme", "type", "valueField", "labelType", "xsmall"], outputs: ["modelChange", "mchange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$2.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["debug", "label", "hideOverflow", "minLength", "maxLength", "ignoreDirtiness", "customMessage", "control", "input"] }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: TablePlainComponent, isStandalone: true, selector: "table-plain", inputs: { customSelectClass: { classPropertyName: "customSelectClass", publicName: "customSelectClass", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, obsDataSource: { classPropertyName: "obsDataSource", publicName: "obsDataSource", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPager: { classPropertyName: "showPager", publicName: "showPager", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByField: { classPropertyName: "disableSelectionByField", publicName: "disableSelectionByField", isSignal: false, isRequired: false, transformFunction: null }, _data: { classPropertyName: "_data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, _filterFields: { classPropertyName: "_filterFields", publicName: "filterFields", isSignal: false, isRequired: false, transformFunction: null }, _filterFieldsMap: { classPropertyName: "_filterFieldsMap", publicName: "filterFieldsMap", isSignal: false, isRequired: false, transformFunction: null }, selectionPerPage: { classPropertyName: "selectionPerPage", publicName: "selectionPerPage", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { _view: "view", dataChanged: "dataChanged", filterChange: "filterChange", listMutated: "listMutated" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-plain\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  @if (filterFields()) {\n    <div class=\"d-flex\">\n      <app-btn\n        text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n        [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n        (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n    </div>\n    <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n      @for (scheme of filterFields(); track scheme) {\n        <div class=\"col-md-4 col-xxl-3\">\n          @switch (scheme.type) {\n            @case ('autocomplete') {\n              <div class=\"col\">\n                <app-autocomplete\n                  [form]=\"filterForm\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [name]=\"scheme.field | toAny\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                  #inputTag\n                  [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                  (mchange)=\"onFilterChange(dataSource().filteredData)\"></app-autocomplete>\n                <app-validation-message [input]=\"inputTag\" />\n              </div>\n            }\n            @default {\n              <app-input-basic\n                #formField\n                [name]=\"scheme.field | toAny\"\n                [form]=\"filterForm\"\n                [stacked]=\"true\"\n                [type]=\"scheme.type\"\n                [valueField]=\"scheme.valueField\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"true\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n              <app-validation-message [input]=\"formField\" />\n            }\n          }\n        </div>\n      }\n      <div class=\"col-md justify-content-end d-flex\">\n        <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\"></app-btn>\n      </div>\n    </div>\n  }\n\n  @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n    <div class=\" \">\n      <div class=\"row g-3 justify-content-between align-items-end\">\n        <div class=\"col-md\">\n          @if (startSectionTemplate) {\n            <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\"></ng-container>\n          }\n          @if (showFilter()) {\n            <form [formGroup]=\"filterForm\">\n              <div class=\"row justify-content-center align-items-end\">\n                <div class=\"col-md-auto\">\n                  <app-autocomplete\n                    label=\"Filter\"\n                    type=\"select\"\n                    [form]=\"filterForm\"\n                    name=\"field\"\n                    [stacked]=\"false\"\n                    [options]=\"filterOptions()\"\n                    valueField=\"code\"\n                    labelField=\"description\"></app-autocomplete>\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-input-basic label=\"Value\" type=\"text\" [form]=\"filterForm\" name=\"value\" [stacked]=\"false\"></app-input-basic>\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\"></app-btn>\n                </div>\n              </div>\n            </form>\n          }\n        </div>\n        @if (showExport() || showAdditionalColumns()) {\n          <div class=\"col-md-auto\">\n            <div class=\"row row-cols-auto g-3 justify-content-end\">\n              <span>\n                @if (showExport()) {\n                  <app-export-table\n                    [disabled]=\"!dataSource()?.data?.length\"\n                    [label]=\"label()\"\n                    [displayedColumns]=\"computedDisplayedColumns()\"\n                    [data]=\"dataSource()?.data\" />\n                }\n              </span>\n              @if (showAdditionalColumns()) {\n                <div class=\"d-flex\">\n                  <fields-to-display\n                    [fields]=\"allTableColumns()\"\n                    [currentColumns]=\"computedDisplayedColumns()\"\n                    (fieldsChanged)=\"fieldsChanged($event)\" />\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  <div [ngClass]=\"{ border: distinct() }\" class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n    <div class=\"table-responsive\">\n      <table\n        mat-table\n        [dataSource]=\"dataSource() || obsDataSource()\"\n        matSort\n        class=\"w-100 d-table table mb-0\"\n        [multiTemplateDataRows]=\"isExpandable\"\n        #table\n        [ngClass]=\"{ smallerFonts, nowrap, centerCells, curvy, 'table-striped': striped }\">\n        <!-- Checkbox Column -->\n        <ng-container matColumnDef=\"mselect\" [sticky]=\"!placeSelectionAtRight\" [stickyEnd]=\"placeSelectionAtRight\">\n          <th mat-header-cell *matHeaderCellDef>\n            @if (customSelectClass) {\n              <input\n                type=\"checkbox\"\n                [class]=\"customSelectClass\"\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [attr.aria-label]=\"checkboxLabel()\" />\n            }\n            @if (!customSelectClass) {\n              <mat-checkbox\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n            }\n          </th>\n          <td mat-cell *matCellDef=\"let row\">\n            @if (customSelectClass) {\n              <input\n                type=\"checkbox\"\n                class=\"form-control control-bg-gray\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [attr.aria-label]=\"checkboxLabel(row)\" />\n            }\n            @if (!customSelectClass) {\n              <mat-checkbox\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [aria-label]=\"checkboxLabel(row)\"\n                [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n            }\n          </td>\n        </ng-container>\n        <!-- Columns -->\n        @for (col of computedDisplayedColumns(); track col; let i = $index) {\n          @switch (col.type) {\n            <!-- CHECKBOX -->\n            @case ('textarea') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- <app-input-td-rf  [(model)]=\"col.\" [showLabel]=\"false\"  /> -->\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n            <!-- CHECKBOX -->\n            @case ('checkbox') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-ngmodel\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"checkbox\"\n                    [disabled]=\"col.disabled\"\n                    [checked]=\"col.checked\"\n                    [(model)]=\"row[col.f]\"\n                    (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Input -->\n            @case ('input') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-basic\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"text\"\n                    [disabled]=\"col.disabled\"\n                    [form]=\"row\"\n                    [name]=\"col.f\"\n                    [noFormat]=\"true\"></app-input-basic>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- PROGRESS BAR -->\n            @case ('progress') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"progress\">\n                    <div class=\"progress-bar progress-bar-striped bg-success\" role=\"progressbar\" [ngStyle]=\"{ width: row[col.f] }\">\n                      {{ row[col.f] }}\n                    </div>\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- COLOR -->\n            @case ('color') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Button -->\n            @case ('button') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n                  <app-btn\n                    [icon]=\"col.icon || col.btn?.icon\"\n                    [type]=\"col.btn?.type\"\n                    (mclick)=\"col.action ? col.action(row, col.f, getActionStatusCallback(col), index) : null\"\n                    [help]=\"col.btn?.help\"\n                    [showHelpIcon]=\"col.btn?.showHelpIcon\"\n                    [text]=\"col.btn?.label\"\n                    [loading]=\"col.btn?.loading\"\n                    [iconBtn]=\"col.btn?.iconBtn\"\n                    mclass=\"w-auto\"\n                    [disabled]=\"col.btn?.disabled || col.btn?.loading\"></app-btn>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Sub Table -->\n            @case ('table') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n                  <div class=\"inline-block\">\n                    <app-btn\n                      [icon]=\"col.icon\"\n                      [type]=\"col.btn?.type || 'dark'\"\n                      (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                      [group]=\"col.btn?.group\"\n                      [help]=\"col.subTable | tableToString: row | async\"\n                      [showHelpIcon]=\"false\"\n                      [text]=\"col.btn?.label\"\n                      [iconBtn]=\"true\"\n                      mclass=\"w-auto\"></app-btn>\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- ACTION COLUMNS -->\n            @case ('btns') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\" stickyEnd>\n                <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"btn-cell text-center\">\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n                  <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n                    @for (button of col.buttons; track button) {\n                      <div class=\"mx-2\">\n                        <app-btn\n                          [icon]=\"button.icon\"\n                          [text]=\"button.label\"\n                          [help]=\"button.help\"\n                          [showHelpIcon]=\"button.showHelpIcon\"\n                          [type]=\"button.type\"\n                          [group]=\"button.group\"\n                          [iconBtn]=\"!button.label\"\n                          mclass=\"w-auto\"\n                          (mclick)=\"button.action(row, i, btn)\"\n                          #btn></app-btn>\n                      </div>\n                    }\n                  </div>\n                </td>\n              </ng-container>\n            }\n\n            <!-- EDITABLE -->\n            @case ('editable') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <a\n                    class=\"cell\"\n                    [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n                    [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n                    [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                  <i (click)=\"col.action ? col.action(row, col.f) : null\" class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n                </td>\n              </ng-container>\n            }\n\n            <!-- DEFAULT -->\n            @default {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  @if (col.routeFormatter) {\n                    @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n                      <a\n                        class=\"cell\"\n                        [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                        (click)=\"col.action ? col.action(row, col.f) : null\"\n                        [queryParams]=\"cellRoute.queryParams\"\n                        routerLink=\"{{ cellRoute.route }}\"\n                        [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                    }\n                  } @else {\n                    <span\n                      class=\"cell\"\n                      [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                      (click)=\"col.action ? col.action(row, col.f) : null\"\n                      [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></span>\n                  }\n                </td>\n              </ng-container>\n            }\n\n            <!--// -->\n          }\n        }\n        <!-- EXPANDABLE COLUMN-->\n        @if (isExpandable()) {\n          <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\n            <td mat-cell *matCellDef=\"let row\">\n              <div class=\"d-flex justify-content-end\">\n                <app-btn\n                  [iconBtn]=\"true\"\n                  type=\"clear\"\n                  [customIcon]=\"expandedElement !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\"\n                  aria-label=\"expand row\"\n                  (mclick)=\"expandedElement = expandedElement === row ? null : row; $event.stopPropagation()\"></app-btn>\n              </div>\n            </td>\n          </ng-container>\n        }\n        <!--// -->\n        <!-- Options Column -->\n        @if (rowOptions()?.length > 0) {\n          <ng-container matColumnDef=\"option\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef></th>\n            <td mat-cell *matCellDef=\"let row\">\n              <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                <i class=\"fa fa-ellipsis-v me-0\"></i>\n              </button>\n              <mat-menu #menu=\"matMenu\">\n                @for (option of rowOptions(); track option) {\n                  <button mat-menu-item class=\"{{ option.itemClass }}\" (click)=\"option.action(row)\">\n                    {{ option.t | appTranslate | async }}\n                  </button>\n                }\n              </mat-menu>\n            </td>\n          </ng-container>\n        }\n\n        @if (rawColumns(); as dcols) {\n          <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n          @if (isExpandable()) {\n            <ng-container matColumnDef=\"expandedDetail\">\n              <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"dcols?.length || 1\" [ngClass]=\"{ hideBorder: row != expandedElement }\">\n                <div class=\"example-element-detail\" [@detailExpand]=\"row == expandedElement ? 'expanded' : 'collapsed'\">\n                  <ng-container *ngTemplateOutlet=\"expandedRowTemplate(); context: { $implicit: { row } }\"></ng-container>\n                </div>\n              </td>\n            </ng-container>\n          }\n          <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: dcols\"\n            [ngClass]=\"{ pointer: showRowPointer(), disabled: isDisabledFunc() ? isDisabledFunc()(row) : false }\"\n            [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n            (click)=\"rowClick(row)\"></tr>\n          <tr class=\"mat-row\" *matNoDataRow>\n            <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n              {{ noItemTxt() | appTranslate | async }}\n            </td>\n          </tr>\n          @if (isExpandable()) {\n            <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"expanded-detail-row\" [style.height.px]=\"0\"></tr>\n          }\n        }\n      </table>\n    </div>\n    @if (showPager()) {\n      <mat-paginator\n        [length]=\"resultsLength()\"\n        [pageSizeOptions]=\"computedPageSizeOptions()\"\n        [pageSize]=\"pageSize()\"\n        showFirstLastButtons></mat-paginator>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "options"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ExportTableComponent, selector: "app-export-table", inputs: ["data", "displayedColumns", "searchFunc", "searchQuery", "label", "disabled"] }, { kind: "component", type: FieldsToDisplayComponent, selector: "fields-to-display", inputs: ["fields", "currentColumns"], outputs: ["fieldsChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "hint", "labelLink", "lblCl", "light", "loading", "multiple", "optionsFunc", "theme", "vms", "xsmall", "setCurrentDate", "options", "mvalue"], outputs: ["mSelectOptionChange", "mSelectedOptionLabel"] }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "component", type: InputNGModelComponent, selector: "app-input-ngmodel", inputs: ["mvalue", "cls", "colored", "disabled", "hide", "hint", "id", "inpCl", "label", "lblCl", "lblPosition", "mini", "light", "name", "model", "optionFormatter", "options", "checked", "contextData", "decimalPoints", "labelField", "max", "min", "placeholder", "prefix", "readonly", "required", "showEmptyOption", "showLabel", "showValidation", "showValidationIcon", "small", "stacked", "suffix", "theme", "type", "valueField", "labelType", "xsmall"], outputs: ["modelChange", "mchange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i6$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$2.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["debug", "label", "hideOverflow", "minLength", "maxLength", "ignoreDirtiness", "customMessage", "control", "input"] }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -15575,7 +15840,7 @@ class InputTableComponent {
         this.downloadCSV([this.templateObj], 'template ' + this.label);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputTableComponent, deps: [{ token: UtilityService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: InputTableComponent, isStandalone: true, selector: "app-input-table", inputs: { bordered: "bordered", ioFormatted: "ioFormatted", keyField: "keyField", label: "label", pageSizeOptions: "pageSizeOptions", realTimeValidation: "realTimeValidation", showAddRow: "showAddRow", showCSV: "showCSV", showEditRow: "showEditRow", showExportBtn: "showExportBtn", showIOBtns: "showIOBtns", showSN: "showSN", submitFunc: "submitFunc", validationFunc: "validationFunc", _numOfRows: ["numOfRows", "_numOfRows"], _schemas: ["schemas", "_schemas"], _data: ["data", "_data"] }, outputs: { submitted: "submitted" }, viewQueries: [{ propertyName: "errorListTag", first: true, predicate: ["errorList"], descendants: true }], ngImport: i0, template: "<loader [loading]=\"loading\"> \n  <div [ngClass]=\"{ border: bordered, unbordered: !bordered }\">\n    <div class=\"overflow-auto position-relative\">\n      <!-- <div class=\"overflow-auto position-relative\" PSBox> -->\n      <table matSort (matSortChange)=\"sortData($event)\" class=\"w-100 d-table mb-0 input-table\">\n        <thead>\n          <tr class=\"text-primary\">\n            @if (showSN) {\n            <th class=\"text-center\">{{ 'S/N' | appTranslate | async }}</th>\n            }\n            @for (item of schemas; track item) {\n\n            @if (!item.hidden) {\n            <th mat-sort-header=\"{{ item[keyField|toAny] }}\">\n              {{ item.label | appTranslate | async }}\n            </th>\n            }\n\n            }\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (\n          subForm of form.controls|toAny; track subFormTrackBy(si,\n          subForm); let si = $index) {\n          <tr [id]=\"subForm.value.__rowID\">\n            @if (showSN) {\n            <td>\n              <div class=\"center\">{{ si + 1 }}</div>\n            </td>\n            }\n            @for (scheme of schemas; track schemeTrackBy(ci, scheme); let ci = $index) {\n\n            <td class=\"content-cell\" [hidden]=\"scheme.hidden\">\n\n              @switch (true) {\n              @case (scheme.type == 'tel') {\n\n              <app-phone-number [form]=\"subForm\" [label]=\"scheme.label\" [name]=\"scheme[keyField]\"\n                [id]=\"subForm.value.__rowID|toAny\" [showLabel]=\"false\" [showValidation]=\"scheme.showValidation\"\n                [showValidationIcon]=\"scheme.showValidationIcon\" [stacked]=\"true\" [countryCode3]=\"\n                       cellCountryCode3s[scheme.getCountryCode3Key+si] || scheme.countryCode3\n                      \" [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: subForm.value:scheme[keyField]\n                      \" #inputTag>\n              </app-phone-number>\n              <app-validation-message [input]=\"inputTag\" />\n\n              }\n              @case (scheme.type == 'autocomplete') {\n\n              <app-autocomplete [form]=\"subForm\" [label]=\"scheme.label\" [labelField]=\"scheme.labelField\"\n                [id]=\"subForm.value.__rowID|toAny\" [autoPickValueField]=\"true\" [labelType]=\"scheme.labelType\"\n                [name]=\"scheme[keyField|toAny]\" [optionFormatter]=\"scheme.optionFormatter\" [showLabel]=\"false\"\n                [stacked]=\"true\" [valueField]=\"scheme.valueField\" (mchange)=\"addCellOption(scheme,subForm,$event,si)\"\n                [options]=\"\n                       scheme.options||schemaMap[scheme.field|toAny]?.options||cellOptions[scheme.optionsKey+si]\n                      \" [hint]=\"scheme.hint\" [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: subForm.value:scheme[keyField]\n                      \" #inputTag></app-autocomplete>\n              <app-validation-message [input]=\"inputTag\" />\n\n              }\n              @default {\n\n              <app-input-basic #inputTag [decimalPoints]=\"scheme.decimalPoints\" [form]=\"subForm\"\n                [id]=\"subForm.value.__rowID|toAny\" [hint]=\"scheme.hint\" [label]=\"scheme.label\"\n                [labelField]=\"scheme.labelField\" [autoPickValueField]=\"true\" [labelType]=\"scheme.labelType\"\n                [max]=\"scheme.max\" [min]=\"scheme.min\" [name]=\"scheme[keyField|toAny]\"\n                [optionFormatter]=\"scheme.optionFormatter\" [placeholder]=\"scheme.placeholder\" [showLabel]=\"false\"\n                [showValidation]=\"scheme.showValidation\" [showValidationIcon]=\"scheme.showValidationIcon\"\n                [type]=\"scheme.type\" [valueField]=\"scheme.valueField\"\n                (mchange)=\"addCellOption(scheme,subForm,$event,si)\" [options]=\"\n                          scheme.options||schemaMap[scheme.field|toAny]?.options||cellOptions[scheme.optionsKey+si]\n                      \" [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: subForm.value:scheme[keyField]\n                      \" />\n              <app-validation-message [input]=\"inputTag\" />\n\n              }\n              }\n\n            </td>\n\n            }\n            <td>\n              <div class=\"d-flex justify-content-center\">\n                @if (showEditRow) {\n\n                <app-btn group=\"edit\" (mclick)=\"editRow(si)\"></app-btn>\n                <span class=\"mx-1\"></span>\n\n                }\n                <app-btn group=\"delete\" (mclick)=\"removeRow(si)\"></app-btn>\n                @if (showAddRow) {\n\n                <span class=\"mx-1\"></span>\n                <app-btn group=\"add\" (mclick)=\"addRow(si + 1)\"></app-btn>\n\n                }\n              </div>\n            </td>\n          </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n    <!-- <mat-paginator *ngIf=\"batchUpload\" [length]=\"form?.length\" [pageSize]=\"pageSizeOptions[0]\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      (page)=\"openPage($event)\" aria-label=\"Select page\">\n    </mat-paginator> -->\n    <!-- <mat-paginator  [length]=\"thi\" [pageSizeOptions]=\"pageSizeOptions\" [pageSize]=\"pageSize\"\n    showFirstLastButtons>\n  </mat-paginator> -->\n  </div>\n  @if (submitFunc) {\n  <div class=\"row align-items-center justify-content-end mt-3\">\n    <div class=\"col-auto d-flex\">\n      <app-btn (mclick)=\"submit()\" text=\"Submit\" [form]=\"form\" type=\"secondary\" icon=\"save\">\n      </app-btn>\n    </div>\n  </div>\n  }\n</loader>", styles: ["tr{vertical-align:top}.content-cell{min-width:200px}th:first-child,td:first-child{position:sticky;left:0;z-index:2}th{position:sticky;left:0;z-index:1;font-weight:500}th:last-child,td:last-child{position:sticky;right:0;z-index:2;width:1%}th,td{background-color:#fff;padding:5px}.border th,.border td{border:1px solid #d4d4d4}.unbordered th,.unbordered td{border:none}::ng-deep .mat-sort-header-content{overflow:auto;white-space:nowrap}::ng-deep .mat-expansion-panel-header{padding:0 10px!important}::ng-deep .mat-expansion-panel-body{padding:0 10px!important}.invalidRow td,td.invalidCell{background-color:#ffe4e4}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["debug", "label", "hideOverflow", "minLength", "maxLength", "ignoreDirtiness", "customMessage", "control", "input"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "options"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "hint", "labelLink", "lblCl", "light", "loading", "minLength", "maxLength", "multiple", "optionsFunc", "theme", "vms", "xsmall", "setCurrentDate", "options", "mvalue"], outputs: ["mSelectOptionChange", "mSelectedOptionLabel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: InputTableComponent, isStandalone: true, selector: "app-input-table", inputs: { bordered: "bordered", ioFormatted: "ioFormatted", keyField: "keyField", label: "label", pageSizeOptions: "pageSizeOptions", realTimeValidation: "realTimeValidation", showAddRow: "showAddRow", showCSV: "showCSV", showEditRow: "showEditRow", showExportBtn: "showExportBtn", showIOBtns: "showIOBtns", showSN: "showSN", submitFunc: "submitFunc", validationFunc: "validationFunc", _numOfRows: ["numOfRows", "_numOfRows"], _schemas: ["schemas", "_schemas"], _data: ["data", "_data"] }, outputs: { submitted: "submitted" }, viewQueries: [{ propertyName: "errorListTag", first: true, predicate: ["errorList"], descendants: true }], ngImport: i0, template: "<loader [loading]=\"loading\"> \n  <div [ngClass]=\"{ border: bordered, unbordered: !bordered }\">\n    <div class=\"overflow-auto position-relative\">\n      <!-- <div class=\"overflow-auto position-relative\" PSBox> -->\n      <table matSort (matSortChange)=\"sortData($event)\" class=\"w-100 d-table mb-0 input-table\">\n        <thead>\n          <tr class=\"text-primary\">\n            @if (showSN) {\n            <th class=\"text-center\">{{ 'S/N' | appTranslate | async }}</th>\n            }\n            @for (item of schemas; track item) {\n\n            @if (!item.hidden) {\n            <th mat-sort-header=\"{{ item[keyField|toAny] }}\">\n              {{ item.label | appTranslate | async }}\n            </th>\n            }\n\n            }\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (\n          subForm of form.controls|toAny; track subFormTrackBy(si,\n          subForm); let si = $index) {\n          <tr [id]=\"subForm.value.__rowID\">\n            @if (showSN) {\n            <td>\n              <div class=\"center\">{{ si + 1 }}</div>\n            </td>\n            }\n            @for (scheme of schemas; track schemeTrackBy(ci, scheme); let ci = $index) {\n\n            <td class=\"content-cell\" [hidden]=\"scheme.hidden\">\n\n              @switch (true) {\n              @case (scheme.type == 'tel') {\n\n              <app-phone-number [form]=\"subForm\" [label]=\"scheme.label\" [name]=\"scheme[keyField]\"\n                [id]=\"subForm.value.__rowID|toAny\" [showLabel]=\"false\" [showValidation]=\"scheme.showValidation\"\n                [showValidationIcon]=\"scheme.showValidationIcon\" [stacked]=\"true\" [countryCode3]=\"\n                       cellCountryCode3s[scheme.getCountryCode3Key+si] || scheme.countryCode3\n                      \" [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: subForm.value:scheme[keyField]\n                      \" #inputTag>\n              </app-phone-number>\n              <app-validation-message [input]=\"inputTag\" />\n\n              }\n              @case (scheme.type == 'autocomplete') {\n\n              <app-autocomplete [form]=\"subForm\" [label]=\"scheme.label\" [labelField]=\"scheme.labelField\"\n                [id]=\"subForm.value.__rowID|toAny\" [autoPickValueField]=\"true\" [labelType]=\"scheme.labelType\"\n                [name]=\"scheme[keyField|toAny]\" [optionFormatter]=\"scheme.optionFormatter\" [showLabel]=\"false\"\n                [stacked]=\"true\" [valueField]=\"scheme.valueField\" (mchange)=\"addCellOption(scheme,subForm,$event,si)\"\n                [options]=\"\n                       scheme.options||schemaMap[scheme.field|toAny]?.options||cellOptions[scheme.optionsKey+si]\n                      \" [hint]=\"scheme.hint\" [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: subForm.value:scheme[keyField]\n                      \" #inputTag></app-autocomplete>\n              <app-validation-message [input]=\"inputTag\" />\n\n              }\n              @default {\n\n              <app-input-basic #inputTag [decimalPoints]=\"scheme.decimalPoints\" [form]=\"subForm\"\n                [id]=\"subForm.value.__rowID|toAny\" [hint]=\"scheme.hint\" [label]=\"scheme.label\"\n                [labelField]=\"scheme.labelField\" [autoPickValueField]=\"true\" [labelType]=\"scheme.labelType\"\n                [max]=\"scheme.max\" [min]=\"scheme.min\" [name]=\"scheme[keyField|toAny]\"\n                [optionFormatter]=\"scheme.optionFormatter\" [placeholder]=\"scheme.placeholder\" [showLabel]=\"false\"\n                [showValidation]=\"scheme.showValidation\" [showValidationIcon]=\"scheme.showValidationIcon\"\n                [type]=\"scheme.type\" [valueField]=\"scheme.valueField\"\n                (mchange)=\"addCellOption(scheme,subForm,$event,si)\" [options]=\"\n                          scheme.options||schemaMap[scheme.field|toAny]?.options||cellOptions[scheme.optionsKey+si]\n                      \" [disabled]=\"\n                        scheme.disabledIf\n                          | functionCaller2: subForm.value:scheme[keyField]\n                      \" />\n              <app-validation-message [input]=\"inputTag\" />\n\n              }\n              }\n\n            </td>\n\n            }\n            <td>\n              <div class=\"d-flex justify-content-center\">\n                @if (showEditRow) {\n\n                <app-btn group=\"edit\" (mclick)=\"editRow(si)\"></app-btn>\n                <span class=\"mx-1\"></span>\n\n                }\n                <app-btn group=\"delete\" (mclick)=\"removeRow(si)\"></app-btn>\n                @if (showAddRow) {\n\n                <span class=\"mx-1\"></span>\n                <app-btn group=\"add\" (mclick)=\"addRow(si + 1)\"></app-btn>\n\n                }\n              </div>\n            </td>\n          </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n    <!-- <mat-paginator *ngIf=\"batchUpload\" [length]=\"form?.length\" [pageSize]=\"pageSizeOptions[0]\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      (page)=\"openPage($event)\" aria-label=\"Select page\">\n    </mat-paginator> -->\n    <!-- <mat-paginator  [length]=\"thi\" [pageSizeOptions]=\"pageSizeOptions\" [pageSize]=\"pageSize\"\n    showFirstLastButtons>\n  </mat-paginator> -->\n  </div>\n  @if (submitFunc) {\n  <div class=\"row align-items-center justify-content-end mt-3\">\n    <div class=\"col-auto d-flex\">\n      <app-btn (mclick)=\"submit()\" text=\"Submit\" [form]=\"form\" type=\"secondary\" icon=\"save\">\n      </app-btn>\n    </div>\n  </div>\n  }\n</loader>", styles: ["tr{vertical-align:top}.content-cell{min-width:200px}th:first-child,td:first-child{position:sticky;left:0;z-index:2}th{position:sticky;left:0;z-index:1;font-weight:500}th:last-child,td:last-child{position:sticky;right:0;z-index:2;width:1%}th,td{background-color:#fff;padding:5px}.border th,.border td{border:1px solid #d4d4d4}.unbordered th,.unbordered td{border:none}::ng-deep .mat-sort-header-content{overflow:auto;white-space:nowrap}::ng-deep .mat-expansion-panel-header{padding:0 10px!important}::ng-deep .mat-expansion-panel-body{padding:0 10px!important}.invalidRow td,td.invalidCell{background-color:#ffe4e4}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["debug", "label", "hideOverflow", "minLength", "maxLength", "ignoreDirtiness", "customMessage", "control", "input"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "options"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "hint", "labelLink", "lblCl", "light", "loading", "multiple", "optionsFunc", "theme", "vms", "xsmall", "setCurrentDate", "options", "mvalue"], outputs: ["mSelectOptionChange", "mSelectedOptionLabel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InputTableComponent, decorators: [{
             type: Component,
@@ -17262,7 +17527,7 @@ class FindItemComponent extends BaseFormGenerator {
         this.selectionSignal.set(this.tableHTTPSREF?.selectedItemsSignal() || this.tablePlainRef?.selectedItemsSignal());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FindItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: FindItemComponent, isStandalone: true, selector: "app-find-item,find-item", inputs: { autoFormatSchema: { classPropertyName: "autoFormatSchema", publicName: "autoFormatSchema", isSignal: true, isRequired: false, transformFunction: null }, autoOrder: { classPropertyName: "autoOrder", publicName: "autoOrder", isSignal: true, isRequired: false, transformFunction: null }, centerCells: { classPropertyName: "centerCells", publicName: "centerCells", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, gridClass: { classPropertyName: "gridClass", publicName: "gridClass", isSignal: true, isRequired: false, transformFunction: null }, hideForm: { classPropertyName: "hideForm", publicName: "hideForm", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, isTablePaginated: { classPropertyName: "isTablePaginated", publicName: "isTablePaginated", isSignal: true, isRequired: false, transformFunction: null }, isExpandable: { classPropertyName: "isExpandable", publicName: "isExpandable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "rowOptions", isSignal: true, isRequired: false, transformFunction: null }, orderDirection: { classPropertyName: "orderDirection", publicName: "orderDirection", isSignal: true, isRequired: false, transformFunction: null }, orderField: { classPropertyName: "orderField", publicName: "orderField", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, showData: { classPropertyName: "showData", publicName: "showData", isSignal: true, isRequired: false, transformFunction: null }, searchIfNoQuery: { classPropertyName: "searchIfNoQuery", publicName: "searchIfNoQuery", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showRefreshBtn: { classPropertyName: "showRefreshBtn", publicName: "showRefreshBtn", isSignal: true, isRequired: false, transformFunction: null }, startSectionTemplate: { classPropertyName: "startSectionTemplate", publicName: "startSectionTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSearchBtn: { classPropertyName: "showSearchBtn", publicName: "showSearchBtn", isSignal: true, isRequired: false, transformFunction: null }, showClearBtn: { classPropertyName: "showClearBtn", publicName: "showClearBtn", isSignal: true, isRequired: false, transformFunction: null }, showValidationMsg: { classPropertyName: "showValidationMsg", publicName: "showValidationMsg", isSignal: true, isRequired: false, transformFunction: null }, createBtnRoute: { classPropertyName: "createBtnRoute", publicName: "createBtnRoute", isSignal: true, isRequired: false, transformFunction: null }, showAdditionalColumns: { classPropertyName: "showAdditionalColumns", publicName: "showAdditionalColumns", isSignal: true, isRequired: false, transformFunction: null }, smallerFonts: { classPropertyName: "smallerFonts", publicName: "smallerFonts", isSignal: true, isRequired: false, transformFunction: null }, useSelection: { classPropertyName: "useSelection", publicName: "useSelection", isSignal: true, isRequired: false, transformFunction: null }, createButton: { classPropertyName: "createButton", publicName: "createButton", isSignal: true, isRequired: false, transformFunction: null }, _formSchema: { classPropertyName: "_formSchema", publicName: "formSchema", isSignal: false, isRequired: false, transformFunction: null }, searchObservableFunc: { classPropertyName: "searchObservableFunc", publicName: "searchObservableFunc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { _rowClick: "rowClick", clickedCreate: "clickedCreate" }, viewQueries: [{ propertyName: "tableHTTPSREFSignal", first: true, predicate: TableHttpsComponent, descendants: true, isSignal: true }, { propertyName: "tablePlainRefSignal", first: true, predicate: TablePlainComponent, descendants: true, isSignal: true }, { propertyName: "tableHTTPSREF", first: true, predicate: TableHttpsComponent, descendants: true }, { propertyName: "tablePlainRef", first: true, predicate: TablePlainComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"loading()\">\n  @if (!hideForm() && searchForm()) {\n    <form [formGroup]=\"searchForm()\" (ngSubmit)=\"search()\">\n      <div class=\"row align-items-center\">\n        @for (scheme of computedFormSchema(); track scheme) {\n          <div class=\"{{ gridClass() }} \">\n            <div class=\"row align-items-end\">\n              @switch (true) {\n                @case (scheme.type == 'tel') {\n                  <div class=\"col\">\n                    <app-phone-number\n                      [form]=\"scheme.form\"\n                      [label]=\"scheme.label\"\n                      [name]=\"scheme.field\"\n                      [showLabel]=\"false\"\n                      [showValidation]=\"scheme.showValidation\"\n                      [showValidationIcon]=\"scheme.showValidationIcon\"\n                      [countryCode3]=\"scheme.countryCode3\"\n                      [disabled]=\"scheme.disabledIf | functionCaller2: searchFormValue() : (scheme.field | toAny)\"\n                      #inputTag />\n                    @if (showValidationMsg()) {\n                      <app-validation-message [input]=\"inputTag\" />\n                    }\n                  </div>\n                }\n                @case (scheme.type == 'autocomplete') {\n                  <div class=\"col\">\n                    <app-autocomplete\n                      [form]=\"scheme.form\"\n                      [label]=\"scheme.label\"\n                      [labelField]=\"scheme.labelField\"\n                      [autoPickValueField]=\"scheme.autoPickValueField\"\n                      [labelType]=\"scheme.labelType | toAny\"\n                      [optionsFunc]=\"scheme.optionsFunc\"\n                      [name]=\"scheme.field\"\n                      [optionFormatter]=\"scheme.optionFormatter\"\n                      [valueField]=\"scheme.valueField\"\n                      [options]=\"scheme.options\"\n                      [hint]=\"scheme.hint\"\n                      [disabled]=\"scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\"\n                      #inputTag />\n                    @if (showValidationMsg()) {\n                      <app-validation-message [input]=\"inputTag\" />\n                    }\n                  </div>\n                }\n                @default {\n                  <div class=\"col\">\n                    <form>\n                      <div class=\"gx-2 row align-items-end\">\n                        <div class=\"col\">\n                          <app-input-basic\n                            #formField\n                            [name]=\"scheme.field\"\n                            [form]=\"scheme.form\"\n                            [type]=\"scheme.type\"\n                            [autoPickValueField]=\"scheme.autoPickValueField\"\n                            [valueField]=\"scheme.valueField\"\n                            [labelType]=\"scheme.labelType | toAny\"\n                            [checkedSignal]=\"scheme.checked\"\n                            [showValidation]=\"!!scheme.asyncValidators\"\n                            [showValidationIcon]=\"!!scheme.asyncValidators\"\n                            [noFormat]=\"true\"\n                            [labelField]=\"scheme.labelField\"\n                            [optionFormatter]=\"scheme.optionFormatter\"\n                            [options]=\"scheme.options\"\n                            [decimalPoints]=\"scheme.decimalPoints\"\n                            [hint]=\"scheme.hint\"\n                            [max]=\"scheme.max\"\n                            [min]=\"scheme.min\"\n                            [placeholder]=\"scheme.placeholder\"\n                            [label]=\"scheme.label\"\n                            [disabled]=\"scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\" />\n                        </div>\n                        @if (scheme.standalone && scheme.action) {\n                          <div class=\"col-auto\">\n                            <app-btn\n                              group=\"show\"\n                              [disabled]=\"!formField?.validSignal()\"\n                              actionType=\"submit\"\n                              (mclick)=\"scheme.action(allSearchFormValue(), formField.valueSignal(), standaloneForm())\" />\n                          </div>\n                        }\n                        @if (scheme.action && !scheme.standalone) {\n                          <div class=\"col-auto\">\n                            <app-btn\n                              [icon]=\"scheme.icon\"\n                              [iconBtn]=\"true\"\n                              actionType=\"submit\"\n                              (mclick)=\"scheme.action(allSearchFormValue(), formField.valueSignal(), searchForm())\" />\n                          </div>\n                        }\n                      </div>\n                    </form>\n                  </div>\n                  @if (showValidationMsg()) {\n                    <app-validation-message [input]=\"formField\" />\n                  }\n                }\n              }\n            </div>\n          </div>\n        }\n        <div class=\"col-md justify-content-end d-flex\">\n          @if (showClearBtn()) {\n            <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n          }\n          <span class=\"mx-1\"></span>\n          @if (showSearchBtn()) {\n            <app-btn\n              [group]=\"'search'\"\n              [iconBtn]=\"true\"\n              text=\"Search\"\n              actionType=\"submit\"\n              [excludeLogging]=\"true\"\n              [disabled]=\"!searchFunction() && !isTablePaginated()\"\n              (mclick)=\"search()\" />\n          }\n          @if (createButton()) {\n            <span class=\"mx-1\"></span>\n            @if (createBtnRoute()) {\n              <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" routerLink=\"{{ createBtnRoute() }}\" />\n            } @else {\n              <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n            }\n          }\n        </div>\n      </div>\n    </form>\n  }\n\n  <ng-content select=\"[tablePanel]\"></ng-content>\n\n  @if (displayedColumns()?.length) {\n    <div class=\"mt-3\" [hidden]=\"!showData() || (!data() && !isTablePaginated())\">\n      <ng-container>\n        @if (isTablePaginated()) {\n          <table-https\n            #tableHTTPS\n            [searchIfNoQuery]=\"searchIfNoQuery()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [observableFunc]=\"searchObservableFunc()\"\n            (rowClick)=\"rowClick($event)\"\n            (selectionChanged)=\"setSelection()\"\n            [centerCells]=\"centerCells()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [isExpandable]=\"isExpandable()\"\n            [label]=\"label()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [queryData]=\"searchFormValue()\"\n            [rowOptions]=\"options()\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [showExport]=\"showExport()\"\n            [showRefreshBtn]=\"showRefreshBtn()\"\n            [smallerFonts]=\"smallerFonts()\"\n            [startSectionTemplate]=\"startSectionTemplate()\"\n            [useSelection]=\"useSelection()\"\n            noItemTxt=\"No results found\" />\n        } @else {\n          <table-plain\n            [distinct]=\"true\"\n            [showPager]=\"true\"\n            [pageSize]=\"pageSize()\"\n            [centerCells]=\"false\"\n            [startSectionTemplate]=\"startSectionTemplate()\"\n            [smallerFonts]=\"smallerFonts()\"\n            [nowrap]=\"nowrap()\"\n            [showFilter]=\"showFilter()\"\n            [showExport]=\"showExport()\"\n            [isExpandable]=\"isExpandable()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [label]=\"label()\"\n            noItemTxt=\"No results found\"\n            (rowClick)=\"rowClick($event)\"\n            [orderField]=\"orderField()\"\n            [rowOptions]=\"options()\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [orderDirection]=\"orderDirection()\"\n            [displayedColumns]=\"displayedColumns()\"\n            (selectionChanged)=\"setSelection()\"\n            [data]=\"data()\" />\n        }\n      </ng-container>\n    </div>\n  }\n</loader>\n", styles: [""], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["debug", "label", "hideOverflow", "minLength", "maxLength", "ignoreDirtiness", "customMessage", "control", "input"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "options"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "hint", "labelLink", "lblCl", "light", "loading", "minLength", "maxLength", "multiple", "optionsFunc", "theme", "vms", "xsmall", "setCurrentDate", "options", "mvalue"], outputs: ["mSelectOptionChange", "mSelectedOptionLabel"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "component", type: TableHttpsComponent, selector: "table-https", inputs: ["observableFunc", "pageNumber", "queryData", "searchIfNoQuery", "showRefreshBtn"], outputs: ["dataFetched"] }, { kind: "component", type: TablePlainComponent, selector: "table-plain", inputs: ["customSelectClass", "idField", "obsDataSource", "showFilter", "showPager", "disableSelectionByField", "data", "filterFields", "filterFieldsMap", "selectionPerPage"], outputs: ["view", "dataChanged", "filterChange", "listMutated"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: FindItemComponent, isStandalone: true, selector: "app-find-item,find-item", inputs: { autoFormatSchema: { classPropertyName: "autoFormatSchema", publicName: "autoFormatSchema", isSignal: true, isRequired: false, transformFunction: null }, autoOrder: { classPropertyName: "autoOrder", publicName: "autoOrder", isSignal: true, isRequired: false, transformFunction: null }, centerCells: { classPropertyName: "centerCells", publicName: "centerCells", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, gridClass: { classPropertyName: "gridClass", publicName: "gridClass", isSignal: true, isRequired: false, transformFunction: null }, hideForm: { classPropertyName: "hideForm", publicName: "hideForm", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, isTablePaginated: { classPropertyName: "isTablePaginated", publicName: "isTablePaginated", isSignal: true, isRequired: false, transformFunction: null }, isExpandable: { classPropertyName: "isExpandable", publicName: "isExpandable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "rowOptions", isSignal: true, isRequired: false, transformFunction: null }, orderDirection: { classPropertyName: "orderDirection", publicName: "orderDirection", isSignal: true, isRequired: false, transformFunction: null }, orderField: { classPropertyName: "orderField", publicName: "orderField", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, showData: { classPropertyName: "showData", publicName: "showData", isSignal: true, isRequired: false, transformFunction: null }, searchIfNoQuery: { classPropertyName: "searchIfNoQuery", publicName: "searchIfNoQuery", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showRefreshBtn: { classPropertyName: "showRefreshBtn", publicName: "showRefreshBtn", isSignal: true, isRequired: false, transformFunction: null }, startSectionTemplate: { classPropertyName: "startSectionTemplate", publicName: "startSectionTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSearchBtn: { classPropertyName: "showSearchBtn", publicName: "showSearchBtn", isSignal: true, isRequired: false, transformFunction: null }, showClearBtn: { classPropertyName: "showClearBtn", publicName: "showClearBtn", isSignal: true, isRequired: false, transformFunction: null }, showValidationMsg: { classPropertyName: "showValidationMsg", publicName: "showValidationMsg", isSignal: true, isRequired: false, transformFunction: null }, createBtnRoute: { classPropertyName: "createBtnRoute", publicName: "createBtnRoute", isSignal: true, isRequired: false, transformFunction: null }, showAdditionalColumns: { classPropertyName: "showAdditionalColumns", publicName: "showAdditionalColumns", isSignal: true, isRequired: false, transformFunction: null }, smallerFonts: { classPropertyName: "smallerFonts", publicName: "smallerFonts", isSignal: true, isRequired: false, transformFunction: null }, useSelection: { classPropertyName: "useSelection", publicName: "useSelection", isSignal: true, isRequired: false, transformFunction: null }, createButton: { classPropertyName: "createButton", publicName: "createButton", isSignal: true, isRequired: false, transformFunction: null }, _formSchema: { classPropertyName: "_formSchema", publicName: "formSchema", isSignal: false, isRequired: false, transformFunction: null }, searchObservableFunc: { classPropertyName: "searchObservableFunc", publicName: "searchObservableFunc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { _rowClick: "rowClick", clickedCreate: "clickedCreate" }, viewQueries: [{ propertyName: "tableHTTPSREFSignal", first: true, predicate: TableHttpsComponent, descendants: true, isSignal: true }, { propertyName: "tablePlainRefSignal", first: true, predicate: TablePlainComponent, descendants: true, isSignal: true }, { propertyName: "tableHTTPSREF", first: true, predicate: TableHttpsComponent, descendants: true }, { propertyName: "tablePlainRef", first: true, predicate: TablePlainComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"loading()\">\n  @if (!hideForm() && searchForm()) {\n    <form [formGroup]=\"searchForm()\" (ngSubmit)=\"search()\">\n      <div class=\"row align-items-center\">\n        @for (scheme of computedFormSchema(); track scheme) {\n          <div class=\"{{ gridClass() }} \">\n            <div class=\"row align-items-end\">\n              @switch (true) {\n                @case (scheme.type == 'tel') {\n                  <div class=\"col\">\n                    <app-phone-number\n                      [form]=\"scheme.form\"\n                      [label]=\"scheme.label\"\n                      [name]=\"scheme.field\"\n                      [showLabel]=\"false\"\n                      [showValidation]=\"scheme.showValidation\"\n                      [showValidationIcon]=\"scheme.showValidationIcon\"\n                      [countryCode3]=\"scheme.countryCode3\"\n                      [disabled]=\"scheme.disabledIf | functionCaller2: searchFormValue() : (scheme.field | toAny)\"\n                      #inputTag />\n                    @if (showValidationMsg()) {\n                      <app-validation-message [input]=\"inputTag\" />\n                    }\n                  </div>\n                }\n                @case (scheme.type == 'autocomplete') {\n                  <div class=\"col\">\n                    <app-autocomplete\n                      [form]=\"scheme.form\"\n                      [label]=\"scheme.label\"\n                      [labelField]=\"scheme.labelField\"\n                      [autoPickValueField]=\"scheme.autoPickValueField\"\n                      [labelType]=\"scheme.labelType | toAny\"\n                      [optionsFunc]=\"scheme.optionsFunc\"\n                      [name]=\"scheme.field\"\n                      [optionFormatter]=\"scheme.optionFormatter\"\n                      [valueField]=\"scheme.valueField\"\n                      [options]=\"scheme.options\"\n                      [hint]=\"scheme.hint\"\n                      [disabled]=\"scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\"\n                      #inputTag />\n                    @if (showValidationMsg()) {\n                      <app-validation-message [input]=\"inputTag\" />\n                    }\n                  </div>\n                }\n                @default {\n                  <div class=\"col\">\n                    <form>\n                      <div class=\"gx-2 row align-items-end\">\n                        <div class=\"col\">\n                          <app-input-basic\n                            #formField\n                            [name]=\"scheme.field\"\n                            [form]=\"scheme.form\"\n                            [type]=\"scheme.type\"\n                            [autoPickValueField]=\"scheme.autoPickValueField\"\n                            [valueField]=\"scheme.valueField\"\n                            [labelType]=\"scheme.labelType | toAny\"\n                            [checkedSignal]=\"scheme.checked\"\n                            [showValidation]=\"!!scheme.asyncValidators\"\n                            [showValidationIcon]=\"!!scheme.asyncValidators\"\n                            [noFormat]=\"true\"\n                            [labelField]=\"scheme.labelField\"\n                            [optionFormatter]=\"scheme.optionFormatter\"\n                            [options]=\"scheme.options\"\n                            [decimalPoints]=\"scheme.decimalPoints\"\n                            [hint]=\"scheme.hint\"\n                            [max]=\"scheme.max\"\n                            [min]=\"scheme.min\"\n                            [placeholder]=\"scheme.placeholder\"\n                            [label]=\"scheme.label\"\n                            [disabled]=\"scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\" />\n                        </div>\n                        @if (scheme.standalone && scheme.action) {\n                          <div class=\"col-auto\">\n                            <app-btn\n                              group=\"show\"\n                              [disabled]=\"!formField?.validSignal()\"\n                              actionType=\"submit\"\n                              (mclick)=\"scheme.action(allSearchFormValue(), formField.valueSignal(), standaloneForm())\" />\n                          </div>\n                        }\n                        @if (scheme.action && !scheme.standalone) {\n                          <div class=\"col-auto\">\n                            <app-btn\n                              [icon]=\"scheme.icon\"\n                              [iconBtn]=\"true\"\n                              actionType=\"submit\"\n                              (mclick)=\"scheme.action(allSearchFormValue(), formField.valueSignal(), searchForm())\" />\n                          </div>\n                        }\n                      </div>\n                    </form>\n                  </div>\n                  @if (showValidationMsg()) {\n                    <app-validation-message [input]=\"formField\" />\n                  }\n                }\n              }\n            </div>\n          </div>\n        }\n        <div class=\"col-md justify-content-end d-flex\">\n          @if (showClearBtn()) {\n            <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n          }\n          <span class=\"mx-1\"></span>\n          @if (showSearchBtn()) {\n            <app-btn\n              [group]=\"'search'\"\n              [iconBtn]=\"true\"\n              text=\"Search\"\n              actionType=\"submit\"\n              [excludeLogging]=\"true\"\n              [disabled]=\"!searchFunction() && !isTablePaginated()\"\n              (mclick)=\"search()\" />\n          }\n          @if (createButton()) {\n            <span class=\"mx-1\"></span>\n            @if (createBtnRoute()) {\n              <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" routerLink=\"{{ createBtnRoute() }}\" />\n            } @else {\n              <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n            }\n          }\n        </div>\n      </div>\n    </form>\n  }\n\n  <ng-content select=\"[tablePanel]\"></ng-content>\n\n  @if (displayedColumns()?.length) {\n    <div class=\"mt-3\" [hidden]=\"!showData() || (!data() && !isTablePaginated())\">\n      <ng-container>\n        @if (isTablePaginated()) {\n          <table-https\n            #tableHTTPS\n            [searchIfNoQuery]=\"searchIfNoQuery()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [observableFunc]=\"searchObservableFunc()\"\n            (rowClick)=\"rowClick($event)\"\n            (selectionChanged)=\"setSelection()\"\n            [centerCells]=\"centerCells()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [isExpandable]=\"isExpandable()\"\n            [label]=\"label()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [queryData]=\"searchFormValue()\"\n            [rowOptions]=\"options()\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [showExport]=\"showExport()\"\n            [showRefreshBtn]=\"showRefreshBtn()\"\n            [smallerFonts]=\"smallerFonts()\"\n            [startSectionTemplate]=\"startSectionTemplate()\"\n            [useSelection]=\"useSelection()\"\n            noItemTxt=\"No results found\" />\n        } @else {\n          <table-plain\n            [distinct]=\"true\"\n            [showPager]=\"true\"\n            [pageSize]=\"pageSize()\"\n            [centerCells]=\"false\"\n            [startSectionTemplate]=\"startSectionTemplate()\"\n            [smallerFonts]=\"smallerFonts()\"\n            [nowrap]=\"nowrap()\"\n            [showFilter]=\"showFilter()\"\n            [showExport]=\"showExport()\"\n            [isExpandable]=\"isExpandable()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [label]=\"label()\"\n            noItemTxt=\"No results found\"\n            (rowClick)=\"rowClick($event)\"\n            [orderField]=\"orderField()\"\n            [rowOptions]=\"options()\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [orderDirection]=\"orderDirection()\"\n            [displayedColumns]=\"displayedColumns()\"\n            (selectionChanged)=\"setSelection()\"\n            [data]=\"data()\" />\n        }\n      </ng-container>\n    </div>\n  }\n</loader>\n", styles: [""], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["debug", "label", "hideOverflow", "minLength", "maxLength", "ignoreDirtiness", "customMessage", "control", "input"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "options"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "hint", "labelLink", "lblCl", "light", "loading", "multiple", "optionsFunc", "theme", "vms", "xsmall", "setCurrentDate", "options", "mvalue"], outputs: ["mSelectOptionChange", "mSelectedOptionLabel"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "disabled", "form", "forms", "help", "iconBtn", "loading", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid"], outputs: ["mclick"] }, { kind: "component", type: TableHttpsComponent, selector: "table-https", inputs: ["observableFunc", "pageNumber", "queryData", "searchIfNoQuery", "showRefreshBtn"], outputs: ["dataFetched"] }, { kind: "component", type: TablePlainComponent, selector: "table-plain", inputs: ["customSelectClass", "idField", "obsDataSource", "showFilter", "showPager", "disableSelectionByField", "data", "filterFields", "filterFieldsMap", "selectionPerPage"], outputs: ["view", "dataChanged", "filterChange", "listMutated"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FindItemComponent, decorators: [{
             type: Component,
@@ -17920,5 +18185,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddItemComponent, ApiService, AppRouteBase, AppRouteService, AppRouteState, AppService, ArraySplitter, AuthenticationInterceptorService, AutocompleteComponent, AutocompleteModule, AutocompleteService, AutocompleteTdRfComponent, BlinkingBlocksComponent, BouncingBallComponent, Btn, BtnComponent, BtnLg, BtnLgComponent, BtnLinkComponent, BtnModule, BtnService, ButtonComponent, CETSInput, CacheService, CacheUpdaterService, CardComponent, CardComponent as CardModule, CodeTitleDescPipe, CommafyNumberDirective, ButtonComponent as ComponentsModule, Config, ConfirmDialogComponent, ConfirmDialogComponent as ConfirmDialogModule, Constant, CustomDatePipe, DEFAULT_TIMEOUT, DateInputComponent, Day, DayHourMinInputComponent, DebouncerService, DesktopClassDirective, DetailsBtnComponent, DetailsBtnComponent as DetailsBtnModule, DirectivesModule, DocumentsNameDisplayComponent, DocumentsNameDisplayComponent as DocumentsNameDisplayModule, DragDropFileUploadDirective, EETSPageBtnID, ELanguage, EMenuLocation, EMenuType, EPageType, ESubSystem, ESystem, ESystemBusLine, ETSCheckForUpdateService, ETSConfirmDialogService, ETSExtraPagesModule, ETSFKVP, ETSForms, ETSHandleUnrecoverableStateService, ETSKVP, ETSLogUpdateService, ETSLoggerModule, ETSMenuItem, ETSMenuItemDivider, ETSPageNotFoundModule, ETSPromptUpdateService, ETSReactiveFormInputService, ETSResetModule, ETSResponsivenessDirectiveModule, ETSRobotModule, ETSServiceWorkerService, ETSStorageService, ETSThemeService, ETSTimeoutTesterModule, ETSVersionModule, ETSWindowSecurityService, EUA, EVFunctions, EValidationType, EditableTextCaseComponent, EditableTextCaseComponent as EditableTextCaseModule, SDKEnvironment as Environment, EqualChildrenDirective, ErrorMessagePipe, ExportTableComponent, ExportTableComponent as ExportTableModule, FCInput, FadingBarsComponent, FadingCirclesComponent, FieldToLabelPipe, FieldsToDisplayComponent, FileUploadComponent, FilterArrayByStringPipe, FilterArrayPipe, FilterFormArrayControlPipe, FilterFormArrayGroupPipe, FilterOptions, FindItemComponent, FindItemModule, FormErrorComponent, FormGeneratedValueComponent, FormGeneratorComponent, FormGeneratorComponent as FormGeneratorModule, FormGeneratorService, FormInvalidClassDirective, FormInvalidClassPipe, FormLinkComponent, FormLinkComponent as FormLinkModule, FormSchemaToTableColumnsPipe, FormTabHeadersComponent, FormTabHeadersComponent as FormTabHeadersModule, FormValuePipe, FunctionCaller, FunctionCaller1, FunctionCaller2, FunctionCaller3, GenderPipe, GetColFormattedPipe, GetHeadersPipe, GetRawFieldsPipe, GetValueLabel, GlobalErrorHandlerService, HasFormValuePipe, HasValuePipe, HideDesktopDirective, HideMobileDirective, HtmlerService, HttpListCaller, HttpListCaller1, HttpListCaller2, ImageLoaderDirective, ImageUpload, InfoDialogComponent, InfoDialogModule, InfoDialogService, InfoIconComponent, InfoIconComponent as InfoIconModule, InputBasicComponent, InputClassPipe, InputComponent, inputs_component as InputComponents, InputControlComponent, InputFormatDirective, InputFormatDirectivesModule, InputFormatService, InputFormattersPipe, InputLabelComponent, InputModule, InputNGModelComponent, InputNGModelComponent as InputNGModelModule, InputPipesModule, InputService, InputTD_RFComponent, InputTableComponent, InputTableService, IntegerOnlyDirective, IsClonePage, IsShowPage, LabelComponent, LabelComponent as LabelModule, Lbl, ListOptionFinderPipe, LoaderComponent, LoaderComponent as LoaderModule, LocalCacheService, Log, LoggerComponent, LoggerInterceptorService, LoggerRoutingModule, LoggerService, MHrefDirective, MobileClassDirective, ModalBodyDirective, ModalComponent, ModalComponents, ModalFooterDirective, ModalFormComponent, ModalFormComponent as ModalFormModule, ModalHeaderComponent, ModalHeaderComponent as ModalHeaderModule, ModalComponent as ModalModule, MrouterLinkirective, NarrationHistoryCompComponent, NegativeNumberOnlyDirective, NotificationsComponent, NotificationsService, ObjectToArrayPipe, ObjectToLabelsPipe, OnClickDirective, OptionLabeller, OptionerPipe, OptionsFormatter, PSDirective, PageCenterBodyComponent, PageLoader, PageLoaderService, PageModal, PageService, PageTemplateComponent, PageTemplateComponent as PageTemplateModule, PageToComponentComponent, PageToComponentDirective, PageToComponentComponent as PageToComponentModule, PageToComponentService, PaginatorComponent, PaginatorPipe, PhoneNumberComponent, PhoneNumberComponent as PhoneNumberModule, PhoneNumberService, prototypes as Prototypes, RefresherPipe, RemoveUsedOptionsPipe, RemoveUsedOptionsReactivePipe, ReplaceAllPipe, RequestLoggerInterceptorService, RequestTimeoutInterceptorService, ResponsiveValPipe, ResponsivenessDirective, RichTextEditorComponent, RichTextEditorRFComponent, RingRipplesComponent, RoundPipe, RouteItem, RowActionsComponent, RowActionsComponent as RowActionsModule, BaseEffect as SDKBaseEffect, BaseFacadeService as SDKBaseFacadeService, BaseService as SDKBaseService, SaverClass, SaverService, SecondsToTimePipe, SharedModule, SortPipe, SpinnerComponent, StorageClass, StrConcatenatorPipe, SvgIconComponent, SvgIconService, TableCol, TableHttpsComponent, TableHttpsComponent as TableHttpsModule, TableInputComponent, TableInputRowComponent, TablePipesModule, TablePlainComponent, TablePlainComponent as TablePlainModule, TableService, TableToStringPipe, TextAreaModalComponent, TextAreaModalService, TextCase1Component, TextCase2Component, TextCase2ForObject, TextCaseInputComponent, TextCaseService, TextComponent, ToAnyArrayPipe, ToAnyPipe, ToggleInputFormComponent, TranslatePipe, TranslatePipeModule, TranslationService, TranslatorCaseComponent, TranslatorDirective, TrimPipe, TrimTextPipe, TyperPipe, UserActivity, UserActivityService, UtilityPipesModule, UtilityService, ValidationMessageComponent, ValidationMessageNgmodelComponent, ValidationMsg, Validator, ValueFormatterPipe, ValueOrXPipe, ViewFormButtonsComponent, ViewFormButtonsComponent as ViewFormButtonsModule, WatermarkComponent, WebUserAuthenticationService, WebUserForgotPasswordComponent, WebUserLoginComponent, WebUserResetPasswordComponent, XOrYPipe, YearMonthTdRfComponent, _SharedModule, configForms, configPatterns, configValidationMessages, environment, webUserAuthenticationGuard, webUserAuthenticationInterceptor };
+export { AddItemComponent, ApiService, AppRouteBase, AppRouteService, AppRouteState, AppService, ArraySplitter, AuthenticationInterceptorService, AutocompleteComponent, AutocompleteModule, AutocompleteService, AutocompleteTdRfComponent, BlinkingBlocksComponent, BouncingBallComponent, Btn, BtnComponent, BtnLg, BtnLgComponent, BtnLinkComponent, BtnModule, BtnService, ButtonComponent, CETSInput, CacheService, CacheUpdaterService, CardComponent, CardComponent as CardModule, CodeTitleDescPipe, CommafyNumberDirective, ButtonComponent as ComponentsModule, Config, ConfirmDialogComponent, ConfirmDialogComponent as ConfirmDialogModule, Constant, CustomDatePipe, DEFAULT_TIMEOUT, DateInputComponent, Day, DayHourMinInputComponent, DebouncerService, DesktopClassDirective, DetailsBtnComponent, DetailsBtnComponent as DetailsBtnModule, DirectivesModule, DocumentsNameDisplayComponent, DocumentsNameDisplayComponent as DocumentsNameDisplayModule, DragDropFileUploadDirective, EETSPageBtnID, ELanguage, EMenuLocation, EMenuType, EPageType, ESubSystem, ESystem, ESystemBusLine, ETSCheckForUpdateService, ETSConfirmDialogService, ETSExtraPagesModule, ETSFKVP, ETSForms, ETSHandleUnrecoverableStateService, ETSKVP, ETSLogUpdateService, ETSLoggerModule, ETSMenuItem, ETSMenuItemDivider, ETSPageNotFoundModule, ETSPromptUpdateService, ETSReactiveFormInputService, ETSResetModule, ETSResponsivenessDirectiveModule, ETSRobotModule, ETSServiceWorkerService, ETSStorageService, ETSThemeService, ETSTimeoutTesterModule, ETSVersionModule, ETSWindowSecurityService, EUA, EVFunctions, EValidationType, EditableTextCaseComponent, EditableTextCaseComponent as EditableTextCaseModule, SDKEnvironment as Environment, EqualChildrenDirective, ErrorMessagePipe, ExportTableComponent, ExportTableComponent as ExportTableModule, FCInput, FadingBarsComponent, FadingCirclesComponent, FieldToLabelPipe, FieldsToDisplayComponent, FileUploadComponent, FilterArrayByStringPipe, FilterArrayPipe, FilterFormArrayControlPipe, FilterFormArrayGroupPipe, FilterOptions, FindItemComponent, FindItemModule, FormErrorComponent, FormGeneratedValueComponent, FormGeneratorComponent, FormGeneratorComponent as FormGeneratorModule, FormGeneratorService, FormInvalidClassDirective, FormInvalidClassPipe, FormLinkComponent, FormLinkComponent as FormLinkModule, FormSchemaToTableColumnsPipe, FormTabHeadersComponent, FormTabHeadersComponent as FormTabHeadersModule, FormValuePipe, FunctionCaller, FunctionCaller1, FunctionCaller2, FunctionCaller3, GenderPipe, GetColFormattedPipe, GetHeadersPipe, GetRawFieldsPipe, GetValueLabel, GlobalErrorHandlerService, HasFormValuePipe, HasValuePipe, HideDesktopDirective, HideMobileDirective, HtmlerService, HttpListCaller, HttpListCaller1, HttpListCaller2, ImageLoaderDirective, ImageUpload, InfoDialogComponent, InfoDialogModule, InfoDialogService, InfoIconComponent, InfoIconComponent as InfoIconModule, InputBasicComponent, InputClassPipe, InputComponent, inputs_component as InputComponents, InputControlComponent, InputFormatDirective, InputFormatDirectivesModule, InputFormatService, InputFormattersPipe, InputLabelComponent, InputModule, InputNGModelComponent, InputNGModelComponent as InputNGModelModule, InputPipesModule, InputService, InputTD_RFComponent, InputTableComponent, InputTableService, IntegerOnlyDirective, IsClonePage, IsShowPage, LabelComponent, LabelComponent as LabelModule, Lbl, ListOptionFinderPipe, LoaderComponent, LoaderComponent as LoaderModule, LocalCacheService, Log, LoggerComponent, LoggerInterceptorService, LoggerRoutingModule, LoggerService, MHrefDirective, MobileClassDirective, ModalBodyDirective, ModalComponent, ModalComponents, ModalFooterDirective, ModalFormComponent, ModalFormComponent as ModalFormModule, ModalHeaderComponent, ModalHeaderComponent as ModalHeaderModule, ModalComponent as ModalModule, MrouterLinkirective, NarrationHistoryCompComponent, NegativeNumberOnlyDirective, NotificationsComponent, NotificationsService, ObjectToArrayPipe, ObjectToLabelsPipe, OnClickDirective, OptionLabeller, OptionerPipe, OptionsFormatter, PSDirective, PageCenterBodyComponent, PageLoader, PageLoaderService, PageModal, PageService, PageTemplateComponent, PageTemplateComponent as PageTemplateModule, PageToComponentComponent, PageToComponentDirective, PageToComponentComponent as PageToComponentModule, PageToComponentService, PaginatorComponent, PaginatorPipe, PhoneNumberComponent, PhoneNumberComponent as PhoneNumberModule, PhoneNumberService, prototypes as Prototypes, RefresherPipe, RemoveUsedOptionsPipe, RemoveUsedOptionsReactivePipe, ReplaceAllPipe, RequestLoggerInterceptorService, RequestTimeoutInterceptorService, ResponsiveValPipe, ResponsivenessDirective, RichTextEditorComponent, RichTextEditorRFComponent, RingRipplesComponent, RoundPipe, RouteItem, RowActionsComponent, RowActionsComponent as RowActionsModule, BaseEffect as SDKBaseEffect, BaseFacadeService as SDKBaseFacadeService, BaseService as SDKBaseService, SaverClass, SaverService, SecondsToTimePipe, SharedModule, SortPipe, SpinnerComponent, StorageClass, StrConcatenatorPipe, SvgIconComponent, SvgIconService, TableCol, TableHttpsComponent, TableHttpsComponent as TableHttpsModule, TableInputComponent, TableInputRowComponent, TablePipesModule, TablePlainComponent, TablePlainComponent as TablePlainModule, TableService, TableToStringPipe, TextAreaModalComponent, TextAreaModalService, TextCase1Component, TextCase2Component, TextCase2ForObject, TextCaseInputComponent, TextCaseService, TextComponent, ToAnyArrayPipe, ToAnyPipe, ToggleInputFormComponent, TranslatePipe, TranslatePipeModule, TranslationService, TranslatorCaseComponent, TranslatorDirective, TrimPipe, TrimTextPipe, TyperPipe, UserActivity, UserActivityService, UtilityPipesModule, UtilityService, ValidationMessageComponent, ValidationMessageNgmodelComponent, ValidationMsg, Validator, ValueFormatterPipe, ValueOrXPipe, ViewFormButtonsComponent, ViewFormButtonsComponent as ViewFormButtonsModule, WatermarkComponent, WebUserAuthenticationService, WebUserForgotPasswordComponent, WebUserLoginComponent, WebUserResetPasswordComponent, WebcamMediaComponent, XOrYPipe, YearMonthTdRfComponent, _SharedModule, configForms, configPatterns, configValidationMessages, environment, webUserAuthenticationGuard, webUserAuthenticationInterceptor };
 //# sourceMappingURL=ets-fe-ng-sdk.mjs.map