@smartbit4all/ng-client 7.0.9 → 7.0.10

package/MIGRATION-7.0.md

@@ -1646,6 +1646,42 @@ Two consequences worth knowing if you style or extend it:
 This shipped in 7.0.0 rather than as a 6.0.3x patch because it is built on the inverted
 widget contract that 7.0 introduces.
 
+### Table detail rows: rendered on demand, `example-*` classes renamed (7.0.10)
+
+The Material table used to define its expandable detail row the way the Angular Material
+example does: a second `matRowDef` rendered under **every** data row, kept at zero height
+with `tr.example-detail-row { height: 0 }` and an `@angular/animations` trigger. Any host
+rule that gave table cells vertical padding, or rows a height, made those empty rows visible
+— the p043 report — and every table carried twice its rows in the DOM.
+
+Now the detail row exists only in an expandable table (`SmartTable.expandable`), and only
+under the row that is expanded. There is nothing a host stylesheet can inflate. Expanding
+and collapsing animate through the native `animate.enter` / `animate.leave` of Angular 20.2+
+(a `grid-template-rows: 0fr ↔ 1fr` keyframe, as `mat-expansion-panel` does it), so the table
+no longer uses `@angular/animations` at all.
+
+The classes lost their `example-` prefix, taken over from the Material sample:
+
+| 6.x | 7.0.10 |
+|---|---|
+| `example-element-row` | `smart-table-row` |
+| `example-expanded-row` | `smart-table-row-expanded` |
+| `example-detail-row` | `smart-table-detail-row` |
+| `example-element-detail` | `smart-table-detail` |
+
+`.example-element-diagram`, `-symbol`, `-description` and `-description-attribution` — the
+sample's own styles, referenced by nothing — are gone.
+
+What to do in a host:
+
+- Rename the classes in any stylesheet that targets them. The usual suspects are a hover
+  rule on `tr.example-element-row:not(.example-expanded-row)` and a
+  `:host ::ng-deep tr.example-detail-row { display: table-row !important }` in a page that
+  expands rows; the latter can simply be deleted, the row is rendered when it is needed.
+- A data row now carries its own bottom border. Before, the always-present detail row drew
+  it, and the data row's border was turned off to avoid a double line. Nothing changes on
+  screen unless you drew your own row separators to compensate.
+
 ### Writing your own widget
 
 `WIDGETS.md`, next to this file, is the protocol: how a widget finds its screen component

package/fesm2022/smartbit4all-ng-client.mjs

@@ -43,7 +43,6 @@ import { MatMenuTrigger, MatContextMenuTrigger, MatMenu, MatMenuItem } from '@an
 import { SelectionModel } from '@angular/cdk/collections';
 import { MatDivider } from '@angular/material/divider';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 import { MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow } from '@angular/material/table';
 import { NestedTreeControl, FlatTreeControl } from '@angular/cdk/tree';
 import { MatTreeNestedDataSource, MatTree, MatTreeNodeDef, MatNestedTreeNode, MatTreeNodeToggle, MatTreeNodeOutlet, MatTreeFlattener, MatTreeFlatDataSource, MatTreeNode, MatTreeNodePadding } from '@angular/material/tree';
@@ -11243,6 +11242,8 @@ class SmartGridToolbarActionsUtil {
     }
 }
 
