@sd-angular/core 0.0.961 → 0.0.965

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/bundles/sd-angular-core-grid-material.umd.js +245 -87
  2. package/bundles/sd-angular-core-grid-material.umd.js.map +1 -1
  3. package/bundles/sd-angular-core-grid-material.umd.min.js +2 -2
  4. package/bundles/sd-angular-core-grid-material.umd.min.js.map +1 -1
  5. package/bundles/sd-angular-core-modal.umd.js +5 -1
  6. package/bundles/sd-angular-core-modal.umd.js.map +1 -1
  7. package/bundles/sd-angular-core-modal.umd.min.js +1 -1
  8. package/bundles/sd-angular-core-modal.umd.min.js.map +1 -1
  9. package/bundles/sd-angular-core-side-drawer.umd.js +5 -1
  10. package/bundles/sd-angular-core-side-drawer.umd.js.map +1 -1
  11. package/bundles/sd-angular-core-side-drawer.umd.min.js +1 -1
  12. package/bundles/sd-angular-core-side-drawer.umd.min.js.map +1 -1
  13. package/esm2015/grid-material/sd-angular-core-grid-material.js +8 -7
  14. package/esm2015/grid-material/src/lib/components/column-inline-filter/column-inline-filter.component.js +2 -2
  15. package/esm2015/grid-material/src/lib/grid-material.component.js +7 -5
  16. package/esm2015/grid-material/src/lib/grid-material.module.js +3 -1
  17. package/esm2015/grid-material/src/lib/models/grid-action.model.js +1 -1
  18. package/esm2015/grid-material/src/lib/models/grid-editor.model.js +1 -1
  19. package/esm2015/grid-material/src/lib/models/grid-selection.model.js +1 -1
  20. package/esm2015/grid-material/src/lib/models/grid.model.js +1 -1
  21. package/esm2015/grid-material/src/lib/pipes/editor-handler-column.pipe.js +4 -4
  22. package/esm2015/grid-material/src/lib/pipes/editor-handler-row.pipe.js +7 -5
  23. package/esm2015/grid-material/src/lib/pipes/selection-action-filter.pipe.js +16 -44
  24. package/esm2015/grid-material/src/lib/pipes/selection-disable-select-all.pipe.js +16 -7
  25. package/esm2015/grid-material/src/lib/pipes/selection-disable.pipe.js +36 -3
  26. package/esm2015/grid-material/src/lib/pipes/selection-visible.pipe.js +54 -0
  27. package/esm2015/grid-material/src/lib/services/grid-configuration.service.js +3 -3
  28. package/esm2015/modal/src/lib/modal/modal.component.js +7 -3
  29. package/esm2015/side-drawer/src/lib/side-drawer/side-drawer.component.js +7 -3
  30. package/fesm2015/sd-angular-core-grid-material.js +131 -65
  31. package/fesm2015/sd-angular-core-grid-material.js.map +1 -1
  32. package/fesm2015/sd-angular-core-modal.js +6 -2
  33. package/fesm2015/sd-angular-core-modal.js.map +1 -1
  34. package/fesm2015/sd-angular-core-side-drawer.js +6 -2
  35. package/fesm2015/sd-angular-core-side-drawer.js.map +1 -1
  36. package/grid-material/sd-angular-core-grid-material.d.ts +7 -6
  37. package/grid-material/sd-angular-core-grid-material.metadata.json +1 -1
  38. package/grid-material/src/lib/grid-material.component.d.ts +4 -4
  39. package/grid-material/src/lib/models/grid-action.model.d.ts +1 -6
  40. package/grid-material/src/lib/models/grid-editor.model.d.ts +0 -2
  41. package/grid-material/src/lib/models/grid-selection.model.d.ts +0 -2
  42. package/grid-material/src/lib/models/grid.model.d.ts +1 -0
  43. package/grid-material/src/lib/pipes/selection-action-filter.pipe.d.ts +2 -1
  44. package/grid-material/src/lib/pipes/selection-disable-select-all.pipe.d.ts +2 -1
  45. package/grid-material/src/lib/pipes/selection-disable.pipe.d.ts +2 -1
  46. package/grid-material/src/lib/pipes/selection-visible.pipe.d.ts +6 -0
  47. package/modal/sd-angular-core-modal.metadata.json +1 -1
  48. package/modal/src/lib/modal/modal.component.d.ts +3 -2
  49. package/package.json +1 -1
  50. package/{sd-angular-core-0.0.961.tgz → sd-angular-core-0.0.965.tgz} +0 -0
  51. package/side-drawer/sd-angular-core-side-drawer.metadata.json +1 -1
  52. package/side-drawer/src/lib/side-drawer/side-drawer.component.d.ts +3 -2
@@ -1481,7 +1481,7 @@
1481
1481
  multipleHeader: false
1482
1482
  };
1483
1483
  var _c = gridOption || {}, selection = _c.selection, commands = _c.commands, editor = _c.editor;
