@sd-angular/core 0.0.903 → 0.0.907

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 (34) hide show
  1. package/bundles/sd-angular-core-grid-material.umd.js +196 -27
  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-tab-router.umd.js +33 -18
  6. package/bundles/sd-angular-core-tab-router.umd.js.map +1 -1
  7. package/bundles/sd-angular-core-tab-router.umd.min.js +2 -2
  8. package/bundles/sd-angular-core-tab-router.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 +23 -5
  13. package/esm2015/grid-material/src/lib/grid-material.component.js +1 -2
  14. package/esm2015/grid-material/src/lib/grid-material.module.js +8 -2
  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/tab-router/src/lib/components/tab-router-outlet/tab-router-outlet.component.js +30 -24
  21. package/fesm2015/sd-angular-core-grid-material.js +172 -8
  22. package/fesm2015/sd-angular-core-grid-material.js.map +1 -1
  23. package/fesm2015/sd-angular-core-tab-router.js +20 -14
  24. package/fesm2015/sd-angular-core-tab-router.js.map +1 -1
  25. package/grid-material/sd-angular-core-grid-material.d.ts +19 -17
  26. package/grid-material/sd-angular-core-grid-material.metadata.json +1 -1
  27. package/grid-material/src/lib/components/dynamic-column/dynamic-column.component.d.ts +32 -0
  28. package/grid-material/src/lib/components/popup-grid-configuration/popup-grid-configuration.component.d.ts +9 -0
  29. package/grid-material/src/lib/models/grid-config.model.d.ts +11 -0
  30. package/grid-material/src/lib/services/generated-column/generated-column.model.d.ts +8 -0
  31. package/grid-material/src/lib/services/generated-column/generated-column.service.d.ts +10 -0
  32. package/package.json +1 -1
  33. package/{sd-angular-core-0.0.903.tgz → sd-angular-core-0.0.907.tgz} +0 -0
  34. package/tab-router/src/lib/components/tab-router-outlet/tab-router-outlet.component.d.ts +7 -7
@@ -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/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/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.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, 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
 
@@ -2390,7 +2390,6 @@
2390
2390
  });
2391
2391
  var configuration = this.gridConfigurationService.init(this.key, this.gridOption);
2392
2392
  this.gridConfigurationObserver = configuration.observer;
2393
- configuration.load();
2394
2393
  }
2395
2394
  },
2396
2395
  enumerable: false,
@@ -2721,7 +2720,7 @@
2721
2720
  SdDesktopCellView.decorators = [
2722
2721
  { type: core.Component, args: [{
2723
2722
  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>",
2723
+ 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
2724
  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
2725
  },] }
2727
2726
  ];
@@ -2953,6 +2952,9 @@
2953
2952
  if (column.type === 'string' && (column === null || column === void 0 ? void 0 : column.badge)) {
2954
2953
  return column.badge(value, rowData);
2955
2954
  }
2955
+ if (column.type === 'bool' && (column === null || column === void 0 ? void 0 : column.badge)) {
2956
+ return column.badge(value, rowData);
2957
+ }
2956
2958
  return null;
2957
2959
  };
2958
2960
  return SdColumnBadgePipe;
@@ -3027,6 +3029,7 @@
3027
3029
  _cache$2.set(this, void 0);
3028
3030
  this.isCreatingColumn = false;
3029
3031
  this.selected = {};
3032
+ this.disabledDrag = true;
3030
3033
  this.open = function () { return __awaiter(_this, void 0, void 0, function () {
3031
3034
  var _b;
3032
3035
  return __generator(this, function (_c) {
@@ -3093,14 +3096,27 @@
3093
3096
  }
3094
3097
  SdPopupGridConfiguration.prototype.ngOnInit = function () {
3095
3098
  };
3099
+ SdPopupGridConfiguration.prototype.mouseUp = function (event) {
3100
+ this.disabledDrag = true;
3101
+ };
3102
+ SdPopupGridConfiguration.prototype.dropTable = function (event) {
3103
+ dragDrop.moveItemInArray(this.configuration.columns, event.previousIndex, event.currentIndex);
3104
+ this.table.renderRows();
3105
+ };
3106
+ SdPopupGridConfiguration.prototype.handleMouseDown = function () {
3107
+ this.disabledDrag = false;
3108
+ };
3109
+ SdPopupGridConfiguration.prototype.handleMouseUp = function () {
3110
+ this.disabledDrag = true;
3111
+ };
3096
3112
  return SdPopupGridConfiguration;
3097
3113
  }());
3098
3114
  _cache$2 = new WeakMap();
3099
3115
  SdPopupGridConfiguration.decorators = [
3100
3116
  { type: core.Component, args: [{
3101
3117
  selector: 'sd-popup-grid-configuration',
3102
- 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 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 <span>{{idx + 1}}</span>\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 <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'];\"></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
- 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}"]
3118
+ 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>",
3119
+ 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}"]
3104
3120
  },] }
3105
3121
  ];
