ets-fe-ng-sdk 20.3.28 → 20.3.29

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

@@ -6944,6 +6944,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                     standalone: true,
                 }]
         }] });
+/**
+ * Creates a stable context object for table cell templates.
+ * Memoized by Angular's pure pipe mechanism.
+ */
+class TableContextPipe {
+    transform(row, rowIndex) {
+        return { $implicit: { row, rowIndex } };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TableContextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: TableContextPipe, isStandalone: true, name: "tableContext" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TableContextPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'tableContext',
+                    standalone: true,
+                }]
+        }] });
 /**
  * Casts a value to any array type
  */
@@ -7375,11 +7393,12 @@ const comps$3 = [
     ValueFormatterPipe,
     ValueOrXPipe,
     XOrYPipe,
+    TableContextPipe,
 ];
 const modules = [];
 class UtilityPipesModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UtilityPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: UtilityPipesModule, imports: [CommonModule, ArraySplitter, CustomDatePipe, FieldToLabelPipe, FilterArrayByStringPipe, FilterArrayPipe, FilterFormArrayGroupPipe, FormInvalidClassPipe, FunctionCaller, FunctionCaller1, FunctionCaller2, FunctionCaller3, GenderPipe, GetValueLabel, HasFormValuePipe, HasValuePipe, CodeTitleDescPipe, HttpListCaller, HttpListCaller1, HttpListCaller2, IsClonePage, IsShowPage, ObjectToArrayPipe, RefresherPipe, RemoveUsedOptionsPipe, ReplaceAllPipe, ResponsiveValPipe, RoundPipe, SecondsToTimePipe, SortPipe, StrConcatenatorPipe, ToAnyArrayPipe, ToAnyPipe, SDKTranslatePipe, TrimPipe, TrimTextPipe, ValueFormatterPipe, ValueOrXPipe, XOrYPipe], exports: [ArraySplitter, CustomDatePipe, FieldToLabelPipe, FilterArrayByStringPipe, FilterArrayPipe, FilterFormArrayGroupPipe, FormInvalidClassPipe, FunctionCaller, FunctionCaller1, FunctionCaller2, FunctionCaller3, GenderPipe, GetValueLabel, HasFormValuePipe, HasValuePipe, CodeTitleDescPipe, HttpListCaller, HttpListCaller1, HttpListCaller2, IsClonePage, IsShowPage, ObjectToArrayPipe, RefresherPipe, RemoveUsedOptionsPipe, ReplaceAllPipe, ResponsiveValPipe, RoundPipe, SecondsToTimePipe, SortPipe, StrConcatenatorPipe, ToAnyArrayPipe, ToAnyPipe, SDKTranslatePipe, TrimPipe, TrimTextPipe, ValueFormatterPipe, ValueOrXPipe, XOrYPipe] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: UtilityPipesModule, imports: [CommonModule, ArraySplitter, CustomDatePipe, FieldToLabelPipe, FilterArrayByStringPipe, FilterArrayPipe, FilterFormArrayGroupPipe, FormInvalidClassPipe, FunctionCaller, FunctionCaller1, FunctionCaller2, FunctionCaller3, GenderPipe, GetValueLabel, HasFormValuePipe, HasValuePipe, CodeTitleDescPipe, HttpListCaller, HttpListCaller1, HttpListCaller2, IsClonePage, IsShowPage, ObjectToArrayPipe, RefresherPipe, RemoveUsedOptionsPipe, ReplaceAllPipe, ResponsiveValPipe, RoundPipe, SecondsToTimePipe, SortPipe, StrConcatenatorPipe, ToAnyArrayPipe, ToAnyPipe, SDKTranslatePipe, TrimPipe, TrimTextPipe, ValueFormatterPipe, ValueOrXPipe, XOrYPipe, TableContextPipe], exports: [ArraySplitter, CustomDatePipe, FieldToLabelPipe, FilterArrayByStringPipe, FilterArrayPipe, FilterFormArrayGroupPipe, FormInvalidClassPipe, FunctionCaller, FunctionCaller1, FunctionCaller2, FunctionCaller3, GenderPipe, GetValueLabel, HasFormValuePipe, HasValuePipe, CodeTitleDescPipe, HttpListCaller, HttpListCaller1, HttpListCaller2, IsClonePage, IsShowPage, ObjectToArrayPipe, RefresherPipe, RemoveUsedOptionsPipe, ReplaceAllPipe, ResponsiveValPipe, RoundPipe, SecondsToTimePipe, SortPipe, StrConcatenatorPipe, ToAnyArrayPipe, ToAnyPipe, SDKTranslatePipe, TrimPipe, TrimTextPipe, ValueFormatterPipe, ValueOrXPipe, XOrYPipe, TableContextPipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UtilityPipesModule, imports: [CommonModule, modules] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UtilityPipesModule, decorators: [{
@@ -20674,17 +20693,17 @@ class TableHttpsComponent extends TableBaseComponent {
         this.search();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TableHttpsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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              [class.pointer-hover]=\"enableRowClick()\"\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\n                      [sticky]=\"col.stickyStart\"\n                      [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                      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)=\"\n                                  button.action(\n                                    row,\n                                    i + paginator.pageIndex * paginator.pageSize,\n                                    btn\n                                  )\n                                \"\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\n                      matColumnDef=\"{{ col.f | toAny }}\"\n                      [sticky]=\"col.stickyStart\"\n                      [stickyEnd]=\"col.stickyEnd || 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                          clickedExpandRow.emit({ open: expandedElement() === row, 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                    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}:host ::ng-deep .table-plain table.pointer-hover tbody tr:hover,:host ::ng-deep .table-plain table.pointer-hover tbody tr:focus,:host ::ng-deep .table-https table.pointer-hover tbody tr:hover,:host ::ng-deep .table-https table.pointer-hover tbody tr:focus{cursor:pointer}:host ::ng-deep .table-plain table.pointer-hover tbody tr:hover td,:host ::ng-deep .table-plain table.pointer-hover tbody tr:focus td,:host ::ng-deep .table-https table.pointer-hover tbody tr:hover td,:host ::ng-deep .table-https table.pointer-hover tbody tr:focus td{background-color:#f0f0f0!important}\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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "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$5.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$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "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$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "ngmodule", type: 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: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { 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: "20.3.2", 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              [class.pointer-hover]=\"enableRowClick()\"\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\n                      [sticky]=\"col.stickyStart\"\n                      [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                      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)=\"\n                                  button.action(\n                                    row,\n                                    i + paginator.pageIndex * paginator.pageSize,\n                                    btn\n                                  )\n                                \"\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\n                      matColumnDef=\"{{ col.f | toAny }}\"\n                      [sticky]=\"col.stickyStart\"\n                      [stickyEnd]=\"col.stickyEnd || 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                        <div [matTooltip]=\"col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\">\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=\"cellContentSource; context: { row, rowIndex, col }\" />\n                            </span>\n                          } @else {\n                            <ng-container *ngTemplateOutlet=\"cellContentSource; context: { row, rowIndex, col }\" />\n                          }\n                        </div>\n\n                        <ng-template #cellContentSource let-row=\"row\" let-rowIndex=\"rowIndex\" let-col=\"col\">\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]=\"col.customTemplate\"\n                                [ngTemplateOutletContext]=\"row | tableContext: rowIndex\" />\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                      </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                          clickedExpandRow.emit({ open: expandedElement() === row, 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                    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}:host ::ng-deep .table-plain table.pointer-hover tbody tr:hover,:host ::ng-deep .table-plain table.pointer-hover tbody tr:focus,:host ::ng-deep .table-https table.pointer-hover tbody tr:hover,:host ::ng-deep .table-https table.pointer-hover tbody tr:focus{cursor:pointer}:host ::ng-deep .table-plain table.pointer-hover tbody tr:hover td,:host ::ng-deep .table-plain table.pointer-hover tbody tr:focus td,:host ::ng-deep .table-https table.pointer-hover tbody tr:hover td,:host ::ng-deep .table-https table.pointer-hover tbody tr:focus td{background-color:#f0f0f0!important}\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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "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$5.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$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "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$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "ngmodule", type: 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: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { 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: TableContextPipe, name: "tableContext" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
                 transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
             ]),
-        ] }); }
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TableHttpsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'table-https', animations: [
+            args: [{ selector: 'table-https', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('detailExpand', [
                             state('collapsed', style({ height: '0px', minHeight: '0' })),
                             state('expanded', style({ height: '*' })),
@@ -20697,7 +20716,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         FieldsToDisplayComponent,
                         FunctionCaller2,
                         GetColFormattedPipe,
-                        GetRawFieldsPipe,
                         InfoIconComponent,
                         InputNGModelComponent,
                         LoaderComponent,
@@ -20721,8 +20739,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         SDKTranslatePipe,
                         FunctionCaller,
                         FunctionCaller1,
+                        TableContextPipe,
                         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              [class.pointer-hover]=\"enableRowClick()\"\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\n                      [sticky]=\"col.stickyStart\"\n                      [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                      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)=\"\n                                  button.action(\n                                    row,\n                                    i + paginator.pageIndex * paginator.pageSize,\n                                    btn\n                                  )\n                                \"\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\n                      matColumnDef=\"{{ col.f | toAny }}\"\n                      [sticky]=\"col.stickyStart\"\n                      [stickyEnd]=\"col.stickyEnd || 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                          clickedExpandRow.emit({ open: expandedElement() === row, 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                    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}:host ::ng-deep .table-plain table.pointer-hover tbody tr:hover,:host ::ng-deep .table-plain table.pointer-hover tbody tr:focus,:host ::ng-deep .table-https table.pointer-hover tbody tr:hover,:host ::ng-deep .table-https table.pointer-hover tbody tr:focus{cursor:pointer}:host ::ng-deep .table-plain table.pointer-hover tbody tr:hover td,:host ::ng-deep .table-plain table.pointer-hover tbody tr:focus td,:host ::ng-deep .table-https table.pointer-hover tbody tr:hover td,:host ::ng-deep .table-https table.pointer-hover tbody tr:focus td{background-color:#f0f0f0!important}\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              [class.pointer-hover]=\"enableRowClick()\"\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\n                      [sticky]=\"col.stickyStart\"\n                      [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                      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)=\"\n                                  button.action(\n                                    row,\n                                    i + paginator.pageIndex * paginator.pageSize,\n                                    btn\n                                  )\n                                \"\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\n                      matColumnDef=\"{{ col.f | toAny }}\"\n                      [sticky]=\"col.stickyStart\"\n                      [stickyEnd]=\"col.stickyEnd || 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                        <div [matTooltip]=\"col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\">\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=\"cellContentSource; context: { row, rowIndex, col }\" />\n                            </span>\n                          } @else {\n                            <ng-container *ngTemplateOutlet=\"cellContentSource; context: { row, rowIndex, col }\" />\n                          }\n                        </div>\n\n                        <ng-template #cellContentSource let-row=\"row\" let-rowIndex=\"rowIndex\" let-col=\"col\">\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]=\"col.customTemplate\"\n                                [ngTemplateOutletContext]=\"row | tableContext: rowIndex\" />\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                      </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                          clickedExpandRow.emit({ open: expandedElement() === row, 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                    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}:host ::ng-deep .table-plain table.pointer-hover tbody tr:hover,:host ::ng-deep .table-plain table.pointer-hover tbody tr:focus,:host ::ng-deep .table-https table.pointer-hover tbody tr:hover,:host ::ng-deep .table-https table.pointer-hover tbody tr:focus{cursor:pointer}:host ::ng-deep .table-plain table.pointer-hover tbody tr:hover td,:host ::ng-deep .table-plain table.pointer-hover tbody tr:focus td,:host ::ng-deep .table-https table.pointer-hover tbody tr:hover td,:host ::ng-deep .table-https table.pointer-hover tbody tr:focus td{background-color:#f0f0f0!important}\n"] }]
         }], propDecorators: { pageNumber: [{
                 type: Input
             }] } });
