@smartbit4all/ng-client 7.3.45 → 7.3.47

package/fesm2022/smartbit4all-ng-client.mjs

@@ -16490,6 +16490,9 @@ class SmartTable {
         this.rowStateDisplay = config.rowStateDisplay;
         this.rowStateLabels = config.rowStateLabels;
         this.rowStateColumnLabel = config.rowStateColumnLabel;
+        this.showRowNumbers = config.showRowNumbers;
+        this.rowNumberOffset = config.rowNumberOffset;
+        this.rowNumberColumnLabel = config.rowNumberColumnLabel;
         this.onRowAction = config.onRowAction;
         this.customSmartTableHeaders = config.customSmartTableHeaders;
         if (this.expandable) {
@@ -16870,6 +16873,8 @@ var TreeGridControl;
     TreeGridControl["COLLAPSE_ALL"] = "COLLAPSE_ALL";
 })(TreeGridControl || (TreeGridControl = {}));
 
+/** The id of the column of the row numbers; no property of a row is named so. */
+const ROW_NUMBER_COLUMN = 'sm-row-number';
 /** 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';
 /** The header controls of a tree grid that configures none. */
@@ -16912,6 +16917,8 @@ class Table {
         this.ACTION_SEPERATOR = '_actionSeparator_';
         // ---- Row state column ----
         this.rowStateColumn = ROW_STATE_COLUMN;
+        // ---- Row number column ----
+        this.rowNumberColumn = ROW_NUMBER_COLUMN;
         // ---- Toolbar ----
         this.defaultActionToolbarId = SmartGridToolbarActionsUtil.defaultActionToolbarId;
         /**
@@ -17282,19 +17289,32 @@ class Table {
         return showsRowStateColumn(this.smartTable?.rowStateDisplay);
     }
     /**
-     * The columns of the table: the row state column, when the table shows it, and the headers. The
-     * array is kept while the headers are, so the table does not diff its columns at every check.
+     * The columns of the table: the row state column and the row number column, when the table shows
+     * them, and the headers. The array is kept while these are, so the table does not diff its
+     * columns at every check.
      */
     get displayedColumns() {
         const headers = this.smartTable.tableHeaders;
-        if (!this.showRowStateColumn) {
+        const state = this.showRowStateColumn;
+        const numbers = !!this.smartTable.showRowNumbers;
+        if (!state && !numbers) {
             return headers;
         }
-        if (this.displayedColumnsCache?.headers !== headers) {
-            this.displayedColumnsCache = { headers, columns: [ROW_STATE_COLUMN, ...headers] };
+        const cache = this.displayedColumnsCache;
+        if (cache?.headers !== headers || cache.state !== state || cache.numbers !== numbers) {
+            const columns = [
+                ...(state ? [ROW_STATE_COLUMN] : []),
+                ...(numbers ? [ROW_NUMBER_COLUMN] : []),
+                ...headers,
+            ];
+            this.displayedColumnsCache = { headers, state, numbers, columns };
         }
         return this.displayedColumnsCache.columns;
     }
+    /** The number of the row at the index on its page, counted from 1 across the pages. */
+    rowNumber(index) {
+        return (this.smartTable.rowNumberOffset ?? 0) + index + 1;
+    }
     rowStateIcon(row) {
         return gridRowStateIcon(row);
     }
@@ -17833,11 +17853,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 #myTable mat-table [dataSource]=\"isTreeGrid ? visibleRows : smartTable.tableRows\" class=\"full-width\"\n  multiTemplateDataRows [trackBy]=\"trackRow\">\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n  <caption class=\"captionTitle\">\n    {{ smartTable.title }}\n  </caption>\n  }\n\n  <!-- The row states: first, one icon wide, no header text; not a column of the descriptor. -->\n  <ng-container [matColumnDef]=\"rowStateColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"sm-grid-row-state-cell\" [attr.aria-label]=\"rowStateColumnLabel\"\n      [attr.data-testid]=\"rowStateColumn\"></th>\n    <td mat-cell *matCellDef=\"let element\" class=\"sm-grid-row-state-cell\">\n      @if (rowStateIcon(element); as icon) {\n      <smart-icon class=\"sm-grid-row-state-icon\" [ngClass]=\"rowStateIconClass(element) ?? ''\" [icon]=\"icon\" color=\"\"\n        role=\"img\" [attr.aria-label]=\"rowStateLabel(element)\" [matTooltip]=\"rowStateLabel(element) ?? ''\"></smart-icon>\n      }\n    </td>\n  </ng-container>\n\n  @for (header of smartTable.tableHeaders; track header; let i = $index) {\n\n  <ng-container matColumnDef=\"{{ header }}\">\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n\n      <!-- ==================== TREE ACTIONS ==================== -->\n      @if ( isTreeGrid) {\n      <div class=\"tree-grid-actions\">\n        @for (control of treeGridControls; track control) {\n        <ui-action-button (actionClick)=\"performTreeGridControl(control)\"\n          [descriptor]=\"treeGridControlDescriptor(control)\"\n          [disabled]=\"isTreeGridControlDisabled(control)\"\n          [attr.data-testid]=\"'tree-grid-' + control\">\n        </ui-action-button>\n        }\n      </div>\n      }\n      <!-- ==================== TREE ACTIONS ==================== -->\n\n      <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n    </th>\n    } @else {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n      @if (\n      header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n      ) {\n      <div></div>\n      }\n      @if (header === 'select') {\n      <div>\n        @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n          [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n          [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\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        @if (smartTable.sortable) {\n        @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n        <button (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\" mat-button\n          class=\"sortableHeaderButton\">\n          {{ smartTable.customTableHeaders[i] }}\n          @if (getSortIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortIcon(header)!\"></smart-icon>\n          }\n          @if (hasSortNumIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortNumIcon(header)\"></smart-icon>\n          }\n        </button>\n        }\n        } @else {\n        {{ smartTable.customTableHeaders[i] }}\n        }\n      </div>\n      }\n    </th>\n    }\n\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <div class=\"mat-cell-content\">\n\n\n        <!-- ==================== TREE TOGGLE ==================== -->\n        @if (isTreeGrid && i === 0) {\n        <div class=\"tree-grid-first-column\" [style.padding-left.px]=\"(element.level ?? 0) * 24\">\n          @if (hasChildren(element)) {\n          <button mat-icon-button type=\"button\" (click)=\"toggleRowExpansion(element, $event)\">\n            <smart-icon [icon]=\"\n            isRowExpanded(element)\n              ? 'keyboard_arrow_down'\n              : 'keyboard_arrow_right'\n          \"></smart-icon>\n          </button>\n          } @else {\n          <span class=\"tree-grid-spacer\"></span>\n          }\n\n        </div>\n        }\n        <!-- ==================== TREE TOGGLE ==================== -->\n\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n        !isDisabled(element)\n        ) {\n        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \" [disabled]=\"isDisabled(element)\" [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \" [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \">\n        </mat-checkbox>\n        }\n        @if (\n        smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n        !columnTemplate(i)\n        ) {\n        <div>\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n          <div class=\"smart-table-cell-text\">\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 class=\"smart-table-cell-text\">\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 class=\"smart-table-cell-text\">\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            <smart-icon [smartTooltip]=\"getToolTip(element, i)\" [icon]=\"getIcon(getValue(element, header), i)!\"\n              [color]=\"getColor(getValue(element, header), i)\">\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 class=\"smart-table-buttons-col\">\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 (click)=\"customButtonClicked($event, button, element)\" mat-icon-button color=\"{{ button.color }}\">\n                <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n              </button>\n              }\n              @case (smartTableButtonType.NORMAL) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-button color=\"{{ button.color }}\">\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 (click)=\"customButtonClicked($event, button, element)\" mat-raised-button\n                color=\"{{ button.color }}\">\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 [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                  [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n                  [actionParams]=\"{ model: element }\"\n                  (actionFired)=\"onRowActionFired(element, $event)\"></smart-ui-action-toolbar>\n                <!------ GENERIC HAMBURGER ------>\n                <!------ TOOLBAR ------>\n                @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar [uiActionModels]=\"getMenuActions(element)\" [widgetId]=\"smartTable.getGridId()\"\n                  [nodeId]=\"element.id\" [actionParams]=\"{ model: element }\"\n                  (actionFired)=\"onRowActionFired(element, $event)\"></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 [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n            [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n            [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\">\n          </smart-icon>\n          }\n        </div>\n        }\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].translator !== undefined\n        ) {\n        <div class=\"smart-table-cell-text\">\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 mat-icon-button aria-label=\"expand row\" (click)=\"onToggle(element, $event)\">\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 || columnTemplate(i)) &&\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          @if (header === 'icon') {\n          <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n          }\n          @if (header === 'img') {\n          <img [src]=\"getValue(element, header)\" alt=\"\" class=\"smarttableImg\" />\n          }\n          <!------ TOOLBAR ------>\n          @if (showCellToolbar(element, header)) {\n          <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, header)\"\n            [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n            [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n          }\n          <!------ TOOLBAR ------>\n          @if (columnTemplate(i); as template) {\n          <smart-html-cell [row]=\"element\" [template]=\"template\"\n            [gridIdentifier]=\"smartTable.getGridId()\"></smart-html-cell>\n          } @else if (\n          header !== 'icon' &&\n          header !== 'img' &&\n          header !== 'option' &&\n          header !== 'button' &&\n          !isImageResource(element, header)\n          ) {\n          @if (isTextContent(i)) {\n          <div class=\"smart-table-cell-text\">{{ getValue(element, header) }}</div>\n          } @else {\n          <div class=\"smart-table-cell-text\" [innerHtml]=\"getValue(element, header)\"></div>\n          }\n          }\n        </div>\n        }\n\n      </div>\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]=\"displayedColumns.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=\"displayedColumns; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: displayedColumns\">\n    <tr mat-row class=\"smart-table-row\" [class.smart-table-row-expanded]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\" [ngStyle]=\"getRowStyles(element)\" (click)=\"handleOnRowClick($event, element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\" [attr.data-testid]=\"element?.id ?? null\"></tr>\n\n    @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n    <lib-default-actions-popup #defaultActionMenu [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"></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 mat-row *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\" class=\"smart-table-detail-row\"\n    (animate.leave)=\"onDetailRowLeave($event)\"></tr>\n  }\n</table>", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:var(--color-surface-alt, #f4f6fb)}tr.smart-table-row:not(.smart-table-row-expanded):active{background:var(--color-border, #e4eaf2)}tr.smart-table-row.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}tr.smart-table-row.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}tr.smart-table-row.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}tr.smart-table-row.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}tr.smart-table-row.sm-grid-row-moved{font-style:italic}tr.smart-table-row.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-cell{width:24px;padding:0 4px 0 8px}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}tr.smart-table-row.selected{color:inherit}tr.smart-table-row.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) )}tr.smart-table-row.sm-grid-row-open>td{background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint))}tr.smart-table-row.sm-grid-row-open>td:first-child{box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}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, var(--color-text-muted, #68778e))}.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, var(--color-surface-alt, #f4f6fb))}.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}.menu-button ::ng-deep .uiActionButtonsContainer{flex-wrap:nowrap}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid var(--color-border, #e4eaf2);border-bottom:1px solid var(--color-border, #e4eaf2);background:var(--color-surface-alt, #f4f6fb)}.tree-grid-actions,.mat-cell-content{display:flex;flex-direction:row;align-items:center}.tree-grid-actions{gap:2px}.tree-grid-actions ::ng-deep button.mat-mdc-icon-button{min-width:0;width:28px;height:28px;padding:0;line-height:28px}.tree-grid-actions ::ng-deep .mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.mat-column-my_menu,.tree-grid-column{width:0}.mat-column-my_menu{position:sticky;right:0}td.mat-column-my_menu{z-index:1}.tree-grid-cell{display:flex;align-items:center;min-height:48px}.tree-grid-expand-button{flex:0 0 auto}.tree-grid-spacer{display:inline-block;width:40px;flex:0 0 40px}.tree-grid-label{min-width:0}\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"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { 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", "smartTooltipClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "component", type: SmartHtmlCellComponent, selector: "smart-html-cell", inputs: ["row", "template", "gridIdentifier"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
+    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 #myTable mat-table [dataSource]=\"isTreeGrid ? visibleRows : smartTable.tableRows\" class=\"full-width\"\n  multiTemplateDataRows [trackBy]=\"trackRow\">\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n  <caption class=\"captionTitle\">\n    {{ smartTable.title }}\n  </caption>\n  }\n\n  <!-- The row states: first, one icon wide, no header text; not a column of the descriptor. -->\n  <ng-container [matColumnDef]=\"rowStateColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"sm-grid-row-state-cell\" [attr.aria-label]=\"rowStateColumnLabel\"\n      [attr.data-testid]=\"rowStateColumn\"></th>\n    <td mat-cell *matCellDef=\"let element\" class=\"sm-grid-row-state-cell\">\n      @if (rowStateIcon(element); as icon) {\n      <smart-icon class=\"sm-grid-row-state-icon\" [ngClass]=\"rowStateIconClass(element) ?? ''\" [icon]=\"icon\" color=\"\"\n        role=\"img\" [attr.aria-label]=\"rowStateLabel(element)\" [matTooltip]=\"rowStateLabel(element) ?? ''\"></smart-icon>\n      }\n    </td>\n  </ng-container>\n\n  <!-- The row numbers: after the row states, counted across the pages, no header text; not a column of the descriptor. -->\n  <ng-container [matColumnDef]=\"rowNumberColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"sm-grid-row-number-cell\"\n      [attr.aria-label]=\"smartTable.rowNumberColumnLabel\" [attr.data-testid]=\"rowNumberColumn\"></th>\n    <td mat-cell *matCellDef=\"let element; let i = dataIndex\" class=\"sm-grid-row-number-cell\">{{ rowNumber(i) }}</td>\n  </ng-container>\n\n  @for (header of smartTable.tableHeaders; track header; let i = $index) {\n\n  <ng-container matColumnDef=\"{{ header }}\">\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n\n      <!-- ==================== TREE ACTIONS ==================== -->\n      @if ( isTreeGrid) {\n      <div class=\"tree-grid-actions\">\n        @for (control of treeGridControls; track control) {\n        <ui-action-button (actionClick)=\"performTreeGridControl(control)\"\n          [descriptor]=\"treeGridControlDescriptor(control)\"\n          [disabled]=\"isTreeGridControlDisabled(control)\"\n          [attr.data-testid]=\"'tree-grid-' + control\">\n        </ui-action-button>\n        }\n      </div>\n      }\n      <!-- ==================== TREE ACTIONS ==================== -->\n\n      <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n    </th>\n    } @else {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n      @if (\n      header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n      ) {\n      <div></div>\n      }\n      @if (header === 'select') {\n      <div>\n        @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n          [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n          [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\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        @if (smartTable.sortable) {\n        @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n        <button (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\" mat-button\n          class=\"sortableHeaderButton\">\n          {{ smartTable.customTableHeaders[i] }}\n          @if (getSortIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortIcon(header)!\"></smart-icon>\n          }\n          @if (hasSortNumIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortNumIcon(header)\"></smart-icon>\n          }\n        </button>\n        }\n        } @else {\n        {{ smartTable.customTableHeaders[i] }}\n        }\n      </div>\n      }\n    </th>\n    }\n\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <div class=\"mat-cell-content\">\n\n\n        <!-- ==================== TREE TOGGLE ==================== -->\n        @if (isTreeGrid && i === 0) {\n        <div class=\"tree-grid-first-column\" [style.padding-left.px]=\"(element.level ?? 0) * 24\">\n          @if (hasChildren(element)) {\n          <button mat-icon-button type=\"button\" (click)=\"toggleRowExpansion(element, $event)\">\n            <smart-icon [icon]=\"\n            isRowExpanded(element)\n              ? 'keyboard_arrow_down'\n              : 'keyboard_arrow_right'\n          \"></smart-icon>\n          </button>\n          } @else {\n          <span class=\"tree-grid-spacer\"></span>\n          }\n\n        </div>\n        }\n        <!-- ==================== TREE TOGGLE ==================== -->\n\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n        !isDisabled(element)\n        ) {\n        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \" [disabled]=\"isDisabled(element)\" [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \" [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \">\n        </mat-checkbox>\n        }\n        @if (\n        smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n        !columnTemplate(i)\n        ) {\n        <div>\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n          <div class=\"smart-table-cell-text\">\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 class=\"smart-table-cell-text\">\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 class=\"smart-table-cell-text\">\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            <smart-icon [smartTooltip]=\"getToolTip(element, i)\" [icon]=\"getIcon(getValue(element, header), i)!\"\n              [color]=\"getColor(getValue(element, header), i)\">\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 class=\"smart-table-buttons-col\">\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 (click)=\"customButtonClicked($event, button, element)\" mat-icon-button color=\"{{ button.color }}\">\n                <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n              </button>\n              }\n              @case (smartTableButtonType.NORMAL) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-button color=\"{{ button.color }}\">\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 (click)=\"customButtonClicked($event, button, element)\" mat-raised-button\n                color=\"{{ button.color }}\">\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 [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                  [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n                  [actionParams]=\"{ model: element }\"\n                  (actionFired)=\"onRowActionFired(element, $event)\"></smart-ui-action-toolbar>\n                <!------ GENERIC HAMBURGER ------>\n                <!------ TOOLBAR ------>\n                @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar [uiActionModels]=\"getMenuActions(element)\" [widgetId]=\"smartTable.getGridId()\"\n                  [nodeId]=\"element.id\" [actionParams]=\"{ model: element }\"\n                  (actionFired)=\"onRowActionFired(element, $event)\"></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 [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n            [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n            [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\">\n          </smart-icon>\n          }\n        </div>\n        }\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].translator !== undefined\n        ) {\n        <div class=\"smart-table-cell-text\">\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 mat-icon-button aria-label=\"expand row\" (click)=\"onToggle(element, $event)\">\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 || columnTemplate(i)) &&\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          @if (header === 'icon') {\n          <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n          }\n          @if (header === 'img') {\n          <img [src]=\"getValue(element, header)\" alt=\"\" class=\"smarttableImg\" />\n          }\n          <!------ TOOLBAR ------>\n          @if (showCellToolbar(element, header)) {\n          <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, header)\"\n            [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n            [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n          }\n          <!------ TOOLBAR ------>\n          @if (columnTemplate(i); as template) {\n          <smart-html-cell [row]=\"element\" [template]=\"template\"\n            [gridIdentifier]=\"smartTable.getGridId()\"></smart-html-cell>\n          } @else if (\n          header !== 'icon' &&\n          header !== 'img' &&\n          header !== 'option' &&\n          header !== 'button' &&\n          !isImageResource(element, header)\n          ) {\n          @if (isTextContent(i)) {\n          <div class=\"smart-table-cell-text\">{{ getValue(element, header) }}</div>\n          } @else {\n          <div class=\"smart-table-cell-text\" [innerHtml]=\"getValue(element, header)\"></div>\n          }\n          }\n        </div>\n        }\n\n      </div>\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]=\"displayedColumns.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=\"displayedColumns; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: displayedColumns\">\n    <tr mat-row class=\"smart-table-row\" [class.smart-table-row-expanded]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\" [ngStyle]=\"getRowStyles(element)\" (click)=\"handleOnRowClick($event, element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\" [attr.data-testid]=\"element?.id ?? null\"></tr>\n\n    @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n    <lib-default-actions-popup #defaultActionMenu [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"></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 mat-row *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\" class=\"smart-table-detail-row\"\n    (animate.leave)=\"onDetailRowLeave($event)\"></tr>\n  }\n</table>", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:var(--color-surface-alt, #f4f6fb)}tr.smart-table-row:not(.smart-table-row-expanded):active{background:var(--color-border, #e4eaf2)}tr.smart-table-row.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}tr.smart-table-row.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}tr.smart-table-row.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}tr.smart-table-row.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}tr.smart-table-row.sm-grid-row-moved{font-style:italic}tr.smart-table-row.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-cell{width:24px;padding:0 4px 0 8px}.sm-grid-row-number-cell{width:1%;white-space:nowrap;text-align:end;border-inline-end:1px solid var(--color-border, #e4eaf2)}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}tr.smart-table-row.selected{color:inherit}tr.smart-table-row.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) )}tr.smart-table-row.sm-grid-row-open>td{background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint))}tr.smart-table-row.sm-grid-row-open>td:first-child{box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}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, var(--color-text-muted, #68778e))}.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, var(--color-surface-alt, #f4f6fb))}.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}.menu-button ::ng-deep .uiActionButtonsContainer{flex-wrap:nowrap}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid var(--color-border, #e4eaf2);border-bottom:1px solid var(--color-border, #e4eaf2);background:var(--color-surface-alt, #f4f6fb)}.tree-grid-actions,.mat-cell-content{display:flex;flex-direction:row;align-items:center}.tree-grid-actions{gap:2px}.tree-grid-actions ::ng-deep button.mat-mdc-icon-button{min-width:0;width:28px;height:28px;padding:0;line-height:28px}.tree-grid-actions ::ng-deep .mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.mat-column-my_menu,.tree-grid-column{width:0}.mat-column-my_menu{position:sticky;right:0}td.mat-column-my_menu{z-index:1}.tree-grid-cell{display:flex;align-items:center;min-height:48px}.tree-grid-expand-button{flex:0 0 auto}.tree-grid-spacer{display:inline-block;width:40px;flex:0 0 40px}.tree-grid-label{min-width:0}\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"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { 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", "smartTooltipClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "component", type: SmartHtmlCellComponent, selector: "smart-html-cell", inputs: ["row", "template", "gridIdentifier"] }, { 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', imports: [MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, NgClass, NgStyle, UiActionToolbarComponent, UiActionButtonComponent, MatCheckbox, MatButton, SmartIconComponent, MatCellDef, MatCell, SmartTooltipDirective, MatTooltip, MatIconButton, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, DefaultActionsPopupComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe, SmartHtmlCellComponent], template: "<table #myTable mat-table [dataSource]=\"isTreeGrid ? visibleRows : smartTable.tableRows\" class=\"full-width\"\n  multiTemplateDataRows [trackBy]=\"trackRow\">\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n  <caption class=\"captionTitle\">\n    {{ smartTable.title }}\n  </caption>\n  }\n\n  <!-- The row states: first, one icon wide, no header text; not a column of the descriptor. -->\n  <ng-container [matColumnDef]=\"rowStateColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"sm-grid-row-state-cell\" [attr.aria-label]=\"rowStateColumnLabel\"\n      [attr.data-testid]=\"rowStateColumn\"></th>\n    <td mat-cell *matCellDef=\"let element\" class=\"sm-grid-row-state-cell\">\n      @if (rowStateIcon(element); as icon) {\n      <smart-icon class=\"sm-grid-row-state-icon\" [ngClass]=\"rowStateIconClass(element) ?? ''\" [icon]=\"icon\" color=\"\"\n        role=\"img\" [attr.aria-label]=\"rowStateLabel(element)\" [matTooltip]=\"rowStateLabel(element) ?? ''\"></smart-icon>\n      }\n    </td>\n  </ng-container>\n\n  @for (header of smartTable.tableHeaders; track header; let i = $index) {\n\n  <ng-container matColumnDef=\"{{ header }}\">\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n\n      <!-- ==================== TREE ACTIONS ==================== -->\n      @if ( isTreeGrid) {\n      <div class=\"tree-grid-actions\">\n        @for (control of treeGridControls; track control) {\n        <ui-action-button (actionClick)=\"performTreeGridControl(control)\"\n          [descriptor]=\"treeGridControlDescriptor(control)\"\n          [disabled]=\"isTreeGridControlDisabled(control)\"\n          [attr.data-testid]=\"'tree-grid-' + control\">\n        </ui-action-button>\n        }\n      </div>\n      }\n      <!-- ==================== TREE ACTIONS ==================== -->\n\n      <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n    </th>\n    } @else {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n      @if (\n      header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n      ) {\n      <div></div>\n      }\n      @if (header === 'select') {\n      <div>\n        @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n          [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n          [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\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        @if (smartTable.sortable) {\n        @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n        <button (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\" mat-button\n          class=\"sortableHeaderButton\">\n          {{ smartTable.customTableHeaders[i] }}\n          @if (getSortIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortIcon(header)!\"></smart-icon>\n          }\n          @if (hasSortNumIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortNumIcon(header)\"></smart-icon>\n          }\n        </button>\n        }\n        } @else {\n        {{ smartTable.customTableHeaders[i] }}\n        }\n      </div>\n      }\n    </th>\n    }\n\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <div class=\"mat-cell-content\">\n\n\n        <!-- ==================== TREE TOGGLE ==================== -->\n        @if (isTreeGrid && i === 0) {\n        <div class=\"tree-grid-first-column\" [style.padding-left.px]=\"(element.level ?? 0) * 24\">\n          @if (hasChildren(element)) {\n          <button mat-icon-button type=\"button\" (click)=\"toggleRowExpansion(element, $event)\">\n            <smart-icon [icon]=\"\n            isRowExpanded(element)\n              ? 'keyboard_arrow_down'\n              : 'keyboard_arrow_right'\n          \"></smart-icon>\n          </button>\n          } @else {\n          <span class=\"tree-grid-spacer\"></span>\n          }\n\n        </div>\n        }\n        <!-- ==================== TREE TOGGLE ==================== -->\n\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n        !isDisabled(element)\n        ) {\n        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \" [disabled]=\"isDisabled(element)\" [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \" [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \">\n        </mat-checkbox>\n        }\n        @if (\n        smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n        !columnTemplate(i)\n        ) {\n        <div>\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n          <div class=\"smart-table-cell-text\">\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 class=\"smart-table-cell-text\">\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 class=\"smart-table-cell-text\">\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            <smart-icon [smartTooltip]=\"getToolTip(element, i)\" [icon]=\"getIcon(getValue(element, header), i)!\"\n              [color]=\"getColor(getValue(element, header), i)\">\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 class=\"smart-table-buttons-col\">\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 (click)=\"customButtonClicked($event, button, element)\" mat-icon-button color=\"{{ button.color }}\">\n                <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n              </button>\n              }\n              @case (smartTableButtonType.NORMAL) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-button color=\"{{ button.color }}\">\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 (click)=\"customButtonClicked($event, button, element)\" mat-raised-button\n                color=\"{{ button.color }}\">\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 [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                  [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n                  [actionParams]=\"{ model: element }\"\n                  (actionFired)=\"onRowActionFired(element, $event)\"></smart-ui-action-toolbar>\n                <!------ GENERIC HAMBURGER ------>\n                <!------ TOOLBAR ------>\n                @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar [uiActionModels]=\"getMenuActions(element)\" [widgetId]=\"smartTable.getGridId()\"\n                  [nodeId]=\"element.id\" [actionParams]=\"{ model: element }\"\n                  (actionFired)=\"onRowActionFired(element, $event)\"></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 [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n            [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n            [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\">\n          </smart-icon>\n          }\n        </div>\n        }\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].translator !== undefined\n        ) {\n        <div class=\"smart-table-cell-text\">\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 mat-icon-button aria-label=\"expand row\" (click)=\"onToggle(element, $event)\">\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 || columnTemplate(i)) &&\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          @if (header === 'icon') {\n          <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n          }\n          @if (header === 'img') {\n          <img [src]=\"getValue(element, header)\" alt=\"\" class=\"smarttableImg\" />\n          }\n          <!------ TOOLBAR ------>\n          @if (showCellToolbar(element, header)) {\n          <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, header)\"\n            [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n            [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n          }\n          <!------ TOOLBAR ------>\n          @if (columnTemplate(i); as template) {\n          <smart-html-cell [row]=\"element\" [template]=\"template\"\n            [gridIdentifier]=\"smartTable.getGridId()\"></smart-html-cell>\n          } @else if (\n          header !== 'icon' &&\n          header !== 'img' &&\n          header !== 'option' &&\n          header !== 'button' &&\n          !isImageResource(element, header)\n          ) {\n          @if (isTextContent(i)) {\n          <div class=\"smart-table-cell-text\">{{ getValue(element, header) }}</div>\n          } @else {\n          <div class=\"smart-table-cell-text\" [innerHtml]=\"getValue(element, header)\"></div>\n          }\n          }\n        </div>\n        }\n\n      </div>\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]=\"displayedColumns.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=\"displayedColumns; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: displayedColumns\">\n    <tr mat-row class=\"smart-table-row\" [class.smart-table-row-expanded]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\" [ngStyle]=\"getRowStyles(element)\" (click)=\"handleOnRowClick($event, element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\" [attr.data-testid]=\"element?.id ?? null\"></tr>\n\n    @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n    <lib-default-actions-popup #defaultActionMenu [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"></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 mat-row *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\" class=\"smart-table-detail-row\"\n    (animate.leave)=\"onDetailRowLeave($event)\"></tr>\n  }\n</table>", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:var(--color-surface-alt, #f4f6fb)}tr.smart-table-row:not(.smart-table-row-expanded):active{background:var(--color-border, #e4eaf2)}tr.smart-table-row.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}tr.smart-table-row.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}tr.smart-table-row.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}tr.smart-table-row.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}tr.smart-table-row.sm-grid-row-moved{font-style:italic}tr.smart-table-row.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-cell{width:24px;padding:0 4px 0 8px}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}tr.smart-table-row.selected{color:inherit}tr.smart-table-row.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) )}tr.smart-table-row.sm-grid-row-open>td{background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint))}tr.smart-table-row.sm-grid-row-open>td:first-child{box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}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, var(--color-text-muted, #68778e))}.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, var(--color-surface-alt, #f4f6fb))}.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}.menu-button ::ng-deep .uiActionButtonsContainer{flex-wrap:nowrap}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid var(--color-border, #e4eaf2);border-bottom:1px solid var(--color-border, #e4eaf2);background:var(--color-surface-alt, #f4f6fb)}.tree-grid-actions,.mat-cell-content{display:flex;flex-direction:row;align-items:center}.tree-grid-actions{gap:2px}.tree-grid-actions ::ng-deep button.mat-mdc-icon-button{min-width:0;width:28px;height:28px;padding:0;line-height:28px}.tree-grid-actions ::ng-deep .mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.mat-column-my_menu,.tree-grid-column{width:0}.mat-column-my_menu{position:sticky;right:0}td.mat-column-my_menu{z-index:1}.tree-grid-cell{display:flex;align-items:center;min-height:48px}.tree-grid-expand-button{flex:0 0 auto}.tree-grid-spacer{display:inline-block;width:40px;flex:0 0 40px}.tree-grid-label{min-width:0}\n"] }]
+            args: [{ selector: 'lib-material-table', imports: [MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, NgClass, NgStyle, UiActionToolbarComponent, UiActionButtonComponent, MatCheckbox, MatButton, SmartIconComponent, MatCellDef, MatCell, SmartTooltipDirective, MatTooltip, MatIconButton, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, DefaultActionsPopupComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe, SmartHtmlCellComponent], template: "<table #myTable mat-table [dataSource]=\"isTreeGrid ? visibleRows : smartTable.tableRows\" class=\"full-width\"\n  multiTemplateDataRows [trackBy]=\"trackRow\">\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n  <caption class=\"captionTitle\">\n    {{ smartTable.title }}\n  </caption>\n  }\n\n  <!-- The row states: first, one icon wide, no header text; not a column of the descriptor. -->\n  <ng-container [matColumnDef]=\"rowStateColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"sm-grid-row-state-cell\" [attr.aria-label]=\"rowStateColumnLabel\"\n      [attr.data-testid]=\"rowStateColumn\"></th>\n    <td mat-cell *matCellDef=\"let element\" class=\"sm-grid-row-state-cell\">\n      @if (rowStateIcon(element); as icon) {\n      <smart-icon class=\"sm-grid-row-state-icon\" [ngClass]=\"rowStateIconClass(element) ?? ''\" [icon]=\"icon\" color=\"\"\n        role=\"img\" [attr.aria-label]=\"rowStateLabel(element)\" [matTooltip]=\"rowStateLabel(element) ?? ''\"></smart-icon>\n      }\n    </td>\n  </ng-container>\n\n  <!-- The row numbers: after the row states, counted across the pages, no header text; not a column of the descriptor. -->\n  <ng-container [matColumnDef]=\"rowNumberColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"sm-grid-row-number-cell\"\n      [attr.aria-label]=\"smartTable.rowNumberColumnLabel\" [attr.data-testid]=\"rowNumberColumn\"></th>\n    <td mat-cell *matCellDef=\"let element; let i = dataIndex\" class=\"sm-grid-row-number-cell\">{{ rowNumber(i) }}</td>\n  </ng-container>\n\n  @for (header of smartTable.tableHeaders; track header; let i = $index) {\n\n  <ng-container matColumnDef=\"{{ header }}\">\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n\n      <!-- ==================== TREE ACTIONS ==================== -->\n      @if ( isTreeGrid) {\n      <div class=\"tree-grid-actions\">\n        @for (control of treeGridControls; track control) {\n        <ui-action-button (actionClick)=\"performTreeGridControl(control)\"\n          [descriptor]=\"treeGridControlDescriptor(control)\"\n          [disabled]=\"isTreeGridControlDisabled(control)\"\n          [attr.data-testid]=\"'tree-grid-' + control\">\n        </ui-action-button>\n        }\n      </div>\n      }\n      <!-- ==================== TREE ACTIONS ==================== -->\n\n      <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n    </th>\n    } @else {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n      @if (\n      header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n      ) {\n      <div></div>\n      }\n      @if (header === 'select') {\n      <div>\n        @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n          [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n          [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\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        @if (smartTable.sortable) {\n        @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n        <button (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\" mat-button\n          class=\"sortableHeaderButton\">\n          {{ smartTable.customTableHeaders[i] }}\n          @if (getSortIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortIcon(header)!\"></smart-icon>\n          }\n          @if (hasSortNumIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortNumIcon(header)\"></smart-icon>\n          }\n        </button>\n        }\n        } @else {\n        {{ smartTable.customTableHeaders[i] }}\n        }\n      </div>\n      }\n    </th>\n    }\n\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <div class=\"mat-cell-content\">\n\n\n        <!-- ==================== TREE TOGGLE ==================== -->\n        @if (isTreeGrid && i === 0) {\n        <div class=\"tree-grid-first-column\" [style.padding-left.px]=\"(element.level ?? 0) * 24\">\n          @if (hasChildren(element)) {\n          <button mat-icon-button type=\"button\" (click)=\"toggleRowExpansion(element, $event)\">\n            <smart-icon [icon]=\"\n            isRowExpanded(element)\n              ? 'keyboard_arrow_down'\n              : 'keyboard_arrow_right'\n          \"></smart-icon>\n          </button>\n          } @else {\n          <span class=\"tree-grid-spacer\"></span>\n          }\n\n        </div>\n        }\n        <!-- ==================== TREE TOGGLE ==================== -->\n\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n        !isDisabled(element)\n        ) {\n        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \" [disabled]=\"isDisabled(element)\" [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \" [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \">\n        </mat-checkbox>\n        }\n        @if (\n        smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n        !columnTemplate(i)\n        ) {\n        <div>\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n          <div class=\"smart-table-cell-text\">\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 class=\"smart-table-cell-text\">\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 class=\"smart-table-cell-text\">\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            <smart-icon [smartTooltip]=\"getToolTip(element, i)\" [icon]=\"getIcon(getValue(element, header), i)!\"\n              [color]=\"getColor(getValue(element, header), i)\">\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 class=\"smart-table-buttons-col\">\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 (click)=\"customButtonClicked($event, button, element)\" mat-icon-button color=\"{{ button.color }}\">\n                <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n              </button>\n              }\n              @case (smartTableButtonType.NORMAL) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-button color=\"{{ button.color }}\">\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 (click)=\"customButtonClicked($event, button, element)\" mat-raised-button\n                color=\"{{ button.color }}\">\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 [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                  [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n                  [actionParams]=\"{ model: element }\"\n                  (actionFired)=\"onRowActionFired(element, $event)\"></smart-ui-action-toolbar>\n                <!------ GENERIC HAMBURGER ------>\n                <!------ TOOLBAR ------>\n                @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar [uiActionModels]=\"getMenuActions(element)\" [widgetId]=\"smartTable.getGridId()\"\n                  [nodeId]=\"element.id\" [actionParams]=\"{ model: element }\"\n                  (actionFired)=\"onRowActionFired(element, $event)\"></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 [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n            [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n            [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\">\n          </smart-icon>\n          }\n        </div>\n        }\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].translator !== undefined\n        ) {\n        <div class=\"smart-table-cell-text\">\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 mat-icon-button aria-label=\"expand row\" (click)=\"onToggle(element, $event)\">\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 || columnTemplate(i)) &&\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          @if (header === 'icon') {\n          <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n          }\n          @if (header === 'img') {\n          <img [src]=\"getValue(element, header)\" alt=\"\" class=\"smarttableImg\" />\n          }\n          <!------ TOOLBAR ------>\n          @if (showCellToolbar(element, header)) {\n          <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, header)\"\n            [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n            [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n          }\n          <!------ TOOLBAR ------>\n          @if (columnTemplate(i); as template) {\n          <smart-html-cell [row]=\"element\" [template]=\"template\"\n            [gridIdentifier]=\"smartTable.getGridId()\"></smart-html-cell>\n          } @else if (\n          header !== 'icon' &&\n          header !== 'img' &&\n          header !== 'option' &&\n          header !== 'button' &&\n          !isImageResource(element, header)\n          ) {\n          @if (isTextContent(i)) {\n          <div class=\"smart-table-cell-text\">{{ getValue(element, header) }}</div>\n          } @else {\n          <div class=\"smart-table-cell-text\" [innerHtml]=\"getValue(element, header)\"></div>\n          }\n          }\n        </div>\n        }\n\n      </div>\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]=\"displayedColumns.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=\"displayedColumns; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: displayedColumns\">\n    <tr mat-row class=\"smart-table-row\" [class.smart-table-row-expanded]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\" [ngStyle]=\"getRowStyles(element)\" (click)=\"handleOnRowClick($event, element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\" [attr.data-testid]=\"element?.id ?? null\"></tr>\n\n    @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n    <lib-default-actions-popup #defaultActionMenu [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"></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 mat-row *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\" class=\"smart-table-detail-row\"\n    (animate.leave)=\"onDetailRowLeave($event)\"></tr>\n  }\n</table>", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:var(--color-surface-alt, #f4f6fb)}tr.smart-table-row:not(.smart-table-row-expanded):active{background:var(--color-border, #e4eaf2)}tr.smart-table-row.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}tr.smart-table-row.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}tr.smart-table-row.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}tr.smart-table-row.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}tr.smart-table-row.sm-grid-row-moved{font-style:italic}tr.smart-table-row.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-cell{width:24px;padding:0 4px 0 8px}.sm-grid-row-number-cell{width:1%;white-space:nowrap;text-align:end;border-inline-end:1px solid var(--color-border, #e4eaf2)}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}tr.smart-table-row.selected{color:inherit}tr.smart-table-row.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) )}tr.smart-table-row.sm-grid-row-open>td{background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint))}tr.smart-table-row.sm-grid-row-open>td:first-child{box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}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, var(--color-text-muted, #68778e))}.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, var(--color-surface-alt, #f4f6fb))}.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}.menu-button ::ng-deep .uiActionButtonsContainer{flex-wrap:nowrap}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid var(--color-border, #e4eaf2);border-bottom:1px solid var(--color-border, #e4eaf2);background:var(--color-surface-alt, #f4f6fb)}.tree-grid-actions,.mat-cell-content{display:flex;flex-direction:row;align-items:center}.tree-grid-actions{gap:2px}.tree-grid-actions ::ng-deep button.mat-mdc-icon-button{min-width:0;width:28px;height:28px;padding:0;line-height:28px}.tree-grid-actions ::ng-deep .mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.mat-column-my_menu,.tree-grid-column{width:0}.mat-column-my_menu{position:sticky;right:0}td.mat-column-my_menu{z-index:1}.tree-grid-cell{display:flex;align-items:center;min-height:48px}.tree-grid-expand-button{flex:0 0 auto}.tree-grid-spacer{display:inline-block;width:40px;flex:0 0 40px}.tree-grid-label{min-width:0}\n"] }]
         }] });
 
 class MobileTableComponent extends Table {
@@ -23801,6 +23821,11 @@ class SmartGridComponent {
                 rowStateDisplay: this.smartGrid?.gridModel.view?.descriptor?.rowStateDisplay,
                 rowStateLabels: this.smartGrid?.gridModel.view?.descriptor?.rowStateLabels,
                 rowStateColumnLabel: this.smartGrid?.gridModel.view?.descriptor?.rowStateColumnLabel,
+                // A tree grid has no row numbers: the rows it shows depend on what is expanded.
+                showRowNumbers: this.smartGrid?.layoutDef === SmartLayoutDef.TABLE &&
+                    !!this.smartGrid?.gridModel.view?.descriptor?.showRowNumbers,
+                rowNumberOffset: this.smartGrid?.gridModel.page?.lowerBound ?? 0,
+                rowNumberColumnLabel: this.smartGrid?.gridModel.view?.descriptor?.rowNumberColumnLabel,
                 onRowAction: this.moveOpenRowMark.bind(this),
             };
             if (this.smartGrid?.gridModel.view?.descriptor?.highlightProperty &&
@@ -24480,7 +24505,7 @@ class SmartGridComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartGridComponent, isStandalone: true, selector: "smart-grid", inputs: { smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: false, isRequired: false, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null }, dev: { classPropertyName: "dev", publicName: "dev", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "cardDefaultActionsMenu", first: true, predicate: DefaultActionsPopupComponent, descendants: true }, { propertyName: "expandedRowsComps", predicate: ExpandedRowRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (smartGrid) {\n  <div class=\"smartGrid-container\">\n    <div class=\"smart-grid-toolbar\">\n      <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n      @if (smartGrid.showEditColumns) {\n        <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\n        </ui-action-button>\n      }\n    </div>\n    <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\n    <div class=\"smartGridContent\">\n      <div>\n        @if (smartGrid.showResultCount) {\n          <div>\n            <div class=\"smartGrid-data-number\">\n              {{ smartGrid.gridModel.totalRowCount }}\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"smart-grid-table-container\">\n        <ng-template #table></ng-template>\n      </div>\n      @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\n        <div>\n          @for (expandableSection of expandableSections; track expandableSection) {\n            <smart-expandable-section\n              #gridExpandableSection\n              [data]=\"expandableSection\"\n            ></smart-expandable-section>\n          }\n        </div>\n      }\n      @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n        <div\n          class=\"cards-container\"\n          [ngStyle]=\"{\n            'grid-template-columns':\n              smartGrid.numberOfColumn !== undefined\n                ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n                : '',\n          }\"\n        >\n          @for (row of smartGrid.gridModel.page.rows; track row.id) {\n            <app-smart-grid-card\n              class=\"smartGrid-card-container\"\n              [ngClass]=\"calcRowClasses(row)\"\n              [ngStyle]=\"calcStyle(row.style)\"\n              [class.clickable-row]=\"isCardSelectable(row) || hasCardDefaultAction(row)\"\n              [class.selected]=\"!!row.selected && !!rowLayoutOf(row)\"\n              (click)=\"onCardClick(row, $event)\"\n              (dblclick)=\"onCardDoubleClick(row, $event)\"\n              [item]=\"row\"\n              [layout]=\"rowLayoutOf(row)\"\n              [smartGrid]=\"smartGrid\"\n              [parentLayoutComponent]=\"parentLayoutComponent()\"\n            ></app-smart-grid-card>\n          }\n          @if (cardMenuRow(); as menuRow) {\n            <lib-default-actions-popup\n              [buttons]=\"cardMenuButtons()\"\n              [row]=\"menuRow\"\n            ></lib-default-actions-popup>\n          }\n        </div>\n      }\n      @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n        <div\n          class=\"tree-container\"\n          [ngStyle]=\"{\n            'grid-template-columns':\n              smartGrid.numberOfColumn !== undefined\n                ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n                : '',\n          }\"\n        >\n          <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n            <mat-tree-node\n              *matTreeNodeDef=\"let node\"\n              matTreeNodeToggle\n              matTreeNodePadding\n              matTreeNodePaddingIndent=\"24\"\n            >\n              <button mat-icon-button disabled class=\"tree-button\"></button>\n              <mat-checkbox\n                class=\"checklist-leaf-node\"\n                [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                (change)=\"treeNodeSelectionToggle(node)\"\n                >{{ getTreeItem(node) }}</mat-checkbox\n              >\n            </mat-tree-node>\n            <mat-tree-node\n              *matTreeNodeDef=\"let node; when: hasChild\"\n              matTreeNodePadding\n              matTreeNodePaddingIndent=\"24\"\n            >\n              <button\n                mat-icon-button\n                matTreeNodeToggle\n                class=\"tree-button\"\n                [attr.aria-label]=\"'Toggle ' + node.item\"\n              >\n                <mat-icon fontSet=\"material-symbols-outlined\" class=\"mat-icon-rtl-mirror\">\n                  {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                </mat-icon>\n              </button>\n              <mat-checkbox\n                [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                [indeterminate]=\"descendantsPartiallySelected(node)\"\n                (change)=\"treeNodeSelectionToggle(node)\"\n                >{{ getTreeItem(node) }}</mat-checkbox\n              >\n            </mat-tree-node>\n          </mat-tree>\n        </div>\n      }\n    </div>\n    @if (smartGrid.paginator) {\n      <div class=\"paginator-row-material\">\n        @if (smartGrid.gridModel.refreshEnabled) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Friss\u00EDt\u00E9s\"\n            (click)=\"refreshPartialResults()\"\n          >\n            <mat-icon fontSet=\"material-symbols-outlined\">refresh</mat-icon>\n          </button>\n        }\n        @if (smartGrid.paginator && !treeControl) {\n          <mat-paginator\n            #paginator\n            [length]=\"length\"\n            [pageIndex]=\"pageIndex\"\n            [pageSize]=\"pageSize\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            (page)=\"onChangePage($event)\"\n          ></mat-paginator>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [".smartGrid-container{position:relative;padding:.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:rgb(from var(--color-text, #132033) r g b / .2)}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray, var(--color-text-muted, #68778e))}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}.smartGrid-card-container.selected{outline:2px solid var(--mat-sys-primary, var(--primary-color, #384372))}.smartGrid-card-container.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.smartGrid-card-container.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.smartGrid-card-container.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.smartGrid-card-container.sm-grid-row-moved{font-style:italic}.smartGrid-card-container.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}:host-context(.sm-nav-list) .smartGrid-container{padding-top:0}:host-context(.sm-nav-list) .smart-grid-toolbar:not(:has(ui-action-button,theme-selector,ui-hover-menu,ui-tiered-menu)){display:none}.gridCardLayout>smartform{flex:1}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "parentLayoutComponent", "layout"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartGridComponent, isStandalone: true, selector: "smart-grid", inputs: { smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: false, isRequired: false, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null }, dev: { classPropertyName: "dev", publicName: "dev", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "cardDefaultActionsMenu", first: true, predicate: DefaultActionsPopupComponent, descendants: true }, { propertyName: "expandedRowsComps", predicate: ExpandedRowRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (smartGrid) {\n  <div class=\"smartGrid-container\">\n    <div class=\"smart-grid-toolbar\">\n      <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n      @if (smartGrid.showEditColumns) {\n        <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\n        </ui-action-button>\n      }\n    </div>\n    <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\n    <div class=\"smartGridContent\">\n      <div>\n        @if (smartGrid.showResultCount) {\n          <div>\n            <div class=\"smartGrid-data-number\">\n              {{ smartGrid.gridModel.totalRowCount }}\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"smart-grid-table-container\">\n        <ng-template #table></ng-template>\n      </div>\n      @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\n        <div>\n          @for (expandableSection of expandableSections; track expandableSection) {\n            <smart-expandable-section\n              #gridExpandableSection\n              [data]=\"expandableSection\"\n            ></smart-expandable-section>\n          }\n        </div>\n      }\n      @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n        <div\n          class=\"cards-container\"\n          [ngStyle]=\"{\n            'grid-template-columns':\n              smartGrid.numberOfColumn !== undefined\n                ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n                : '',\n          }\"\n        >\n          @for (row of smartGrid.gridModel.page.rows; track row.id) {\n            <app-smart-grid-card\n              class=\"smartGrid-card-container\"\n              [ngClass]=\"calcRowClasses(row)\"\n              [ngStyle]=\"calcStyle(row.style)\"\n              [class.clickable-row]=\"isCardSelectable(row) || hasCardDefaultAction(row)\"\n              [class.selected]=\"!!row.selected && !!rowLayoutOf(row)\"\n              (click)=\"onCardClick(row, $event)\"\n              (dblclick)=\"onCardDoubleClick(row, $event)\"\n              [item]=\"row\"\n              [layout]=\"rowLayoutOf(row)\"\n              [smartGrid]=\"smartGrid\"\n              [parentLayoutComponent]=\"parentLayoutComponent()\"\n            ></app-smart-grid-card>\n          }\n          @if (cardMenuRow(); as menuRow) {\n            <lib-default-actions-popup\n              [buttons]=\"cardMenuButtons()\"\n              [row]=\"menuRow\"\n            ></lib-default-actions-popup>\n          }\n        </div>\n      }\n      @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n        <div\n          class=\"tree-container\"\n          [ngStyle]=\"{\n            'grid-template-columns':\n              smartGrid.numberOfColumn !== undefined\n                ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n                : '',\n          }\"\n        >\n          <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n            <mat-tree-node\n              *matTreeNodeDef=\"let node\"\n              matTreeNodeToggle\n              matTreeNodePadding\n              matTreeNodePaddingIndent=\"24\"\n            >\n              <button mat-icon-button disabled class=\"tree-button\"></button>\n              <mat-checkbox\n                class=\"checklist-leaf-node\"\n                [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                (change)=\"treeNodeSelectionToggle(node)\"\n                >{{ getTreeItem(node) }}</mat-checkbox\n              >\n            </mat-tree-node>\n            <mat-tree-node\n              *matTreeNodeDef=\"let node; when: hasChild\"\n              matTreeNodePadding\n              matTreeNodePaddingIndent=\"24\"\n            >\n              <button\n                mat-icon-button\n                matTreeNodeToggle\n                class=\"tree-button\"\n                [attr.aria-label]=\"'Toggle ' + node.item\"\n              >\n                <mat-icon fontSet=\"material-symbols-outlined\" class=\"mat-icon-rtl-mirror\">\n                  {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                </mat-icon>\n              </button>\n              <mat-checkbox\n                [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                [indeterminate]=\"descendantsPartiallySelected(node)\"\n                (change)=\"treeNodeSelectionToggle(node)\"\n                >{{ getTreeItem(node) }}</mat-checkbox\n              >\n            </mat-tree-node>\n          </mat-tree>\n        </div>\n      }\n    </div>\n    @if (smartGrid.paginator) {\n      <div class=\"paginator-row-material\">\n        @if (smartGrid.gridModel.refreshEnabled) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Friss\u00EDt\u00E9s\"\n            (click)=\"refreshPartialResults()\"\n          >\n            <mat-icon fontSet=\"material-symbols-outlined\">refresh</mat-icon>\n          </button>\n        }\n        @if (smartGrid.paginator && !treeControl) {\n          <mat-paginator\n            #paginator\n            [length]=\"length\"\n            [pageIndex]=\"pageIndex\"\n            [pageSize]=\"pageSize\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            (page)=\"onChangePage($event)\"\n          ></mat-paginator>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [".smartGrid-container{position:relative;padding:.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{flex:1}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:rgb(from var(--color-text, #132033) r g b / .2)}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray, var(--color-text-muted, #68778e))}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}.smartGrid-card-container.selected{outline:2px solid var(--mat-sys-primary, var(--primary-color, #384372))}.smartGrid-card-container.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.smartGrid-card-container.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.smartGrid-card-container.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.smartGrid-card-container.sm-grid-row-moved{font-style:italic}.smartGrid-card-container.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}:host-context(.sm-nav-list) .smartGrid-container{padding-top:0}:host-context(.sm-nav-list) .smart-grid-toolbar:not(:has(ui-action-button,theme-selector,ui-hover-menu,ui-tiered-menu)){display:none}.gridCardLayout>smartform{flex:1}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "parentLayoutComponent", "layout"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartGridComponent, decorators: [{
             type: Component,
@@ -24503,7 +24528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         MatCheckbox,
                         MatTooltip,
                         MatPaginator,
-                    ], template: "@if (smartGrid) {\n  <div class=\"smartGrid-container\">\n    <div class=\"smart-grid-toolbar\">\n      <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n      @if (smartGrid.showEditColumns) {\n        <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\n        </ui-action-button>\n      }\n    </div>\n    <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\n    <div class=\"smartGridContent\">\n      <div>\n        @if (smartGrid.showResultCount) {\n          <div>\n            <div class=\"smartGrid-data-number\">\n              {{ smartGrid.gridModel.totalRowCount }}\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"smart-grid-table-container\">\n        <ng-template #table></ng-template>\n      </div>\n      @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\n        <div>\n          @for (expandableSection of expandableSections; track expandableSection) {\n            <smart-expandable-section\n              #gridExpandableSection\n              [data]=\"expandableSection\"\n            ></smart-expandable-section>\n          }\n        </div>\n      }\n      @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n        <div\n          class=\"cards-container\"\n          [ngStyle]=\"{\n            'grid-template-columns':\n              smartGrid.numberOfColumn !== undefined\n                ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n                : '',\n          }\"\n        >\n          @for (row of smartGrid.gridModel.page.rows; track row.id) {\n            <app-smart-grid-card\n              class=\"smartGrid-card-container\"\n              [ngClass]=\"calcRowClasses(row)\"\n              [ngStyle]=\"calcStyle(row.style)\"\n              [class.clickable-row]=\"isCardSelectable(row) || hasCardDefaultAction(row)\"\n              [class.selected]=\"!!row.selected && !!rowLayoutOf(row)\"\n              (click)=\"onCardClick(row, $event)\"\n              (dblclick)=\"onCardDoubleClick(row, $event)\"\n              [item]=\"row\"\n              [layout]=\"rowLayoutOf(row)\"\n              [smartGrid]=\"smartGrid\"\n              [parentLayoutComponent]=\"parentLayoutComponent()\"\n            ></app-smart-grid-card>\n          }\n          @if (cardMenuRow(); as menuRow) {\n            <lib-default-actions-popup\n              [buttons]=\"cardMenuButtons()\"\n              [row]=\"menuRow\"\n            ></lib-default-actions-popup>\n          }\n        </div>\n      }\n      @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n        <div\n          class=\"tree-container\"\n          [ngStyle]=\"{\n            'grid-template-columns':\n              smartGrid.numberOfColumn !== undefined\n                ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n                : '',\n          }\"\n        >\n          <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n            <mat-tree-node\n              *matTreeNodeDef=\"let node\"\n              matTreeNodeToggle\n              matTreeNodePadding\n              matTreeNodePaddingIndent=\"24\"\n            >\n              <button mat-icon-button disabled class=\"tree-button\"></button>\n              <mat-checkbox\n                class=\"checklist-leaf-node\"\n                [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                (change)=\"treeNodeSelectionToggle(node)\"\n                >{{ getTreeItem(node) }}</mat-checkbox\n              >\n            </mat-tree-node>\n            <mat-tree-node\n              *matTreeNodeDef=\"let node; when: hasChild\"\n              matTreeNodePadding\n              matTreeNodePaddingIndent=\"24\"\n            >\n              <button\n                mat-icon-button\n                matTreeNodeToggle\n                class=\"tree-button\"\n                [attr.aria-label]=\"'Toggle ' + node.item\"\n              >\n                <mat-icon fontSet=\"material-symbols-outlined\" class=\"mat-icon-rtl-mirror\">\n                  {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                </mat-icon>\n              </button>\n              <mat-checkbox\n                [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                [indeterminate]=\"descendantsPartiallySelected(node)\"\n                (change)=\"treeNodeSelectionToggle(node)\"\n                >{{ getTreeItem(node) }}</mat-checkbox\n              >\n            </mat-tree-node>\n          </mat-tree>\n        </div>\n      }\n    </div>\n    @if (smartGrid.paginator) {\n      <div class=\"paginator-row-material\">\n        @if (smartGrid.gridModel.refreshEnabled) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Friss\u00EDt\u00E9s\"\n            (click)=\"refreshPartialResults()\"\n          >\n            <mat-icon fontSet=\"material-symbols-outlined\">refresh</mat-icon>\n          </button>\n        }\n        @if (smartGrid.paginator && !treeControl) {\n          <mat-paginator\n            #paginator\n            [length]=\"length\"\n            [pageIndex]=\"pageIndex\"\n            [pageSize]=\"pageSize\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            (page)=\"onChangePage($event)\"\n          ></mat-paginator>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [".smartGrid-container{position:relative;padding:.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:rgb(from var(--color-text, #132033) r g b / .2)}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray, var(--color-text-muted, #68778e))}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}.smartGrid-card-container.selected{outline:2px solid var(--mat-sys-primary, var(--primary-color, #384372))}.smartGrid-card-container.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.smartGrid-card-container.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.smartGrid-card-container.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.smartGrid-card-container.sm-grid-row-moved{font-style:italic}.smartGrid-card-container.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}:host-context(.sm-nav-list) .smartGrid-container{padding-top:0}:host-context(.sm-nav-list) .smart-grid-toolbar:not(:has(ui-action-button,theme-selector,ui-hover-menu,ui-tiered-menu)){display:none}.gridCardLayout>smartform{flex:1}\n"] }]
+                    ], template: "@if (smartGrid) {\n  <div class=\"smartGrid-container\">\n    <div class=\"smart-grid-toolbar\">\n      <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n      @if (smartGrid.showEditColumns) {\n        <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\n        </ui-action-button>\n      }\n    </div>\n    <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\n    <div class=\"smartGridContent\">\n      <div>\n        @if (smartGrid.showResultCount) {\n          <div>\n            <div class=\"smartGrid-data-number\">\n              {{ smartGrid.gridModel.totalRowCount }}\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"smart-grid-table-container\">\n        <ng-template #table></ng-template>\n      </div>\n      @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\n        <div>\n          @for (expandableSection of expandableSections; track expandableSection) {\n            <smart-expandable-section\n              #gridExpandableSection\n              [data]=\"expandableSection\"\n            ></smart-expandable-section>\n          }\n        </div>\n      }\n      @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n        <div\n          class=\"cards-container\"\n          [ngStyle]=\"{\n            'grid-template-columns':\n              smartGrid.numberOfColumn !== undefined\n                ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n                : '',\n          }\"\n        >\n          @for (row of smartGrid.gridModel.page.rows; track row.id) {\n            <app-smart-grid-card\n              class=\"smartGrid-card-container\"\n              [ngClass]=\"calcRowClasses(row)\"\n              [ngStyle]=\"calcStyle(row.style)\"\n              [class.clickable-row]=\"isCardSelectable(row) || hasCardDefaultAction(row)\"\n              [class.selected]=\"!!row.selected && !!rowLayoutOf(row)\"\n              (click)=\"onCardClick(row, $event)\"\n              (dblclick)=\"onCardDoubleClick(row, $event)\"\n              [item]=\"row\"\n              [layout]=\"rowLayoutOf(row)\"\n              [smartGrid]=\"smartGrid\"\n              [parentLayoutComponent]=\"parentLayoutComponent()\"\n            ></app-smart-grid-card>\n          }\n          @if (cardMenuRow(); as menuRow) {\n            <lib-default-actions-popup\n              [buttons]=\"cardMenuButtons()\"\n              [row]=\"menuRow\"\n            ></lib-default-actions-popup>\n          }\n        </div>\n      }\n      @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n        <div\n          class=\"tree-container\"\n          [ngStyle]=\"{\n            'grid-template-columns':\n              smartGrid.numberOfColumn !== undefined\n                ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n                : '',\n          }\"\n        >\n          <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n            <mat-tree-node\n              *matTreeNodeDef=\"let node\"\n              matTreeNodeToggle\n              matTreeNodePadding\n              matTreeNodePaddingIndent=\"24\"\n            >\n              <button mat-icon-button disabled class=\"tree-button\"></button>\n              <mat-checkbox\n                class=\"checklist-leaf-node\"\n                [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                (change)=\"treeNodeSelectionToggle(node)\"\n                >{{ getTreeItem(node) }}</mat-checkbox\n              >\n            </mat-tree-node>\n            <mat-tree-node\n              *matTreeNodeDef=\"let node; when: hasChild\"\n              matTreeNodePadding\n              matTreeNodePaddingIndent=\"24\"\n            >\n              <button\n                mat-icon-button\n                matTreeNodeToggle\n                class=\"tree-button\"\n                [attr.aria-label]=\"'Toggle ' + node.item\"\n              >\n                <mat-icon fontSet=\"material-symbols-outlined\" class=\"mat-icon-rtl-mirror\">\n                  {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                </mat-icon>\n              </button>\n              <mat-checkbox\n                [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                [indeterminate]=\"descendantsPartiallySelected(node)\"\n                (change)=\"treeNodeSelectionToggle(node)\"\n                >{{ getTreeItem(node) }}</mat-checkbox\n              >\n            </mat-tree-node>\n          </mat-tree>\n        </div>\n      }\n    </div>\n    @if (smartGrid.paginator) {\n      <div class=\"paginator-row-material\">\n        @if (smartGrid.gridModel.refreshEnabled) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            matTooltip=\"Friss\u00EDt\u00E9s\"\n            (click)=\"refreshPartialResults()\"\n          >\n            <mat-icon fontSet=\"material-symbols-outlined\">refresh</mat-icon>\n          </button>\n        }\n        @if (smartGrid.paginator && !treeControl) {\n          <mat-paginator\n            #paginator\n            [length]=\"length\"\n            [pageIndex]=\"pageIndex\"\n            [pageSize]=\"pageSize\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            (page)=\"onChangePage($event)\"\n          ></mat-paginator>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [".smartGrid-container{position:relative;padding:.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{flex:1}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:rgb(from var(--color-text, #132033) r g b / .2)}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray, var(--color-text-muted, #68778e))}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}.smartGrid-card-container.selected{outline:2px solid var(--mat-sys-primary, var(--primary-color, #384372))}.smartGrid-card-container.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.smartGrid-card-container.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.smartGrid-card-container.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.smartGrid-card-container.sm-grid-row-moved{font-style:italic}.smartGrid-card-container.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}:host-context(.sm-nav-list) .smartGrid-container{padding-top:0}:host-context(.sm-nav-list) .smart-grid-toolbar:not(:has(ui-action-button,theme-selector,ui-hover-menu,ui-tiered-menu)){display:none}.gridCardLayout>smartform{flex:1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { smartGrid: [{
                 type: Input
             }], uuid: [{