spiderly 19.3.0-preview.0 → 19.3.1

package/fesm2022/spiderly.mjs

@@ -3048,6 +3048,12 @@ class SpiderlyDataTableComponent {
         this.selectedItems = []; // Pass only when hasLazyLoad === false
         this.onRowSelect = new EventEmitter();
         this.onRowUnselect = new EventEmitter();
+        /**
+       * if true, clicking a row will navigate to the details page.
+       * Set to false to disable row navigation.
+       * Default is false.
+       */
+        this.navigateOnRowClick = false;
         this.clientFilterCount = 0;
     }
     ngOnInit() {
@@ -3193,8 +3199,29 @@ class SpiderlyDataTableComponent {
             return false;
         }
     }
+    /*
+      * Navigate to details page based on rowId and rowNavigationPath.
+      * If rowNavigationPath is provided, it will navigate to that path with the rowId.
+      * If not, it will navigate to the current route with the rowId.
+    */
     navigateToDetails(rowId) {
-        this.router.navigate([rowId], { relativeTo: this.route });
+        if (!rowId)
+            return;
+        if (this.rowNavigationPath) {
+            const cleanPath = this.rowNavigationPath.replace(/^\/|\/$/g, ''); // Remove leading and trailing slashes
+            this.router.navigateByUrl(`/${cleanPath}/${rowId}`);
+        }
+        else {
+            this.router.navigate([rowId], { relativeTo: this.route });
+        }
+    }
+    /*
+    * Handle row click event.
+   */
+    onRowClick(row) {
+        if (!this.navigateOnRowClick || !row?.id)
+            return;
+        this.navigateToDetails(row.id);
     }
     deleteObject(rowId) {
         this.deleteRef = this.dialogService.open(SpiderlyDeleteConfirmationComponent, {
@@ -3384,7 +3411,7 @@ class SpiderlyDataTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataTableComponent, deps: [{ token: i3$2.Router }, { token: i1$6.DialogService }, { token: i3$2.ActivatedRoute }, { token: SpiderlyMessageService }, { token: i1.TranslocoService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDataTableComponent, isStandalone: true, selector: "spiderly-data-table", inputs: { tableTitle: "tableTitle", tableIcon: "tableIcon", items: "items", rows: "rows", cols: "cols", showPaginator: "showPaginator", showCardWrapper: "showCardWrapper", readonly: "readonly", idField: "idField", getPaginatedListObservableMethod: "getPaginatedListObservableMethod", exportListToExcelObservableMethod: "exportListToExcelObservableMethod", deleteItemFromTableObservableMethod: "deleteItemFromTableObservableMethod", newlySelectedItems: "newlySelectedItems", unselectedItems: "unselectedItems", selectionMode: "selectionMode", selectedLazyLoadObservableMethod: "selectedLazyLoadObservableMethod", additionalFilterIdLong: "additionalFilterIdLong", showAddButton: "showAddButton", showExportToExcelButton: "showExportToExcelButton", showReloadTableButton: "showReloadTableButton", getFormArrayItems: "getFormArrayItems", hasLazyLoad: "hasLazyLoad", getAlreadySelectedItemIds: "getAlreadySelectedItemIds", getAlreadySelectedItems: "getAlreadySelectedItems", getFormControl: "getFormControl", additionalIndexes: "additionalIndexes" }, outputs: { onTotalRecordsChange: "onTotalRecordsChange", onLazyLoad: "onLazyLoad", onIsAllSelectedChange: "onIsAllSelectedChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n    <p-table #dt [value]=\"items\" [rows]=\"rows\" [rowHover]=\"true\" [paginator]=\"showPaginator\" responsiveLayout=\"scroll\" [lazy]=\"hasLazyLoad\"\r\n    (onLazyLoad)=\"lazyLoad($event)\" [totalRecords]=\"totalRecords\" class=\"spiderly-table\" [loading]=\"(items === undefined || loading === true)\" [selectionMode]=\"selectionMode\" dataKey=\"id\" \r\n    (onFilter)=\"filter($event)\"> \r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"table-header overflow-auto\">\r\n          <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n            <i class=\"{{tableIcon}}\" style=\"font-size: 20px;\"></i>\r\n            <div style=\"margin: 0px; font-size: 17.5px;\">{{tableTitle}}</div>\r\n          </div>\r\n          <div style=\"display: flex; gap: 8px;\">\r\n            <button pButton [label]=\"t('ClearFilters')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-filter-slash\" (click)=\"clear(dt)\"></button>\r\n            <button pButton *ngIf=\"showExportToExcelButton\" [label]=\"t('ExportToExcel')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\r\n            <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-refresh\" (click)=\"reload()\"></button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\">\r\n        <tr>\r\n          <th style=\"width: 0rem;\" *ngIf=\"selectionMode == 'multiple'\">\r\n            <div style=\"display: flex; gap: 8px;\">\r\n              <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectAll($event.checked)\" [(ngModel)]=\"fakeIsAllSelected\" [binary]=\"true\"></p-checkbox> ({{rowsSelectedNumber}})\r\n            </div>\r\n          </th>\r\n          <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n            <th [style]=\"getColHeaderWidth(col.filterType)\">\r\n              <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                {{col.name}}\r\n                <p-columnFilter *ngIf=\"col.filterType != null && col.filterType !== 'blob'\" [type]=\"col.filterType\" [field]=\"col.filterField ?? col.field\" display=\"menu\" [placeholder]=\"col.filterPlaceholder\" \r\n                [showOperator]=\"false\" [showMatchModes]=\"col.showMatchModes\" [showAddButton]=\"col.showAddButton\" [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\r\n                [matchMode]=\"getColMatchMode(col.filterType)\"\r\n                >\r\n                  <ng-template *ngIf=\"isDropOrMulti(col.filterType)\" pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                    <p-multiSelect [ngModel]=\"value\" [options]=\"col.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n                      <ng-template let-item pTemplate=\"item\">\r\n                        <div class=\"p-multiselect-representative-option\">\r\n                          <span class=\"ml-2\">{{ item.label }}</span>\r\n                        </div>\r\n                      </ng-template>\r\n                    </p-multiSelect>\r\n                  </ng-template>\r\n                  <ng-template *ngIf=\"col.filterType == 'date'\" pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                      <p-datepicker \r\n                      [ngModel]=\"value\" \r\n                      [showTime]=\"col.showTime\"\r\n                      (onSelect)=\"filter($event)\"\r\n                      ></p-datepicker>\r\n                  </ng-template>\r\n              </p-columnFilter>\r\n              </div>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"body\" let-rowData let-index=\"rowIndex\" let-editing=\"editing\">\r\n        <tr>\r\n          <td *ngIf=\"selectionMode == 'multiple'\">\r\n              <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectRow(rowData[idField], rowData.index)\" [ngModel]=\"isRowSelected(rowData[idField])\" [binary]=\"true\"></p-checkbox>\r\n          </td>\r\n          <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n            <td [style]=\"getStyleForBodyColumn(col)\" *ngIf=\"!col.editable\">\r\n              <div style=\"display: flex; align-items: center; justify-content: center; gap: 18px;\">\r\n                <ng-container *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\" >\r\n                  <span [pTooltip]=\"action.name\" [class]=\"getClassForAction(action)\" [style]=\"getStyleForAction(action)\" (click)=\"getMethodForAction(action, rowData)\"></span>\r\n                </ng-container>\r\n              </div>\r\n               <ng-container *ngIf=\"col.filterType === 'blob'\">\r\n                <img width=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\">\r\n               </ng-container>\r\n               <ng-container *ngIf=\"col.filterType !== 'blob'\">\r\n                {{getRowData(rowData, col)}}\r\n               </ng-container>\r\n            </td>\r\n            <td *ngIf=\"col.editable\">\r\n              <spiderly-number [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\" [showLabel]=\"false\"></spiderly-number>\r\n            </td>\r\n          </ng-container>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"emptymessage\">\r\n        <tr>\r\n          <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('NoRecordsFound')}}</td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"loadingbody\">\r\n        <tr>\r\n          <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('Loading')}}...</td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"paginatorleft\">\r\n        {{t('TotalRecords')}}: {{totalRecords}}\r\n      </ng-template>\r\n      <ng-template pTemplate=\"paginatorright\">\r\n        <div style=\"display: flex; justify-content: end; gap: 10px;\">\r\n          <spiderly-button *ngIf=\"showAddButton\" [label]=\"t('AddNew')\" icon=\"pi pi-plus\" (onClick)=\"navigateToDetails(0)\"></spiderly-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-table>\r\n  </div>\r\n</ng-container>", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: SpiderlyNumberComponent, selector: "spiderly-number", inputs: ["prefix", "showButtons", "decimal", "maxFractionDigits"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.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", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], 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: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i4$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDataTableComponent, isStandalone: true, selector: "spiderly-data-table", inputs: { tableTitle: "tableTitle", tableIcon: "tableIcon", items: "items", rows: "rows", cols: "cols", showPaginator: "showPaginator", showCardWrapper: "showCardWrapper", readonly: "readonly", idField: "idField", getPaginatedListObservableMethod: "getPaginatedListObservableMethod", exportListToExcelObservableMethod: "exportListToExcelObservableMethod", deleteItemFromTableObservableMethod: "deleteItemFromTableObservableMethod", newlySelectedItems: "newlySelectedItems", unselectedItems: "unselectedItems", selectionMode: "selectionMode", selectedLazyLoadObservableMethod: "selectedLazyLoadObservableMethod", additionalFilterIdLong: "additionalFilterIdLong", showAddButton: "showAddButton", showExportToExcelButton: "showExportToExcelButton", showReloadTableButton: "showReloadTableButton", getFormArrayItems: "getFormArrayItems", hasLazyLoad: "hasLazyLoad", getAlreadySelectedItemIds: "getAlreadySelectedItemIds", getAlreadySelectedItems: "getAlreadySelectedItems", getFormControl: "getFormControl", additionalIndexes: "additionalIndexes", navigateOnRowClick: "navigateOnRowClick", rowNavigationPath: "rowNavigationPath" }, outputs: { onTotalRecordsChange: "onTotalRecordsChange", onLazyLoad: "onLazyLoad", onIsAllSelectedChange: "onIsAllSelectedChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n    <p-table #dt [value]=\"items\" [rows]=\"rows\" [rowHover]=\"true\" [paginator]=\"showPaginator\" responsiveLayout=\"scroll\" [lazy]=\"hasLazyLoad\"\r\n    (onLazyLoad)=\"lazyLoad($event)\" [totalRecords]=\"totalRecords\" class=\"spiderly-table\" [loading]=\"(items === undefined || loading === true)\" [selectionMode]=\"selectionMode\" dataKey=\"id\" \r\n    (onFilter)=\"filter($event)\"> \r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"table-header overflow-auto\">\r\n          <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n            <i class=\"{{tableIcon}}\" style=\"font-size: 20px;\"></i>\r\n            <div style=\"margin: 0px; font-size: 17.5px;\">{{tableTitle}}</div>\r\n          </div>\r\n          <div style=\"display: flex; gap: 8px;\">\r\n            <button pButton [label]=\"t('ClearFilters')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-filter-slash\" (click)=\"clear(dt)\"></button>\r\n            <button pButton *ngIf=\"showExportToExcelButton\" [label]=\"t('ExportToExcel')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\r\n            <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-refresh\" (click)=\"reload()\"></button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\">\r\n        <tr>\r\n          <th style=\"width: 0rem;\" *ngIf=\"selectionMode == 'multiple'\">\r\n            <div style=\"display: flex; gap: 8px;\">\r\n              <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectAll($event.checked)\" [(ngModel)]=\"fakeIsAllSelected\" [binary]=\"true\"></p-checkbox> ({{rowsSelectedNumber}})\r\n            </div>\r\n          </th>\r\n          <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n            <th [style]=\"getColHeaderWidth(col.filterType)\">\r\n              <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                {{col.name}}\r\n                <p-columnFilter *ngIf=\"col.filterType != null && col.filterType !== 'blob'\" [type]=\"col.filterType\" [field]=\"col.filterField ?? col.field\" display=\"menu\" [placeholder]=\"col.filterPlaceholder\" \r\n                [showOperator]=\"false\" [showMatchModes]=\"col.showMatchModes\" [showAddButton]=\"col.showAddButton\" [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\r\n                [matchMode]=\"getColMatchMode(col.filterType)\"\r\n                >\r\n                  <ng-template *ngIf=\"isDropOrMulti(col.filterType)\" pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                    <p-multiSelect [ngModel]=\"value\" [options]=\"col.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n                      <ng-template let-item pTemplate=\"item\">\r\n                        <div class=\"p-multiselect-representative-option\">\r\n                          <span class=\"ml-2\">{{ item.label }}</span>\r\n                        </div>\r\n                      </ng-template>\r\n                    </p-multiSelect>\r\n                  </ng-template>\r\n                  <ng-template *ngIf=\"col.filterType == 'date'\" pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                      <p-datepicker \r\n                      [ngModel]=\"value\" \r\n                      [showTime]=\"col.showTime\"\r\n                      (onSelect)=\"filter($event)\"\r\n                      ></p-datepicker>\r\n                  </ng-template>\r\n              </p-columnFilter>\r\n              </div>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"body\" let-rowData let-index=\"rowIndex\" let-editing=\"editing\">\r\n        <tr [class.clickable]=\" navigateOnRowClick\"\r\n        (click)=\"onRowClick(rowData)\">\r\n          <td *ngIf=\"selectionMode == 'multiple'\">\r\n              <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectRow(rowData[idField], rowData.index)\" [ngModel]=\"isRowSelected(rowData[idField])\" [binary]=\"true\"></p-checkbox>\r\n          </td>\r\n          <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n            <td [style]=\"getStyleForBodyColumn(col)\" *ngIf=\"!col.editable\">\r\n              <div style=\"display: flex; align-items: center; justify-content: center; gap: 18px;\">\r\n                <ng-container *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\" >\r\n                  <span [pTooltip]=\"action.name\" [class]=\"getClassForAction(action)\" [style]=\"getStyleForAction(action)\" (click)=\"getMethodForAction(action, rowData)\"></span>\r\n                </ng-container>\r\n              </div>\r\n               <ng-container *ngIf=\"col.filterType === 'blob'\">\r\n                <img width=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\">\r\n               </ng-container>\r\n               <ng-container *ngIf=\"col.filterType !== 'blob'\">\r\n                {{getRowData(rowData, col)}}\r\n               </ng-container>\r\n            </td>\r\n            <td *ngIf=\"col.editable\">\r\n              <spiderly-number [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\" [showLabel]=\"false\"></spiderly-number>\r\n            </td>\r\n          </ng-container>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"emptymessage\">\r\n        <tr>\r\n          <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('NoRecordsFound')}}</td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"loadingbody\">\r\n        <tr>\r\n          <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('Loading')}}...</td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"paginatorleft\">\r\n        {{t('TotalRecords')}}: {{totalRecords}}\r\n      </ng-template>\r\n      <ng-template pTemplate=\"paginatorright\">\r\n        <div style=\"display: flex; justify-content: end; gap: 10px;\">\r\n          <spiderly-button *ngIf=\"showAddButton\" [label]=\"t('AddNew')\" icon=\"pi pi-plus\" (onClick)=\"navigateToDetails(0)\"></spiderly-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-table>\r\n  </div>\r\n</ng-container>", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: SpiderlyNumberComponent, selector: "spiderly-number", inputs: ["prefix", "showButtons", "decimal", "maxFractionDigits"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.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", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], 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: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i4$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataTableComponent, decorators: [{
             type: Component,
@@ -3399,7 +3426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         DatePickerModule,
                         CheckboxModule,
                         TooltipModule,
-                    ], template: "<ng-container *transloco=\"let t\">\r\n  <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n    <p-table #dt [value]=\"items\" [rows]=\"rows\" [rowHover]=\"true\" [paginator]=\"showPaginator\" responsiveLayout=\"scroll\" [lazy]=\"hasLazyLoad\"\r\n    (onLazyLoad)=\"lazyLoad($event)\" [totalRecords]=\"totalRecords\" class=\"spiderly-table\" [loading]=\"(items === undefined || loading === true)\" [selectionMode]=\"selectionMode\" dataKey=\"id\" \r\n    (onFilter)=\"filter($event)\"> \r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"table-header overflow-auto\">\r\n          <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n            <i class=\"{{tableIcon}}\" style=\"font-size: 20px;\"></i>\r\n            <div style=\"margin: 0px; font-size: 17.5px;\">{{tableTitle}}</div>\r\n          </div>\r\n          <div style=\"display: flex; gap: 8px;\">\r\n            <button pButton [label]=\"t('ClearFilters')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-filter-slash\" (click)=\"clear(dt)\"></button>\r\n            <button pButton *ngIf=\"showExportToExcelButton\" [label]=\"t('ExportToExcel')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\r\n            <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-refresh\" (click)=\"reload()\"></button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\">\r\n        <tr>\r\n          <th style=\"width: 0rem;\" *ngIf=\"selectionMode == 'multiple'\">\r\n            <div style=\"display: flex; gap: 8px;\">\r\n              <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectAll($event.checked)\" [(ngModel)]=\"fakeIsAllSelected\" [binary]=\"true\"></p-checkbox> ({{rowsSelectedNumber}})\r\n            </div>\r\n          </th>\r\n          <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n            <th [style]=\"getColHeaderWidth(col.filterType)\">\r\n              <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                {{col.name}}\r\n                <p-columnFilter *ngIf=\"col.filterType != null && col.filterType !== 'blob'\" [type]=\"col.filterType\" [field]=\"col.filterField ?? col.field\" display=\"menu\" [placeholder]=\"col.filterPlaceholder\" \r\n                [showOperator]=\"false\" [showMatchModes]=\"col.showMatchModes\" [showAddButton]=\"col.showAddButton\" [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\r\n                [matchMode]=\"getColMatchMode(col.filterType)\"\r\n                >\r\n                  <ng-template *ngIf=\"isDropOrMulti(col.filterType)\" pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                    <p-multiSelect [ngModel]=\"value\" [options]=\"col.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n                      <ng-template let-item pTemplate=\"item\">\r\n                        <div class=\"p-multiselect-representative-option\">\r\n                          <span class=\"ml-2\">{{ item.label }}</span>\r\n                        </div>\r\n                      </ng-template>\r\n                    </p-multiSelect>\r\n                  </ng-template>\r\n                  <ng-template *ngIf=\"col.filterType == 'date'\" pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                      <p-datepicker \r\n                      [ngModel]=\"value\" \r\n                      [showTime]=\"col.showTime\"\r\n                      (onSelect)=\"filter($event)\"\r\n                      ></p-datepicker>\r\n                  </ng-template>\r\n              </p-columnFilter>\r\n              </div>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"body\" let-rowData let-index=\"rowIndex\" let-editing=\"editing\">\r\n        <tr>\r\n          <td *ngIf=\"selectionMode == 'multiple'\">\r\n              <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectRow(rowData[idField], rowData.index)\" [ngModel]=\"isRowSelected(rowData[idField])\" [binary]=\"true\"></p-checkbox>\r\n          </td>\r\n          <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n            <td [style]=\"getStyleForBodyColumn(col)\" *ngIf=\"!col.editable\">\r\n              <div style=\"display: flex; align-items: center; justify-content: center; gap: 18px;\">\r\n                <ng-container *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\" >\r\n                  <span [pTooltip]=\"action.name\" [class]=\"getClassForAction(action)\" [style]=\"getStyleForAction(action)\" (click)=\"getMethodForAction(action, rowData)\"></span>\r\n                </ng-container>\r\n              </div>\r\n               <ng-container *ngIf=\"col.filterType === 'blob'\">\r\n                <img width=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\">\r\n               </ng-container>\r\n               <ng-container *ngIf=\"col.filterType !== 'blob'\">\r\n                {{getRowData(rowData, col)}}\r\n               </ng-container>\r\n            </td>\r\n            <td *ngIf=\"col.editable\">\r\n              <spiderly-number [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\" [showLabel]=\"false\"></spiderly-number>\r\n            </td>\r\n          </ng-container>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"emptymessage\">\r\n        <tr>\r\n          <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('NoRecordsFound')}}</td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"loadingbody\">\r\n        <tr>\r\n          <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('Loading')}}...</td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"paginatorleft\">\r\n        {{t('TotalRecords')}}: {{totalRecords}}\r\n      </ng-template>\r\n      <ng-template pTemplate=\"paginatorright\">\r\n        <div style=\"display: flex; justify-content: end; gap: 10px;\">\r\n          <spiderly-button *ngIf=\"showAddButton\" [label]=\"t('AddNew')\" icon=\"pi pi-plus\" (onClick)=\"navigateToDetails(0)\"></spiderly-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-table>\r\n  </div>\r\n</ng-container>", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"] }]
+                    ], template: "<ng-container *transloco=\"let t\">\r\n  <div [class]=\"showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\">\r\n    <p-table #dt [value]=\"items\" [rows]=\"rows\" [rowHover]=\"true\" [paginator]=\"showPaginator\" responsiveLayout=\"scroll\" [lazy]=\"hasLazyLoad\"\r\n    (onLazyLoad)=\"lazyLoad($event)\" [totalRecords]=\"totalRecords\" class=\"spiderly-table\" [loading]=\"(items === undefined || loading === true)\" [selectionMode]=\"selectionMode\" dataKey=\"id\" \r\n    (onFilter)=\"filter($event)\"> \r\n      <ng-template pTemplate=\"caption\">\r\n        <div class=\"table-header overflow-auto\">\r\n          <div style=\"display: flex; align-items: center; gap: 8px;\">\r\n            <i class=\"{{tableIcon}}\" style=\"font-size: 20px;\"></i>\r\n            <div style=\"margin: 0px; font-size: 17.5px;\">{{tableTitle}}</div>\r\n          </div>\r\n          <div style=\"display: flex; gap: 8px;\">\r\n            <button pButton [label]=\"t('ClearFilters')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-filter-slash\" (click)=\"clear(dt)\"></button>\r\n            <button pButton *ngIf=\"showExportToExcelButton\" [label]=\"t('ExportToExcel')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-download\" (click)=\"exportListToExcel()\"></button>\r\n            <button pButton *ngIf=\"showReloadTableButton\" [label]=\"t('Reload')\" class=\"p-button-outlined\" style=\"flex: none;\" icon=\"pi pi-refresh\" (click)=\"reload()\"></button>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"header\">\r\n        <tr>\r\n          <th style=\"width: 0rem;\" *ngIf=\"selectionMode == 'multiple'\">\r\n            <div style=\"display: flex; gap: 8px;\">\r\n              <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectAll($event.checked)\" [(ngModel)]=\"fakeIsAllSelected\" [binary]=\"true\"></p-checkbox> ({{rowsSelectedNumber}})\r\n            </div>\r\n          </th>\r\n          <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n            <th [style]=\"getColHeaderWidth(col.filterType)\">\r\n              <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                {{col.name}}\r\n                <p-columnFilter *ngIf=\"col.filterType != null && col.filterType !== 'blob'\" [type]=\"col.filterType\" [field]=\"col.filterField ?? col.field\" display=\"menu\" [placeholder]=\"col.filterPlaceholder\" \r\n                [showOperator]=\"false\" [showMatchModes]=\"col.showMatchModes\" [showAddButton]=\"col.showAddButton\" [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\r\n                [matchMode]=\"getColMatchMode(col.filterType)\"\r\n                >\r\n                  <ng-template *ngIf=\"isDropOrMulti(col.filterType)\" pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                    <p-multiSelect [ngModel]=\"value\" [options]=\"col.dropdownOrMultiselectValues\" [placeholder]=\"t('All')\" (onChange)=\"filter($event.value)\" optionLabel=\"label\" optionValue=\"code\" [style]=\"{'width':'240px'}\">\r\n                      <ng-template let-item pTemplate=\"item\">\r\n                        <div class=\"p-multiselect-representative-option\">\r\n                          <span class=\"ml-2\">{{ item.label }}</span>\r\n                        </div>\r\n                      </ng-template>\r\n                    </p-multiSelect>\r\n                  </ng-template>\r\n                  <ng-template *ngIf=\"col.filterType == 'date'\" pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                      <p-datepicker \r\n                      [ngModel]=\"value\" \r\n                      [showTime]=\"col.showTime\"\r\n                      (onSelect)=\"filter($event)\"\r\n                      ></p-datepicker>\r\n                  </ng-template>\r\n              </p-columnFilter>\r\n              </div>\r\n            </th>\r\n          </ng-container>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"body\" let-rowData let-index=\"rowIndex\" let-editing=\"editing\">\r\n        <tr [class.clickable]=\" navigateOnRowClick\"\r\n        (click)=\"onRowClick(rowData)\">\r\n          <td *ngIf=\"selectionMode == 'multiple'\">\r\n              <p-checkbox [disabled]=\"readonly\" (onChange)=\"selectRow(rowData[idField], rowData.index)\" [ngModel]=\"isRowSelected(rowData[idField])\" [binary]=\"true\"></p-checkbox>\r\n          </td>\r\n          <ng-container *ngFor=\"let col of cols; trackBy: colTrackByFn\">\r\n            <td [style]=\"getStyleForBodyColumn(col)\" *ngIf=\"!col.editable\">\r\n              <div style=\"display: flex; align-items: center; justify-content: center; gap: 18px;\">\r\n                <ng-container *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\" >\r\n                  <span [pTooltip]=\"action.name\" [class]=\"getClassForAction(action)\" [style]=\"getStyleForAction(action)\" (click)=\"getMethodForAction(action, rowData)\"></span>\r\n                </ng-container>\r\n              </div>\r\n               <ng-container *ngIf=\"col.filterType === 'blob'\">\r\n                <img width=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\">\r\n               </ng-container>\r\n               <ng-container *ngIf=\"col.filterType !== 'blob'\">\r\n                {{getRowData(rowData, col)}}\r\n               </ng-container>\r\n            </td>\r\n            <td *ngIf=\"col.editable\">\r\n              <spiderly-number [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\" [showLabel]=\"false\"></spiderly-number>\r\n            </td>\r\n          </ng-container>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"emptymessage\">\r\n        <tr>\r\n          <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('NoRecordsFound')}}</td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"loadingbody\">\r\n        <tr>\r\n          <td [attr.colspan]=\"cols?.length + (selectionMode === 'multiple' ? 1 : 0)\">{{t('Loading')}}...</td>\r\n        </tr>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"paginatorleft\">\r\n        {{t('TotalRecords')}}: {{totalRecords}}\r\n      </ng-template>\r\n      <ng-template pTemplate=\"paginatorright\">\r\n        <div style=\"display: flex; justify-content: end; gap: 10px;\">\r\n          <spiderly-button *ngIf=\"showAddButton\" [label]=\"t('AddNew')\" icon=\"pi pi-plus\" (onClick)=\"navigateToDetails(0)\"></spiderly-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-table>\r\n  </div>\r\n</ng-container>", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"] }]
         }], ctorParameters: () => [{ type: i3$2.Router }, { type: i1$6.DialogService }, { type: i3$2.ActivatedRoute }, { type: SpiderlyMessageService }, { type: i1.TranslocoService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -3468,6 +3495,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Output
             }], onRowUnselect: [{
                 type: Output
+            }], navigateOnRowClick: [{
+                type: Input
+            }], rowNavigationPath: [{
+                type: Input
             }] } });
 class Action {
     constructor({ name, field, icon, style, styleClass, onClick, } = {}) {
@@ -4259,6 +4290,10 @@ class SpiderlyLayoutComponent {
          * for root top menu items. Defaults to `false`.
          */
         this.showHoverBgOnRootTopMenuItems = false;
+        /**
+         * default max-width for the main content area.
+         */
+        this.maxWidth = '1100px';
         this.onAfterNgDestroy = () => { };
         this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
             if (!this.menuOutsideClickListener) {
@@ -4358,7 +4393,7 @@ class SpiderlyLayoutComponent {
         this.onAfterNgDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyLayoutComponent, deps: [{ token: LayoutBaseService }, { token: i0.Renderer2 }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyLayoutComponent, isStandalone: true, selector: "spiderly-layout", inputs: { menu: "menu", isSideMenuLayout: "isSideMenuLayout", showHoverBgOnRootTopMenuItems: "showHoverBgOnRootTopMenuItems" }, viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebarComponent, descendants: true }, { propertyName: "sidemenuTopbar", first: true, predicate: SideMenuTopBarComponent, descendants: true }, { propertyName: "topbarmenu", first: true, predicate: ["topbarmenu"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\r\n    <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\r\n    <div class=\"layout-sidebar\">\r\n        <sidebar [menu]=\"sideMenu\"></sidebar>\r\n    </div>\r\n    <div class=\"layout-main-container\">\r\n        <div class=\"layout-main\">\r\n            <router-outlet></router-outlet>\r\n        </div>\r\n        <footer></footer>\r\n    </div>\r\n    <div class=\"layout-mask\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"isSideMenuLayout === false\">\r\n    <spiderly-topbar [menu]=\"topMenu\" [showHoverBgOnRootItems]=\"showHoverBgOnRootTopMenuItems\">\r\n        <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\r\n    </spiderly-topbar>\r\n    <main style=\"max-width: 1100px; margin: auto; padding: 18px;\">\r\n        <router-outlet></router-outlet>\r\n    </main>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppSidebarComponent, selector: "sidebar", inputs: ["menu"] }, { kind: "component", type: FooterComponent, selector: "footer" }, { kind: "component", type: SideMenuTopBarComponent, selector: "spiderly-sidemenu-topbar" }, { kind: "component", type: TopBarComponent, selector: "spiderly-topbar", inputs: ["menu", "showHoverBgOnRootItems"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyLayoutComponent, isStandalone: true, selector: "spiderly-layout", inputs: { menu: "menu", isSideMenuLayout: "isSideMenuLayout", showHoverBgOnRootTopMenuItems: "showHoverBgOnRootTopMenuItems", maxWidth: "maxWidth" }, viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebarComponent, descendants: true }, { propertyName: "sidemenuTopbar", first: true, predicate: SideMenuTopBarComponent, descendants: true }, { propertyName: "topbarmenu", first: true, predicate: ["topbarmenu"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\r\n    <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\r\n    <div class=\"layout-sidebar\">\r\n        <sidebar [menu]=\"sideMenu\"></sidebar>\r\n    </div>\r\n    <div class=\"layout-main-container\">\r\n        <div class=\"layout-main\">\r\n            <router-outlet></router-outlet>\r\n        </div>\r\n        <footer></footer>\r\n    </div>\r\n    <div class=\"layout-mask\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"isSideMenuLayout === false\">\r\n    <spiderly-topbar [menu]=\"topMenu\" [showHoverBgOnRootItems]=\"showHoverBgOnRootTopMenuItems\">\r\n        <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\r\n    </spiderly-topbar>\r\n    <main [style.max-width]=\"maxWidth\" style=\"margin: auto; padding: 18px;\">\r\n        <router-outlet></router-outlet>\r\n    </main>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppSidebarComponent, selector: "sidebar", inputs: ["menu"] }, { kind: "component", type: FooterComponent, selector: "footer" }, { kind: "component", type: SideMenuTopBarComponent, selector: "spiderly-sidemenu-topbar" }, { kind: "component", type: TopBarComponent, selector: "spiderly-topbar", inputs: ["menu", "showHoverBgOnRootItems"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyLayoutComponent, decorators: [{
             type: Component,
@@ -4369,13 +4404,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         FooterComponent,
                         SideMenuTopBarComponent,
                         TopBarComponent,
-                    ], template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\r\n    <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\r\n    <div class=\"layout-sidebar\">\r\n        <sidebar [menu]=\"sideMenu\"></sidebar>\r\n    </div>\r\n    <div class=\"layout-main-container\">\r\n        <div class=\"layout-main\">\r\n            <router-outlet></router-outlet>\r\n        </div>\r\n        <footer></footer>\r\n    </div>\r\n    <div class=\"layout-mask\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"isSideMenuLayout === false\">\r\n    <spiderly-topbar [menu]=\"topMenu\" [showHoverBgOnRootItems]=\"showHoverBgOnRootTopMenuItems\">\r\n        <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\r\n    </spiderly-topbar>\r\n    <main style=\"max-width: 1100px; margin: auto; padding: 18px;\">\r\n        <router-outlet></router-outlet>\r\n    </main>\r\n</div>" }]
+                    ], template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\r\n    <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\r\n    <div class=\"layout-sidebar\">\r\n        <sidebar [menu]=\"sideMenu\"></sidebar>\r\n    </div>\r\n    <div class=\"layout-main-container\">\r\n        <div class=\"layout-main\">\r\n            <router-outlet></router-outlet>\r\n        </div>\r\n        <footer></footer>\r\n    </div>\r\n    <div class=\"layout-mask\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"isSideMenuLayout === false\">\r\n    <spiderly-topbar [menu]=\"topMenu\" [showHoverBgOnRootItems]=\"showHoverBgOnRootTopMenuItems\">\r\n        <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\r\n    </spiderly-topbar>\r\n    <main [style.max-width]=\"maxWidth\" style=\"margin: auto; padding: 18px;\">\r\n        <router-outlet></router-outlet>\r\n    </main>\r\n</div>" }]
         }], ctorParameters: () => [{ type: LayoutBaseService }, { type: i0.Renderer2 }, { type: i3$2.Router }], propDecorators: { menu: [{
                 type: Input
             }], isSideMenuLayout: [{
                 type: Input
             }], showHoverBgOnRootTopMenuItems: [{
                 type: Input
+            }], maxWidth: [{
+                type: Input
             }], appSidebar: [{
                 type: ViewChild,
                 args: [AppSidebarComponent]