@sd-angular/core 0.0.963 → 0.0.964
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.
- package/bundles/sd-angular-core-grid-material.umd.js +230 -87
- package/bundles/sd-angular-core-grid-material.umd.js.map +1 -1
- package/bundles/sd-angular-core-grid-material.umd.min.js +2 -2
- package/bundles/sd-angular-core-grid-material.umd.min.js.map +1 -1
- package/bundles/sd-angular-core-side-drawer.umd.js +5 -1
- package/bundles/sd-angular-core-side-drawer.umd.js.map +1 -1
- package/bundles/sd-angular-core-side-drawer.umd.min.js +1 -1
- package/bundles/sd-angular-core-side-drawer.umd.min.js.map +1 -1
- package/esm2015/grid-material/sd-angular-core-grid-material.js +8 -7
- package/esm2015/grid-material/src/lib/grid-material.component.js +2 -2
- package/esm2015/grid-material/src/lib/grid-material.module.js +3 -1
- package/esm2015/grid-material/src/lib/models/grid-action.model.js +1 -1
- package/esm2015/grid-material/src/lib/models/grid-selection.model.js +1 -1
- package/esm2015/grid-material/src/lib/models/grid.model.js +1 -1
- package/esm2015/grid-material/src/lib/pipes/selection-action-filter.pipe.js +16 -44
- package/esm2015/grid-material/src/lib/pipes/selection-disable-select-all.pipe.js +16 -7
- package/esm2015/grid-material/src/lib/pipes/selection-disable.pipe.js +35 -15
- package/esm2015/grid-material/src/lib/pipes/selection-visible.pipe.js +54 -0
- package/esm2015/side-drawer/src/lib/side-drawer/side-drawer.component.js +7 -3
- package/fesm2015/sd-angular-core-grid-material.js +116 -65
- package/fesm2015/sd-angular-core-grid-material.js.map +1 -1
- package/fesm2015/sd-angular-core-side-drawer.js +6 -2
- package/fesm2015/sd-angular-core-side-drawer.js.map +1 -1
- package/grid-material/sd-angular-core-grid-material.d.ts +7 -6
- package/grid-material/sd-angular-core-grid-material.metadata.json +1 -1
- package/grid-material/src/lib/models/grid-action.model.d.ts +1 -6
- package/grid-material/src/lib/models/grid-selection.model.d.ts +0 -2
- package/grid-material/src/lib/models/grid.model.d.ts +1 -0
- package/grid-material/src/lib/pipes/selection-action-filter.pipe.d.ts +2 -1
- package/grid-material/src/lib/pipes/selection-disable-select-all.pipe.d.ts +2 -1
- package/grid-material/src/lib/pipes/selection-disable.pipe.d.ts +2 -1
- package/grid-material/src/lib/pipes/selection-visible.pipe.d.ts +6 -0
- package/package.json +1 -1
- package/{sd-angular-core-0.0.963.tgz → sd-angular-core-0.0.964.tgz} +0 -0
- package/side-drawer/sd-angular-core-side-drawer.metadata.json +1 -1
- package/side-drawer/src/lib/side-drawer/side-drawer.component.d.ts +3 -2
|
@@ -2645,7 +2645,7 @@
|
|
|
2645
2645
|
SdGridMaterial.decorators = [
|
|
2646
2646
|
{ type: core.Component, args: [{
|
|
2647
2647
|
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>",
|
|
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 <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
2649
|
animations: [
|
|
2650
2650
|
animations.trigger('detailExpand', [
|
|
2651
2651
|
animations.state('collapsed', animations.style({ height: '0', minHeight: '0', visibility: 'hidden' })),
|
|
@@ -3382,7 +3382,7 @@
|
|
|
3382
3382
|
var SdSelectionActionFilterPipe = /** @class */ (function () {
|
|
3383
3383
|
function SdSelectionActionFilterPipe() {
|
|
3384
3384
|
var _this = this;
|
|
3385
|
-
_convert.set(this, function (action
|
|
3385
|
+
_convert.set(this, function (action) {
|
|
3386
3386
|
if ('children' in action) {
|
|
3387
3387
|
return {
|
|
3388
3388
|
title: action.title,
|
|
@@ -3391,7 +3391,6 @@
|
|
|
3391
3391
|
tooltip: action.tooltip,
|
|
3392
3392
|
color: action.color,
|
|
3393
3393
|
type: action.type,
|
|
3394
|
-
disabled: typeof (action.disabled) === 'function' ? action.disabled(selectedItems) : action.disabled,
|
|
3395
3394
|
children: action.children.map(function (e) { return ({
|
|
3396
3395
|
title: e.title,
|
|
3397
3396
|
icon: e.icon,
|
|
@@ -3399,7 +3398,6 @@
|
|
|
3399
3398
|
type: action.type,
|
|
3400
3399
|
fontSet: e.fontSet,
|
|
3401
3400
|
tooltip: e.tooltip,
|
|
3402
|
-
disabled: typeof (action.disabled) === 'function' ? action.disabled(selectedItems) : action.disabled,
|
|
3403
3401
|
click: e.click
|
|
3404
3402
|
}); })
|
|
3405
3403
|
};
|
|
@@ -3411,74 +3409,54 @@
|
|
|
3411
3409
|
type: action.type,
|
|
3412
3410
|
fontSet: action.fontSet,
|
|
3413
3411
|
tooltip: action.tooltip,
|
|
3414
|
-
disabled: typeof (action.disabled) === 'function' ? action.disabled(selectedItems) : action.disabled,
|
|
3415
3412
|
click: action.click
|
|
3416
3413
|
};
|
|
3417
3414
|
});
|
|
3418
3415
|
this.transform = function (selectedItems, actions) {
|
|
3419
|
-
var e_1, _a
|
|
3416
|
+
var e_1, _a;
|
|
3420
3417
|
var results = [];
|
|
3421
3418
|
if (!(actions === null || actions === void 0 ? void 0 : actions.length) || !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length)) {
|
|
3422
3419
|
return [];
|
|
3423
3420
|
}
|
|
3424
|
-
|
|
3425
|
-
|
|
3426
|
-
|
|
3427
|
-
var
|
|
3428
|
-
var
|
|
3429
|
-
|
|
3430
|
-
|
|
3431
|
-
|
|
3432
|
-
else if (typeof (hidden) === 'boolean') {
|
|
3433
|
-
if (!hidden) {
|
|
3434
|
-
flag = true;
|
|
3421
|
+
var _loop_1 = function (action) {
|
|
3422
|
+
var e_2, _a;
|
|
3423
|
+
if ('children' in action) {
|
|
3424
|
+
var children = [];
|
|
3425
|
+
var _loop_2 = function (childAction) {
|
|
3426
|
+
var key = hash__default['default'](childAction);
|
|
3427
|
+
if (selectedItems.every(function (e) { return e.actions.includes(key); })) {
|
|
3428
|
+
children.push(childAction);
|
|
3435
3429
|
}
|
|
3436
|
-
}
|
|
3437
|
-
|
|
3438
|
-
var
|
|
3439
|
-
|
|
3440
|
-
|
|
3430
|
+
};
|
|
3431
|
+
try {
|
|
3432
|
+
for (var _b = (e_2 = void 0, __values(action.children)), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
3433
|
+
var childAction = _c.value;
|
|
3434
|
+
_loop_2(childAction);
|
|
3441
3435
|
}
|
|
3442
3436
|
}
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
|
|
3446
|
-
|
|
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);
|
|
3437
|
+
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
3438
|
+
finally {
|
|
3439
|
+
try {
|
|
3440
|
+
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
3479
3441
|
}
|
|
3442
|
+
finally { if (e_2) throw e_2.error; }
|
|
3443
|
+
}
|
|
3444
|
+
if (children.length > 0) {
|
|
3445
|
+
results.push(Object.assign(Object.assign({}, action), { children: children }));
|
|
3446
|
+
}
|
|
3447
|
+
}
|
|
3448
|
+
else {
|
|
3449
|
+
var key_1 = hash__default['default'](action);
|
|
3450
|
+
if (selectedItems.every(function (e) { return e.actions.includes(key_1); })) {
|
|
3451
|
+
results.push(action);
|
|
3480
3452
|
}
|
|
3481
3453
|
}
|
|
3454
|
+
};
|
|
3455
|
+
try {
|
|
3456
|
+
for (var actions_1 = __values(actions), actions_1_1 = actions_1.next(); !actions_1_1.done; actions_1_1 = actions_1.next()) {
|
|
3457
|
+
var action = actions_1_1.value;
|
|
3458
|
+
_loop_1(action);
|
|
3459
|
+
}
|
|
3482
3460
|
}
|
|
3483
3461
|
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
3484
3462
|
finally {
|
|
@@ -3487,7 +3465,7 @@
|
|
|
3487
3465
|
}
|
|
3488
3466
|
finally { if (e_1) throw e_1.error; }
|
|
3489
3467
|
}
|
|
3490
|
-
return results.map(function (result) { return __classPrivateFieldGet(_this, _convert).call(_this, result
|
|
3468
|
+
return results.map(function (result) { return __classPrivateFieldGet(_this, _convert).call(_this, result); });
|
|
3491
3469
|
};
|
|
3492
3470
|
}
|
|
3493
3471
|
return SdSelectionActionFilterPipe;
|
|
@@ -3502,23 +3480,79 @@
|
|
|
3502
3480
|
var SdSelectionDisablePipe = /** @class */ (function () {
|
|
3503
3481
|
function SdSelectionDisablePipe() {
|
|
3504
3482
|
this.transform = function (selectedItems, rowData, selection) {
|
|
3505
|
-
var
|
|
3483
|
+
var e_1, _a, e_2, _b;
|
|
3484
|
+
var actions = selection.actions;
|
|
3506
3485
|
if (!actions.length) {
|
|
3507
|
-
}
|
|
3508
|
-
if (!disabled) {
|
|
3509
3486
|
return false;
|
|
3510
3487
|
}
|
|
3511
|
-
|
|
3512
|
-
|
|
3513
|
-
|
|
3514
|
-
|
|
3515
|
-
|
|
3516
|
-
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
|
|
3520
|
-
|
|
3521
|
-
|
|
3488
|
+
// Lọc các action theo selectedItems hiện tại
|
|
3489
|
+
var availableActions = actions.filter(function (action) {
|
|
3490
|
+
var e_3, _a;
|
|
3491
|
+
if ('children' in action) {
|
|
3492
|
+
var _loop_1 = function (childAction) {
|
|
3493
|
+
var key = hash__default['default'](childAction);
|
|
3494
|
+
if (selectedItems.every(function (e) { return e.actions.includes(key); })) {
|
|
3495
|
+
return { value: true };
|
|
3496
|
+
}
|
|
3497
|
+
};
|
|
3498
|
+
try {
|
|
3499
|
+
for (var _b = __values(action.children), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
3500
|
+
var childAction = _c.value;
|
|
3501
|
+
var state_1 = _loop_1(childAction);
|
|
3502
|
+
if (typeof state_1 === "object")
|
|
3503
|
+
return state_1.value;
|
|
3504
|
+
}
|
|
3505
|
+
}
|
|
3506
|
+
catch (e_3_1) { e_3 = { error: e_3_1 }; }
|
|
3507
|
+
finally {
|
|
3508
|
+
try {
|
|
3509
|
+
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
3510
|
+
}
|
|
3511
|
+
finally { if (e_3) throw e_3.error; }
|
|
3512
|
+
}
|
|
3513
|
+
return false;
|
|
3514
|
+
}
|
|
3515
|
+
else {
|
|
3516
|
+
var key_1 = hash__default['default'](action);
|
|
3517
|
+
return selectedItems.every(function (e) { return e.actions.includes(key_1); });
|
|
3518
|
+
}
|
|
3519
|
+
});
|
|
3520
|
+
try {
|
|
3521
|
+
// Kiểm tra rowData có action nào thỏa hay ko, nếu ko thì disabled
|
|
3522
|
+
for (var availableActions_1 = __values(availableActions), availableActions_1_1 = availableActions_1.next(); !availableActions_1_1.done; availableActions_1_1 = availableActions_1.next()) {
|
|
3523
|
+
var action = availableActions_1_1.value;
|
|
3524
|
+
if ('children' in action) {
|
|
3525
|
+
try {
|
|
3526
|
+
for (var _c = (e_2 = void 0, __values(action.children)), _d = _c.next(); !_d.done; _d = _c.next()) {
|
|
3527
|
+
var childAction = _d.value;
|
|
3528
|
+
if (rowData.actions.includes(hash__default['default'](childAction))) {
|
|
3529
|
+
return false;
|
|
3530
|
+
}
|
|
3531
|
+
}
|
|
3532
|
+
}
|
|
3533
|
+
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
3534
|
+
finally {
|
|
3535
|
+
try {
|
|
3536
|
+
if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
|
|
3537
|
+
}
|
|
3538
|
+
finally { if (e_2) throw e_2.error; }
|
|
3539
|
+
}
|
|
3540
|
+
}
|
|
3541
|
+
else {
|
|
3542
|
+
if (rowData.actions.includes(hash__default['default'](action))) {
|
|
3543
|
+
return false;
|
|
3544
|
+
}
|
|
3545
|
+
}
|
|
3546
|
+
}
|
|
3547
|
+
}
|
|
3548
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
3549
|
+
finally {
|
|
3550
|
+
try {
|
|
3551
|
+
if (availableActions_1_1 && !availableActions_1_1.done && (_a = availableActions_1.return)) _a.call(availableActions_1);
|
|
3552
|
+
}
|
|
3553
|
+
finally { if (e_1) throw e_1.error; }
|
|
3554
|
+
}
|
|
3555
|
+
return true;
|
|
3522
3556
|
};
|
|
3523
3557
|
}
|
|
3524
3558
|
return SdSelectionDisablePipe;
|
|
@@ -3531,15 +3565,48 @@
|
|
|
3531
3565
|
|
|
3532
3566
|
var SdSelectionDisableSelectAllPipe = /** @class */ (function () {
|
|
3533
3567
|
function SdSelectionDisableSelectAllPipe() {
|
|
3534
|
-
|
|
3535
|
-
|
|
3536
|
-
|
|
3537
|
-
|
|
3568
|
+
var _this = this;
|
|
3569
|
+
this.transform = function (items, selection) { return __awaiter(_this, void 0, void 0, function () {
|
|
3570
|
+
var actions, first, _loop_1, _a, _b, action, state_1;
|
|
3571
|
+
var e_1, _c;
|
|
3572
|
+
return __generator(this, function (_d) {
|
|
3573
|
+
switch (_d.label) {
|
|
3574
|
+
case 0:
|
|
3575
|
+
actions = selection.actions;
|
|
3576
|
+
if (!actions.length) {
|
|
3577
|
+
return [2 /*return*/, false];
|
|
3578
|
+
}
|
|
3579
|
+
if (!items.length) {
|
|
3580
|
+
return [2 /*return*/, false];
|
|
3581
|
+
}
|
|
3582
|
+
return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 500); })];
|
|
3583
|
+
case 1:
|
|
3584
|
+
_d.sent();
|
|
3585
|
+
first = items[0];
|
|
3586
|
+
_loop_1 = function (action) {
|
|
3587
|
+
if (items.every(function (e) { return e.actions.includes(action); })) {
|
|
3588
|
+
return { value: false };
|
|
3589
|
+
}
|
|
3590
|
+
};
|
|
3591
|
+
try {
|
|
3592
|
+
for (_a = __values(first.actions), _b = _a.next(); !_b.done; _b = _a.next()) {
|
|
3593
|
+
action = _b.value;
|
|
3594
|
+
state_1 = _loop_1(action);
|
|
3595
|
+
if (typeof state_1 === "object")
|
|
3596
|
+
return [2 /*return*/, state_1.value];
|
|
3597
|
+
}
|
|
3598
|
+
}
|
|
3599
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
3600
|
+
finally {
|
|
3601
|
+
try {
|
|
3602
|
+
if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
|
|
3603
|
+
}
|
|
3604
|
+
finally { if (e_1) throw e_1.error; }
|
|
3605
|
+
}
|
|
3606
|
+
return [2 /*return*/, true];
|
|
3538
3607
|
}
|
|
3539
|
-
|
|
3540
|
-
|
|
3541
|
-
return selection.disabledSelectAll(items);
|
|
3542
|
-
};
|
|
3608
|
+
});
|
|
3609
|
+
}); };
|
|
3543
3610
|
}
|
|
3544
3611
|
return SdSelectionDisableSelectAllPipe;
|
|
3545
3612
|
}());
|
|
@@ -3962,6 +4029,80 @@
|
|
|
3962
4029
|
filterChange: [{ type: core.Output }]
|
|
3963
4030
|
};
|
|
3964
4031
|
|
|
4032
|
+
var SdSelectionVisiblePipe = /** @class */ (function () {
|
|
4033
|
+
function SdSelectionVisiblePipe() {
|
|
4034
|
+
this.transform = function (rowData, selection) {
|
|
4035
|
+
var e_1, _a, e_2, _b;
|
|
4036
|
+
var actions = selection.actions;
|
|
4037
|
+
rowData.actions = rowData.actions || [];
|
|
4038
|
+
if (!actions.length) {
|
|
4039
|
+
return true;
|
|
4040
|
+
}
|
|
4041
|
+
try {
|
|
4042
|
+
for (var actions_1 = __values(actions), actions_1_1 = actions_1.next(); !actions_1_1.done; actions_1_1 = actions_1.next()) {
|
|
4043
|
+
var action = actions_1_1.value;
|
|
4044
|
+
if ('children' in action) {
|
|
4045
|
+
var flag = false;
|
|
4046
|
+
try {
|
|
4047
|
+
for (var _c = (e_2 = void 0, __values(action.children)), _d = _c.next(); !_d.done; _d = _c.next()) {
|
|
4048
|
+
var childAction = _d.value;
|
|
4049
|
+
var hidden = childAction.hidden;
|
|
4050
|
+
var key = hash__default['default'](childAction);
|
|
4051
|
+
if (typeof (hidden) === 'function') {
|
|
4052
|
+
if (!hidden(rowData)) {
|
|
4053
|
+
rowData.actions.push(key);
|
|
4054
|
+
flag = true;
|
|
4055
|
+
}
|
|
4056
|
+
}
|
|
4057
|
+
else if (!hidden) {
|
|
4058
|
+
rowData.actions.push(key);
|
|
4059
|
+
flag = true;
|
|
4060
|
+
}
|
|
4061
|
+
}
|
|
4062
|
+
}
|
|
4063
|
+
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
4064
|
+
finally {
|
|
4065
|
+
try {
|
|
4066
|
+
if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
|
|
4067
|
+
}
|
|
4068
|
+
finally { if (e_2) throw e_2.error; }
|
|
4069
|
+
}
|
|
4070
|
+
if (flag) {
|
|
4071
|
+
rowData.actions.push(hash__default['default'](action));
|
|
4072
|
+
}
|
|
4073
|
+
}
|
|
4074
|
+
else {
|
|
4075
|
+
var hidden = action.hidden;
|
|
4076
|
+
var key = hash__default['default'](action);
|
|
4077
|
+
if (typeof (hidden) === 'function') {
|
|
4078
|
+
if (!hidden(rowData)) {
|
|
4079
|
+
rowData.actions.push(key);
|
|
4080
|
+
}
|
|
4081
|
+
}
|
|
4082
|
+
else if (!hidden) {
|
|
4083
|
+
rowData.actions.push(key);
|
|
4084
|
+
}
|
|
4085
|
+
}
|
|
4086
|
+
}
|
|
4087
|
+
}
|
|
4088
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
4089
|
+
finally {
|
|
4090
|
+
try {
|
|
4091
|
+
if (actions_1_1 && !actions_1_1.done && (_a = actions_1.return)) _a.call(actions_1);
|
|
4092
|
+
}
|
|
4093
|
+
finally { if (e_1) throw e_1.error; }
|
|
4094
|
+
}
|
|
4095
|
+
return !!rowData.actions.length;
|
|
4096
|
+
};
|
|
4097
|
+
}
|
|
4098
|
+
return SdSelectionVisiblePipe;
|
|
4099
|
+
}());
|
|
4100
|
+
SdSelectionVisiblePipe.decorators = [
|
|
4101
|
+
{ type: core.Pipe, args: [{
|
|
4102
|
+
name: 'selectionVisible'
|
|
4103
|
+
},] }
|
|
4104
|
+
];
|
|
4105
|
+
|
|
3965
4106
|
var MatPaginatorIntlCro = /** @class */ (function (_super) {
|
|
3966
4107
|
__extends(MatPaginatorIntlCro, _super);
|
|
3967
4108
|
function MatPaginatorIntlCro() {
|
|
@@ -4056,6 +4197,7 @@
|
|
|
4056
4197
|
SdFilterColumnPipe,
|
|
4057
4198
|
SdFilterExternalPipe,
|
|
4058
4199
|
SdSelectionActionFilterPipe,
|
|
4200
|
+
SdSelectionVisiblePipe,
|
|
4059
4201
|
SdSelectionDisablePipe,
|
|
4060
4202
|
SdSelectionDisableSelectAllPipe,
|
|
4061
4203
|
SdEditorHandlerRowPipe,
|
|
@@ -4112,12 +4254,13 @@
|
|
|
4112
4254
|
exports.ɵbg = SdFilterColumnPipe;
|
|
4113
4255
|
exports.ɵbh = SdFilterExternalPipe;
|
|
4114
4256
|
exports.ɵbi = SdSelectionActionFilterPipe;
|
|
4115
|
-
exports.ɵbj =
|
|
4116
|
-
exports.ɵbk =
|
|
4117
|
-
exports.ɵbl =
|
|
4118
|
-
exports.ɵbm =
|
|
4119
|
-
exports.ɵbn =
|
|
4120
|
-
exports.ɵbo =
|
|
4257
|
+
exports.ɵbj = SdSelectionVisiblePipe;
|
|
4258
|
+
exports.ɵbk = SdSelectionDisablePipe;
|
|
4259
|
+
exports.ɵbl = SdSelectionDisableSelectAllPipe;
|
|
4260
|
+
exports.ɵbm = SdEditorHandlerRowPipe;
|
|
4261
|
+
exports.ɵbn = SdEditorHandlerColumnPipe;
|
|
4262
|
+
exports.ɵbo = SdEditorValidatePipe;
|
|
4263
|
+
exports.ɵbp = SdStyleRowCss;
|
|
4121
4264
|
exports.ɵc = SdPopupFilter;
|
|
4122
4265
|
exports.ɵd = SdGridFilterService;
|
|
4123
4266
|
exports.ɵe = SdPopupExport;
|