@@ -21452,13 +21471,13 @@ class TablePlainComponent extends TableBaseComponent {
         this.filterChange.emit(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TablePlainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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 }, filterExactMatch: { classPropertyName: "filterExactMatch", publicName: "filterExactMatch", isSignal: true, 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        [class.pointer-hover]=\"enableRowClick()\"\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\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                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]=\"true\" [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 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(\n                              row,\n                              i + (paginator ? paginator.pageIndex * paginator.pageSize : 0),\n                              btn\n                            )\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\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                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                    clickedExpandRow.emit({ open: expandedElement() === row, 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              disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n            }\"\n            [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n            (click)=\"enableRowClick() ? rowClick(row) : null\"></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}:host ::ng-deep .table-plain table.pointer-hover tbody tr:hover,:host ::ng-deep .table-plain table.pointer-hover tbody tr:focus,:host ::ng-deep .table-https table.pointer-hover tbody tr:hover,:host ::ng-deep .table-https table.pointer-hover tbody tr:focus{cursor:pointer}:host ::ng-deep .table-plain table.pointer-hover tbody tr:hover td,:host ::ng-deep .table-plain table.pointer-hover tbody tr:focus td,:host ::ng-deep .table-https table.pointer-hover tbody tr:hover td,:host ::ng-deep .table-https table.pointer-hover tbody tr:focus td{background-color:#f0f0f0!important}\n"], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ExportTableComponent, selector: "app-export-table", inputs: ["data", "displayedColumns", "searchFunc", "searchQuery", "label", "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: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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$5.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$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.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$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: 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: 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: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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 }, filterExactMatch: { classPropertyName: "filterExactMatch", publicName: "filterExactMatch", isSignal: true, 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        [class.pointer-hover]=\"enableRowClick()\"\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\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                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]=\"true\" [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 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(\n                              row,\n                              i + (paginator ? paginator.pageIndex * paginator.pageSize : 0),\n                              btn\n                            )\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\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                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                  <div [matTooltip]=\"col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\">\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=\"cellContentSource; context: { row, rowIndex, col }\" />\n                      </span>\n                    } @else {\n                      <ng-container *ngTemplateOutlet=\"cellContentSource; context: { row, rowIndex, col }\" />\n                    }\n                  </div>\n\n                  <ng-template #cellContentSource let-row=\"row\" let-rowIndex=\"rowIndex\" let-col=\"col\">\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]=\"col.customTemplate\"\n                          [ngTemplateOutletContext]=\"row | tableContext: rowIndex\" />\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                </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                    clickedExpandRow.emit({ open: expandedElement() === row, 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              disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n            }\"\n            [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n            (click)=\"enableRowClick() ? rowClick(row) : null\"></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}:host ::ng-deep .table-plain table.pointer-hover tbody tr:hover,:host ::ng-deep .table-plain table.pointer-hover tbody tr:focus,:host ::ng-deep .table-https table.pointer-hover tbody tr:hover,:host ::ng-deep .table-https table.pointer-hover tbody tr:focus{cursor:pointer}:host ::ng-deep .table-plain table.pointer-hover tbody tr:hover td,:host ::ng-deep .table-plain table.pointer-hover tbody tr:focus td,:host ::ng-deep .table-https table.pointer-hover tbody tr:hover td,:host ::ng-deep .table-https table.pointer-hover tbody tr:focus td{background-color:#f0f0f0!important}\n"], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ExportTableComponent, selector: "app-export-table", inputs: ["data", "displayedColumns", "searchFunc", "searchQuery", "label", "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: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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$5.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$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.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$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: 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: 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: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }, { kind: "pipe", type: TableContextPipe, name: "tableContext" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
                 transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
             ]),
