@smartbit4all/ng-client 4.2.108 → 4.2.110

package/fesm2022/smartbit4all-ng-client.mjs

@@ -12972,6 +12972,50 @@ var SmartFilterType;
  * Public API Surface of smart-filter
  */
 
+class ExpandedRowRendererComponent {
+    constructor(cfService) {
+        this.cfService = cfService;
+    }
+    ngOnDestroy() {
+        this.vcRef?.clear();
+    }
+    async ngAfterViewInit() {
+        await this.loadComponent();
+    }
+    async loadComponent() {
+        this.vcRef.clear();
+        const rowData = await this.rowExpander.expandAsync(this.rowId);
+        this.componentRef = this.cfService.createComponent(this.vcRef, this.expandedComponent, new Map([
+            ['rowData', rowData],
+            ['smartGrid', this.smartGrid],
+        ]));
+    }
+    async refreshRowData() {
+        if (!this.componentRef)
+            return;
+        const rowData = await this.rowExpander.expandAsync(this.rowId);
+        this.componentRef.instance.rowData = rowData;
+        this.componentRef.instance.smartGrid = this.smartGrid;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExpandedRowRendererComponent, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ExpandedRowRendererComponent, selector: "lib-expanded-row-renderer-component", inputs: { rowId: "rowId", rowExpander: "rowExpander", expandedComponent: "expandedComponent", smartGrid: "smartGrid" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["component"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-template #component></ng-template>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExpandedRowRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-expanded-row-renderer-component', template: "<ng-template #component></ng-template>\r\n" }]
+        }], ctorParameters: () => [{ type: ComponentFactoryService }], propDecorators: { vcRef: [{
+                type: ViewChild,
+                args: ['component', { read: ViewContainerRef }]
+            }], rowId: [{
+                type: Input
+            }], rowExpander: [{
+                type: Input
+            }], expandedComponent: [{
+                type: Input
+            }], smartGrid: [{
+                type: Input
+            }] } });
+
 var ExpandableSectionButtonType;
 (function (ExpandableSectionButtonType) {
     ExpandableSectionButtonType[ExpandableSectionButtonType["BUTTON"] = 0] = "BUTTON";
@@ -13067,40 +13111,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 args: ['headerComponent', { read: ViewContainerRef }]
             }] } });
 