+/** Id of the detail row's collapse animation, so a second leave call can find the running one. */
+const DETAIL_COLLAPSE = 'smart-table-detail-collapse';
 class Table {
     constructor() {
         this.cfService = inject(ComponentFactoryService);
@@ -11252,6 +11253,8 @@ class Table {
         this.smartTableButtonType = SmartTableButtonType;
         this.highlightedRows = [];
         this.sortEvent = new Subject();
+        /** The `when` predicate of the detail row definition. */
+        this.isExpandedRow = (_index, row) => row === this.expandedElement;
         // Cells to UiAction models, used for toolbars in cells
         this.cellToActionMap = {};
         this.onSelectionChanged = new Subject();
@@ -11265,6 +11268,29 @@ class Table {
     get headerToolbarId() {
         return headerToolbarAddress(this.smartTable?.getGridId());
     }
+    /**
+     * `animate.leave` of the detail row: collapses the detail the way it expanded, then lets
+     * the row go. A class on the detail itself would not do — the row is what leaves, and
+     * Angular does not look for leave animations behind the `mat-row` component boundary.
+     * Angular calls this once for detaching and once for destroying the row; both wait for
+     * the one animation.
+     */
+    onDetailRowLeave(event) {
+        const detail = event.target.querySelector('.smart-table-detail');
+        if (!detail) {
+            event.animationComplete();
+            return;
+        }
+        const collapse = detail.getAnimations().find((animation) => animation.id === DETAIL_COLLAPSE) ??
+            detail.animate([{ gridTemplateRows: '1fr' }, { gridTemplateRows: '0fr' }], {
+                id: DETAIL_COLLAPSE,
+                duration: 225,
+                easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+                fill: 'forwards',
+            });
+        const done = () => event.animationComplete();
+        collapse.finished.then(done, done);
+    }
     ngOnInit() {
         if (this.smartTable.sortable)
             this.sortEvent = new Subject();
@@ -11621,24 +11647,27 @@ class Table {
         if (event) {
             event?.stopPropagation();
         }
-        let oldIndex = this.smartTable.tableRows.findIndex((element) => element === this.expandedElement);
-        if (oldIndex !== -1) {
-            let ref = this.vcRef.filter((element, index) => index === oldIndex);
-            ref[0].clear();
-        }
         this.expandedElement = this.expandedElement === element ? null : element;
-        let newIndex = this.smartTable.tableRows.findIndex((element) => element === this.expandedElement);
+        // The row definitions are re-evaluated on render only: this drops the old detail row
+        // (and the component in it) and creates the new one, then the query picks it up.
+        this.myTableChild.renderRows();
+        this.changeDetector.detectChanges();
+        if (!this.expandedElement) {
+            return;
+        }
+        const container = this.vcRef.first;
         let rowDataResponse;
-        if (newIndex !== -1) {
-            if (this.smartTable.asyncOnExpand) {
-                this.componentRef = this.cfService.createComponent(this.vcRef?.filter((element, index) => index === newIndex)[0], LoadingComponent, new Map());
-                rowDataResponse = await this.smartTable.rowExpander?.expandAsync(newIndex);
-                let ref = this.vcRef.filter((element, index) => index === newIndex)[0];
-                ref.clear();
+        if (this.smartTable.asyncOnExpand) {
+            this.componentRef = this.cfService.createComponent(container, LoadingComponent, new Map());
+            rowDataResponse = await this.smartTable.rowExpander?.expandAsync(this.smartTable.tableRows.indexOf(element));
+            // Another toggle while loading has already replaced this row's detail row.
+            if (this.expandedElement !== element) {
+                return;
             }
-            this.componentRef = this.cfService.createComponent(this.vcRef?.filter((element, index) => index === newIndex)[0], this.smartTable.expandedComponent, new Map([['rowData', rowDataResponse]]));
-            this.element = undefined;
+            container.clear();
         }
+        this.componentRef = this.cfService.createComponent(container, this.smartTable.expandedComponent, new Map([['rowData', rowDataResponse]]));
+        this.element = undefined;
     }
     setSelection(element) {
         if (this.smartTable.maxNumOfSelectableRows &&
@@ -11845,23 +11874,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
 class MaterialTableComponent extends Table {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MaterialTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MaterialTableComponent, isStandalone: true, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table\n  #myTable\n  mat-table\n  [dataSource]=\"smartTable.tableRows\"\n  class=\"full-width\"\n  multiTemplateDataRows\n  >\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n    <caption class=\"captionTitle\">\n      {{ smartTable.title }}\n    </caption>\n  }\n  @for (header of smartTable.tableHeaders; track header; let i = $index) {\n    <ng-container\n      matColumnDef=\"{{ header }}\"\n      >\n      <!-- my_menu is the implicit action column present on all tables: -->\n      @if ('my_menu' === header) {\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n          [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n          [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n          >\n          <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n        </th>\n      } @else {\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n          [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n          [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n          >\n          @if (\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n            ) {\n            <div\n            ></div>\n          }\n          @if (header === 'select') {\n            <div>\n              @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n                <mat-checkbox\n                  (change)=\"$event ? toggleAllRows() : null\"\n                  [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n                  [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\n                  [aria-label]=\"checkboxLabel()\"\n                  >\n                </mat-checkbox>\n              }\n              @if (!smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n                <div>\n                  {{ smartTable.customTableHeaders[i] }}\n                </div>\n              }\n            </div>\n          }\n          @if (\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'options' &&\n            header !== 'button' &&\n            header !== 'select' &&\n            header !== 'expand' &&\n            header !== 'actions'\n            ) {\n            <div\n              >\n              @if (smartTable.sortable) {\n                @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n                  <button\n                    (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\n                    mat-button\n                    class=\"sortableHeaderButton\"\n                    >\n                    {{ smartTable.customTableHeaders[i] }}\n                    @if (getSortIcon(header)) {\n                      <smart-icon\n                        class=\"sortableHeaderButtonIcon\"\n                        title=\"sort\"\n                        [icon]=\"getSortIcon(header)!\"\n                      ></smart-icon>\n                    }\n                    @if (hasSortNumIcon(header)) {\n                      <smart-icon\n                        class=\"sortableHeaderButtonIcon\"\n                        title=\"sort\"\n                        [icon]=\"getSortNumIcon(header)\"\n                      ></smart-icon>\n                    }\n                  </button>\n                }\n              } @else {\n                {{ smartTable.customTableHeaders[i] }}\n              }\n            </div>\n          }\n        </th>\n      }\n      <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n          !isDisabled(element)\n          ) {\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \"\n            [disabled]=\"isDisabled(element)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n            >\n          </mat-checkbox>\n        }\n        @if (\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n          ) {\n          <div\n            >\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n              <div>\n                <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n              </div>\n            }\n            @if (\n              smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n              smartTable.customSmartTableHeaders[i].properties?.icons?.length\n              ) {\n              <div\n                >\n                <smart-icon\n                  [smartTooltip]=\"getToolTip(element, i)\"\n                  [icon]=\"getIcon(getValue(element, header), i)!\"\n                  [color]=\"getColor(getValue(element, header), i)\"\n                  >\n                </smart-icon>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"smart-table-icon-container\">\n          @for (ir of getImageResourceIcons(element, header); track ir) {\n            <div>\n              <smart-icon [imageResource]=\"ir\"> </smart-icon>\n            </div>\n          }\n        </div>\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n          <div\n            class=\"smart-table-buttons-col\"\n            >\n            @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n              <div>\n                @if (showButton(button, element)) {\n                  <div>\n                    @switch (button.type) {\n                      @case (smartTableButtonType.ICON) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-icon-button\n                          color=\"{{ button.color }}\"\n                          >\n                          <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                        </button>\n                      }\n                      @case (smartTableButtonType.NORMAL) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-button\n                          color=\"{{ button.color }}\"\n                          >\n                          @if (button.icon) {\n                            <smart-icon [icon]=\"button.icon\"></smart-icon>\n                          }\n                          {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n                        </button>\n                      }\n                      @case (smartTableButtonType.RAISED) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-raised-button\n                          color=\"{{ button.color }}\"\n                          >\n                          @if (button.icon) {\n                            <smart-icon [icon]=\"button.icon\"></smart-icon>\n                          }\n                          {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n                        </button>\n                      }\n                      <!------ MENU ------>\n                      @case (smartTableButtonType.MENU) {\n                        <div class=\"menu-button\">\n                          <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                          <smart-ui-action-toolbar\n                            [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                            [widgetId]=\"smartTable.getGridId()\"\n                            [nodeId]=\"element.id\"\n                            [actionParams]=\"{ model: element }\"\n                          ></smart-ui-action-toolbar>\n                          <!------ GENERIC HAMBURGER ------>\n                          <!------ TOOLBAR ------>\n                          @if (shouldShowMenuButton(element)) {\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getMenuActions(element)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"element.id\"\n                              [actionParams]=\"{ model: element }\"\n                            ></smart-ui-action-toolbar>\n                          }\n                        </div>\n                      }\n                      <!------ MENU ------>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n          <div>\n            @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n              <smart-icon\n                [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                >\n              </smart-icon>\n            }\n          </div>\n        }\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n          ) {\n          <div\n            >\n            {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n          </div>\n        }\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n          ) {\n          <button\n            mat-icon-button\n            aria-label=\"expand row\"\n            (click)=\"onToggle(element, $event)\"\n            >\n            @if (expandedElement !== element) {\n              <smart-icon [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n            }\n            @if (expandedElement === element) {\n              <smart-icon [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n            }\n          </button>\n        }\n        @if (\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n          !smartTable.customSmartTableHeaders[i].properties &&\n          !smartTable.customSmartTableHeaders[i].icon &&\n          !smartTable.customSmartTableHeaders[i].buttons &&\n          !smartTable.customSmartTableHeaders[i].translator &&\n          !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n          !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n          ) {\n          <div\n            >\n            @if (header === 'icon') {\n              <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n            }\n            @if (header === 'img') {\n              <img\n                [src]=\"getValue(element, header)\"\n                alt=\"\"\n                class=\"smarttableImg\"\n                />\n            }\n            <!------ TOOLBAR ------>\n            @if (showCellToolbar(element, header)) {\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, header)\"\n                [widgetId]=\"smartTable.getGridId()\"\n                [nodeId]=\"element.id\"\n                [actionParams]=\"{ model: element }\"\n              ></smart-ui-action-toolbar>\n            }\n            <!------ TOOLBAR ------>\n            @if (\n              header !== 'icon' &&\n              header !== 'img' &&\n              header !== 'option' &&\n              header !== 'button' &&\n              !isImageResource(element, header)\n              ) {\n              <div\n                [innerHtml]=\"getValue(element, header)\"\n              ></div>\n            }\n          </div>\n        }\n      </td>\n    </ng-container>\n  }\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n      <div\n        class=\"example-element-detail\"\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\n        >\n        <ng-template #expandedArea></ng-template>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr\n      mat-row\n      class=\"example-element-row\"\n      [class.example-expanded-row]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\"\n      [ngStyle]=\"getRowStyles(element)\"\n      (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\n      [attr.data-testid]=\"element?.id ?? null\"\n    ></tr>\n    @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n      <lib-default-actions-popup\n        #defaultActionMenu\n        [buttons]=\"getDefaultActionsForRow(element)!\"\n        [row]=\"element\"\n      ></lib-default-actions-popup>\n    }\n  </ng-container>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\n</table>\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: 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: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }], 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)')),
-            ]),
-        ] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MaterialTableComponent, isStandalone: true, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table\n  #myTable\n  mat-table\n  [dataSource]=\"smartTable.tableRows\"\n  class=\"full-width\"\n  multiTemplateDataRows\n  >\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n    <caption class=\"captionTitle\">\n      {{ smartTable.title }}\n    </caption>\n  }\n  @for (header of smartTable.tableHeaders; track header; let i = $index) {\n    <ng-container\n      matColumnDef=\"{{ header }}\"\n      >\n      <!-- my_menu is the implicit action column present on all tables: -->\n      @if ('my_menu' === header) {\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n          [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n          [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n          >\n          <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n        </th>\n      } @else {\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n          [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n          [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n          >\n          @if (\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n            ) {\n            <div\n            ></div>\n          }\n          @if (header === 'select') {\n            <div>\n              @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n                <mat-checkbox\n                  (change)=\"$event ? toggleAllRows() : null\"\n                  [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n                  [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\n                  [aria-label]=\"checkboxLabel()\"\n                  >\n                </mat-checkbox>\n              }\n              @if (!smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n                <div>\n                  {{ smartTable.customTableHeaders[i] }}\n                </div>\n              }\n            </div>\n          }\n          @if (\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'options' &&\n            header !== 'button' &&\n            header !== 'select' &&\n            header !== 'expand' &&\n            header !== 'actions'\n            ) {\n            <div\n              >\n              @if (smartTable.sortable) {\n                @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n                  <button\n                    (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\n                    mat-button\n                    class=\"sortableHeaderButton\"\n                    >\n                    {{ smartTable.customTableHeaders[i] }}\n                    @if (getSortIcon(header)) {\n                      <smart-icon\n                        class=\"sortableHeaderButtonIcon\"\n                        title=\"sort\"\n                        [icon]=\"getSortIcon(header)!\"\n                      ></smart-icon>\n                    }\n                    @if (hasSortNumIcon(header)) {\n                      <smart-icon\n                        class=\"sortableHeaderButtonIcon\"\n                        title=\"sort\"\n                        [icon]=\"getSortNumIcon(header)\"\n                      ></smart-icon>\n                    }\n                  </button>\n                }\n              } @else {\n                {{ smartTable.customTableHeaders[i] }}\n              }\n            </div>\n          }\n        </th>\n      }\n      <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n          !isDisabled(element)\n          ) {\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \"\n            [disabled]=\"isDisabled(element)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n            >\n          </mat-checkbox>\n        }\n        @if (\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n          ) {\n          <div\n            >\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n              <div>\n                <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n              </div>\n            }\n            @if (\n              smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n              smartTable.customSmartTableHeaders[i].properties?.icons?.length\n              ) {\n              <div\n                >\n                <smart-icon\n                  [smartTooltip]=\"getToolTip(element, i)\"\n                  [icon]=\"getIcon(getValue(element, header), i)!\"\n                  [color]=\"getColor(getValue(element, header), i)\"\n                  >\n                </smart-icon>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"smart-table-icon-container\">\n          @for (ir of getImageResourceIcons(element, header); track ir) {\n            <div>\n              <smart-icon [imageResource]=\"ir\"> </smart-icon>\n            </div>\n          }\n        </div>\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n          <div\n            class=\"smart-table-buttons-col\"\n            >\n            @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n              <div>\n                @if (showButton(button, element)) {\n                  <div>\n                    @switch (button.type) {\n                      @case (smartTableButtonType.ICON) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-icon-button\n                          color=\"{{ button.color }}\"\n                          >\n                          <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                        </button>\n                      }\n                      @case (smartTableButtonType.NORMAL) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-button\n                          color=\"{{ button.color }}\"\n                          >\n                          @if (button.icon) {\n                            <smart-icon [icon]=\"button.icon\"></smart-icon>\n                          }\n                          {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n                        </button>\n                      }\n                      @case (smartTableButtonType.RAISED) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-raised-button\n                          color=\"{{ button.color }}\"\n                          >\n                          @if (button.icon) {\n                            <smart-icon [icon]=\"button.icon\"></smart-icon>\n                          }\n                          {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n                        </button>\n                      }\n                      <!------ MENU ------>\n                      @case (smartTableButtonType.MENU) {\n                        <div class=\"menu-button\">\n                          <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                          <smart-ui-action-toolbar\n                            [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                            [widgetId]=\"smartTable.getGridId()\"\n                            [nodeId]=\"element.id\"\n                            [actionParams]=\"{ model: element }\"\n                          ></smart-ui-action-toolbar>\n                          <!------ GENERIC HAMBURGER ------>\n                          <!------ TOOLBAR ------>\n                          @if (shouldShowMenuButton(element)) {\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getMenuActions(element)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"element.id\"\n                              [actionParams]=\"{ model: element }\"\n                            ></smart-ui-action-toolbar>\n                          }\n                        </div>\n                      }\n                      <!------ MENU ------>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n          <div>\n            @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n              <smart-icon\n                [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                >\n              </smart-icon>\n            }\n          </div>\n        }\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n          ) {\n          <div\n            >\n            {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n          </div>\n        }\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n          ) {\n          <button\n            mat-icon-button\n            aria-label=\"expand row\"\n            (click)=\"onToggle(element, $event)\"\n            >\n            @if (expandedElement !== element) {\n              <smart-icon [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n            }\n            @if (expandedElement === element) {\n              <smart-icon [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n            }\n          </button>\n        }\n        @if (\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n          !smartTable.customSmartTableHeaders[i].properties &&\n          !smartTable.customSmartTableHeaders[i].icon &&\n          !smartTable.customSmartTableHeaders[i].buttons &&\n          !smartTable.customSmartTableHeaders[i].translator &&\n          !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n          !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n          ) {\n          <div\n            >\n            @if (header === 'icon') {\n              <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n            }\n            @if (header === 'img') {\n              <img\n                [src]=\"getValue(element, header)\"\n                alt=\"\"\n                class=\"smarttableImg\"\n                />\n            }\n            <!------ TOOLBAR ------>\n            @if (showCellToolbar(element, header)) {\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, header)\"\n                [widgetId]=\"smartTable.getGridId()\"\n                [nodeId]=\"element.id\"\n                [actionParams]=\"{ model: element }\"\n              ></smart-ui-action-toolbar>\n            }\n            <!------ TOOLBAR ------>\n            @if (\n              header !== 'icon' &&\n              header !== 'img' &&\n              header !== 'option' &&\n              header !== 'button' &&\n              !isImageResource(element, header)\n              ) {\n              <div\n                [innerHtml]=\"getValue(element, header)\"\n              ></div>\n            }\n          </div>\n        }\n      </td>\n    </ng-container>\n  }\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  @if (smartTable.expandable) {\n    <ng-container matColumnDef=\"expandedDetail\">\n      <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n        <div class=\"smart-table-detail\" animate.enter=\"smart-table-detail-enter\">\n          <div class=\"smart-table-detail-content\">\n            <ng-template #expandedArea></ng-template>\n          </div>\n        </div>\n      </td>\n    </ng-container>\n  }\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr\n      mat-row\n      class=\"smart-table-row\"\n      [class.smart-table-row-expanded]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\"\n      [ngStyle]=\"getRowStyles(element)\"\n      (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\n      [attr.data-testid]=\"element?.id ?? null\"\n    ></tr>\n    @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n      <lib-default-actions-popup\n        #defaultActionMenu\n        [buttons]=\"getDefaultActionsForRow(element)!\"\n        [row]=\"element\"\n      ></lib-default-actions-popup>\n    }\n  </ng-container>\n  <!-- Only the expanded row has a detail row; no host style can give a collapsed one a height. -->\n  @if (smartTable.expandable) {\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n      class=\"smart-table-detail-row\"\n      (animate.leave)=\"onDetailRowLeave($event)\"\n    ></tr>\n  }\n</table>\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:#f5f5f5}tr.smart-table-row:not(.smart-table-row-expanded):active{background:#efefef}tr.smart-table-row-expanded td{border-bottom-width:0}tr.smart-table-detail-row{height:0}.smart-table-detail{display:grid;grid-template-rows:1fr}.smart-table-detail-enter{animation:smart-table-detail-expand 225ms cubic-bezier(.4,0,.2,1)}.smart-table-detail-content{min-height:0;overflow:hidden}@keyframes smart-table-detail-expand{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: 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: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MaterialTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-material-table', 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)')),
-                        ]),
-                    ], imports: [MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, NgClass, NgStyle, UiActionToolbarComponent, MatCheckbox, MatButton, SmartIconComponent, MatCellDef, MatCell, SmartTooltipDirective, MatIconButton, MatMenuTrigger, MatMenu, MatMenuItem, MatDivider, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, DefaultActionsPopupComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe], template: "<table\n  #myTable\n  mat-table\n  [dataSource]=\"smartTable.tableRows\"\n  class=\"full-width\"\n  multiTemplateDataRows\n  >\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n    <caption class=\"captionTitle\">\n      {{ smartTable.title }}\n    </caption>\n  }\n  @for (header of smartTable.tableHeaders; track header; let i = $index) {\n    <ng-container\n      matColumnDef=\"{{ header }}\"\n      >\n      <!-- my_menu is the implicit action column present on all tables: -->\n      @if ('my_menu' === header) {\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n          [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n          [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n          >\n          <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n        </th>\n      } @else {\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n          [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n          [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n          >\n          @if (\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n            ) {\n            <div\n            ></div>\n          }\n          @if (header === 'select') {\n            <div>\n              @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n                <mat-checkbox\n                  (change)=\"$event ? toggleAllRows() : null\"\n                  [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n                  [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\n                  [aria-label]=\"checkboxLabel()\"\n                  >\n                </mat-checkbox>\n              }\n              @if (!smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n                <div>\n                  {{ smartTable.customTableHeaders[i] }}\n                </div>\n              }\n            </div>\n          }\n          @if (\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'options' &&\n            header !== 'button' &&\n            header !== 'select' &&\n            header !== 'expand' &&\n            header !== 'actions'\n            ) {\n            <div\n              >\n              @if (smartTable.sortable) {\n                @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n                  <button\n                    (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\n                    mat-button\n                    class=\"sortableHeaderButton\"\n                    >\n                    {{ smartTable.customTableHeaders[i] }}\n                    @if (getSortIcon(header)) {\n                      <smart-icon\n                        class=\"sortableHeaderButtonIcon\"\n                        title=\"sort\"\n                        [icon]=\"getSortIcon(header)!\"\n                      ></smart-icon>\n                    }\n                    @if (hasSortNumIcon(header)) {\n                      <smart-icon\n                        class=\"sortableHeaderButtonIcon\"\n                        title=\"sort\"\n                        [icon]=\"getSortNumIcon(header)\"\n                      ></smart-icon>\n                    }\n                  </button>\n                }\n              } @else {\n                {{ smartTable.customTableHeaders[i] }}\n              }\n            </div>\n          }\n        </th>\n      }\n      <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n          !isDisabled(element)\n          ) {\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \"\n            [disabled]=\"isDisabled(element)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n            >\n          </mat-checkbox>\n        }\n        @if (\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n          ) {\n          <div\n            >\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n              <div>\n                <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n              </div>\n            }\n            @if (\n              smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n              smartTable.customSmartTableHeaders[i].properties?.icons?.length\n              ) {\n              <div\n                >\n                <smart-icon\n                  [smartTooltip]=\"getToolTip(element, i)\"\n                  [icon]=\"getIcon(getValue(element, header), i)!\"\n                  [color]=\"getColor(getValue(element, header), i)\"\n                  >\n                </smart-icon>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"smart-table-icon-container\">\n          @for (ir of getImageResourceIcons(element, header); track ir) {\n            <div>\n              <smart-icon [imageResource]=\"ir\"> </smart-icon>\n            </div>\n          }\n        </div>\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n          <div\n            class=\"smart-table-buttons-col\"\n            >\n            @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n              <div>\n                @if (showButton(button, element)) {\n                  <div>\n                    @switch (button.type) {\n                      @case (smartTableButtonType.ICON) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-icon-button\n                          color=\"{{ button.color }}\"\n                          >\n                          <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                        </button>\n                      }\n                      @case (smartTableButtonType.NORMAL) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-button\n                          color=\"{{ button.color }}\"\n                          >\n                          @if (button.icon) {\n                            <smart-icon [icon]=\"button.icon\"></smart-icon>\n                          }\n                          {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n                        </button>\n                      }\n                      @case (smartTableButtonType.RAISED) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-raised-button\n                          color=\"{{ button.color }}\"\n                          >\n                          @if (button.icon) {\n                            <smart-icon [icon]=\"button.icon\"></smart-icon>\n                          }\n                          {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n                        </button>\n                      }\n                      <!------ MENU ------>\n                      @case (smartTableButtonType.MENU) {\n                        <div class=\"menu-button\">\n                          <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                          <smart-ui-action-toolbar\n                            [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                            [widgetId]=\"smartTable.getGridId()\"\n                            [nodeId]=\"element.id\"\n                            [actionParams]=\"{ model: element }\"\n                          ></smart-ui-action-toolbar>\n                          <!------ GENERIC HAMBURGER ------>\n                          <!------ TOOLBAR ------>\n                          @if (shouldShowMenuButton(element)) {\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getMenuActions(element)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"element.id\"\n                              [actionParams]=\"{ model: element }\"\n                            ></smart-ui-action-toolbar>\n                          }\n                        </div>\n                      }\n                      <!------ MENU ------>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n          <div>\n            @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n              <smart-icon\n                [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                >\n              </smart-icon>\n            }\n          </div>\n        }\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n          ) {\n          <div\n            >\n            {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n          </div>\n        }\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n          ) {\n          <button\n            mat-icon-button\n            aria-label=\"expand row\"\n            (click)=\"onToggle(element, $event)\"\n            >\n            @if (expandedElement !== element) {\n              <smart-icon [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n            }\n            @if (expandedElement === element) {\n              <smart-icon [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n            }\n          </button>\n        }\n        @if (\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n          !smartTable.customSmartTableHeaders[i].properties &&\n          !smartTable.customSmartTableHeaders[i].icon &&\n          !smartTable.customSmartTableHeaders[i].buttons &&\n          !smartTable.customSmartTableHeaders[i].translator &&\n          !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n          !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n          ) {\n          <div\n            >\n            @if (header === 'icon') {\n              <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n            }\n            @if (header === 'img') {\n              <img\n                [src]=\"getValue(element, header)\"\n                alt=\"\"\n                class=\"smarttableImg\"\n                />\n            }\n            <!------ TOOLBAR ------>\n            @if (showCellToolbar(element, header)) {\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, header)\"\n                [widgetId]=\"smartTable.getGridId()\"\n                [nodeId]=\"element.id\"\n                [actionParams]=\"{ model: element }\"\n              ></smart-ui-action-toolbar>\n            }\n            <!------ TOOLBAR ------>\n            @if (\n              header !== 'icon' &&\n              header !== 'img' &&\n              header !== 'option' &&\n              header !== 'button' &&\n              !isImageResource(element, header)\n              ) {\n              <div\n                [innerHtml]=\"getValue(element, header)\"\n              ></div>\n            }\n          </div>\n        }\n      </td>\n    </ng-container>\n  }\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n      <div\n        class=\"example-element-detail\"\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\n        >\n        <ng-template #expandedArea></ng-template>\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr\n      mat-row\n      class=\"example-element-row\"\n      [class.example-expanded-row]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\"\n      [ngStyle]=\"getRowStyles(element)\"\n      (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\n      [attr.data-testid]=\"element?.id ?? null\"\n    ></tr>\n    @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n      <lib-default-actions-popup\n        #defaultActionMenu\n        [buttons]=\"getDefaultActionsForRow(element)!\"\n        [row]=\"element\"\n      ></lib-default-actions-popup>\n    }\n  </ng-container>\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\n</table>\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"] }]
+            args: [{ selector: 'lib-material-table', imports: [MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, NgClass, NgStyle, UiActionToolbarComponent, MatCheckbox, MatButton, SmartIconComponent, MatCellDef, MatCell, SmartTooltipDirective, MatIconButton, MatMenuTrigger, MatMenu, MatMenuItem, MatDivider, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, DefaultActionsPopupComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe], template: "<table\n  #myTable\n  mat-table\n  [dataSource]=\"smartTable.tableRows\"\n  class=\"full-width\"\n  multiTemplateDataRows\n  >\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n    <caption class=\"captionTitle\">\n      {{ smartTable.title }}\n    </caption>\n  }\n  @for (header of smartTable.tableHeaders; track header; let i = $index) {\n    <ng-container\n      matColumnDef=\"{{ header }}\"\n      >\n      <!-- my_menu is the implicit action column present on all tables: -->\n      @if ('my_menu' === header) {\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n          [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n          [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n          >\n          <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n        </th>\n      } @else {\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n          [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n          [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\n          >\n          @if (\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n            ) {\n            <div\n            ></div>\n          }\n          @if (header === 'select') {\n            <div>\n              @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n                <mat-checkbox\n                  (change)=\"$event ? toggleAllRows() : null\"\n                  [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n                  [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\n                  [aria-label]=\"checkboxLabel()\"\n                  >\n                </mat-checkbox>\n              }\n              @if (!smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n                <div>\n                  {{ smartTable.customTableHeaders[i] }}\n                </div>\n              }\n            </div>\n          }\n          @if (\n            header !== 'icon' &&\n            header !== 'img' &&\n            header !== 'options' &&\n            header !== 'button' &&\n            header !== 'select' &&\n            header !== 'expand' &&\n            header !== 'actions'\n            ) {\n            <div\n              >\n              @if (smartTable.sortable) {\n                @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n                  <button\n                    (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\n                    mat-button\n                    class=\"sortableHeaderButton\"\n                    >\n                    {{ smartTable.customTableHeaders[i] }}\n                    @if (getSortIcon(header)) {\n                      <smart-icon\n                        class=\"sortableHeaderButtonIcon\"\n                        title=\"sort\"\n                        [icon]=\"getSortIcon(header)!\"\n                      ></smart-icon>\n                    }\n                    @if (hasSortNumIcon(header)) {\n                      <smart-icon\n                        class=\"sortableHeaderButtonIcon\"\n                        title=\"sort\"\n                        [icon]=\"getSortNumIcon(header)\"\n                      ></smart-icon>\n                    }\n                  </button>\n                }\n              } @else {\n                {{ smartTable.customTableHeaders[i] }}\n              }\n            </div>\n          }\n        </th>\n      }\n      <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n          !isDisabled(element)\n          ) {\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \"\n            [disabled]=\"isDisabled(element)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \"\n            >\n          </mat-checkbox>\n        }\n        @if (\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n          ) {\n          <div\n            >\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n              <div>\n                {{\n                getValue(element, header)\n                | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                }}\n              </div>\n            }\n            @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n              <div>\n                <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n              </div>\n            }\n            @if (\n              smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n              smartTable.customSmartTableHeaders[i].properties?.icons?.length\n              ) {\n              <div\n                >\n                <smart-icon\n                  [smartTooltip]=\"getToolTip(element, i)\"\n                  [icon]=\"getIcon(getValue(element, header), i)!\"\n                  [color]=\"getColor(getValue(element, header), i)\"\n                  >\n                </smart-icon>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"smart-table-icon-container\">\n          @for (ir of getImageResourceIcons(element, header); track ir) {\n            <div>\n              <smart-icon [imageResource]=\"ir\"> </smart-icon>\n            </div>\n          }\n        </div>\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n          <div\n            class=\"smart-table-buttons-col\"\n            >\n            @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n              <div>\n                @if (showButton(button, element)) {\n                  <div>\n                    @switch (button.type) {\n                      @case (smartTableButtonType.ICON) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-icon-button\n                          color=\"{{ button.color }}\"\n                          >\n                          <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                        </button>\n                      }\n                      @case (smartTableButtonType.NORMAL) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-button\n                          color=\"{{ button.color }}\"\n                          >\n                          @if (button.icon) {\n                            <smart-icon [icon]=\"button.icon\"></smart-icon>\n                          }\n                          {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n                        </button>\n                      }\n                      @case (smartTableButtonType.RAISED) {\n                        <button\n                          (click)=\"customButtonClicked($event, button, element)\"\n                          mat-raised-button\n                          color=\"{{ button.color }}\"\n                          >\n                          @if (button.icon) {\n                            <smart-icon [icon]=\"button.icon\"></smart-icon>\n                          }\n                          {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n                        </button>\n                      }\n                      <!------ MENU ------>\n                      @case (smartTableButtonType.MENU) {\n                        <div class=\"menu-button\">\n                          <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                          <smart-ui-action-toolbar\n                            [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                            [widgetId]=\"smartTable.getGridId()\"\n                            [nodeId]=\"element.id\"\n                            [actionParams]=\"{ model: element }\"\n                          ></smart-ui-action-toolbar>\n                          <!------ GENERIC HAMBURGER ------>\n                          <!------ TOOLBAR ------>\n                          @if (shouldShowMenuButton(element)) {\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getMenuActions(element)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"element.id\"\n                              [actionParams]=\"{ model: element }\"\n                            ></smart-ui-action-toolbar>\n                          }\n                        </div>\n                      }\n                      <!------ MENU ------>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n          <div>\n            @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n              <smart-icon\n                [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                >\n              </smart-icon>\n            }\n          </div>\n        }\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].translator !== undefined\n          ) {\n          <div\n            >\n            {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n          </div>\n        }\n        @if (\n          smartTable.customSmartTableHeaders &&\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n          ) {\n          <button\n            mat-icon-button\n            aria-label=\"expand row\"\n            (click)=\"onToggle(element, $event)\"\n            >\n            @if (expandedElement !== element) {\n              <smart-icon [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n            }\n            @if (expandedElement === element) {\n              <smart-icon [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n            }\n          </button>\n        }\n        @if (\n          !smartTable.customSmartTableHeaders ||\n          (smartTable.customSmartTableHeaders &&\n          !smartTable.customSmartTableHeaders[i].properties &&\n          !smartTable.customSmartTableHeaders[i].icon &&\n          !smartTable.customSmartTableHeaders[i].buttons &&\n          !smartTable.customSmartTableHeaders[i].translator &&\n          !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n          !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n          ) {\n          <div\n            >\n            @if (header === 'icon') {\n              <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n            }\n            @if (header === 'img') {\n              <img\n                [src]=\"getValue(element, header)\"\n                alt=\"\"\n                class=\"smarttableImg\"\n                />\n            }\n            <!------ TOOLBAR ------>\n            @if (showCellToolbar(element, header)) {\n              <smart-ui-action-toolbar\n                [uiActionModels]=\"getRowColumnAction(element, header)\"\n                [widgetId]=\"smartTable.getGridId()\"\n                [nodeId]=\"element.id\"\n                [actionParams]=\"{ model: element }\"\n              ></smart-ui-action-toolbar>\n            }\n            <!------ TOOLBAR ------>\n            @if (\n              header !== 'icon' &&\n              header !== 'img' &&\n              header !== 'option' &&\n              header !== 'button' &&\n              !isImageResource(element, header)\n              ) {\n              <div\n                [innerHtml]=\"getValue(element, header)\"\n              ></div>\n            }\n          </div>\n        }\n      </td>\n    </ng-container>\n  }\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  @if (smartTable.expandable) {\n    <ng-container matColumnDef=\"expandedDetail\">\n      <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n        <div class=\"smart-table-detail\" animate.enter=\"smart-table-detail-enter\">\n          <div class=\"smart-table-detail-content\">\n            <ng-template #expandedArea></ng-template>\n          </div>\n        </div>\n      </td>\n    </ng-container>\n  }\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr\n      mat-row\n      class=\"smart-table-row\"\n      [class.smart-table-row-expanded]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\"\n      [ngStyle]=\"getRowStyles(element)\"\n      (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\n      [attr.data-testid]=\"element?.id ?? null\"\n    ></tr>\n    @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n      <lib-default-actions-popup\n        #defaultActionMenu\n        [buttons]=\"getDefaultActionsForRow(element)!\"\n        [row]=\"element\"\n      ></lib-default-actions-popup>\n    }\n  </ng-container>\n  <!-- Only the expanded row has a detail row; no host style can give a collapsed one a height. -->\n  @if (smartTable.expandable) {\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n      class=\"smart-table-detail-row\"\n      (animate.leave)=\"onDetailRowLeave($event)\"\n    ></tr>\n  }\n</table>\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:#f5f5f5}tr.smart-table-row:not(.smart-table-row-expanded):active{background:#efefef}tr.smart-table-row-expanded td{border-bottom-width:0}tr.smart-table-detail-row{height:0}.smart-table-detail{display:grid;grid-template-rows:1fr}.smart-table-detail-enter{animation:smart-table-detail-expand 225ms cubic-bezier(.4,0,.2,1)}.smart-table-detail-content{min-height:0;overflow:hidden}@keyframes smart-table-detail-expand{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"] }]
         }] });
 
 class MobileTableComponent extends Table {