@sd-angular/core 1.3.168 → 1.3.170
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-table.umd.js +202 -191
- package/bundles/sd-angular-core-table.umd.js.map +1 -1
- package/bundles/sd-angular-core-table.umd.min.js +1 -1
- package/bundles/sd-angular-core-table.umd.min.js.map +1 -1
- package/esm2015/table/src/lib/components/desktop-cell/desktop-cell.component.js +2 -4
- package/esm2015/table/src/lib/components/desktop-cell-view/desktop-cell-view.component.js +1 -3
- package/esm2015/table/src/lib/models/table-column.model.js +1 -1
- package/esm2015/table/src/lib/services/table-configuration.service.js +2 -2
- package/esm2015/table/src/lib/table.component.js +38 -14
- package/fesm2015/sd-angular-core-table.js +39 -19
- package/fesm2015/sd-angular-core-table.js.map +1 -1
- package/package.json +1 -1
- package/{sd-angular-core-1.3.168.tgz → sd-angular-core-1.3.170.tgz} +0 -0
- package/table/sd-angular-core-table.metadata.json +1 -1
- package/table/src/lib/components/desktop-cell/desktop-cell.component.d.ts +0 -2
- package/table/src/lib/components/desktop-cell-view/desktop-cell-view.component.d.ts +0 -2
- package/table/src/lib/models/table-column.model.d.ts +1 -0
|
@@ -291,7 +291,7 @@ class SdTableConfigurationService {
|
|
|
291
291
|
_prefix.set(this, 'bd364e28-fe67-48b9-a537-1a306f7d195c');
|
|
292
292
|
_getSetting.set(this, (gridOption) => {
|
|
293
293
|
if (!(gridOption === null || gridOption === void 0 ? void 0 : gridOption.key)) {
|
|
294
|
-
|
|
294
|
+
return null;
|
|
295
295
|
}
|
|
296
296
|
return this.settingService.create({ prefix: __classPrivateFieldGet(this, _prefix), key: gridOption.key }, {
|
|
297
297
|
default: __classPrivateFieldGet(this, _default).call(this, gridOption),
|
|
@@ -1408,19 +1408,25 @@ class SdTable {
|
|
|
1408
1408
|
}
|
|
1409
1409
|
}));
|
|
1410
1410
|
_format.set(this, (rawItems, columns) => __awaiter(this, void 0, void 0, function* () {
|
|
1411
|
-
var _4, _5, _6;
|
|
1411
|
+
var _4, _5, _6, _7, _8;
|
|
1412
1412
|
const items = rawItems.map(MapToSdTableItem);
|
|
1413
1413
|
for (const column of columns) {
|
|
1414
1414
|
// Clickable
|
|
1415
1415
|
const { field, cellStyle, click, tooltip, htmlTemplate, transform } = column;
|
|
1416
|
-
if (column.type === 'lazy-values') {
|
|
1416
|
+
if (!transform && !htmlTemplate && column.type === 'lazy-values' && typeof column.option.views === 'function') {
|
|
1417
|
+
const { option: { views, mapValue }, } = column;
|
|
1417
1418
|
__classPrivateFieldGet(this, _cacheObjValues)[field] = __classPrivateFieldGet(this, _cacheObjValues)[field] || {};
|
|
1418
1419
|
const values = items
|
|
1419
|
-
.map(item => {
|
|
1420
|
+
.map(item => {
|
|
1421
|
+
var _a, _b;
|
|
1422
|
+
if (typeof mapValue === 'function') {
|
|
1423
|
+
return mapValue((_a = item.data) === null || _a === void 0 ? void 0 : _a[field], item.data);
|
|
1424
|
+
}
|
|
1425
|
+
return (_b = item.data) === null || _b === void 0 ? void 0 : _b[field];
|
|
1426
|
+
})
|
|
1420
1427
|
.filter(val => (!!val || val === 0) && !Object.keys(__classPrivateFieldGet(this, _cacheObjValues)[field]).includes(val))
|
|
1421
1428
|
.union();
|
|
1422
|
-
|
|
1423
|
-
if (views && values.length) {
|
|
1429
|
+
if (values.length) {
|
|
1424
1430
|
const lazyItems = (yield views(values).catch(err => {
|
|
1425
1431
|
console.error(err);
|
|
1426
1432
|
return [];
|
|
@@ -1480,7 +1486,12 @@ class SdTable {
|
|
|
1480
1486
|
}
|
|
1481
1487
|
}
|
|
1482
1488
|
if (column.type === 'values' || column.type === 'lazy-values') {
|
|
1483
|
-
|
|
1489
|
+
if (column.type === 'lazy-values' && typeof column.option.mapValue === 'function') {
|
|
1490
|
+
display.data = ((_5 = (_4 = __classPrivateFieldGet(this, _cacheObjValues)[field]) === null || _4 === void 0 ? void 0 : _4[column.option.mapValue(value, rowData)]) === null || _5 === void 0 ? void 0 : _5[column.option.displayField]) || value;
|
|
1491
|
+
}
|
|
1492
|
+
else {
|
|
1493
|
+
display.data = ((_7 = (_6 = __classPrivateFieldGet(this, _cacheObjValues)[field]) === null || _6 === void 0 ? void 0 : _6[value]) === null || _7 === void 0 ? void 0 : _7[column.option.displayField]) || value;
|
|
1494
|
+
}
|
|
1484
1495
|
}
|
|
1485
1496
|
if (column.type === 'number' && Number.isNumber(value)) {
|
|
1486
1497
|
display.data = Number.toVNCurrency(value);
|
|
@@ -1499,7 +1510,7 @@ class SdTable {
|
|
|
1499
1510
|
display.badge = {
|
|
1500
1511
|
type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'icon' : column.badgeType,
|
|
1501
1512
|
color: column.badge(value, rowData),
|
|
1502
|
-
icon: (
|
|
1513
|
+
icon: (_8 = column.badgeIcon) === null || _8 === void 0 ? void 0 : _8.call(column, value, rowData),
|
|
1503
1514
|
};
|
|
1504
1515
|
}
|
|
1505
1516
|
else if (column.type === 'bool') {
|
|
@@ -1524,13 +1535,26 @@ class SdTable {
|
|
|
1524
1535
|
this.gridOption = option;
|
|
1525
1536
|
__classPrivateFieldSet(this, _loadCompleted, false);
|
|
1526
1537
|
const setting = this.gridConfigurationService.init(this.gridOption);
|
|
1527
|
-
|
|
1538
|
+
console.log(setting);
|
|
1539
|
+
if (setting) {
|
|
1540
|
+
__classPrivateFieldGet(this, _subscription$1).add(setting.observer.pipe(startWith(setting.subject.getValue())).subscribe(configuration => {
|
|
1541
|
+
const configurationResult = this.gridConfigurationService.loadConfigurationResult(this.gridOption, configuration);
|
|
1542
|
+
const displayColumns = configurationResult.displayedColumns || [];
|
|
1543
|
+
__classPrivateFieldGet(this, _loadValues).call(this, this.gridOption.columns.filter(column => displayColumns.includes(column.field))).then(() => {
|
|
1544
|
+
this.configuration = configurationResult;
|
|
1545
|
+
__classPrivateFieldGet(this, _optionChanges).next(this.gridOption);
|
|
1546
|
+
});
|
|
1547
|
+
}));
|
|
1548
|
+
}
|
|
1549
|
+
else {
|
|
1550
|
+
const configuration = this.gridConfigurationService.loadConfiguration(this.gridOption);
|
|
1528
1551
|
const configurationResult = this.gridConfigurationService.loadConfigurationResult(this.gridOption, configuration);
|
|
1529
1552
|
const displayColumns = configurationResult.displayedColumns || [];
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1553
|
+
__classPrivateFieldGet(this, _loadValues).call(this, this.gridOption.columns.filter(column => displayColumns.includes(column.field))).then(() => {
|
|
1554
|
+
this.configuration = configurationResult;
|
|
1555
|
+
__classPrivateFieldGet(this, _optionChanges).next(this.gridOption);
|
|
1556
|
+
});
|
|
1557
|
+
}
|
|
1534
1558
|
}
|
|
1535
1559
|
}
|
|
1536
1560
|
set paginator(paginator) {
|
|
@@ -1597,7 +1621,7 @@ _gridId = new WeakMap(), _optionChanges = new WeakMap(), _localItems = new WeakM
|
|
|
1597
1621
|
SdTable.decorators = [
|
|
1598
1622
|
{ type: Component, args: [{
|
|
1599
1623
|
selector: 'sd-table',
|
|
1600
|
-
template: "<ng-container *ngIf=\"configuration\">\r\n <sd-table-filter\r\n *ngIf=\"!gridOption.filter?.disabled && filterRegister\"\r\n [filterRegister]=\"filterRegister\"\r\n [filter]=\"gridOption?.filter\"\r\n [columns]=\"configuration.firstColumns\"\r\n [externalFilters]=\"gridOption?.filter?.externalFilters\"\r\n [filterDefs]=\"filterDefs\">\r\n </sd-table-filter>\r\n <ng-container *ngIf=\"items | sdGroup : gridOption; $implicit as groupedItems\">\r\n <div class=\"c-container\">\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div\r\n class=\"c-table\"\r\n sdScroll\r\n [ngStyle]=\"{\r\n 'max-height': gridOption?.style?.maxHeight,\r\n 'min-height': gridOption?.style?.minHeight\r\n }\">\r\n <table mat-table [dataSource]=\"groupedItems\" [trackBy]=\"trackBy\" matSort [matSortDisabled]=\"!gridOption.sort?.enable\" 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 <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n <ng-container *ngIf=\"gridOption?.expand?.always; else useExpandCollapse\">\r\n <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n </ng-container>\r\n <ng-template #useExpandCollapse>\r\n <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </ng-container>\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\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button\r\n *ngIf=\"!element.isExpanding && !gridOption?.expand?.always\"\r\n mat-icon-button\r\n 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\r\n class=\"text-center px-15\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <ng-container *ngIf=\"items | selectionVisibleSelectAll : gridOption?.selector | async\">\r\n <mat-checkbox\r\n *ngIf=\"!gridOption.selector?.single\"\r\n class=\"c-selection\"\r\n color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\"\r\n (change)=\"onSelectAll()\">\r\n </mat-checkbox>\r\n </ng-container>\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?.selector\">\r\n <mat-checkbox\r\n class=\"c-selection\"\r\n color=\"primary\"\r\n [(ngModel)]=\"item.isSelected\"\r\n (change)=\"onSelect(item)\"\r\n [disabled]=\"selectedItems | selectionDisable : item : gridOption?.selector\">\r\n </mat-checkbox>\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\r\n class=\"px-8 py-8\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n 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 matColumnDef=\"sdGroup\">\r\n <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.firstColumns;\"\r\n [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n <div>\r\n <div\r\n aria-hidden=\"true\"\r\n mat-sort-header\r\n [disabled]=\"!column.sortable || column.type === 'children-col'\"\r\n [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"!gridOption.filter?.disabled && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n [columnFilter]=\"columnFilter\"\r\n [cacheValues]=\"cacheValues\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell\r\n class=\"d-block px-8\"\r\n *ngIf=\"!item?.sdGroup\"\r\n [sdId]=\"item.meta.id\"\r\n [key]=\"key\"\r\n [value]=\"item[column.field]\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n [cellDef]=\"cellDef\"\r\n [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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\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\" [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div\r\n [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"!gridOption.filter?.disabled && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n [columnFilter]=\"columnFilter\"\r\n [cacheValues]=\"cacheValues\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell\r\n class=\"d-block px-8\"\r\n [sdId]=\"item.meta.id\"\r\n [key]=\"key\"\r\n [value]=\"item[column.field]\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n [cellDef]=\"cellDef\"\r\n [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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\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\"></tr>\r\n </ng-container>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n matRipple\r\n class=\"c-row\"\r\n [class.selected]=\"row.isSelected\"></tr>\r\n\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 </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <sd-button\r\n *ngIf=\"tableFilter\"\r\n class=\"mr-8\"\r\n [title]=\"'Filter' | sdTranslate\"\r\n icon=\"filter_alt\"\r\n size=\"sm\"\r\n (action)=\"tableFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n <sd-button\r\n *ngIf=\"gridOption.reload?.visible\"\r\n class=\"mr-8\"\r\n [title]=\"'Reload' | sdTranslate\"\r\n icon=\"refresh\"\r\n size=\"sm\"\r\n (action)=\"reload()\"\r\n [disabled]=\"!items?.length\"\r\n 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\" 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\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> Xu\u1EA5t excel</span>\r\n </button>\r\n <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> Xu\u1EA5t CSV</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <sd-button\r\n *ngIf=\"popupConfiguration\"\r\n class=\"mr-8\"\r\n [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\"\r\n size=\"sm\"\r\n (action)=\"popupConfiguration.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n </div>\r\n <mat-paginator\r\n [class.d-none]=\"gridOption.paginate?.hidden\"\r\n [length]=\"total\"\r\n [pageSize]=\"gridOption.paginate?.pageSize\"\r\n [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </div>\r\n </div>\r\n <sd-table-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n </sd-table-quick-action>\r\n <sd-popup-configuration *ngIf=\"gridOption?.key && gridOption.config?.visible\" [gridOption]=\"gridOption\"> </sd-popup-configuration>\r\n </ng-container>\r\n</ng-container>\r\n",
|
|
1624
|
+
template: "<ng-container *ngIf=\"configuration\">\r\n <sd-table-filter\r\n *ngIf=\"!gridOption.filter?.disabled && filterRegister\"\r\n [filterRegister]=\"filterRegister\"\r\n [filter]=\"gridOption?.filter\"\r\n [columns]=\"configuration.firstColumns\"\r\n [externalFilters]=\"gridOption?.filter?.externalFilters\"\r\n [filterDefs]=\"filterDefs\">\r\n </sd-table-filter>\r\n <ng-container *ngIf=\"items | sdGroup : gridOption; $implicit as groupedItems\">\r\n <div class=\"c-container\">\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div\r\n class=\"c-table\"\r\n sdScroll\r\n [ngStyle]=\"{\r\n 'max-height': gridOption?.style?.maxHeight,\r\n 'min-height': gridOption?.style?.minHeight\r\n }\">\r\n <table mat-table [dataSource]=\"groupedItems\" [trackBy]=\"trackBy\" matSort [matSortDisabled]=\"!gridOption.sort?.enable\" 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 <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n <ng-container *ngIf=\"gridOption?.expand?.always; else useExpandCollapse\">\r\n <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n </ng-container>\r\n <ng-template #useExpandCollapse>\r\n <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </ng-container>\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\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button\r\n *ngIf=\"!element.isExpanding && !gridOption?.expand?.always\"\r\n mat-icon-button\r\n 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\r\n class=\"text-center px-15\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <ng-container *ngIf=\"items | selectionVisibleSelectAll : gridOption?.selector | async\">\r\n <mat-checkbox\r\n *ngIf=\"!gridOption.selector?.single\"\r\n class=\"c-selection\"\r\n color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\"\r\n (change)=\"onSelectAll()\">\r\n </mat-checkbox>\r\n </ng-container>\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?.selector\">\r\n <mat-checkbox\r\n class=\"c-selection\"\r\n color=\"primary\"\r\n [(ngModel)]=\"item.isSelected\"\r\n (change)=\"onSelect(item)\"\r\n [disabled]=\"selectedItems | selectionDisable : item : gridOption?.selector\">\r\n </mat-checkbox>\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\r\n class=\"px-8 py-8\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n 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 matColumnDef=\"sdGroup\">\r\n <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.firstColumns;\"\r\n [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n <div>\r\n <div\r\n aria-hidden=\"true\"\r\n mat-sort-header\r\n [disabled]=\"!column.sortable || column.type === 'children-col'\"\r\n [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"!gridOption.filter?.disabled && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n [columnFilter]=\"columnFilter\"\r\n [cacheValues]=\"cacheValues\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell\r\n class=\"d-block px-8\"\r\n *ngIf=\"!item?.sdGroup\"\r\n [value]=\"item[column.field]\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n [cellDef]=\"cellDef\"\r\n [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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\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\" [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div\r\n [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"!gridOption.filter?.disabled && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n [columnFilter]=\"columnFilter\"\r\n [cacheValues]=\"cacheValues\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell\r\n class=\"d-block px-8\"\r\n [value]=\"item[column.field]\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n [cellDef]=\"cellDef\"\r\n [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=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\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\"></tr>\r\n </ng-container>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n matRipple\r\n class=\"c-row\"\r\n [class.selected]=\"row.isSelected\"></tr>\r\n\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 </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <sd-button\r\n *ngIf=\"tableFilter\"\r\n class=\"mr-8\"\r\n [title]=\"'Filter' | sdTranslate\"\r\n icon=\"filter_alt\"\r\n size=\"sm\"\r\n (action)=\"tableFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n <sd-button\r\n *ngIf=\"gridOption.reload?.visible\"\r\n class=\"mr-8\"\r\n [title]=\"'Reload' | sdTranslate\"\r\n icon=\"refresh\"\r\n size=\"sm\"\r\n (action)=\"reload()\"\r\n [disabled]=\"!items?.length\"\r\n 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\" 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\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> Xu\u1EA5t excel</span>\r\n </button>\r\n <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> Xu\u1EA5t CSV</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <sd-button\r\n *ngIf=\"popupConfiguration\"\r\n class=\"mr-8\"\r\n [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\"\r\n size=\"sm\"\r\n (action)=\"popupConfiguration.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n </div>\r\n <mat-paginator\r\n [class.d-none]=\"gridOption.paginate?.hidden\"\r\n [length]=\"total\"\r\n [pageSize]=\"gridOption.paginate?.pageSize\"\r\n [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </div>\r\n </div>\r\n <sd-table-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n </sd-table-quick-action>\r\n <sd-popup-configuration *ngIf=\"gridOption?.key && gridOption.config?.visible\" [gridOption]=\"gridOption\"> </sd-popup-configuration>\r\n </ng-container>\r\n</ng-container>\r\n",
|
|
1601
1625
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1602
1626
|
animations: [
|
|
1603
1627
|
trigger('detailExpand', [
|
|
@@ -1772,8 +1796,6 @@ SdDesktopCellView.decorators = [
|
|
|
1772
1796
|
];
|
|
1773
1797
|
SdDesktopCellView.ctorParameters = () => [];
|
|
1774
1798
|
SdDesktopCellView.propDecorators = {
|
|
1775
|
-
sdId: [{ type: Input }],
|
|
1776
|
-
key: [{ type: Input }],
|
|
1777
1799
|
column: [{ type: Input }],
|
|
1778
1800
|
item: [{ type: Input }],
|
|
1779
1801
|
gridOption: [{ type: Input }]
|
|
@@ -2023,15 +2045,13 @@ class SdDesktopCell {
|
|
|
2023
2045
|
SdDesktopCell.decorators = [
|
|
2024
2046
|
{ type: Component, args: [{
|
|
2025
2047
|
selector: 'sd-desktop-cell',
|
|
2026
|
-
template: "<ng-container *ngIf=\"cellDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"cellDef[column.field].templateRef; context: { item: item.data, column: column }\"> </ng-container>\r\n</ng-container>\r\n<sd-desktop-cell-view\r\n *ngIf=\"!cellDef[column.field]\"\r\n [
|
|
2048
|
+
template: "<ng-container *ngIf=\"cellDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"cellDef[column.field].templateRef; context: { item: item.data, column: column }\"> </ng-container>\r\n</ng-container>\r\n<sd-desktop-cell-view\r\n *ngIf=\"!cellDef[column.field]\"\r\n [column]=\"column\"\r\n [gridOption]=\"gridOption\"\r\n [item]=\"item\">\r\n</sd-desktop-cell-view>\r\n",
|
|
2027
2049
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
2028
2050
|
},] }
|
|
2029
2051
|
];
|
|
2030
2052
|
SdDesktopCell.ctorParameters = () => [];
|
|
2031
2053
|
SdDesktopCell.propDecorators = {
|
|
2032
|
-
sdId: [{ type: Input }],
|
|
2033
2054
|
value: [{ type: Input }],
|
|
2034
|
-
key: [{ type: Input }],
|
|
2035
2055
|
column: [{ type: Input }],
|
|
2036
2056
|
item: [{ type: Input }],
|
|
2037
2057
|
gridOption: [{ type: Input }],
|