-        ] }); }
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TablePlainComponent, decorators: [{
             type: Component,
@@ -21468,7 +21487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                             state('expanded', style({ height: '*' })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], imports: [
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AsyncPipe,
                         AutocompleteComponent,
                         BtnComponent,
@@ -21479,12 +21498,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         FunctionCaller1,
                         FunctionCaller2,
                         GetColFormattedPipe,
-                        GetRawFieldsPipe,
                         InfoIconComponent,
                         InputBasicComponent,
                         InputFormatDirective,
                         ModalComponents,
-                        FormGeneratorComponent,
                         InputNGModelComponent,
                         MatCheckboxModule,
                         MatMenuModule,
@@ -21506,7 +21523,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", 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        [class.pointer-hover]=\"enableRowClick()\"\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\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                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]=\"true\" [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 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(\n                              row,\n                              i + (paginator ? paginator.pageIndex * paginator.pageSize : 0),\n                              btn\n                            )\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\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                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                    clickedExpandRow.emit({ open: expandedElement() === row, 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              disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n            }\"\n            [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n            (click)=\"enableRowClick() ? rowClick(row) : null\"></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}:host ::ng-deep .table-plain table.pointer-hover tbody tr:hover,:host ::ng-deep .table-plain table.pointer-hover tbody tr:focus,:host ::ng-deep .table-https table.pointer-hover tbody tr:hover,:host ::ng-deep .table-https table.pointer-hover tbody tr:focus{cursor:pointer}:host ::ng-deep .table-plain table.pointer-hover tbody tr:hover td,:host ::ng-deep .table-plain table.pointer-hover tbody tr:focus td,:host ::ng-deep .table-https table.pointer-hover tbody tr:hover td,:host ::ng-deep .table-https table.pointer-hover tbody tr:focus td{background-color:#f0f0f0!important}\n"] }]
+                        TableContextPipe,
+                    ], 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        [class.pointer-hover]=\"enableRowClick()\"\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\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                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]=\"true\" [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 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(\n                              row,\n                              i + (paginator ? paginator.pageIndex * paginator.pageSize : 0),\n                              btn\n                            )\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\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                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                  <div [matTooltip]=\"col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\">\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=\"cellContentSource; context: { row, rowIndex, col }\" />\n                      </span>\n                    } @else {\n                      <ng-container *ngTemplateOutlet=\"cellContentSource; context: { row, rowIndex, col }\" />\n                    }\n                  </div>\n\n                  <ng-template #cellContentSource let-row=\"row\" let-rowIndex=\"rowIndex\" let-col=\"col\">\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]=\"col.customTemplate\"\n                          [ngTemplateOutletContext]=\"row | tableContext: rowIndex\" />\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                </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                    clickedExpandRow.emit({ open: expandedElement() === row, 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              disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n            }\"\n            [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n            (click)=\"enableRowClick() ? rowClick(row) : null\"></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}:host ::ng-deep .table-plain table.pointer-hover tbody tr:hover,:host ::ng-deep .table-plain table.pointer-hover tbody tr:focus,:host ::ng-deep .table-https table.pointer-hover tbody tr:hover,:host ::ng-deep .table-https table.pointer-hover tbody tr:focus{cursor:pointer}:host ::ng-deep .table-plain table.pointer-hover tbody tr:hover td,:host ::ng-deep .table-plain table.pointer-hover tbody tr:focus td,:host ::ng-deep .table-https table.pointer-hover tbody tr:hover td,:host ::ng-deep .table-https table.pointer-hover tbody tr:focus td{background-color:#f0f0f0!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disableSelectionByField: [{
                 type: Input
             }], _view: [{
@@ -25894,5 +25912,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddItemComponent, ApiService, AppRouteBase, AppRouteService, AppRouteState, AppService, ArraySplitter, AuthenticationInterceptorService, AutocompleteComponent, AutocompleteModule, AutocompleteService, AutocompleteTdRfComponent, BaseFormGenerator, BaseNativeEventListenerDirective, BlinkingBlocksComponent, BouncingBallComponent, Btn, BtnComponent, BtnLg, BtnLgComponent, BtnLinkComponent, BtnModule, BtnService, ButtonComponent, CETSInput, CacheService, CacheUpdaterService, CardComponent, CardComponent as CardModule, CodeTitleDescPipe, CommafyNumberDirective, ButtonComponent as ComponentsModule, Config, ConfirmDialogComponent, ConfirmDialogComponent as ConfirmDialogModule, Constant, CustomDatePipe, DEFAULT_TIMEOUT, DateInputComponent, Day, DayHourMinInputComponent, DebouncerService, DesktopClassDirective, DetailsBtnComponent, DetailsBtnComponent as DetailsBtnModule, DirectivesModule, DocumentsNameDisplayComponent, DocumentsNameDisplayComponent as DocumentsNameDisplayModule, DragDropFileUploadDirective, EETSPageBtnID, ELanguage, EMenuLocation, EMenuType, EPageType, ESubSystem, ESystem, ESystemBusLine, ETSCheckForUpdateService, ETSConfirmDialogService, ETSExtraPagesModule, ETSFKVP, ETSForms, ETSHandleUnrecoverableStateService, ETSKVP, ETSLogUpdateService, ETSLoggerModule, ETSMenuItem, ETSMenuItemDivider, ETSPageNotFoundComponent, ETSPromptUpdateService, ETSReactiveFormInputService, ETSResetModule, ETSResponsivenessDirectiveModule, ETSRobotModule, ETSServiceWorkerService, ETSStorageService, ETSThemeService, ETSTimeoutTesterModule, ETSVersionModule, ETSWindowSecurityService, EUA, EVFunctions, EValidationType, EditableTextCaseComponent, EditableTextCaseComponent as EditableTextCaseModule, SDKEnvironment as Environment, EqualChildrenDirective, ErrorMessagePipe, ErrorReporterService, ExportTableComponent, ExportTableComponent as ExportTableModule, FCInput, FadingBarsComponent, FadingCirclesComponent, FieldToLabelPipe, FieldsToDisplayComponent, FileUploadComponent, FilterArrayByStringPipe, FilterArrayPipe, FilterFormArrayControlPipe, FilterFormArrayGroupPipe, FilterOptions, FindItemComponent, FormErrorComponent, FormGeneratedValueComponent, FormGeneratorComponent, FormGeneratorComponent as FormGeneratorModule, FormGeneratorService, FormInvalidClassDirective, FormInvalidClassPipe, FormLinkComponent, FormLinkComponent as FormLinkModule, FormSchemaToTableColumnsPipe, FormTabHeadersComponent, FormTabHeadersComponent as FormTabHeadersModule, FormValuePipe, FunctionCaller, FunctionCaller1, FunctionCaller2, FunctionCaller3, GenderPipe, GetColFormattedEPipe, GetColFormattedPipe, GetHeadersPipe, GetRawFieldsPipe, GetValueLabel, GlobalErrorHandlerService, HasFormValuePipe, HasValuePipe, HideDesktopDirective, HideMobileDirective, HtmlerService, HttpListCaller, HttpListCaller1, HttpListCaller2, IdlerComponent, IdlerService, ImageLoaderDirective, ImageUpload, IndexCompLayoutComponent, InfoDialogComponent, InfoDialogModule, InfoDialogService, InfoIconComponent, InfoIconComponent as InfoIconModule, InputBasicComponent, InputClassPipe, InputComponent, InputComponents, InputControlComponent, InputFormatDirective, InputFormatService, InputLabelComponent, InputModule, InputNGModelComponent, InputNGModelComponent as InputNGModelModule, InputPipesModule, InputService, InputTD_RFComponent, InputTableComponent, InputTableService, IntegerOnlyDirective, IsClonePage, IsShowPage, LabelComponent, LabelComponent as LabelModule, Lbl, ListOptionFinderPipe, LoaderComponent, LoaderComponent as LoaderModule, LoaderService, LocalCacheService, Log, LoggerComponent, LoggerInterceptorService, LoggerRoutingModule, LoggerService, MHrefDirective, MobileClassDirective, ModalBodyDirective, ModalComponent, ModalComponents, ModalFooterDirective, ModalFormComponent, ModalFormComponent as ModalFormModule, ModalHeaderComponent, ModalHeaderComponent as ModalHeaderModule, ModalComponent as ModalModule, MouseClickListenerDirective, MouseEnterListenerDirective, MouseLeaveListenerDirective, MrouterLinkirective, NELEventName, NarrationHistoryCompComponent, NativeEventListenerDirectives, NegativeNumberOnlyDirective, NumberFormatService, NumberPipe, ObjectToArrayPipe, ObjectToLabelsPipe, OnClickDirective, OptionLabeller, OptionerPipe, OptionsFormatter, PSDirective, PageCenterBodyComponent, PageLoader, PageLoaderService, PageModal, PageService, PageTemplateComponent, PageTemplateComponent as PageTemplateModule, PageToComponentComponent, PageToComponentDirective, PageToComponentComponent as PageToComponentModule, PageToComponentService, PaginatorComponent, PaginatorPipe, PhoneNumberComponent, PhoneNumberService, PointerMoveListenerDirective, prototypes as Prototypes, RefresherPipe, RemoveUsedOptionsPipe, RemoveUsedOptionsReactivePipe, ReplaceAllPipe, RequestLoggerInterceptorService, RequestTimeoutInterceptorService, ResizeGridPipe, ResponsiveValPipe, ResponsivenessDirective, ReverseTranslateSingleNLPipe, RichTextEditorComponent, RichTextEditorRFComponent, RingRipplesComponent, RoundPipe, RouteItem, RowActionsComponent, RowActionsComponent as RowActionsModule, BaseEffect as SDKBaseEffect, BaseFacadeService as SDKBaseFacadeService, BaseService as SDKBaseService, SDKTranslateNoLoaderPipe, SDKTranslatePipe, SDKTranslateSingleNoLoaderPipe, SDKTranslateSinglePipe, SaverClass, SaverService, SecondsToTimePipe, SharedModule, SortPipe, SpinnerComponent, StorageClass, StrConcatenatorPipe, SvgIconComponent, SvgIconService, TableBaseComponent, TableCol, TableHttpsComponent, TableInputClassFunctionPipe, TableInputComponent, TableInputRowComponent, TablePipesModule, TablePlainComponent, TableService, TableToStringPipe, TextAreaModalComponent, TextAreaModalService, TextCase1Component, TextCase2Component, TextCase2ForObject, TextCaseInputComponent, TextCaseService, TextComponent, ToAnyArrayPipe, ToAnyPipe, ToggleInputFormComponent, TranslatePipeModule, TranslationService, TranslatorCaseComponent, TranslatorDirective, TrimPipe, TrimTextPipe, TyperPipe, UserActivity, UserActivityService, UtilityPipesModule, UtilityService, ValidationMessageComponent, ValidationMessageNgmodelComponent, ValidationMsg, Validator, ValueFormatterPipe, ValueOrXPipe, VersionService, VerticalNavComponent, ViewFormButtonsComponent, ViewFormButtonsComponent as ViewFormButtonsModule, WatermarkComponent, WebUserAuthenticationService, WebUserForgotPasswordComponent, WebUserLoginComponent, WebUserResetPasswordComponent, WebcamMediaComponent, XOrYPipe, YearMonthTdRfComponent, _SharedModule, configForms, configPatterns, configValidationMessages, environment, pageErrorRouter, webUserAuthenticationGuard, webUserAuthenticationInterceptor, widthOffsetPipe };
+export { AddItemComponent, ApiService, AppRouteBase, AppRouteService, AppRouteState, AppService, ArraySplitter, AuthenticationInterceptorService, AutocompleteComponent, AutocompleteModule, AutocompleteService, AutocompleteTdRfComponent, BaseFormGenerator, BaseNativeEventListenerDirective, BlinkingBlocksComponent, BouncingBallComponent, Btn, BtnComponent, BtnLg, BtnLgComponent, BtnLinkComponent, BtnModule, BtnService, ButtonComponent, CETSInput, CacheService, CacheUpdaterService, CardComponent, CardComponent as CardModule, CodeTitleDescPipe, CommafyNumberDirective, ButtonComponent as ComponentsModule, Config, ConfirmDialogComponent, ConfirmDialogComponent as ConfirmDialogModule, Constant, CustomDatePipe, DEFAULT_TIMEOUT, DateInputComponent, Day, DayHourMinInputComponent, DebouncerService, DesktopClassDirective, DetailsBtnComponent, DetailsBtnComponent as DetailsBtnModule, DirectivesModule, DocumentsNameDisplayComponent, DocumentsNameDisplayComponent as DocumentsNameDisplayModule, DragDropFileUploadDirective, EETSPageBtnID, ELanguage, EMenuLocation, EMenuType, EPageType, ESubSystem, ESystem, ESystemBusLine, ETSCheckForUpdateService, ETSConfirmDialogService, ETSExtraPagesModule, ETSFKVP, ETSForms, ETSHandleUnrecoverableStateService, ETSKVP, ETSLogUpdateService, ETSLoggerModule, ETSMenuItem, ETSMenuItemDivider, ETSPageNotFoundComponent, ETSPromptUpdateService, ETSReactiveFormInputService, ETSResetModule, ETSResponsivenessDirectiveModule, ETSRobotModule, ETSServiceWorkerService, ETSStorageService, ETSThemeService, ETSTimeoutTesterModule, ETSVersionModule, ETSWindowSecurityService, EUA, EVFunctions, EValidationType, EditableTextCaseComponent, EditableTextCaseComponent as EditableTextCaseModule, SDKEnvironment as Environment, EqualChildrenDirective, ErrorMessagePipe, ErrorReporterService, ExportTableComponent, ExportTableComponent as ExportTableModule, FCInput, FadingBarsComponent, FadingCirclesComponent, FieldToLabelPipe, FieldsToDisplayComponent, FileUploadComponent, FilterArrayByStringPipe, FilterArrayPipe, FilterFormArrayControlPipe, FilterFormArrayGroupPipe, FilterOptions, FindItemComponent, FormErrorComponent, FormGeneratedValueComponent, FormGeneratorComponent, FormGeneratorComponent as FormGeneratorModule, FormGeneratorService, FormInvalidClassDirective, FormInvalidClassPipe, FormLinkComponent, FormLinkComponent as FormLinkModule, FormSchemaToTableColumnsPipe, FormTabHeadersComponent, FormTabHeadersComponent as FormTabHeadersModule, FormValuePipe, FunctionCaller, FunctionCaller1, FunctionCaller2, FunctionCaller3, GenderPipe, GetColFormattedEPipe, GetColFormattedPipe, GetHeadersPipe, GetRawFieldsPipe, GetValueLabel, GlobalErrorHandlerService, HasFormValuePipe, HasValuePipe, HideDesktopDirective, HideMobileDirective, HtmlerService, HttpListCaller, HttpListCaller1, HttpListCaller2, IdlerComponent, IdlerService, ImageLoaderDirective, ImageUpload, IndexCompLayoutComponent, InfoDialogComponent, InfoDialogModule, InfoDialogService, InfoIconComponent, InfoIconComponent as InfoIconModule, InputBasicComponent, InputClassPipe, InputComponent, InputComponents, InputControlComponent, InputFormatDirective, InputFormatService, InputLabelComponent, InputModule, InputNGModelComponent, InputNGModelComponent as InputNGModelModule, InputPipesModule, InputService, InputTD_RFComponent, InputTableComponent, InputTableService, IntegerOnlyDirective, IsClonePage, IsShowPage, LabelComponent, LabelComponent as LabelModule, Lbl, ListOptionFinderPipe, LoaderComponent, LoaderComponent as LoaderModule, LoaderService, LocalCacheService, Log, LoggerComponent, LoggerInterceptorService, LoggerRoutingModule, LoggerService, MHrefDirective, MobileClassDirective, ModalBodyDirective, ModalComponent, ModalComponents, ModalFooterDirective, ModalFormComponent, ModalFormComponent as ModalFormModule, ModalHeaderComponent, ModalHeaderComponent as ModalHeaderModule, ModalComponent as ModalModule, MouseClickListenerDirective, MouseEnterListenerDirective, MouseLeaveListenerDirective, MrouterLinkirective, NELEventName, NarrationHistoryCompComponent, NativeEventListenerDirectives, NegativeNumberOnlyDirective, NumberFormatService, NumberPipe, ObjectToArrayPipe, ObjectToLabelsPipe, OnClickDirective, OptionLabeller, OptionerPipe, OptionsFormatter, PSDirective, PageCenterBodyComponent, PageLoader, PageLoaderService, PageModal, PageService, PageTemplateComponent, PageTemplateComponent as PageTemplateModule, PageToComponentComponent, PageToComponentDirective, PageToComponentComponent as PageToComponentModule, PageToComponentService, PaginatorComponent, PaginatorPipe, PhoneNumberComponent, PhoneNumberService, PointerMoveListenerDirective, prototypes as Prototypes, RefresherPipe, RemoveUsedOptionsPipe, RemoveUsedOptionsReactivePipe, ReplaceAllPipe, RequestLoggerInterceptorService, RequestTimeoutInterceptorService, ResizeGridPipe, ResponsiveValPipe, ResponsivenessDirective, ReverseTranslateSingleNLPipe, RichTextEditorComponent, RichTextEditorRFComponent, RingRipplesComponent, RoundPipe, RouteItem, RowActionsComponent, RowActionsComponent as RowActionsModule, BaseEffect as SDKBaseEffect, BaseFacadeService as SDKBaseFacadeService, BaseService as SDKBaseService, SDKTranslateNoLoaderPipe, SDKTranslatePipe, SDKTranslateSingleNoLoaderPipe, SDKTranslateSinglePipe, SaverClass, SaverService, SecondsToTimePipe, SharedModule, SortPipe, SpinnerComponent, StorageClass, StrConcatenatorPipe, SvgIconComponent, SvgIconService, TableBaseComponent, TableCol, TableContextPipe, TableHttpsComponent, TableInputClassFunctionPipe, TableInputComponent, TableInputRowComponent, TablePipesModule, TablePlainComponent, TableService, TableToStringPipe, TextAreaModalComponent, TextAreaModalService, TextCase1Component, TextCase2Component, TextCase2ForObject, TextCaseInputComponent, TextCaseService, TextComponent, ToAnyArrayPipe, ToAnyPipe, ToggleInputFormComponent, TranslatePipeModule, TranslationService, TranslatorCaseComponent, TranslatorDirective, TrimPipe, TrimTextPipe, TyperPipe, UserActivity, UserActivityService, UtilityPipesModule, UtilityService, ValidationMessageComponent, ValidationMessageNgmodelComponent, ValidationMsg, Validator, ValueFormatterPipe, ValueOrXPipe, VersionService, VerticalNavComponent, ViewFormButtonsComponent, ViewFormButtonsComponent as ViewFormButtonsModule, WatermarkComponent, WebUserAuthenticationService, WebUserForgotPasswordComponent, WebUserLoginComponent, WebUserResetPasswordComponent, WebcamMediaComponent, XOrYPipe, YearMonthTdRfComponent, _SharedModule, configForms, configPatterns, configValidationMessages, environment, pageErrorRouter, webUserAuthenticationGuard, webUserAuthenticationInterceptor, widthOffsetPipe };
 //# sourceMappingURL=ets-fe-ng-sdk.mjs.map