1484
- if ((editor === null || editor === void 0 ? void 0 : editor.addable) || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'inline' && (editor === null || editor === void 0 ? void 0 : editor.removable)) || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'focus' && (editor === null || editor === void 0 ? void 0 : editor.editable))) {
1484
+ if ((editor === null || editor === void 0 ? void 0 : editor.addable) || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'inline' && (editor === null || editor === void 0 ? void 0 : editor.removable)) || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'focus' && (editor === null || editor === void 0 ? void 0 : editor.disabled))) {
1485
1485
  result.firstHeaders.push(__classPrivateFieldGet(_this, _COLUMNS).EDITORVALIDATION);
1486
1486
  result.displayedColumns.push(__classPrivateFieldGet(_this, _COLUMNS).EDITORVALIDATION);
1487
1487
  }
@@ -1489,7 +1489,7 @@
1489
1489
  result.firstHeaders.push(__classPrivateFieldGet(_this, _COLUMNS).SELECTION);
1490
1490
  result.displayedColumns.push(__classPrivateFieldGet(_this, _COLUMNS).SELECTION);
1491
1491
  }
1492
- if ((editor === null || editor === void 0 ? void 0 : editor.addable) || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'inline' && (editor === null || editor === void 0 ? void 0 : editor.removable)) || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'focus' && (editor === null || editor === void 0 ? void 0 : editor.editable)) || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'popup' && (editor === null || editor === void 0 ? void 0 : editor.editable))) {
1492
+ if ((editor === null || editor === void 0 ? void 0 : editor.addable) || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'inline' && (editor === null || editor === void 0 ? void 0 : editor.removable)) || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'focus' && (editor === null || editor === void 0 ? void 0 : editor.disabled)) || ((editor === null || editor === void 0 ? void 0 : editor.type) === 'popup' && (editor === null || editor === void 0 ? void 0 : editor.disabled))) {
1493
1493
  result.firstHeaders.push(__classPrivateFieldGet(_this, _COLUMNS).EDITOR);
1494
1494
  result.displayedColumns.push(__classPrivateFieldGet(_this, _COLUMNS).EDITOR);
1495
1495
  }
@@ -1966,7 +1966,8 @@
1966
1966
  // this.isHiddenPaginator = this.filterInfo.pageNumber === 0 && this.total <= this.filterInfo.pageSize;
1967
1967
  this.items.forEach(function (item) {
1968
1968
  item.originItem = Object.assign({}, item);
1969
- item.sdId = hash__namespace(item);
1969
+ var sdId = item.sdId, remain = __rest(item, ["sdId"]);
1970
+ item.sdId = hash__namespace(remain);
1970
1971
  });
1971
1972
  return [4 /*yield*/, ((_c = (_b = (_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.reload) === null || _b === void 0 ? void 0 : _b.onReload) === null || _c === void 0 ? void 0 : _c.call(_b, this.items))];
1972
1973
  case 1:
@@ -2369,7 +2370,7 @@
2369
2370
  _updateSelectedItems.set(this, function () {
2370
2371
  _this.selectedItems = _this.items.filter(function (item) { return item.isSelected; })
2371
2372
  .map(function (item) {
2372
- var isSelected = item.isSelected, isExpanded = item.isExpanded, isExpanding = item.isExpanding, expandDetail = item.expandDetail, result = __rest(item, ["isSelected", "isExpanded", "isExpanding", "expandDetail"]);
2373
+ var isSelected = item.isSelected, isExpanded = item.isExpanded, isExpanding = item.isExpanding, expandDetail = item.expandDetail, editorErrorMessage = item.editorErrorMessage, editorHandlerColumn = item.editorHandlerColumn, editorHandlerRow = item.editorHandlerRow, editorStatus = item.editorStatus, originItem = item.originItem, sdId = item.sdId, result = __rest(item, ["isSelected", "isExpanded", "isExpanding", "expandDetail", "editorErrorMessage", "editorHandlerColumn", "editorHandlerRow", "editorStatus", "originItem", "sdId"]);
2373
2374
  return result;
2374
2375
  });
2375
2376
  _this.ref.detectChanges();
@@ -2535,7 +2536,8 @@
2535
2536
  }
2536
2537
  };
2537
2538
  this.reloadItem = function (item) {
2538
- item.sdId = hash__namespace(item);
2539
+ var sdId = item.sdId, remain = __rest(item, ["sdId"]);
2540
+ item.sdId = hash__namespace(remain);
2539
2541
  };
2540
2542
  this.detectChanges = function () { return _this.ref.detectChanges(); };
2541
2543
  }
