@sd-angular/core 0.0.904 → 0.0.905

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/bundles/sd-angular-core-grid-material.umd.js +195 -58
  2. package/bundles/sd-angular-core-grid-material.umd.js.map +1 -1
  3. package/bundles/sd-angular-core-grid-material.umd.min.js +2 -2
  4. package/bundles/sd-angular-core-grid-material.umd.min.js.map +1 -1
  5. package/bundles/sd-angular-core-setting.umd.js +2 -2
  6. package/bundles/sd-angular-core-setting.umd.js.map +1 -1
  7. package/bundles/sd-angular-core-setting.umd.min.js +1 -1
  8. package/bundles/sd-angular-core-setting.umd.min.js.map +1 -1
  9. package/esm2015/grid-material/sd-angular-core-grid-material.js +20 -18
  10. package/esm2015/grid-material/src/lib/components/desktop-cell-view/desktop-cell-view.component.js +2 -2
  11. package/esm2015/grid-material/src/lib/components/dynamic-column/dynamic-column.component.js +98 -0
  12. package/esm2015/grid-material/src/lib/components/popup-grid-configuration/popup-grid-configuration.component.js +2 -2
  13. package/esm2015/grid-material/src/lib/grid-material.component.js +1 -2
  14. package/esm2015/grid-material/src/lib/grid-material.module.js +5 -1
  15. package/esm2015/grid-material/src/lib/models/grid-config.model.js +1 -1
  16. package/esm2015/grid-material/src/lib/pipes/column-badge.pipe.js +4 -1
  17. package/esm2015/grid-material/src/lib/pipes/column-transform.pipe.js +1 -1
  18. package/esm2015/grid-material/src/lib/services/generated-column/generated-column.model.js +2 -0
  19. package/esm2015/grid-material/src/lib/services/generated-column/generated-column.service.js +57 -0
  20. package/esm2015/grid-material/src/lib/services/grid-configuration.service.js +13 -18
  21. package/esm2015/setting/src/lib/setting.model.js +1 -1
  22. package/esm2015/setting/src/lib/setting.service.js +5 -5
  23. package/fesm2015/sd-angular-core-grid-material.js +171 -31
  24. package/fesm2015/sd-angular-core-grid-material.js.map +1 -1
  25. package/fesm2015/sd-angular-core-setting.js +4 -4
  26. package/fesm2015/sd-angular-core-setting.js.map +1 -1
  27. package/grid-material/sd-angular-core-grid-material.d.ts +19 -17
  28. package/grid-material/sd-angular-core-grid-material.metadata.json +1 -1
  29. package/grid-material/src/lib/components/dynamic-column/dynamic-column.component.d.ts +32 -0
  30. package/grid-material/src/lib/models/grid-config.model.d.ts +11 -1
  31. package/grid-material/src/lib/services/generated-column/generated-column.model.d.ts +8 -0
  32. package/grid-material/src/lib/services/generated-column/generated-column.service.d.ts +10 -0
  33. package/package.json +1 -1
  34. package/{sd-angular-core-0.0.904.tgz → sd-angular-core-0.0.905.tgz} +0 -0
  35. package/setting/src/lib/setting.model.d.ts +2 -2
