@sd-angular/core 0.0.941 → 0.0.945
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 +118 -79
- 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-select.umd.js +1 -1
- package/bundles/sd-angular-core-select.umd.js.map +1 -1
- package/bundles/sd-angular-core-select.umd.min.js +2 -2
- package/bundles/sd-angular-core-select.umd.min.js.map +1 -1
- package/esm2015/grid-material/sd-angular-core-grid-material.js +30 -28
- package/esm2015/grid-material/src/lib/components/desktop-cell/desktop-cell.component.js +3 -4
- package/esm2015/grid-material/src/lib/components/desktop-editor-validation/desktop-editor-validation.component.js +19 -0
- package/esm2015/grid-material/src/lib/components/grid-filter/grid-filter.component.js +1 -1
- package/esm2015/grid-material/src/lib/grid-material.component.js +7 -4
- package/esm2015/grid-material/src/lib/grid-material.module.js +9 -3
- package/esm2015/grid-material/src/lib/models/grid-option.model.js +1 -1
- package/esm2015/grid-material/src/lib/models/grid-style.model.js +2 -0
- package/esm2015/grid-material/src/lib/models/grid.model.js +1 -1
- package/esm2015/grid-material/src/lib/pipes/editor-handler-column.pipe.js +16 -10
- package/esm2015/grid-material/src/lib/pipes/editor-validate.pipe.js +19 -20
- package/esm2015/grid-material/src/lib/pipes/style-row-css.pipe.js +13 -0
- package/esm2015/grid-material/src/lib/services/grid-configuration.service.js +6 -1
- package/esm2015/select/src/lib/select.component.js +2 -2
- package/fesm2015/sd-angular-core-grid-material.js +83 -38
- package/fesm2015/sd-angular-core-grid-material.js.map +1 -1
- package/fesm2015/sd-angular-core-select.js +1 -1
- package/fesm2015/sd-angular-core-select.js.map +1 -1
- package/grid-material/sd-angular-core-grid-material.d.ts +29 -27
- package/grid-material/sd-angular-core-grid-material.metadata.json +1 -1
- package/grid-material/src/lib/components/desktop-editor-validation/desktop-editor-validation.component.d.ts +7 -0
- package/grid-material/src/lib/models/grid-option.model.d.ts +2 -3
- package/grid-material/src/lib/models/grid-style.model.d.ts +6 -0
- package/grid-material/src/lib/models/grid.model.d.ts +1 -0
- package/grid-material/src/lib/pipes/editor-handler-column.pipe.d.ts +1 -0
- package/grid-material/src/lib/pipes/editor-validate.pipe.d.ts +2 -4
- package/grid-material/src/lib/pipes/style-row-css.pipe.d.ts +7 -0
- package/package.json +1 -1
- package/{sd-angular-core-0.0.941.tgz → sd-angular-core-0.0.945.tgz} +0 -0
- package/select/sd-angular-core-select.metadata.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/animations'), require('uuid'), require('rxjs'), require('object-hash'), require('@sd-angular/core/notify'), require('@angular/cdk/drag-drop'), require('rxjs/operators'), require('@sd-angular/core/setting'), require('ngx-device-detector'), require('@sd-angular/core/loading'), require('@sd-angular/core/translate'), require('@sd-angular/core/export'), require('@angular/forms'), require('@sd-angular/core/utility'), require('@sd-angular/core/quick-action'), require('@angular/common'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@sd-angular/core/typing'), require('@angular/material/table'), require('@angular/material/progress-spinner'), require('@angular/cdk/table'), require('@angular/material/menu'), require('@angular/material/slider'), require('@angular/material/button'), require('@sd-angular/core/service'), require('@angular/material/tooltip'), require('@angular/material/chips'), require('@angular/material/radio'), require('@angular/material/slide-toggle'), require('@sd-angular/core/form'), require('@angular/material/checkbox'), require('@angular/material/list'), require('@angular/material/divider'), require('@sd-angular/core/side-drawer')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define('@sd-angular/core/grid-material', ['exports', '@angular/core', '@angular/material/paginator', '@angular/material/sort', '@angular/animations', 'uuid', 'rxjs', 'object-hash', '@sd-angular/core/notify', '@angular/cdk/drag-drop', 'rxjs/operators', '@sd-angular/core/setting', 'ngx-device-detector', '@sd-angular/core/loading', '@sd-angular/core/translate', '@sd-angular/core/export', '@angular/forms', '@sd-angular/core/utility', '@sd-angular/core/quick-action', '@angular/common', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@sd-angular/core/typing', '@angular/material/table', '@angular/material/progress-spinner', '@angular/cdk/table', '@angular/material/menu', '@angular/material/slider', '@angular/material/button', '@sd-angular/core/service', '@angular/material/tooltip', '@angular/material/chips', '@angular/material/radio', '@angular/material/slide-toggle', '@sd-angular/core/form', '@angular/material/checkbox', '@angular/material/list', '@angular/material/divider', '@sd-angular/core/side-drawer'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core['grid-material'] = {}), global.ng.core, global.ng.material.paginator, global.ng.material.sort, global.ng.animations, global.uuid, global.rxjs, global.hash, global['sd-angular'].core.notify, global.ng.cdk.dragDrop, global.rxjs.operators, global['sd-angular'].core.setting, global.ngxDeviceDetector, global['sd-angular'].core.loading, global['sd-angular'].core.translate, global['sd-angular'].core.export, global.ng.forms, global['sd-angular'].core.utility, global['sd-angular'].core['quick-action'], global.ng.common, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global['sd-angular'].core.typing, global.ng.material.table, global.ng.material.progressSpinner, global.ng.cdk.table, global.ng.material.menu, global.ng.material.slider, global.ng.material.button, global['sd-angular'].core.service, global.ng.material.tooltip, global.ng.material.chips, global.ng.material.radio, global.ng.material.slideToggle, global['sd-angular'].core.form, global.ng.material.checkbox, global.ng.material.list, global.ng.material.divider, global['sd-angular'].core['side-drawer']));
|
|
5
|
-
}(this, (function (exports, core, paginator, sort, animations, uuid, rxjs, hash, notify, dragDrop, operators, setting, ngxDeviceDetector, loading, translate, _export, forms, utility, quickAction, common, formField, icon, input, typing, table, progressSpinner, table$1, menu, slider, button, service, tooltip, chips, radio, slideToggle, form, checkbox, list, divider, sideDrawer) { 'use strict';
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/animations'), require('uuid'), require('rxjs'), require('object-hash'), require('@sd-angular/core/notify'), require('@angular/cdk/drag-drop'), require('rxjs/operators'), require('@sd-angular/core/setting'), require('ngx-device-detector'), require('@sd-angular/core/loading'), require('@sd-angular/core/translate'), require('@sd-angular/core/export'), require('@angular/forms'), require('@sd-angular/core/utility'), require('@sd-angular/core/quick-action'), require('@angular/common'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@sd-angular/core/typing'), require('@angular/material/table'), require('@angular/material/progress-spinner'), require('@angular/cdk/table'), require('@angular/cdk/scrolling'), require('@angular/material/menu'), require('@angular/material/slider'), require('@angular/material/button'), require('@sd-angular/core/service'), require('@angular/material/tooltip'), require('@angular/material/chips'), require('@angular/material/radio'), require('@angular/material/slide-toggle'), require('@sd-angular/core/form'), require('@angular/material/checkbox'), require('@angular/material/list'), require('@angular/material/divider'), require('@sd-angular/core/side-drawer')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('@sd-angular/core/grid-material', ['exports', '@angular/core', '@angular/material/paginator', '@angular/material/sort', '@angular/animations', 'uuid', 'rxjs', 'object-hash', '@sd-angular/core/notify', '@angular/cdk/drag-drop', 'rxjs/operators', '@sd-angular/core/setting', 'ngx-device-detector', '@sd-angular/core/loading', '@sd-angular/core/translate', '@sd-angular/core/export', '@angular/forms', '@sd-angular/core/utility', '@sd-angular/core/quick-action', '@angular/common', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@sd-angular/core/typing', '@angular/material/table', '@angular/material/progress-spinner', '@angular/cdk/table', '@angular/cdk/scrolling', '@angular/material/menu', '@angular/material/slider', '@angular/material/button', '@sd-angular/core/service', '@angular/material/tooltip', '@angular/material/chips', '@angular/material/radio', '@angular/material/slide-toggle', '@sd-angular/core/form', '@angular/material/checkbox', '@angular/material/list', '@angular/material/divider', '@sd-angular/core/side-drawer'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core['grid-material'] = {}), global.ng.core, global.ng.material.paginator, global.ng.material.sort, global.ng.animations, global.uuid, global.rxjs, global.hash, global['sd-angular'].core.notify, global.ng.cdk.dragDrop, global.rxjs.operators, global['sd-angular'].core.setting, global.ngxDeviceDetector, global['sd-angular'].core.loading, global['sd-angular'].core.translate, global['sd-angular'].core.export, global.ng.forms, global['sd-angular'].core.utility, global['sd-angular'].core['quick-action'], global.ng.common, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global['sd-angular'].core.typing, global.ng.material.table, global.ng.material.progressSpinner, global.ng.cdk.table, global.ng.cdk.scrolling, global.ng.material.menu, global.ng.material.slider, global.ng.material.button, global['sd-angular'].core.service, global.ng.material.tooltip, global.ng.material.chips, global.ng.material.radio, global.ng.material.slideToggle, global['sd-angular'].core.form, global.ng.material.checkbox, global.ng.material.list, global.ng.material.divider, global['sd-angular'].core['side-drawer']));
|
|
5
|
+
}(this, (function (exports, core, paginator, sort, animations, uuid, rxjs, hash, notify, dragDrop, operators, setting, ngxDeviceDetector, loading, translate, _export, forms, utility, quickAction, common, formField, icon, input, typing, table, progressSpinner, table$1, scrolling, menu, slider, button, service, tooltip, chips, radio, slideToggle, form, checkbox, list, divider, sideDrawer) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
8
|
|
|
@@ -799,7 +799,7 @@
|
|
|
799
799
|
SdGridFilter.decorators = [
|
|
800
800
|
{ type: core.Component, args: [{
|
|
801
801
|
selector: 'sd-grid-filter',
|
|
802
|
-
template: "<ng-container *ngIf=\"isVisible\">\r\n <div *ngIf=\"!isMobileOrTablet && (columns?.length || externalFilters?.length || filterDefs?.length)\"\r\n class=\"row mx-0
|
|
802
|
+
template: "<ng-container *ngIf=\"isVisible\">\r\n <div *ngIf=\"!isMobileOrTablet && (columns?.length || externalFilters?.length || filterDefs?.length)\"\r\n class=\"row mx-0 pb-10\">\r\n <ng-container *ngIf=\"filter?.sorts?.length\">\r\n <ng-container *ngFor=\"let field of filter?.sorts\">\r\n <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n <ng-container *ngFor=\"let item of columns | sdFilterColumn:field\">\r\n <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"externalFilters?.length\">\r\n <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal:field\">\r\n <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngFor=\"let item of filterDefs\">\r\n <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field\"\r\n class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n <ng-container *ngFor=\"let item of columns | sdFilterColumn\">\r\n <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"externalFilters?.length\">\r\n <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngFor=\"let item of filterDefs\">\r\n <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <ng-template #filterColumn let-item=\"item\">\r\n <div *ngIf=\"inlineColumn[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"columnFilter[item.field]\"\r\n (keyupEnter)=\"onFilter(item)\">\r\n </sd-input>\r\n <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"columnFilter[item.field]\"\r\n (keyupEnter)=\"onFilter(item)\">\r\n </sd-input>\r\n <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n </sd-select>\r\n <sd-select *ngIf=\"item.type === 'values' && item?.option?.selection !== 'AUTOCOMPLETE'\"\r\n [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n [displayField]=\"item.option.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n [disabled]=\"item.filter?.disabled\"\r\n [multiple]=\"item?.option?.selection === 'MULTIPLE' || item?.item?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n [filtered]=\"item?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n </sd-select>\r\n <sd-autocomplete *ngIf=\"item.type === 'values' && item?.option?.selection === 'AUTOCOMPLETE'\"\r\n [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n [displayField]=\"item.option?.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n [disabled]=\"item.filter?.disabled\">\r\n </sd-autocomplete>\r\n <sd-date-time *ngIf=\"item.type === 'date' || item.type === 'datetime' || item.type === 'time'\"\r\n [label]=\"item.title\" [(model)]=\"columnFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\">\r\n </sd-date-time>\r\n </div>\r\n </ng-template>\r\n <ng-template #filterExternal let-item=\"item\">\r\n <div *ngIf=\"inlineExternal[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"externalFilter[item.field]\"\r\n (keyupEnter)=\"onFilter(item)\">\r\n </sd-input>\r\n <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"externalFilter[item.field]\"\r\n (keyupEnter)=\"onFilter(item)\">\r\n </sd-input>\r\n <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n </sd-select>\r\n <ng-container *ngIf=\"item.type === 'values' && item.option\">\r\n <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" [selectAll]=\"item.option.selectAll\" multiple=\"true\">\r\n </sd-select>\r\n <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n </sd-autocomplete>\r\n <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" filtered=\"true\" multiple>\r\n </sd-select>\r\n <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n </sd-select>\r\n </ng-container>\r\n <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type ==='datetime'\"\r\n [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\">\r\n </sd-date-time>\r\n <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\" (sdChange)=\"onFilter(item)\">\r\n </sd-date-range>\r\n </div>\r\n </ng-template>\r\n <sd-popup-filter [columns]=\"columns\" [externalFilters]=\"externalFilters\" (changeFilter)=\"onChangeFilter($event)\"\r\n (clearFilter)=\"onReset()\" [filterDefs]=\"filterDefs\">\r\n </sd-popup-filter>\r\n</ng-container>",
|
|
803
803
|
styles: [":host{display:block;padding-left:0;padding-right:0}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}"]
|
|
804
804
|
},] }
|
|
805
805
|
];
|
|
@@ -1222,6 +1222,7 @@
|
|
|
1222
1222
|
this.settingService = settingService;
|
|
1223
1223
|
this.gridMaterialConfiguration = gridMaterialConfiguration;
|
|
1224
1224
|
_COLUMNS.set(this, {
|
|
1225
|
+
EDITORVALIDATION: 'sdEditorValidation',
|
|
1225
1226
|
EDITOR: 'sdEditor',
|
|
1226
1227
|
SUBINFORMATION: 'sdSubInformationAction',
|
|
1227
1228
|
COMMAND: 'sdCommand',
|
|
@@ -1480,6 +1481,10 @@
|
|
|
1480
1481
|
multipleHeader: false
|
|
1481
1482
|
};
|
|
1482
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))) {
|
|
1485
|
+
result.firstHeaders.push(__classPrivateFieldGet(_this, _COLUMNS).EDITORVALIDATION);
|
|
1486
|
+
result.displayedColumns.push(__classPrivateFieldGet(_this, _COLUMNS).EDITORVALIDATION);
|
|
1487
|
+
}
|
|
1483
1488
|
if (selection === null || selection === void 0 ? void 0 : selection.visible) {
|
|
1484
1489
|
result.firstHeaders.push(__classPrivateFieldGet(_this, _COLUMNS).SELECTION);
|
|
1485
1490
|
result.displayedColumns.push(__classPrivateFieldGet(_this, _COLUMNS).SELECTION);
|
|
@@ -1951,7 +1956,10 @@
|
|
|
1951
1956
|
this.items = (args === null || args === void 0 ? void 0 : args.items) || [];
|
|
1952
1957
|
this.total = (args === null || args === void 0 ? void 0 : args.total) || 0;
|
|
1953
1958
|
// this.isHiddenPaginator = this.filterInfo.pageNumber === 0 && this.total <= this.filterInfo.pageSize;
|
|
1954
|
-
this.items.forEach(function (item) {
|
|
1959
|
+
this.items.forEach(function (item) {
|
|
1960
|
+
item.originItem = Object.assign({}, item);
|
|
1961
|
+
item.sdId = hash__namespace(item);
|
|
1962
|
+
});
|
|
1955
1963
|
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))];
|
|
1956
1964
|
case 1:
|
|
1957
1965
|
_t.sent();
|
|
@@ -2602,7 +2610,7 @@
|
|
|
2602
2610
|
return false;
|
|
2603
2611
|
}).map(function (item) {
|
|
2604
2612
|
var editorStatus = item.editorStatus, editorHandlerRow = item.editorHandlerRow, editorHandlerColumn = item.editorHandlerColumn, expandDetail = item.expandDetail, isExpanded = item.isExpanded, isExpanding = item.isExpanding, isSelected = item.isSelected, originItem = item.originItem, result = __rest(item, ["editorStatus", "editorHandlerRow", "editorHandlerColumn", "expandDetail", "isExpanded", "isExpanding", "isSelected", "originItem"]);
|
|
2605
|
-
return Object.assign(Object.assign({}, result), { editorErrorMessage:
|
|
2613
|
+
return Object.assign(Object.assign({}, result), { editorErrorMessage: item.editorErrorMessage });
|
|
2606
2614
|
});
|
|
2607
2615
|
},
|
|
2608
2616
|
enumerable: false,
|
|
@@ -2624,7 +2632,7 @@
|
|
|
2624
2632
|
SdGridMaterial.decorators = [
|
|
2625
2633
|
{ type: core.Component, args: [{
|
|
2626
2634
|
selector: 'sd-grid-material',
|
|
2627
|
-
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=\"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': column.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]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\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\" [item]=\"item\" [idx]=\"i\" [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=\"\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 <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\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\" [item]=\"item\" [idx]=\"i\" [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=\"\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\"></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=\"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\" [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 [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]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\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 <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\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<ng-template #inlineColumn let-column=\"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 \">\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 </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-time *ngIf=\"\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time'\r\n \" size=\"sm\" [(model)]=\"columnFilter[column.field]\" [type]=\"column.type\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-date-time>\r\n </ng-container>\r\n <ng-template #noFilter>\r\n <sd-input type=\"text\" disabled> </sd-input>\r\n </ng-template>\r\n</ng-template>\r\n\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>",
|
|
2635
|
+
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': column.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]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\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 <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\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\" [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 [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]=\"column.titleHtml || column.title\"></div>\r\n <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\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 <div class=\"c-inline-column\" *ngIf=\"gridOption.filter?.inlineColumn\">\r\n <ng-container *ngTemplateOutlet=\"\r\n inlineColumn;\r\n context: { column: column }\r\n \"></ng-container>\r\n </div>\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<ng-template #inlineColumn let-column=\"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 \">\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 </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-time *ngIf=\"\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time'\r\n \" size=\"sm\" [(model)]=\"columnFilter[column.field]\" [type]=\"column.type\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-date-time>\r\n </ng-container>\r\n <ng-template #noFilter>\r\n <sd-input type=\"text\" disabled> </sd-input>\r\n </ng-template>\r\n</ng-template>\r\n\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>",
|
|
2628
2636
|
animations: [
|
|
2629
2637
|
animations.trigger('detailExpand', [
|
|
2630
2638
|
animations.state('collapsed', animations.style({ height: '0', minHeight: '0', visibility: 'hidden' })),
|
|
@@ -3653,9 +3661,8 @@
|
|
|
3653
3661
|
SdDesktopCell.decorators = [
|
|
3654
3662
|
{ type: core.Component, args: [{
|
|
3655
3663
|
selector: 'sd-desktop-cell',
|
|
3656
|
-
template: "<ng-container *ngIf=\"column && item\">\r\n <ng-container *ngIf=\"item.editorHandlerRow;else useView\">\r\n <ng-container *sdLet=\"item[column.field] | sdEditorHandlerColumn:item:column:gridOption\">\r\n <ng-container *ngIf=\"item.editorHandlerColumn[column.field]?.visible;else useView\">\r\n <ng-container *
|
|
3657
|
-
changeDetection: core.ChangeDetectionStrategy.OnPush
|
|
3658
|
-
styles: [".c-color-success{color:#4caf50}.c-color-danger{color:#f82c13}.c-img{font-size:30px;opacity:.5}.c-img.pointer:hover{opacity:.9}.c-badge{border-radius:20px;display:inline-block;margin-bottom:4px;padding:2px 12px;text-align:center}.c-badge.c-warning{background:#fff3e0;color:#ff9600}.c-badge.c-info{background:#e7e9ff;color:#2962ff}.c-badge.c-success{background:#e8f5e9;color:#4caf50}.c-badge.c-danger{background:#fee8e7;color:#f82c13}.c-badge.c-normal{background:rgba(0,0,0,.12);color:#000}.wes-status .c-material-icon{font-size:12px;height:12px;width:12px}.wes-status.text-secondary .c-material-icon{color:rgba(0,0,0,.5)}.c-badge-circle .c-material-icon{font-size:12px;height:12px;width:12px}.c-badge-circle.c-unknown{color:#212121}.c-badge-circle.c-unknown .c-material-icon{color:rgba(0,0,0,.5)}.c-badge-circle.c-secondary{color:#212121}.c-badge-circle.c-info{color:#2962ff}.c-badge-circle.c-success{color:#4caf50}.c-badge-circle.c-danger{color:#f82c13}.c-badge-circle.c-warning{color:#ff9600}"]
|
|
3664
|
+
template: "<ng-container *ngIf=\"column && item\">\r\n <ng-container *ngIf=\"item.editorHandlerRow;else useView\">\r\n <ng-container *sdLet=\"item[column.field] | sdEditorHandlerColumn:item:column:gridOption\">\r\n <ng-container *ngIf=\"item.editorHandlerColumn[column.field]?.visible;else useView\">\r\n <ng-container *ngIf=\"cellDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n cellDef[column.field].templateRef;\r\n context: { item: item, column: column, idx: idx, isEdited: true }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <sd-desktop-cell-editor *ngIf=\"!cellDef[column.field]\" [sdId]=\"item.sdId\" [column]=\"column\" [item]=\"item\">\r\n </sd-desktop-cell-editor>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #useView>\r\n <ng-container *ngIf=\"cellDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n cellDef[column.field].templateRef;\r\n context: { item: item, column: column, idx: idx }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <sd-desktop-cell-view *ngIf=\"!cellDef[column.field]\" [sdId]=\"item.sdId\" [key]=\"key\" [column]=\"column\" [item]=\"item\">\r\n </sd-desktop-cell-view>\r\n </ng-template>\r\n</ng-container>",
|
|
3665
|
+
changeDetection: core.ChangeDetectionStrategy.OnPush
|
|
3659
3666
|
},] }
|
|
3660
3667
|
];
|
|
3661
3668
|
SdDesktopCell.ctorParameters = function () { return []; };
|
|
@@ -3738,16 +3745,10 @@
|
|
|
3738
3745
|
},] }
|
|
3739
3746
|
];
|
|
3740
3747
|
|
|
3748
|
+
var _visible;
|
|
3741
3749
|
var SdEditorHandlerColumnPipe = /** @class */ (function () {
|
|
3742
3750
|
function SdEditorHandlerColumnPipe() {
|
|
3743
|
-
|
|
3744
|
-
SdEditorHandlerColumnPipe.prototype.transform = function (value, item, column, gridOption) {
|
|
3745
|
-
var e_1, _c;
|
|
3746
|
-
if (column.type === 'children' || column.type === 'children-col') {
|
|
3747
|
-
return;
|
|
3748
|
-
}
|
|
3749
|
-
var columns = gridOption.columns;
|
|
3750
|
-
var visible = function (col) {
|
|
3751
|
+
_visible.set(this, function (col, item) {
|
|
3751
3752
|
if (col.type === 'children' || col.type === 'children-col') {
|
|
3752
3753
|
return false;
|
|
3753
3754
|
}
|
|
@@ -3759,13 +3760,21 @@
|
|
|
3759
3760
|
}
|
|
3760
3761
|
}
|
|
3761
3762
|
return true;
|
|
3762
|
-
};
|
|
3763
|
+
});
|
|
3764
|
+
}
|
|
3765
|
+
SdEditorHandlerColumnPipe.prototype.transform = function (value, item, column, gridOption) {
|
|
3766
|
+
var e_1, _c;
|
|
3767
|
+
console.log(value, column.field);
|
|
3768
|
+
if (column.type === 'children' || column.type === 'children-col') {
|
|
3769
|
+
return;
|
|
3770
|
+
}
|
|
3771
|
+
var columns = gridOption.columns;
|
|
3763
3772
|
item.editorHandlerColumn = item.editorHandlerColumn || {};
|
|
3764
|
-
item.editorHandlerColumn[column.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[column.field]), { visible:
|
|
3773
|
+
item.editorHandlerColumn[column.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[column.field]), { visible: __classPrivateFieldGet(this, _visible).call(this, column, item) });
|
|
3765
3774
|
try {
|
|
3766
3775
|
for (var _d = __values(columns.filter(function (e) { var _a, _b; return (_b = (_a = column.editor) === null || _a === void 0 ? void 0 : _a.relatedColumns) === null || _b === void 0 ? void 0 : _b.includes(e.field); })), _e = _d.next(); !_e.done; _e = _d.next()) {
|
|
3767
3776
|
var col = _e.value;
|
|
3768
|
-
item.editorHandlerColumn[col.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[col.field]), { visible:
|
|
3777
|
+
item.editorHandlerColumn[col.field] = Object.assign(Object.assign({}, item.editorHandlerColumn[col.field]), { visible: __classPrivateFieldGet(this, _visible).call(this, col, item) });
|
|
3769
3778
|
}
|
|
3770
3779
|
}
|
|
3771
3780
|
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
@@ -3780,63 +3789,88 @@
|
|
|
3780
3789
|
};
|
|
3781
3790
|
return SdEditorHandlerColumnPipe;
|
|
3782
3791
|
}());
|
|
3792
|
+
_visible = new WeakMap();
|
|
3783
3793
|
SdEditorHandlerColumnPipe.decorators = [
|
|
3784
3794
|
{ type: core.Pipe, args: [{
|
|
3785
3795
|
name: 'sdEditorHandlerColumn'
|
|
3786
3796
|
},] }
|
|
3787
3797
|
];
|
|
3788
3798
|
|
|
3799
|
+
var _previous, _delay;
|
|
3789
3800
|
var SdEditorValidatePipe = /** @class */ (function () {
|
|
3790
3801
|
function SdEditorValidatePipe() {
|
|
3791
|
-
this
|
|
3802
|
+
_previous.set(this, void 0);
|
|
3803
|
+
_delay.set(this, 1000); // Sau khoảng thời gian delay nếu không có thay đổi thì thì mới bắt đầu thực hiện validate
|
|
3792
3804
|
}
|
|
3793
|
-
SdEditorValidatePipe.prototype.transform = function (
|
|
3794
|
-
var _a;
|
|
3805
|
+
SdEditorValidatePipe.prototype.transform = function (sdId, item, gridOption) {
|
|
3795
3806
|
return __awaiter(this, void 0, void 0, function () {
|
|
3796
|
-
var editor,
|
|
3797
|
-
|
|
3798
|
-
|
|
3799
|
-
switch (_c.label) {
|
|
3807
|
+
var editor, result, _a;
|
|
3808
|
+
return __generator(this, function (_b) {
|
|
3809
|
+
switch (_b.label) {
|
|
3800
3810
|
case 0:
|
|
3801
3811
|
editor = gridOption.editor;
|
|
3802
|
-
if (!((_a = item.editorHandlerRow) === null || _a === void 0 ? void 0 : _a.visible)) {
|
|
3803
|
-
return [2 /*return*/, true];
|
|
3804
|
-
}
|
|
3805
3812
|
if (!editor.validate) {
|
|
3806
|
-
item.
|
|
3807
|
-
return [2 /*return
|
|
3808
|
-
}
|
|
3809
|
-
this.previous = new Date();
|
|
3810
|
-
return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, _this.delay); })];
|
|
3811
|
-
case 1:
|
|
3812
|
-
_c.sent();
|
|
3813
|
-
now = new Date();
|
|
3814
|
-
dif = now.getTime() - this.previous.getTime();
|
|
3815
|
-
if (dif < this.delay) {
|
|
3816
|
-
return [2 /*return*/, true];
|
|
3813
|
+
item.editorErrorMessage = null;
|
|
3814
|
+
return [2 /*return*/];
|
|
3817
3815
|
}
|
|
3818
3816
|
result = editor.validate(item);
|
|
3819
|
-
if (!(result instanceof Promise)) return [3 /*break*/,
|
|
3820
|
-
|
|
3817
|
+
if (!(result instanceof Promise)) return [3 /*break*/, 2];
|
|
3818
|
+
_a = item;
|
|
3821
3819
|
return [4 /*yield*/, result];
|
|
3820
|
+
case 1:
|
|
3821
|
+
_a.editorErrorMessage = _b.sent();
|
|
3822
|
+
return [2 /*return*/];
|
|
3822
3823
|
case 2:
|
|
3823
|
-
|
|
3824
|
-
return [2 /*return
|
|
3825
|
-
case 3:
|
|
3826
|
-
item.editorHandlerRow.errorMessage = result;
|
|
3827
|
-
return [2 /*return*/, true];
|
|
3824
|
+
item.editorErrorMessage = result;
|
|
3825
|
+
return [2 /*return*/];
|
|
3828
3826
|
}
|
|
3829
3827
|
});
|
|
3830
3828
|
});
|
|
3831
3829
|
};
|
|
3832
3830
|
return SdEditorValidatePipe;
|
|
3833
3831
|
}());
|
|
3832
|
+
_previous = new WeakMap(), _delay = new WeakMap();
|
|
3834
3833
|
SdEditorValidatePipe.decorators = [
|
|
3835
3834
|
{ type: core.Pipe, args: [{
|
|
3836
3835
|
name: 'sdEditorValidate'
|
|
3837
3836
|
},] }
|
|
3838
3837
|
];
|
|
3839
3838
|
|
|
3839
|
+
var SdStyleRowCss = /** @class */ (function () {
|
|
3840
|
+
function SdStyleRowCss() {
|
|
3841
|
+
}
|
|
3842
|
+
SdStyleRowCss.prototype.transform = function (item, gridOption) {
|
|
3843
|
+
var _a, _b;
|
|
3844
|
+
return ((_b = (_a = gridOption === null || gridOption === void 0 ? void 0 : gridOption.style) === null || _a === void 0 ? void 0 : _a.rowCss) === null || _b === void 0 ? void 0 : _b.call(_a, item)) || {};
|
|
3845
|
+
};
|
|
3846
|
+
return SdStyleRowCss;
|
|
3847
|
+
}());
|
|
3848
|
+
SdStyleRowCss.decorators = [
|
|
3849
|
+
{ type: core.Pipe, args: [{
|
|
3850
|
+
name: 'sdStyleRowCss'
|
|
3851
|
+
},] }
|
|
3852
|
+
];
|
|
3853
|
+
|
|
3854
|
+
var SdDesktopEditorValidation = /** @class */ (function () {
|
|
3855
|
+
function SdDesktopEditorValidation() {
|
|
3856
|
+
}
|
|
3857
|
+
return SdDesktopEditorValidation;
|
|
3858
|
+
}());
|
|
3859
|
+
SdDesktopEditorValidation.decorators = [
|
|
3860
|
+
{ type: core.Component, args: [{
|
|
3861
|
+
selector: 'sd-desktop-editor-validation',
|
|
3862
|
+
template: "<ng-container *sdLet=\"item.sdId | sdEditorValidate:item:gridOption\">\r\n <div class=\"c-editor-validation\" [class.c-danger]=\"!!item.editorErrorMessage\" matTooltipPosition=\"after\"\r\n [matTooltip]=\"item.editorErrorMessage\">\r\n </div>\r\n</ng-container>",
|
|
3863
|
+
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
3864
|
+
styles: [":host{height:100%;left:0;position:absolute;top:0}:host .c-editor-validation{height:100%;max-width:4px;min-width:4px;width:4px}:host .c-danger{background-color:#f82c13}"]
|
|
3865
|
+
},] }
|
|
3866
|
+
];
|
|
3867
|
+
SdDesktopEditorValidation.ctorParameters = function () { return []; };
|
|
3868
|
+
SdDesktopEditorValidation.propDecorators = {
|
|
3869
|
+
sdId: [{ type: core.Input }],
|
|
3870
|
+
item: [{ type: core.Input }],
|
|
3871
|
+
gridOption: [{ type: core.Input }]
|
|
3872
|
+
};
|
|
3873
|
+
|
|
3840
3874
|
var MatPaginatorIntlCro = /** @class */ (function (_super) {
|
|
3841
3875
|
__extends(MatPaginatorIntlCro, _super);
|
|
3842
3876
|
function MatPaginatorIntlCro() {
|
|
@@ -3892,11 +3926,13 @@
|
|
|
3892
3926
|
dragDrop.DragDropModule,
|
|
3893
3927
|
form.SdFormModule,
|
|
3894
3928
|
service.SdServiceModule,
|
|
3895
|
-
slider.MatSliderModule
|
|
3929
|
+
slider.MatSliderModule,
|
|
3930
|
+
scrolling.ScrollingModule
|
|
3896
3931
|
],
|
|
3897
3932
|
declarations: [
|
|
3898
3933
|
SdDesktopCell,
|
|
3899
3934
|
SdDesktopCellEditor,
|
|
3935
|
+
SdDesktopEditorValidation,
|
|
3900
3936
|
SdDesktopCellView,
|
|
3901
3937
|
SdDesktopCellChildrenView,
|
|
3902
3938
|
SdDesktopCommand,
|
|
@@ -3932,7 +3968,8 @@
|
|
|
3932
3968
|
SdSelectionDisableSelectAllPipe,
|
|
3933
3969
|
SdEditorHandlerRowPipe,
|
|
3934
3970
|
SdEditorHandlerColumnPipe,
|
|
3935
|
-
SdEditorValidatePipe
|
|
3971
|
+
SdEditorValidatePipe,
|
|
3972
|
+
SdStyleRowCss
|
|
3936
3973
|
],
|
|
3937
3974
|
exports: [
|
|
3938
3975
|
SdGridMaterial,
|
|
@@ -3974,18 +4011,20 @@
|
|
|
3974
4011
|
exports.SdMaterialSubInformationDefDirective = SdMaterialSubInformationDefDirective;
|
|
3975
4012
|
exports.ɵa = MatPaginatorIntlCro;
|
|
3976
4013
|
exports.ɵb = SdGridFilter;
|
|
3977
|
-
exports.ɵba =
|
|
3978
|
-
exports.ɵbb =
|
|
3979
|
-
exports.ɵbc =
|
|
3980
|
-
exports.ɵbd =
|
|
3981
|
-
exports.ɵbe =
|
|
3982
|
-
exports.ɵbf =
|
|
3983
|
-
exports.ɵbg =
|
|
3984
|
-
exports.ɵbh =
|
|
3985
|
-
exports.ɵbi =
|
|
3986
|
-
exports.ɵbj =
|
|
3987
|
-
exports.ɵbk =
|
|
3988
|
-
exports.ɵbl =
|
|
4014
|
+
exports.ɵba = SdColumnValuesPipe;
|
|
4015
|
+
exports.ɵbb = SdColumnHtmlTemplatePipe;
|
|
4016
|
+
exports.ɵbc = SdColumnTransformPipe;
|
|
4017
|
+
exports.ɵbd = SdColumnTooltipPipe;
|
|
4018
|
+
exports.ɵbe = SdColumnBadgePipe;
|
|
4019
|
+
exports.ɵbf = SdFilterColumnPipe;
|
|
4020
|
+
exports.ɵbg = SdFilterExternalPipe;
|
|
4021
|
+
exports.ɵbh = SdSelectionActionFilterPipe;
|
|
4022
|
+
exports.ɵbi = SdSelectionDisablePipe;
|
|
4023
|
+
exports.ɵbj = SdSelectionDisableSelectAllPipe;
|
|
4024
|
+
exports.ɵbk = SdEditorHandlerRowPipe;
|
|
4025
|
+
exports.ɵbl = SdEditorHandlerColumnPipe;
|
|
4026
|
+
exports.ɵbm = SdEditorValidatePipe;
|
|
4027
|
+
exports.ɵbn = SdStyleRowCss;
|
|
3989
4028
|
exports.ɵc = SdPopupFilter;
|
|
3990
4029
|
exports.ɵd = SdGridFilterService;
|
|
3991
4030
|
exports.ɵe = SdPopupExport;
|
|
@@ -3994,21 +4033,21 @@
|
|
|
3994
4033
|
exports.ɵi = SdGridService;
|
|
3995
4034
|
exports.ɵj = SdDesktopCell;
|
|
3996
4035
|
exports.ɵk = SdDesktopCellEditor;
|
|
3997
|
-
exports.ɵl =
|
|
3998
|
-
exports.ɵm =
|
|
3999
|
-
exports.ɵn =
|
|
4000
|
-
exports.ɵo =
|
|
4001
|
-
exports.ɵp =
|
|
4002
|
-
exports.ɵq =
|
|
4003
|
-
exports.ɵr =
|
|
4004
|
-
exports.ɵs =
|
|
4005
|
-
exports.ɵt =
|
|
4006
|
-
exports.ɵu =
|
|
4007
|
-
exports.ɵv =
|
|
4008
|
-
exports.ɵw =
|
|
4009
|
-
exports.ɵx =
|
|
4010
|
-
exports.ɵy =
|
|
4011
|
-
exports.ɵz =
|
|
4036
|
+
exports.ɵl = SdDesktopEditorValidation;
|
|
4037
|
+
exports.ɵm = SdDesktopCellView;
|
|
4038
|
+
exports.ɵn = SdDesktopCellChildrenView;
|
|
4039
|
+
exports.ɵo = SdDesktopCommand;
|
|
4040
|
+
exports.ɵp = SdLetDirective;
|
|
4041
|
+
exports.ɵq = SdPopupGridConfiguration;
|
|
4042
|
+
exports.ɵr = SdDynamicColumn;
|
|
4043
|
+
exports.ɵs = SdGeneratedColumnService;
|
|
4044
|
+
exports.ɵt = SdGridConfigurationResultPipe;
|
|
4045
|
+
exports.ɵu = SdColumnChildrenFilterPipe;
|
|
4046
|
+
exports.ɵv = SdColumnTitlePipe;
|
|
4047
|
+
exports.ɵw = SdCommandFilterPipe;
|
|
4048
|
+
exports.ɵx = SdCommandDisablePipe;
|
|
4049
|
+
exports.ɵy = SdCommandIconPipe;
|
|
4050
|
+
exports.ɵz = SdCommandTitlePipe;
|
|
4012
4051
|
|
|
4013
4052
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4014
4053
|
|