ets-fe-ng-sdk 19.0.68 → 19.0.70

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

@@ -86,7 +86,7 @@ import * as i1$6 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i1$7 from '@ng-idle/core';
 import { DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';
-import { ETSTranslationService } from '@evolutics/translation';
+import { ETSTranslationService, TranslatePipe } from '@evolutics/translation';
 import { Store } from '@ngrx/store';
 import { Actions, ofType } from '@ngrx/effects';
 import * as i1$8 from '@angular/service-worker';
@@ -13162,9 +13162,13 @@ class FormErrorComponent {
         this.cErrors = computed(() => this.errors()?.filter((x) => x.formControl.invalid || x.formControl.pending));
         // protected form?: Form;
         // protected forms?: Form[];
+        this.customResult = input();
+        this.inline = input();
         this.lgGridNo = input(2);
         this.xxlGridNo = input(3);
         this.hasError = computed(() => this.cErrors()?.length > 0);
+        this.resultTemplateRef = viewChild('resultTemplate');
+        this.errContRef = viewChild('errCont');
         effect(() => {
             console.log('errored forms', this.errors());
             console.log('cErrored forms', this.cErrors());
@@ -13203,14 +13207,16 @@ class FormErrorComponent {
         // debugger;
         // console.log('message', this.message);
     }
-    toggleErrors(errCont) {
+    toggleErrors(errCont = this.errContRef()?.nativeElement) {
+        if (!errCont)
+            return;
         errCont.hidden = !errCont.hidden;
         setTimeout(() => {
             errCont.scrollIntoView();
         }, 500);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: FormErrorComponent, deps: [{ token: i0.ElementRef }, { token: UtilityService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: FormErrorComponent, isStandalone: true, selector: "form-error", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, lgGridNo: { classPropertyName: "lgGridNo", publicName: "lgGridNo", isSignal: true, isRequired: false, transformFunction: null }, xxlGridNo: { classPropertyName: "xxlGridNo", publicName: "xxlGridNo", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (hasError()) {\n  <div class=\"d-flex justify-content-end mt-2\">\n    <app-btn\n      text=\"Form Errors\"\n      icon=\"info\"\n      type=\"clear\"\n      mclass=\"btn-outline-warning\"\n      (mclick)=\"toggleErrors(errCont)\" />\n  </div>\n  <div class=\"border form-error-container p-3 mt-2\" #errCont [hidden]=\"true\">\n    <div class=\"row row-cols-lg-{{ lgGridNo() }} row-cols-xxl-{{ xxlGridNo() }}\">\n      @if (false) {\n        <div class=\"col-lg-12 d-flex\">\n          <div>\n            <div class=\"pe-3\">{{ 'Form errors' | appTranslate | async }}</div>\n            <!-- <hr class=\"my-0\"> -->\n          </div>\n        </div>\n      }\n      @for (item of cErrors(); track item.label + item.parent) {\n        @if (item.formControl) {\n          <div class=\"error-item-case\">\n            @if (item.parent) {\n              <app-info-icon text=\"Group: {{ item.parent }}\" />\n              <!-- <div class=\"\" [matTooltip]=\"item.parent\">Parent</div> -->\n            }\n            <app-validation-message\n              [label]=\"item.label | titlecase\"\n              [ignoreDirtiness]=\"true\"\n              [control]=\"item.formControl\" />\n          </div>\n        }\n      }\n    </div>\n  </div>\n}\n", styles: [":host ::ng-deep .errormssg{color:#870000}:host .form-error-container{border-radius:10px}:host app-info-icon{margin-right:5px}:host .error-item-case{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { 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: MatTooltipModule }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: FormErrorComponent, isStandalone: true, selector: "form-error", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, customResult: { classPropertyName: "customResult", publicName: "customResult", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, lgGridNo: { classPropertyName: "lgGridNo", publicName: "lgGridNo", isSignal: true, isRequired: false, transformFunction: null }, xxlGridNo: { classPropertyName: "xxlGridNo", publicName: "xxlGridNo", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "resultTemplateRef", first: true, predicate: ["resultTemplate"], descendants: true, isSignal: true }, { propertyName: "errContRef", first: true, predicate: ["errCont"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasError()) {\n  <div class=\"d-flex justify-content-end\" [class.mt-2]=\"!inline()\">\n    <app-btn\n      text=\"Form Errors\"\n      icon=\"info\"\n      type=\"clear\"\n      mclass=\"btn-outline-warning\"\n      (mclick)=\"toggleErrors()\" />\n  </div>\n}\n@if (!customResult()) {\n  <ng-container *ngTemplateOutlet=\"resultTemplate\" />\n}\n<ng-template #resultTemplate>\n  @if (hasError()) { \n    <div class=\"border form-error-container p-3 mt-2\" #errCont [hidden]=\"true\">\n      <div class=\"row row-cols-lg-{{ lgGridNo() }} row-cols-xxl-{{ xxlGridNo() }}\">\n        @if (false) {\n          <div class=\"col-lg-12 d-flex\">\n            <div>\n              <div class=\"pe-3\">{{ 'Form errors' | appTranslate | async }}</div>\n              <!-- <hr class=\"my-0\"> -->\n            </div>\n          </div>\n        }\n        @for (item of cErrors(); track item.label + item.parent) {\n          @if (item.formControl) {\n            <div class=\"error-item-case\">\n              @if (item.parent) {\n                <app-info-icon text=\"Group: {{ item.parent }}\" />\n                <!-- <div class=\"\" [matTooltip]=\"item.parent\">Parent</div> -->\n              }\n              <app-validation-message\n                [label]=\"item.label | titlecase\"\n                [ignoreDirtiness]=\"true\"\n                [control]=\"item.formControl\" />\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .errormssg{color:#870000}:host .form-error-container{border-radius:10px}:host app-info-icon{margin-right:5px}:host .error-item-case{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { 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: MatTooltipModule }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: FormErrorComponent, decorators: [{
             type: Component,
@@ -13221,7 +13227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                         BtnComponent,
                         MatTooltipModule,
                         InfoIconComponent,
-                    ], template: "@if (hasError()) {\n  <div class=\"d-flex justify-content-end mt-2\">\n    <app-btn\n      text=\"Form Errors\"\n      icon=\"info\"\n      type=\"clear\"\n      mclass=\"btn-outline-warning\"\n      (mclick)=\"toggleErrors(errCont)\" />\n  </div>\n  <div class=\"border form-error-container p-3 mt-2\" #errCont [hidden]=\"true\">\n    <div class=\"row row-cols-lg-{{ lgGridNo() }} row-cols-xxl-{{ xxlGridNo() }}\">\n      @if (false) {\n        <div class=\"col-lg-12 d-flex\">\n          <div>\n            <div class=\"pe-3\">{{ 'Form errors' | appTranslate | async }}</div>\n            <!-- <hr class=\"my-0\"> -->\n          </div>\n        </div>\n      }\n      @for (item of cErrors(); track item.label + item.parent) {\n        @if (item.formControl) {\n          <div class=\"error-item-case\">\n            @if (item.parent) {\n              <app-info-icon text=\"Group: {{ item.parent }}\" />\n              <!-- <div class=\"\" [matTooltip]=\"item.parent\">Parent</div> -->\n            }\n            <app-validation-message\n              [label]=\"item.label | titlecase\"\n              [ignoreDirtiness]=\"true\"\n              [control]=\"item.formControl\" />\n          </div>\n        }\n      }\n    </div>\n  </div>\n}\n", styles: [":host ::ng-deep .errormssg{color:#870000}:host .form-error-container{border-radius:10px}:host app-info-icon{margin-right:5px}:host .error-item-case{display:flex;align-items:center}\n"] }]
+                    ], template: "@if (hasError()) {\n  <div class=\"d-flex justify-content-end\" [class.mt-2]=\"!inline()\">\n    <app-btn\n      text=\"Form Errors\"\n      icon=\"info\"\n      type=\"clear\"\n      mclass=\"btn-outline-warning\"\n      (mclick)=\"toggleErrors()\" />\n  </div>\n}\n@if (!customResult()) {\n  <ng-container *ngTemplateOutlet=\"resultTemplate\" />\n}\n<ng-template #resultTemplate>\n  @if (hasError()) { \n    <div class=\"border form-error-container p-3 mt-2\" #errCont [hidden]=\"true\">\n      <div class=\"row row-cols-lg-{{ lgGridNo() }} row-cols-xxl-{{ xxlGridNo() }}\">\n        @if (false) {\n          <div class=\"col-lg-12 d-flex\">\n            <div>\n              <div class=\"pe-3\">{{ 'Form errors' | appTranslate | async }}</div>\n              <!-- <hr class=\"my-0\"> -->\n            </div>\n          </div>\n        }\n        @for (item of cErrors(); track item.label + item.parent) {\n          @if (item.formControl) {\n            <div class=\"error-item-case\">\n              @if (item.parent) {\n                <app-info-icon text=\"Group: {{ item.parent }}\" />\n                <!-- <div class=\"\" [matTooltip]=\"item.parent\">Parent</div> -->\n              }\n              <app-validation-message\n                [label]=\"item.label | titlecase\"\n                [ignoreDirtiness]=\"true\"\n                [control]=\"item.formControl\" />\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .errormssg{color:#870000}:host .form-error-container{border-radius:10px}:host app-info-icon{margin-right:5px}:host .error-item-case{display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: UtilityService }, { type: i0.DestroyRef }], propDecorators: { form: [{
                 type: Input
             }] } });
@@ -15677,7 +15683,7 @@ class TableHttpsComponent extends TableBaseComponent {
         this.search();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TableHttpsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", 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 }, useStaticLoader: { classPropertyName: "useStaticLoader", publicName: "useStaticLoader", isSignal: true, isRequired: false, transformFunction: null }, searchPromptText: { classPropertyName: "searchPromptText", publicName: "searchPromptText", 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\n        [loading]=\"isLoadingResults()\"\n        [useStaticLoader]=\"useStaticLoader()\"\n        [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 + paginator.pageIndex * paginator.pageSize, 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\n                        mat-cell\n                        *matCellDef=\"let row; let rowIndex = index\"\n                        [matTooltip]=\"\n                          col.hintFormatter\n                            ? (col.hintFormatter | functionCaller1: row | async)\n                            : null\n                        \">\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\">{{ searchPromptText() | appTranslateNL | async }}</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", "baseConfig"], 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" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", 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 }, useStaticLoader: { classPropertyName: "useStaticLoader", publicName: "useStaticLoader", isSignal: true, isRequired: false, transformFunction: null }, searchPromptText: { classPropertyName: "searchPromptText", publicName: "searchPromptText", 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\n        [loading]=\"isLoadingResults()\"\n        [useStaticLoader]=\"useStaticLoader()\"\n        [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 + paginator.pageIndex * paginator.pageSize, 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\n                        mat-cell\n                        *matCellDef=\"let row; let rowIndex = index\"\n                        [matTooltip]=\"\n                          col.hintFormatter\n                            ? (col.hintFormatter | functionCaller1: row | async)\n                            : null\n                        \">\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                        @if (row == expandedElement()) {\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              expandedRowTemplate();\n                              context: { $implicit: { row } }\n                            \"></ng-container>\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\">{{ searchPromptText() | appTranslateNL | async }}</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", "baseConfig"], 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" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -15725,7 +15731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                         FunctionCaller,
                         FunctionCaller1,
                         SDKTranslateNoLoaderPipe
-                    ], 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\n        [loading]=\"isLoadingResults()\"\n        [useStaticLoader]=\"useStaticLoader()\"\n        [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 + paginator.pageIndex * paginator.pageSize, 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\n                        mat-cell\n                        *matCellDef=\"let row; let rowIndex = index\"\n                        [matTooltip]=\"\n                          col.hintFormatter\n                            ? (col.hintFormatter | functionCaller1: row | async)\n                            : null\n                        \">\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\">{{ searchPromptText() | appTranslateNL | async }}</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"] }]
+                    ], 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\n        [loading]=\"isLoadingResults()\"\n        [useStaticLoader]=\"useStaticLoader()\"\n        [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 + paginator.pageIndex * paginator.pageSize, 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\n                        mat-cell\n                        *matCellDef=\"let row; let rowIndex = index\"\n                        [matTooltip]=\"\n                          col.hintFormatter\n                            ? (col.hintFormatter | functionCaller1: row | async)\n                            : null\n                        \">\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                        @if (row == expandedElement()) {\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              expandedRowTemplate();\n                              context: { $implicit: { row } }\n                            \"></ng-container>\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\">{{ searchPromptText() | appTranslateNL | async }}</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"] }]
         }], propDecorators: { pageNumber: [{
                 type: Input
             }] } });