@@ -2645,7 +2647,7 @@
2645
2647
  SdGridMaterial.decorators = [
2646
2648
  { type: core.Component, args: [{
2647
2649
  selector: 'sd-grid-material',
2648
- template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n <ng-container *ngIf=\"\r\n gridConfiguration\r\n | sdGridConfigurationResult\r\n : gridOption\r\n : sdSubInformation as configuration\r\n \">\r\n <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n </sd-grid-filter>\r\n </ng-container>\r\n <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div class=\"c-table\" [ngStyle]=\"{\r\n 'max-height': gridOption?.maxHeight,\r\n 'min-height': 'gridOption?.minHeight'\r\n }\">\r\n <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"items\" matSort\r\n [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <div *ngIf=\"sdSubInformation?.templateRef\" [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container *ngTemplateOutlet=\"\r\n sdSubInformation.templateRef;\r\n context: { item: item }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button *ngIf=\"!element.isExpanding\" mat-icon-button aria-label=\"Expand & Collapse\"\r\n (click)=\"onExpand(element)\">\r\n <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n </button>\r\n <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"text-center px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\" [disabled]=\"\r\n items | selectionDisableSelectAll: gridOption?.selection\r\n \">\r\n </mat-checkbox>\r\n </th>\r\n <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n (change)=\"onSelect(item)\" [disabled]=\"\r\n selectedItems | selectionDisable: item:gridOption?.selection\r\n \">\r\n </mat-checkbox>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditorValidation\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 2px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n </th>\r\n <td class=\"p-0 position-relative\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [gridOption]=\"gridOption\">\r\n </sd-desktop-editor-validation>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditor\">\r\n <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <button\r\n *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon\">add</mat-icon>\r\n </button>\r\n </th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">edit</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">delete</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">save</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n configuration.multipleHeader && column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \" [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \">\r\n <div>\r\n <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n !column.sortable || column.type === 'children-col'\r\n \" [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\"></div>\r\n <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n [columnFilter]=\"columnFilter\" [column]=\"column\" (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n [columnFilter]=\"columnFilter\" [column]=\"column\" (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n </tr>\r\n </ng-container>\r\n <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"\r\n [style]=\"row | sdStyleRowCss:gridOption\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n </ng-container>\r\n </table>\r\n <ng-template #elseEmpty>\r\n <table mat-table [dataSource]=\"[{}]\">\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditorValidation\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n </th>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditor\">\r\n <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <button\r\n *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon\">add</mat-icon>\r\n </button>\r\n </th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEmpty\">\r\n <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n <ng-container *ngTemplateOutlet=\"\r\n sdEmptyData.templateRef;\r\n context: { item: item }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #sdEmptyDataNoRef>\r\n <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n </th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\"\r\n [attr.rowspan]=\"\r\n configuration.multipleHeader &&\r\n column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \" [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \">\r\n <div>\r\n <div [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\"></div>\r\n <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\"\r\n [column]=\"column\" (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n </tr>\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n </tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n </table>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <sd-button *ngIf=\"\r\n !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n </sd-button>\r\n <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n <ng-container *ngIf=\"isExporting; else unExporting\">\r\n <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n size=\"sm\" type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #unExporting>\r\n <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n\r\n <mat-menu #menu=\"matMenu\">\r\n <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n </button>\r\n <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault(true)\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n </button>\r\n <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n <span> {{ \"Configure\" | sdTranslate }}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n </sd-button>\r\n </div>\r\n <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </div>\r\n </div>\r\n <sd-popup-export *ngIf=\"gridOption.export?.visible\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n #sdPopupExport>\r\n </sd-popup-export>\r\n <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n </sd-popup-grid-configuration>\r\n </ng-container>\r\n</ng-container>\r\n<sd-quick-action *ngIf=\"\r\n selectedItems\r\n | selectionActionFilter: gridOption?.selection?.actions as actions\r\n \" [isOpened]=\"actions?.length\">\r\n <div sdMessage>\r\n <strong class=\"text-info\">{{ selectedItems.length }}</strong>\r\n {{ gridOption?.selection?.message || (\"selected rows\" | sdTranslate) }}\r\n </div>\r\n <div class=\"d-flex align-items-center\" sdAction>\r\n <ng-container *ngFor=\"let action of actions\">\r\n <sd-button *ngIf=\"action.click\" class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon\"\r\n [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\" size=\"sm\" (action)=\"action.click(selectedItems)\"></sd-button>\r\n <ng-container *ngIf=\"action.children?.length\">\r\n <sd-button class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon || 'more_vert'\"\r\n [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\" size=\"sm\" [matMenuTriggerFor]=\"menu\">\r\n </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <span>\r\n <button *ngFor=\"let childAction of action.children\" mat-menu-item (click)=\"childAction.click(selectedItems)\"\r\n [disabled]=\"childAction.disabled\">\r\n <mat-icon [fontSet]=\"childAction.fontSet\" class=\"c-icon\">{{ childAction.icon }}\r\n </mat-icon>\r\n <span> {{ childAction.title }}</span>\r\n </button>\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</sd-quick-action>",
2650
+ template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n <ng-container *ngIf=\"\r\n gridConfiguration\r\n | sdGridConfigurationResult\r\n : gridOption\r\n : sdSubInformation as configuration\r\n \">\r\n <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n </sd-grid-filter>\r\n </ng-container>\r\n <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div class=\"c-table\" [ngStyle]=\"{\r\n 'max-height': gridOption?.maxHeight,\r\n 'min-height': 'gridOption?.minHeight'\r\n }\">\r\n <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"items\" matSort\r\n [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <div *ngIf=\"sdSubInformation?.templateRef\" [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container *ngTemplateOutlet=\"\r\n sdSubInformation.templateRef;\r\n context: { item: item }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button *ngIf=\"!element.isExpanding\" mat-icon-button aria-label=\"Expand & Collapse\"\r\n (click)=\"onExpand(element)\">\r\n <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n </button>\r\n <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"text-center px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\" [disabled]=\"\r\n items | selectionDisableSelectAll: gridOption?.selection\r\n \">\r\n </mat-checkbox>\r\n </th>\r\n <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n <ng-container *ngIf=\"item | selectionVisible:gridOption?.selection\">\r\n <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n (change)=\"onSelect(item)\" [disabled]=\"\r\n selectedItems | selectionDisable: item:gridOption?.selection\r\n \">\r\n </mat-checkbox>\r\n </ng-container>\r\n\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditorValidation\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 2px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n </th>\r\n <td class=\"p-0 position-relative\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [gridOption]=\"gridOption\">\r\n </sd-desktop-editor-validation>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditor\">\r\n <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <button\r\n *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon\">add</mat-icon>\r\n </button>\r\n </th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">edit</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">delete</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">save</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n configuration.multipleHeader && column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \" [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \">\r\n <div>\r\n <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n !column.sortable || column.type === 'children-col'\r\n \" [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n </div>\r\n <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n [columnFilter]=\"columnFilter\" [column]=\"column\" (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n [columnFilter]=\"columnFilter\" [column]=\"column\" (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n </tr>\r\n </ng-container>\r\n <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"\r\n [style]=\"row | sdStyleRowCss:gridOption\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n </ng-container>\r\n </table>\r\n <ng-template #elseEmpty>\r\n <table mat-table [dataSource]=\"[{}]\">\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditorValidation\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n </th>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditor\">\r\n <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <button\r\n *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon\">add</mat-icon>\r\n </button>\r\n </th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEmpty\">\r\n <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n <ng-container *ngTemplateOutlet=\"\r\n sdEmptyData.templateRef;\r\n context: { item: item }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #sdEmptyDataNoRef>\r\n <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n </th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n configuration.multipleHeader &&\r\n column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \" [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \">\r\n <div>\r\n <div [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n </div>\r\n <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n </tr>\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n </tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n </table>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <sd-button *ngIf=\"\r\n !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n </sd-button>\r\n <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n <ng-container *ngIf=\"isExporting; else unExporting\">\r\n <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n size=\"sm\" type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #unExporting>\r\n <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n\r\n <mat-menu #menu=\"matMenu\">\r\n <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n </button>\r\n <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault(true)\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n </button>\r\n <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n <span> {{ \"Configure\" | sdTranslate }}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n </sd-button>\r\n </div>\r\n <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </div>\r\n </div>\r\n <sd-popup-export *ngIf=\"gridOption.export?.visible\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n #sdPopupExport>\r\n </sd-popup-export>\r\n <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n </sd-popup-grid-configuration>\r\n </ng-container>\r\n</ng-container>\r\n<sd-quick-action *ngIf=\"\r\n selectedItems\r\n | selectionActionFilter: gridOption?.selection?.actions as actions\r\n \" [isOpened]=\"actions?.length\">\r\n <div sdMessage>\r\n <strong class=\"text-info\">{{ selectedItems.length }}</strong>\r\n {{ gridOption?.selection?.message || (\"selected rows\" | sdTranslate) }}\r\n </div>\r\n <div class=\"d-flex align-items-center\" sdAction>\r\n <ng-container *ngFor=\"let action of actions\">\r\n <sd-button *ngIf=\"action.click\" class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon\"\r\n [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\" size=\"sm\" (action)=\"action.click(selectedItems)\"></sd-button>\r\n <ng-container *ngIf=\"action.children?.length\">\r\n <sd-button class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon || 'more_vert'\"\r\n [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\" size=\"sm\" [matMenuTriggerFor]=\"menu\">\r\n </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <span>\r\n <button *ngFor=\"let childAction of action.children\" mat-menu-item (click)=\"childAction.click(selectedItems)\"\r\n [disabled]=\"childAction.disabled\">\r\n <mat-icon [fontSet]=\"childAction.fontSet\" class=\"c-icon\">{{ childAction.icon }}\r\n </mat-icon>\r\n <span> {{ childAction.title }}</span>\r\n </button>\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</sd-quick-action>",
2649
2651
  animations: [
2650
2652
  animations.trigger('detailExpand', [
2651
2653
  animations.state('collapsed', animations.style({ height: '0', minHeight: '0', visibility: 'hidden' })),
@@ -3382,7 +3384,7 @@
3382
3384
  var SdSelectionActionFilterPipe = /** @class */ (function () {
3383
3385
  function SdSelectionActionFilterPipe() {
3384
3386
  var _this = this;
3385
- _convert.set(this, function (action, selectedItems) {
3387
+ _convert.set(this, function (action) {
3386
3388
  if ('children' in action) {
3387
3389
  return {
3388
3390
  title: action.title,
@@ -3391,7 +3393,6 @@
3391
3393
  tooltip: action.tooltip,
3392
3394
  color: action.color,
3393
3395
  type: action.type,
3394
- disabled: typeof (action.disabled) === 'function' ? action.disabled(selectedItems) : action.disabled,
3395
3396
  children: action.children.map(function (e) { return ({
3396
3397
  title: e.title,
3397
3398
  icon: e.icon,
@@ -3399,7 +3400,6 @@
3399
3400
  type: action.type,
3400
3401
  fontSet: e.fontSet,
3401
3402
  tooltip: e.tooltip,
3402
- disabled: typeof (action.disabled) === 'function' ? action.disabled(selectedItems) : action.disabled,
3403
3403
  click: e.click
3404
3404
  }); })
3405
3405
  };
@@ -3411,74 +3411,54 @@
3411
3411
  type: action.type,
3412
3412
  fontSet: action.fontSet,
3413
3413
  tooltip: action.tooltip,
3414
- disabled: typeof (action.disabled) === 'function' ? action.disabled(selectedItems) : action.disabled,
3415
3414
  click: action.click
3416
3415
  };
3417
3416
  });
3418
3417
  this.transform = function (selectedItems, actions) {
3419
- var e_1, _a, e_2, _b;
3418
+ var e_1, _a;
3420
3419
  var results = [];
3421
3420
  if (!(actions === null || actions === void 0 ? void 0 : actions.length) || !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length)) {
3422
3421
  return [];
3423
3422
  }
3424
- try {
3425
- for (var actions_1 = __values(actions), actions_1_1 = actions_1.next(); !actions_1_1.done; actions_1_1 = actions_1.next()) {
3426
- var action = actions_1_1.value;
3427
- var flag = false;
3428
- var hidden = action.hidden;
3429
- if (hidden === undefined) {
3430
- flag = true;
3431
- }
3432
- else if (typeof (hidden) === 'boolean') {
3433
- if (!hidden) {
3434
- flag = true;
3423
+ var _loop_1 = function (action) {
3424
+ var e_2, _a;
3425
+ if ('children' in action) {
3426
+ var children = [];
3427
+ var _loop_2 = function (childAction) {
3428
+ var key = hash__default['default'](childAction);
3429
+ if (selectedItems.every(function (e) { return e.actions.includes(key); })) {
3430
+ children.push(childAction);
3435
3431
  }
3436
- }
3437
- else {
3438
- var isHidden = hidden(selectedItems);
3439
- if (!isHidden) {
3440
- flag = true;
3432
+ };
3433
+ try {
3434
+ for (var _b = (e_2 = void 0, __values(action.children)), _c = _b.next(); !_c.done; _c = _b.next()) {
3435
+ var childAction = _c.value;
3436
+ _loop_2(childAction);
3441
3437
  }
3442
3438
  }
3443
- if (flag) {
3444
- if ('children' in action) {
3445
- var children = [];
3446
- try {
3447
- for (var _c = (e_2 = void 0, __values(action.children)), _d = _c.next(); !_d.done; _d = _c.next()) {
3448
- var childCommand = _d.value;
3449
- var childHidden = childCommand.hidden;
3450
- if (childHidden === undefined) {
3451
- children.push(childCommand);
3452
- }
3453
- else if (typeof (childHidden) === 'boolean') {
3454
- if (!childHidden) {
3455
- children.push(childCommand);
3456
- }
3457
- }
3458
- else {
3459
- var isHidden = childHidden(selectedItems);
3460
- if (!isHidden) {
3461
- children.push(childCommand);
3462
- }
3463
- }
3464
- }
3465
- }
3466
- catch (e_2_1) { e_2 = { error: e_2_1 }; }
3467
- finally {
3468
- try {
3469
- if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
3470
- }
3471
- finally { if (e_2) throw e_2.error; }
3472
- }
3473
- if (children.length > 0) {
3474
- results.push(Object.assign(Object.assign({}, action), { children: children }));
3475
- }
3476
- }
3477
- else {
3478
- results.push(action);
3439
+ catch (e_2_1) { e_2 = { error: e_2_1 }; }
3440
+ finally {
3441
+ try {
3442
+ if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
3479
3443
  }
3444
+ finally { if (e_2) throw e_2.error; }
3445
+ }
3446
+ if (children.length > 0) {
3447
+ results.push(Object.assign(Object.assign({}, action), { children: children }));
3480
3448
  }
3481
3449
  }
3450
+ else {
3451
+ var key_1 = hash__default['default'](action);
3452
+ if (selectedItems.every(function (e) { return e.actions.includes(key_1); })) {
3453
+ results.push(action);
3454
+ }
3455
+ }
3456
+ };
3457
+ try {
3458
+ for (var actions_1 = __values(actions), actions_1_1 = actions_1.next(); !actions_1_1.done; actions_1_1 = actions_1.next()) {
3459
+ var action = actions_1_1.value;
3460
+ _loop_1(action);
3461
+ }
3482
3462
  }
3483
3463
  catch (e_1_1) { e_1 = { error: e_1_1 }; }
3484
3464
  finally {
@@ -3487,7 +3467,7 @@
3487
3467
  }
3488
3468
  finally { if (e_1) throw e_1.error; }
3489
3469
  }
3490
- return results.map(function (result) { return __classPrivateFieldGet(_this, _convert).call(_this, result, selectedItems); });
3470
+ return results.map(function (result) { return __classPrivateFieldGet(_this, _convert).call(_this, result); });
3491
3471
  };
3492
3472
  }
3493
3473
  return SdSelectionActionFilterPipe;
@@ -3502,10 +3482,79 @@
3502
3482
  var SdSelectionDisablePipe = /** @class */ (function () {
3503
3483
  function SdSelectionDisablePipe() {
3504
3484
  this.transform = function (selectedItems, rowData, selection) {
3505
- if (!(selection === null || selection === void 0 ? void 0 : selection.disabled)) {
3485
+ var e_1, _a, e_2, _b;
3486
+ var actions = selection.actions;
3487
+ if (!actions.length) {
3506
3488
  return false;
3507
3489
  }
3508
- return selection.disabled(rowData, selectedItems);
3490
+ // Lọc các action theo selectedItems hiện tại
3491
+ var availableActions = actions.filter(function (action) {
3492
+ var e_3, _a;
3493
+ if ('children' in action) {
3494
+ var _loop_1 = function (childAction) {
3495
+ var key = hash__default['default'](childAction);
3496
+ if (selectedItems.every(function (e) { return e.actions.includes(key); })) {
3497
+ return { value: true };
3498
+ }
3499
+ };
3500
+ try {
3501
+ for (var _b = __values(action.children), _c = _b.next(); !_c.done; _c = _b.next()) {
3502
+ var childAction = _c.value;
3503
+ var state_1 = _loop_1(childAction);
3504
+ if (typeof state_1 === "object")
3505
+ return state_1.value;
3506
+ }
3507
+ }
3508
+ catch (e_3_1) { e_3 = { error: e_3_1 }; }
3509
+ finally {
3510
+ try {
3511
+ if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
3512
+ }
3513
+ finally { if (e_3) throw e_3.error; }
3514
+ }
3515
+ return false;
3516
+ }
3517
+ else {
3518
+ var key_1 = hash__default['default'](action);
3519
+ return selectedItems.every(function (e) { return e.actions.includes(key_1); });
3520
+ }
3521
+ });
3522
+ try {
3523
+ // Kiểm tra rowData có action nào thỏa hay ko, nếu ko thì disabled
3524
+ for (var availableActions_1 = __values(availableActions), availableActions_1_1 = availableActions_1.next(); !availableActions_1_1.done; availableActions_1_1 = availableActions_1.next()) {
3525
+ var action = availableActions_1_1.value;
3526
+ if ('children' in action) {
3527
+ try {
3528
+ for (var _c = (e_2 = void 0, __values(action.children)), _d = _c.next(); !_d.done; _d = _c.next()) {
3529
+ var childAction = _d.value;
3530
+ if (rowData.actions.includes(hash__default['default'](childAction))) {
3531
+ return false;
3532
+ }
3533
+ }
3534
+ }
3535
+ catch (e_2_1) { e_2 = { error: e_2_1 }; }
3536
+ finally {
3537
+ try {
3538
+ if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
3539
+ }
3540
+ finally { if (e_2) throw e_2.error; }
3541
+ }
3542
+ }
3543
+ else {
3544
+ if (rowData.actions.includes(hash__default['default'](action))) {
3545
+ return false;
3546
+ }
3547
+ }
3548
+ }
3549
+ }
3550
+ catch (e_1_1) { e_1 = { error: e_1_1 }; }
3551
+ finally {
3552
+ try {
3553
+ if (availableActions_1_1 && !availableActions_1_1.done && (_a = availableActions_1.return)) _a.call(availableActions_1);
3554
+ }
3555
+ finally { if (e_1) throw e_1.error; }
3556
+ }
3557
+ return true;
3509
3558
  };
3510
3559
  }
3511
3560
  return SdSelectionDisablePipe;
@@ -3518,15 +3567,48 @@
3518
3567
 
3519
3568
  var SdSelectionDisableSelectAllPipe = /** @class */ (function () {
3520
3569
  function SdSelectionDisableSelectAllPipe() {
3521
- this.transform = function (items, selection) {
3522
- if (!(selection === null || selection === void 0 ? void 0 : selection.disabledSelectAll)) {
3523
- if (!selection.disabled) {
3524
- return false;
3570
+ var _this = this;
3571
+ this.transform = function (items, selection) { return __awaiter(_this, void 0, void 0, function () {
3572
+ var actions, first, _loop_1, _a, _b, action, state_1;
3573
+ var e_1, _c;
3574
+ return __generator(this, function (_d) {
3575
+ switch (_d.label) {
3576
+ case 0:
3577
+ actions = selection.actions;
3578
+ if (!actions.length) {
3579
+ return [2 /*return*/, false];
3580
+ }
3581
+ if (!items.length) {
3582
+ return [2 /*return*/, false];
3583
+ }
3584
+ return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 500); })];
3585
+ case 1:
3586
+ _d.sent();
3587
+ first = items[0];
3588
+ _loop_1 = function (action) {
3589
+ if (items.every(function (e) { return e.actions.includes(action); })) {
3590
+ return { value: false };
3591
+ }
3592
+ };
3593
+ try {
3594
+ for (_a = __values(first.actions), _b = _a.next(); !_b.done; _b = _a.next()) {
3595
+ action = _b.value;
3596
+ state_1 = _loop_1(action);
3597
+ if (typeof state_1 === "object")
3598
+ return [2 /*return*/, state_1.value];
3599
+ }
3600
+ }
3601
+ catch (e_1_1) { e_1 = { error: e_1_1 }; }
3602
+ finally {
3603
+ try {
3604
+ if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
3605
+ }
3606
+ finally { if (e_1) throw e_1.error; }
3607
+ }
3608
+ return [2 /*return*/, true];
3525
3609
  }
3526
- return true;
3527
- }
3528
- return selection.disabledSelectAll(items);
3529
- };
3610
+ });
3611
+ }); };
3530
3612
  }
3531
3613
  return SdSelectionDisableSelectAllPipe;
3532
3614
  }());
@@ -3758,16 +3840,16 @@
3758
3840
  if (isDisabled) {
3759
3841
  return null;
3760
3842
  }
3761
- var editable = editor.editable;
3762
- item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: !!status, editable: !status && (typeof (editable) === 'function' ? editable(item) : editable), removable: false, savable: !!status, cancelable: !!status });
3843
+ item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: !!status, editable: true, removable: false, savable: !!status, cancelable: !!status });
3763
3844
  }
3764
3845
  else if (editor.type === 'popup') {
3765
3846
  if (isDisabled) {
3766
3847
  return null;
3767
3848
  }
3768
- var editable = editor.editable;
3769
- item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: false, editable: !status && (typeof (editable) === 'function' ? editable(item) : editable), removable: false, savable: false, cancelable: false });
3849
+ item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { visible: false, editable: true, removable: false, savable: false, cancelable: false });
3770
3850
  }
3851
+ var sdId = item.sdId, remain = __rest(item, ["sdId"]);
3852
+ item.sdId = hash__default['default'](remain);
3771
3853
  return item.editorHandlerRow;
3772
3854
  };
3773
3855
  return SdEditorHandlerRowPipe;
@@ -3797,7 +3879,6 @@
3797
3879
  }
3798
3880
  SdEditorHandlerColumnPipe.prototype.transform = function (value, item, column, gridOption) {
3799
3881
  var e_1, _c;
3800
- console.log(value, column.field);
3801
3882
  if (column.type === 'children' || column.type === 'children-col') {
3802
3883
  return;
3803
3884
  }
@@ -3817,7 +3898,8 @@
3817
3898
  }
3818
3899
  finally { if (e_1) throw e_1.error; }
3819
3900
  }
3820
- item.sdId = hash__namespace(item);
3901
+ var sdId = item.sdId, remain = __rest(item, ["sdId"]);
3902
+ item.sdId = hash__namespace(remain);
3821
3903
  return true;
3822
3904
  };
3823
3905
  return SdEditorHandlerColumnPipe;
@@ -3936,7 +4018,7 @@
3936
4018
  SdColumnInlineFilter.decorators = [
3937
4019
  { type: core.Component, args: [{
3938
4020
  selector: 'sd-column-inline-filter',
3939
- template: "<div class=\"c-inline-column\">\r\n <ng-container *ngIf=\"\r\n column.type === 'string' ||\r\n column.type === 'number' ||\r\n column.type === 'bool' ||\r\n column.type === 'values' ||\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time';\r\n else noFilter\">\r\n <sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-input>\r\n <sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-input>\r\n <sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n <ng-template sdAutocompleteDisplayDef let-item=\"item\">\r\n <sd-badge *ngIf=\"columnFilter[column.field] === '1'\" color=\"success\"\r\n [title]=\"column.option?.displayOnTrue || 'True'\"></sd-badge>\r\n <sd-badge *ngIf=\"columnFilter[column.field] === '0'\" color=\"danger\"\r\n [title]=\"column.option?.displayOnFalse || 'False'\"></sd-badge>\r\n </ng-template>\r\n </sd-select>\r\n <sd-select *ngIf=\"\r\n column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\" [multiple]=\"\r\n column?.option?.selection === 'MULTIPLE' ||\r\n column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n </sd-select>\r\n <sd-autocomplete *ngIf=\"\r\n column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-autocomplete>\r\n <sd-date-range *ngIf=\"\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time'\r\n \" size=\"sm\" [(from)]=\"columnFilter[column.field].from\" [(to)]=\"columnFilter[column.field].to\"\r\n (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-date-range>\r\n </ng-container>\r\n <ng-template #noFilter>\r\n <sd-input type=\"text\" size=\"sm\" disabled> </sd-input>\r\n </ng-template>\r\n</div>",
4021
+ template: "<div class=\"c-inline-column\">\r\n <ng-container *ngIf=\"\r\n column.type === 'string' ||\r\n column.type === 'number' ||\r\n column.type === 'bool' ||\r\n column.type === 'values' ||\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time';\r\n else noFilter\">\r\n <sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-input>\r\n <sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-input>\r\n <sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n <ng-template sdSelectDisplayDef let-item=\"item\">\r\n <sd-badge *ngIf=\"item.value === '1'\" color=\"success\"\r\n [title]=\"column.option?.displayOnTrue || 'True'\"></sd-badge>\r\n <sd-badge *ngIf=\"item.value === '0'\" color=\"danger\"\r\n [title]=\"column.option?.displayOnFalse || 'False'\"></sd-badge>\r\n </ng-template>\r\n </sd-select>\r\n <sd-select *ngIf=\"\r\n column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\" [multiple]=\"\r\n column?.option?.selection === 'MULTIPLE' ||\r\n column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n </sd-select>\r\n <sd-autocomplete *ngIf=\"\r\n column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-autocomplete>\r\n <sd-date-range *ngIf=\"\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time'\r\n \" size=\"sm\" [(from)]=\"columnFilter[column.field].from\" [(to)]=\"columnFilter[column.field].to\"\r\n (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-date-range>\r\n </ng-container>\r\n <ng-template #noFilter>\r\n <sd-input type=\"text\" size=\"sm\" disabled> </sd-input>\r\n </ng-template>\r\n</div>",
3940
4022
  changeDetection: core.ChangeDetectionStrategy.OnPush,
3941
4023
  styles: [":host ::ng-deep .c-inline-column .mat-form-field-wrapper{background-color:#fff;border-radius:8px;margin:8px 0 0!important;padding:0!important}"]
3942
4024
  },] }
@@ -3949,6 +4031,80 @@
3949
4031
  filterChange: [{ type: core.Output }]
3950
4032
  };
3951
4033
 
4034
+ var SdSelectionVisiblePipe = /** @class */ (function () {
4035
+ function SdSelectionVisiblePipe() {
4036
+ this.transform = function (rowData, selection) {
4037
+ var e_1, _a, e_2, _b;
4038
+ var actions = selection.actions;
4039
+ rowData.actions = rowData.actions || [];
4040
+ if (!actions.length) {
4041
+ return true;
4042
+ }
4043
+ try {
4044
+ for (var actions_1 = __values(actions), actions_1_1 = actions_1.next(); !actions_1_1.done; actions_1_1 = actions_1.next()) {
4045
+ var action = actions_1_1.value;
4046
+ if ('children' in action) {
4047
+ var flag = false;
4048
+ try {
4049
+ for (var _c = (e_2 = void 0, __values(action.children)), _d = _c.next(); !_d.done; _d = _c.next()) {
4050
+ var childAction = _d.value;
4051
+ var hidden = childAction.hidden;
4052
+ var key = hash__default['default'](childAction);
4053
+ if (typeof (hidden) === 'function') {
4054
+ if (!hidden(rowData)) {
4055
+ rowData.actions.push(key);
4056
+ flag = true;
4057
+ }
4058
+ }
4059
+ else if (!hidden) {
4060
+ rowData.actions.push(key);
4061
+ flag = true;
4062
+ }
4063
+ }
4064
+ }
4065
+ catch (e_2_1) { e_2 = { error: e_2_1 }; }
4066
+ finally {
4067
+ try {
4068
+ if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
4069
+ }
4070
+ finally { if (e_2) throw e_2.error; }
4071
+ }
4072
+ if (flag) {
4073
+ rowData.actions.push(hash__default['default'](action));
4074
+ }
4075
+ }
4076
+ else {
4077
+ var hidden = action.hidden;
4078
+ var key = hash__default['default'](action);
4079
+ if (typeof (hidden) === 'function') {
4080
+ if (!hidden(rowData)) {
4081
+ rowData.actions.push(key);
4082
+ }
4083
+ }
4084
+ else if (!hidden) {
4085
+ rowData.actions.push(key);
4086
+ }
4087
+ }
4088
+ }
4089
+ }
4090
+ catch (e_1_1) { e_1 = { error: e_1_1 }; }
4091
+ finally {
4092
+ try {
4093
+ if (actions_1_1 && !actions_1_1.done && (_a = actions_1.return)) _a.call(actions_1);
4094
+ }
4095
+ finally { if (e_1) throw e_1.error; }
4096
+ }
4097
+ return !!rowData.actions.length;
4098
+ };
4099
+ }
4100
+ return SdSelectionVisiblePipe;
4101
+ }());
4102
+ SdSelectionVisiblePipe.decorators = [
4103
+ { type: core.Pipe, args: [{
4104
+ name: 'selectionVisible'
4105
+ },] }
4106
+ ];
4107
+
3952
4108
  var MatPaginatorIntlCro = /** @class */ (function (_super) {
3953
4109
  __extends(MatPaginatorIntlCro, _super);
3954
4110
  function MatPaginatorIntlCro() {
@@ -4043,6 +4199,7 @@
4043
4199
  SdFilterColumnPipe,
4044
4200
  SdFilterExternalPipe,
4045
4201
  SdSelectionActionFilterPipe,
4202
+ SdSelectionVisiblePipe,
4046
4203
  SdSelectionDisablePipe,
4047
4204
  SdSelectionDisableSelectAllPipe,
4048
4205
  SdEditorHandlerRowPipe,
@@ -4099,12 +4256,13 @@
4099
4256
  exports.ɵbg = SdFilterColumnPipe;
4100
4257
  exports.ɵbh = SdFilterExternalPipe;
4101
4258
  exports.ɵbi = SdSelectionActionFilterPipe;
4102
- exports.ɵbj = SdSelectionDisablePipe;
4103
- exports.ɵbk = SdSelectionDisableSelectAllPipe;
4104
- exports.ɵbl = SdEditorHandlerRowPipe;
4105
- exports.ɵbm = SdEditorHandlerColumnPipe;
4106
- exports.ɵbn = SdEditorValidatePipe;
4107
- exports.ɵbo = SdStyleRowCss;
4259
+ exports.ɵbj = SdSelectionVisiblePipe;
4260
+ exports.ɵbk = SdSelectionDisablePipe;
4261
+ exports.ɵbl = SdSelectionDisableSelectAllPipe;
4262
+ exports.ɵbm = SdEditorHandlerRowPipe;
4263
+ exports.ɵbn = SdEditorHandlerColumnPipe;
4264
+ exports.ɵbo = SdEditorValidatePipe;
4265
+ exports.ɵbp = SdStyleRowCss;
4108
4266
  exports.ɵc = SdPopupFilter;
4109
4267
  exports.ɵd = SdGridFilterService;
4110
4268
  exports.ɵe = SdPopupExport;