3106
3122
  SdPopupGridConfiguration.ctorParameters = function () { return [
@@ -3112,7 +3128,9 @@
3112
3128
  SdPopupGridConfiguration.propDecorators = {
3113
3129
  gridOption: [{ type: core.Input }],
3114
3130
  key: [{ type: core.Input }],
3115
- modal: [{ type: core.ViewChild, args: ['modal',] }]
3131
+ modal: [{ type: core.ViewChild, args: ['modal',] }],
3132
+ table: [{ type: core.ViewChild, args: ['table',] }],
3133
+ mouseUp: [{ type: core.HostListener, args: ['window:mouseup', ['$event'],] }]
3116
3134
  };
3117
3135
 
3118
3136
  var SdColumnTooltipPipe = /** @class */ (function () {
@@ -3291,6 +3309,152 @@
3291
3309
  },] }
3292
3310
  ];
3293
3311
 
3312
+ var _cache$3;
3313
+ var SdGeneratedColumnService = /** @class */ (function () {
3314
+ function SdGeneratedColumnService(settingService) {
3315
+ var _this = this;
3316
+ this.settingService = settingService;
3317
+ _cache$3.set(this, {});
3318
+ this.load = function (configuration) {
3319
+ if (!(configuration === null || configuration === void 0 ? void 0 : configuration.key)) {
3320
+ return null;
3321
+ }
3322
+ var key = hash__default['default']({
3323
+ prefix: '260f5e94-5865-4425-8ced-b9c083c390dd',
3324
+ key: configuration.key
3325
+ });
3326
+ if (!__classPrivateFieldGet(_this, _cache$3)[key]) {
3327
+ __classPrivateFieldGet(_this, _cache$3)[key] = _this.settingService.create(key, {
3328
+ type: configuration === null || configuration === void 0 ? void 0 : configuration.storage,
3329
+ args: configuration === null || configuration === void 0 ? void 0 : configuration.args,
3330
+ default: []
3331
+ });
3332
+ }
3333
+ return __classPrivateFieldGet(_this, _cache$3)[key];
3334
+ };
3335
+ this.loadSystem = function (configuration) {
3336
+ var _a;
3337
+ if (!(configuration === null || configuration === void 0 ? void 0 : configuration.key)) {
3338
+ return null;
3339
+ }
3340
+ if (!(configuration === null || configuration === void 0 ? void 0 : configuration.systemColumn)) {
3341
+ return null;
3342
+ }
3343
+ var key = hash__default['default']({
3344
+ prefix: '8b8050ca-1f44-4860-bad3-20e646c0d68f',
3345
+ key: configuration.key
3346
+ });
3347
+ if (!__classPrivateFieldGet(_this, _cache$3)[key]) {
3348
+ __classPrivateFieldGet(_this, _cache$3)[key] = _this.settingService.create(key, {
3349
+ type: 'server',
3350
+ args: (_a = configuration === null || configuration === void 0 ? void 0 : configuration.systemColumn) === null || _a === void 0 ? void 0 : _a.args,
3351
+ default: []
3352
+ });
3353
+ }
3354
+ return __classPrivateFieldGet(_this, _cache$3)[key];
3355
+ };
3356
+ }
3357
+ return SdGeneratedColumnService;
3358
+ }());
3359
+ _cache$3 = new WeakMap();
3360
+ SdGeneratedColumnService.decorators = [
3361
+ { type: core.Injectable }
3362
+ ];
3363
+ SdGeneratedColumnService.ctorParameters = function () { return [
3364
+ { type: setting.SdSettingService }
3365
+ ]; };
3366
+
3367
+ var _subscription$2;
3368
+ var SdDynamicColumn = /** @class */ (function () {
3369
+ function SdDynamicColumn(ref, generatedColumnService, notifyService, translateService, gridConfigurationService) {
3370
+ var _this = this;
3371
+ this.ref = ref;
3372
+ this.generatedColumnService = generatedColumnService;
3373
+ this.notifyService = notifyService;
3374
+ this.translateService = translateService;
3375
+ this.gridConfigurationService = gridConfigurationService;
3376
+ _subscription$2.set(this, new rxjs.Subscription());
3377
+ this.columnTypes = ['string', 'number', 'bool', 'date', 'datetime', 'time', 'values', 'children', 'children-col'];
3378
+ this.form = new forms.FormGroup({});
3379
+ this.isDetail = false;
3380
+ this.originColumns = [];
3381
+ this.onDetail = function (column) {
3382
+ _this.detail = column || {
3383
+ field: uuid.v4(),
3384
+ title: '',
3385
+ type: 'string',
3386
+ isSystem: false,
3387
+ useTemplate: false
3388
+ };
3389
+ _this.form.markAsUntouched();
3390
+ _this.form.markAsPristine();
3391
+ _this.isDetail = true;
3392
+ };
3393
+ this.onSave = function () {
3394
+ var _a;
3395
+ var systemSetting = _this.generatedColumnService.loadSystem(_this.gridOption.config);
3396
+ var setting = _this.generatedColumnService.load((_a = _this.gridOption) === null || _a === void 0 ? void 0 : _a.config);
3397
+ if (_this.detail.isSystem) {
3398
+ if (!_this.detail.id) {
3399
+ systemSetting.set(__spread(_this.systemColumns, [Object.assign(Object.assign({}, _this.detail), { id: uuid.v4() })]));
3400
+ }
3401
+ else {
3402
+ systemSetting.set(__spread(_this.systemColumns));
3403
+ }
3404
+ }
3405
+ else {
3406
+ if (!_this.detail.id) {
3407
+ setting.set(__spread(_this.columns, [Object.assign(Object.assign({}, _this.detail), { id: uuid.v4() })]));
3408
+ }
3409
+ else {
3410
+ setting.set(__spread(_this.columns));
3411
+ }
3412
+ }
3413
+ };
3414
+ }
3415
+ SdDynamicColumn.prototype.ngOnInit = function () {
3416
+ var _this = this;
3417
+ var _a, _b, _c;
3418
+ var systemSetting = this.generatedColumnService.loadSystem(this.gridOption.config);
3419
+ var setting = this.generatedColumnService.load((_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.config);
3420
+ if (systemSetting) {
3421
+ (_b = __classPrivateFieldGet(this, _subscription$2)) === null || _b === void 0 ? void 0 : _b.add(systemSetting.observer.subscribe(function (columns) {
3422
+ _this.systemColumns = columns;
3423
+ }));
3424
+ }
3425
+ if (setting) {
3426
+ (_c = __classPrivateFieldGet(this, _subscription$2)) === null || _c === void 0 ? void 0 : _c.add(setting.observer.subscribe(function (columns) {
3427
+ _this.columns = columns;
3428
+ }));
3429
+ }
3430
+ this.originColumns = this.gridOption.columns.filter(function (e) { return e.type !== 'children' && e.type !== 'children-col'; });
3431
+ };
3432
+ SdDynamicColumn.prototype.ngOnDestroy = function () {
3433
+ __classPrivateFieldGet(this, _subscription$2).unsubscribe();
3434
+ };
3435
+ return SdDynamicColumn;
3436
+ }());
3437
+ _subscription$2 = new WeakMap();
3438
+ SdDynamicColumn.decorators = [
3439
+ { type: core.Component, args: [{
3440
+ selector: 'sd-dynamic-column',
3441
+ 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>",
3442
+ changeDetection: core.ChangeDetectionStrategy.OnPush,
3443
+ 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}"]
3444
+ },] }
3445
+ ];
3446
+ SdDynamicColumn.ctorParameters = function () { return [
3447
+ { type: core.ChangeDetectorRef },
3448
+ { type: SdGeneratedColumnService },
3449
+ { type: notify.SdNotifyService },
3450
+ { type: translate.SdTranslateService },
3451
+ { type: SdGridConfigurationService }
3452
+ ]; };
3453
+ SdDynamicColumn.propDecorators = {
3454
+ sideDrawer: [{ type: core.ViewChild, args: [sideDrawer.SdSideDrawer,] }],
3455
+ gridOption: [{ type: core.Input }]
3456
+ };
3457
+
3294
3458
  var MatPaginatorIntlCro = /** @class */ (function (_super) {
3295
3459
  __extends(MatPaginatorIntlCro, _super);
3296
3460
  function MatPaginatorIntlCro() {
@@ -3345,7 +3509,8 @@
3345
3509
  table$1.CdkTableModule,
3346
3510
  dragDrop.DragDropModule,
3347
3511
  form.SdFormModule,
3348
- service.SdServiceModule
3512
+ service.SdServiceModule,
3513
+ slider.MatSliderModule
3349
3514
  ],
3350
3515
  declarations: [
3351
3516
  SdDesktopCellView,
@@ -3362,6 +3527,7 @@
3362
3527
  SdPopupGridConfiguration,
3363
3528
  SdGridFilter,
3364
3529
  SdPopupFilter,
3530
+ SdDynamicColumn,
3365
3531
  // Pipes
3366
3532
  SdGridConfigurationResultPipe,
3367
3533
  SdColumnChildrenFilterPipe,
@@ -3396,6 +3562,7 @@
3396
3562
  SdGridService,
3397
3563
  SdGridFilterService,
3398
3564
  SdGridConfigurationService,
3565
+ SdGeneratedColumnService,
3399
3566
  {
3400
3567
  provide: paginator.MatPaginatorIntl, useClass: MatPaginatorIntlCro
3401
3568
  }
@@ -3420,11 +3587,13 @@
3420
3587
  exports.SdMaterialSubInformationDefDirective = SdMaterialSubInformationDefDirective;
3421
3588
  exports.ɵa = MatPaginatorIntlCro;
3422
3589
  exports.ɵb = SdGridFilter;
3423
- exports.ɵba = SdFilterColumnPipe;
3424
- exports.ɵbb = SdFilterExternalPipe;
3425
- exports.ɵbc = SdSelectionActionFilterPipe;
3426
- exports.ɵbd = SdSelectionDisablePipe;
3427
- exports.ɵbe = SdSelectionDisableSelectAllPipe;
3590
+ exports.ɵba = SdColumnTooltipPipe;
3591
+ exports.ɵbb = SdColumnBadgePipe;
3592
+ exports.ɵbc = SdFilterColumnPipe;
3593
+ exports.ɵbd = SdFilterExternalPipe;
3594
+ exports.ɵbe = SdSelectionActionFilterPipe;
3595
+ exports.ɵbf = SdSelectionDisablePipe;
3596
+ exports.ɵbg = SdSelectionDisableSelectAllPipe;
3428
3597
  exports.ɵc = SdPopupFilter;
3429
3598
  exports.ɵd = SdGridFilterService;
3430
3599
  exports.ɵe = SdPopupExport;
@@ -3436,18 +3605,18 @@
3436
3605
  exports.ɵl = SdDesktopCommand;
3437
3606
  exports.ɵm = SdLetDirective;
3438
3607
  exports.ɵn = SdPopupGridConfiguration;
3439
- exports.ɵo = SdGridConfigurationResultPipe;
3440
- exports.ɵp = SdColumnChildrenFilterPipe;
3441
- exports.ɵq = SdColumnTitlePipe;
3442
- exports.ɵr = SdCommandFilterPipe;
3443
- exports.ɵs = SdCommandDisablePipe;
3444
- exports.ɵt = SdCommandIconPipe;
3445
- exports.ɵu = SdCommandTitlePipe;
3446
- exports.ɵv = SdColumnValuesPipe;
3447
- exports.ɵw = SdColumnHtmlTemplatePipe;
3448
- exports.ɵx = SdColumnTransformPipe;
3449
- exports.ɵy = SdColumnTooltipPipe;
3450
- exports.ɵz = SdColumnBadgePipe;
3608
+ exports.ɵo = SdDynamicColumn;
3609
+ exports.ɵp = SdGeneratedColumnService;
3610
+ exports.ɵq = SdGridConfigurationResultPipe;
3611
+ exports.ɵr = SdColumnChildrenFilterPipe;
3612
+ exports.ɵs = SdColumnTitlePipe;
3613
+ exports.ɵt = SdCommandFilterPipe;
3614
+ exports.ɵu = SdCommandDisablePipe;
3615
+ exports.ɵv = SdCommandIconPipe;
3616
+ exports.ɵw = SdCommandTitlePipe;
3617
+ exports.ɵx = SdColumnValuesPipe;
3618
+ exports.ɵy = SdColumnHtmlTemplatePipe;
3619
+ exports.ɵz = SdColumnTransformPipe;
3451
3620
 
3452
3621
  Object.defineProperty(exports, '__esModule', { value: true });
3453
3622