-class ExpandedRowRendererComponent {
-    constructor(cfService) {
-        this.cfService = cfService;
-    }
-    ngOnDestroy() {
-        this.vcRef?.clear();
-    }
-    async ngAfterViewInit() {
-        this.vcRef.clear();
-        let rowData = await this.rowExpander.expandAsync(this.rowId);
-        this.cfService.createComponent(this.vcRef, this.expandedComponent, new Map([
-            ['rowData', rowData],
-            ['smartGrid', this.smartGrid],
-        ]));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExpandedRowRendererComponent, deps: [{ token: ComponentFactoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ExpandedRowRendererComponent, selector: "lib-expanded-row-renderer-component", inputs: { rowId: "rowId", rowExpander: "rowExpander", expandedComponent: "expandedComponent", smartGrid: "smartGrid" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["component"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-template #component></ng-template>\r\n", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ExpandedRowRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-expanded-row-renderer-component', template: "<ng-template #component></ng-template>\r\n" }]
-        }], ctorParameters: () => [{ type: ComponentFactoryService }], propDecorators: { vcRef: [{
-                type: ViewChild,
-                args: ['component', { read: ViewContainerRef }]
-            }], rowId: [{
-                type: Input
-            }], rowExpander: [{
-                type: Input
-            }], expandedComponent: [{
-                type: Input
-            }], smartGrid: [{
-                type: Input
-            }] } });
-
 class SmartGridComponent {
     constructor(service, cfService, dialog, injector, uiActionDescriptorService, compLib, gridMenuIcon) {
         this.service = service;
@@ -13146,6 +13156,10 @@ class SmartGridComponent {
             // called after every service call (load, save, refresh, etc.)
             this.smartGrid.gridModel = this.service.gridModel;
             this.render();
+            //Refresh expanded sections data
+            if (this.smartGrid.expandable) {
+                this.expandedRowsComps.forEach((rowComp) => rowComp.refreshRowData());
+            }
         });
     }
     ngOnChanges(changes) {
@@ -14038,11 +14052,11 @@ class SmartGridComponent {
         return row.id;
     }
     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: 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" }, providers: [SmartGridService], 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 }], usesOnChanges: true, ngImport: i0, template: "@if(compLib === componentLibrary.PRIMENG) {\r\n\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 [pSortableColumn]=\"col.propertyName\" *ngFor=\"let col of columns\" pReorderableColumn>\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 [pSortableColumn]=\"col.propertyName\" *ngFor=\"let col of columns\">\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 [ngClass]=\"getStyle(row)\" (dblclick)=\"onDoubleClick(row)\" *ngIf=\"row && row.data\">\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            <p-button\r\n              [rounded]=\"true\"\r\n              [text]=\"true\"\r\n              *ngIf=\"shouldShowOptionsButton(row)\"\r\n              (onClick)=\"onOptionsClick($event, row)\"\r\n            >\r\n              <smart-icon icon=\"ellipsis-v\"></smart-icon>\r\n            </p-button>\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]=\"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  <p-paginator\r\n    *ngIf=\"smartGrid.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  />\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\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}\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}\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: i9$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i10$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i10$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i10$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i10$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i10$1.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: i4$2.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"] }, { kind: "directive", type: ComparableMultiselectDirective, selector: "p-multiSelect", inputs: ["compareWith"] }, { kind: "component", type: i15.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: i5$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i15.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i15.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i15.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i15.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i15.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i15.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i15.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { 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: i18$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: "component", type: i19$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", dev: "dev" }, providers: [SmartGridService], 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\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 [pSortableColumn]=\"col.propertyName\" *ngFor=\"let col of columns\" pReorderableColumn>\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 [pSortableColumn]=\"col.propertyName\" *ngFor=\"let col of columns\">\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 [ngClass]=\"getStyle(row)\" (dblclick)=\"onDoubleClick(row)\" *ngIf=\"row && row.data\">\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            <p-button\r\n              [rounded]=\"true\"\r\n              [text]=\"true\"\r\n              *ngIf=\"shouldShowOptionsButton(row)\"\r\n              (onClick)=\"onOptionsClick($event, row)\"\r\n            >\r\n              <smart-icon icon=\"ellipsis-v\"></smart-icon>\r\n            </p-button>\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  <p-paginator\r\n    *ngIf=\"smartGrid.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  />\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\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}\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}\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: i9$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i10$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i10$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i10$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i10$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i10$1.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: i4$2.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"] }, { kind: "directive", type: ComparableMultiselectDirective, selector: "p-multiSelect", inputs: ["compareWith"] }, { kind: "component", type: i15.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: i5$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i15.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i15.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i15.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i15.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i15.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i15.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i15.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { 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: i18$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: "component", type: i19$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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-grid', providers: [SmartGridService], template: "@if(compLib === componentLibrary.PRIMENG) {\r\n\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 [pSortableColumn]=\"col.propertyName\" *ngFor=\"let col of columns\" pReorderableColumn>\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 [pSortableColumn]=\"col.propertyName\" *ngFor=\"let col of columns\">\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 [ngClass]=\"getStyle(row)\" (dblclick)=\"onDoubleClick(row)\" *ngIf=\"row && row.data\">\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            <p-button\r\n              [rounded]=\"true\"\r\n              [text]=\"true\"\r\n              *ngIf=\"shouldShowOptionsButton(row)\"\r\n              (onClick)=\"onOptionsClick($event, row)\"\r\n            >\r\n              <smart-icon icon=\"ellipsis-v\"></smart-icon>\r\n            </p-button>\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]=\"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  <p-paginator\r\n    *ngIf=\"smartGrid.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  />\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\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}\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}\n"] }]
+            args: [{ selector: 'smart-grid', providers: [SmartGridService], template: "@if(compLib === componentLibrary.PRIMENG) {\r\n\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 [pSortableColumn]=\"col.propertyName\" *ngFor=\"let col of columns\" pReorderableColumn>\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 [pSortableColumn]=\"col.propertyName\" *ngFor=\"let col of columns\">\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 [ngClass]=\"getStyle(row)\" (dblclick)=\"onDoubleClick(row)\" *ngIf=\"row && row.data\">\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            <p-button\r\n              [rounded]=\"true\"\r\n              [text]=\"true\"\r\n              *ngIf=\"shouldShowOptionsButton(row)\"\r\n              (onClick)=\"onOptionsClick($event, row)\"\r\n            >\r\n              <smart-icon icon=\"ellipsis-v\"></smart-icon>\r\n            </p-button>\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  <p-paginator\r\n    *ngIf=\"smartGrid.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  />\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\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}\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}\n"] }]
         }], ctorParameters: () => [{ type: SmartGridService }, { type: ComponentFactoryService }, { type: i1$3.MatDialog }, { type: i0.Injector }, { type: UiActionDescriptorService }, { type: ComponentLibrary, decorators: [{
                     type: Inject,
                     args: [COMPONENT_LIBRARY]
@@ -14064,6 +14078,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             }], _headerToolbar: [{
                 type: ViewChild,
                 args: ['headerToolbar']
+            }], expandedRowsComps: [{
+                type: ViewChildren,
+                args: [ExpandedRowRendererComponent]
             }], menu: [{
                 type: ViewChild,
                 args: ['menu']