@smartbit4all/ng-client 6.0.30 → 6.0.32

package/fesm2022/smartbit4all-ng-client.mjs

@@ -7183,6 +7183,10 @@ class UiActionToolbarComponent {
             setTimeout(() => this.checkScrollable());
         }
     }
+    setActionModels(models) {
+        this.uiActionModels = models;
+        this.setUp();
+    }
     clearSchedule() {
         this.schedules.forEach((sub) => sub.unsubscribe());
         this.schedules.clear();
@@ -11423,8 +11427,6 @@ class Table {
     }
     renderRows() {
         this.createCellToActionMap();
-        this.rowMenuActionModelCache.clear();
-        this.rowMenuActionModelArrayCache.clear();
         this.myTableChild.renderRows();
     }
     createCellToActionMap() {
@@ -11467,6 +11469,12 @@ class Table {
             throw new Error(`Button with name ${button.label || button.icon} does not have a callback!`);
         }
         button.callback(button.args, element, btn);
+        if (close) {
+            let openMenus = this.triggers.filter((matMenuTrigger) => matMenuTrigger.menuOpen);
+            openMenus.forEach((matMenuTrigger) => {
+                matMenuTrigger.closeMenu();
+            });
+        }
     }
     isSortable(header) {
         let isSortableTable = this.smartTable.sortable;
@@ -11771,6 +11779,26 @@ class Table {
             this.smartTable.onSelection(element);
         }
     }
+    showMenuButton(element, button) {
+        let headers = this.smartTable.tableHeaders.map((header) => this.originalProperty(header));
+        let showMenu = SmartGridToolbarActionsUtil.showMenu(element, headers);
+        if (!showMenu) {
+            return false;
+        }
+        if (button.menuItemButtons) {
+            return true;
+        }
+        else if (button.menuItemButtonsPropertyName) {
+            try {
+                let length = this.getValue(element, button.menuItemButtonsPropertyName).length;
+                return length > 0;
+            }
+            catch (error) {
+                return false;
+            }
+        }
+        return false;
+    }
     getValue(element, header) {
         return SmartObjectUtility.getValueByPath(element, header);
     }
@@ -11894,8 +11922,35 @@ class Table {
     shouldShowMenuButton(row) {
         return SmartGridToolbarActionsUtil.showMenu(row, this.smartTable.tableHeaders);
     }
+    // OLD STUFF
+    getMenuButtons(row, button) {
+        let columnActions = row.columnActions ?? {};
+        // Filter for columnActions that are in a columnAction, but the column is not in the headers
+        let filteredActionColumns = Object.keys(columnActions)
+            .filter((key) => this.smartTable.tableHeaders.includes('data.' + key))
+            .reduce((acc, key) => {
+            acc[key] = columnActions[key];
+            return acc;
+        }, {});
+        let columnCodes = Object.values(filteredActionColumns).flat();
+        return (button.menuItemButtons || []).filter((btn) => !columnCodes.includes(btn.code));
+    }
+    getMenuItemButtonsPropertyName(element, button) {
+        let buttons = this.getValue(element, button.menuItemButtonsPropertyName);
+        let gridRow = element;
+        let columnActions = gridRow.columnActions ?? {};
+        // Filter for columnActions that are in a columnAction, but the column is not in the headers
+        let filteredActionColumns = Object.keys(columnActions)
+            .filter((key) => this.smartTable.tableHeaders.includes('data.' + key))
+            .reduce((acc, key) => {
+            acc[key] = columnActions[key];
+            return acc;
+        }, {});
+        let columnCodes = Object.values(filteredActionColumns || {}).flat();
+        return buttons?.filter((button) => !columnCodes.includes(button.code));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Table, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: Table, selector: "ng-component", inputs: { smartTable: "smartTable" }, viewQueries: [{ propertyName: "myTableChild", first: true, predicate: ["myTable"], descendants: true }, { propertyName: "headerToolbar", first: true, predicate: ["headerToolbar"], descendants: true }, { propertyName: "vcRef", predicate: ["expandedArea"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultActionMenuComponents", predicate: DefaultActionsPopupComponent, descendants: true }], ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: Table, selector: "ng-component", inputs: { smartTable: "smartTable" }, viewQueries: [{ propertyName: "myTableChild", first: true, predicate: ["myTable"], descendants: true }, { propertyName: "headerToolbar", first: true, predicate: ["headerToolbar"], descendants: true }, { propertyName: "vcRef", predicate: ["expandedArea"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultActionMenuComponents", predicate: DefaultActionsPopupComponent, descendants: true }, { propertyName: "triggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Table, decorators: [{
             type: Component,
@@ -11916,6 +11971,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 args: ['headerToolbar']
             }], smartTable: [{
                 type: Input
+            }], triggers: [{
+                type: ViewChildren,
+                args: [MatMenuTrigger]
             }] } });
 
 class SmartDatePipe extends DatePipe {
@@ -11963,7 +12021,7 @@ class MaterialTableComponent extends Table {
         super(cfService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MaterialTableComponent, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: MaterialTableComponent, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table\r\n  #myTable\r\n  mat-table\r\n  [dataSource]=\"smartTable.tableRows\"\r\n  class=\"full-width\"\r\n  multiTemplateDataRows\r\n>\r\n  <!-- Column Descriptor -->\r\n  @if (smartTable.title) {\r\n    <caption *ngIf=\"smartTable.title\" class=\"captionTitle\">\r\n      {{ smartTable.title }}\r\n    </caption>\r\n  }\r\n  <ng-container\r\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\r\n    matColumnDef=\"{{ header }}\"\r\n  >\r\n    <!-- my_menu is the implicit action column present on all tables: -->\r\n    @if ('my_menu' === header) {\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\r\n      >\r\n        <smart-ui-action-toolbar\r\n          #headerToolbar\r\n          [id]=\"\r\n            smartTable.getGridId()\r\n              ? smartTable.getGridId() + '_headerToolbar'\r\n              : 'grid_not_initialized'\r\n          \"\r\n        >\r\n        </smart-ui-action-toolbar>\r\n      </th>\r\n    } @else {\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\r\n      >\r\n        <div\r\n          *ngIf=\"\r\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\r\n          \"\r\n        ></div>\r\n        <div *ngIf=\"header === 'select'\">\r\n          <mat-checkbox\r\n            *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\r\n            (change)=\"$event ? toggleAllRows() : null\"\r\n            [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\r\n            [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\r\n            [aria-label]=\"checkboxLabel()\"\r\n          >\r\n          </mat-checkbox>\r\n          <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\r\n            {{ smartTable.customTableHeaders[i] }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            header !== 'icon' &&\r\n            header !== 'img' &&\r\n            header !== 'options' &&\r\n            header !== 'button' &&\r\n            header !== 'select' &&\r\n            header !== 'expand' &&\r\n            header !== 'actions'\r\n          \"\r\n        >\r\n          <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\r\n          <ng-template #sortable>\r\n            <button\r\n              (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\r\n              *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\r\n              mat-button\r\n              class=\"sortableHeaderButton\"\r\n            >\r\n              {{ smartTable.customTableHeaders[i] }}\r\n              <smart-icon\r\n                class=\"sortableHeaderButtonIcon\"\r\n                *ngIf=\"getSortIcon(header)\"\r\n                title=\"sort\"\r\n                [icon]=\"getSortIcon(header)!\"\r\n              ></smart-icon>\r\n              <smart-icon\r\n                class=\"sortableHeaderButtonIcon\"\r\n                *ngIf=\"hasSortNumIcon(header)\"\r\n                title=\"sort\"\r\n                [icon]=\"getSortNumIcon(header)\"\r\n              ></smart-icon>\r\n            </button>\r\n          </ng-template>\r\n          <ng-template #notSortable>\r\n            {{ smartTable.customTableHeaders[i] }}\r\n          </ng-template>\r\n        </div>\r\n      </th>\r\n    }\r\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\r\n      <mat-checkbox\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\r\n          !isDisabled(element)\r\n        \"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"\r\n          $event\r\n            ? setSelection(\r\n                smartTable.selectionProperty\r\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n                  : element\r\n              )\r\n            : null\r\n        \"\r\n        [disabled]=\"isDisabled(element)\"\r\n        [checked]=\"\r\n          smartTable.selection!.isSelected(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n              : element\r\n          )\r\n        \"\r\n        [aria-label]=\"\r\n          checkboxLabel(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n              : element\r\n          )\r\n        \"\r\n      >\r\n      </mat-checkbox>\r\n      <div\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\r\n        \"\r\n      >\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartDateTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartDate: smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\r\n          <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\r\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\r\n          \"\r\n        >\r\n          <smart-icon\r\n            [smartTooltip]=\"getToolTip(element, i)\"\r\n            [icon]=\"getIcon(getValue(element, header), i)!\"\r\n            [color]=\"getColor(getValue(element, header), i)\"\r\n          >\r\n          </smart-icon>\r\n        </div>\r\n      </div>\r\n      <div class=\"smart-table-icon-container\">\r\n        <div *ngFor=\"let ir of getImageResourceIcons(element, header)\">\r\n          <smart-icon [imageResource]=\"ir\"> </smart-icon>\r\n        </div>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\r\n        class=\"smart-table-buttons-col\"\r\n      >\r\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\r\n          <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\r\n              mat-icon-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\r\n              mat-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\r\n              mat-raised-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n            </button>\r\n            <!------ MENU ------>\r\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\r\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\r\n              <smart-ui-action-toolbar\r\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\r\n              ></smart-ui-action-toolbar>\r\n\r\n              <!------ GENERIC HAMBURGER ------>\r\n              @if (shouldShowMenuButton(element)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowMenuActionModelArray(element)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n            </div>\r\n\r\n            <!------ MENU ------>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\r\n        <smart-icon\r\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\r\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\r\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\r\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\r\n        >\r\n        </smart-icon>\r\n      </div>\r\n      <div\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].translator !== undefined\r\n        \"\r\n      >\r\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\r\n      </div>\r\n      <button\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\r\n        \"\r\n        mat-icon-button\r\n        aria-label=\"expand row\"\r\n        (click)=\"onToggle(element, $event)\"\r\n      >\r\n        <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\r\n        <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\r\n      </button>\r\n      <div\r\n        *ngIf=\"\r\n          !smartTable.customSmartTableHeaders ||\r\n          (smartTable.customSmartTableHeaders &&\r\n            !smartTable.customSmartTableHeaders[i].properties &&\r\n            !smartTable.customSmartTableHeaders[i].icon &&\r\n            !smartTable.customSmartTableHeaders[i].buttons &&\r\n            !smartTable.customSmartTableHeaders[i].translator &&\r\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\r\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\r\n        \"\r\n      >\r\n        <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\r\n        <img\r\n          *ngIf=\"header === 'img'\"\r\n          [src]=\"getValue(element, header)\"\r\n          alt=\"\"\r\n          class=\"smarttableImg\"\r\n        />\r\n        <!------ TOOLBAR ------>\r\n        <ng-container *ngIf=\"showCellToolbar(element, header)\">\r\n          <smart-ui-action-toolbar\r\n            [uiActionModels]=\"getRowColumnAction(element, header)\"\r\n          ></smart-ui-action-toolbar>\r\n        </ng-container>\r\n        <!------ TOOLBAR ------>\r\n        <div\r\n          *ngIf=\"\r\n            header !== 'icon' &&\r\n            header !== 'img' &&\r\n            header !== 'option' &&\r\n            header !== 'button' &&\r\n            !isImageResource(element, header)\r\n          \"\r\n          [innerHtml]=\"getValue(element, header)\"\r\n        ></div>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n  <ng-container matColumnDef=\"expandedDetail\">\r\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\r\n      <div\r\n        class=\"example-element-detail\"\r\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\r\n      >\r\n        <ng-template #expandedArea></ng-template>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\r\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\r\n    <tr\r\n      mat-row\r\n      class=\"example-element-row\"\r\n      [class.example-expanded-row]=\"expandedElement === element\"\r\n      [ngClass]=\"getRowClasses(element)\"\r\n      [ngStyle]=\"getRowStyles(element)\"\r\n      (click)=\"handleOnRowClick(element)\"\r\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\r\n      [attr.data-testid]=\"element?.id ?? null\"\r\n    ></tr>\r\n    <lib-default-actions-popup\r\n      *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\"\r\n      #defaultActionMenu\r\n      [buttons]=\"getDefaultActionsForRow(element)!\"\r\n      [row]=\"element\"\r\n    ></lib-default-actions-popup>\r\n  </ng-container>\r\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\r\n</table>\r\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: MaterialTableComponent, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table\r\n  #myTable\r\n  mat-table\r\n  [dataSource]=\"smartTable.tableRows\"\r\n  class=\"full-width\"\r\n  multiTemplateDataRows\r\n>\r\n  <!-- Column Descriptor -->\r\n  @if (smartTable.title) {\r\n    <caption *ngIf=\"smartTable.title\" class=\"captionTitle\">\r\n      {{ smartTable.title }}\r\n    </caption>\r\n  }\r\n  <ng-container\r\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\r\n    matColumnDef=\"{{ header }}\"\r\n  >\r\n    <!-- my_menu is the implicit action column present on all tables: -->\r\n    @if ('my_menu' === header) {\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\r\n      >\r\n        <smart-ui-action-toolbar\r\n          #headerToolbar\r\n          [id]=\"\r\n            smartTable.getGridId()\r\n              ? smartTable.getGridId() + '_headerToolbar'\r\n              : 'grid_not_initialized'\r\n          \"\r\n        >\r\n        </smart-ui-action-toolbar>\r\n      </th>\r\n    } @else {\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\r\n      >\r\n        <div\r\n          *ngIf=\"\r\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\r\n          \"\r\n        ></div>\r\n        <div *ngIf=\"header === 'select'\">\r\n          <mat-checkbox\r\n            *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\r\n            (change)=\"$event ? toggleAllRows() : null\"\r\n            [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\r\n            [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\r\n            [aria-label]=\"checkboxLabel()\"\r\n          >\r\n          </mat-checkbox>\r\n          <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\r\n            {{ smartTable.customTableHeaders[i] }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            header !== 'icon' &&\r\n            header !== 'img' &&\r\n            header !== 'options' &&\r\n            header !== 'button' &&\r\n            header !== 'select' &&\r\n            header !== 'expand' &&\r\n            header !== 'actions'\r\n          \"\r\n        >\r\n          <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\r\n          <ng-template #sortable>\r\n            <button\r\n              (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\r\n              *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\r\n              mat-button\r\n              class=\"sortableHeaderButton\"\r\n            >\r\n              {{ smartTable.customTableHeaders[i] }}\r\n              <smart-icon\r\n                class=\"sortableHeaderButtonIcon\"\r\n                *ngIf=\"getSortIcon(header)\"\r\n                title=\"sort\"\r\n                [icon]=\"getSortIcon(header)!\"\r\n              ></smart-icon>\r\n              <smart-icon\r\n                class=\"sortableHeaderButtonIcon\"\r\n                *ngIf=\"hasSortNumIcon(header)\"\r\n                title=\"sort\"\r\n                [icon]=\"getSortNumIcon(header)\"\r\n              ></smart-icon>\r\n            </button>\r\n          </ng-template>\r\n          <ng-template #notSortable>\r\n            {{ smartTable.customTableHeaders[i] }}\r\n          </ng-template>\r\n        </div>\r\n      </th>\r\n    }\r\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\r\n      <mat-checkbox\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\r\n          !isDisabled(element)\r\n        \"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"\r\n          $event\r\n            ? setSelection(\r\n                smartTable.selectionProperty\r\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n                  : element\r\n              )\r\n            : null\r\n        \"\r\n        [disabled]=\"isDisabled(element)\"\r\n        [checked]=\"\r\n          smartTable.selection!.isSelected(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n              : element\r\n          )\r\n        \"\r\n        [aria-label]=\"\r\n          checkboxLabel(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n              : element\r\n          )\r\n        \"\r\n      >\r\n      </mat-checkbox>\r\n      <div\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\r\n        \"\r\n      >\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartDateTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartDate: smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\r\n          <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\r\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\r\n          \"\r\n        >\r\n          <smart-icon\r\n            [smartTooltip]=\"getToolTip(element, i)\"\r\n            [icon]=\"getIcon(getValue(element, header), i)!\"\r\n            [color]=\"getColor(getValue(element, header), i)\"\r\n          >\r\n          </smart-icon>\r\n        </div>\r\n      </div>\r\n      <div class=\"smart-table-icon-container\">\r\n        <div *ngFor=\"let ir of getImageResourceIcons(element, header)\">\r\n          <smart-icon [imageResource]=\"ir\"> </smart-icon>\r\n        </div>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\r\n        class=\"smart-table-buttons-col\"\r\n      >\r\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\r\n          <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\r\n              mat-icon-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\r\n              mat-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\r\n              mat-raised-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n            </button>\r\n            <!------ MENU ------>\r\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\r\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\r\n              <smart-ui-action-toolbar\r\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\r\n              ></smart-ui-action-toolbar>\r\n\r\n              <!------ GENERIC HAMBURGER ------>\r\n              <!------ TOOLBAR ------>\r\n              <button\r\n                *ngIf=\"showMenuButton(element, button)\"\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, button, element, undefined, true)\"\r\n                color=\"{{ button.color }}\"\r\n              >\r\n                <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n                <!-- {{ button.label ?? (button.translator ? button.translator(element).title : '') }} -->\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <div *ngIf=\"button.menuItemButtons\">\r\n                  <button\r\n                    *ngFor=\"let btn of getMenuButtons(element, button)\"\r\n                    (click)=\"customButtonClicked($event, btn, element, undefined, true)\"\r\n                    mat-menu-item\r\n                  >\r\n                    <smart-icon\r\n                      *ngIf=\"btn?.translator(btn)?.icon\"\r\n                      [icon]=\"btn!.translator!(btn)!.icon!\"\r\n                    ></smart-icon>\r\n                    {{ btn?.translator(btn)?.title }}\r\n                  </button>\r\n                </div>\r\n                <div *ngIf=\"button.menuItemButtonsPropertyName\">\r\n                  <div *ngFor=\"let btn of getMenuItemButtonsPropertyName(element, button)\">\r\n                    <button\r\n                      *ngIf=\"btn.code !== ACTION_SEPERATOR\"\r\n                      (click)=\"customButtonClicked($event, button, element, btn, true)\"\r\n                      mat-menu-item\r\n                      [disabled]=\"btn.disabled\"\r\n                      [smartTooltip]=\"\r\n                        btn?.descriptor?.tooltip\r\n                          ? btn?.descriptor?.tooltip\r\n                          : button.translator!(btn).tooltip\r\n                      \"\r\n                    >\r\n                      <div\r\n                        class=\"smart-table-icon-container\"\r\n                        [ngClass]=\"\r\n                          button.translator!(btn).iconPosition === 'POST' ? 'reversed' : ''\r\n                        \"\r\n                        ><smart-icon\r\n                          *ngIf=\"button.translator!(btn).icon\"\r\n                          [icon]=\"button.translator!(btn).icon!\"\r\n                        ></smart-icon>\r\n                        {{ button.translator!(btn).title }}</div\r\n                      >\r\n                    </button>\r\n                    <mat-divider *ngIf=\"btn.code === ACTION_SEPERATOR\"></mat-divider>\r\n                  </div>\r\n                </div>\r\n              </mat-menu>\r\n            </div>\r\n\r\n            <!------ MENU ------>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\r\n        <smart-icon\r\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\r\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\r\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\r\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\r\n        >\r\n        </smart-icon>\r\n      </div>\r\n      <div\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].translator !== undefined\r\n        \"\r\n      >\r\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\r\n      </div>\r\n      <button\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\r\n        \"\r\n        mat-icon-button\r\n        aria-label=\"expand row\"\r\n        (click)=\"onToggle(element, $event)\"\r\n      >\r\n        <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\r\n        <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\r\n      </button>\r\n      <div\r\n        *ngIf=\"\r\n          !smartTable.customSmartTableHeaders ||\r\n          (smartTable.customSmartTableHeaders &&\r\n            !smartTable.customSmartTableHeaders[i].properties &&\r\n            !smartTable.customSmartTableHeaders[i].icon &&\r\n            !smartTable.customSmartTableHeaders[i].buttons &&\r\n            !smartTable.customSmartTableHeaders[i].translator &&\r\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\r\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\r\n        \"\r\n      >\r\n        <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\r\n        <img\r\n          *ngIf=\"header === 'img'\"\r\n          [src]=\"getValue(element, header)\"\r\n          alt=\"\"\r\n          class=\"smarttableImg\"\r\n        />\r\n        <!------ TOOLBAR ------>\r\n        <ng-container *ngIf=\"showCellToolbar(element, header)\">\r\n          <smart-ui-action-toolbar\r\n            [uiActionModels]=\"getRowColumnAction(element, header)\"\r\n          ></smart-ui-action-toolbar>\r\n        </ng-container>\r\n        <!------ TOOLBAR ------>\r\n        <div\r\n          *ngIf=\"\r\n            header !== 'icon' &&\r\n            header !== 'img' &&\r\n            header !== 'option' &&\r\n            header !== 'button' &&\r\n            !isImageResource(element, header)\r\n          \"\r\n          [innerHtml]=\"getValue(element, header)\"\r\n        ></div>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n  <ng-container matColumnDef=\"expandedDetail\">\r\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\r\n      <div\r\n        class=\"example-element-detail\"\r\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\r\n      >\r\n        <ng-template #expandedArea></ng-template>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\r\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\r\n    <tr\r\n      mat-row\r\n      class=\"example-element-row\"\r\n      [class.example-expanded-row]=\"expandedElement === element\"\r\n      [ngClass]=\"getRowClasses(element)\"\r\n      [ngStyle]=\"getRowStyles(element)\"\r\n      (click)=\"handleOnRowClick(element)\"\r\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\r\n      [attr.data-testid]=\"element?.id ?? null\"\r\n    ></tr>\r\n    <lib-default-actions-popup\r\n      *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\"\r\n      #defaultActionMenu\r\n      [buttons]=\"getDefaultActionsForRow(element)!\"\r\n      [row]=\"element\"\r\n    ></lib-default-actions-popup>\r\n  </ng-container>\r\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\r\n</table>\r\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: i5$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -11979,7 +12037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                             state('expanded', style({ height: '*' })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "<table\r\n  #myTable\r\n  mat-table\r\n  [dataSource]=\"smartTable.tableRows\"\r\n  class=\"full-width\"\r\n  multiTemplateDataRows\r\n>\r\n  <!-- Column Descriptor -->\r\n  @if (smartTable.title) {\r\n    <caption *ngIf=\"smartTable.title\" class=\"captionTitle\">\r\n      {{ smartTable.title }}\r\n    </caption>\r\n  }\r\n  <ng-container\r\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\r\n    matColumnDef=\"{{ header }}\"\r\n  >\r\n    <!-- my_menu is the implicit action column present on all tables: -->\r\n    @if ('my_menu' === header) {\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\r\n      >\r\n        <smart-ui-action-toolbar\r\n          #headerToolbar\r\n          [id]=\"\r\n            smartTable.getGridId()\r\n              ? smartTable.getGridId() + '_headerToolbar'\r\n              : 'grid_not_initialized'\r\n          \"\r\n        >\r\n        </smart-ui-action-toolbar>\r\n      </th>\r\n    } @else {\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\r\n      >\r\n        <div\r\n          *ngIf=\"\r\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\r\n          \"\r\n        ></div>\r\n        <div *ngIf=\"header === 'select'\">\r\n          <mat-checkbox\r\n            *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\r\n            (change)=\"$event ? toggleAllRows() : null\"\r\n            [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\r\n            [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\r\n            [aria-label]=\"checkboxLabel()\"\r\n          >\r\n          </mat-checkbox>\r\n          <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\r\n            {{ smartTable.customTableHeaders[i] }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            header !== 'icon' &&\r\n            header !== 'img' &&\r\n            header !== 'options' &&\r\n            header !== 'button' &&\r\n            header !== 'select' &&\r\n            header !== 'expand' &&\r\n            header !== 'actions'\r\n          \"\r\n        >\r\n          <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\r\n          <ng-template #sortable>\r\n            <button\r\n              (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\r\n              *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\r\n              mat-button\r\n              class=\"sortableHeaderButton\"\r\n            >\r\n              {{ smartTable.customTableHeaders[i] }}\r\n              <smart-icon\r\n                class=\"sortableHeaderButtonIcon\"\r\n                *ngIf=\"getSortIcon(header)\"\r\n                title=\"sort\"\r\n                [icon]=\"getSortIcon(header)!\"\r\n              ></smart-icon>\r\n              <smart-icon\r\n                class=\"sortableHeaderButtonIcon\"\r\n                *ngIf=\"hasSortNumIcon(header)\"\r\n                title=\"sort\"\r\n                [icon]=\"getSortNumIcon(header)\"\r\n              ></smart-icon>\r\n            </button>\r\n          </ng-template>\r\n          <ng-template #notSortable>\r\n            {{ smartTable.customTableHeaders[i] }}\r\n          </ng-template>\r\n        </div>\r\n      </th>\r\n    }\r\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\r\n      <mat-checkbox\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\r\n          !isDisabled(element)\r\n        \"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"\r\n          $event\r\n            ? setSelection(\r\n                smartTable.selectionProperty\r\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n                  : element\r\n              )\r\n            : null\r\n        \"\r\n        [disabled]=\"isDisabled(element)\"\r\n        [checked]=\"\r\n          smartTable.selection!.isSelected(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n              : element\r\n          )\r\n        \"\r\n        [aria-label]=\"\r\n          checkboxLabel(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n              : element\r\n          )\r\n        \"\r\n      >\r\n      </mat-checkbox>\r\n      <div\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\r\n        \"\r\n      >\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartDateTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartDate: smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\r\n          <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\r\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\r\n          \"\r\n        >\r\n          <smart-icon\r\n            [smartTooltip]=\"getToolTip(element, i)\"\r\n            [icon]=\"getIcon(getValue(element, header), i)!\"\r\n            [color]=\"getColor(getValue(element, header), i)\"\r\n          >\r\n          </smart-icon>\r\n        </div>\r\n      </div>\r\n      <div class=\"smart-table-icon-container\">\r\n        <div *ngFor=\"let ir of getImageResourceIcons(element, header)\">\r\n          <smart-icon [imageResource]=\"ir\"> </smart-icon>\r\n        </div>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\r\n        class=\"smart-table-buttons-col\"\r\n      >\r\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\r\n          <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\r\n              mat-icon-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\r\n              mat-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\r\n              mat-raised-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n            </button>\r\n            <!------ MENU ------>\r\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\r\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\r\n              <smart-ui-action-toolbar\r\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\r\n              ></smart-ui-action-toolbar>\r\n\r\n              <!------ GENERIC HAMBURGER ------>\r\n              @if (shouldShowMenuButton(element)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowMenuActionModelArray(element)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n            </div>\r\n\r\n            <!------ MENU ------>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\r\n        <smart-icon\r\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\r\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\r\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\r\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\r\n        >\r\n        </smart-icon>\r\n      </div>\r\n      <div\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].translator !== undefined\r\n        \"\r\n      >\r\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\r\n      </div>\r\n      <button\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\r\n        \"\r\n        mat-icon-button\r\n        aria-label=\"expand row\"\r\n        (click)=\"onToggle(element, $event)\"\r\n      >\r\n        <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\r\n        <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\r\n      </button>\r\n      <div\r\n        *ngIf=\"\r\n          !smartTable.customSmartTableHeaders ||\r\n          (smartTable.customSmartTableHeaders &&\r\n            !smartTable.customSmartTableHeaders[i].properties &&\r\n            !smartTable.customSmartTableHeaders[i].icon &&\r\n            !smartTable.customSmartTableHeaders[i].buttons &&\r\n            !smartTable.customSmartTableHeaders[i].translator &&\r\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\r\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\r\n        \"\r\n      >\r\n        <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\r\n        <img\r\n          *ngIf=\"header === 'img'\"\r\n          [src]=\"getValue(element, header)\"\r\n          alt=\"\"\r\n          class=\"smarttableImg\"\r\n        />\r\n        <!------ TOOLBAR ------>\r\n        <ng-container *ngIf=\"showCellToolbar(element, header)\">\r\n          <smart-ui-action-toolbar\r\n            [uiActionModels]=\"getRowColumnAction(element, header)\"\r\n          ></smart-ui-action-toolbar>\r\n        </ng-container>\r\n        <!------ TOOLBAR ------>\r\n        <div\r\n          *ngIf=\"\r\n            header !== 'icon' &&\r\n            header !== 'img' &&\r\n            header !== 'option' &&\r\n            header !== 'button' &&\r\n            !isImageResource(element, header)\r\n          \"\r\n          [innerHtml]=\"getValue(element, header)\"\r\n        ></div>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n  <ng-container matColumnDef=\"expandedDetail\">\r\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\r\n      <div\r\n        class=\"example-element-detail\"\r\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\r\n      >\r\n        <ng-template #expandedArea></ng-template>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\r\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\r\n    <tr\r\n      mat-row\r\n      class=\"example-element-row\"\r\n      [class.example-expanded-row]=\"expandedElement === element\"\r\n      [ngClass]=\"getRowClasses(element)\"\r\n      [ngStyle]=\"getRowStyles(element)\"\r\n      (click)=\"handleOnRowClick(element)\"\r\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\r\n      [attr.data-testid]=\"element?.id ?? null\"\r\n    ></tr>\r\n    <lib-default-actions-popup\r\n      *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\"\r\n      #defaultActionMenu\r\n      [buttons]=\"getDefaultActionsForRow(element)!\"\r\n      [row]=\"element\"\r\n    ></lib-default-actions-popup>\r\n  </ng-container>\r\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\r\n</table>\r\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"] }]
+                    ], template: "<table\r\n  #myTable\r\n  mat-table\r\n  [dataSource]=\"smartTable.tableRows\"\r\n  class=\"full-width\"\r\n  multiTemplateDataRows\r\n>\r\n  <!-- Column Descriptor -->\r\n  @if (smartTable.title) {\r\n    <caption *ngIf=\"smartTable.title\" class=\"captionTitle\">\r\n      {{ smartTable.title }}\r\n    </caption>\r\n  }\r\n  <ng-container\r\n    *ngFor=\"let header of smartTable.tableHeaders; let i = index\"\r\n    matColumnDef=\"{{ header }}\"\r\n  >\r\n    <!-- my_menu is the implicit action column present on all tables: -->\r\n    @if ('my_menu' === header) {\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\r\n      >\r\n        <smart-ui-action-toolbar\r\n          #headerToolbar\r\n          [id]=\"\r\n            smartTable.getGridId()\r\n              ? smartTable.getGridId() + '_headerToolbar'\r\n              : 'grid_not_initialized'\r\n          \"\r\n        >\r\n        </smart-ui-action-toolbar>\r\n      </th>\r\n    } @else {\r\n      <th\r\n        mat-header-cell\r\n        *matHeaderCellDef\r\n        [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\r\n        [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\r\n        [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\"\r\n      >\r\n        <div\r\n          *ngIf=\"\r\n            header === 'icon' || header === 'img' || header === 'options' || header === 'button'\r\n          \"\r\n        ></div>\r\n        <div *ngIf=\"header === 'select'\">\r\n          <mat-checkbox\r\n            *ngIf=\"smartTable.customSmartTableHeaders![i].showCheckboxInHeader\"\r\n            (change)=\"$event ? toggleAllRows() : null\"\r\n            [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\r\n            [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\"\r\n            [aria-label]=\"checkboxLabel()\"\r\n          >\r\n          </mat-checkbox>\r\n          <div *ngIf=\"!smartTable.customSmartTableHeaders![i].showCheckboxInHeader\">\r\n            {{ smartTable.customTableHeaders[i] }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            header !== 'icon' &&\r\n            header !== 'img' &&\r\n            header !== 'options' &&\r\n            header !== 'button' &&\r\n            header !== 'select' &&\r\n            header !== 'expand' &&\r\n            header !== 'actions'\r\n          \"\r\n        >\r\n          <div *ngIf=\"smartTable.sortable; then sortable; else notSortable\"></div>\r\n          <ng-template #sortable>\r\n            <button\r\n              (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\"\r\n              *ngIf=\"smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])\"\r\n              mat-button\r\n              class=\"sortableHeaderButton\"\r\n            >\r\n              {{ smartTable.customTableHeaders[i] }}\r\n              <smart-icon\r\n                class=\"sortableHeaderButtonIcon\"\r\n                *ngIf=\"getSortIcon(header)\"\r\n                title=\"sort\"\r\n                [icon]=\"getSortIcon(header)!\"\r\n              ></smart-icon>\r\n              <smart-icon\r\n                class=\"sortableHeaderButtonIcon\"\r\n                *ngIf=\"hasSortNumIcon(header)\"\r\n                title=\"sort\"\r\n                [icon]=\"getSortNumIcon(header)\"\r\n              ></smart-icon>\r\n            </button>\r\n          </ng-template>\r\n          <ng-template #notSortable>\r\n            {{ smartTable.customTableHeaders[i] }}\r\n          </ng-template>\r\n        </div>\r\n      </th>\r\n    }\r\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\r\n      <mat-checkbox\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\r\n          !isDisabled(element)\r\n        \"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"\r\n          $event\r\n            ? setSelection(\r\n                smartTable.selectionProperty\r\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n                  : element\r\n              )\r\n            : null\r\n        \"\r\n        [disabled]=\"isDisabled(element)\"\r\n        [checked]=\"\r\n          smartTable.selection!.isSelected(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n              : element\r\n          )\r\n        \"\r\n        [aria-label]=\"\r\n          checkboxLabel(\r\n            smartTable.selectionProperty\r\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\r\n              : element\r\n          )\r\n        \"\r\n      >\r\n      </mat-checkbox>\r\n      <div\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\r\n        \"\r\n      >\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartDateTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().DATE\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartDate: smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().TIME\">\r\n          {{\r\n            getValue(element, header)\r\n              | smartTime: smartTable.customSmartTableHeaders[i].properties?.dateFormat\r\n          }}\r\n        </div>\r\n        <div *ngIf=\"smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX\">\r\n          <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\r\n        </div>\r\n        <div\r\n          *ngIf=\"\r\n            smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\r\n            smartTable.customSmartTableHeaders[i].properties?.icons?.length\r\n          \"\r\n        >\r\n          <smart-icon\r\n            [smartTooltip]=\"getToolTip(element, i)\"\r\n            [icon]=\"getIcon(getValue(element, header), i)!\"\r\n            [color]=\"getColor(getValue(element, header), i)\"\r\n          >\r\n          </smart-icon>\r\n        </div>\r\n      </div>\r\n      <div class=\"smart-table-icon-container\">\r\n        <div *ngFor=\"let ir of getImageResourceIcons(element, header)\">\r\n          <smart-icon [imageResource]=\"ir\"> </smart-icon>\r\n        </div>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons\"\r\n        class=\"smart-table-buttons-col\"\r\n      >\r\n        <div *ngFor=\"let button of smartTable.customSmartTableHeaders[i].buttons\">\r\n          <div *ngIf=\"showButton(button, element)\" [ngSwitch]=\"button.type\">\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.ICON\"\r\n              mat-icon-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.NORMAL\"\r\n              mat-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n            </button>\r\n            <button\r\n              (click)=\"customButtonClicked($event, button, element)\"\r\n              *ngSwitchCase=\"smartTableButtonType.RAISED\"\r\n              mat-raised-button\r\n              color=\"{{ button.color }}\"\r\n            >\r\n              <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n              {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\r\n            </button>\r\n            <!------ MENU ------>\r\n            <div *ngSwitchCase=\"smartTableButtonType.MENU\" class=\"menu-button\">\r\n              <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\r\n              <smart-ui-action-toolbar\r\n                [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\r\n              ></smart-ui-action-toolbar>\r\n\r\n              <!------ GENERIC HAMBURGER ------>\r\n              <!------ TOOLBAR ------>\r\n              <button\r\n                *ngIf=\"showMenuButton(element, button)\"\r\n                mat-button\r\n                [matMenuTriggerFor]=\"menu\"\r\n                (click)=\"customButtonClicked($event, button, element, undefined, true)\"\r\n                color=\"{{ button.color }}\"\r\n              >\r\n                <smart-icon *ngIf=\"button.icon\" [icon]=\"button.icon\"></smart-icon>\r\n                <!-- {{ button.label ?? (button.translator ? button.translator(element).title : '') }} -->\r\n              </button>\r\n              <mat-menu #menu=\"matMenu\">\r\n                <div *ngIf=\"button.menuItemButtons\">\r\n                  <button\r\n                    *ngFor=\"let btn of getMenuButtons(element, button)\"\r\n                    (click)=\"customButtonClicked($event, btn, element, undefined, true)\"\r\n                    mat-menu-item\r\n                  >\r\n                    <smart-icon\r\n                      *ngIf=\"btn?.translator(btn)?.icon\"\r\n                      [icon]=\"btn!.translator!(btn)!.icon!\"\r\n                    ></smart-icon>\r\n                    {{ btn?.translator(btn)?.title }}\r\n                  </button>\r\n                </div>\r\n                <div *ngIf=\"button.menuItemButtonsPropertyName\">\r\n                  <div *ngFor=\"let btn of getMenuItemButtonsPropertyName(element, button)\">\r\n                    <button\r\n                      *ngIf=\"btn.code !== ACTION_SEPERATOR\"\r\n                      (click)=\"customButtonClicked($event, button, element, btn, true)\"\r\n                      mat-menu-item\r\n                      [disabled]=\"btn.disabled\"\r\n                      [smartTooltip]=\"\r\n                        btn?.descriptor?.tooltip\r\n                          ? btn?.descriptor?.tooltip\r\n                          : button.translator!(btn).tooltip\r\n                      \"\r\n                    >\r\n                      <div\r\n                        class=\"smart-table-icon-container\"\r\n                        [ngClass]=\"\r\n                          button.translator!(btn).iconPosition === 'POST' ? 'reversed' : ''\r\n                        \"\r\n                        ><smart-icon\r\n                          *ngIf=\"button.translator!(btn).icon\"\r\n                          [icon]=\"button.translator!(btn).icon!\"\r\n                        ></smart-icon>\r\n                        {{ button.translator!(btn).title }}</div\r\n                      >\r\n                    </button>\r\n                    <mat-divider *ngIf=\"btn.code === ACTION_SEPERATOR\"></mat-divider>\r\n                  </div>\r\n                </div>\r\n              </mat-menu>\r\n            </div>\r\n\r\n            <!------ MENU ------>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon\">\r\n        <smart-icon\r\n          *ngIf=\"smartTable.customSmartTableHeaders[i].icon?.icon\"\r\n          [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\r\n          [color]=\"smartTable.customSmartTableHeaders[i].icon?.color\"\r\n          [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\r\n        >\r\n        </smart-icon>\r\n      </div>\r\n      <div\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].translator !== undefined\r\n        \"\r\n      >\r\n        {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\r\n      </div>\r\n      <button\r\n        *ngIf=\"\r\n          smartTable.customSmartTableHeaders &&\r\n          smartTable.customSmartTableHeaders[i].propertyName === 'expand'\r\n        \"\r\n        mat-icon-button\r\n        aria-label=\"expand row\"\r\n        (click)=\"onToggle(element, $event)\"\r\n      >\r\n        <smart-icon *ngIf=\"expandedElement !== element\" [icon]=\"'keyboard_arrow_down'\"></smart-icon>\r\n        <smart-icon *ngIf=\"expandedElement === element\" [icon]=\"'keyboard_arrow_up'\"></smart-icon>\r\n      </button>\r\n      <div\r\n        *ngIf=\"\r\n          !smartTable.customSmartTableHeaders ||\r\n          (smartTable.customSmartTableHeaders &&\r\n            !smartTable.customSmartTableHeaders[i].properties &&\r\n            !smartTable.customSmartTableHeaders[i].icon &&\r\n            !smartTable.customSmartTableHeaders[i].buttons &&\r\n            !smartTable.customSmartTableHeaders[i].translator &&\r\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\r\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\r\n        \"\r\n      >\r\n        <smart-icon *ngIf=\"header === 'icon'\" [icon]=\"getValue(element, header)!\"> </smart-icon>\r\n        <img\r\n          *ngIf=\"header === 'img'\"\r\n          [src]=\"getValue(element, header)\"\r\n          alt=\"\"\r\n          class=\"smarttableImg\"\r\n        />\r\n        <!------ TOOLBAR ------>\r\n        <ng-container *ngIf=\"showCellToolbar(element, header)\">\r\n          <smart-ui-action-toolbar\r\n            [uiActionModels]=\"getRowColumnAction(element, header)\"\r\n          ></smart-ui-action-toolbar>\r\n        </ng-container>\r\n        <!------ TOOLBAR ------>\r\n        <div\r\n          *ngIf=\"\r\n            header !== 'icon' &&\r\n            header !== 'img' &&\r\n            header !== 'option' &&\r\n            header !== 'button' &&\r\n            !isImageResource(element, header)\r\n          \"\r\n          [innerHtml]=\"getValue(element, header)\"\r\n        ></div>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\r\n  <ng-container matColumnDef=\"expandedDetail\">\r\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\r\n      <div\r\n        class=\"example-element-detail\"\r\n        [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\"\r\n      >\r\n        <ng-template #expandedArea></ng-template>\r\n      </div>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\r\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\r\n    <tr\r\n      mat-row\r\n      class=\"example-element-row\"\r\n      [class.example-expanded-row]=\"expandedElement === element\"\r\n      [ngClass]=\"getRowClasses(element)\"\r\n      [ngStyle]=\"getRowStyles(element)\"\r\n      (click)=\"handleOnRowClick(element)\"\r\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\"\r\n      [attr.data-testid]=\"element?.id ?? null\"\r\n    ></tr>\r\n    <lib-default-actions-popup\r\n      *ngIf=\"smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0\"\r\n      #defaultActionMenu\r\n      [buttons]=\"getDefaultActionsForRow(element)!\"\r\n      [row]=\"element\"\r\n    ></lib-default-actions-popup>\r\n  </ng-container>\r\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\r\n</table>\r\n", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.example-detail-row{height:0}tr.example-element-row:not(.example-expanded-row):hover{background:#f5f5f5}tr.example-element-row:not(.example-expanded-row):active{background:#efefef}.example-element-row td{border-bottom-width:0}.example-element-detail{overflow:hidden;display:flex;flex-direction:column}.example-element-diagram{min-width:80px;border:2px solid black;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}\n"] }]
         }], ctorParameters: () => [{ type: ComponentFactoryService }] });
 
 class MobileTableComponent extends Table {
@@ -14742,10 +14800,18 @@ var SmartGridType;
 
 class SmartGridCardComponent {
     get testId() {
-        return this.item?.id ?? null;
+        return this.item()?.id ?? null;
     }
-    constructor(cfService) {
+    constructor(cfService, changeDetector) {
         this.cfService = cfService;
+        this.changeDetector = changeDetector;
+        this.item = input.required();
+        this.smartGrid = input.required();
+        this.parent = input();
+        this.parentLayoutComponent = input();
+        // The created layout
+        this.layoutComponent = signal(null);
+        this.layout = computed(() => this.item().layoutDescriptor?.componentLayouts?.['GRID_ROW_LAYOUT']);
         this.uiActionModels = [];
     }
     ngAfterViewInit() {
@@ -14756,51 +14822,63 @@ class SmartGridCardComponent {
         this.vcRef?.clear();
     }
     constructUiActionModels() {
-        this.uiActionModels = this.item.actions.map((_uiAction) => {
+        this.uiActionModels = this.item().actions.map((_uiAction) => {
             let uiAction = { ..._uiAction };
             uiAction.params = {
                 ...uiAction.params,
-                model: this.item,
+                model: this.item(),
             };
             return {
-                serviceToUse: this.smartGrid.serviceToUse,
+                serviceToUse: this.smartGrid().serviceToUse,
                 uiAction,
-                widgetId: this.smartGrid.gridIdentifier,
-                nodeId: this.item.id,
+                widgetId: this.smartGrid().gridIdentifier,
+                nodeId: this.item().id,
             };
         });
     }
     constructComponent() {
-        if (this.smartGrid.dataLayoutDef?.type === SmartGridType.CUSTOM) {
+        if (this.smartGrid().dataLayoutDef?.type === SmartGridType.CUSTOM) {
             this.vcRef?.clear();
-            this.componentRef = this.cfService.createComponent(this.vcRef, this.smartGrid.customComponent, new Map([
-                ['item', this.item],
-                ['uiActionModels', this.uiActionModels],
-                ['gridIdentifier', this.smartGrid.gridIdentifier],
-                ['serviceToUse', this.smartGrid.serviceToUse],
-                // [
-                //   'smartLayoutDefinition',
-                //   this.smartGrid.gridModel.view?.descriptor?.cardComponentLayouts,
-                // ],
-            ]));
+            if (!this.layout()) {
+                this.componentRef = this.cfService.createComponent(this.vcRef, this.smartGrid().customComponent, new Map([
+                    ['item', this.item()],
+                    ['uiActionModels', this.uiActionModels],
+                    ['gridIdentifier', this.smartGrid().gridIdentifier],
+                    ['serviceToUse', this.smartGrid().serviceToUse],
+                    ['layout', this.layout()],
+                ]));
+            }
+            else {
+                const layoutObj = this.layout();
+                layoutObj.style ??= {
+                    style: {},
+                    classesToAdd: [],
+                    classesToRemove: [],
+                };
+                layoutObj.style.classesToAdd.push('gridCardLayout');
+                this.componentRef = this.cfService.createComponent(this.vcRef, this.smartGrid().layoutComponent, new Map([
+                    ['smartComponentLayout', this.layout()],
+                    ['parentSmartComponent', this.parent()],
+                    ['parentLayoutComponent', this.parentLayoutComponent()],
+                    ['gridRow', this.item()],
+                ]));
+                const layout = this.componentRef.instance;
+                this.layoutComponent.set(this.componentRef.instance);
+                this.smartGrid()
+                    .layoutUtility.getToolbars(layout)
+                    .forEach((toolbar) => {
+                    toolbar.setActionModels((this.uiActionModels ?? []).filter((actionModel) => actionModel?.uiAction?.toolbar === toolbar?.id));
+                });
+            }
         }
     }
-    select() {
-        this.onSelect(this.item.id);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartGridCardComponent, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: { item: "item", smartGrid: "smartGrid", onSelect: "onSelect" }, host: { properties: { "attr.data-testid": "this.testId" } }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["customCardComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div (click)=\"select()\" class=\"smart-grid-card-template\">\r\n  <ng-template #customCardComponent></ng-template>\r\n</div>\r\n<!-- <div [ngSwitch]=\"smartGrid.dataLayoutDef!.type\">\r\n    <div\r\n        *ngSwitchCase=\"'CARD1'\"\r\n        [ngClass]=\"\r\n            smartGrid.dataLayoutDef!.gridLayout === 'ROW'\r\n                ? 'sm-card-container-list'\r\n                : 'sm-card-container'\r\n        \"\r\n    >\r\n        <smart-icon [icon]=\"item.data.icon\"></smart-icon>\r\n        <div>{{ item.data.title }}</div>\r\n        <div>\r\n            <div>{{ item.data.state }}</div>\r\n            <div>{{ item.data.stateDate }}</div>\r\n        </div>\r\n        <div>\r\n            <div>{{ item.data.lastViewed }}</div>\r\n            <div>{{ item.data.lastViewedDate }}</div>\r\n        </div>\r\n    </div>\r\n    <div\r\n        *ngSwitchCase=\"'CARD2'\"\r\n        [ngClass]=\"\r\n            smartGrid.dataLayoutDef!.gridLayout === 'COLUMN'\r\n                ? 'sm-list-card-container'\r\n                : 'sm-list-card-container-list'\r\n        \"\r\n    >\r\n        <div\r\n            [ngClass]=\"\r\n                smartGrid.dataLayoutDef!.gridLayout === 'COLUMN'\r\n                    ? 'sm-list-card-image'\r\n                    : 'sm-list-card-image-list'\r\n            \"\r\n            [ngStyle]=\"{\r\n                'background-image': 'url(' + item.data.img + ')'\r\n            }\"\r\n        >\r\n            <button mat-icon-button title=\"btn\">\r\n                <smart-icon icon=\"favorite_border\"></smart-icon>\r\n            </button>\r\n        </div>\r\n        <div\r\n            [ngClass]=\"\r\n                smartGrid.dataLayoutDef!.gridLayout === 'COLUMN'\r\n                    ? 'sm-list-card-data-container'\r\n                    : 'sm-list-card-data-container-list'\r\n            \"\r\n        >\r\n            <div class=\"mat-caption color-primary\">\r\n                <b>{{ item.data.title }}</b>\r\n            </div>\r\n            <div\r\n                [ngClass]=\"\r\n                    item.data.availability === 'Rendelhet\u0151'\r\n                        ? 'sm-list-ordered'\r\n                        : '' || item.data.availability === 'K\u00E9szleten'\r\n                        ? 'sm-list-instock'\r\n                        : 'sm-list-comingsoon'\r\n                \"\r\n            >\r\n                <smart-icon icon=\"{{ item.data.icon }}\"></smart-icon>\r\n                <b>{{ item.data.availability }}</b>\r\n            </div>\r\n            <div>\r\n                <div class=\"sm-list-font-size color-secondary\"></div>\r\n                <div class=\"sm-list-font-size color-secondary\">\r\n                    {{ item.data.lastUpdate }}\r\n                </div>\r\n            </div>\r\n            <div>\r\n                <div class=\"sm-list-font-size color-primary\"></div>\r\n                <div class=\"sm-list-price-container\">\r\n                    <div\r\n                        [ngClass]=\"\r\n                            smartGrid.dataLayoutDef!.gridLayout\r\n                                ? 'sm-list-card-price'\r\n                                : 'sm-list-card-price-list'\r\n                        \"\r\n                    >\r\n                        <div class=\"color-primary\">\r\n                            <b>{{ item.data.price }} Ft</b>\r\n                        </div>\r\n                        <div class=\"sm-list-font-size color-primary\"></div>\r\n                    </div>\r\n                    <button *ngIf=\"false\" mat-icon-button title=\"btn2\">\r\n                        <smart-icon icon=\"{{ item.data.icon }}\" class=\"color-primary\"></smart-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div> -->\r\n", styles: [".sm-card-container{display:flex;flex-direction:column;padding:1rem}.sm-card-container-list{display:flex;flex-direction:row;padding:1rem;gap:.25rem}.sm-card-title{display:flex}.sm-card-data-fontsize{font-size:10px}.sm-card-data0{border-radius:32px;padding:.1rem .5rem;width:fit-content}.sm-list-card-container{display:flex;flex-direction:column;border-radius:.75rem}.sm-list-card-image{height:9rem;display:flex;flex-direction:column;padding:.75rem;align-items:flex-end;border-radius:.5rem .5rem 0rem 0rem}.sm-list-card-data-container{display:flex;flex-direction:column;text-align:left;padding:.5rem;border-radius:0rem 0rem .5rem .5rem;gap:.25rem}.sm-list-card-price{display:flex;flex-direction:column;border-radius:.25rem;padding:.25rem;width:100%}.sm-list-instock{display:flex;flex-direction:row;align-items:center;border-radius:.125rem;padding:.125rem;width:fit-content;font-size:8px}.sm-list-ordered{display:flex;align-items:center;flex-direction:row;border-radius:.125rem;padding:.25rem;width:fit-content;font-size:8px}.sm-list-comingsoon{align-items:center;display:flex;flex-direction:row;border-radius:.25rem;padding:.25rem;width:fit-content;font-size:8px}.sm-list-font-size{font-size:10px}.sm-list-card-container ::ng-deep .mat-mdc-icon-button{max-width:fit-content!important;max-height:30px!important}.sm-list-card-container-list{display:flex;flex-direction:row;height:10.75rem;padding:1rem;border-radius:.5rem}.sm-list-card-image-list{width:8.5rem;display:flex;flex-direction:column;padding:.75rem;align-items:flex-end;border-radius:.5rem}.sm-list-card-data-container-list{display:flex;flex-direction:column;text-align:left;padding-left:1rem;width:10.5rem}.sm-list-card-price-list{display:flex;flex-direction:column;border-radius:.25rem;padding:.25rem;height:2rem;width:100%}.sm-list-price-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem}.sm-list-card-container-list ::ng-deep .mat-mdc-icon-button{max-width:fit-content!important;max-height:30px!important}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartGridCardComponent, deps: [{ token: ComponentFactoryService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.11", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: false, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["customCardComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"smart-grid-card-template\">\r\n  <ng-template #customCardComponent></ng-template>\r\n</div>\r\n", styles: [".smart-grid-card-template{display:flex}:host ::ng-deep .gridCardLayout{display:flex;flex:1}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartGridCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-smart-grid-card', template: "<div (click)=\"select()\" class=\"smart-grid-card-template\">\r\n  <ng-template #customCardComponent></ng-template>\r\n</div>\r\n<!-- <div [ngSwitch]=\"smartGrid.dataLayoutDef!.type\">\r\n    <div\r\n        *ngSwitchCase=\"'CARD1'\"\r\n        [ngClass]=\"\r\n            smartGrid.dataLayoutDef!.gridLayout === 'ROW'\r\n                ? 'sm-card-container-list'\r\n                : 'sm-card-container'\r\n        \"\r\n    >\r\n        <smart-icon [icon]=\"item.data.icon\"></smart-icon>\r\n        <div>{{ item.data.title }}</div>\r\n        <div>\r\n            <div>{{ item.data.state }}</div>\r\n            <div>{{ item.data.stateDate }}</div>\r\n        </div>\r\n        <div>\r\n            <div>{{ item.data.lastViewed }}</div>\r\n            <div>{{ item.data.lastViewedDate }}</div>\r\n        </div>\r\n    </div>\r\n    <div\r\n        *ngSwitchCase=\"'CARD2'\"\r\n        [ngClass]=\"\r\n            smartGrid.dataLayoutDef!.gridLayout === 'COLUMN'\r\n                ? 'sm-list-card-container'\r\n                : 'sm-list-card-container-list'\r\n        \"\r\n    >\r\n        <div\r\n            [ngClass]=\"\r\n                smartGrid.dataLayoutDef!.gridLayout === 'COLUMN'\r\n                    ? 'sm-list-card-image'\r\n                    : 'sm-list-card-image-list'\r\n            \"\r\n            [ngStyle]=\"{\r\n                'background-image': 'url(' + item.data.img + ')'\r\n            }\"\r\n        >\r\n            <button mat-icon-button title=\"btn\">\r\n                <smart-icon icon=\"favorite_border\"></smart-icon>\r\n            </button>\r\n        </div>\r\n        <div\r\n            [ngClass]=\"\r\n                smartGrid.dataLayoutDef!.gridLayout === 'COLUMN'\r\n                    ? 'sm-list-card-data-container'\r\n                    : 'sm-list-card-data-container-list'\r\n            \"\r\n        >\r\n            <div class=\"mat-caption color-primary\">\r\n                <b>{{ item.data.title }}</b>\r\n            </div>\r\n            <div\r\n                [ngClass]=\"\r\n                    item.data.availability === 'Rendelhet\u0151'\r\n                        ? 'sm-list-ordered'\r\n                        : '' || item.data.availability === 'K\u00E9szleten'\r\n                        ? 'sm-list-instock'\r\n                        : 'sm-list-comingsoon'\r\n                \"\r\n            >\r\n                <smart-icon icon=\"{{ item.data.icon }}\"></smart-icon>\r\n                <b>{{ item.data.availability }}</b>\r\n            </div>\r\n            <div>\r\n                <div class=\"sm-list-font-size color-secondary\"></div>\r\n                <div class=\"sm-list-font-size color-secondary\">\r\n                    {{ item.data.lastUpdate }}\r\n                </div>\r\n            </div>\r\n            <div>\r\n                <div class=\"sm-list-font-size color-primary\"></div>\r\n                <div class=\"sm-list-price-container\">\r\n                    <div\r\n                        [ngClass]=\"\r\n                            smartGrid.dataLayoutDef!.gridLayout\r\n                                ? 'sm-list-card-price'\r\n                                : 'sm-list-card-price-list'\r\n                        \"\r\n                    >\r\n                        <div class=\"color-primary\">\r\n                            <b>{{ item.data.price }} Ft</b>\r\n                        </div>\r\n                        <div class=\"sm-list-font-size color-primary\"></div>\r\n                    </div>\r\n                    <button *ngIf=\"false\" mat-icon-button title=\"btn2\">\r\n                        <smart-icon icon=\"{{ item.data.icon }}\" class=\"color-primary\"></smart-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div> -->\r\n", styles: [".sm-card-container{display:flex;flex-direction:column;padding:1rem}.sm-card-container-list{display:flex;flex-direction:row;padding:1rem;gap:.25rem}.sm-card-title{display:flex}.sm-card-data-fontsize{font-size:10px}.sm-card-data0{border-radius:32px;padding:.1rem .5rem;width:fit-content}.sm-list-card-container{display:flex;flex-direction:column;border-radius:.75rem}.sm-list-card-image{height:9rem;display:flex;flex-direction:column;padding:.75rem;align-items:flex-end;border-radius:.5rem .5rem 0rem 0rem}.sm-list-card-data-container{display:flex;flex-direction:column;text-align:left;padding:.5rem;border-radius:0rem 0rem .5rem .5rem;gap:.25rem}.sm-list-card-price{display:flex;flex-direction:column;border-radius:.25rem;padding:.25rem;width:100%}.sm-list-instock{display:flex;flex-direction:row;align-items:center;border-radius:.125rem;padding:.125rem;width:fit-content;font-size:8px}.sm-list-ordered{display:flex;align-items:center;flex-direction:row;border-radius:.125rem;padding:.25rem;width:fit-content;font-size:8px}.sm-list-comingsoon{align-items:center;display:flex;flex-direction:row;border-radius:.25rem;padding:.25rem;width:fit-content;font-size:8px}.sm-list-font-size{font-size:10px}.sm-list-card-container ::ng-deep .mat-mdc-icon-button{max-width:fit-content!important;max-height:30px!important}.sm-list-card-container-list{display:flex;flex-direction:row;height:10.75rem;padding:1rem;border-radius:.5rem}.sm-list-card-image-list{width:8.5rem;display:flex;flex-direction:column;padding:.75rem;align-items:flex-end;border-radius:.5rem}.sm-list-card-data-container-list{display:flex;flex-direction:column;text-align:left;padding-left:1rem;width:10.5rem}.sm-list-card-price-list{display:flex;flex-direction:column;border-radius:.25rem;padding:.25rem;height:2rem;width:100%}.sm-list-price-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem}.sm-list-card-container-list ::ng-deep .mat-mdc-icon-button{max-width:fit-content!important;max-height:30px!important}\n"] }]
-        }], ctorParameters: () => [{ type: ComponentFactoryService }], propDecorators: { item: [{
-                type: Input
-            }], smartGrid: [{
-                type: Input
-            }], onSelect: [{
-                type: Input
-            }], testId: [{
+            args: [{ selector: 'app-smart-grid-card', template: "<div class=\"smart-grid-card-template\">\r\n  <ng-template #customCardComponent></ng-template>\r\n</div>\r\n", styles: [".smart-grid-card-template{display:flex}:host ::ng-deep .gridCardLayout{display:flex;flex:1}\n"] }]
+        }], ctorParameters: () => [{ type: ComponentFactoryService }, { type: i0.ChangeDetectorRef }], propDecorators: { testId: [{
                 type: HostBinding,
                 args: ['attr.data-testid']
             }], vcRef: [{
@@ -16845,7 +16923,8 @@ class SmartGridComponent {
                 type: SmartGridType.CUSTOM,
             };
             this.smartGrid.dataLayoutDef = datalayoutDef;
-            this.smartGrid.customComponent = this.injector.get(this.smartGrid.gridIdentifier + 'Card');
+            const token = this.smartGrid.gridIdentifier + 'Card';
+            this.smartGrid.customComponent = this.injector.get(token, null);
         }
     }
     isMultipleSelection() {
@@ -17200,6 +17279,7 @@ class SmartGridComponent {
         const viewContextChange = await this.service.select(this.smartGrid, row);
         this.smartGrid.viewContextService.handlePerformActionResponse(viewContextChange);
         this.refresh();
+        console.log('in refresjhj');
     }
     async onSelectAll(selected) {
         this.isBlocked = true;
@@ -17423,11 +17503,11 @@ class SmartGridComponent {
         return arr;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartGridComponent, deps: [{ token: SmartGridService }, { token: ComponentFactoryService }, { token: i1$3.MatDialog }, { token: i0.Injector }, { token: UiActionDescriptorService }, { token: SmartDatePipe }, { token: SmartDateTimePipe }, { token: SmartTimePipe }, { token: COMPONENT_LIBRARY }, { token: 'gridMenuIcon' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartGridComponent, selector: "smart-grid", inputs: { smartGrid: "smartGrid", uuid: "uuid", dev: "dev" }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartGridService, SmartDatePipe, SmartDateTimePipe, SmartTimePipe], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "_headerToolbar", first: true, predicate: ["headerToolbar"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "expandedRowsComps", predicate: ExpandedRowRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (compLib === componentLibrary.PRIMENG) {\r\n  <div *ngIf=\"smartGrid\" class=\"primeSmartGrid-container\">\r\n    <div class=\"smart-grid-toolbar\">\r\n      <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n    </div>\r\n    <p-table\r\n      *ngIf=\"!smartGrid.layoutDef || smartGrid.layoutDef === layoutDef().TABLE\"\r\n      #pTable\r\n      [value]=\"smartGrid.gridModel.page.rows!\"\r\n      (onSort)=\"gridSort($event)\"\r\n      [customSort]=\"true\"\r\n      [sortMode]=\"'multiple'\"\r\n      [lazy]=\"true\"\r\n      (onLazyLoad)=\"lazyLoad($event)\"\r\n      [reorderableColumns]=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\"\r\n      [columns]=\"columns\"\r\n      (onColReorder)=\"onColOrder($event)\"\r\n      (onRowSelect)=\"onRowSelect($event)\"\r\n      (onRowUnselect)=\"onRowUnselect($event)\"\r\n      [selection]=\"selectedRows\"\r\n      (onHeaderCheckboxToggle)=\"onSelectAllRow($event)\"\r\n      dataKey=\"id\"\r\n      [expandedRowKeys]=\"expandedRows\"\r\n      [rowExpandMode]=\"'multiple'\"\r\n      [rowTrackBy]=\"rowTrackByFn\"\r\n    >\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"tableCaption\">\r\n          <div *ngIf=\"smartGrid.gridModel.title\" class=\"captionTitle\">\r\n            {{ smartGrid.gridModel.title }}\r\n          </div>\r\n          <div *ngIf=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\">\r\n            <p-multiSelect\r\n              display=\"chip\"\r\n              [options]=\"smartGrid.gridModel.view?.descriptor?.columns\"\r\n              optionLabel=\"label\"\r\n              [(ngModel)]=\"columns\"\r\n              selectedItemsLabel=\"{0} columns selected\"\r\n              [style]=\"{ 'min-width': '200px' }\"\r\n              placeholder=\"Choose Columns\"\r\n              (onChange)=\"headerChange($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\">\r\n        <tr>\r\n          @if (smartGrid.gridModel.view?.descriptor?.showEditColumns) {\r\n            <th\r\n              *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            >\r\n              <p-tableHeaderCheckbox />\r\n            </th>\r\n            <th\r\n              *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            ></th>\r\n            <th\r\n              [pSortableColumn]=\"col.propertyName\"\r\n              *ngFor=\"let col of columns\"\r\n              pReorderableColumn\r\n              [attr.data-testid]=\"col.propertyName\"\r\n            >\r\n              <p-sortIcon [field]=\"col.propertyName\" />\r\n              {{ col.label }}\r\n            </th>\r\n          } @else {\r\n            <th\r\n              *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            >\r\n              <p-tableHeaderCheckbox />\r\n            </th>\r\n            <th\r\n              *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            ></th>\r\n            <th\r\n              [pSortableColumn]=\"col.propertyName\"\r\n              *ngFor=\"let col of columns\"\r\n              [attr.data-testid]=\"col.propertyName\"\r\n            >\r\n              <p-sortIcon [field]=\"col.propertyName\" />\r\n              {{ col.label }}\r\n            </th>\r\n          }\r\n\r\n          <th>\r\n            <smart-ui-action-toolbar\r\n              class=\"headerToolbar\"\r\n              #headerToolbar\r\n              [id]=\"'header_not_initialized'\"\r\n            ></smart-ui-action-toolbar>\r\n          </th>\r\n          <th *ngIf=\"smartGrid.expandable\"> </th>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"body\" let-row let-expanded=\"expanded\">\r\n        <tr\r\n          [ngClass]=\"getStyle(row)\"\r\n          [class.rowExpanded]=\"expanded\"\r\n          (dblclick)=\"onDoubleClick(row)\"\r\n          *ngIf=\"row && row.data\"\r\n          [attr.data-testid]=\"row.id ?? null\"\r\n        >\r\n          <td *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\">\r\n            <p-tableCheckbox *ngIf=\"row.selectable != false\" [value]=\"row\" />\r\n          </td>\r\n          <td *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\">\r\n            <p-tableRadioButton [value]=\"row\" />\r\n          </td>\r\n          <td *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n            <div *ngIf=\"row.icons[col]\">\r\n              <div class=\"smart-table-icon-container\">\r\n                <div *ngFor=\"let ir of getImageResourceIcons(row, col)\">\r\n                  <smart-icon [imageResource]=\"ir\"> </smart-icon>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <ng-container *ngIf=\"showCellToolbar(row, col)\">\r\n              <smart-ui-action-toolbar\r\n                [uiActionModels]=\"getRowColumnAction(row, col)\"\r\n              ></smart-ui-action-toolbar>\r\n            </ng-container>\r\n\r\n            <div *ngIf=\"!row.icons[col]\" [innerHtml]=\"getColValue(col, row)\"> </div>\r\n          </td>\r\n          <td>\r\n            <div class=\"menu-button\">\r\n              @if (showCellToolbar(row, defaultActionToolbarId)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowColumnAction(row, defaultActionToolbarId)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n              @if (shouldShowOptionsButton(row)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowMenuActionModelArray(row)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n            </div>\r\n          </td>\r\n          <td *ngIf=\"smartGrid.expandable\">\r\n            <p-button\r\n              type=\"button\"\r\n              pRipple\r\n              [pRowToggler]=\"row\"\r\n              [text]=\"true\"\r\n              severity=\"secondary\"\r\n              [rounded]=\"true\"\r\n              [icon]=\"expanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'\"\r\n            />\r\n          </td>\r\n        </tr>\r\n      </ng-template>\r\n      @if (smartGrid.expandable) {\r\n        <ng-template pTemplate=\"rowexpansion\" let-row>\r\n          <tr>\r\n            <td colspan=\"100%\">\r\n              <lib-expanded-row-renderer-component\r\n                [rowId]=\"row.id\"\r\n                [rowExpander]=\"this\"\r\n                [expandedComponent]=\"smartGrid.expandedComponent\"\r\n                [smartGrid]=\"this.smartGrid\"\r\n              ></lib-expanded-row-renderer-component>\r\n            </td>\r\n          </tr>\r\n        </ng-template>\r\n      }\r\n    </p-table>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : '',\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n        [onSelect]=\"onSelect.bind(this)\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div *ngIf=\"smartGrid.paginator\" class=\"paginator-row\">\r\n      <div class=\"paginator-wrap\">\r\n        <p-paginator\r\n          [first]=\"pageIndex!\"\r\n          [totalRecords]=\"length!\"\r\n          [rows]=\"pageSize\"\r\n          [rowsPerPageOptions]=\"pageSizeOptions\"\r\n          currentPageReportTemplate=\"{first} - {last} / {totalRecords}\"\r\n          (onPageChange)=\"onPrimeChangePage($event)\"\r\n          [showCurrentPageReport]=\"true\"\r\n          dropdownAppendTo=\"body\"\r\n        ></p-paginator>\r\n      </div>\r\n\r\n      <button\r\n        pButton\r\n        type=\"button\"\r\n        icon=\"pi pi-refresh\"\r\n        class=\"p-button-text\"\r\n        pTooltip=\"Friss\u00EDt\u00E9s\"\r\n        (click)=\"refreshPartialResults()\"\r\n        *ngIf=\"smartGrid.gridModel?.refreshEnabled\"\r\n      ></button>\r\n    </div>\r\n    <p-menu #menu [model]=\"menuButtons\" [popup]=\"true\" appendTo=\"body\"> </p-menu>\r\n  </div>\r\n} @else {\r\n  <div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n    <div class=\"smart-grid-toolbar\">\r\n      <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n      <button\r\n        (click)=\"editColumns()\"\r\n        mat-mini-fab\r\n        color=\"text-primary\"\r\n        *ngIf=\"smartGrid.showEditColumns\"\r\n      >\r\n        <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\r\n          >view_columns</mat-icon\r\n        >\r\n      </button>\r\n    </div>\r\n    <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n    <div class=\"smartGridContent\">\r\n      <div>\r\n        <div *ngIf=\"smartGrid.showResultCount\">\r\n          <div class=\"smartGrid-data-number\">\r\n            {{ smartGrid.gridModel.totalRowCount }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"smart-grid-table-container\">\r\n        <ng-template #table></ng-template>\r\n      </div>\r\n\r\n      <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n        <smart-expandable-section\r\n          #gridExpandableSection\r\n          *ngFor=\"let expandableSection of expandableSections\"\r\n          [data]=\"expandableSection\"\r\n        ></smart-expandable-section>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef\"\r\n        class=\"cards-container\"\r\n        [ngStyle]=\"{\r\n          'grid-template-columns':\r\n            smartGrid.numberOfColumn !== undefined\r\n              ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n              : '',\r\n        }\"\r\n      >\r\n        <app-smart-grid-card\r\n          class=\"smartGrid-card-container\"\r\n          *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n          [item]=\"task\"\r\n          [smartGrid]=\"smartGrid\"\r\n          [onSelect]=\"onSelect.bind(this)\"\r\n        ></app-smart-grid-card>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n        class=\"tree-container\"\r\n        [ngStyle]=\"{\r\n          'grid-template-columns':\r\n            smartGrid.numberOfColumn !== undefined\r\n              ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n              : '',\r\n        }\"\r\n      >\r\n        <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n          <mat-tree-node\r\n            *matTreeNodeDef=\"let node\"\r\n            matTreeNodeToggle\r\n            matTreeNodePadding\r\n            matTreeNodePaddingIndent=\"24\"\r\n          >\r\n            <button mat-icon-button disabled class=\"tree-button\"></button>\r\n            <mat-checkbox\r\n              class=\"checklist-leaf-node\"\r\n              [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n              (change)=\"treeNodeSelectionToggle(node)\"\r\n              >{{ getTreeItem(node) }}</mat-checkbox\r\n            >\r\n          </mat-tree-node>\r\n\r\n          <mat-tree-node\r\n            *matTreeNodeDef=\"let node; when: hasChild\"\r\n            matTreeNodePadding\r\n            matTreeNodePaddingIndent=\"24\"\r\n          >\r\n            <button\r\n              mat-icon-button\r\n              matTreeNodeToggle\r\n              class=\"tree-button\"\r\n              [attr.aria-label]=\"'Toggle ' + node.item\"\r\n            >\r\n              <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n              </mat-icon>\r\n            </button>\r\n            <mat-checkbox\r\n              [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n              [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n              (change)=\"treeNodeSelectionToggle(node)\"\r\n              >{{ getTreeItem(node) }}</mat-checkbox\r\n            >\r\n          </mat-tree-node>\r\n        </mat-tree>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"smartGrid.paginator\" class=\"paginator-row-material\">\r\n      <button\r\n        pButton\r\n        type=\"button\"\r\n        icon=\"pi pi-refresh\"\r\n        class=\"p-button-text\"\r\n        pTooltip=\"Friss\u00EDt\u00E9s\"\r\n        (click)=\"refreshPartialResults()\"\r\n        *ngIf=\"smartGrid.gridModel?.refreshEnabled\"\r\n      ></button>\r\n      <mat-paginator\r\n        *ngIf=\"smartGrid.paginator && !treeControl\"\r\n        #paginator\r\n        [length]=\"length\"\r\n        [pageIndex]=\"pageIndex\"\r\n        [pageSize]=\"pageSize\"\r\n        [pageSizeOptions]=\"pageSizeOptions\"\r\n        (page)=\"onChangePage($event)\"\r\n      ></mat-paginator>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.primeSmartGrid-container{display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.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:#0003}.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)}.tree-button{width:24px!important;height:24px!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.headerToolbar ::ng-deep .uiActionButtonsContainer{justify-content:flex-end}.tableCaption{display:flex;flex-direction:row;justify-content:space-between}.tableCaption:has(*){padding:.5rem;border-top:1px solid #e9ecef;border-bottom:1px solid #e9ecef}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th,:host ::ng-deep .p-datatable .p-datatable-header{padding:.5rem}.captionTitle{font-size:1.5rem;align-content:center}:host ::ng-deep .p-datatable-header:has(.tableCaption){padding:0;border:unset}.paginator-row{display:flex;align-items:center;align-self:center;gap:.25rem}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.paginator-wrap{flex:0 0 auto;min-width:0}:host ::ng-deep .paginator-wrap .p-paginator{width:auto}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i10$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i11$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i11$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i11$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i11$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i11$1.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "directive", type: ComparableMultiselectDirective, selector: "p-multiSelect", inputs: ["compareWith"] }, { kind: "component", type: i16$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i16$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i16$1.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i16$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i16$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i16$1.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i16$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i16$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i19$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i20$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i21$1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "onSelect"] }, { kind: "component", type: ExpandedRowRendererComponent, selector: "lib-expanded-row-renderer-component", inputs: ["rowId", "rowExpander", "expandedComponent", "smartGrid"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartGridComponent, selector: "smart-grid", inputs: { smartGrid: "smartGrid", uuid: "uuid", parent: "parent", parentLayoutComponent: "parentLayoutComponent", dev: "dev" }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartGridService, SmartDatePipe, SmartDateTimePipe, SmartTimePipe], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "_headerToolbar", first: true, predicate: ["headerToolbar"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "expandedRowsComps", predicate: ExpandedRowRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (compLib === componentLibrary.PRIMENG) {\r\n  <div *ngIf=\"smartGrid\" class=\"primeSmartGrid-container\">\r\n    <div class=\"smart-grid-toolbar\">\r\n      <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n    </div>\r\n    <p-table\r\n      *ngIf=\"!smartGrid.layoutDef || smartGrid.layoutDef === layoutDef().TABLE\"\r\n      #pTable\r\n      [value]=\"smartGrid.gridModel.page.rows!\"\r\n      (onSort)=\"gridSort($event)\"\r\n      [customSort]=\"true\"\r\n      [sortMode]=\"'multiple'\"\r\n      [lazy]=\"true\"\r\n      (onLazyLoad)=\"lazyLoad($event)\"\r\n      [reorderableColumns]=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\"\r\n      [columns]=\"columns\"\r\n      (onColReorder)=\"onColOrder($event)\"\r\n      (onRowSelect)=\"onRowSelect($event)\"\r\n      (onRowUnselect)=\"onRowUnselect($event)\"\r\n      [selection]=\"selectedRows\"\r\n      (onHeaderCheckboxToggle)=\"onSelectAllRow($event)\"\r\n      dataKey=\"id\"\r\n      [expandedRowKeys]=\"expandedRows\"\r\n      [rowExpandMode]=\"'multiple'\"\r\n      [rowTrackBy]=\"rowTrackByFn\"\r\n    >\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"tableCaption\">\r\n          <div *ngIf=\"smartGrid.gridModel.title\" class=\"captionTitle\">\r\n            {{ smartGrid.gridModel.title }}\r\n          </div>\r\n          <div *ngIf=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\">\r\n            <p-multiSelect\r\n              display=\"chip\"\r\n              [options]=\"smartGrid.gridModel.view?.descriptor?.columns\"\r\n              optionLabel=\"label\"\r\n              [(ngModel)]=\"columns\"\r\n              selectedItemsLabel=\"{0} columns selected\"\r\n              [style]=\"{ 'min-width': '200px' }\"\r\n              placeholder=\"Choose Columns\"\r\n              (onChange)=\"headerChange($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\">\r\n        <tr>\r\n          @if (smartGrid.gridModel.view?.descriptor?.showEditColumns) {\r\n            <th\r\n              *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            >\r\n              <p-tableHeaderCheckbox />\r\n            </th>\r\n            <th\r\n              *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            ></th>\r\n            <th\r\n              [pSortableColumn]=\"col.propertyName\"\r\n              *ngFor=\"let col of columns\"\r\n              pReorderableColumn\r\n              [attr.data-testid]=\"col.propertyName\"\r\n            >\r\n              <p-sortIcon [field]=\"col.propertyName\" />\r\n              {{ col.label }}\r\n            </th>\r\n          } @else {\r\n            <th\r\n              *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            >\r\n              <p-tableHeaderCheckbox />\r\n            </th>\r\n            <th\r\n              *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            ></th>\r\n            <th\r\n              [pSortableColumn]=\"col.propertyName\"\r\n              *ngFor=\"let col of columns\"\r\n              [attr.data-testid]=\"col.propertyName\"\r\n            >\r\n              <p-sortIcon [field]=\"col.propertyName\" />\r\n              {{ col.label }}\r\n            </th>\r\n          }\r\n\r\n          <th>\r\n            <smart-ui-action-toolbar\r\n              class=\"headerToolbar\"\r\n              #headerToolbar\r\n              [id]=\"'header_not_initialized'\"\r\n            ></smart-ui-action-toolbar>\r\n          </th>\r\n          <th *ngIf=\"smartGrid.expandable\"> </th>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"body\" let-row let-expanded=\"expanded\">\r\n        <tr\r\n          [ngClass]=\"getStyle(row)\"\r\n          [class.rowExpanded]=\"expanded\"\r\n          (dblclick)=\"onDoubleClick(row)\"\r\n          *ngIf=\"row && row.data\"\r\n          [attr.data-testid]=\"row.id ?? null\"\r\n        >\r\n          <td *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\">\r\n            <p-tableCheckbox *ngIf=\"row.selectable != false\" [value]=\"row\" />\r\n          </td>\r\n          <td *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\">\r\n            <p-tableRadioButton [value]=\"row\" />\r\n          </td>\r\n          <td *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n            <div *ngIf=\"row.icons[col]\">\r\n              <div class=\"smart-table-icon-container\">\r\n                <div *ngFor=\"let ir of getImageResourceIcons(row, col)\">\r\n                  <smart-icon [imageResource]=\"ir\"> </smart-icon>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <ng-container *ngIf=\"showCellToolbar(row, col)\">\r\n              <smart-ui-action-toolbar\r\n                [uiActionModels]=\"getRowColumnAction(row, col)\"\r\n              ></smart-ui-action-toolbar>\r\n            </ng-container>\r\n\r\n            <div *ngIf=\"!row.icons[col]\" [innerHtml]=\"getColValue(col, row)\"> </div>\r\n          </td>\r\n          <td>\r\n            <div class=\"menu-button\">\r\n              @if (showCellToolbar(row, defaultActionToolbarId)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowColumnAction(row, defaultActionToolbarId)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n              @if (shouldShowOptionsButton(row)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowMenuActionModelArray(row)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n            </div>\r\n          </td>\r\n          <td *ngIf=\"smartGrid.expandable\">\r\n            <p-button\r\n              type=\"button\"\r\n              pRipple\r\n              [pRowToggler]=\"row\"\r\n              [text]=\"true\"\r\n              severity=\"secondary\"\r\n              [rounded]=\"true\"\r\n              [icon]=\"expanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'\"\r\n            />\r\n          </td>\r\n        </tr>\r\n      </ng-template>\r\n      @if (smartGrid.expandable) {\r\n        <ng-template pTemplate=\"rowexpansion\" let-row>\r\n          <tr>\r\n            <td colspan=\"100%\">\r\n              <lib-expanded-row-renderer-component\r\n                [rowId]=\"row.id\"\r\n                [rowExpander]=\"this\"\r\n                [expandedComponent]=\"smartGrid.expandedComponent\"\r\n                [smartGrid]=\"this.smartGrid\"\r\n              ></lib-expanded-row-renderer-component>\r\n            </td>\r\n          </tr>\r\n        </ng-template>\r\n      }\r\n    </p-table>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : '',\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let row of smartGrid.gridModel.page.rows\"\r\n        [class.clickable-row]=\"row.layoutDescriptor\"\r\n        (click)=\"row.layoutDescriptor && onClick(row)\"\r\n        [item]=\"row\"\r\n        [smartGrid]=\"smartGrid\"\r\n        [parent]=\"this.parent\"\r\n        [parentLayoutComponent]=\"this.parentLayoutComponent\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div *ngIf=\"smartGrid.paginator\" class=\"paginator-row\">\r\n      <div class=\"paginator-wrap\">\r\n        <p-paginator\r\n          [first]=\"pageIndex!\"\r\n          [totalRecords]=\"length!\"\r\n          [rows]=\"pageSize\"\r\n          [rowsPerPageOptions]=\"pageSizeOptions\"\r\n          currentPageReportTemplate=\"{first} - {last} / {totalRecords}\"\r\n          (onPageChange)=\"onPrimeChangePage($event)\"\r\n          [showCurrentPageReport]=\"true\"\r\n          dropdownAppendTo=\"body\"\r\n        ></p-paginator>\r\n      </div>\r\n\r\n      <button\r\n        pButton\r\n        type=\"button\"\r\n        icon=\"pi pi-refresh\"\r\n        class=\"p-button-text\"\r\n        pTooltip=\"Friss\u00EDt\u00E9s\"\r\n        (click)=\"refreshPartialResults()\"\r\n        *ngIf=\"smartGrid.gridModel?.refreshEnabled\"\r\n      ></button>\r\n    </div>\r\n    <p-menu #menu [model]=\"menuButtons\" [popup]=\"true\" appendTo=\"body\"> </p-menu>\r\n  </div>\r\n} @else {\r\n  <div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n    <div class=\"smart-grid-toolbar\">\r\n      <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n      <button\r\n        (click)=\"editColumns()\"\r\n        mat-mini-fab\r\n        color=\"text-primary\"\r\n        *ngIf=\"smartGrid.showEditColumns\"\r\n      >\r\n        <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\r\n          >view_columns</mat-icon\r\n        >\r\n      </button>\r\n    </div>\r\n    <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n    <div class=\"smartGridContent\">\r\n      <div>\r\n        <div *ngIf=\"smartGrid.showResultCount\">\r\n          <div class=\"smartGrid-data-number\">\r\n            {{ smartGrid.gridModel.totalRowCount }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"smart-grid-table-container\">\r\n        <ng-template #table></ng-template>\r\n      </div>\r\n\r\n      <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n        <smart-expandable-section\r\n          #gridExpandableSection\r\n          *ngFor=\"let expandableSection of expandableSections\"\r\n          [data]=\"expandableSection\"\r\n        ></smart-expandable-section>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef\"\r\n        class=\"cards-container\"\r\n        [ngStyle]=\"{\r\n          'grid-template-columns':\r\n            smartGrid.numberOfColumn !== undefined\r\n              ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n              : '',\r\n        }\"\r\n      >\r\n        <app-smart-grid-card\r\n          class=\"smartGrid-card-container\"\r\n          *ngFor=\"let row of smartGrid.gridModel.page.rows\"\r\n          [class.clickable-row]=\"row.layoutDescriptor\"\r\n          (click)=\"row.layoutDescriptor && onClick(row)\"\r\n          [item]=\"row\"\r\n          [smartGrid]=\"smartGrid\"\r\n          [parent]=\"this.parent\"\r\n          [parentLayoutComponent]=\"this.parentLayoutComponent\"\r\n        ></app-smart-grid-card>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n        class=\"tree-container\"\r\n        [ngStyle]=\"{\r\n          'grid-template-columns':\r\n            smartGrid.numberOfColumn !== undefined\r\n              ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n              : '',\r\n        }\"\r\n      >\r\n        <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n          <mat-tree-node\r\n            *matTreeNodeDef=\"let node\"\r\n            matTreeNodeToggle\r\n            matTreeNodePadding\r\n            matTreeNodePaddingIndent=\"24\"\r\n          >\r\n            <button mat-icon-button disabled class=\"tree-button\"></button>\r\n            <mat-checkbox\r\n              class=\"checklist-leaf-node\"\r\n              [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n              (change)=\"treeNodeSelectionToggle(node)\"\r\n              >{{ getTreeItem(node) }}</mat-checkbox\r\n            >\r\n          </mat-tree-node>\r\n\r\n          <mat-tree-node\r\n            *matTreeNodeDef=\"let node; when: hasChild\"\r\n            matTreeNodePadding\r\n            matTreeNodePaddingIndent=\"24\"\r\n          >\r\n            <button\r\n              mat-icon-button\r\n              matTreeNodeToggle\r\n              class=\"tree-button\"\r\n              [attr.aria-label]=\"'Toggle ' + node.item\"\r\n            >\r\n              <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n              </mat-icon>\r\n            </button>\r\n            <mat-checkbox\r\n              [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n              [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n              (change)=\"treeNodeSelectionToggle(node)\"\r\n              >{{ getTreeItem(node) }}</mat-checkbox\r\n            >\r\n          </mat-tree-node>\r\n        </mat-tree>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"smartGrid.paginator\" class=\"paginator-row-material\">\r\n      <button\r\n        pButton\r\n        type=\"button\"\r\n        icon=\"pi pi-refresh\"\r\n        class=\"p-button-text\"\r\n        pTooltip=\"Friss\u00EDt\u00E9s\"\r\n        (click)=\"refreshPartialResults()\"\r\n        *ngIf=\"smartGrid.gridModel?.refreshEnabled\"\r\n      ></button>\r\n      <mat-paginator\r\n        *ngIf=\"smartGrid.paginator && !treeControl\"\r\n        #paginator\r\n        [length]=\"length\"\r\n        [pageIndex]=\"pageIndex\"\r\n        [pageSize]=\"pageSize\"\r\n        [pageSizeOptions]=\"pageSizeOptions\"\r\n        (page)=\"onChangePage($event)\"\r\n      ></mat-paginator>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.primeSmartGrid-container{display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.cards-container{display:grid;gap:1rem;padding: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:#0003}.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)}.tree-button{width:24px!important;height:24px!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.headerToolbar ::ng-deep .uiActionButtonsContainer{justify-content:flex-end}.tableCaption{display:flex;flex-direction:row;justify-content:space-between}.tableCaption:has(*){padding:.5rem;border-top:1px solid #e9ecef;border-bottom:1px solid #e9ecef}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th,:host ::ng-deep .p-datatable .p-datatable-header{padding:.5rem}.captionTitle{font-size:1.5rem;align-content:center}:host ::ng-deep .p-datatable-header:has(.tableCaption){padding:0;border:unset}.paginator-row{display:flex;align-items:center;align-self:center;gap:.25rem}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.paginator-wrap{flex:0 0 auto;min-width:0}:host ::ng-deep .paginator-wrap .p-paginator{width:auto}.clickable-row{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i10$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i11$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i11$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i11$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i11$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i11$1.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "directive", type: ComparableMultiselectDirective, selector: "p-multiSelect", inputs: ["compareWith"] }, { kind: "component", type: i16$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i16$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i16$1.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i16$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i16$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i16$1.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i16$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i16$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i19$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i20$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i21$1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "directive", type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "parent", "parentLayoutComponent"] }, { kind: "component", type: ExpandedRowRendererComponent, selector: "lib-expanded-row-renderer-component", inputs: ["rowId", "rowExpander", "expandedComponent", "smartGrid"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-grid', providers: [SmartGridService, SmartDatePipe, SmartDateTimePipe, SmartTimePipe], template: "@if (compLib === componentLibrary.PRIMENG) {\r\n  <div *ngIf=\"smartGrid\" class=\"primeSmartGrid-container\">\r\n    <div class=\"smart-grid-toolbar\">\r\n      <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n    </div>\r\n    <p-table\r\n      *ngIf=\"!smartGrid.layoutDef || smartGrid.layoutDef === layoutDef().TABLE\"\r\n      #pTable\r\n      [value]=\"smartGrid.gridModel.page.rows!\"\r\n      (onSort)=\"gridSort($event)\"\r\n      [customSort]=\"true\"\r\n      [sortMode]=\"'multiple'\"\r\n      [lazy]=\"true\"\r\n      (onLazyLoad)=\"lazyLoad($event)\"\r\n      [reorderableColumns]=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\"\r\n      [columns]=\"columns\"\r\n      (onColReorder)=\"onColOrder($event)\"\r\n      (onRowSelect)=\"onRowSelect($event)\"\r\n      (onRowUnselect)=\"onRowUnselect($event)\"\r\n      [selection]=\"selectedRows\"\r\n      (onHeaderCheckboxToggle)=\"onSelectAllRow($event)\"\r\n      dataKey=\"id\"\r\n      [expandedRowKeys]=\"expandedRows\"\r\n      [rowExpandMode]=\"'multiple'\"\r\n      [rowTrackBy]=\"rowTrackByFn\"\r\n    >\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"tableCaption\">\r\n          <div *ngIf=\"smartGrid.gridModel.title\" class=\"captionTitle\">\r\n            {{ smartGrid.gridModel.title }}\r\n          </div>\r\n          <div *ngIf=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\">\r\n            <p-multiSelect\r\n              display=\"chip\"\r\n              [options]=\"smartGrid.gridModel.view?.descriptor?.columns\"\r\n              optionLabel=\"label\"\r\n              [(ngModel)]=\"columns\"\r\n              selectedItemsLabel=\"{0} columns selected\"\r\n              [style]=\"{ 'min-width': '200px' }\"\r\n              placeholder=\"Choose Columns\"\r\n              (onChange)=\"headerChange($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\">\r\n        <tr>\r\n          @if (smartGrid.gridModel.view?.descriptor?.showEditColumns) {\r\n            <th\r\n              *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            >\r\n              <p-tableHeaderCheckbox />\r\n            </th>\r\n            <th\r\n              *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            ></th>\r\n            <th\r\n              [pSortableColumn]=\"col.propertyName\"\r\n              *ngFor=\"let col of columns\"\r\n              pReorderableColumn\r\n              [attr.data-testid]=\"col.propertyName\"\r\n            >\r\n              <p-sortIcon [field]=\"col.propertyName\" />\r\n              {{ col.label }}\r\n            </th>\r\n          } @else {\r\n            <th\r\n              *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            >\r\n              <p-tableHeaderCheckbox />\r\n            </th>\r\n            <th\r\n              *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            ></th>\r\n            <th\r\n              [pSortableColumn]=\"col.propertyName\"\r\n              *ngFor=\"let col of columns\"\r\n              [attr.data-testid]=\"col.propertyName\"\r\n            >\r\n              <p-sortIcon [field]=\"col.propertyName\" />\r\n              {{ col.label }}\r\n            </th>\r\n          }\r\n\r\n          <th>\r\n            <smart-ui-action-toolbar\r\n              class=\"headerToolbar\"\r\n              #headerToolbar\r\n              [id]=\"'header_not_initialized'\"\r\n            ></smart-ui-action-toolbar>\r\n          </th>\r\n          <th *ngIf=\"smartGrid.expandable\"> </th>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"body\" let-row let-expanded=\"expanded\">\r\n        <tr\r\n          [ngClass]=\"getStyle(row)\"\r\n          [class.rowExpanded]=\"expanded\"\r\n          (dblclick)=\"onDoubleClick(row)\"\r\n          *ngIf=\"row && row.data\"\r\n          [attr.data-testid]=\"row.id ?? null\"\r\n        >\r\n          <td *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\">\r\n            <p-tableCheckbox *ngIf=\"row.selectable != false\" [value]=\"row\" />\r\n          </td>\r\n          <td *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\">\r\n            <p-tableRadioButton [value]=\"row\" />\r\n          </td>\r\n          <td *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n            <div *ngIf=\"row.icons[col]\">\r\n              <div class=\"smart-table-icon-container\">\r\n                <div *ngFor=\"let ir of getImageResourceIcons(row, col)\">\r\n                  <smart-icon [imageResource]=\"ir\"> </smart-icon>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <ng-container *ngIf=\"showCellToolbar(row, col)\">\r\n              <smart-ui-action-toolbar\r\n                [uiActionModels]=\"getRowColumnAction(row, col)\"\r\n              ></smart-ui-action-toolbar>\r\n            </ng-container>\r\n\r\n            <div *ngIf=\"!row.icons[col]\" [innerHtml]=\"getColValue(col, row)\"> </div>\r\n          </td>\r\n          <td>\r\n            <div class=\"menu-button\">\r\n              @if (showCellToolbar(row, defaultActionToolbarId)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowColumnAction(row, defaultActionToolbarId)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n              @if (shouldShowOptionsButton(row)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowMenuActionModelArray(row)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n            </div>\r\n          </td>\r\n          <td *ngIf=\"smartGrid.expandable\">\r\n            <p-button\r\n              type=\"button\"\r\n              pRipple\r\n              [pRowToggler]=\"row\"\r\n              [text]=\"true\"\r\n              severity=\"secondary\"\r\n              [rounded]=\"true\"\r\n              [icon]=\"expanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'\"\r\n            />\r\n          </td>\r\n        </tr>\r\n      </ng-template>\r\n      @if (smartGrid.expandable) {\r\n        <ng-template pTemplate=\"rowexpansion\" let-row>\r\n          <tr>\r\n            <td colspan=\"100%\">\r\n              <lib-expanded-row-renderer-component\r\n                [rowId]=\"row.id\"\r\n                [rowExpander]=\"this\"\r\n                [expandedComponent]=\"smartGrid.expandedComponent\"\r\n                [smartGrid]=\"this.smartGrid\"\r\n              ></lib-expanded-row-renderer-component>\r\n            </td>\r\n          </tr>\r\n        </ng-template>\r\n      }\r\n    </p-table>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : '',\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n        [item]=\"task\"\r\n        [smartGrid]=\"smartGrid\"\r\n        [onSelect]=\"onSelect.bind(this)\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div *ngIf=\"smartGrid.paginator\" class=\"paginator-row\">\r\n      <div class=\"paginator-wrap\">\r\n        <p-paginator\r\n          [first]=\"pageIndex!\"\r\n          [totalRecords]=\"length!\"\r\n          [rows]=\"pageSize\"\r\n          [rowsPerPageOptions]=\"pageSizeOptions\"\r\n          currentPageReportTemplate=\"{first} - {last} / {totalRecords}\"\r\n          (onPageChange)=\"onPrimeChangePage($event)\"\r\n          [showCurrentPageReport]=\"true\"\r\n          dropdownAppendTo=\"body\"\r\n        ></p-paginator>\r\n      </div>\r\n\r\n      <button\r\n        pButton\r\n        type=\"button\"\r\n        icon=\"pi pi-refresh\"\r\n        class=\"p-button-text\"\r\n        pTooltip=\"Friss\u00EDt\u00E9s\"\r\n        (click)=\"refreshPartialResults()\"\r\n        *ngIf=\"smartGrid.gridModel?.refreshEnabled\"\r\n      ></button>\r\n    </div>\r\n    <p-menu #menu [model]=\"menuButtons\" [popup]=\"true\" appendTo=\"body\"> </p-menu>\r\n  </div>\r\n} @else {\r\n  <div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n    <div class=\"smart-grid-toolbar\">\r\n      <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n      <button\r\n        (click)=\"editColumns()\"\r\n        mat-mini-fab\r\n        color=\"text-primary\"\r\n        *ngIf=\"smartGrid.showEditColumns\"\r\n      >\r\n        <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\r\n          >view_columns</mat-icon\r\n        >\r\n      </button>\r\n    </div>\r\n    <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n    <div class=\"smartGridContent\">\r\n      <div>\r\n        <div *ngIf=\"smartGrid.showResultCount\">\r\n          <div class=\"smartGrid-data-number\">\r\n            {{ smartGrid.gridModel.totalRowCount }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"smart-grid-table-container\">\r\n        <ng-template #table></ng-template>\r\n      </div>\r\n\r\n      <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n        <smart-expandable-section\r\n          #gridExpandableSection\r\n          *ngFor=\"let expandableSection of expandableSections\"\r\n          [data]=\"expandableSection\"\r\n        ></smart-expandable-section>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef\"\r\n        class=\"cards-container\"\r\n        [ngStyle]=\"{\r\n          'grid-template-columns':\r\n            smartGrid.numberOfColumn !== undefined\r\n              ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n              : '',\r\n        }\"\r\n      >\r\n        <app-smart-grid-card\r\n          class=\"smartGrid-card-container\"\r\n          *ngFor=\"let task of smartGrid.gridModel.page.rows\"\r\n          [item]=\"task\"\r\n          [smartGrid]=\"smartGrid\"\r\n          [onSelect]=\"onSelect.bind(this)\"\r\n        ></app-smart-grid-card>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n        class=\"tree-container\"\r\n        [ngStyle]=\"{\r\n          'grid-template-columns':\r\n            smartGrid.numberOfColumn !== undefined\r\n              ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n              : '',\r\n        }\"\r\n      >\r\n        <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n          <mat-tree-node\r\n            *matTreeNodeDef=\"let node\"\r\n            matTreeNodeToggle\r\n            matTreeNodePadding\r\n            matTreeNodePaddingIndent=\"24\"\r\n          >\r\n            <button mat-icon-button disabled class=\"tree-button\"></button>\r\n            <mat-checkbox\r\n              class=\"checklist-leaf-node\"\r\n              [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n              (change)=\"treeNodeSelectionToggle(node)\"\r\n              >{{ getTreeItem(node) }}</mat-checkbox\r\n            >\r\n          </mat-tree-node>\r\n\r\n          <mat-tree-node\r\n            *matTreeNodeDef=\"let node; when: hasChild\"\r\n            matTreeNodePadding\r\n            matTreeNodePaddingIndent=\"24\"\r\n          >\r\n            <button\r\n              mat-icon-button\r\n              matTreeNodeToggle\r\n              class=\"tree-button\"\r\n              [attr.aria-label]=\"'Toggle ' + node.item\"\r\n            >\r\n              <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n              </mat-icon>\r\n            </button>\r\n            <mat-checkbox\r\n              [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n              [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n              (change)=\"treeNodeSelectionToggle(node)\"\r\n              >{{ getTreeItem(node) }}</mat-checkbox\r\n            >\r\n          </mat-tree-node>\r\n        </mat-tree>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"smartGrid.paginator\" class=\"paginator-row-material\">\r\n      <button\r\n        pButton\r\n        type=\"button\"\r\n        icon=\"pi pi-refresh\"\r\n        class=\"p-button-text\"\r\n        pTooltip=\"Friss\u00EDt\u00E9s\"\r\n        (click)=\"refreshPartialResults()\"\r\n        *ngIf=\"smartGrid.gridModel?.refreshEnabled\"\r\n      ></button>\r\n      <mat-paginator\r\n        *ngIf=\"smartGrid.paginator && !treeControl\"\r\n        #paginator\r\n        [length]=\"length\"\r\n        [pageIndex]=\"pageIndex\"\r\n        [pageSize]=\"pageSize\"\r\n        [pageSizeOptions]=\"pageSizeOptions\"\r\n        (page)=\"onChangePage($event)\"\r\n      ></mat-paginator>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.primeSmartGrid-container{display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-card-container{height:auto;border:1px solid black;border-radius:8px}.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:#0003}.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)}.tree-button{width:24px!important;height:24px!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.headerToolbar ::ng-deep .uiActionButtonsContainer{justify-content:flex-end}.tableCaption{display:flex;flex-direction:row;justify-content:space-between}.tableCaption:has(*){padding:.5rem;border-top:1px solid #e9ecef;border-bottom:1px solid #e9ecef}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th,:host ::ng-deep .p-datatable .p-datatable-header{padding:.5rem}.captionTitle{font-size:1.5rem;align-content:center}:host ::ng-deep .p-datatable-header:has(.tableCaption){padding:0;border:unset}.paginator-row{display:flex;align-items:center;align-self:center;gap:.25rem}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.paginator-wrap{flex:0 0 auto;min-width:0}:host ::ng-deep .paginator-wrap .p-paginator{width:auto}\n"] }]
+            args: [{ selector: 'smart-grid', providers: [SmartGridService, SmartDatePipe, SmartDateTimePipe, SmartTimePipe], template: "@if (compLib === componentLibrary.PRIMENG) {\r\n  <div *ngIf=\"smartGrid\" class=\"primeSmartGrid-container\">\r\n    <div class=\"smart-grid-toolbar\">\r\n      <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n    </div>\r\n    <p-table\r\n      *ngIf=\"!smartGrid.layoutDef || smartGrid.layoutDef === layoutDef().TABLE\"\r\n      #pTable\r\n      [value]=\"smartGrid.gridModel.page.rows!\"\r\n      (onSort)=\"gridSort($event)\"\r\n      [customSort]=\"true\"\r\n      [sortMode]=\"'multiple'\"\r\n      [lazy]=\"true\"\r\n      (onLazyLoad)=\"lazyLoad($event)\"\r\n      [reorderableColumns]=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\"\r\n      [columns]=\"columns\"\r\n      (onColReorder)=\"onColOrder($event)\"\r\n      (onRowSelect)=\"onRowSelect($event)\"\r\n      (onRowUnselect)=\"onRowUnselect($event)\"\r\n      [selection]=\"selectedRows\"\r\n      (onHeaderCheckboxToggle)=\"onSelectAllRow($event)\"\r\n      dataKey=\"id\"\r\n      [expandedRowKeys]=\"expandedRows\"\r\n      [rowExpandMode]=\"'multiple'\"\r\n      [rowTrackBy]=\"rowTrackByFn\"\r\n    >\r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"tableCaption\">\r\n          <div *ngIf=\"smartGrid.gridModel.title\" class=\"captionTitle\">\r\n            {{ smartGrid.gridModel.title }}\r\n          </div>\r\n          <div *ngIf=\"smartGrid.gridModel.view?.descriptor?.showEditColumns\">\r\n            <p-multiSelect\r\n              display=\"chip\"\r\n              [options]=\"smartGrid.gridModel.view?.descriptor?.columns\"\r\n              optionLabel=\"label\"\r\n              [(ngModel)]=\"columns\"\r\n              selectedItemsLabel=\"{0} columns selected\"\r\n              [style]=\"{ 'min-width': '200px' }\"\r\n              placeholder=\"Choose Columns\"\r\n              (onChange)=\"headerChange($event)\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\">\r\n        <tr>\r\n          @if (smartGrid.gridModel.view?.descriptor?.showEditColumns) {\r\n            <th\r\n              *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            >\r\n              <p-tableHeaderCheckbox />\r\n            </th>\r\n            <th\r\n              *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            ></th>\r\n            <th\r\n              [pSortableColumn]=\"col.propertyName\"\r\n              *ngFor=\"let col of columns\"\r\n              pReorderableColumn\r\n              [attr.data-testid]=\"col.propertyName\"\r\n            >\r\n              <p-sortIcon [field]=\"col.propertyName\" />\r\n              {{ col.label }}\r\n            </th>\r\n          } @else {\r\n            <th\r\n              *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            >\r\n              <p-tableHeaderCheckbox />\r\n            </th>\r\n            <th\r\n              *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\"\r\n              style=\"width: 4rem\"\r\n            ></th>\r\n            <th\r\n              [pSortableColumn]=\"col.propertyName\"\r\n              *ngFor=\"let col of columns\"\r\n              [attr.data-testid]=\"col.propertyName\"\r\n            >\r\n              <p-sortIcon [field]=\"col.propertyName\" />\r\n              {{ col.label }}\r\n            </th>\r\n          }\r\n\r\n          <th>\r\n            <smart-ui-action-toolbar\r\n              class=\"headerToolbar\"\r\n              #headerToolbar\r\n              [id]=\"'header_not_initialized'\"\r\n            ></smart-ui-action-toolbar>\r\n          </th>\r\n          <th *ngIf=\"smartGrid.expandable\"> </th>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"body\" let-row let-expanded=\"expanded\">\r\n        <tr\r\n          [ngClass]=\"getStyle(row)\"\r\n          [class.rowExpanded]=\"expanded\"\r\n          (dblclick)=\"onDoubleClick(row)\"\r\n          *ngIf=\"row && row.data\"\r\n          [attr.data-testid]=\"row.id ?? null\"\r\n        >\r\n          <td *ngIf=\"isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\">\r\n            <p-tableCheckbox *ngIf=\"row.selectable != false\" [value]=\"row\" />\r\n          </td>\r\n          <td *ngIf=\"!isMultiple && (tableType === 'checkbox' || tableType === 'CheckBox')\">\r\n            <p-tableRadioButton [value]=\"row\" />\r\n          </td>\r\n          <td *ngFor=\"let col of smartGrid?.gridModel?.view?.orderedColumnNames\">\r\n            <div *ngIf=\"row.icons[col]\">\r\n              <div class=\"smart-table-icon-container\">\r\n                <div *ngFor=\"let ir of getImageResourceIcons(row, col)\">\r\n                  <smart-icon [imageResource]=\"ir\"> </smart-icon>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <ng-container *ngIf=\"showCellToolbar(row, col)\">\r\n              <smart-ui-action-toolbar\r\n                [uiActionModels]=\"getRowColumnAction(row, col)\"\r\n              ></smart-ui-action-toolbar>\r\n            </ng-container>\r\n\r\n            <div *ngIf=\"!row.icons[col]\" [innerHtml]=\"getColValue(col, row)\"> </div>\r\n          </td>\r\n          <td>\r\n            <div class=\"menu-button\">\r\n              @if (showCellToolbar(row, defaultActionToolbarId)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowColumnAction(row, defaultActionToolbarId)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n              @if (shouldShowOptionsButton(row)) {\r\n                <smart-ui-action-toolbar\r\n                  [uiActionModels]=\"getRowMenuActionModelArray(row)\"\r\n                ></smart-ui-action-toolbar>\r\n              }\r\n            </div>\r\n          </td>\r\n          <td *ngIf=\"smartGrid.expandable\">\r\n            <p-button\r\n              type=\"button\"\r\n              pRipple\r\n              [pRowToggler]=\"row\"\r\n              [text]=\"true\"\r\n              severity=\"secondary\"\r\n              [rounded]=\"true\"\r\n              [icon]=\"expanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'\"\r\n            />\r\n          </td>\r\n        </tr>\r\n      </ng-template>\r\n      @if (smartGrid.expandable) {\r\n        <ng-template pTemplate=\"rowexpansion\" let-row>\r\n          <tr>\r\n            <td colspan=\"100%\">\r\n              <lib-expanded-row-renderer-component\r\n                [rowId]=\"row.id\"\r\n                [rowExpander]=\"this\"\r\n                [expandedComponent]=\"smartGrid.expandedComponent\"\r\n                [smartGrid]=\"this.smartGrid\"\r\n              ></lib-expanded-row-renderer-component>\r\n            </td>\r\n          </tr>\r\n        </ng-template>\r\n      }\r\n    </p-table>\r\n    <div\r\n      *ngIf=\"smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef\"\r\n      class=\"cards-container\"\r\n      [ngStyle]=\"{\r\n        'grid-template-columns':\r\n          smartGrid.numberOfColumn !== undefined\r\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n            : '',\r\n      }\"\r\n    >\r\n      <app-smart-grid-card\r\n        class=\"smartGrid-card-container\"\r\n        *ngFor=\"let row of smartGrid.gridModel.page.rows\"\r\n        [class.clickable-row]=\"row.layoutDescriptor\"\r\n        (click)=\"row.layoutDescriptor && onClick(row)\"\r\n        [item]=\"row\"\r\n        [smartGrid]=\"smartGrid\"\r\n        [parent]=\"this.parent\"\r\n        [parentLayoutComponent]=\"this.parentLayoutComponent\"\r\n      ></app-smart-grid-card>\r\n    </div>\r\n    <div *ngIf=\"smartGrid.paginator\" class=\"paginator-row\">\r\n      <div class=\"paginator-wrap\">\r\n        <p-paginator\r\n          [first]=\"pageIndex!\"\r\n          [totalRecords]=\"length!\"\r\n          [rows]=\"pageSize\"\r\n          [rowsPerPageOptions]=\"pageSizeOptions\"\r\n          currentPageReportTemplate=\"{first} - {last} / {totalRecords}\"\r\n          (onPageChange)=\"onPrimeChangePage($event)\"\r\n          [showCurrentPageReport]=\"true\"\r\n          dropdownAppendTo=\"body\"\r\n        ></p-paginator>\r\n      </div>\r\n\r\n      <button\r\n        pButton\r\n        type=\"button\"\r\n        icon=\"pi pi-refresh\"\r\n        class=\"p-button-text\"\r\n        pTooltip=\"Friss\u00EDt\u00E9s\"\r\n        (click)=\"refreshPartialResults()\"\r\n        *ngIf=\"smartGrid.gridModel?.refreshEnabled\"\r\n      ></button>\r\n    </div>\r\n    <p-menu #menu [model]=\"menuButtons\" [popup]=\"true\" appendTo=\"body\"> </p-menu>\r\n  </div>\r\n} @else {\r\n  <div *ngIf=\"smartGrid\" class=\"smartGrid-container\">\r\n    <div class=\"smart-grid-toolbar\">\r\n      <smart-ui-action-toolbar #toolbar [id]=\"'grid_not_initialized'\"></smart-ui-action-toolbar>\r\n      <button\r\n        (click)=\"editColumns()\"\r\n        mat-mini-fab\r\n        color=\"text-primary\"\r\n        *ngIf=\"smartGrid.showEditColumns\"\r\n      >\r\n        <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\r\n          >view_columns</mat-icon\r\n        >\r\n      </button>\r\n    </div>\r\n    <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\r\n    <div class=\"smartGridContent\">\r\n      <div>\r\n        <div *ngIf=\"smartGrid.showResultCount\">\r\n          <div class=\"smartGrid-data-number\">\r\n            {{ smartGrid.gridModel.totalRowCount }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"smart-grid-table-container\">\r\n        <ng-template #table></ng-template>\r\n      </div>\r\n\r\n      <div *ngIf=\"smartGrid.layoutDef === layoutDef().EXPANDABLE\">\r\n        <smart-expandable-section\r\n          #gridExpandableSection\r\n          *ngFor=\"let expandableSection of expandableSections\"\r\n          [data]=\"expandableSection\"\r\n        ></smart-expandable-section>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef\"\r\n        class=\"cards-container\"\r\n        [ngStyle]=\"{\r\n          'grid-template-columns':\r\n            smartGrid.numberOfColumn !== undefined\r\n              ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n              : '',\r\n        }\"\r\n      >\r\n        <app-smart-grid-card\r\n          class=\"smartGrid-card-container\"\r\n          *ngFor=\"let row of smartGrid.gridModel.page.rows\"\r\n          [class.clickable-row]=\"row.layoutDescriptor\"\r\n          (click)=\"row.layoutDescriptor && onClick(row)\"\r\n          [item]=\"row\"\r\n          [smartGrid]=\"smartGrid\"\r\n          [parent]=\"this.parent\"\r\n          [parentLayoutComponent]=\"this.parentLayoutComponent\"\r\n        ></app-smart-grid-card>\r\n      </div>\r\n      <div\r\n        *ngIf=\"smartGrid.layoutDef === layoutDef().TREE && treeControl\"\r\n        class=\"tree-container\"\r\n        [ngStyle]=\"{\r\n          'grid-template-columns':\r\n            smartGrid.numberOfColumn !== undefined\r\n              ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\r\n              : '',\r\n        }\"\r\n      >\r\n        <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\r\n          <mat-tree-node\r\n            *matTreeNodeDef=\"let node\"\r\n            matTreeNodeToggle\r\n            matTreeNodePadding\r\n            matTreeNodePaddingIndent=\"24\"\r\n          >\r\n            <button mat-icon-button disabled class=\"tree-button\"></button>\r\n            <mat-checkbox\r\n              class=\"checklist-leaf-node\"\r\n              [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n              (change)=\"treeNodeSelectionToggle(node)\"\r\n              >{{ getTreeItem(node) }}</mat-checkbox\r\n            >\r\n          </mat-tree-node>\r\n\r\n          <mat-tree-node\r\n            *matTreeNodeDef=\"let node; when: hasChild\"\r\n            matTreeNodePadding\r\n            matTreeNodePaddingIndent=\"24\"\r\n          >\r\n            <button\r\n              mat-icon-button\r\n              matTreeNodeToggle\r\n              class=\"tree-button\"\r\n              [attr.aria-label]=\"'Toggle ' + node.item\"\r\n            >\r\n              <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n              </mat-icon>\r\n            </button>\r\n            <mat-checkbox\r\n              [checked]=\"treeChecklistSelection?.isSelected(node)\"\r\n              [indeterminate]=\"descendantsPartiallySelected(node)\"\r\n              (change)=\"treeNodeSelectionToggle(node)\"\r\n              >{{ getTreeItem(node) }}</mat-checkbox\r\n            >\r\n          </mat-tree-node>\r\n        </mat-tree>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"smartGrid.paginator\" class=\"paginator-row-material\">\r\n      <button\r\n        pButton\r\n        type=\"button\"\r\n        icon=\"pi pi-refresh\"\r\n        class=\"p-button-text\"\r\n        pTooltip=\"Friss\u00EDt\u00E9s\"\r\n        (click)=\"refreshPartialResults()\"\r\n        *ngIf=\"smartGrid.gridModel?.refreshEnabled\"\r\n      ></button>\r\n      <mat-paginator\r\n        *ngIf=\"smartGrid.paginator && !treeControl\"\r\n        #paginator\r\n        [length]=\"length\"\r\n        [pageIndex]=\"pageIndex\"\r\n        [pageSize]=\"pageSize\"\r\n        [pageSizeOptions]=\"pageSizeOptions\"\r\n        (page)=\"onChangePage($event)\"\r\n      ></mat-paginator>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.primeSmartGrid-container{display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.cards-container{display:grid;gap:1rem;padding: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:#0003}.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)}.tree-button{width:24px!important;height:24px!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.headerToolbar ::ng-deep .uiActionButtonsContainer{justify-content:flex-end}.tableCaption{display:flex;flex-direction:row;justify-content:space-between}.tableCaption:has(*){padding:.5rem;border-top:1px solid #e9ecef;border-bottom:1px solid #e9ecef}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th,:host ::ng-deep .p-datatable .p-datatable-header{padding:.5rem}.captionTitle{font-size:1.5rem;align-content:center}:host ::ng-deep .p-datatable-header:has(.tableCaption){padding:0;border:unset}.paginator-row{display:flex;align-items:center;align-self:center;gap:.25rem}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.paginator-wrap{flex:0 0 auto;min-width:0}:host ::ng-deep .paginator-wrap .p-paginator{width:auto}.clickable-row{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: SmartGridService }, { type: ComponentFactoryService }, { type: i1$3.MatDialog }, { type: i0.Injector }, { type: UiActionDescriptorService }, { type: SmartDatePipe }, { type: SmartDateTimePipe }, { type: SmartTimePipe }, { type: ComponentLibrary, decorators: [{
                     type: Inject,
                     args: [COMPONENT_LIBRARY]
@@ -17438,6 +17518,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Input
             }], uuid: [{
                 type: Input
+            }], parent: [{
+                type: Input
+            }], parentLayoutComponent: [{
+                type: Input
             }], testId: [{
                 type: HostBinding,
                 args: ['attr.data-testid']
@@ -21008,10 +21092,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }] });
 
-/*
- * Public API Surface of smart-grid
- */
-
 class SmartComponentLayoutUtility {
     static getForms(comp) {
         let result = [];
@@ -22429,6 +22509,8 @@ class SmartComponentLayoutComponent {
             },
             layoutDef: SmartLayoutDef.TABLE,
             paginator: true,
+            layoutComponent: SmartComponentLayoutComponent,
+            layoutUtility: SmartComponentLayoutUtility,
         };
         this.bindGrid();
     }
@@ -22539,11 +22621,11 @@ class SmartComponentLayoutComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutComponent, deps: [{ token: SmartformLayoutDefinitionService }, { token: SmartViewContextService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout", parentLayoutComponent: "parentLayoutComponent", parentSmartComponent: "parentSmartComponent", gridRow: "gridRow" }, host: { properties: { "attr.data-testid": "this.testId", "class.horizontal": "this.isHorizontal", "class.vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "formRef", first: true, predicate: SmartformComponent, descendants: true, isSignal: true }, { propertyName: "embeddedSlotVcRefSetter", first: true, predicate: ["embeddedSlot"], descendants: true, read: ViewContainerRef }, { propertyName: "smartFormList", predicate: ["form"], descendants: true }, { propertyName: "smartGridList", predicate: ["grid"], descendants: true }, { propertyName: "smartMapList", predicate: ["map"], descendants: true }, { propertyName: "smartDiagramList", predicate: ["diagram"], descendants: true }, { propertyName: "smartFilterList", predicate: ["filter"], descendants: true }, { propertyName: "toolbarList", predicate: ["toolbar"], descendants: true }, { propertyName: "expandableComponents", predicate: ExpandableSectionComponent, descendants: true }, { propertyName: "components", predicate: SmartComponentLayoutComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n  <smart-expandable-section\r\n    *ngIf=\"expandableSection\"\r\n    [data]=\"expandableSection\"\r\n  ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n  @if (smartComponentLayout?.type === type().CONTAINER) {\r\n    <smart-component-layout\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n      [parentSmartComponent]=\"parentSmartComponent\"\r\n      [parentLayoutComponent]=\"this\"\r\n      [smartComponentLayout]=\"layout\"\r\n      [gridRow]=\"gridRow\"\r\n    ></smart-component-layout>\r\n  }\r\n  <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid *ngIf=\"smartGrid\" #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\"></smart-grid>\r\n  <smart-map\r\n    *ngIf=\"!!uuid && !!mapId\"\r\n    #map\r\n    [uuid]=\"uuid\"\r\n    [identifier]=\"mapId\"\r\n    [parent]=\"parentSmartComponent\"\r\n  ></smart-map>\r\n  <smart-diagram\r\n    *ngIf=\"!!uuid && !!smartDiagramId\"\r\n    #diagram\r\n    [uuid]=\"uuid\"\r\n    [identifier]=\"smartDiagramId\"\r\n    [parent]=\"parentSmartComponent\"\r\n  ></smart-diagram>\r\n  <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"!!toolbarId\"\r\n    #toolbar\r\n    [id]=\"toolbarId\"\r\n    [toolbarPropertes]=\"toolbarPropertes\"\r\n  ></smart-ui-action-toolbar>\r\n  <ng-container *ngIf=\"embeddedSlotActive\" #embeddedSlot></ng-container>\r\n</ng-template>\r\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "dev"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmartMapComponent, selector: "smart-map", inputs: ["uuid", "identifier", "parent"] }, { kind: "component", type: SmartDiagramComponent, selector: "smart-diagram", inputs: ["uuid", "identifier", "parent", "diagramModel", "options", "plugins"], outputs: ["elementSelect", "canvasClick", "dataClick"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "parentSmartComponent", "gridRow"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout", parentLayoutComponent: "parentLayoutComponent", parentSmartComponent: "parentSmartComponent", gridRow: "gridRow" }, host: { properties: { "attr.data-testid": "this.testId", "class.horizontal": "this.isHorizontal", "class.vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "formRef", first: true, predicate: SmartformComponent, descendants: true, isSignal: true }, { propertyName: "embeddedSlotVcRefSetter", first: true, predicate: ["embeddedSlot"], descendants: true, read: ViewContainerRef }, { propertyName: "smartFormList", predicate: ["form"], descendants: true }, { propertyName: "smartGridList", predicate: ["grid"], descendants: true }, { propertyName: "smartMapList", predicate: ["map"], descendants: true }, { propertyName: "smartDiagramList", predicate: ["diagram"], descendants: true }, { propertyName: "smartFilterList", predicate: ["filter"], descendants: true }, { propertyName: "toolbarList", predicate: ["toolbar"], descendants: true }, { propertyName: "expandableComponents", predicate: ExpandableSectionComponent, descendants: true }, { propertyName: "components", predicate: SmartComponentLayoutComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n  <smart-expandable-section\r\n    *ngIf=\"expandableSection\"\r\n    [data]=\"expandableSection\"\r\n  ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n  @if (smartComponentLayout?.type === type().CONTAINER) {\r\n    <smart-component-layout\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n      [parentSmartComponent]=\"parentSmartComponent\"\r\n      [parentLayoutComponent]=\"this\"\r\n      [smartComponentLayout]=\"layout\"\r\n      [gridRow]=\"gridRow\"\r\n    ></smart-component-layout>\r\n  }\r\n  <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid\r\n    *ngIf=\"smartGrid\"\r\n    #grid\r\n    [smartGrid]=\"smartGrid\"\r\n    [uuid]=\"uuid!\"\r\n    [parentLayoutComponent]=\"this\"\r\n    [parent]=\"parentSmartComponent\"\r\n  ></smart-grid>\r\n  <smart-map\r\n    *ngIf=\"!!uuid && !!mapId\"\r\n    #map\r\n    [uuid]=\"uuid\"\r\n    [identifier]=\"mapId\"\r\n    [parent]=\"parentSmartComponent\"\r\n  ></smart-map>\r\n  <smart-diagram\r\n    *ngIf=\"!!uuid && !!smartDiagramId\"\r\n    #diagram\r\n    [uuid]=\"uuid\"\r\n    [identifier]=\"smartDiagramId\"\r\n    [parent]=\"parentSmartComponent\"\r\n  ></smart-diagram>\r\n  <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"!!toolbarId\"\r\n    #toolbar\r\n    [id]=\"toolbarId\"\r\n    [toolbarPropertes]=\"toolbarPropertes\"\r\n  ></smart-ui-action-toolbar>\r\n  <ng-container *ngIf=\"embeddedSlotActive\" #embeddedSlot></ng-container>\r\n</ng-template>\r\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "parent", "parentLayoutComponent", "dev"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmartMapComponent, selector: "smart-map", inputs: ["uuid", "identifier", "parent"] }, { kind: "component", type: SmartDiagramComponent, selector: "smart-diagram", inputs: ["uuid", "identifier", "parent", "diagramModel", "options", "plugins"], outputs: ["elementSelect", "canvasClick", "dataClick"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "parentSmartComponent", "gridRow"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartComponentLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-component-layout', template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n  <smart-expandable-section\r\n    *ngIf=\"expandableSection\"\r\n    [data]=\"expandableSection\"\r\n  ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n  @if (smartComponentLayout?.type === type().CONTAINER) {\r\n    <smart-component-layout\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n      [parentSmartComponent]=\"parentSmartComponent\"\r\n      [parentLayoutComponent]=\"this\"\r\n      [smartComponentLayout]=\"layout\"\r\n      [gridRow]=\"gridRow\"\r\n    ></smart-component-layout>\r\n  }\r\n  <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid *ngIf=\"smartGrid\" #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\"></smart-grid>\r\n  <smart-map\r\n    *ngIf=\"!!uuid && !!mapId\"\r\n    #map\r\n    [uuid]=\"uuid\"\r\n    [identifier]=\"mapId\"\r\n    [parent]=\"parentSmartComponent\"\r\n  ></smart-map>\r\n  <smart-diagram\r\n    *ngIf=\"!!uuid && !!smartDiagramId\"\r\n    #diagram\r\n    [uuid]=\"uuid\"\r\n    [identifier]=\"smartDiagramId\"\r\n    [parent]=\"parentSmartComponent\"\r\n  ></smart-diagram>\r\n  <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"!!toolbarId\"\r\n    #toolbar\r\n    [id]=\"toolbarId\"\r\n    [toolbarPropertes]=\"toolbarPropertes\"\r\n  ></smart-ui-action-toolbar>\r\n  <ng-container *ngIf=\"embeddedSlotActive\" #embeddedSlot></ng-container>\r\n</ng-template>\r\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}\n"] }]
+            args: [{ selector: 'smart-component-layout', template: "<div *ngIf=\"smartComponentLayout?.expandable; then expandable; else normal\"> </div>\r\n\r\n<ng-template #expandable>\r\n  <smart-expandable-section\r\n    *ngIf=\"expandableSection\"\r\n    [data]=\"expandableSection\"\r\n  ></smart-expandable-section>\r\n</ng-template>\r\n\r\n<ng-template #normal>\r\n  @if (smartComponentLayout?.type === type().CONTAINER) {\r\n    <smart-component-layout\r\n      *ngFor=\"let layout of smartComponentLayout?.components\"\r\n      [parentSmartComponent]=\"parentSmartComponent\"\r\n      [parentLayoutComponent]=\"this\"\r\n      [smartComponentLayout]=\"layout\"\r\n      [gridRow]=\"gridRow\"\r\n    ></smart-component-layout>\r\n  }\r\n  <smartform *ngIf=\"smartForm\" #form [smartForm]=\"smartForm\"></smartform>\r\n  <smart-grid\r\n    *ngIf=\"smartGrid\"\r\n    #grid\r\n    [smartGrid]=\"smartGrid\"\r\n    [uuid]=\"uuid!\"\r\n    [parentLayoutComponent]=\"this\"\r\n    [parent]=\"parentSmartComponent\"\r\n  ></smart-grid>\r\n  <smart-map\r\n    *ngIf=\"!!uuid && !!mapId\"\r\n    #map\r\n    [uuid]=\"uuid\"\r\n    [identifier]=\"mapId\"\r\n    [parent]=\"parentSmartComponent\"\r\n  ></smart-map>\r\n  <smart-diagram\r\n    *ngIf=\"!!uuid && !!smartDiagramId\"\r\n    #diagram\r\n    [uuid]=\"uuid\"\r\n    [identifier]=\"smartDiagramId\"\r\n    [parent]=\"parentSmartComponent\"\r\n  ></smart-diagram>\r\n  <!-- <smart-filter #filter [filter]=\"smartFilter\"></smart-filter> -->\r\n  <smart-tree *ngIf=\"treeService\" [treeService]=\"treeService!\"></smart-tree>\r\n  <smart-ui-action-toolbar\r\n    *ngIf=\"!!toolbarId\"\r\n    #toolbar\r\n    [id]=\"toolbarId\"\r\n    [toolbarPropertes]=\"toolbarPropertes\"\r\n  ></smart-ui-action-toolbar>\r\n  <ng-container *ngIf=\"embeddedSlotActive\" #embeddedSlot></ng-container>\r\n</ng-template>\r\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}\n"] }]
         }], ctorParameters: () => [{ type: SmartformLayoutDefinitionService }, { type: SmartViewContextService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { smartComponentLayout: [{
                 type: Input
             }], parentLayoutComponent: [{
@@ -23807,6 +23889,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: FilterService }, { type: SmartViewContextService }] });
 
+/*
+ * Public API Surface of smart-grid
+ */
+
 /*
  * Public API Surface of smarttree
  */
@@ -25098,7 +25184,7 @@ class SearchPageComponent extends SmartComponent {
         return this.data?.noResultText !== undefined && this.data?.noResultText !== null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SearchPageComponent, deps: [{ token: i0.Injector }, { token: SmartFilterEditorService }, { token: 'searchPageName' }, { token: 'searchComponentName' }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SearchPageComponent, selector: "search-page", providers: [SmartFilterEditorService], viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"searchPageContainer\" [ngClass]=\"data?.cssClassOfPage\">\r\n  <h1 class=\"search-page-title\"> {{ data?.pageTitle }} </h1>\r\n  <!-- <div class=\"filterContainer\">\r\n    <smart-filter [filter]=\"filter\"></smart-filter>\r\n  </div> -->\r\n  <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\r\n  @if (filterService.model) {\r\n    <div class=\"filter-editor-container\">\r\n      <smart-filter-group-params [service]=\"filterService\"></smart-filter-group-params>\r\n      <smart-filter-expression-editor [service]=\"filterService\"></smart-filter-expression-editor>\r\n    </div>\r\n  }\r\n  <smart-component-layout\r\n    *ngIf=\"layout\"\r\n    [smartComponentLayout]=\"layout\"\r\n    [parentSmartComponent]=\"this\"\r\n  ></smart-component-layout>\r\n  <div class=\"gridContainer\">\r\n    <h2 *ngIf=\"isShowNoResultText()\" class=\"noResultText\">\r\n      {{ data?.noResultText }}\r\n    </h2>\r\n    <smart-grid\r\n      *ngIf=\"!isShowNoResultText()\"\r\n      #grid\r\n      [smartGrid]=\"smartGrid\"\r\n      [uuid]=\"uuid!\"\r\n    ></smart-grid>\r\n  </div>\r\n</div>\r\n", styles: [".searchPageContainer{display:flex;flex-direction:column;gap:1.5rem}.filterContainer{display:flex;flex-direction:row;gap:1rem}.gridContainer{flex-grow:1}.filter-editor-container{display:flex;flex-direction:row}.noResultText{width:100%;text-align:center;padding-top:2rem;padding-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "dev"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "parentSmartComponent", "gridRow"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: ["service"] }, { kind: "component", type: SmartFilterEditorContentComponent, selector: "smart-filter-expression-editor", inputs: ["service"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SearchPageComponent, selector: "search-page", providers: [SmartFilterEditorService], viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"searchPageContainer\" [ngClass]=\"data?.cssClassOfPage\">\r\n  <h1 class=\"search-page-title\"> {{ data?.pageTitle }} </h1>\r\n  <!-- <div class=\"filterContainer\">\r\n    <smart-filter [filter]=\"filter\"></smart-filter>\r\n  </div> -->\r\n  <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\r\n  @if (filterService.model) {\r\n    <div class=\"filter-editor-container\">\r\n      <smart-filter-group-params [service]=\"filterService\"></smart-filter-group-params>\r\n      <smart-filter-expression-editor [service]=\"filterService\"></smart-filter-expression-editor>\r\n    </div>\r\n  }\r\n  <smart-component-layout\r\n    *ngIf=\"layout\"\r\n    [smartComponentLayout]=\"layout\"\r\n    [parentSmartComponent]=\"this\"\r\n  ></smart-component-layout>\r\n  <div class=\"gridContainer\">\r\n    <h2 *ngIf=\"isShowNoResultText()\" class=\"noResultText\">\r\n      {{ data?.noResultText }}\r\n    </h2>\r\n    <smart-grid\r\n      *ngIf=\"!isShowNoResultText()\"\r\n      #grid\r\n      [smartGrid]=\"smartGrid\"\r\n      [uuid]=\"uuid!\"\r\n    ></smart-grid>\r\n  </div>\r\n</div>\r\n", styles: [".searchPageContainer{display:flex;flex-direction:column;gap:1.5rem}.filterContainer{display:flex;flex-direction:row;gap:1rem}.gridContainer{flex-grow:1}.filter-editor-container{display:flex;flex-direction:row}.noResultText{width:100%;text-align:center;padding-top:2rem;padding-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "parent", "parentLayoutComponent", "dev"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "parentSmartComponent", "gridRow"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: ["service"] }, { kind: "component", type: SmartFilterEditorContentComponent, selector: "smart-filter-expression-editor", inputs: ["service"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SearchPageComponent, decorators: [{
             type: Component,
@@ -25301,7 +25387,7 @@ class SubjectSelectorComponent extends SmartComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubjectSelectorComponent, deps: [{ token: i0.Injector }, { token: SmartFilterEditorService }, { token: 'subjectSelectorPageName' }, { token: 'subjectSelectorComponentName' }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubjectSelectorComponent, selector: "app-subject-selector", providers: [SmartFilterEditorService], usesInheritance: true, ngImport: i0, template: "<div class=\"subject-selector-container\">\r\n  <ng-template #subjectSelectorFrom></ng-template>\r\n  <smartform [smartForm]=\"smartForm\"></smartform>\r\n  <smart-filter-group-params [service]=\"filterService\"></smart-filter-group-params>\r\n  <div class=\"filter-editor-container\">\r\n    <smart-filter-expression-editor [service]=\"filterService\"></smart-filter-expression-editor>\r\n    <smart-ui-action-toolbar [id]=\"'search'\"></smart-ui-action-toolbar>\r\n  </div>\r\n  <div class=\"gridContainer\">\r\n    <smart-grid #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\" class=\"subject-grid\"></smart-grid>\r\n  </div>\r\n  <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\r\n</div>\r\n", styles: [".subject-selector-container{display:flex;flex-direction:column;gap:.5rem;height:80vh;min-width:60vh}.gridContainer{flex-grow:1;overflow-y:auto!important}::ng-deep .smartGridContent{overflow-y:auto!important}.filter-editor-container{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "dev"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: ["service"] }, { kind: "component", type: SmartFilterEditorContentComponent, selector: "smart-filter-expression-editor", inputs: ["service"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubjectSelectorComponent, selector: "app-subject-selector", providers: [SmartFilterEditorService], usesInheritance: true, ngImport: i0, template: "<div class=\"subject-selector-container\">\r\n  <ng-template #subjectSelectorFrom></ng-template>\r\n  <smartform [smartForm]=\"smartForm\"></smartform>\r\n  <smart-filter-group-params [service]=\"filterService\"></smart-filter-group-params>\r\n  <div class=\"filter-editor-container\">\r\n    <smart-filter-expression-editor [service]=\"filterService\"></smart-filter-expression-editor>\r\n    <smart-ui-action-toolbar [id]=\"'search'\"></smart-ui-action-toolbar>\r\n  </div>\r\n  <div class=\"gridContainer\">\r\n    <smart-grid #grid [smartGrid]=\"smartGrid\" [uuid]=\"uuid!\" class=\"subject-grid\"></smart-grid>\r\n  </div>\r\n  <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\r\n</div>\r\n", styles: [".subject-selector-container{display:flex;flex-direction:column;gap:.5rem;height:80vh;min-width:60vh}.gridContainer{flex-grow:1;overflow-y:auto!important}::ng-deep .smartGridContent{overflow-y:auto!important}.filter-editor-container{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "parent", "parentLayoutComponent", "dev"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: ["service"] }, { kind: "component", type: SmartFilterEditorContentComponent, selector: "smart-filter-expression-editor", inputs: ["service"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubjectSelectorComponent, decorators: [{
             type: Component,