ets-fe-ng-sdk 19.0.12 → 19.0.15

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

@@ -6567,7 +6567,7 @@ class InputBase {
             // console.log('control obtained', control);
             if (control)
                 this.onControlObtainedList().forEach((func) => func(control));
-        }, { allowSignalWrites: true });
+        });
         this.addOnControlObtainedHook = (key, func) => {
             this.onControlObtainedMap.update((map) => ({ ...map, [key]: func }));
         };
@@ -6653,14 +6653,14 @@ class InputBase {
             // value = this.valueSignal();
             if (this.control())
                 this.control().labelValue = label;
-        }, { allowSignalWrites: true });
+        });
         effect(() => {
             const presetValue = this.presetValue(), options = this.options();
             // console.log('check preset');
             if (presetValue && options?.length == 1 && !this.control()?.value) {
                 this.control()?.patchValue(options[0].value);
             }
-        }, { allowSignalWrites: true });
+        });
     }
     selectOption(option) {
         // debugger
@@ -8473,6 +8473,7 @@ class LoaderComponent {
         });
         this.height = input();
         this.width = input();
+        this.useStaticLoader = input();
         this.ratioHW = input(3 / 4);
         this.currentLoaderIndex = signal(0);
         this.loaderTypeList = signal([
@@ -8485,7 +8486,7 @@ class LoaderComponent {
         this.loaderTypes = signal(ELoaderType);
         this.destroyerRef = inject(DestroyRef);
         const sub = toObservable(this.loading)
-            .pipe(distinctUntilChanged(), switchMap((loading) => loading
+            .pipe(filter(() => !this.useStaticLoader()), distinctUntilChanged(), switchMap((loading) => loading
             ? interval(10000).pipe(tap$1(() => {
                 if (this.currentLoaderIndex() + 1 == this.loaderTypeList.length)
                     this.currentLoaderIndex.set(0);
@@ -8516,7 +8517,7 @@ class LoaderComponent {
         this.loading.set(this.loader.isLoading);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: LoaderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: LoaderComponent, isStandalone: true, selector: "loader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, _loading: { classPropertyName: "_loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ratioHW: { classPropertyName: "ratioHW", publicName: "ratioHW", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"h-100\">\n  @if (loading()) {\n    <!-- <div class=\"\">\n    {{computedHeight() }}\n    </div>\n    <div class=\"\">\n    {{class() }}\n    </div>\n    <div class=\"\">\n    {{computedClass() }}\n    </div> -->\n    <div class=\" {{computedClass()}}   center  \" id=\"loader\" [style.height]=\"computedHeight()\" [style.minHeight]=\"computedMinHeight()\">\n      <div class=\"text-center d-flex justify-content-center\">\n        <div>\n          <!-- <div class=\"\">\n          {{currentLoaderIndex()}}\n          </div> -->\n          @switch (currentLoaderType()) {\n            @case (loaderTypes().blinkingBlocks) {\n              <blinking-blocks />\n            }\n            @case (loaderTypes().bouncingBall) {\n              <bouncing-ball />\n            }\n            <!-- <ng-container *ngSwitchCase=\"loaderTypes.fadingBars\">\n            <fading-bars></fading-bars>\n          </ng-container> -->\n            @case (loaderTypes().ringRipples) {\n              <ring-ripples />\n            }\n            @case (loaderTypes().fadingCircles) {\n              <fading-circles />\n            }\n            @default {\n              <!-- <blinking-blocks /> -->\n              <fading-circles />\n            }\n          }\n\n          @if (text()) {\n            <h5 class=\"mt-2 noselect\">{{ text() | appTranslate | async }}</h5>\n          }\n        </div>\n      </div>\n    </div>\n  }\n\n  <div [hidden]=\"loading()\" #cont class=\"loading-content-container\">\n    <!-- <div > -->\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BlinkingBlocksComponent, selector: "blinking-blocks" }, { kind: "component", type: BouncingBallComponent, selector: "bouncing-ball" }, { kind: "component", type: RingRipplesComponent, selector: "ring-ripples" }, { kind: "component", type: FadingCirclesComponent, selector: "fading-circles" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: LoaderComponent, isStandalone: true, selector: "loader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, _loading: { classPropertyName: "_loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, useStaticLoader: { classPropertyName: "useStaticLoader", publicName: "useStaticLoader", isSignal: true, isRequired: false, transformFunction: null }, ratioHW: { classPropertyName: "ratioHW", publicName: "ratioHW", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"h-100\">\n  @if (loading()) {\n    <!-- <div class=\"\">\n    {{computedHeight() }}\n    </div>\n    <div class=\"\">\n    {{class() }}\n    </div>\n    <div class=\"\">\n    {{computedClass() }}\n    </div> -->\n    <div class=\" {{computedClass()}}   center  \" id=\"loader\" [style.height]=\"computedHeight()\" [style.minHeight]=\"computedMinHeight()\">\n      <div class=\"text-center d-flex justify-content-center\">\n        <div>\n          <!-- <div class=\"\">\n          {{currentLoaderIndex()}}\n          </div> --> \n          @switch (currentLoaderType()) {\n            @case (loaderTypes().blinkingBlocks) {\n              <blinking-blocks />\n            }\n            @case (loaderTypes().bouncingBall) {\n              <bouncing-ball />\n            }\n            <!-- <ng-container *ngSwitchCase=\"loaderTypes.fadingBars\">\n            <fading-bars></fading-bars>\n          </ng-container> -->\n            @case (loaderTypes().ringRipples) {\n              <ring-ripples />\n            }\n            @case (loaderTypes().fadingCircles) {\n              <fading-circles />\n            }\n            @default {\n              <!-- <blinking-blocks /> -->\n              <fading-circles />\n            }\n          }\n\n          @if (text()) {\n            <h5 class=\"mt-2 noselect\">{{ text() | appTranslate | async }}</h5>\n          }\n        </div>\n      </div>\n    </div>\n  }\n\n  <div [hidden]=\"loading()\" #cont class=\"loading-content-container\">\n    <!-- <div > -->\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BlinkingBlocksComponent, selector: "blinking-blocks" }, { kind: "component", type: BouncingBallComponent, selector: "bouncing-ball" }, { kind: "component", type: RingRipplesComponent, selector: "ring-ripples" }, { kind: "component", type: FadingCirclesComponent, selector: "fading-circles" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
@@ -8533,7 +8534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         NgSwitchDefault,
                         AsyncPipe,
                         SDKTranslatePipe,
-                    ], template: "<div class=\"h-100\">\n  @if (loading()) {\n    <!-- <div class=\"\">\n    {{computedHeight() }}\n    </div>\n    <div class=\"\">\n    {{class() }}\n    </div>\n    <div class=\"\">\n    {{computedClass() }}\n    </div> -->\n    <div class=\" {{computedClass()}}   center  \" id=\"loader\" [style.height]=\"computedHeight()\" [style.minHeight]=\"computedMinHeight()\">\n      <div class=\"text-center d-flex justify-content-center\">\n        <div>\n          <!-- <div class=\"\">\n          {{currentLoaderIndex()}}\n          </div> -->\n          @switch (currentLoaderType()) {\n            @case (loaderTypes().blinkingBlocks) {\n              <blinking-blocks />\n            }\n            @case (loaderTypes().bouncingBall) {\n              <bouncing-ball />\n            }\n            <!-- <ng-container *ngSwitchCase=\"loaderTypes.fadingBars\">\n            <fading-bars></fading-bars>\n          </ng-container> -->\n            @case (loaderTypes().ringRipples) {\n              <ring-ripples />\n            }\n            @case (loaderTypes().fadingCircles) {\n              <fading-circles />\n            }\n            @default {\n              <!-- <blinking-blocks /> -->\n              <fading-circles />\n            }\n          }\n\n          @if (text()) {\n            <h5 class=\"mt-2 noselect\">{{ text() | appTranslate | async }}</h5>\n          }\n        </div>\n      </div>\n    </div>\n  }\n\n  <div [hidden]=\"loading()\" #cont class=\"loading-content-container\">\n    <!-- <div > -->\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"h-100\">\n  @if (loading()) {\n    <!-- <div class=\"\">\n    {{computedHeight() }}\n    </div>\n    <div class=\"\">\n    {{class() }}\n    </div>\n    <div class=\"\">\n    {{computedClass() }}\n    </div> -->\n    <div class=\" {{computedClass()}}   center  \" id=\"loader\" [style.height]=\"computedHeight()\" [style.minHeight]=\"computedMinHeight()\">\n      <div class=\"text-center d-flex justify-content-center\">\n        <div>\n          <!-- <div class=\"\">\n          {{currentLoaderIndex()}}\n          </div> --> \n          @switch (currentLoaderType()) {\n            @case (loaderTypes().blinkingBlocks) {\n              <blinking-blocks />\n            }\n            @case (loaderTypes().bouncingBall) {\n              <bouncing-ball />\n            }\n            <!-- <ng-container *ngSwitchCase=\"loaderTypes.fadingBars\">\n            <fading-bars></fading-bars>\n          </ng-container> -->\n            @case (loaderTypes().ringRipples) {\n              <ring-ripples />\n            }\n            @case (loaderTypes().fadingCircles) {\n              <fading-circles />\n            }\n            @default {\n              <!-- <blinking-blocks /> -->\n              <fading-circles />\n            }\n          }\n\n          @if (text()) {\n            <h5 class=\"mt-2 noselect\">{{ text() | appTranslate | async }}</h5>\n          }\n        </div>\n      </div>\n    </div>\n  }\n\n  <div [hidden]=\"loading()\" #cont class=\"loading-content-container\">\n    <!-- <div > -->\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { _loading: [{
                 type: Input,
                 args: ['loading']
@@ -8691,7 +8692,7 @@ class ModalComponent {
         this.cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ModalComponent, deps: [{ token: UtilityService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: ModalComponent, isStandalone: true, selector: "modal-comp", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, bodyTemplateRef: { classPropertyName: "bodyTemplateRef", publicName: "bodyTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, footerTemplateRef: { classPropertyName: "footerTemplateRef", publicName: "footerTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, _isFullscreen: { classPropertyName: "_isFullscreen", publicName: "isFullscreen", isSignal: false, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, disableClose: { classPropertyName: "disableClose", publicName: "disableClose", isSignal: false, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { header: "headerChange", showHeader: "showHeaderChange", mouseLeft: "mouseLeft", loading: "loadingChange", showFooter: "showFooterChange", modalOpen: "modalOpen", modalClose: "modalClose" }, queries: [{ propertyName: "bodyTemplate", first: true, predicate: ModalBodyDirective, descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ModalFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tempRef", first: true, predicate: ["temp"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #temp>\n  <loader [loading]=\"loading()\" [height]=\"cont.offsetHeight\" #loader>\n    <div #cont class=\"h-100 modal-comp\" (mouseleave)=\"mouseLeft.emit($event)\"> \n      @if (showHeader()) {\n        <modal-header [header]=\"header() | trim\" [dialogRef]=\"dialogRef()\" />\n      }\n      <div\n        mat-dialog-content\n        class=\"{{ isFullscreen() ? 'p-0' : 'mt-2 px-0 pb-2 pt-0' }} overflow-x-hidden {{\n          showFooter() ? '' : 'noFooter h-100'\n        }} \">\n        <ng-content select=\"[body]\"></ng-content>\n        @if (isLoaded()) {\n          <ng-container [ngTemplateOutlet]=\"bodyTemplate()?.templateRef\" />\n        }\n      </div>\n      @if (showFooter()) {\n        <div mat-dialog-actions class=\"justify-content-end\">\n          <ng-content select=\"[footer]\"></ng-content>\n          @if (isOpened()) {\n            <ng-container [ngTemplateOutlet]=\"footerTemplate()?.templateRef\" />\n          }\n        </div>\n      }\n    </div>\n  </loader>\n\n  <!-- wdwwd -->\n</ng-template>\n", styles: ["::ng-deep .mat-mdc-dialog-content{max-height:100%}::ng-deep .modal-comp{display:flex;flex-direction:column}::ng-deep .loading-content-container{height:100%}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "ratioHW"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalHeaderComponent, selector: "modal-header", inputs: ["dialogRef", "header", "onCloseValue"], outputs: ["close"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "pipe", type: TrimPipe, name: "trim" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: ModalComponent, isStandalone: true, selector: "modal-comp", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, bodyTemplateRef: { classPropertyName: "bodyTemplateRef", publicName: "bodyTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, footerTemplateRef: { classPropertyName: "footerTemplateRef", publicName: "footerTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, _isFullscreen: { classPropertyName: "_isFullscreen", publicName: "isFullscreen", isSignal: false, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, disableClose: { classPropertyName: "disableClose", publicName: "disableClose", isSignal: false, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { header: "headerChange", showHeader: "showHeaderChange", mouseLeft: "mouseLeft", loading: "loadingChange", showFooter: "showFooterChange", modalOpen: "modalOpen", modalClose: "modalClose" }, queries: [{ propertyName: "bodyTemplate", first: true, predicate: ModalBodyDirective, descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ModalFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tempRef", first: true, predicate: ["temp"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #temp>\n  <loader [loading]=\"loading()\" [height]=\"cont.offsetHeight\" #loader>\n    <div #cont class=\"h-100 modal-comp\" (mouseleave)=\"mouseLeft.emit($event)\"> \n      @if (showHeader()) {\n        <modal-header [header]=\"header() | trim\" [dialogRef]=\"dialogRef()\" />\n      }\n      <div\n        mat-dialog-content\n        class=\"{{ isFullscreen() ? 'p-0' : 'mt-2 px-0 pb-2 pt-0' }} overflow-x-hidden {{\n          showFooter() ? '' : 'noFooter h-100'\n        }} \">\n        <ng-content select=\"[body]\"></ng-content>\n        @if (isLoaded()) {\n          <ng-container [ngTemplateOutlet]=\"bodyTemplate()?.templateRef\" />\n        }\n      </div>\n      @if (showFooter()) {\n        <div mat-dialog-actions class=\"justify-content-end\">\n          <ng-content select=\"[footer]\"></ng-content>\n          @if (isOpened()) {\n            <ng-container [ngTemplateOutlet]=\"footerTemplate()?.templateRef\" />\n          }\n        </div>\n      }\n    </div>\n  </loader>\n\n  <!-- wdwwd -->\n</ng-template>\n", styles: ["::ng-deep .mat-mdc-dialog-content{max-height:100%}::ng-deep .modal-comp{display:flex;flex-direction:column}::ng-deep .loading-content-container{height:100%}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ModalHeaderComponent, selector: "modal-header", inputs: ["dialogRef", "header", "onCloseValue"], outputs: ["close"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "pipe", type: TrimPipe, name: "trim" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
@@ -11997,7 +11998,7 @@ class PhoneNumberComponent extends InputBasicComponent {
                 iti.onlyCountries = [country.alpha2];
             }
             this.control()?.updateValueAndValidity();
-        }, { allowSignalWrites: true });
+        });
         this._config = input({
             // separateDialCode: true,
             allowDropdown: false,
@@ -12437,7 +12438,7 @@ class FormGeneratorComponent extends BaseFormGenerator {
             this.onSubmit.emit(this.formValue());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: FormGeneratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", 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: true, isRequired: false, transformFunction: null }, _formSchema: { classPropertyName: "_formSchema", publicName: "formSchema", isSignal: false, isRequired: false, transformFunction: null }, _formSchemaNoForm: { classPropertyName: "_formSchemaNoForm", publicName: "formSchemaNoForm", isSignal: false, isRequired: false, transformFunction: null }, _isShow: { classPropertyName: "_isShow", publicName: "isShow", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", mchange: "mchange", saved: "saved", form: "formChange" }, 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: "<!-- {{formValue()|json}}\n{{formValid()|json}} -->\n<loader [loading]=\"computedLoading()\">\n  <form [formGroup]=\"form()\" #formTag>\n    <div\n      class=\"row row-cols-{{ gridStyle() }} row-cols-md-{{ gridMDStyle() }} row-cols-lg-{{\n        gridLGStyle()\n      }} row-cols-xxl-{{ gridXXLStyle() }} align-items-center {{ formGridClass() }}\">\n      @for (scheme of computedFormSchema(); track scheme.field) {\n        <div class=\"col {{ scheme.cls }} \">\n          @switch (true) {\n            @case (scheme.type == 'template') {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  customTemplates()[scheme.field];\n                  context: { $implicit: { scheme, form: form() } }\n                \"/>\n            }\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                [verbose]=\"scheme.verbose\"\n                [debug]=\"scheme.debug\"\n                (mchange)=\"mchangeEmitter()\"\n                [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n                [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [countryCode3]=\"scheme.countryCode3\"\n                [disabled]=\"\n                  scheme.disabled ||\n                  (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n                \" />\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                [verbose]=\"scheme.verbose\"\n                [skipDoesOptionExistCheck]=\"scheme.skipDoesOptionExistCheck\"\n                [presetValue]=\"scheme.presetValue\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"scheme.noFormat\"\n                [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n                [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n                [labelType]=\"scheme.labelType | toAny\"\n                (mchange)=\"mchangeEmitter()\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [name]=\"scheme.field\"\n                [debug]=\"scheme.debug\"\n                [setFormattedValue]=\"scheme.setControlFormattedValue\"\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]=\"\n                  scheme.disabled ||\n                  (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n                \" />\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                [verbose]=\"scheme.verbose\"\n                [labelField]=\"scheme.labelField!\"\n                [noFormat]=\"scheme.noFormat!\"\n                [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n                [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n                [labelType]=\"scheme.labelType | toAny\"\n                (mchange)=\"mchangeEmitter()\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [name]=\"scheme.field\"\n                [debug]=\"scheme.debug!\"\n                [setFormattedValue]=\"scheme.setControlFormattedValue\"\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]=\"\n                  scheme.disabled ||\n                  (scheme.disabledIf! | functionCaller2: formValue() : (scheme.field | toAny))\n                \" />\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                [verbose]=\"scheme.verbose\"\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.showValidation || !!scheme.asyncValidators\"\n                [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n                [debug]=\"scheme.debug\"\n                (mchange)=\"mchangeEmitter()\"\n                [setFormattedValue]=\"scheme.setControlFormattedValue\"\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]=\"\n                  scheme.disabled ||\n                  (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n                \" />\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\n            [text]=\"submitBtnText()\"\n            group=\"submit\"\n            [form]=\"form()\"\n            (mclick)=\"submit(submitBtn)\"\n            #submitBtn />\n        }\n        @if (submitBtnTemplate()) {\n          <ng-container *ngTemplateOutlet=\"submitBtnTemplate()\"/>\n        }\n      </div>\n    </div>\n  </form>\n</loader>\n", styles: [""], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "ratioHW"] }, { 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.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", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["mSelectedOptionLabel"] }, { kind: "component", type: RichTextEditorRFComponent, selector: "rich-text-editor-rf" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { 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: "19.0.0", 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: true, isRequired: false, transformFunction: null }, _formSchema: { classPropertyName: "_formSchema", publicName: "formSchema", isSignal: false, isRequired: false, transformFunction: null }, _formSchemaNoForm: { classPropertyName: "_formSchemaNoForm", publicName: "formSchemaNoForm", isSignal: false, isRequired: false, transformFunction: null }, _isShow: { classPropertyName: "_isShow", publicName: "isShow", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", mchange: "mchange", saved: "saved", form: "formChange" }, 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: "<!-- {{formValue()|json}}\n{{formValid()|json}} -->\n<loader [loading]=\"computedLoading()\">\n  <form [formGroup]=\"form()\" #formTag>\n    <div\n      class=\"row row-cols-{{ gridStyle() }} row-cols-md-{{ gridMDStyle() }} row-cols-lg-{{\n        gridLGStyle()\n      }} row-cols-xxl-{{ gridXXLStyle() }} align-items-center {{ formGridClass() }}\">\n      @for (scheme of computedFormSchema(); track scheme.field) {\n        <div class=\"col {{ scheme.cls }} \">\n          @switch (true) {\n            @case (scheme.type == 'template') {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  customTemplates()[scheme.field];\n                  context: { $implicit: { scheme, form: form() } }\n                \"/>\n            }\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                [verbose]=\"scheme.verbose\"\n                [debug]=\"scheme.debug\"\n                (mchange)=\"mchangeEmitter()\"\n                [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n                [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [showValidationMsg]=\"scheme.showValidationMsg\"\n                [countryCode3]=\"scheme.countryCode3\"\n                [disabled]=\"\n                  scheme.disabled ||\n                  (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n                \" />\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                [verbose]=\"scheme.verbose\"\n                [skipDoesOptionExistCheck]=\"scheme.skipDoesOptionExistCheck\"\n                [presetValue]=\"scheme.presetValue\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"scheme.noFormat\"\n                [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n                [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n                [labelType]=\"scheme.labelType | toAny\"\n                (mchange)=\"mchangeEmitter()\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [name]=\"scheme.field\"\n                [debug]=\"scheme.debug\"\n                [setFormattedValue]=\"scheme.setControlFormattedValue\"\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]=\"\n                  scheme.disabled ||\n                  (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n                \" />\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                [verbose]=\"scheme.verbose\"\n                [labelField]=\"scheme.labelField!\"\n                [noFormat]=\"scheme.noFormat!\"\n                [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n                [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n                [labelType]=\"scheme.labelType | toAny\"\n                (mchange)=\"mchangeEmitter()\"\n                (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n                [name]=\"scheme.field\"\n                [debug]=\"scheme.debug!\"\n                [setFormattedValue]=\"scheme.setControlFormattedValue\"\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]=\"\n                  scheme.disabled ||\n                  (scheme.disabledIf! | functionCaller2: formValue() : (scheme.field | toAny))\n                \" />\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                [verbose]=\"scheme.verbose\"\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.showValidation || !!scheme.asyncValidators\"\n                [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n                [debug]=\"scheme.debug\"\n                (mchange)=\"mchangeEmitter()\"\n                [setFormattedValue]=\"scheme.setControlFormattedValue\"\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]=\"\n                  scheme.disabled ||\n                  (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n                \" />\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\n            [text]=\"submitBtnText()\"\n            group=\"submit\"\n            [form]=\"form()\"\n            (mclick)=\"submit(submitBtn)\"\n            #submitBtn />\n        }\n        @if (submitBtnTemplate()) {\n          <ng-container *ngTemplateOutlet=\"submitBtnTemplate()\"/>\n        }\n      </div>\n    </div>\n  </form>\n</loader>\n", styles: [""], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { 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.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", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["mSelectedOptionLabel"] }, { kind: "component", type: RichTextEditorRFComponent, selector: "rich-text-editor-rf" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { 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: "19.0.0", ngImport: i0, type: FormGeneratorComponent, decorators: [{
             type: Component,
@@ -12493,7 +12494,7 @@ class ModalFormComponent extends ModalComponent {
         super.open(config);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ModalFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: ModalFormComponent, isStandalone: true, selector: "modal-form", inputs: { keyField: "keyField", submitFunc: "submitFunc", text: "text", contextData: "contextData", gridStyle: "gridStyle", gridMDStyle: "gridMDStyle", gridXXLStyle: "gridXXLStyle", form: "form", formSchema: "formSchema" }, outputs: { submitted: "submitted" }, usesInheritance: true, ngImport: i0, template: "<ng-template #temp>\n  <modal-header [header]=\"header()\" [dialogRef]=\"dialogRef()\" />\n  <loader [loading]=\"loading()\">\n    <div mat-dialog-content>\n      <form-generator\n        [form]=\"form\"\n        [formSchema]=\"formSchema\"\n        [gridStyle]=\"gridStyle\"\n        [gridMDStyle]=\"gridMDStyle\"\n        [gridXXLStyle]=\"gridXXLStyle\"\n        [submitFunc]=\"submitFunc\"\n        [submitBtnText]=\"text\"\n        [showSubmitBtn]=\"false\"\n      />\n    </div>\n    <div mat-dialog-actions>\n      <div class=\"row row-cols-auto justify-content-end\">\n        <app-btn\n          [text]=\"text\"\n          group=\"submit\"\n          [form]=\"form\"\n          (mclick)=\"submitted.emit(this.form.value); dialogRef()?.close()\"\n        ></app-btn>\n      </div>\n    </div>\n  </loader>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: ModalHeaderComponent, selector: "modal-header", inputs: ["dialogRef", "header", "onCloseValue"], outputs: ["close"] }, { kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "ratioHW"] }, { 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", "formSchemaNoForm", "isShow"], outputs: ["onSubmit", "mchange", "saved", "formChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: ModalFormComponent, isStandalone: true, selector: "modal-form", inputs: { keyField: "keyField", submitFunc: "submitFunc", text: "text", contextData: "contextData", gridStyle: "gridStyle", gridMDStyle: "gridMDStyle", gridXXLStyle: "gridXXLStyle", form: "form", formSchema: "formSchema" }, outputs: { submitted: "submitted" }, usesInheritance: true, ngImport: i0, template: "<ng-template #temp>\n  <modal-header [header]=\"header()\" [dialogRef]=\"dialogRef()\" />\n  <loader [loading]=\"loading()\">\n    <div mat-dialog-content>\n      <form-generator\n        [form]=\"form\"\n        [formSchema]=\"formSchema\"\n        [gridStyle]=\"gridStyle\"\n        [gridMDStyle]=\"gridMDStyle\"\n        [gridXXLStyle]=\"gridXXLStyle\"\n        [submitFunc]=\"submitFunc\"\n        [submitBtnText]=\"text\"\n        [showSubmitBtn]=\"false\"\n      />\n    </div>\n    <div mat-dialog-actions>\n      <div class=\"row row-cols-auto justify-content-end\">\n        <app-btn\n          [text]=\"text\"\n          group=\"submit\"\n          [form]=\"form\"\n          (mclick)=\"submitted.emit(this.form.value); dialogRef()?.close()\"\n        ></app-btn>\n      </div>\n    </div>\n  </loader>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: ModalHeaderComponent, selector: "modal-header", inputs: ["dialogRef", "header", "onCloseValue"], outputs: ["close"] }, { kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { 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", "formSchemaNoForm", "isShow"], outputs: ["onSubmit", "mchange", "saved", "formChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ModalFormComponent, decorators: [{
             type: Component,
@@ -12791,7 +12792,7 @@ class WebcamMediaComponent {
         this.stopRecording();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: WebcamMediaComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: WebcamMediaComponent, isStandalone: true, selector: "lib-webcam-media", inputs: { controlTemplate: { classPropertyName: "controlTemplate", publicName: "controlTemplate", isSignal: true, isRequired: false, transformFunction: null }, 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 }, imageSnapshotInterval: { classPropertyName: "imageSnapshotInterval", publicName: "imageSnapshotInterval", 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", newImageSnapshot: "newImageSnapshot", webcamError: "webcamError", 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: "<loader [loading]=\"loading()\">\n  <div class=\"\" [hidden]=\"streaming() != true || isBackground()\">\n    <ng-container *ngTemplateOutlet=\"streamVideoTemp\" />\n\n    @if (!isBackground()) {\n      <div class=\"wm-buttons\">\n        @if (controlTemplate()) {\n          <ng-container *ngTemplateOutlet=\"controlTemplate()\" />\n        } @else {\n          <div class=\"row row-cols-lg-auto g-3 justify-content-center\">\n            @if (!isRecording()) {\n              <div>\n                <app-btn\n                  [text]=\"isPicture() ? 'Take Picture' : 'Record Video'\"\n                  (mclick)=\"isPicture() ? takePicture() : startRecording()\" />\n              </div>\n            } @else {\n              <div>\n                <app-btn\n                  text=\"{{ isPaused() ? 'Play' : 'Pause' }} Recording\"\n                  (mclick)=\"pauseRecording()\"\n                  type=\"outline\"\n                  [icon]=\"isPaused() ? 'play' : 'pause'\" />\n              </div>\n              <div>\n                <app-btn\n                  [text]=\"'Stop Recording'\"\n                  (mclick)=\"stopRecording()\"\n                  type=\"danger\"\n                  icon=\"stop\" />\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <ng-template #streamVideoTemp>\n    <div class=\"wm-recording-video-cont\">\n      <video\n        #recordingVideoTag\n        [srcObject]=\"stream()\"\n        autoplay\n        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        <!-- <div class=\"\">\n          {{ mediaFileLink() }}\n        </div>\n        <div class=\"\">\n          {{ mediaFile()?.dataURI }}\n        </div> -->\n        @if (isPicture()) {\n          <img\n            class=\"w-100\"\n            [style.width.px]=\"width()\"\n            [style.height.px]=\"height()\"\n            [src]=\"mediaFileLink()\" />\n        } @else {\n          <video\n            class=\"w-100\"\n            [style.width.px]=\"width()\"\n            [style.height.px]=\"height()\"\n            controls\n            autoplay\n            [src]=\"mediaFileLink()\"></video>\n        }\n      </div>\n      <div class=\"mt-3 row row-cols-lg-auto justify-content-center g-3\">\n        <div>\n          <app-btn text=\"Retake {{ subject() }}\" type=\"outline\" (mclick)=\"retake()\" />\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</loader>\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "ratioHW"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: WebcamMediaComponent, isStandalone: true, selector: "lib-webcam-media", inputs: { controlTemplate: { classPropertyName: "controlTemplate", publicName: "controlTemplate", isSignal: true, isRequired: false, transformFunction: null }, 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 }, imageSnapshotInterval: { classPropertyName: "imageSnapshotInterval", publicName: "imageSnapshotInterval", 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", newImageSnapshot: "newImageSnapshot", webcamError: "webcamError", 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: "<loader [loading]=\"loading()\">\n  <div class=\"\" [hidden]=\"streaming() != true || isBackground()\">\n    <ng-container *ngTemplateOutlet=\"streamVideoTemp\" />\n\n    @if (!isBackground()) {\n      <div class=\"wm-buttons\">\n        @if (controlTemplate()) {\n          <ng-container *ngTemplateOutlet=\"controlTemplate()\" />\n        } @else {\n          <div class=\"row row-cols-lg-auto g-3 justify-content-center\">\n            @if (!isRecording()) {\n              <div>\n                <app-btn\n                  [text]=\"isPicture() ? 'Take Picture' : 'Record Video'\"\n                  (mclick)=\"isPicture() ? takePicture() : startRecording()\" />\n              </div>\n            } @else {\n              <div>\n                <app-btn\n                  text=\"{{ isPaused() ? 'Play' : 'Pause' }} Recording\"\n                  (mclick)=\"pauseRecording()\"\n                  type=\"outline\"\n                  [icon]=\"isPaused() ? 'play' : 'pause'\" />\n              </div>\n              <div>\n                <app-btn\n                  [text]=\"'Stop Recording'\"\n                  (mclick)=\"stopRecording()\"\n                  type=\"danger\"\n                  icon=\"stop\" />\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <ng-template #streamVideoTemp>\n    <div class=\"wm-recording-video-cont\">\n      <video\n        #recordingVideoTag\n        [srcObject]=\"stream()\"\n        autoplay\n        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        <!-- <div class=\"\">\n          {{ mediaFileLink() }}\n        </div>\n        <div class=\"\">\n          {{ mediaFile()?.dataURI }}\n        </div> -->\n        @if (isPicture()) {\n          <img\n            class=\"w-100\"\n            [style.width.px]=\"width()\"\n            [style.height.px]=\"height()\"\n            [src]=\"mediaFileLink()\" />\n        } @else {\n          <video\n            class=\"w-100\"\n            [style.width.px]=\"width()\"\n            [style.height.px]=\"height()\"\n            controls\n            autoplay\n            [src]=\"mediaFileLink()\"></video>\n        }\n      </div>\n      <div class=\"mt-3 row row-cols-lg-auto justify-content-center g-3\">\n        <div>\n          <app-btn text=\"Retake {{ subject() }}\" type=\"outline\" (mclick)=\"retake()\" />\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</loader>\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: WebcamMediaComponent, decorators: [{
             type: Component,
@@ -13264,7 +13265,7 @@ class FormGeneratedValueComponent extends FormGeneratorComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: FormGeneratedValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: FormGeneratedValueComponent, isStandalone: true, selector: "form-generated-value", providers: [ListOptionFinderPipe], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"computedLoading()\">\n  <form>\n    <div\n      class=\"row row-cols-{{ gridStyle() }} row-cols-md-{{ gridMDStyle() }} row-cols-lg-{{\n        gridLGStyle()\n      }} row-cols-xxl-{{ gridXXLStyle() }} align-items-center {{ formGridClass() }}\">\n      @for (scheme of computedListValue(); track scheme.field) {\n        <div class=\"col {{ scheme.cls }} \">\n          @switch (true) {\n            @case (scheme.type == 'tel') {\n              <app-phone-number\n                [form]=\"form()\"\n                [label]=\"scheme.label\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [name]=\"scheme.field\"\n                [showLabel]=\"false\"\n                [noFormat]=\"scheme.noFormat\"\n                [debug]=\"scheme.debug\"\n                [showValidation]=\"scheme.showValidation\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [showValidationIcon]=\"scheme.showValidationIcon\"\n                [countryCode3]=\"scheme.countryCode3\"\n                #inputTag />\n            } \n            @default {\n              <div class=\"\">\n                <div class=\"text-primary\">\n                  {{ scheme.label }}\n                </div>\n                <div class=\" \">\n                  {{ scheme.formattedValue | valueOrX: '-' }}\n                </div>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </form>\n</loader>\n\n<ng-template #labelValue let-obj>\n  <div class=\"\">\n    <div class=\"text-primary\">\n      {{ obj.scheme.label }}\n    </div>\n    <div class=\" \">\n      {{ formatValue | functionCaller2: obj.scheme : obj.value | valueOrX: '-' }}\n    </div>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep input:not([type=checkbox]),:host ::ng-deep .control-bg-gray.form-control,:host ::ng-deep textarea{border:none!important;background-color:transparent!important;padding:0!important;height:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "ratioHW"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: FormGeneratedValueComponent, isStandalone: true, selector: "form-generated-value", providers: [ListOptionFinderPipe], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"computedLoading()\">\n  <form>\n    <div\n      class=\"row row-cols-{{ gridStyle() }} row-cols-md-{{ gridMDStyle() }} row-cols-lg-{{\n        gridLGStyle()\n      }} row-cols-xxl-{{ gridXXLStyle() }} align-items-center {{ formGridClass() }}\">\n      @for (scheme of computedListValue(); track scheme.field) {\n        <div class=\"col {{ scheme.cls }} \">\n          @switch (true) {\n            @case (scheme.type == 'tel') {\n              <app-phone-number\n                [form]=\"form()\"\n                [label]=\"scheme.label\"\n                [clearOnDisable]=\"scheme.clearOnDisable\"\n                [name]=\"scheme.field\"\n                [showLabel]=\"false\"\n                [noFormat]=\"scheme.noFormat\"\n                [debug]=\"scheme.debug\"\n                [showValidation]=\"scheme.showValidation\"\n                [autoPickValueField]=\"scheme.autoPickValueField\"\n                [showRequiredTag]=\"scheme.showRequiredTag\"\n                [showValidationIcon]=\"scheme.showValidationIcon\"\n                [countryCode3]=\"scheme.countryCode3\"\n                #inputTag />\n            } \n            @default {\n              <div class=\"\">\n                <div class=\"text-primary\">\n                  {{ scheme.label }}\n                </div>\n                <div class=\" \">\n                  {{ scheme.formattedValue | valueOrX: '-' }}\n                </div>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </form>\n</loader>\n\n<ng-template #labelValue let-obj>\n  <div class=\"\">\n    <div class=\"text-primary\">\n      {{ obj.scheme.label }}\n    </div>\n    <div class=\" \">\n      {{ formatValue | functionCaller2: obj.scheme : obj.value | valueOrX: '-' }}\n    </div>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep input:not([type=checkbox]),:host ::ng-deep .control-bg-gray.form-control,:host ::ng-deep textarea{border:none!important;background-color:transparent!important;padding:0!important;height:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: FormGeneratedValueComponent, decorators: [{
             type: Component,
@@ -14116,7 +14117,7 @@ class IndexCompLayoutComponent {
             this.router.navigate(['clone'], { relativeTo: this.route, queryParams: this.routeValue() });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IndexCompLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: IndexCompLayoutComponent, isStandalone: true, selector: "index-comp-layout", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, hideClone: { classPropertyName: "hideClone", publicName: "hideClone", isSignal: true, isRequired: false, transformFunction: null }, hideShow: { classPropertyName: "hideShow", publicName: "hideShow", isSignal: true, isRequired: false, transformFunction: null }, hideEdit: { classPropertyName: "hideEdit", publicName: "hideEdit", isSignal: true, isRequired: false, transformFunction: null }, validateCreate: { classPropertyName: "validateCreate", publicName: "validateCreate", isSignal: true, isRequired: false, transformFunction: null }, createBtnText: { classPropertyName: "createBtnText", publicName: "createBtnText", isSignal: true, isRequired: false, transformFunction: null }, hideCreate: { classPropertyName: "hideCreate", publicName: "hideCreate", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, routeValue: { classPropertyName: "routeValue", publicName: "routeValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"row  {{ grid() | resizeGrid: 'row-cols-' }}   justify-content-center w-100\">\n  <div>\n    <loader [loading]=\"loading()!\">\n      <ng-content></ng-content>\n      @if (showButtons()) {\n        <div class=\"row row-cols-lg-{{ buttonGridSignal() }} mt-3 g-3 justify-content-center\">\n          @if (!hideShow()) {\n            <div class=\"\">\n              <app-btn text=\"Show\" icon=\"show\" (mclick)=\"show()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n\n          @if (!hideCreate()) {\n            <div class=\"\">\n              @if (validateCreate()) {\n                <app-btn\n                  [text]=\"createBtnText()\"\n                  icon=\"add\"\n                  type=\"primary\"\n                  (mclick)=\"create()\"\n                  [disabled]=\"!valid()\" />\n              } @else {\n                <app-btn [text]=\"createBtnText()\" icon=\"add\" type=\"primary\" routerLink=\"create\" />\n              }\n            </div>\n          }\n\n          @if (!hideClone()) {\n            <div class=\"\">\n              <app-btn text=\"Clone\" icon=\"clone\" (mclick)=\"clone()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n\n          @if (!hideEdit()) {\n            <div class=\"\">\n              <app-btn text=\"Edit\" icon=\"edit\" (mclick)=\"edit()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n        </div>\n      }\n    </loader>\n  </div>\n</div>\n", styles: [":host{height:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: ResizeGridPipe, name: "resizeGrid" }, { kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "ratioHW"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: IndexCompLayoutComponent, isStandalone: true, selector: "index-comp-layout", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, hideClone: { classPropertyName: "hideClone", publicName: "hideClone", isSignal: true, isRequired: false, transformFunction: null }, hideShow: { classPropertyName: "hideShow", publicName: "hideShow", isSignal: true, isRequired: false, transformFunction: null }, hideEdit: { classPropertyName: "hideEdit", publicName: "hideEdit", isSignal: true, isRequired: false, transformFunction: null }, validateCreate: { classPropertyName: "validateCreate", publicName: "validateCreate", isSignal: true, isRequired: false, transformFunction: null }, createBtnText: { classPropertyName: "createBtnText", publicName: "createBtnText", isSignal: true, isRequired: false, transformFunction: null }, hideCreate: { classPropertyName: "hideCreate", publicName: "hideCreate", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, routeValue: { classPropertyName: "routeValue", publicName: "routeValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"row  {{ grid() | resizeGrid: 'row-cols-' }}   justify-content-center w-100\">\n  <div>\n    <loader [loading]=\"loading()!\">\n      <ng-content></ng-content>\n      @if (showButtons()) {\n        <div class=\"row row-cols-lg-{{ buttonGridSignal() }} mt-3 g-3 justify-content-center\">\n          @if (!hideShow()) {\n            <div class=\"\">\n              <app-btn text=\"Show\" icon=\"show\" (mclick)=\"show()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n\n          @if (!hideCreate()) {\n            <div class=\"\">\n              @if (validateCreate()) {\n                <app-btn\n                  [text]=\"createBtnText()\"\n                  icon=\"add\"\n                  type=\"primary\"\n                  (mclick)=\"create()\"\n                  [disabled]=\"!valid()\" />\n              } @else {\n                <app-btn [text]=\"createBtnText()\" icon=\"add\" type=\"primary\" routerLink=\"create\" />\n              }\n            </div>\n          }\n\n          @if (!hideClone()) {\n            <div class=\"\">\n              <app-btn text=\"Clone\" icon=\"clone\" (mclick)=\"clone()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n\n          @if (!hideEdit()) {\n            <div class=\"\">\n              <app-btn text=\"Edit\" icon=\"edit\" (mclick)=\"edit()\" [disabled]=\"!valid()\" />\n            </div>\n          }\n        </div>\n      }\n    </loader>\n  </div>\n</div>\n", styles: [":host{height:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: ResizeGridPipe, name: "resizeGrid" }, { kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: IndexCompLayoutComponent, decorators: [{
             type: Component,
@@ -14323,7 +14324,7 @@ class NarrationHistoryCompComponent {
         btn?.setLoader(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NarrationHistoryCompComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: NarrationHistoryCompComponent, isStandalone: true, selector: "narration-history-comp", inputs: { isShow: "isShow", loading: "loading", saveFunction: "saveFunction", updateFunction: "updateFunction", deleteFunction: "deleteFunction", listFunction: "listFunction" }, ngImport: i0, template: "<div class=\"comments\">\n  <loader [loading]=\"loading\" class=\"vh-20\">\n    @if (!isShow) {\n\n      <div class=\"border-start comment-container \">\n        <div class=\"row row-cols-lg-auto g-1 justify-content-between\">\n          <div>\n            <div class=\"row row-cols-auto g-1 align-items-end\">\n              <div class=\"f-600 text-primary \">\n                {{'Add Comment'|appTranslate|async}}\n              </div>\n            </div>\n          </div>\n          <div class=\"\">\n            <app-btn text=\"Save\" [mini]=\"true\" type=\"clear\" icon=\"save\" #saveBtn mclass=\"text-primary\"\n              [disabled]=\"!newComment.narration\" (mclick)=\"createComment(newComment.narration,rte.reset,saveBtn)\" />\n          </div>\n        </div>\n        <div class=\"pt-2\">\n          <rich-text-editor [(content)]=\"newComment.narration\" #rte />\n        </div>\n      </div>\n    \n}\n    @for (narration of comments; track trackByID(cIndex, narration); let cIndex = $index) {\n  <div class=\"border-start comment-container mt-3\"\n     >\n      <div class=\"row row-cols-lg-auto g-1 justify-content-between\">\n        <div>\n          <div class=\"row row-cols-auto g-1 align-items-end\">\n            <div class=\"text-primary f-600\">\n              <i class=\"fa fa-user\"></i>\n              {{narration.createdBy|uppercase}}\n            </div>\n            <div class=\"\" [matTooltip]=\"narration.createdOn|date\">\n              | {{narration.createdOn|customDate}} <i class=\"fa fa-clock opacity-50\"></i>\n            </div>\n          </div>\n        </div>\n        @if (!isShow) {\n<div class=\"\">\n          @if (narration.createdBy==currentUserName && !cIndex) {\n<div class=\"row row-cols-auto gx-1\">\n            <app-btn text=\"Delete\" [mini]=\"true\" type=\"clear\" mclass=\"text-danger\" icon=\"delete\"\n              (mclick)=\"deleteComment(narration.id,deBtn)\" #deBtn />\n            @if (!rte.enabled) {\n<app-btn text=\"Edit\" [mini]=\"true\" type=\"clear\" icon=\"edit\" (mclick)=\"rte.enable()\" />\n}\n            @if (rte.enabled) {\n<app-btn text=\"Save\" #uBtn [mini]=\"true\" type=\"clear\" icon=\"save\" mclass=\"text-primary\"\n              (mclick)=\"updateComment(narration,rte.getContent,rte.disable,uBtn)\" />\n}\n          </div>\n}\n        </div>\n}\n      </div>\n      <div class=\"pt-2\">\n        <rich-text-editor [disabled]=\"true\" [(content)]=\"narration.narration\" #rte />\n      </div>\n    </div>\n}\n    @if (!comments?.length) {\n\n      <div class=\"center vh-10\">\n        There are no comments\n      </div>\n    \n}\n\n  </loader>\n</div>", styles: [".comments .comment-container{border-left-color:var(--primary)!important;border-left-width:3px!important;padding-left:10px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "component", type: RichTextEditorComponent, selector: "rich-text-editor", inputs: ["enabled", "disabled", "form", "name", "content"], outputs: ["contentChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "ratioHW"] }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: NarrationHistoryCompComponent, isStandalone: true, selector: "narration-history-comp", inputs: { isShow: "isShow", loading: "loading", saveFunction: "saveFunction", updateFunction: "updateFunction", deleteFunction: "deleteFunction", listFunction: "listFunction" }, ngImport: i0, template: "<div class=\"comments\">\n  <loader [loading]=\"loading\" class=\"vh-20\">\n    @if (!isShow) {\n\n      <div class=\"border-start comment-container \">\n        <div class=\"row row-cols-lg-auto g-1 justify-content-between\">\n          <div>\n            <div class=\"row row-cols-auto g-1 align-items-end\">\n              <div class=\"f-600 text-primary \">\n                {{'Add Comment'|appTranslate|async}}\n              </div>\n            </div>\n          </div>\n          <div class=\"\">\n            <app-btn text=\"Save\" [mini]=\"true\" type=\"clear\" icon=\"save\" #saveBtn mclass=\"text-primary\"\n              [disabled]=\"!newComment.narration\" (mclick)=\"createComment(newComment.narration,rte.reset,saveBtn)\" />\n          </div>\n        </div>\n        <div class=\"pt-2\">\n          <rich-text-editor [(content)]=\"newComment.narration\" #rte />\n        </div>\n      </div>\n    \n}\n    @for (narration of comments; track trackByID(cIndex, narration); let cIndex = $index) {\n  <div class=\"border-start comment-container mt-3\"\n     >\n      <div class=\"row row-cols-lg-auto g-1 justify-content-between\">\n        <div>\n          <div class=\"row row-cols-auto g-1 align-items-end\">\n            <div class=\"text-primary f-600\">\n              <i class=\"fa fa-user\"></i>\n              {{narration.createdBy|uppercase}}\n            </div>\n            <div class=\"\" [matTooltip]=\"narration.createdOn|date\">\n              | {{narration.createdOn|customDate}} <i class=\"fa fa-clock opacity-50\"></i>\n            </div>\n          </div>\n        </div>\n        @if (!isShow) {\n<div class=\"\">\n          @if (narration.createdBy==currentUserName && !cIndex) {\n<div class=\"row row-cols-auto gx-1\">\n            <app-btn text=\"Delete\" [mini]=\"true\" type=\"clear\" mclass=\"text-danger\" icon=\"delete\"\n              (mclick)=\"deleteComment(narration.id,deBtn)\" #deBtn />\n            @if (!rte.enabled) {\n<app-btn text=\"Edit\" [mini]=\"true\" type=\"clear\" icon=\"edit\" (mclick)=\"rte.enable()\" />\n}\n            @if (rte.enabled) {\n<app-btn text=\"Save\" #uBtn [mini]=\"true\" type=\"clear\" icon=\"save\" mclass=\"text-primary\"\n              (mclick)=\"updateComment(narration,rte.getContent,rte.disable,uBtn)\" />\n}\n          </div>\n}\n        </div>\n}\n      </div>\n      <div class=\"pt-2\">\n        <rich-text-editor [disabled]=\"true\" [(content)]=\"narration.narration\" #rte />\n      </div>\n    </div>\n}\n    @if (!comments?.length) {\n\n      <div class=\"center vh-10\">\n        There are no comments\n      </div>\n    \n}\n\n  </loader>\n</div>", styles: [".comments .comment-container{border-left-color:var(--primary)!important;border-left-width:3px!important;padding-left:10px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "component", type: RichTextEditorComponent, selector: "rich-text-editor", inputs: ["enabled", "disabled", "form", "name", "content"], outputs: ["contentChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NarrationHistoryCompComponent, decorators: [{
             type: Component,
@@ -15560,7 +15561,7 @@ class TableHttpsComponent extends TableBaseComponent {
         this.search();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableHttpsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: TableHttpsComponent, isStandalone: true, selector: "table-https", inputs: { observableFunc: { classPropertyName: "observableFunc", publicName: "observableFunc", isSignal: true, isRequired: false, transformFunction: null }, pageNumber: { classPropertyName: "pageNumber", publicName: "pageNumber", isSignal: false, isRequired: false, transformFunction: null }, queryData: { classPropertyName: "queryData", publicName: "queryData", isSignal: true, isRequired: false, transformFunction: null }, searchIfNoQuery: { classPropertyName: "searchIfNoQuery", publicName: "searchIfNoQuery", isSignal: true, isRequired: false, transformFunction: null }, showRefreshBtn: { classPropertyName: "showRefreshBtn", publicName: "showRefreshBtn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryData: "queryDataChange", dataFetched: "dataFetched" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-https\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  <!-- {{queryData()|json}} -->\n  <div class=\"\" [hidden]=\"!allowSearch()\">\n    <div class=\"row g-3 m-0 row-cols-md-auto justify-content-between align-items-center\">\n      <div class=\"ps-0\">\n        @if (startSectionTemplate()) {\n          <div class=\"{{ starterSectionClass() }}\">\n            <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n          </div>\n        }\n      </div>\n      <div class=\"pe-0\">\n        <div class=\"row g-3 row-cols-lg-auto align-items-center justify-content-between\">\n          <div class=\"col-auto\">\n            @if (showExport()) {\n              <app-export-table\n                [disabled]=\"!resultsLength()\"\n                [label]=\"label()\"\n                [debug]=\"debug()\"\n                [searchQuery]=\"allQueryData() | toAny\"\n                [searchFunc]=\"observableFunc()\"\n                [displayedColumns]=\"computedDisplayedColumns()\"></app-export-table>\n            }\n          </div>\n          @if (showAdditionalColumns()) {\n            <div class=\"col-auto\">\n              <fields-to-display\n                [fields]=\"allTableColumns()\"\n                [currentColumns]=\"computedDisplayedColumns()\"\n                (fieldsChanged)=\"fieldsChanged($event)\" />\n            </div>\n          }\n          @if (showRefreshBtn()) {\n            <div class=\"col-auto\">\n              <app-btn icon=\"refresh\" [iconBtn]=\"true\" (mclick)=\"refresh()\" />\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"mt-2 overflow-auto {{ tableContainerClass() }} table-container rounded-10\"\n      [ngClass]=\"{ border: distinct() }\">\n      <loader [loading]=\"isLoadingResults()\" [height]=\"container?.scrollHeight + 400\">\n        <div #container>\n          <div class=\"table-responsive\">\n            <table\n              mat-table\n              [dataSource]=\"filteredAndPagedResults()\"\n              class=\"w-100 d-table table\"\n              [multiTemplateDataRows]=\"isExpandable()\"\n              [ngClass]=\"{\n                smallerFonts: smallerFonts(),\n                nowrap: nowrap(),\n                centerCells: centerCells(),\n                curvy: curvy(),\n                'table-striped': striped(),\n              }\"\n              matSort\n              matSortActive=\"{{ orderField() | toAny }}\"\n              matSortDisableClear\n              [matSortDirection]=\"orderDirection()\"\n              #table\n              (matSortChange)=\"resetPaging()\">\n              <!-- Checkbox Column -->\n              <ng-container\n                matColumnDef=\"mselect\"\n                [sticky]=\"!placeSelectionAtRight()\"\n                [stickyEnd]=\"placeSelectionAtRight()\">\n                <th mat-header-cell *matHeaderCellDef class=\"w-1\">\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                </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n                  <mat-checkbox\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? selection.toggle(row) : null\"\n                    [checked]=\"selection.isSelected(row)\"\n                    [aria-label]=\"checkboxLabel(row)\"></mat-checkbox>\n                </td>\n              </ng-container>\n              <!-- COLUMNS -->\n              @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n                @switch (col.type) {\n                  <!-- CHECKBOX -->\n                  @case ('checkbox') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell *matHeaderCellDef class=\"w-1\">\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\" class=\"w-1\">\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                  <!-- Sub Table -->\n                  @case ('table') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                        {{ col.t | appTranslate | async }}\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\">\n                        <app-btn\n                          [icon]=\"col.icon\"\n                          type=\"dark\"\n                          (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                          [help]=\"col.subTable | tableToString: row | async\"\n                          [showHelpIcon]=\"false\"\n                          [iconBtn]=\"true\"\n                          mclass=\"w-auto\" />\n                      </td>\n                    </ng-container>\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                  <!-- Button -->\n                  @case ('button') {\n                    <ng-container [sticky]=\"col.sticky\" 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)=\"\n                            col.action\n                              ? col.action(row, col.f, getActionStatusCallback(col), index)\n                              : null\n                          \"\n                          [help]=\"col.btn?.help\"\n                          [showHelpIcon]=\"col.btn?.showHelpIcon\"\n                          [text]=\"col.btn?.label\"\n                          [mini]=\"col.btn?.mini\"\n                          [loading]=\"col.btn?.loading\"\n                          [iconBtn]=\"col.btn?.iconBtn\"\n                          mclass=\"w-auto\"\n                          [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- ACTION/BTNS COLUMNS -->\n                  @case ('btns') {\n                    <ng-container\n                      matColumnDef=\"{{ col.f | toAny }}\"\n                      [stickyEnd]=\"true\"\n                      [sticky]=\"true\">\n                      <th mat-header-cell *matHeaderCellDef 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\">\n                          @for (button of col.buttons; track button.icon + button.label) {\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                                [mini]=\"button.mini\"\n                                [iconBtn]=\"!button.label\"\n                                mclass=\"w-auto\"\n                                (mclick)=\"button.action(row, i, btn)\"\n                                #btn />\n                            </div>\n                          }\n                        </div>\n                      </td>\n                    </ng-container>\n                  }\n                  <!-- EDITABLE -->\n                  @case ('editable') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{ col.t | appTranslate | async }}\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\n                          (click)=\"col.action ? col.action(row, col.f) : null\"\n                          class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n                      </td>\n                    </ng-container>\n                  }\n                  <!-- DEFAULT -->\n                  @default {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\" [sticky]=\"col.sticky\">\n                      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n                        {{ col.t | appTranslate | async }}\n                      </th>\n                      <td mat-cell *matCellDef=\"let row; let rowIndex = index\">\n                        <ng-template #cellContent>\n                          @switch (true) {\n                            @case (!!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]=\"\n                                    row | getColFormatted: col | async | valueOrX: '-'\n                                  \"></a>\n                              }\n                            }\n                            @case (!!col.customTemplate) {\n                              <ng-container\n                                *ngTemplateOutlet=\"\n                                  col.customTemplate;\n                                  context: { $implicit: { row, rowIndex } }\n                                \" />\n                            }\n                            @default {\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]=\"\n                                  row | getColFormatted: col | async | valueOrX: '-'\n                                \"></span>\n                            }\n                          }\n                          @if (col.expandable) {\n                            <button\n                              matTooltip=\"Exapnd\"\n                              [matTooltipShowDelay]=\"1000\"\n                              mat-icon-button\n                              (click)=\"expandCell(row, col, expandModal)\"\n                              class=\"expandBtn\">\n                              <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n                            </button>\n                          }\n                        </ng-template>\n\n                        @if (col._onHoverFunction) {\n                          <span\n                            class=\"\"\n                            [nelDebug]=\"debug()\"\n                            [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n                            [nelDelay]=\"col._onHoverDelay\">\n                            <ng-container *ngTemplateOutlet=\"cellContent\" />\n                          </span>\n                        } @else {\n                          <ng-container *ngTemplateOutlet=\"cellContent\" />\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                    <!-- {{expandedElement()|json}} -->\n                    <div class=\"d-flex justify-content-end\">\n                      <app-btn\n                        [iconBtn]=\"true\"\n                        type=\"clear\"\n                        [customIcon]=\"\n                          expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n                        \"\n                        aria-label=\"expand row\"\n                        loggingValue=\"Expand Row Button {{ row | json }}\"\n                        (mclick)=\"\n                          expandedElement.set(expandedElement() === row ? null : row);\n                          $event?.stopPropagation()\n                        \" />\n                    </div>\n                  </td>\n                </ng-container>\n              }\n              <!--// -->\n              <!-- OPTIONS COLUMN -->\n              @if (hasRowOptions()) {\n                <ng-container matColumnDef=\"option\" stickyEnd>\n                  <th mat-header-cell *matHeaderCellDef disableClear></th>\n                  <td mat-cell *matCellDef=\"let row\">\n                    @if (rowOptionsMap()) {\n                      @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\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.t) {\n                            <button\n                              mat-menu-item\n                              class=\"{{ option.itemClass }}\"\n                              (click)=\"option.action?.(row)\">\n                              @if (option.iconClass) {\n                                <i class=\"{{ option.iconClass }}\"></i>\n                              }\n                              {{ option.t | appTranslate | async }}\n                            </button>\n                          }\n                        </mat-menu>\n                      }\n                    } @else {\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.t) {\n                          <button\n                            mat-menu-item\n                            class=\"{{ option.itemClass }}\"\n                            (click)=\"option.action?.(row)\">\n                            @if (option.iconClass) {\n                              <i class=\"{{ option.iconClass }}\"></i>\n                            }\n                            {{ option.t | appTranslate | async }}\n                          </button>\n                        }\n                      </mat-menu>\n                    }\n                  </td>\n                </ng-container>\n              }\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\n                      mat-cell\n                      *matCellDef=\"let row\"\n                      [attr.colspan]=\"dcols?.length || 1\"\n                      [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n                      <div\n                        class=\"example-element-detail\"\n                        [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            expandedRowTemplate();\n                            context: { $implicit: { row } }\n                          \" />\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]=\"{\n                    pointer: showRowPointer(),\n                    disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n                  }\"\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\n                    mat-row\n                    *matRowDef=\"let row; columns: ['expandedDetail']\"\n                    class=\"expanded-detail-row\"\n                    [style.height.px]=\"0\"></tr>\n                }\n              }\n            </table>\n          </div>\n          <mat-paginator\n            [length]=\"resultsLength()\"\n            [pageSizeOptions]=\"computedPageSizeOptions()\"\n            [pageSize]=\"pageSize()\"\n            showFirstLastButtons />\n        </div>\n      </loader>\n    </div>\n  </div>\n  @if (!allowSearch()) {\n    <div class=\"not-allowed-search\">Please enter a search query</div>\n  }\n</div>\n<modal-comp\n  [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n  [header]=\"selectedCellForExpansion()?.column?.t\"\n  [showFooter]=\"false\"\n  (modalClose)=\"closeExpandedCell()\"\n  #expandModal>\n  <ng-template modalBody>\n    @if (selectedCellForExpansion(); as _selected) {\n      <div\n        class=\"\"\n        [innerHTML]=\"\n          _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n        \"></div>\n    }\n  </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}: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: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "component", type: ExportTableComponent, selector: "app-export-table", inputs: ["data", "displayedColumns", "searchFunc", "searchQuery", "label", "debug", "disabled"] }, { kind: "component", type: FieldsToDisplayComponent, selector: "fields-to-display", inputs: ["query1", "query2", "fields", "currentColumns"], outputs: ["query1Change", "query2Change", "fieldsChanged"] }, { 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: 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: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "ratioHW"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { 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: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$5.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: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MouseEnterListenerDirective, selector: "[nelMouseEntered]", inputs: ["nelMouseEntered"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.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: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: TableHttpsComponent, isStandalone: true, selector: "table-https", inputs: { observableFunc: { classPropertyName: "observableFunc", publicName: "observableFunc", isSignal: true, isRequired: false, transformFunction: null }, pageNumber: { classPropertyName: "pageNumber", publicName: "pageNumber", isSignal: false, isRequired: false, transformFunction: null }, queryData: { classPropertyName: "queryData", publicName: "queryData", isSignal: true, isRequired: false, transformFunction: null }, searchIfNoQuery: { classPropertyName: "searchIfNoQuery", publicName: "searchIfNoQuery", isSignal: true, isRequired: false, transformFunction: null }, showRefreshBtn: { classPropertyName: "showRefreshBtn", publicName: "showRefreshBtn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryData: "queryDataChange", dataFetched: "dataFetched" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-https\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  <!-- {{queryData()|json}} -->\n  <div class=\"\" [hidden]=\"!allowSearch()\">\n    <div class=\"row g-3 m-0 row-cols-md-auto justify-content-between align-items-center\">\n      <div class=\"ps-0\">\n        @if (startSectionTemplate()) {\n          <div class=\"{{ starterSectionClass() }}\">\n            <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n          </div>\n        }\n      </div>\n      <div class=\"pe-0\">\n        <div class=\"row g-3 row-cols-lg-auto align-items-center justify-content-between\">\n          <div class=\"col-auto\">\n            @if (showExport()) {\n              <app-export-table\n                [disabled]=\"!resultsLength()\"\n                [label]=\"label()\"\n                [debug]=\"debug()\"\n                [searchQuery]=\"allQueryData() | toAny\"\n                [searchFunc]=\"observableFunc()\"\n                [displayedColumns]=\"computedDisplayedColumns()\"></app-export-table>\n            }\n          </div>\n          @if (showAdditionalColumns()) {\n            <div class=\"col-auto\">\n              <fields-to-display\n                [fields]=\"allTableColumns()\"\n                [currentColumns]=\"computedDisplayedColumns()\"\n                (fieldsChanged)=\"fieldsChanged($event)\" />\n            </div>\n          }\n          @if (showRefreshBtn()) {\n            <div class=\"col-auto\">\n              <app-btn icon=\"refresh\" [iconBtn]=\"true\" (mclick)=\"refresh()\" />\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"mt-2 overflow-auto {{ tableContainerClass() }} table-container rounded-10\"\n      [ngClass]=\"{ border: distinct() }\">\n      <loader [loading]=\"isLoadingResults()\" [height]=\"container?.scrollHeight + 400\">\n        <div #container>\n          <div class=\"table-responsive\">\n            <table\n              mat-table\n              [dataSource]=\"filteredAndPagedResults()\"\n              class=\"w-100 d-table table\"\n              [multiTemplateDataRows]=\"isExpandable()\"\n              [ngClass]=\"{\n                smallerFonts: smallerFonts(),\n                nowrap: nowrap(),\n                centerCells: centerCells(),\n                curvy: curvy(),\n                'table-striped': striped(),\n              }\"\n              matSort\n              matSortActive=\"{{ orderField() | toAny }}\"\n              matSortDisableClear\n              [matSortDirection]=\"orderDirection()\"\n              #table\n              (matSortChange)=\"resetPaging()\">\n              <!-- Checkbox Column -->\n              <ng-container\n                matColumnDef=\"mselect\"\n                [sticky]=\"!placeSelectionAtRight()\"\n                [stickyEnd]=\"placeSelectionAtRight()\">\n                <th mat-header-cell *matHeaderCellDef class=\"w-1\">\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                </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n                  <mat-checkbox\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? selection.toggle(row) : null\"\n                    [checked]=\"selection.isSelected(row)\"\n                    [aria-label]=\"checkboxLabel(row)\"></mat-checkbox>\n                </td>\n              </ng-container>\n              <!-- COLUMNS -->\n              @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n                @switch (col.type) {\n                  <!-- CHECKBOX -->\n                  @case ('checkbox') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell *matHeaderCellDef class=\"w-1\">\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\" class=\"w-1\">\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                  <!-- Sub Table -->\n                  @case ('table') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                        {{ col.t | appTranslate | async }}\n                      </th>\n                      <td mat-cell *matCellDef=\"let row\">\n                        <app-btn\n                          [icon]=\"col.icon\"\n                          type=\"dark\"\n                          (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                          [help]=\"col.subTable | tableToString: row | async\"\n                          [showHelpIcon]=\"false\"\n                          [iconBtn]=\"true\"\n                          mclass=\"w-auto\" />\n                      </td>\n                    </ng-container>\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                  <!-- Button -->\n                  @case ('button') {\n                    <ng-container [sticky]=\"col.sticky\" 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)=\"\n                            col.action\n                              ? col.action(row, col.f, getActionStatusCallback(col), index)\n                              : null\n                          \"\n                          [help]=\"col.btn?.help\"\n                          [showHelpIcon]=\"col.btn?.showHelpIcon\"\n                          [text]=\"col.btn?.label\"\n                          [mini]=\"col.btn?.mini\"\n                          [loading]=\"col.btn?.loading\"\n                          [iconBtn]=\"col.btn?.iconBtn\"\n                          mclass=\"w-auto\"\n                          [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n                      </td>\n                    </ng-container>\n                  }\n                  <!--// -->\n                  <!-- ACTION/BTNS COLUMNS -->\n                  @case ('btns') {\n                    <ng-container\n                      matColumnDef=\"{{ col.f | toAny }}\"\n                      [stickyEnd]=\"true\"\n                      [sticky]=\"true\">\n                      <th mat-header-cell *matHeaderCellDef 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\">\n                          @for (button of col.buttons; track button.icon + button.label) {\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                                [mini]=\"button.mini\"\n                                [iconBtn]=\"!button.label\"\n                                mclass=\"w-auto\"\n                                (mclick)=\"button.action(row, i, btn)\"\n                                #btn />\n                            </div>\n                          }\n                        </div>\n                      </td>\n                    </ng-container>\n                  }\n                  <!-- EDITABLE -->\n                  @case ('editable') {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                      <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                        {{ col.t | appTranslate | async }}\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\n                          (click)=\"col.action ? col.action(row, col.f) : null\"\n                          class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n                      </td>\n                    </ng-container>\n                  }\n                  <!-- DEFAULT -->\n                  @default {\n                    <ng-container matColumnDef=\"{{ col.f | toAny }}\" [sticky]=\"col.sticky\">\n                      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n                        {{ col.t | appTranslate | async }}\n                      </th>\n                      <td mat-cell *matCellDef=\"let row; let rowIndex = index\">\n                        <ng-template #cellContent>\n                          @switch (true) {\n                            @case (!!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]=\"\n                                    row | getColFormatted: col | async | valueOrX: '-'\n                                  \"></a>\n                              }\n                            }\n                            @case (!!col.customTemplate) {\n                              <ng-container\n                                *ngTemplateOutlet=\"\n                                  col.customTemplate;\n                                  context: { $implicit: { row, rowIndex } }\n                                \" />\n                            }\n                            @default {\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]=\"\n                                  row | getColFormatted: col | async | valueOrX: '-'\n                                \"></span>\n                            }\n                          }\n                          @if (col.expandable) {\n                            <button\n                              matTooltip=\"Exapnd\"\n                              [matTooltipShowDelay]=\"1000\"\n                              mat-icon-button\n                              (click)=\"expandCell(row, col, expandModal)\"\n                              class=\"expandBtn\">\n                              <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n                            </button>\n                          }\n                        </ng-template>\n\n                        @if (col._onHoverFunction) {\n                          <span\n                            class=\"\"\n                            [nelDebug]=\"debug()\"\n                            [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n                            [nelDelay]=\"col._onHoverDelay\">\n                            <ng-container *ngTemplateOutlet=\"cellContent\" />\n                          </span>\n                        } @else {\n                          <ng-container *ngTemplateOutlet=\"cellContent\" />\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                    <!-- {{expandedElement()|json}} -->\n                    <div class=\"d-flex justify-content-end\">\n                      <app-btn\n                        [iconBtn]=\"true\"\n                        type=\"clear\"\n                        [customIcon]=\"\n                          expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n                        \"\n                        aria-label=\"expand row\"\n                        loggingValue=\"Expand Row Button {{ row | json }}\"\n                        (mclick)=\"\n                          expandedElement.set(expandedElement() === row ? null : row);\n                          $event?.stopPropagation()\n                        \" />\n                    </div>\n                  </td>\n                </ng-container>\n              }\n              <!--// -->\n              <!-- OPTIONS COLUMN -->\n              @if (hasRowOptions()) {\n                <ng-container matColumnDef=\"option\" stickyEnd>\n                  <th mat-header-cell *matHeaderCellDef disableClear></th>\n                  <td mat-cell *matCellDef=\"let row\">\n                    @if (rowOptionsMap()) {\n                      @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\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.t) {\n                            <button\n                              mat-menu-item\n                              class=\"{{ option.itemClass }}\"\n                              (click)=\"option.action?.(row)\">\n                              @if (option.iconClass) {\n                                <i class=\"{{ option.iconClass }}\"></i>\n                              }\n                              {{ option.t | appTranslate | async }}\n                            </button>\n                          }\n                        </mat-menu>\n                      }\n                    } @else {\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.t) {\n                          <button\n                            mat-menu-item\n                            class=\"{{ option.itemClass }}\"\n                            (click)=\"option.action?.(row)\">\n                            @if (option.iconClass) {\n                              <i class=\"{{ option.iconClass }}\"></i>\n                            }\n                            {{ option.t | appTranslate | async }}\n                          </button>\n                        }\n                      </mat-menu>\n                    }\n                  </td>\n                </ng-container>\n              }\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\n                      mat-cell\n                      *matCellDef=\"let row\"\n                      [attr.colspan]=\"dcols?.length || 1\"\n                      [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n                      <div\n                        class=\"example-element-detail\"\n                        [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            expandedRowTemplate();\n                            context: { $implicit: { row } }\n                          \" />\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]=\"{\n                    pointer: showRowPointer(),\n                    disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n                  }\"\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\n                    mat-row\n                    *matRowDef=\"let row; columns: ['expandedDetail']\"\n                    class=\"expanded-detail-row\"\n                    [style.height.px]=\"0\"></tr>\n                }\n              }\n            </table>\n          </div>\n          <mat-paginator\n            [length]=\"resultsLength()\"\n            [pageSizeOptions]=\"computedPageSizeOptions()\"\n            [pageSize]=\"pageSize()\"\n            showFirstLastButtons />\n        </div>\n      </loader>\n    </div>\n  </div>\n  @if (!allowSearch()) {\n    <div class=\"not-allowed-search\">Please enter a search query</div>\n  }\n</div>\n<modal-comp\n  [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n  [header]=\"selectedCellForExpansion()?.column?.t\"\n  [showFooter]=\"false\"\n  (modalClose)=\"closeExpandedCell()\"\n  #expandModal>\n  <ng-template modalBody>\n    @if (selectedCellForExpansion(); as _selected) {\n      <div\n        class=\"\"\n        [innerHTML]=\"\n          _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n        \"></div>\n    }\n  </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}: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: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "component", type: ExportTableComponent, selector: "app-export-table", inputs: ["data", "displayedColumns", "searchFunc", "searchQuery", "label", "debug", "disabled"] }, { kind: "component", type: FieldsToDisplayComponent, selector: "fields-to-display", inputs: ["query1", "query2", "fields", "currentColumns"], outputs: ["query1Change", "query2Change", "fieldsChanged"] }, { 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: 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: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { 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: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$5.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: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MouseEnterListenerDirective, selector: "[nelMouseEntered]", inputs: ["nelMouseEntered"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.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: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -15657,7 +15658,7 @@ class TableInputRowComponent extends FormGeneratorComponent {
             const form = this.form();
             if (this.isShow())
                 form.disable();
-        }, { allowSignalWrites: true });
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableInputRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", 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 }, hideDelete: { classPropertyName: "hideDelete", publicName: "hideDelete", isSignal: true, isRequired: false, transformFunction: null }, borderedInput: { classPropertyName: "borderedInput", publicName: "borderedInput", 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._id) {\n  <td\n    class=\"{{ scheme.cls }} \"\n    [ngClass]=\"{ stickyColumn: scheme.sticky }\"\n    [style.left.px]=\"scheme.sticky ? tdEl.offsetLeft : null\"\n    #tdEl>\n    @if (scheme.type == 'button') {\n      <div class=\"d-flex\">\n        <app-btn\n          [text]=\"scheme.label\"\n          [type]=\"\n            (form()\n            | hasFormValue\n              : (childrenFormSchemaMap()[scheme.field].formSchemaStr | toAny)\n              : formValue())\n              ? 'primary'\n              : 'secondary'\n          \"\n          onFormInvalid=\"warn\"\n          [form]=\"form()\"\n          [icon]=\"scheme.icon\"\n          [formSchema]=\"childrenFormSchemaMap()[scheme.field].formSchema\"\n          [matTooltip]=\"\n            formValue() | formValue: childrenFormSchemaMap()[scheme.field].formSchema | toAny\n          \"\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    } @else if (scheme.type == 'template') {\n      <ng-container *ngTemplateOutlet=\"scheme.templateRef; context: { $implicit: { scheme,form:form() } }\" />\n    } @else if (scheme.field) {\n      @switch (true) {\n        @case (scheme.type == 'tel') {\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            [clearOnDisable]=\"scheme.clearOnDisable\"\n            [showValidationIcon]=\"scheme.showValidationIcon\"\n            [countryCode3]=\"scheme.countryCode3\"\n            [showValidationMsg]=\"scheme.showValidationMsg == null ? true : scheme.showValidationMsg\"\n            [disabled]=\"\n              scheme.disabled ||\n              (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n            \"\n            #inputTag />\n        }\n        @case (scheme.type == 'autocomplete') {\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]=\"scheme.showValidationMsg == null ? true : scheme.showValidationMsg\"\n            (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n            [name]=\"scheme.field | toAny\"\n            [clearOnDisable]=\"scheme.clearOnDisable\"\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]=\"\n              scheme.disabled ||\n              (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n            \"\n            #inputTag />\n        }\n\n        @default {\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]=\"scheme.showValidationMsg == null ? true : scheme.showValidationMsg\"\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]=\"\n              scheme.disabled ||\n              (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n            \" />\n        }\n      }\n    }\n  </td>\n}\n@if (!isShow()) {\n  @if (!hideDelete()) {\n    <td class=\"w-1\">\n      <app-btn\n        group=\"delete\"\n        [iconBtn]=\"true\"\n        (mclick)=\"onDeleteRowFunc.emit({ btn: deleteBtn })\"\n        #deleteBtn />\n    </td>\n  }\n  @if (!hideAdd()) {\n    <td class=\"w-1\">\n      <app-btn [iconBtn]=\"true\" group=\"add\" (mclick)=\"onAddRowFunc.emit({ btn: addBtn })\" #addBtn />\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 />\n    </td>\n  }\n}\n", styles: [":host{position:relative}\n"], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { 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", "formSchemaNoForm", "isShow"], outputs: ["onSubmit", "mchange", "saved", "formChange"] }, { 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", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["mSelectedOptionLabel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.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: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
@@ -16475,7 +16476,7 @@ class ToggleInputFormComponent {
                 this.hasHandledDefaultToggle.set(true);
                 this.toggleAll({ checked: true });
             }
-        }, { allowSignalWrites: true });
+        });
         this.columnLengths = computed(() => [
             { label: `List`, value: 1 },
             { label: `Dual`, value: 2 },
@@ -16820,7 +16821,7 @@ class InputTableComponent {
         this.downloadCSV([this.templateObj], 'template ' + this.label);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: InputTableComponent, deps: [{ token: UtilityService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", 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", "width", "ratioHW"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { 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: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["mSelectedOptionLabel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", 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", "width", "useStaticLoader", "ratioHW"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { 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: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["mSelectedOptionLabel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: InputTableComponent, decorators: [{
             type: Component,
@@ -18733,7 +18734,7 @@ class FindItemComponent extends BaseFormGenerator {
         this._loading.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: FindItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: FindItemComponent, isStandalone: true, selector: "app-find-item,find-item", inputs: { autoFormatSchema: { classPropertyName: "autoFormatSchema", publicName: "autoFormatSchema", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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 }, customTableCellTemplates: { classPropertyName: "customTableCellTemplates", publicName: "customTableCellTemplates", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowOptionsMap: { classPropertyName: "rowOptionsMap", publicName: "rowOptionsMap", 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 }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", 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 }, initialQuery: { classPropertyName: "initialQuery", publicName: "initialQuery", 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: { initialQuery: "initialQueryChange", _rowClick: "rowClick", clickedCreate: "clickedCreate" }, viewQueries: [{ propertyName: "tableHTTPSREF", first: true, predicate: (TableHttpsComponent), descendants: true, isSignal: true }, { propertyName: "tablePlainRef", first: true, predicate: (TablePlainComponent), descendants: true, isSignal: true }, { propertyName: "tableHTTPSREFSignal", first: true, predicate: TableHttpsComponent, descendants: true, isSignal: true }, { propertyName: "tablePlainRefSignal", first: true, predicate: TablePlainComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"_loading()\">\n  @if (!hideForm() && searchForm()) {\n    <div class=\"row align-items-center\">\n      @for (scheme of computedFormSchema(); track scheme.field) {\n        <form class=\"{{ gridClass() }} \" (ngSubmit)=\"fieldAction(scheme)\">\n          <div class=\"form-cell\" [ngClass]=\"{ showValidationMsg: showValidationMsg() }\">\n            <ng-template #actionCell let-formField>\n              <app-btn\n                [icon]=\"scheme.icon || 'show'\"\n                [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n                actionType=\"submit\"\n                [disabled]=\"!formField?.validSignal()\" />\n            </ng-template>\n\n            @switch (scheme.type) {\n              @case ('template') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    customTemplates()[scheme.field];\n                    context: { $implicit: { scheme, form: scheme.form } }\n                  \" />\n              }\n              @case ('tel') {\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                  [showValidationMsg]=\"showValidationMsg()\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue() : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n              @case ('autocomplete') {\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                  [showValidationMsg]=\"showValidationMsg()\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              } \n              @default {\n                <app-input-basic\n                  #inputTag\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]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n                  [showValidationIcon]=\"inputTag.hasValue() && !!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                  [showValidationMsg]=\"showValidationMsg()\"\n                  [max]=\"scheme.max\"\n                  [min]=\"scheme.min\"\n                  [placeholder]=\"scheme.placeholder\"\n                  [label]=\"scheme.label\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \" />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n            }\n          </div>\n        </form>\n      }\n      <div class=\"col-md justify-content-end align-items-center 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        }\n        @if (isCompact()) {\n          <app-btn\n            [showHelpIcon]=\"false\"\n            mclass=\"ms-1\"\n            [excludeLogging]=\"true\"\n            help=\"Search Fields\"\n            customIcon=\"fa fa-ellipsis-v\"\n            (mclick)=\"extraFieldsModal.open(); tempSelectedCompactedFields.set([])\" />\n          <modal-comp #extraFieldsModal header=\"Additional Search Fields\" width=\"800px\">\n            <ng-template modalBody>\n              <toggle-input-form\n                [valueField]=\"'field' | toAny\"\n                labelField=\"label\"\n                [gridNo]=\"3\"\n                [checkedChecker]=\"asfCheckedChecker()\"\n                [list]=\"compactedFields()\"\n                (selected)=\"tempSelectedCompactedFields.set($event)\" />\n            </ng-template>\n            <ng-template modalFooter>\n              <app-btn\n                icon=\"save\"\n                (mclick)=\"extraFieldsModal.close(); selectedCompactedFields()\"\n                text=\"Save\" />\n            </ng-template>\n          </modal-comp>\n        }\n        @if (createButton()) {\n          <span class=\"mx-1\"></span>\n          @if (createBtnRoute()) {\n            <app-btn\n              type=\"outline\"\n              text=\"Create\"\n              icon=\"add\"\n              (mclick)=\"clickedCreate.emit()\"\n              routerLink=\"{{ createBtnRoute() }}\" />\n          } @else {\n            <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <ng-content select=\"[tablePanel]\"></ng-content>\n  <!-- {{searchForm()?.getRawValue()|json}}\n  <hr>\n  {{standaloneForm()?.getRawValue()|json}} -->\n  @if (hasColumns()) {\n    <div class=\"mt-3\" [hidden]=\"hideTable()\">\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            [centerCells]=\"centerCells()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [isExpandable]=\"isExpandable()\"\n            [customTemplates]=\"customTableCellTemplates()\"\n            [label]=\"label()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [(queryData)]=\"initialQuery\"\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            [customTemplates]=\"customTableCellTemplates()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [label]=\"label()\"\n            noItemTxt=\"No results found\"\n            (rowClick)=\"rowClick($event)\"\n            [orderField]=\"orderField()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [orderDirection]=\"orderDirection()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [data]=\"data()\" />\n        }\n      </ng-container>\n    </div>\n  }\n</loader>\n", styles: [":host .form-cell{display:flex;align-items:end;gap:8px}:host .form-cell.showValidationMsg{align-items:center}:host .form-cell>*:first-child{width:100%}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "ratioHW"] }, { 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: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["mSelectedOptionLabel"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "directive", type: ModalFooterDirective, selector: "[modalFooter]" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleInputFormComponent, selector: "toggle-input-form", inputs: ["addToFormFunc", "defaultToggleAll", "readOnly", "hideSearchMenu", "hideGridMenu", "hideToggle", "deleteFromFormFunc", "gridNo", "labelField", "labelSeparator", "searchQuery", "showToggleAll", "valueField", "checkedChecker", "list"], outputs: ["gridNoChange", "searchQueryChange", "selected"] }, { kind: "component", type: TableHttpsComponent, selector: "table-https", inputs: ["observableFunc", "pageNumber", "queryData", "searchIfNoQuery", "showRefreshBtn"], outputs: ["queryDataChange", "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: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: FindItemComponent, isStandalone: true, selector: "app-find-item,find-item", inputs: { autoFormatSchema: { classPropertyName: "autoFormatSchema", publicName: "autoFormatSchema", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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 }, customTableCellTemplates: { classPropertyName: "customTableCellTemplates", publicName: "customTableCellTemplates", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowOptionsMap: { classPropertyName: "rowOptionsMap", publicName: "rowOptionsMap", 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 }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", 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 }, initialQuery: { classPropertyName: "initialQuery", publicName: "initialQuery", 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: { initialQuery: "initialQueryChange", _rowClick: "rowClick", clickedCreate: "clickedCreate" }, viewQueries: [{ propertyName: "tableHTTPSREF", first: true, predicate: (TableHttpsComponent), descendants: true, isSignal: true }, { propertyName: "tablePlainRef", first: true, predicate: (TablePlainComponent), descendants: true, isSignal: true }, { propertyName: "tableHTTPSREFSignal", first: true, predicate: TableHttpsComponent, descendants: true, isSignal: true }, { propertyName: "tablePlainRefSignal", first: true, predicate: TablePlainComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"_loading()\">\n  @if (!hideForm() && searchForm()) {\n    <div class=\"row align-items-center\">\n      @for (scheme of computedFormSchema(); track scheme.field) {\n        <form class=\"{{ gridClass() }} \" (ngSubmit)=\"fieldAction(scheme)\">\n          <div class=\"form-cell\" [ngClass]=\"{ showValidationMsg: showValidationMsg() }\">\n            <ng-template #actionCell let-formField>\n              <app-btn\n                [icon]=\"scheme.icon || 'show'\"\n                [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n                actionType=\"submit\"\n                [disabled]=\"!formField?.validSignal()\" />\n            </ng-template>\n\n            @switch (scheme.type) {\n              @case ('template') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    customTemplates()[scheme.field];\n                    context: { $implicit: { scheme, form: scheme.form } }\n                  \" />\n              }\n              @case ('tel') {\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                  [showValidationMsg]=\"showValidationMsg()\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue() : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n              @case ('autocomplete') {\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                  [showValidationMsg]=\"showValidationMsg()\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              } \n              @default {\n                <app-input-basic\n                  #inputTag\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]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n                  [showValidationIcon]=\"inputTag.hasValue() && !!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                  [showValidationMsg]=\"showValidationMsg()\"\n                  [max]=\"scheme.max\"\n                  [min]=\"scheme.min\"\n                  [placeholder]=\"scheme.placeholder\"\n                  [label]=\"scheme.label\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \" />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n            }\n          </div>\n        </form>\n      }\n      <div class=\"col-md justify-content-end align-items-center 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            (mclick)=\"search()\"\n            [excludeLogging]=\"true\"\n            [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n        }\n        @if (isCompact()) {\n          <app-btn\n            [showHelpIcon]=\"false\"\n            mclass=\"ms-1\"\n            [excludeLogging]=\"true\"\n            help=\"Search Fields\"\n            customIcon=\"fa fa-ellipsis-v\"\n            (mclick)=\"extraFieldsModal.open(); tempSelectedCompactedFields.set([])\" />\n          <modal-comp #extraFieldsModal header=\"Additional Search Fields\" width=\"800px\">\n            <ng-template modalBody>\n              <toggle-input-form\n                [valueField]=\"'field' | toAny\"\n                labelField=\"label\"\n                [gridNo]=\"3\"\n                [checkedChecker]=\"asfCheckedChecker()\"\n                [list]=\"compactedFields()\"\n                (selected)=\"tempSelectedCompactedFields.set($event)\" />\n            </ng-template>\n            <ng-template modalFooter>\n              <app-btn\n                icon=\"save\"\n                (mclick)=\"extraFieldsModal.close(); selectedCompactedFields()\"\n                text=\"Save\" />\n            </ng-template>\n          </modal-comp>\n        }\n        @if (createButton()) {\n          <span class=\"mx-1\"></span>\n          @if (createBtnRoute()) {\n            <app-btn\n              type=\"outline\"\n              text=\"Create\"\n              icon=\"add\"\n              (mclick)=\"clickedCreate.emit()\"\n              routerLink=\"{{ createBtnRoute() }}\" />\n          } @else {\n            <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <ng-content select=\"[tablePanel]\"></ng-content>\n  <!-- {{searchForm()?.getRawValue()|json}}\n  <hr>\n  {{standaloneForm()?.getRawValue()|json}} -->\n  @if (hasColumns()) {\n    <div class=\"mt-3\" [hidden]=\"hideTable()\">\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            [centerCells]=\"centerCells()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [isExpandable]=\"isExpandable()\"\n            [customTemplates]=\"customTableCellTemplates()\"\n            [label]=\"label()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [(queryData)]=\"initialQuery\"\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            [customTemplates]=\"customTableCellTemplates()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [label]=\"label()\"\n            noItemTxt=\"No results found\"\n            (rowClick)=\"rowClick($event)\"\n            [orderField]=\"orderField()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [orderDirection]=\"orderDirection()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [data]=\"data()\" />\n        }\n      </ng-container>\n    </div>\n  }\n</loader>\n", styles: [":host .form-cell{display:flex;align-items:end;gap:8px}:host .form-cell.showValidationMsg{align-items:center}:host .form-cell>*:first-child{width:100%}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { 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: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["mSelectedOptionLabel"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "directive", type: ModalFooterDirective, selector: "[modalFooter]" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleInputFormComponent, selector: "toggle-input-form", inputs: ["addToFormFunc", "defaultToggleAll", "readOnly", "hideSearchMenu", "hideGridMenu", "hideToggle", "deleteFromFormFunc", "gridNo", "labelField", "labelSeparator", "searchQuery", "showToggleAll", "valueField", "checkedChecker", "list"], outputs: ["gridNoChange", "searchQueryChange", "selected"] }, { kind: "component", type: TableHttpsComponent, selector: "table-https", inputs: ["observableFunc", "pageNumber", "queryData", "searchIfNoQuery", "showRefreshBtn"], outputs: ["queryDataChange", "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: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: FindItemComponent, decorators: [{
             type: Component,
@@ -18760,7 +18761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         ReactiveFormsModule,
                         FunctionCaller2,
                         ToAnyPipe,
-                    ], template: "<loader [loading]=\"_loading()\">\n  @if (!hideForm() && searchForm()) {\n    <div class=\"row align-items-center\">\n      @for (scheme of computedFormSchema(); track scheme.field) {\n        <form class=\"{{ gridClass() }} \" (ngSubmit)=\"fieldAction(scheme)\">\n          <div class=\"form-cell\" [ngClass]=\"{ showValidationMsg: showValidationMsg() }\">\n            <ng-template #actionCell let-formField>\n              <app-btn\n                [icon]=\"scheme.icon || 'show'\"\n                [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n                actionType=\"submit\"\n                [disabled]=\"!formField?.validSignal()\" />\n            </ng-template>\n\n            @switch (scheme.type) {\n              @case ('template') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    customTemplates()[scheme.field];\n                    context: { $implicit: { scheme, form: scheme.form } }\n                  \" />\n              }\n              @case ('tel') {\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                  [showValidationMsg]=\"showValidationMsg()\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue() : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n              @case ('autocomplete') {\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                  [showValidationMsg]=\"showValidationMsg()\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              } \n              @default {\n                <app-input-basic\n                  #inputTag\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]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n                  [showValidationIcon]=\"inputTag.hasValue() && !!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                  [showValidationMsg]=\"showValidationMsg()\"\n                  [max]=\"scheme.max\"\n                  [min]=\"scheme.min\"\n                  [placeholder]=\"scheme.placeholder\"\n                  [label]=\"scheme.label\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \" />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n            }\n          </div>\n        </form>\n      }\n      <div class=\"col-md justify-content-end align-items-center 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        }\n        @if (isCompact()) {\n          <app-btn\n            [showHelpIcon]=\"false\"\n            mclass=\"ms-1\"\n            [excludeLogging]=\"true\"\n            help=\"Search Fields\"\n            customIcon=\"fa fa-ellipsis-v\"\n            (mclick)=\"extraFieldsModal.open(); tempSelectedCompactedFields.set([])\" />\n          <modal-comp #extraFieldsModal header=\"Additional Search Fields\" width=\"800px\">\n            <ng-template modalBody>\n              <toggle-input-form\n                [valueField]=\"'field' | toAny\"\n                labelField=\"label\"\n                [gridNo]=\"3\"\n                [checkedChecker]=\"asfCheckedChecker()\"\n                [list]=\"compactedFields()\"\n                (selected)=\"tempSelectedCompactedFields.set($event)\" />\n            </ng-template>\n            <ng-template modalFooter>\n              <app-btn\n                icon=\"save\"\n                (mclick)=\"extraFieldsModal.close(); selectedCompactedFields()\"\n                text=\"Save\" />\n            </ng-template>\n          </modal-comp>\n        }\n        @if (createButton()) {\n          <span class=\"mx-1\"></span>\n          @if (createBtnRoute()) {\n            <app-btn\n              type=\"outline\"\n              text=\"Create\"\n              icon=\"add\"\n              (mclick)=\"clickedCreate.emit()\"\n              routerLink=\"{{ createBtnRoute() }}\" />\n          } @else {\n            <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <ng-content select=\"[tablePanel]\"></ng-content>\n  <!-- {{searchForm()?.getRawValue()|json}}\n  <hr>\n  {{standaloneForm()?.getRawValue()|json}} -->\n  @if (hasColumns()) {\n    <div class=\"mt-3\" [hidden]=\"hideTable()\">\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            [centerCells]=\"centerCells()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [isExpandable]=\"isExpandable()\"\n            [customTemplates]=\"customTableCellTemplates()\"\n            [label]=\"label()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [(queryData)]=\"initialQuery\"\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            [customTemplates]=\"customTableCellTemplates()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [label]=\"label()\"\n            noItemTxt=\"No results found\"\n            (rowClick)=\"rowClick($event)\"\n            [orderField]=\"orderField()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [orderDirection]=\"orderDirection()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [data]=\"data()\" />\n        }\n      </ng-container>\n    </div>\n  }\n</loader>\n", styles: [":host .form-cell{display:flex;align-items:end;gap:8px}:host .form-cell.showValidationMsg{align-items:center}:host .form-cell>*:first-child{width:100%}\n"] }]
+                    ], template: "<loader [loading]=\"_loading()\">\n  @if (!hideForm() && searchForm()) {\n    <div class=\"row align-items-center\">\n      @for (scheme of computedFormSchema(); track scheme.field) {\n        <form class=\"{{ gridClass() }} \" (ngSubmit)=\"fieldAction(scheme)\">\n          <div class=\"form-cell\" [ngClass]=\"{ showValidationMsg: showValidationMsg() }\">\n            <ng-template #actionCell let-formField>\n              <app-btn\n                [icon]=\"scheme.icon || 'show'\"\n                [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n                actionType=\"submit\"\n                [disabled]=\"!formField?.validSignal()\" />\n            </ng-template>\n\n            @switch (scheme.type) {\n              @case ('template') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    customTemplates()[scheme.field];\n                    context: { $implicit: { scheme, form: scheme.form } }\n                  \" />\n              }\n              @case ('tel') {\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                  [showValidationMsg]=\"showValidationMsg()\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue() : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n              @case ('autocomplete') {\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                  [showValidationMsg]=\"showValidationMsg()\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \"\n                  #inputTag />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              } \n              @default {\n                <app-input-basic\n                  #inputTag\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]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n                  [showValidationIcon]=\"inputTag.hasValue() && !!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                  [showValidationMsg]=\"showValidationMsg()\"\n                  [max]=\"scheme.max\"\n                  [min]=\"scheme.min\"\n                  [placeholder]=\"scheme.placeholder\"\n                  [label]=\"scheme.label\"\n                  [disabled]=\"\n                    scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n                  \" />\n                @if (scheme.needsButton) {\n                  <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n                }\n              }\n            }\n          </div>\n        </form>\n      }\n      <div class=\"col-md justify-content-end align-items-center 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            (mclick)=\"search()\"\n            [excludeLogging]=\"true\"\n            [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n        }\n        @if (isCompact()) {\n          <app-btn\n            [showHelpIcon]=\"false\"\n            mclass=\"ms-1\"\n            [excludeLogging]=\"true\"\n            help=\"Search Fields\"\n            customIcon=\"fa fa-ellipsis-v\"\n            (mclick)=\"extraFieldsModal.open(); tempSelectedCompactedFields.set([])\" />\n          <modal-comp #extraFieldsModal header=\"Additional Search Fields\" width=\"800px\">\n            <ng-template modalBody>\n              <toggle-input-form\n                [valueField]=\"'field' | toAny\"\n                labelField=\"label\"\n                [gridNo]=\"3\"\n                [checkedChecker]=\"asfCheckedChecker()\"\n                [list]=\"compactedFields()\"\n                (selected)=\"tempSelectedCompactedFields.set($event)\" />\n            </ng-template>\n            <ng-template modalFooter>\n              <app-btn\n                icon=\"save\"\n                (mclick)=\"extraFieldsModal.close(); selectedCompactedFields()\"\n                text=\"Save\" />\n            </ng-template>\n          </modal-comp>\n        }\n        @if (createButton()) {\n          <span class=\"mx-1\"></span>\n          @if (createBtnRoute()) {\n            <app-btn\n              type=\"outline\"\n              text=\"Create\"\n              icon=\"add\"\n              (mclick)=\"clickedCreate.emit()\"\n              routerLink=\"{{ createBtnRoute() }}\" />\n          } @else {\n            <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <ng-content select=\"[tablePanel]\"></ng-content>\n  <!-- {{searchForm()?.getRawValue()|json}}\n  <hr>\n  {{standaloneForm()?.getRawValue()|json}} -->\n  @if (hasColumns()) {\n    <div class=\"mt-3\" [hidden]=\"hideTable()\">\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            [centerCells]=\"centerCells()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [isExpandable]=\"isExpandable()\"\n            [customTemplates]=\"customTableCellTemplates()\"\n            [label]=\"label()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [(queryData)]=\"initialQuery\"\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            [customTemplates]=\"customTableCellTemplates()\"\n            [expandedRowTemplate]=\"expandedRowTemplate()\"\n            [label]=\"label()\"\n            noItemTxt=\"No results found\"\n            (rowClick)=\"rowClick($event)\"\n            [orderField]=\"orderField()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [rowOptionsMap]=\"rowOptionsMap()\"\n            [showAdditionalColumns]=\"showAdditionalColumns()\"\n            [orderDirection]=\"orderDirection()\"\n            [displayedColumns]=\"displayedColumns()\"\n            [data]=\"data()\" />\n        }\n      </ng-container>\n    </div>\n  }\n</loader>\n", styles: [":host .form-cell{display:flex;align-items:end;gap:8px}:host .form-cell.showValidationMsg{align-items:center}:host .form-cell>*:first-child{width:100%}\n"] }]
         }], propDecorators: { _formSchema: [{
                 type: Input,
                 args: ['formSchema']
@@ -18804,7 +18805,7 @@ class ResetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ResetComponent, deps: [{ token: ETSServiceWorkerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: ResetComponent, isStandalone: true, selector: "app-reset", ngImport: i0, template: "<loader [loading]=\"loading\" text=\"Resetting\">\n\n  <div class=\"center vh-70\">\n      <div class=\"gy-2 justify-content-center row row-cols-md-6 w-100\">\n        <app-btn text=\"Get Updates\" customIcon=\"fas fa-download\" (mclick)=\"getUpdates()\"></app-btn>\n        <!-- <app-btn text=\"Clear Cache\" customIcon=\"fas fa-refresh\" (mclick)=\"clearCache()\"></app-btn> -->\n      </div>\n  </div>\n</loader>\n", styles: [""], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "ratioHW"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: ResetComponent, isStandalone: true, selector: "app-reset", ngImport: i0, template: "<loader [loading]=\"loading\" text=\"Resetting\">\n\n  <div class=\"center vh-70\">\n      <div class=\"gy-2 justify-content-center row row-cols-md-6 w-100\">\n        <app-btn text=\"Get Updates\" customIcon=\"fas fa-download\" (mclick)=\"getUpdates()\"></app-btn>\n        <!-- <app-btn text=\"Clear Cache\" customIcon=\"fas fa-refresh\" (mclick)=\"clearCache()\"></app-btn> -->\n      </div>\n  </div>\n</loader>\n", styles: [""], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ResetComponent, decorators: [{
             type: Component,