@@ -16217,7 +16223,7 @@ class TablePlainComponent extends TableBaseComponent {
         this.filterChange.emit(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TablePlainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: TablePlainComponent, isStandalone: true, selector: "table-plain", inputs: { customSelectClass: { classPropertyName: "customSelectClass", publicName: "customSelectClass", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, obsDataSource: { classPropertyName: "obsDataSource", publicName: "obsDataSource", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPager: { classPropertyName: "showPager", publicName: "showPager", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByField: { classPropertyName: "disableSelectionByField", publicName: "disableSelectionByField", isSignal: false, isRequired: false, transformFunction: null }, _data: { classPropertyName: "_data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, _filterFields: { classPropertyName: "_filterFields", publicName: "filterFields", isSignal: false, isRequired: false, transformFunction: null }, _filterFieldsMap: { classPropertyName: "_filterFieldsMap", publicName: "filterFieldsMap", isSignal: false, isRequired: false, transformFunction: null }, selectionPerPage: { classPropertyName: "selectionPerPage", publicName: "selectionPerPage", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { _view: "view", dataChanged: "dataChanged", filterChange: "filterChange", listMutated: "listMutated" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-plain\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  @if (filterFields()) {\n    <div class=\"d-flex\">\n      <app-btn\n        text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n        [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n        (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n    </div>\n    <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n      @for (scheme of filterFields(); track scheme.field) {\n        <div class=\"col-md-4 col-xxl-3\">\n          @switch (scheme.type) {\n            @case ('autocomplete') {\n              <div class=\"col\">\n                <app-autocomplete\n                  [form]=\"filterForm\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [name]=\"scheme.field | toAny\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                  #inputTag\n                  [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                  (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n                <app-validation-message [input]=\"inputTag\" />\n              </div>\n            }\n            @default {\n              <app-input-basic\n                #formField\n                [name]=\"scheme.field | toAny\"\n                [form]=\"filterForm\"\n                [stacked]=\"true\"\n                [type]=\"scheme.type\"\n                [valueField]=\"scheme.valueField\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"true\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n              <app-validation-message [input]=\"formField\" />\n            }\n          }\n        </div>\n      }\n      <div class=\"col-md justify-content-end d-flex\">\n        <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\" />\n      </div>\n    </div>\n  }\n\n  @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n    <div class=\" \">\n      <div class=\"row g-3 justify-content-between align-items-end\">\n        <div class=\"col-md\">\n          @if (startSectionTemplate()) {\n            <div class=\"{{ starterSectionClass() }}\">\n              <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n            </div>\n          }\n          @if (showFilter()) {\n            <form [formGroup]=\"filterForm\">\n              <div class=\"row justify-content-center align-items-end\">\n                <div class=\"col-md-auto\">\n                  <app-autocomplete\n                    label=\"Filter\"\n                    type=\"select\"\n                    [form]=\"filterForm\"\n                    name=\"field\"\n                    [stacked]=\"false\"\n                    [options]=\"filterOptions()\"\n                    valueField=\"code\"\n                    labelField=\"description\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-input-basic\n                    label=\"Value\"\n                    type=\"text\"\n                    [form]=\"filterForm\"\n                    name=\"value\"\n                    [stacked]=\"false\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\" />\n                </div>\n              </div>\n            </form>\n          }\n        </div>\n        @if (showExport() || showAdditionalColumns()) {\n          <div class=\"col-md-auto\">\n            <div class=\"row row-cols-auto g-3 justify-content-end\">\n              <span>\n                @if (showExport()) {\n                  <app-export-table\n                    [disabled]=\"!dataSource()?.data?.length\"\n                    [label]=\"label()\"\n                    [debug]=\"debug()\"\n                    [displayedColumns]=\"computedDisplayedColumns()\"\n                    [data]=\"dataSource()?.data\" />\n                }\n              </span>\n              @if (showAdditionalColumns()) {\n                <div class=\"d-flex\">\n                  <fields-to-display\n                    [fields]=\"allTableColumns()\"\n                    [currentColumns]=\"computedDisplayedColumns()\"\n                    (fieldsChanged)=\"fieldsChanged($event)\" />\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  <div\n    [ngClass]=\"{ border: distinct() }\"\n    class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n    <div class=\"table-responsive\">\n      <table\n        mat-table\n        [dataSource]=\"dataSource() || obsDataSource()\"\n        matSort\n        class=\"w-100 d-table table mb-0\"\n        [multiTemplateDataRows]=\"isExpandable()\"\n        #table\n        [ngClass]=\"{\n          smallerFonts: smallerFonts(),\n          nowrap: nowrap(),\n          centerCells: centerCells(),\n          curvy: curvy(),\n          'table-striped': striped(),\n        }\">\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            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                [class]=\"customSelectClass()\"\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [attr.aria-label]=\"checkboxLabel()\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n            }\n          </th>\n          <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                class=\"form-control control-bg-gray\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [attr.aria-label]=\"checkboxLabel(row)\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [aria-label]=\"checkboxLabel(row)\"\n                [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n            }\n          </td>\n        </ng-container>\n        <!-- Columns -->\n        @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n          <ng-template #thContent>\n            <app-info-icon [text]=\"col.hint\">\n              {{ col.t | appTranslate | async }}\n            </app-info-icon>\n          </ng-template>\n\n          @switch (col.type) {\n            <!-- CHECKBOX -->\n            @case ('textarea') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- <app-input-td-rf  [(model)]=\"col.\" [showLabel]=\"false\"  /> -->\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n            <!-- CHECKBOX -->\n            @case ('checkbox') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\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\n            <!-- Input -->\n            @case ('input') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-basic\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"text\"\n                    [disabled]=\"col.disabled\"\n                    [form]=\"row\"\n                    [name]=\"col.f\"\n                    [noFormat]=\"true\" />\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- PROGRESS BAR -->\n            @case ('progress') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"progress\">\n                    <div\n                      class=\"progress-bar progress-bar-striped bg-success\"\n                      role=\"progressbar\"\n                      [ngStyle]=\"{ width: row[col.f] }\">\n                      {{ row[col.f] }}\n                    </div>\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- COLOR -->\n            @case ('color') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Button -->\n            @case ('button') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n                  <app-btn\n                    [icon]=\"col.icon || col.btn?.icon\"\n                    [type]=\"col.btn?.type\"\n                    (mclick)=\"\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                    [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\n            <!-- Sub Table -->\n            @case ('table') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n                  <div class=\"inline-block\">\n                    <app-btn\n                      [icon]=\"col.icon\"\n                      [type]=\"col.btn?.type || 'dark'\"\n                      (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                      [group]=\"col.btn?.group\"\n                      [help]=\"col.subTable | tableToString: row | async\"\n                      [showHelpIcon]=\"false\"\n                      [text]=\"col.btn?.label\"\n                      [iconBtn]=\"true\"\n                      mclass=\"w-auto\" />\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- ACTION COLUMNS -->\n            @case ('btns') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\" stickyEnd>\n                <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n                  <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n                    @for (button of col.buttons; track button.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                          [iconBtn]=\"!button.label\"\n                          mclass=\"w-auto\"\n                          (mclick)=\"\n                            button.action(row, i + paginator.pageIndex * paginator.pageSize, btn)\n                          \"\n                          #btn />\n                      </div>\n                    }\n                  </div>\n                </td>\n              </ng-container>\n            }\n\n            <!-- EDITABLE -->\n            @case ('editable') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <a\n                    class=\"cell\"\n                    [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n                    [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n                    [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                  <i\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\n            <!-- DEFAULT -->\n            @default {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td\n                  mat-cell\n                  *matCellDef=\"let row; let rowIndex = index\"\n                  [matTooltip]=\"\n                    col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\n                  \">\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]=\"row | getColFormatted: col | async | valueOrX: '-'\"></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]=\"row | getColFormatted: col | async | valueOrX: '-'\"></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              <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                  (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        @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                    \"></ng-container>\n                </div>\n              </td>\n            </ng-container>\n          }\n          <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: dcols\"\n            [ngClass]=\"{\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    @if (showPager()) {\n      <mat-paginator\n        [length]=\"resultsLength()\"\n        [pageSizeOptions]=\"computedPageSizeOptions()\"\n        [pageSize]=\"pageSize()\"\n        showFirstLastButtons></mat-paginator>\n    }\n  </div>\n</div>\n\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: "pipe", type: AsyncPipe, name: "async" }, { 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: "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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "component", type: InputNGModelComponent, selector: "app-input-ngmodel", inputs: ["mvalue", "cls", "colored", "disabled", "hide", "hint", "id", "inpCl", "label", "lblCl", "lblPosition", "mini", "light", "name", "model", "optionFormatter", "options", "checked", "contextData", "decimalPoints", "labelField", "max", "min", "placeholder", "prefix", "readonly", "required", "showEmptyOption", "showLabel", "showValidation", "showValidationIcon", "small", "stacked", "suffix", "theme", "type", "valueField", "labelType", "xsmall"], outputs: ["modelChange", "mchange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "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: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { 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: "directive", type: MouseEnterListenerDirective, selector: "[nelMouseEntered]", inputs: ["nelMouseEntered"] }, { 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: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: TablePlainComponent, isStandalone: true, selector: "table-plain", inputs: { customSelectClass: { classPropertyName: "customSelectClass", publicName: "customSelectClass", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, obsDataSource: { classPropertyName: "obsDataSource", publicName: "obsDataSource", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPager: { classPropertyName: "showPager", publicName: "showPager", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByField: { classPropertyName: "disableSelectionByField", publicName: "disableSelectionByField", isSignal: false, isRequired: false, transformFunction: null }, _data: { classPropertyName: "_data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, _filterFields: { classPropertyName: "_filterFields", publicName: "filterFields", isSignal: false, isRequired: false, transformFunction: null }, _filterFieldsMap: { classPropertyName: "_filterFieldsMap", publicName: "filterFieldsMap", isSignal: false, isRequired: false, transformFunction: null }, selectionPerPage: { classPropertyName: "selectionPerPage", publicName: "selectionPerPage", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { _view: "view", dataChanged: "dataChanged", filterChange: "filterChange", listMutated: "listMutated" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-plain\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  @if (filterFields()) {\n    <div class=\"d-flex\">\n      <app-btn\n        text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n        [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n        (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n    </div>\n    <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n      @for (scheme of filterFields(); track scheme.field) {\n        <div class=\"col-md-4 col-xxl-3\">\n          @switch (scheme.type) {\n            @case ('autocomplete') {\n              <div class=\"col\">\n                <app-autocomplete\n                  [form]=\"filterForm\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [name]=\"scheme.field | toAny\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                  #inputTag\n                  [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                  (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n                <app-validation-message [input]=\"inputTag\" />\n              </div>\n            }\n            @default {\n              <app-input-basic\n                #formField\n                [name]=\"scheme.field | toAny\"\n                [form]=\"filterForm\"\n                [stacked]=\"true\"\n                [type]=\"scheme.type\"\n                [valueField]=\"scheme.valueField\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"true\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n              <app-validation-message [input]=\"formField\" />\n            }\n          }\n        </div>\n      }\n      <div class=\"col-md justify-content-end d-flex\">\n        <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\" />\n      </div>\n    </div>\n  }\n\n  @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n    <div class=\" \">\n      <div class=\"row g-3 justify-content-between align-items-end\">\n        <div class=\"col-md\">\n          @if (startSectionTemplate()) {\n            <div class=\"{{ starterSectionClass() }}\">\n              <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n            </div>\n          }\n          @if (showFilter()) {\n            <form [formGroup]=\"filterForm\">\n              <div class=\"row justify-content-center align-items-end\">\n                <div class=\"col-md-auto\">\n                  <app-autocomplete\n                    label=\"Filter\"\n                    type=\"select\"\n                    [form]=\"filterForm\"\n                    name=\"field\"\n                    [stacked]=\"false\"\n                    [options]=\"filterOptions()\"\n                    valueField=\"code\"\n                    labelField=\"description\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-input-basic\n                    label=\"Value\"\n                    type=\"text\"\n                    [form]=\"filterForm\"\n                    name=\"value\"\n                    [stacked]=\"false\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\" />\n                </div>\n              </div>\n            </form>\n          }\n        </div>\n        @if (showExport() || showAdditionalColumns()) {\n          <div class=\"col-md-auto\">\n            <div class=\"row row-cols-auto g-3 justify-content-end\">\n              <span>\n                @if (showExport()) {\n                  <app-export-table\n                    [disabled]=\"!dataSource()?.data?.length\"\n                    [label]=\"label()\"\n                    [debug]=\"debug()\"\n                    [displayedColumns]=\"computedDisplayedColumns()\"\n                    [data]=\"dataSource()?.data\" />\n                }\n              </span>\n              @if (showAdditionalColumns()) {\n                <div class=\"d-flex\">\n                  <fields-to-display\n                    [fields]=\"allTableColumns()\"\n                    [currentColumns]=\"computedDisplayedColumns()\"\n                    (fieldsChanged)=\"fieldsChanged($event)\" />\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  <div\n    [ngClass]=\"{ border: distinct() }\"\n    class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n    <div class=\"table-responsive\">\n      <table\n        mat-table\n        [dataSource]=\"dataSource() || obsDataSource()\"\n        matSort\n        class=\"w-100 d-table table mb-0\"\n        [multiTemplateDataRows]=\"isExpandable()\"\n        #table\n        [ngClass]=\"{\n          smallerFonts: smallerFonts(),\n          nowrap: nowrap(),\n          centerCells: centerCells(),\n          curvy: curvy(),\n          'table-striped': striped(),\n        }\">\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            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                [class]=\"customSelectClass()\"\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [attr.aria-label]=\"checkboxLabel()\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n            }\n          </th>\n          <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                class=\"form-control control-bg-gray\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [attr.aria-label]=\"checkboxLabel(row)\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [aria-label]=\"checkboxLabel(row)\"\n                [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n            }\n          </td>\n        </ng-container>\n        <!-- Columns -->\n        @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n          <ng-template #thContent>\n            <app-info-icon [text]=\"col.hint\">\n              {{ col.t | appTranslate | async }}\n            </app-info-icon>\n          </ng-template>\n\n          @switch (col.type) {\n            <!-- CHECKBOX -->\n            @case ('textarea') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- <app-input-td-rf  [(model)]=\"col.\" [showLabel]=\"false\"  /> -->\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n            <!-- CHECKBOX -->\n            @case ('checkbox') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\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\n            <!-- Input -->\n            @case ('input') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-basic\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"text\"\n                    [disabled]=\"col.disabled\"\n                    [form]=\"row\"\n                    [name]=\"col.f\"\n                    [noFormat]=\"true\" />\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- PROGRESS BAR -->\n            @case ('progress') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"progress\">\n                    <div\n                      class=\"progress-bar progress-bar-striped bg-success\"\n                      role=\"progressbar\"\n                      [ngStyle]=\"{ width: row[col.f] }\">\n                      {{ row[col.f] }}\n                    </div>\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- COLOR -->\n            @case ('color') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Button -->\n            @case ('button') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n                  <app-btn\n                    [icon]=\"col.icon || col.btn?.icon\"\n                    [type]=\"col.btn?.type\"\n                    (mclick)=\"\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                    [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\n            <!-- Sub Table -->\n            @case ('table') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n                  <div class=\"inline-block\">\n                    <app-btn\n                      [icon]=\"col.icon\"\n                      [type]=\"col.btn?.type || 'dark'\"\n                      (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                      [group]=\"col.btn?.group\"\n                      [help]=\"col.subTable | tableToString: row | async\"\n                      [showHelpIcon]=\"false\"\n                      [text]=\"col.btn?.label\"\n                      [iconBtn]=\"true\"\n                      mclass=\"w-auto\" />\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- ACTION COLUMNS -->\n            @case ('btns') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\" stickyEnd>\n                <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n                  <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n                    @for (button of col.buttons; track button.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                          [iconBtn]=\"!button.label\"\n                          mclass=\"w-auto\"\n                          (mclick)=\"\n                            button.action(row, i + paginator.pageIndex * paginator.pageSize, btn)\n                          \"\n                          #btn />\n                      </div>\n                    }\n                  </div>\n                </td>\n              </ng-container>\n            }\n\n            <!-- EDITABLE -->\n            @case ('editable') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <a\n                    class=\"cell\"\n                    [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n                    [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n                    [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                  <i\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\n            <!-- DEFAULT -->\n            @default {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td\n                  mat-cell\n                  *matCellDef=\"let row; let rowIndex = index\"\n                  [matTooltip]=\"\n                    col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\n                  \">\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]=\"row | getColFormatted: col | async | valueOrX: '-'\"></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]=\"row | getColFormatted: col | async | valueOrX: '-'\"></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              <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                  (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        @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                  @if (row == expandedElement()) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        expandedRowTemplate();\n                        context: { $implicit: { row } }\n                      \"></ng-container>\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    @if (showPager()) {\n      <mat-paginator\n        [length]=\"resultsLength()\"\n        [pageSizeOptions]=\"computedPageSizeOptions()\"\n        [pageSize]=\"pageSize()\"\n        showFirstLastButtons></mat-paginator>\n    }\n  </div>\n</div>\n\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: "pipe", type: AsyncPipe, name: "async" }, { 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: "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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "component", type: InputNGModelComponent, selector: "app-input-ngmodel", inputs: ["mvalue", "cls", "colored", "disabled", "hide", "hint", "id", "inpCl", "label", "lblCl", "lblPosition", "mini", "light", "name", "model", "optionFormatter", "options", "checked", "contextData", "decimalPoints", "labelField", "max", "min", "placeholder", "prefix", "readonly", "required", "showEmptyOption", "showLabel", "showValidation", "showValidationIcon", "small", "stacked", "suffix", "theme", "type", "valueField", "labelType", "xsmall"], outputs: ["modelChange", "mchange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "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: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { 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: "directive", type: MouseEnterListenerDirective, selector: "[nelMouseEntered]", inputs: ["nelMouseEntered"] }, { 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: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -16271,7 +16277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                         ValidationMessageComponent,
                         ValueOrXPipe,
                         FunctionCaller,
-                    ], template: "<div class=\"table-plain\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  @if (filterFields()) {\n    <div class=\"d-flex\">\n      <app-btn\n        text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n        [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n        (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n    </div>\n    <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n      @for (scheme of filterFields(); track scheme.field) {\n        <div class=\"col-md-4 col-xxl-3\">\n          @switch (scheme.type) {\n            @case ('autocomplete') {\n              <div class=\"col\">\n                <app-autocomplete\n                  [form]=\"filterForm\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [name]=\"scheme.field | toAny\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                  #inputTag\n                  [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                  (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n                <app-validation-message [input]=\"inputTag\" />\n              </div>\n            }\n            @default {\n              <app-input-basic\n                #formField\n                [name]=\"scheme.field | toAny\"\n                [form]=\"filterForm\"\n                [stacked]=\"true\"\n                [type]=\"scheme.type\"\n                [valueField]=\"scheme.valueField\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"true\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n              <app-validation-message [input]=\"formField\" />\n            }\n          }\n        </div>\n      }\n      <div class=\"col-md justify-content-end d-flex\">\n        <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\" />\n      </div>\n    </div>\n  }\n\n  @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n    <div class=\" \">\n      <div class=\"row g-3 justify-content-between align-items-end\">\n        <div class=\"col-md\">\n          @if (startSectionTemplate()) {\n            <div class=\"{{ starterSectionClass() }}\">\n              <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n            </div>\n          }\n          @if (showFilter()) {\n            <form [formGroup]=\"filterForm\">\n              <div class=\"row justify-content-center align-items-end\">\n                <div class=\"col-md-auto\">\n                  <app-autocomplete\n                    label=\"Filter\"\n                    type=\"select\"\n                    [form]=\"filterForm\"\n                    name=\"field\"\n                    [stacked]=\"false\"\n                    [options]=\"filterOptions()\"\n                    valueField=\"code\"\n                    labelField=\"description\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-input-basic\n                    label=\"Value\"\n                    type=\"text\"\n                    [form]=\"filterForm\"\n                    name=\"value\"\n                    [stacked]=\"false\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\" />\n                </div>\n              </div>\n            </form>\n          }\n        </div>\n        @if (showExport() || showAdditionalColumns()) {\n          <div class=\"col-md-auto\">\n            <div class=\"row row-cols-auto g-3 justify-content-end\">\n              <span>\n                @if (showExport()) {\n                  <app-export-table\n                    [disabled]=\"!dataSource()?.data?.length\"\n                    [label]=\"label()\"\n                    [debug]=\"debug()\"\n                    [displayedColumns]=\"computedDisplayedColumns()\"\n                    [data]=\"dataSource()?.data\" />\n                }\n              </span>\n              @if (showAdditionalColumns()) {\n                <div class=\"d-flex\">\n                  <fields-to-display\n                    [fields]=\"allTableColumns()\"\n                    [currentColumns]=\"computedDisplayedColumns()\"\n                    (fieldsChanged)=\"fieldsChanged($event)\" />\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  <div\n    [ngClass]=\"{ border: distinct() }\"\n    class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n    <div class=\"table-responsive\">\n      <table\n        mat-table\n        [dataSource]=\"dataSource() || obsDataSource()\"\n        matSort\n        class=\"w-100 d-table table mb-0\"\n        [multiTemplateDataRows]=\"isExpandable()\"\n        #table\n        [ngClass]=\"{\n          smallerFonts: smallerFonts(),\n          nowrap: nowrap(),\n          centerCells: centerCells(),\n          curvy: curvy(),\n          'table-striped': striped(),\n        }\">\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            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                [class]=\"customSelectClass()\"\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [attr.aria-label]=\"checkboxLabel()\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n            }\n          </th>\n          <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                class=\"form-control control-bg-gray\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [attr.aria-label]=\"checkboxLabel(row)\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [aria-label]=\"checkboxLabel(row)\"\n                [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n            }\n          </td>\n        </ng-container>\n        <!-- Columns -->\n        @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n          <ng-template #thContent>\n            <app-info-icon [text]=\"col.hint\">\n              {{ col.t | appTranslate | async }}\n            </app-info-icon>\n          </ng-template>\n\n          @switch (col.type) {\n            <!-- CHECKBOX -->\n            @case ('textarea') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- <app-input-td-rf  [(model)]=\"col.\" [showLabel]=\"false\"  /> -->\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n            <!-- CHECKBOX -->\n            @case ('checkbox') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\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\n            <!-- Input -->\n            @case ('input') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-basic\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"text\"\n                    [disabled]=\"col.disabled\"\n                    [form]=\"row\"\n                    [name]=\"col.f\"\n                    [noFormat]=\"true\" />\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- PROGRESS BAR -->\n            @case ('progress') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"progress\">\n                    <div\n                      class=\"progress-bar progress-bar-striped bg-success\"\n                      role=\"progressbar\"\n                      [ngStyle]=\"{ width: row[col.f] }\">\n                      {{ row[col.f] }}\n                    </div>\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- COLOR -->\n            @case ('color') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Button -->\n            @case ('button') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n                  <app-btn\n                    [icon]=\"col.icon || col.btn?.icon\"\n                    [type]=\"col.btn?.type\"\n                    (mclick)=\"\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                    [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\n            <!-- Sub Table -->\n            @case ('table') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n                  <div class=\"inline-block\">\n                    <app-btn\n                      [icon]=\"col.icon\"\n                      [type]=\"col.btn?.type || 'dark'\"\n                      (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                      [group]=\"col.btn?.group\"\n                      [help]=\"col.subTable | tableToString: row | async\"\n                      [showHelpIcon]=\"false\"\n                      [text]=\"col.btn?.label\"\n                      [iconBtn]=\"true\"\n                      mclass=\"w-auto\" />\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- ACTION COLUMNS -->\n            @case ('btns') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\" stickyEnd>\n                <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n                  <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n                    @for (button of col.buttons; track button.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                          [iconBtn]=\"!button.label\"\n                          mclass=\"w-auto\"\n                          (mclick)=\"\n                            button.action(row, i + paginator.pageIndex * paginator.pageSize, btn)\n                          \"\n                          #btn />\n                      </div>\n                    }\n                  </div>\n                </td>\n              </ng-container>\n            }\n\n            <!-- EDITABLE -->\n            @case ('editable') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <a\n                    class=\"cell\"\n                    [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n                    [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n                    [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                  <i\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\n            <!-- DEFAULT -->\n            @default {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td\n                  mat-cell\n                  *matCellDef=\"let row; let rowIndex = index\"\n                  [matTooltip]=\"\n                    col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\n                  \">\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]=\"row | getColFormatted: col | async | valueOrX: '-'\"></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]=\"row | getColFormatted: col | async | valueOrX: '-'\"></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              <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                  (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        @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                    \"></ng-container>\n                </div>\n              </td>\n            </ng-container>\n          }\n          <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: dcols\"\n            [ngClass]=\"{\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    @if (showPager()) {\n      <mat-paginator\n        [length]=\"resultsLength()\"\n        [pageSizeOptions]=\"computedPageSizeOptions()\"\n        [pageSize]=\"pageSize()\"\n        showFirstLastButtons></mat-paginator>\n    }\n  </div>\n</div>\n\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"] }]
+                    ], template: "<div class=\"table-plain\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  @if (filterFields()) {\n    <div class=\"d-flex\">\n      <app-btn\n        text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n        [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n        (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n    </div>\n    <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n      @for (scheme of filterFields(); track scheme.field) {\n        <div class=\"col-md-4 col-xxl-3\">\n          @switch (scheme.type) {\n            @case ('autocomplete') {\n              <div class=\"col\">\n                <app-autocomplete\n                  [form]=\"filterForm\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [name]=\"scheme.field | toAny\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                  #inputTag\n                  [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                  (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n                <app-validation-message [input]=\"inputTag\" />\n              </div>\n            }\n            @default {\n              <app-input-basic\n                #formField\n                [name]=\"scheme.field | toAny\"\n                [form]=\"filterForm\"\n                [stacked]=\"true\"\n                [type]=\"scheme.type\"\n                [valueField]=\"scheme.valueField\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"true\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n              <app-validation-message [input]=\"formField\" />\n            }\n          }\n        </div>\n      }\n      <div class=\"col-md justify-content-end d-flex\">\n        <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\" />\n      </div>\n    </div>\n  }\n\n  @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n    <div class=\" \">\n      <div class=\"row g-3 justify-content-between align-items-end\">\n        <div class=\"col-md\">\n          @if (startSectionTemplate()) {\n            <div class=\"{{ starterSectionClass() }}\">\n              <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n            </div>\n          }\n          @if (showFilter()) {\n            <form [formGroup]=\"filterForm\">\n              <div class=\"row justify-content-center align-items-end\">\n                <div class=\"col-md-auto\">\n                  <app-autocomplete\n                    label=\"Filter\"\n                    type=\"select\"\n                    [form]=\"filterForm\"\n                    name=\"field\"\n                    [stacked]=\"false\"\n                    [options]=\"filterOptions()\"\n                    valueField=\"code\"\n                    labelField=\"description\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-input-basic\n                    label=\"Value\"\n                    type=\"text\"\n                    [form]=\"filterForm\"\n                    name=\"value\"\n                    [stacked]=\"false\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\" />\n                </div>\n              </div>\n            </form>\n          }\n        </div>\n        @if (showExport() || showAdditionalColumns()) {\n          <div class=\"col-md-auto\">\n            <div class=\"row row-cols-auto g-3 justify-content-end\">\n              <span>\n                @if (showExport()) {\n                  <app-export-table\n                    [disabled]=\"!dataSource()?.data?.length\"\n                    [label]=\"label()\"\n                    [debug]=\"debug()\"\n                    [displayedColumns]=\"computedDisplayedColumns()\"\n                    [data]=\"dataSource()?.data\" />\n                }\n              </span>\n              @if (showAdditionalColumns()) {\n                <div class=\"d-flex\">\n                  <fields-to-display\n                    [fields]=\"allTableColumns()\"\n                    [currentColumns]=\"computedDisplayedColumns()\"\n                    (fieldsChanged)=\"fieldsChanged($event)\" />\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  <div\n    [ngClass]=\"{ border: distinct() }\"\n    class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n    <div class=\"table-responsive\">\n      <table\n        mat-table\n        [dataSource]=\"dataSource() || obsDataSource()\"\n        matSort\n        class=\"w-100 d-table table mb-0\"\n        [multiTemplateDataRows]=\"isExpandable()\"\n        #table\n        [ngClass]=\"{\n          smallerFonts: smallerFonts(),\n          nowrap: nowrap(),\n          centerCells: centerCells(),\n          curvy: curvy(),\n          'table-striped': striped(),\n        }\">\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            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                [class]=\"customSelectClass()\"\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [attr.aria-label]=\"checkboxLabel()\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n            }\n          </th>\n          <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                class=\"form-control control-bg-gray\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [attr.aria-label]=\"checkboxLabel(row)\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [aria-label]=\"checkboxLabel(row)\"\n                [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n            }\n          </td>\n        </ng-container>\n        <!-- Columns -->\n        @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n          <ng-template #thContent>\n            <app-info-icon [text]=\"col.hint\">\n              {{ col.t | appTranslate | async }}\n            </app-info-icon>\n          </ng-template>\n\n          @switch (col.type) {\n            <!-- CHECKBOX -->\n            @case ('textarea') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- <app-input-td-rf  [(model)]=\"col.\" [showLabel]=\"false\"  /> -->\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n            <!-- CHECKBOX -->\n            @case ('checkbox') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\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\n            <!-- Input -->\n            @case ('input') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-basic\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"text\"\n                    [disabled]=\"col.disabled\"\n                    [form]=\"row\"\n                    [name]=\"col.f\"\n                    [noFormat]=\"true\" />\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- PROGRESS BAR -->\n            @case ('progress') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"progress\">\n                    <div\n                      class=\"progress-bar progress-bar-striped bg-success\"\n                      role=\"progressbar\"\n                      [ngStyle]=\"{ width: row[col.f] }\">\n                      {{ row[col.f] }}\n                    </div>\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- COLOR -->\n            @case ('color') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Button -->\n            @case ('button') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n                  <app-btn\n                    [icon]=\"col.icon || col.btn?.icon\"\n                    [type]=\"col.btn?.type\"\n                    (mclick)=\"\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                    [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\n            <!-- Sub Table -->\n            @case ('table') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n                  <div class=\"inline-block\">\n                    <app-btn\n                      [icon]=\"col.icon\"\n                      [type]=\"col.btn?.type || 'dark'\"\n                      (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                      [group]=\"col.btn?.group\"\n                      [help]=\"col.subTable | tableToString: row | async\"\n                      [showHelpIcon]=\"false\"\n                      [text]=\"col.btn?.label\"\n                      [iconBtn]=\"true\"\n                      mclass=\"w-auto\" />\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- ACTION COLUMNS -->\n            @case ('btns') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\" stickyEnd>\n                <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n                  <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n                    @for (button of col.buttons; track button.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                          [iconBtn]=\"!button.label\"\n                          mclass=\"w-auto\"\n                          (mclick)=\"\n                            button.action(row, i + paginator.pageIndex * paginator.pageSize, btn)\n                          \"\n                          #btn />\n                      </div>\n                    }\n                  </div>\n                </td>\n              </ng-container>\n            }\n\n            <!-- EDITABLE -->\n            @case ('editable') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <a\n                    class=\"cell\"\n                    [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n                    [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n                    [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                  <i\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\n            <!-- DEFAULT -->\n            @default {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td\n                  mat-cell\n                  *matCellDef=\"let row; let rowIndex = index\"\n                  [matTooltip]=\"\n                    col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\n                  \">\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]=\"row | getColFormatted: col | async | valueOrX: '-'\"></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]=\"row | getColFormatted: col | async | valueOrX: '-'\"></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              <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                  (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        @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                  @if (row == expandedElement()) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        expandedRowTemplate();\n                        context: { $implicit: { row } }\n                      \"></ng-container>\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    @if (showPager()) {\n      <mat-paginator\n        [length]=\"resultsLength()\"\n        [pageSizeOptions]=\"computedPageSizeOptions()\"\n        [pageSize]=\"pageSize()\"\n        showFirstLastButtons></mat-paginator>\n    }\n  </div>\n</div>\n\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"] }]
         }], ctorParameters: () => [], propDecorators: { disableSelectionByField: [{
                 type: Input
             }], _view: [{
@@ -18486,6 +18492,8 @@ class FindItemComponent extends BaseFormGenerator {
         this.autoFormatSchema = input(true);
         this.id = input(location.href);
         this.autoOrder = input(true);
+        this.searchButtonText = input('Search');
+        this.searchButtonIcon = input('search');
         this.centerCells = input();
         this._displayedColumns = input([], { alias: 'displayedColumns' });
         this.displayedColumns = computed(() => this.useCustomLabels()
@@ -18559,7 +18567,7 @@ class FindItemComponent extends BaseFormGenerator {
                         .subscribe((r) => s.onChangeFunc(form.getRawValue(), r, this));
                     this.subs[s.field] = sub;
                 }
-                form.registerControl(s.field.toString(), new FormControl(s.value != null ? s.value : initialQuery[s.field], s.validators, s.asyncValidators));
+                form.registerControl(s.field.toString(), new FormControl(s.value != null ? s.value : initialQuery[s.field], s.isRequired ? [Validators.required] : s.validators, s.asyncValidators));
             });
             return form;
         });
@@ -18832,6 +18840,11 @@ class FindItemComponent extends BaseFormGenerator {
             }
             else if (this.searchFunction) {
                 try {
+                    // debugger;
+                    // const s=this.searchFormValue()
+                    if (!this.searchForm()?.valid) {
+                        return;
+                    }
                     this._loading.set(true);
                     const data = await lastValueFrom(this.searchFunction()({
                         ...req,
@@ -18881,7 +18894,7 @@ class FindItemComponent extends BaseFormGenerator {
         this._loading.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: FindItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", 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 }, useStaticLoader: { classPropertyName: "useStaticLoader", publicName: "useStaticLoader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, searchPromptText: { classPropertyName: "searchPromptText", publicName: "searchPromptText", 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()\" [useStaticLoader]=\"useStaticLoader()\">\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            [striped]=\"striped()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [searchPromptText]=\"searchPromptText()\"\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            [striped]=\"striped()\"\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: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], 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", "useStaticLoader", "searchPromptText"], 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.1.1", 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 }, searchButtonText: { classPropertyName: "searchButtonText", publicName: "searchButtonText", isSignal: true, isRequired: false, transformFunction: null }, searchButtonIcon: { classPropertyName: "searchButtonIcon", publicName: "searchButtonIcon", 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 }, useStaticLoader: { classPropertyName: "useStaticLoader", publicName: "useStaticLoader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, searchPromptText: { classPropertyName: "searchPromptText", publicName: "searchPromptText", 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()\" [useStaticLoader]=\"useStaticLoader()\">\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 gap-1 align-items-center d-flex\">\n        <form-error #feTag [customResult]=\"true\" [inline]=\"true\" [form]=\"searchForm()\" />\n        @if (showClearBtn()) {\n          <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n        }\n        @if (showSearchBtn()) {\n          <app-btn\n            [group]=\"'search'\"\n            [iconBtn]=\"true\"\n            [text]=\"searchButtonText()\"\n            [icon]=\"searchButtonIcon()\"\n            actionType=\"submit\"\n            [form]=\"searchForm()\"\n            (mclick)=\"search()\"\n            [excludeLogging]=\"true\"\n            [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n        }\n        @if (isCompact()) {\n          <app-btn\n            [showHelpIcon]=\"false\"\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          @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    <ng-container *ngTemplateOutlet=\"feTag.resultTemplateRef()\"></ng-container>\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            [striped]=\"striped()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [searchPromptText]=\"searchPromptText()\"\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          @if (searchIfNoQuery() || data()?.length) {\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              [striped]=\"striped()\"\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          } @else {\n            <div class=\"text-center p-3\">{{'Please type a search query'|appTranslate|async}}</div>\n          }\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: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], 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", "useStaticLoader", "searchPromptText"], 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "appTranslate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "component", type: FormErrorComponent, selector: "form-error", inputs: ["form", "customResult", "inline", "lgGridNo", "xxlGridNo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: FindItemComponent, decorators: [{
             type: Component,
@@ -18889,12 +18902,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                         LoaderComponent,
                         FormsModule,
                         PhoneNumberComponent,
-                        ValidationMessageComponent,
                         AutocompleteComponent,
                         MatMenuModule,
                         NgTemplateOutlet,
                         RouterLink,
-                        NgSwitchDefault,
                         InputBasicComponent,
                         ModalComponents,
                         BtnComponent,
@@ -18905,10 +18916,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                         MatIconModule,
                         JsonPipe,
                         AsyncPipe,
+                        TranslatePipe,
                         ReactiveFormsModule,
                         FunctionCaller2,
                         ToAnyPipe,
-                    ], template: "<loader [loading]=\"_loading()\" [useStaticLoader]=\"useStaticLoader()\">\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            [striped]=\"striped()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [searchPromptText]=\"searchPromptText()\"\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            [striped]=\"striped()\"\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"] }]
+                        FormErrorComponent,
+                    ], template: "<loader [loading]=\"_loading()\" [useStaticLoader]=\"useStaticLoader()\">\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 gap-1 align-items-center d-flex\">\n        <form-error #feTag [customResult]=\"true\" [inline]=\"true\" [form]=\"searchForm()\" />\n        @if (showClearBtn()) {\n          <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n        }\n        @if (showSearchBtn()) {\n          <app-btn\n            [group]=\"'search'\"\n            [iconBtn]=\"true\"\n            [text]=\"searchButtonText()\"\n            [icon]=\"searchButtonIcon()\"\n            actionType=\"submit\"\n            [form]=\"searchForm()\"\n            (mclick)=\"search()\"\n            [excludeLogging]=\"true\"\n            [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n        }\n        @if (isCompact()) {\n          <app-btn\n            [showHelpIcon]=\"false\"\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          @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    <ng-container *ngTemplateOutlet=\"feTag.resultTemplateRef()\"></ng-container>\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            [striped]=\"striped()\"\n            [nowrap]=\"nowrap()\"\n            [orderDirection]=\"orderDirection()\"\n            [orderField]=\"orderField()\"\n            [pageSize]=\"pageSize()\"\n            [rowOptions]=\"options()\"\n            [debug]=\"debug()\"\n            [searchPromptText]=\"searchPromptText()\"\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          @if (searchIfNoQuery() || data()?.length) {\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              [striped]=\"striped()\"\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          } @else {\n            <div class=\"text-center p-3\">{{'Please type a search query'|appTranslate|async}}</div>\n          }\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']