@@ -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('@sd-angular/core/notify'), require('@angular/cdk/drag-drop'), require('rxjs/operators'), require('object-hash'), 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')) :
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', '@sd-angular/core/notify', '@angular/cdk/drag-drop', 'rxjs/operators', 'object-hash', '@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'], 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['sd-angular'].core.notify, global.ng.cdk.dragDrop, global.rxjs.operators, global.hash, 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));
5
- }(this, (function (exports, core, paginator, sort, animations, uuid, rxjs, notify, dragDrop, operators, hash, 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) { '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('@sd-angular/core/notify'), require('@angular/cdk/drag-drop'), require('rxjs/operators'), require('object-hash'), 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', '@sd-angular/core/notify', '@angular/cdk/drag-drop', 'rxjs/operators', 'object-hash', '@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['sd-angular'].core.notify, global.ng.cdk.dragDrop, global.rxjs.operators, global.hash, 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, notify, dragDrop, operators, hash, 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';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
@@ -1214,7 +1214,7 @@
1214
1214
  _gridOption: [{ type: core.Input, args: ['gridOption',] }]
1215
1215
  };
1216
1216
 
1217
- var _COLUMNS, _cache, _getKey, _default, _load, _get, _set, _remove;
1217
+ var _COLUMNS, _cache, _getKey, _default, _get, _set, _remove;
1218
1218
  var SdGridConfigurationService = /** @class */ (function () {
1219
1219
  function SdGridConfigurationService(settingService, gridMaterialConfiguration) {
1220
1220
  var _this = this;
@@ -1229,19 +1229,20 @@
1229
1229
  this.init = function (key, gridOption) {
1230
1230
  if (!__classPrivateFieldGet(_this, _cache)[key]) {
1231
1231
  var subject_1 = new rxjs.Subject();
1232
+ var get = __classPrivateFieldGet(_this, _get).call(_this, gridOption);
1233
+ var set = function (configuration) {
1234
+ configuration = __classPrivateFieldGet(_this, _set).call(_this, gridOption, configuration);
1235
+ subject_1.next(Object.assign({}, configuration));
1236
+ return configuration;
1237
+ };
1232
1238
  __classPrivateFieldGet(_this, _cache)[key] = {
1233
- load: __classPrivateFieldGet(_this, _load).call(_this, gridOption, subject_1),
1234
- get: __classPrivateFieldGet(_this, _get).call(_this, gridOption),
1235
- set: function (configuration) {
1236
- configuration = __classPrivateFieldGet(_this, _set).call(_this, gridOption, configuration);
1237
- subject_1.next(Object.assign({}, configuration));
1238
- return configuration;
1239
- },
1239
+ get: get,
1240
+ set: set,
1240
1241
  remove: function () {
1241
1242
  __classPrivateFieldGet(_this, _remove).call(_this, gridOption);
1242
1243
  subject_1.next(__classPrivateFieldGet(_this, _default).call(_this, gridOption));
1243
1244
  },
1244
- observer: subject_1
1245
+ observer: subject_1.pipe(operators.switchMap(__classPrivateFieldGet(_this, _get).call(_this, gridOption)))
1245
1246
  };
1246
1247
  }
1247
1248
  return __classPrivateFieldGet(_this, _cache)[key];
@@ -1273,22 +1274,6 @@
1273
1274
  columns: columns
1274
1275
  };
1275
1276
  });
1276
- _load.set(this, function (gridOption, subject) {
1277
- return function () { return __awaiter(_this, void 0, void 0, function () {
1278
- var get, configuration;
1279
- return __generator(this, function (_d) {
1280
- switch (_d.label) {
1281
- case 0:
1282
- get = __classPrivateFieldGet(this, _get).call(this, gridOption);
1283
- return [4 /*yield*/, get()];
1284
- case 1:
1285
- configuration = _d.sent();
1286
- subject.next(Object.assign({}, configuration));
1287
- return [2 /*return*/];
1288
- }
1289
- });
1290
- }); };
1291
- });
1292
1277
  _get.set(this, function (gridOption) {
1293
1278
  return function () { return __awaiter(_this, void 0, void 0, function () {
1294
1279
  var key, columns, config, _d, get, remove, configuration;
@@ -1578,7 +1563,7 @@
1578
1563
  }
1579
1564
  return SdGridConfigurationService;
1580
1565
  }());
1581
- _COLUMNS = new WeakMap(), _cache = new WeakMap(), _getKey = new WeakMap(), _default = new WeakMap(), _load = new WeakMap(), _get = new WeakMap(), _set = new WeakMap(), _remove = new WeakMap();
1566
+ _COLUMNS = new WeakMap(), _cache = new WeakMap(), _getKey = new WeakMap(), _default = new WeakMap(), _get = new WeakMap(), _set = new WeakMap(), _remove = new WeakMap();
1582
1567
  SdGridConfigurationService.decorators = [
1583
1568
  { type: core.Injectable }
1584
1569
  ];
@@ -1652,7 +1637,7 @@
1652
1637
  { type: utility.SdUtilityService }
1653
1638
  ]; };
1654
1639
 
1655
- var _paginator, _sort, _subscription$1, _optionChanges, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration, _filterLocal, _getFilter, _load$1, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _updateSelectedItems;
1640
+ var _paginator, _sort, _subscription$1, _optionChanges, _initCellDef, _initFilterDef, _initFooterDef, _filterExportInfo, _initConfiguration, _filterLocal, _getFilter, _load, _render, _exportedItems, _allColumns, _allExportedColumns, _onExport, _updateSelectedItems;
1656
1641
  var SdGridMaterial = /** @class */ (function () {
1657
1642
  function SdGridMaterial(ref, configuration, gridConfigurationService, exportService, notifyService, translateService, gridService) {
1658
1643
  var _this = this;
@@ -1895,7 +1880,7 @@
1895
1880
  pageSize: ((_j = __classPrivateFieldGet(_this, _paginator)) === null || _j === void 0 ? void 0 : _j.pageSize) || ((_l = (_k = _this.gridOption) === null || _k === void 0 ? void 0 : _k.paginate) === null || _l === void 0 ? void 0 : _l.pageSize) || 50
1896
1881
  });
1897
1882
  });
1898
- _load$1.set(this, function (filterReq) { return __awaiter(_this, void 0, void 0, function () {
1883
+ _load.set(this, function (filterReq) { return __awaiter(_this, void 0, void 0, function () {
1899
1884
  var result, results, _t, error_1;
1900
1885
  return __generator(this, function (_u) {
1901
1886
  switch (_u.label) {
@@ -1958,7 +1943,7 @@
1958
1943
  var data;
1959
1944
  return __generator(this, function (_t) {
1960
1945
  switch (_t.label) {
1961
- case 0: return [4 /*yield*/, __classPrivateFieldGet(this, _load$1).call(this, __classPrivateFieldGet(this, _getFilter).call(this))];
1946
+ case 0: return [4 /*yield*/, __classPrivateFieldGet(this, _load).call(this, __classPrivateFieldGet(this, _getFilter).call(this))];
1962
1947
  case 1:
1963
1948
  data = _t.sent();
1964
1949
  __classPrivateFieldGet(this, _render).call(this, data);
@@ -2368,7 +2353,7 @@
2368
2353
  __classPrivateFieldGet(this, _subscription$1).add(gridFilter.filterChange.pipe(operators.debounceTime(200), operators.map(function () {
2369
2354
  __classPrivateFieldGet(_this, _paginator).pageIndex = 0;
2370
2355
  return __classPrivateFieldGet(_this, _getFilter).call(_this);
2371
- }), operators.switchMap(__classPrivateFieldGet(this, _load$1))).subscribe(__classPrivateFieldGet(this, _render)));
2356
+ }), operators.switchMap(__classPrivateFieldGet(this, _load))).subscribe(__classPrivateFieldGet(this, _render)));
2372
2357
  }
2373
2358
  },
2374
2359
  enumerable: false,
@@ -2390,7 +2375,6 @@
2390
2375
  });
2391
2376
  var configuration = this.gridConfigurationService.init(this.key, this.gridOption);
2392
2377
  this.gridConfigurationObserver = configuration.observer;
2393
- configuration.load();
2394
2378
  }
2395
2379
  },
2396
2380
  enumerable: false,
@@ -2400,7 +2384,7 @@
2400
2384
  set: function (paginator) {
2401
2385
  if (paginator && __classPrivateFieldGet(this, _paginator) !== paginator) {
2402
2386
  __classPrivateFieldSet(this, _paginator, paginator);
2403
- __classPrivateFieldGet(this, _subscription$1).add(paginator.page.pipe(operators.debounceTime(200), operators.map(__classPrivateFieldGet(this, _getFilter)), operators.switchMap(__classPrivateFieldGet(this, _load$1))).subscribe(__classPrivateFieldGet(this, _render)));
2387
+ __classPrivateFieldGet(this, _subscription$1).add(paginator.page.pipe(operators.debounceTime(200), operators.map(__classPrivateFieldGet(this, _getFilter)), operators.switchMap(__classPrivateFieldGet(this, _load))).subscribe(__classPrivateFieldGet(this, _render)));
2404
2388
  }
2405
2389
  },
2406
2390
  enumerable: false,
@@ -2410,7 +2394,7 @@
2410
2394
  set: function (sort) {
2411
2395
  if (sort && __classPrivateFieldGet(this, _sort) !== sort) {
2412
2396
  __classPrivateFieldSet(this, _sort, sort);
2413
- __classPrivateFieldGet(this, _subscription$1).add(sort.sortChange.pipe(operators.debounceTime(200), operators.map(__classPrivateFieldGet(this, _getFilter)), operators.switchMap(__classPrivateFieldGet(this, _load$1))).subscribe(__classPrivateFieldGet(this, _render)));
2397
+ __classPrivateFieldGet(this, _subscription$1).add(sort.sortChange.pipe(operators.debounceTime(200), operators.map(__classPrivateFieldGet(this, _getFilter)), operators.switchMap(__classPrivateFieldGet(this, _load))).subscribe(__classPrivateFieldGet(this, _render)));
2414
2398
  }
2415
2399
  },
2416
2400
  enumerable: false,
@@ -2423,7 +2407,7 @@
2423
2407
  __classPrivateFieldGet(this, _subscription$1).add(this.sdCellDefs.changes.pipe(operators.startWith([])).subscribe(__classPrivateFieldGet(this, _initCellDef)));
2424
2408
  __classPrivateFieldGet(this, _subscription$1).add(this.sdFooterDefs.changes.pipe(operators.startWith([])).subscribe(__classPrivateFieldGet(this, _initFooterDef)));
2425
2409
  __classPrivateFieldGet(this, _subscription$1).add(this.sdFilterDefs.changes.pipe(operators.startWith([])).subscribe(__classPrivateFieldGet(this, _initFilterDef)));
2426
- __classPrivateFieldGet(this, _subscription$1).add(__classPrivateFieldGet(this, _optionChanges).pipe(operators.startWith({}), operators.debounceTime(200), operators.map(__classPrivateFieldGet(this, _getFilter)), operators.switchMap(__classPrivateFieldGet(this, _load$1))).subscribe(__classPrivateFieldGet(this, _render)));
2410
+ __classPrivateFieldGet(this, _subscription$1).add(__classPrivateFieldGet(this, _optionChanges).pipe(operators.startWith({}), operators.debounceTime(200), operators.map(__classPrivateFieldGet(this, _getFilter)), operators.switchMap(__classPrivateFieldGet(this, _load))).subscribe(__classPrivateFieldGet(this, _render)));
2427
2411
  this.ref.detectChanges();
2428
2412
  };
2429
2413
  SdGridMaterial.prototype.ngOnDestroy = function () {
@@ -2434,7 +2418,7 @@
2434
2418
  };
2435
2419
  return SdGridMaterial;
2436
2420
  }());
2437
- _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _optionChanges = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load$1 = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _onExport = new WeakMap(), _updateSelectedItems = new WeakMap();
2421
+ _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap(), _optionChanges = new WeakMap(), _initCellDef = new WeakMap(), _initFilterDef = new WeakMap(), _initFooterDef = new WeakMap(), _filterExportInfo = new WeakMap(), _initConfiguration = new WeakMap(), _filterLocal = new WeakMap(), _getFilter = new WeakMap(), _load = new WeakMap(), _render = new WeakMap(), _exportedItems = new WeakMap(), _allColumns = new WeakMap(), _allExportedColumns = new WeakMap(), _onExport = new WeakMap(), _updateSelectedItems = new WeakMap();
2438
2422
  SdGridMaterial.decorators = [
2439
2423
  { type: core.Component, args: [{
2440
2424
  selector: 'sd-grid-material',
@@ -2721,7 +2705,7 @@
2721
2705
  SdDesktopCellView.decorators = [
2722
2706
  { type: core.Component, args: [{
2723
2707
  selector: 'sd-desktop-cell-view',
2724
- template: "<ng-container *ngIf=\"column && item\">\r\n <ng-container *ngIf=\"column.htmlTemplate;else useDefaultView\">\r\n <div (click)=\"column.click && column.click(item[column.field], item)\" style=\"overflow-wrap: break-word;\"\r\n [ngClass]=\"{'cursor-pointer':column.click}\"\r\n [innerHTML]=\"(item[column.field] | columnHtmlTemplate:item:column) | safeHtml\">\r\n </div>\r\n </ng-container>\r\n <ng-template #useDefaultView>\r\n <ng-container *sdLet=\"item[column.field] | columnBadge:item:column as badge\">\r\n <ng-container *ngIf=\"column.type === 'string'\">\r\n <ng-container *ngIf=\"!!badge\">\r\n <div *ngIf=\"!column.badgeType\" class=\"c-badge\" style=\"overflow-wrap: break-word;\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] | columnTooltip:item:column\"\r\n [class]=\"{'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n <span *ngIf=\"column.click\" class=\"pointer\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] |\r\n columnTransform:item:column}}</span>\r\n <ng-container *ngIf=\"!column.click\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n </div>\r\n <div *ngIf=\"column.badgeType === 'circle'\" style=\"min-width: 150px\"\r\n class=\"c-badge-circle d-flex align-items-center\"\r\n [class]=\"{'c-unknown': !badge, 'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n <span *ngIf=\"badge\" class=\"material-icons-round c-material-icon mr-4\">\r\n fiber_manual_record\r\n </span>\r\n <span *ngIf=\"!badge\" class=\"material-icons-outlined c-material-icon mr-4\">\r\n fiber_manual_record\r\n </span>\r\n {{item[column.field] | columnTransform:item:column}}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!badge\">\r\n <div style=\"overflow-wrap: break-word;\" [matTooltip]=\"item[column.field] | columnTooltip:item:column\">\r\n <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] | columnTransform:item:column}}</a>\r\n <ng-container *ngIf=\"!column.click\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <div *ngIf=\"column.type === 'number'\">\r\n <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] | columnTransform:item:column}}</a>\r\n <ng-container *ngIf=\"!column.click\">\r\n {{item[column.field] | columnTransform:item:column}}</ng-container>\r\n </div>\r\n <div *ngIf=\"column.type === 'date'\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy'\">\r\n {{item[column.field] | sdTimeDifferent:'dd/MM/yyyy':column.option?.timeDifferent | async}}\r\n </div>\r\n <div *ngIf=\"column.type === 'datetime'\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy HH:mm'\">\r\n {{item[column.field] | sdTimeDifferent:'dd/MM/yyyy HH:mm':column.option?.timeDifferent | async}}\r\n </div>\r\n <div *ngIf=\"column.type === 'time'\">\r\n {{item[column.field] | date:'HH:mm'}}\r\n </div>\r\n <div *ngIf=\"column.type === 'bool'\" class=\"align-middle text-center\">\r\n <ng-container *ngIf=\"!!badge\">\r\n <div *ngIf=\"!column.badgeType\" class=\"c-badge\" style=\"overflow-wrap: break-word;\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] | columnTooltip:item:column\"\r\n [class]=\"{'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n <span *ngIf=\"column.click\" class=\"pointer\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] |\r\n columnTransform:item:column}}</span>\r\n <ng-container *ngIf=\"!column.click\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n </div>\r\n <div *ngIf=\"column.badgeType === 'circle'\" style=\"min-width: 150px\"\r\n class=\"c-badge-circle d-flex align-items-center\"\r\n [class]=\"{'c-unknown': !badge, 'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n <span *ngIf=\"badge\" class=\"material-icons-round c-material-icon mr-4\">\r\n fiber_manual_record\r\n </span>\r\n <span *ngIf=\"!badge\" class=\"material-icons-outlined c-material-icon mr-4\">\r\n fiber_manual_record\r\n </span>\r\n {{item[column.field] | columnTransform:item:column}}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!badge\">\r\n <span *ngIf=\"item[column.field]\" class=\"font-weight-bold c-color-success\">{{item[column.field] | columnTransform:item:column}</span>\r\n <span *ngIf=\"!item[column.field]\" class=\"font-weight-bold c-color-danger\">{{item[column.field] | columnTransform:item:column}}</span>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"column.type === 'values'\">\r\n <ng-container *ngIf=\"item[column.field] | columnValues:column:key | async; $implicit as valueData\">\r\n <div\r\n *ngIf=\"valueData[column.option?.colorField] || valueData[column.option?.backgroundColorField]; else elseNoStatus\"\r\n class=\"c-badge\"\r\n [ngStyle]=\"{'color':valueData[column.option?.colorField], 'background-color': valueData[column.option?.backgroundColorField]}\">\r\n {{valueData[column.option?.displayField]}}\r\n </div>\r\n <ng-template #elseNoStatus>\r\n <div class=\"text-left\">\r\n {{valueData[column.option?.displayField]}}\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"column.type === 'image'\" class=\"align-middle text-center\">\r\n <img *ngIf=\"item[column.field]\" [src]=\"item[column.field] | columnTransform:item:column\"\r\n [width]=\"column.option?.width\" [height]=\"column.option?.height\" style=\"margin: 5px 0;object-fit: contain;\"\r\n (click)=\"column.click && column.click(item[column.field], item)\" [ngClass]=\"{'pointer':column.click}\">\r\n <mat-icon *ngIf=\"!item[column.field]\" class=\"c-img\" [ngClass]=\"{'pointer':column.click}\"\r\n (click)=\"column.click && column.click(item[column.field], item)\">image</mat-icon>\r\n </div>\r\n </ng-container>\r\n <sd-desktop-cell-children-view *ngIf=\"column.type === 'children'\" [key]=\"key\" [item]=\"item\" [column]=\"column\">\r\n </sd-desktop-cell-children-view>\r\n </ng-template>\r\n</ng-container>",
2708
+ template: "<ng-container *ngIf=\"column && item\">\r\n <ng-container *ngIf=\"column.htmlTemplate;else useDefaultView\">\r\n <div (click)=\"column.click && column.click(item[column.field], item)\" style=\"overflow-wrap: break-word;\"\r\n [ngClass]=\"{'cursor-pointer':column.click}\"\r\n [innerHTML]=\"(item[column.field] | columnHtmlTemplate:item:column) | safeHtml\">\r\n </div>\r\n </ng-container>\r\n <ng-template #useDefaultView>\r\n <ng-container *sdLet=\"item[column.field] | columnBadge:item:column as badge\">\r\n <ng-container *ngIf=\"column.type === 'string'\">\r\n <ng-container *ngIf=\"!!badge\">\r\n <div *ngIf=\"!column.badgeType\" class=\"c-badge\" style=\"overflow-wrap: break-word;\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] | columnTooltip:item:column\"\r\n [class]=\"{'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n <span *ngIf=\"column.click\" class=\"pointer\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] |\r\n columnTransform:item:column}}</span>\r\n <ng-container *ngIf=\"!column.click\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n </div>\r\n <div *ngIf=\"column.badgeType === 'circle'\" style=\"min-width: 150px\"\r\n class=\"c-badge-circle d-flex align-items-center\"\r\n [class]=\"{'c-unknown': !badge, 'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n <span *ngIf=\"badge\" class=\"material-icons-round c-material-icon mr-4\">\r\n fiber_manual_record\r\n </span>\r\n <span *ngIf=\"!badge\" class=\"material-icons-outlined c-material-icon mr-4\">\r\n fiber_manual_record\r\n </span>\r\n {{item[column.field] | columnTransform:item:column}}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!badge\">\r\n <div style=\"overflow-wrap: break-word;\" [matTooltip]=\"item[column.field] | columnTooltip:item:column\">\r\n <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] | columnTransform:item:column}}</a>\r\n <ng-container *ngIf=\"!column.click\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <div *ngIf=\"column.type === 'number'\">\r\n <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] | columnTransform:item:column}}</a>\r\n <ng-container *ngIf=\"!column.click\">\r\n {{item[column.field] | columnTransform:item:column}}</ng-container>\r\n </div>\r\n <div *ngIf=\"column.type === 'date'\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy'\">\r\n {{item[column.field] | sdTimeDifferent:'dd/MM/yyyy':column.option?.timeDifferent | async}}\r\n </div>\r\n <div *ngIf=\"column.type === 'datetime'\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy HH:mm'\">\r\n {{item[column.field] | sdTimeDifferent:'dd/MM/yyyy HH:mm':column.option?.timeDifferent | async}}\r\n </div>\r\n <div *ngIf=\"column.type === 'time'\">\r\n {{item[column.field] | date:'HH:mm'}}\r\n </div>\r\n <div *ngIf=\"column.type === 'bool'\" class=\"align-middle text-center\">\r\n <ng-container *ngIf=\"!!badge\">\r\n <div *ngIf=\"!column.badgeType\" class=\"c-badge\" style=\"overflow-wrap: break-word;\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] | columnTooltip:item:column\"\r\n [class]=\"{'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n <span *ngIf=\"column.click\" class=\"pointer\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] | columnTransform:item:column}}</span>\r\n <ng-container *ngIf=\"!column.click\">{{item[column.field] | columnTransform:item:column}}</ng-container>\r\n </div>\r\n <div *ngIf=\"column.badgeType === 'circle'\" style=\"min-width: 150px\"\r\n class=\"c-badge-circle d-flex align-items-center\"\r\n [class]=\"{'c-unknown': !badge, 'c-secondary': badge === 'normal', 'c-info': badge === 'info', 'c-success': badge === 'success', 'c-danger': badge === 'danger', 'c-warning': badge === 'warning'}\">\r\n <span *ngIf=\"badge\" class=\"material-icons-round c-material-icon mr-4\">\r\n fiber_manual_record\r\n </span>\r\n <span *ngIf=\"!badge\" class=\"material-icons-outlined c-material-icon mr-4\">\r\n fiber_manual_record\r\n </span>\r\n {{item[column.field] | columnTransform:item:column}}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!badge\">\r\n <span *ngIf=\"item[column.field]\" class=\"font-weight-bold c-color-success\">{{item[column.field] | columnTransform:item:column}}</span>\r\n <span *ngIf=\"!item[column.field]\" class=\"font-weight-bold c-color-danger\">{{item[column.field] | columnTransform:item:column}}</span>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"column.type === 'values'\">\r\n <ng-container *ngIf=\"item[column.field] | columnValues:column:key | async; $implicit as valueData\">\r\n <div\r\n *ngIf=\"valueData[column.option?.colorField] || valueData[column.option?.backgroundColorField]; else elseNoStatus\"\r\n class=\"c-badge\"\r\n [ngStyle]=\"{'color':valueData[column.option?.colorField], 'background-color': valueData[column.option?.backgroundColorField]}\">\r\n {{valueData[column.option?.displayField]}}\r\n </div>\r\n <ng-template #elseNoStatus>\r\n <div class=\"text-left\">\r\n {{valueData[column.option?.displayField]}}\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"column.type === 'image'\" class=\"align-middle text-center\">\r\n <img *ngIf=\"item[column.field]\" [src]=\"item[column.field] | columnTransform:item:column\"\r\n [width]=\"column.option?.width\" [height]=\"column.option?.height\" style=\"margin: 5px 0;object-fit: contain;\"\r\n (click)=\"column.click && column.click(item[column.field], item)\" [ngClass]=\"{'pointer':column.click}\">\r\n <mat-icon *ngIf=\"!item[column.field]\" class=\"c-img\" [ngClass]=\"{'pointer':column.click}\"\r\n (click)=\"column.click && column.click(item[column.field], item)\">image</mat-icon>\r\n </div>\r\n </ng-container>\r\n <sd-desktop-cell-children-view *ngIf=\"column.type === 'children'\" [key]=\"key\" [item]=\"item\" [column]=\"column\">\r\n </sd-desktop-cell-children-view>\r\n </ng-template>\r\n</ng-container>",
2725
2709
  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}"]
2726
2710
  },] }
2727
2711
  ];
@@ -2953,6 +2937,9 @@
2953
2937
  if (column.type === 'string' && (column === null || column === void 0 ? void 0 : column.badge)) {
2954
2938
  return column.badge(value, rowData);
2955
2939
  }
2940
+ if (column.type === 'bool' && (column === null || column === void 0 ? void 0 : column.badge)) {
2941
+ return column.badge(value, rowData);
2942
+ }
2956
2943
  return null;
2957
2944
  };
2958
2945
  return SdColumnBadgePipe;
@@ -3113,7 +3100,7 @@
3113
3100
  SdPopupGridConfiguration.decorators = [
3114
3101
  { type: core.Component, args: [{
3115
3102
  selector: 'sd-popup-grid-configuration',
3116
- template: "<sd-modal width=\"sm\" [title]=\"'Configuration' | sdTranslate\" #modal>\r\n <sd-modal-body *ngIf=\"configuration\">\r\n <div *ngIf=\"!isCreatingColumn\" class=\"c-container\">\r\n <div class=\"c-table\" style=\"max-height:70vh\">\r\n <table #table mat-table [dataSource]=\"configuration.columns\"\r\n cdkDropList\r\n [cdkDropListData]=\"configuration.columns\"\r\n (cdkDropListDropped)=\"dropTable($event)\">\r\n >\r\n <ng-container matColumnDef=\"stt\">\r\n <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:50px\">#\r\n </th>\r\n <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n <div class=\"c-handle\" (mousedown) = \"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n </svg>\r\n </div>\r\n\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"title\">\r\n <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{'Title' | sdTranslate}}\r\n </th>\r\n <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n <sd-input [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" disableErrorMessage></sd-input>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"width\">\r\n <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width:80px\">{{'Width' | sdTranslate}}\r\n </th>\r\n <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n <!-- <span>{{item.width}}</span>\r\n <mat-slider\r\n step=\"1\"\r\n min=\"0\"\r\n [max]=\"+item?.origin?.width*3\"\r\n [(ngModel)]=\"+item.width\"\r\n aria-label=\"units\">\r\n </mat-slider> -->\r\n <sd-input [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" disableErrorMessage></sd-input>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"invisible\">\r\n <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:80px\">{{'Hidden' |\r\n sdTranslate}}\r\n </th>\r\n <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item;\">\r\n <mat-slide-toggle [(ngModel)]=\"item.invisible\" color=\"primary\">\r\n </mat-slide-toggle>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"fixed\">\r\n <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:80px\">{{'Freeze' |\r\n sdTranslate}}\r\n </th>\r\n <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item;\">\r\n <mat-slide-toggle [(ngModel)]=\"item.fixed\" color=\"primary\"></mat-slide-toggle>\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"['stt', 'title', 'width', 'invisible', 'fixed']; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['stt', 'title', 'width', 'invisible', 'fixed'];\" cdkDrag [cdkDragData]=\"row\" cdkDragLockAxis=\"y\" [cdkDragDisabled] = \"disabledDrag\"></tr>\r\n </table>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCreatingColumn\">\r\n <div class=\"c-table\" style=\"max-height:50vh\">\r\n <table mat-table [dataSource]=\"configuration.columns\">\r\n <ng-container matColumnDef=\"stt\">\r\n <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:50px\">#\r\n </th>\r\n <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n <sd-checkbox *ngIf=\"isCreatingColumn\" [(model)]=\"selected[item.origin?.field]\"></sd-checkbox>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"title\">\r\n <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{'Title' | sdTranslate}}\r\n </th>\r\n <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n <span *ngIf=\"isCreatingColumn\">{{item.title || item?.origin?.title}}</span>\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"['stt', 'title']; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['stt', 'title'];\"></tr>\r\n </table>\r\n </div>\r\n </div>\r\n </sd-modal-body>\r\n <sd-modal-footer>\r\n <ng-container *ngIf=\"!isCreatingColumn\">\r\n <sd-button class=\"mr-auto\" (action)=\"createColumn()\" [title]=\"'Create column' | sdTranslate\" color=\"info\"\r\n size=\"sm\">\r\n </sd-button>\r\n <sd-button class=\"mr-5\" (action)=\"onReset()\" [title]=\"'Default' | sdTranslate\" color=\"info\" size=\"sm\">\r\n </sd-button>\r\n <sd-button (action)=\"onSave()\" [title]=\"'Save' | sdTranslate\" type=\"fill\" color=\"info\" size=\"sm\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-container *ngIf=\"isCreatingColumn\">\r\n <sd-button class=\"mr-auto\" (action)=\"isCreatingColumn = false\" [title]=\"'Cancel' | sdTranslate\" color=\"info\"\r\n size=\"sm\">\r\n </sd-button>\r\n <sd-button (action)=\"confirm()\" [title]=\"'Confirm' | sdTranslate\" type=\"fill\" color=\"info\" size=\"sm\">\r\n </sd-button>\r\n </ng-container>\r\n </sd-modal-footer>\r\n</sd-modal>",
3103
+ template: "<sd-modal width=\"sm\" [title]=\"'Configuration' | sdTranslate\" #modal>\r\n <sd-modal-body *ngIf=\"configuration\">\r\n <div *ngIf=\"!isCreatingColumn\" class=\"c-container\">\r\n <div class=\"c-table\" style=\"max-height:70vh\">\r\n <table #table mat-table [dataSource]=\"configuration.columns\"\r\n cdkDropList\r\n [cdkDropListData]=\"configuration.columns\"\r\n (cdkDropListDropped)=\"dropTable($event)\">\r\n >\r\n <ng-container matColumnDef=\"stt\">\r\n <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:50px\">#\r\n </th>\r\n <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n <div class=\"c-handle\" (mousedown) = \"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n </svg>\r\n </div>\r\n\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"title\">\r\n <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{'Title' | sdTranslate}}\r\n </th>\r\n <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n <sd-input [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" disableErrorMessage></sd-input>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"width\">\r\n <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width:80px\">{{'Width' | sdTranslate}}\r\n </th>\r\n <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n <!-- <span>{{item.width}}</span>\r\n <mat-slider\r\n step=\"1\"\r\n min=\"0\"\r\n [max]=\"+item?.origin?.width*3\"\r\n [(ngModel)]=\"+item.width\"\r\n aria-label=\"units\">\r\n </mat-slider> -->\r\n <sd-input [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" disableErrorMessage></sd-input>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"invisible\">\r\n <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:80px\">{{'Hidden' |\r\n sdTranslate}}\r\n </th>\r\n <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item;\">\r\n <mat-slide-toggle [(ngModel)]=\"item.invisible\" color=\"primary\">\r\n </mat-slide-toggle>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"fixed\">\r\n <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:80px\">{{'Freeze' |\r\n sdTranslate}}\r\n </th>\r\n <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item;\">\r\n <mat-slide-toggle [(ngModel)]=\"item.fixed\" color=\"primary\"></mat-slide-toggle>\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"['stt', 'title', 'width', 'invisible', 'fixed']; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['stt', 'title', 'width', 'invisible', 'fixed'];\" cdkDrag [cdkDragData]=\"row\" cdkDragLockAxis=\"y\" [cdkDragDisabled] = \"disabledDrag\"></tr>\r\n </table>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCreatingColumn\">\r\n <div class=\"c-table\" style=\"max-height:50vh\">\r\n <table mat-table [dataSource]=\"configuration.columns\">\r\n <ng-container matColumnDef=\"stt\">\r\n <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:50px\">#\r\n </th>\r\n <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n <sd-checkbox *ngIf=\"isCreatingColumn\" [(model)]=\"selected[item.origin?.field]\"></sd-checkbox>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"title\">\r\n <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{'Title' | sdTranslate}}\r\n </th>\r\n <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n <span *ngIf=\"isCreatingColumn\">{{item.title || item?.origin?.title}}</span>\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"['stt', 'title']; sticky: true\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['stt', 'title'];\"></tr>\r\n </table>\r\n </div>\r\n </div>\r\n </sd-modal-body>\r\n <sd-modal-footer>\r\n <ng-container *ngIf=\"!isCreatingColumn\">\r\n <!-- <sd-button class=\"mr-auto\" (action)=\"createColumn()\" [title]=\"'Create column' | sdTranslate\" color=\"info\"\r\n size=\"sm\">\r\n </sd-button> -->\r\n <sd-button class=\"mr-5\" (action)=\"onReset()\" [title]=\"'Default' | sdTranslate\" color=\"info\" size=\"sm\">\r\n </sd-button>\r\n <sd-button (action)=\"onSave()\" [title]=\"'Save' | sdTranslate\" type=\"fill\" color=\"info\" size=\"sm\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-container *ngIf=\"isCreatingColumn\">\r\n <sd-button class=\"mr-auto\" (action)=\"isCreatingColumn = false\" [title]=\"'Cancel' | sdTranslate\" color=\"info\"\r\n size=\"sm\">\r\n </sd-button>\r\n <sd-button (action)=\"confirm()\" [title]=\"'Confirm' | sdTranslate\" type=\"fill\" color=\"info\" size=\"sm\">\r\n </sd-button>\r\n </ng-container>\r\n </sd-modal-footer>\r\n</sd-modal>",
3117
3104
  styles: [".c-table{overflow:auto;position:relative}.c-table table{width:100%}.c-table .c-th{color:#000;font-size:14px;font-weight:500;line-height:20px}.c-container{min-height:200px;position:relative}.c-handle{color:#ccc;cursor:move}"]
3118
3105
  },] }
3119
3106
  ];
@@ -3307,6 +3294,152 @@
3307
3294
  },] }
3308
3295
  ];
3309
3296
 
3297
+ var _cache$3;
3298
+ var SdGeneratedColumnService = /** @class */ (function () {
3299
+ function SdGeneratedColumnService(settingService) {
3300
+ var _this = this;
3301
+ this.settingService = settingService;
3302
+ _cache$3.set(this, {});
3303
+ this.load = function (configuration) {
3304
+ if (!(configuration === null || configuration === void 0 ? void 0 : configuration.key)) {
3305
+ return null;
3306
+ }
3307
+ var key = hash__default['default']({
3308
+ prefix: '260f5e94-5865-4425-8ced-b9c083c390dd',
3309
+ key: configuration.key
3310
+ });
3311
+ if (!__classPrivateFieldGet(_this, _cache$3)[key]) {
3312
+ __classPrivateFieldGet(_this, _cache$3)[key] = _this.settingService.create(key, {
3313
+ type: configuration === null || configuration === void 0 ? void 0 : configuration.storage,
3314
+ args: configuration === null || configuration === void 0 ? void 0 : configuration.args,
3315
+ default: []
3316
+ });
3317
+ }
3318
+ return __classPrivateFieldGet(_this, _cache$3)[key];
3319
+ };
3320
+ this.loadSystem = function (configuration) {
3321
+ var _a;
3322
+ if (!(configuration === null || configuration === void 0 ? void 0 : configuration.key)) {
3323
+ return null;
3324
+ }
3325
+ if (!(configuration === null || configuration === void 0 ? void 0 : configuration.systemColumn)) {
3326
+ return null;
3327
+ }
3328
+ var key = hash__default['default']({
3329
+ prefix: '8b8050ca-1f44-4860-bad3-20e646c0d68f',
3330
+ key: configuration.key
3331
+ });
3332
+ if (!__classPrivateFieldGet(_this, _cache$3)[key]) {
3333
+ __classPrivateFieldGet(_this, _cache$3)[key] = _this.settingService.create(key, {
3334
+ type: 'server',
3335
+ args: (_a = configuration === null || configuration === void 0 ? void 0 : configuration.systemColumn) === null || _a === void 0 ? void 0 : _a.args,
3336
+ default: []
3337
+ });
3338
+ }
3339
+ return __classPrivateFieldGet(_this, _cache$3)[key];
3340
+ };
3341
+ }
3342
+ return SdGeneratedColumnService;
3343
+ }());
3344
+ _cache$3 = new WeakMap();
3345
+ SdGeneratedColumnService.decorators = [
3346
+ { type: core.Injectable }
3347
+ ];
3348
+ SdGeneratedColumnService.ctorParameters = function () { return [
3349
+ { type: setting.SdSettingService }
3350
+ ]; };
3351
+
3352
+ var _subscription$2;
3353
+ var SdDynamicColumn = /** @class */ (function () {
3354
+ function SdDynamicColumn(ref, generatedColumnService, notifyService, translateService, gridConfigurationService) {
3355
+ var _this = this;
3356
+ this.ref = ref;
3357
+ this.generatedColumnService = generatedColumnService;
3358
+ this.notifyService = notifyService;
3359
+ this.translateService = translateService;
3360
+ this.gridConfigurationService = gridConfigurationService;
3361
+ _subscription$2.set(this, new rxjs.Subscription());
3362
+ this.columnTypes = ['string', 'number', 'bool', 'date', 'datetime', 'time', 'values', 'children', 'children-col'];
3363
+ this.form = new forms.FormGroup({});
3364
+ this.isDetail = false;
3365
+ this.originColumns = [];
3366
+ this.onDetail = function (column) {
3367
+ _this.detail = column || {
3368
+ field: uuid.v4(),
3369
+ title: '',
3370
+ type: 'string',
3371
+ isSystem: false,
3372
+ useTemplate: false
3373
+ };
3374
+ _this.form.markAsUntouched();
3375
+ _this.form.markAsPristine();
3376
+ _this.isDetail = true;
3377
+ };
3378
+ this.onSave = function () {
3379
+ var _a;
3380
+ var systemSetting = _this.generatedColumnService.loadSystem(_this.gridOption.config);
3381
+ var setting = _this.generatedColumnService.load((_a = _this.gridOption) === null || _a === void 0 ? void 0 : _a.config);
3382
+ if (_this.detail.isSystem) {
3383
+ if (!_this.detail.id) {
3384
+ systemSetting.set(__spread(_this.systemColumns, [Object.assign(Object.assign({}, _this.detail), { id: uuid.v4() })]));
3385
+ }
3386
+ else {
3387
+ systemSetting.set(__spread(_this.systemColumns));
3388
+ }
3389
+ }
3390
+ else {
3391
+ if (!_this.detail.id) {
3392
+ setting.set(__spread(_this.columns, [Object.assign(Object.assign({}, _this.detail), { id: uuid.v4() })]));
3393
+ }
3394
+ else {
3395
+ setting.set(__spread(_this.columns));
3396
+ }
3397
+ }
3398
+ };
3399
+ }
3400
+ SdDynamicColumn.prototype.ngOnInit = function () {
3401
+ var _this = this;
3402
+ var _a, _b, _c;
3403
+ var systemSetting = this.generatedColumnService.loadSystem(this.gridOption.config);
3404
+ var setting = this.generatedColumnService.load((_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.config);
3405
+ if (systemSetting) {
3406
+ (_b = __classPrivateFieldGet(this, _subscription$2)) === null || _b === void 0 ? void 0 : _b.add(systemSetting.observer.subscribe(function (columns) {
3407
+ _this.systemColumns = columns;
3408
+ }));
3409
+ }
3410
+ if (setting) {
3411
+ (_c = __classPrivateFieldGet(this, _subscription$2)) === null || _c === void 0 ? void 0 : _c.add(setting.observer.subscribe(function (columns) {
3412
+ _this.columns = columns;
3413
+ }));
3414
+ }
3415
+ this.originColumns = this.gridOption.columns.filter(function (e) { return e.type !== 'children' && e.type !== 'children-col'; });
3416
+ };
3417
+ SdDynamicColumn.prototype.ngOnDestroy = function () {
3418
+ __classPrivateFieldGet(this, _subscription$2).unsubscribe();
3419
+ };
3420
+ return SdDynamicColumn;
3421
+ }());
3422
+ _subscription$2 = new WeakMap();
3423
+ SdDynamicColumn.decorators = [
3424
+ { type: core.Component, args: [{
3425
+ selector: 'sd-dynamic-column',
3426
+ template: "<sd-side-drawer width=\"400px\">\r\n <div sdTitle>{{'Manage dynamic column' | sdTranslate}}</div>\r\n <ng-container sdBody>\r\n <ng-container *ngIf=\"!isDetail\">\r\n <ng-container *ngIf=\"systemColumns\">\r\n <div *ngFor=\"let column of systemColumns\" (click)=\"onDetail(column)\">\r\n {{column.title}}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"columns\">\r\n <div *ngFor=\"let column of columns\" (click)=\"onDetail(column)\">\r\n {{column.title}}\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"isDetail\">\r\n <sd-select [form]=\"form\" [label]=\"'Apply for' | sdTranslate\" [(model)]=\"detail.isSystem\"\r\n [items]=\"[{code: true, name: 'All users'},{code: false, name: 'Only me'}]\" [disabled]=\"!!detail.id\" required></sd-select>\r\n <sd-input [form]=\"form\" [label]=\"'Column field' | sdTranslate\" [(model)]=\"detail.field\" [disabled]=\"!!detail.id\"\r\n required></sd-input>\r\n <sd-input [form]=\"form\" [label]=\"'Column title' | sdTranslate\" [(model)]=\"detail.title\" required></sd-input>\r\n <sd-input [form]=\"form\" [label]=\"'Column width' | sdTranslate\" [(model)]=\"detail.width\" type=\"number\" required>\r\n <ng-template sdInputSuffix>px</ng-template>\r\n </sd-input>\r\n <sd-select [form]=\"form\" [label]=\"'Column type' | sdTranslate\" [(model)]=\"detail.type\" [items]=\"columnTypes\"\r\n [disabled]=\"!!detail.id\" required></sd-select>\r\n <sd-select *ngIf=\"detail.type === 'children' || detail.type === 'children-col'\" [form]=\"form\"\r\n [label]=\"'Column fields' | sdTranslate\" [(model)]=\"detail.fields\" [items]=\"originColumns\" valueField=\"field\"\r\n displayField=\"title\" multiple></sd-select>\r\n <sd-select [form]=\"form\" [label]=\"'Use template' | sdTranslate\" [(model)]=\"detail.useTemplate\"\r\n [items]=\"[{code: true, name: 'Yes'},{code: false, name: 'No'}]\" required></sd-select>\r\n <sd-editor *ngIf=\"detail.useTemplate\" [form]=\"form\" [label]=\"'Html template' | sdTranslate\" [(model)]=\"detail.template\">\r\n </sd-editor>\r\n </ng-container>\r\n </ng-container>\r\n <div class=\"d-flex align-items-center justify-content-end\" sdFooter>\r\n <sd-button [title]=\"'Close' | sdTranslate\" (action)=\"sideDrawer.close()\"> </sd-button>\r\n <sd-button *ngIf=\"!isDetail\" [title]=\"'Create column' | sdTranslate\" color=\"primary\" class=\"mx-8\"\r\n (action)=\"onDetail()\">\r\n </sd-button>\r\n <sd-button *ngIf=\"isDetail\" [title]=\"'Save' | sdTranslate\" color=\"success\" class=\"mx-8\" (action)=\"onSave()\">\r\n </sd-button>\r\n </div>\r\n</sd-side-drawer>",
3427
+ changeDetection: core.ChangeDetectionStrategy.OnPush,
3428
+ styles: [".c-table{overflow:auto;position:relative}.c-table table{width:100%}.c-table .c-th{color:#000;font-size:14px;font-weight:500;line-height:20px}.c-container{min-height:200px;position:relative}.c-handle{color:#ccc;cursor:move}"]
3429
+ },] }
3430
+ ];
3431
+ SdDynamicColumn.ctorParameters = function () { return [
3432
+ { type: core.ChangeDetectorRef },
3433
+ { type: SdGeneratedColumnService },
3434
+ { type: notify.SdNotifyService },
3435
+ { type: translate.SdTranslateService },
3436
+ { type: SdGridConfigurationService }
3437
+ ]; };
3438
+ SdDynamicColumn.propDecorators = {
3439
+ sideDrawer: [{ type: core.ViewChild, args: [sideDrawer.SdSideDrawer,] }],
3440
+ gridOption: [{ type: core.Input }]
3441
+ };
3442
+
3310
3443
  var MatPaginatorIntlCro = /** @class */ (function (_super) {
3311
3444
  __extends(MatPaginatorIntlCro, _super);
3312
3445
  function MatPaginatorIntlCro() {
@@ -3379,6 +3512,7 @@
3379
3512
  SdPopupGridConfiguration,
3380
3513
  SdGridFilter,
3381
3514
  SdPopupFilter,
3515
+ SdDynamicColumn,
3382
3516
  // Pipes
3383
3517
  SdGridConfigurationResultPipe,
3384
3518
  SdColumnChildrenFilterPipe,
@@ -3413,6 +3547,7 @@
3413
3547
  SdGridService,
3414
3548
  SdGridFilterService,
3415
3549
  SdGridConfigurationService,
3550
+ SdGeneratedColumnService,
3416
3551
  {
3417
3552
  provide: paginator.MatPaginatorIntl, useClass: MatPaginatorIntlCro
3418
3553
  }
@@ -3437,11 +3572,13 @@
3437
3572
  exports.SdMaterialSubInformationDefDirective = SdMaterialSubInformationDefDirective;
3438
3573
  exports.ɵa = MatPaginatorIntlCro;
3439
3574
  exports.ɵb = SdGridFilter;
3440
- exports.ɵba = SdFilterColumnPipe;
3441
- exports.ɵbb = SdFilterExternalPipe;
3442
- exports.ɵbc = SdSelectionActionFilterPipe;
3443
- exports.ɵbd = SdSelectionDisablePipe;
3444
- exports.ɵbe = SdSelectionDisableSelectAllPipe;
3575
+ exports.ɵba = SdColumnTooltipPipe;
3576
+ exports.ɵbb = SdColumnBadgePipe;
3577
+ exports.ɵbc = SdFilterColumnPipe;
3578
+ exports.ɵbd = SdFilterExternalPipe;
3579
+ exports.ɵbe = SdSelectionActionFilterPipe;
3580
+ exports.ɵbf = SdSelectionDisablePipe;
3581
+ exports.ɵbg = SdSelectionDisableSelectAllPipe;
3445
3582
  exports.ɵc = SdPopupFilter;
3446
3583
  exports.ɵd = SdGridFilterService;
3447
3584
  exports.ɵe = SdPopupExport;
@@ -3453,18 +3590,18 @@
3453
3590
  exports.ɵl = SdDesktopCommand;
3454
3591
  exports.ɵm = SdLetDirective;
3455
3592
  exports.ɵn = SdPopupGridConfiguration;
3456
- exports.ɵo = SdGridConfigurationResultPipe;
3457
- exports.ɵp = SdColumnChildrenFilterPipe;
3458
- exports.ɵq = SdColumnTitlePipe;
3459
- exports.ɵr = SdCommandFilterPipe;
3460
- exports.ɵs = SdCommandDisablePipe;
3461
- exports.ɵt = SdCommandIconPipe;
3462
- exports.ɵu = SdCommandTitlePipe;
3463
- exports.ɵv = SdColumnValuesPipe;
3464
- exports.ɵw = SdColumnHtmlTemplatePipe;
3465
- exports.ɵx = SdColumnTransformPipe;
3466
- exports.ɵy = SdColumnTooltipPipe;
3467
- exports.ɵz = SdColumnBadgePipe;
3593
+ exports.ɵo = SdDynamicColumn;
3594
+ exports.ɵp = SdGeneratedColumnService;
3595
+ exports.ɵq = SdGridConfigurationResultPipe;
3596
+ exports.ɵr = SdColumnChildrenFilterPipe;
3597
+ exports.ɵs = SdColumnTitlePipe;
3598
+ exports.ɵt = SdCommandFilterPipe;
3599
+ exports.ɵu = SdCommandDisablePipe;
3600
+ exports.ɵv = SdCommandIconPipe;
3601
+ exports.ɵw = SdCommandTitlePipe;
3602
+ exports.ɵx = SdColumnValuesPipe;
3603
+ exports.ɵy = SdColumnHtmlTemplatePipe;
3604
+ exports.ɵz = SdColumnTransformPipe;
3468
3605
 
3469
3606
  Object.defineProperty(exports, '__esModule', { value: true });
3470
3607