@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.
- package/bundles/sd-angular-core-grid-material.umd.js +196 -27
- package/bundles/sd-angular-core-grid-material.umd.js.map +1 -1
- package/bundles/sd-angular-core-grid-material.umd.min.js +2 -2
- package/bundles/sd-angular-core-grid-material.umd.min.js.map +1 -1
- package/bundles/sd-angular-core-tab-router.umd.js +33 -18
- package/bundles/sd-angular-core-tab-router.umd.js.map +1 -1
- package/bundles/sd-angular-core-tab-router.umd.min.js +2 -2
- package/bundles/sd-angular-core-tab-router.umd.min.js.map +1 -1
- package/esm2015/grid-material/sd-angular-core-grid-material.js +20 -18
- package/esm2015/grid-material/src/lib/components/desktop-cell-view/desktop-cell-view.component.js +2 -2
- package/esm2015/grid-material/src/lib/components/dynamic-column/dynamic-column.component.js +98 -0
- package/esm2015/grid-material/src/lib/components/popup-grid-configuration/popup-grid-configuration.component.js +23 -5
- package/esm2015/grid-material/src/lib/grid-material.component.js +1 -2
- package/esm2015/grid-material/src/lib/grid-material.module.js +8 -2
- package/esm2015/grid-material/src/lib/models/grid-config.model.js +1 -1
- package/esm2015/grid-material/src/lib/pipes/column-badge.pipe.js +4 -1
- package/esm2015/grid-material/src/lib/pipes/column-transform.pipe.js +1 -1
- package/esm2015/grid-material/src/lib/services/generated-column/generated-column.model.js +2 -0
- package/esm2015/grid-material/src/lib/services/generated-column/generated-column.service.js +57 -0
- package/esm2015/tab-router/src/lib/components/tab-router-outlet/tab-router-outlet.component.js +30 -24
- package/fesm2015/sd-angular-core-grid-material.js +172 -8
- package/fesm2015/sd-angular-core-grid-material.js.map +1 -1
- package/fesm2015/sd-angular-core-tab-router.js +20 -14
- package/fesm2015/sd-angular-core-tab-router.js.map +1 -1
- package/grid-material/sd-angular-core-grid-material.d.ts +19 -17
- package/grid-material/sd-angular-core-grid-material.metadata.json +1 -1
- package/grid-material/src/lib/components/dynamic-column/dynamic-column.component.d.ts +32 -0
- package/grid-material/src/lib/components/popup-grid-configuration/popup-grid-configuration.component.d.ts +9 -0
- package/grid-material/src/lib/models/grid-config.model.d.ts +11 -0
- package/grid-material/src/lib/services/generated-column/generated-column.model.d.ts +8 -0
- package/grid-material/src/lib/services/generated-column/generated-column.service.d.ts +10 -0
- package/package.json +1 -1
- package/{sd-angular-core-0.0.903.tgz → sd-angular-core-0.0.907.tgz} +0 -0
- package/tab-router/src/lib/components/tab-router-outlet/tab-router-outlet.component.d.ts +7 -7
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Directive, TemplateRef, Input, InjectionToken, EventEmitter, Component, ViewChild, Output, Injectable, ChangeDetectorRef, Inject, Optional, QueryList, ContentChild, ContentChildren, Pipe, ViewContainerRef, NgModule } from '@angular/core';
|
|
1
|
+
import { Directive, TemplateRef, Input, InjectionToken, EventEmitter, Component, ViewChild, Output, Injectable, ChangeDetectorRef, Inject, Optional, QueryList, ContentChild, ContentChildren, Pipe, ViewContainerRef, HostListener, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
2
2
|
import { __awaiter, __classPrivateFieldGet, __rest, __classPrivateFieldSet } from 'tslib';
|
|
3
3
|
import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
|
|
4
4
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
@@ -27,6 +27,7 @@ import { MatTableModule } from '@angular/material/table';
|
|
|
27
27
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
28
28
|
import { CdkTableModule, CdkColumnDef } from '@angular/cdk/table';
|
|
29
29
|
import { MatMenuModule } from '@angular/material/menu';
|
|
30
|
+
import { MatSliderModule } from '@angular/material/slider';
|
|
30
31
|
import { MatButtonModule } from '@angular/material/button';
|
|
31
32
|
import { SdServiceModule } from '@sd-angular/core/service';
|
|
32
33
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
@@ -37,6 +38,7 @@ import { SdFormModule } from '@sd-angular/core/form';
|
|
|
37
38
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
38
39
|
import { MatListModule } from '@angular/material/list';
|
|
39
40
|
import { MatDividerModule } from '@angular/material/divider';
|
|
41
|
+
import { SdSideDrawer } from '@sd-angular/core/side-drawer';
|
|
40
42
|
|
|
41
43
|
class SdMaterialCellDefDirective {
|
|
42
44
|
constructor(templateRef) {
|
|
@@ -1688,7 +1690,6 @@ class SdGridMaterial {
|
|
|
1688
1690
|
});
|
|
1689
1691
|
const configuration = this.gridConfigurationService.init(this.key, this.gridOption);
|
|
1690
1692
|
this.gridConfigurationObserver = configuration.observer;
|
|
1691
|
-
configuration.load();
|
|
1692
1693
|
}
|
|
1693
1694
|
}
|
|
1694
1695
|
set paginator(paginator) {
|
|
@@ -1932,7 +1933,7 @@ class SdDesktopCellView {
|
|
|
1932
1933
|
SdDesktopCellView.decorators = [
|
|
1933
1934
|
{ type: Component, args: [{
|
|
1934
1935
|
selector: 'sd-desktop-cell-view',
|
|
1935
|
-
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
|
|
1936
|
+
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>",
|
|
1936
1937
|
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}"]
|
|
1937
1938
|
},] }
|
|
1938
1939
|
];
|
|
@@ -2110,6 +2111,9 @@ class SdColumnBadgePipe {
|
|
|
2110
2111
|
if (column.type === 'string' && (column === null || column === void 0 ? void 0 : column.badge)) {
|
|
2111
2112
|
return column.badge(value, rowData);
|
|
2112
2113
|
}
|
|
2114
|
+
if (column.type === 'bool' && (column === null || column === void 0 ? void 0 : column.badge)) {
|
|
2115
|
+
return column.badge(value, rowData);
|
|
2116
|
+
}
|
|
2113
2117
|
return null;
|
|
2114
2118
|
}
|
|
2115
2119
|
}
|
|
@@ -2176,6 +2180,7 @@ class SdPopupGridConfiguration {
|
|
|
2176
2180
|
_cache$2.set(this, void 0);
|
|
2177
2181
|
this.isCreatingColumn = false;
|
|
2178
2182
|
this.selected = {};
|
|
2183
|
+
this.disabledDrag = true;
|
|
2179
2184
|
this.open = () => __awaiter(this, void 0, void 0, function* () {
|
|
2180
2185
|
__classPrivateFieldSet(this, _cache$2, this.gridConfigurationService.init(this.key, this.gridOption));
|
|
2181
2186
|
this.configuration = yield __classPrivateFieldGet(this, _cache$2).get();
|
|
@@ -2219,13 +2224,26 @@ class SdPopupGridConfiguration {
|
|
|
2219
2224
|
}
|
|
2220
2225
|
ngOnInit() {
|
|
2221
2226
|
}
|
|
2227
|
+
mouseUp(event) {
|
|
2228
|
+
this.disabledDrag = true;
|
|
2229
|
+
}
|
|
2230
|
+
dropTable(event) {
|
|
2231
|
+
moveItemInArray(this.configuration.columns, event.previousIndex, event.currentIndex);
|
|
2232
|
+
this.table.renderRows();
|
|
2233
|
+
}
|
|
2234
|
+
handleMouseDown() {
|
|
2235
|
+
this.disabledDrag = false;
|
|
2236
|
+
}
|
|
2237
|
+
handleMouseUp() {
|
|
2238
|
+
this.disabledDrag = true;
|
|
2239
|
+
}
|
|
2222
2240
|
}
|
|
2223
2241
|
_cache$2 = new WeakMap();
|
|
2224
2242
|
SdPopupGridConfiguration.decorators = [
|
|
2225
2243
|
{ type: Component, args: [{
|
|
2226
2244
|
selector: 'sd-popup-grid-configuration',
|
|
2227
|
-
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 <
|
|
2228
|
-
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}"]
|
|
2245
|
+
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>",
|
|
2246
|
+
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}"]
|
|
2229
2247
|
},] }
|
|
2230
2248
|
];
|
|
2231
2249
|
SdPopupGridConfiguration.ctorParameters = () => [
|
|
@@ -2237,7 +2255,9 @@ SdPopupGridConfiguration.ctorParameters = () => [
|
|
|
2237
2255
|
SdPopupGridConfiguration.propDecorators = {
|
|
2238
2256
|
gridOption: [{ type: Input }],
|
|
2239
2257
|
key: [{ type: Input }],
|
|
2240
|
-
modal: [{ type: ViewChild, args: ['modal',] }]
|
|
2258
|
+
modal: [{ type: ViewChild, args: ['modal',] }],
|
|
2259
|
+
table: [{ type: ViewChild, args: ['table',] }],
|
|
2260
|
+
mouseUp: [{ type: HostListener, args: ['window:mouseup', ['$event'],] }]
|
|
2241
2261
|
};
|
|
2242
2262
|
|
|
2243
2263
|
class SdColumnTooltipPipe {
|
|
@@ -2389,6 +2409,147 @@ SdSelectionDisableSelectAllPipe.decorators = [
|
|
|
2389
2409
|
},] }
|
|
2390
2410
|
];
|
|
2391
2411
|
|
|
2412
|
+
var _cache$3;
|
|
2413
|
+
class SdGeneratedColumnService {
|
|
2414
|
+
constructor(settingService) {
|
|
2415
|
+
this.settingService = settingService;
|
|
2416
|
+
_cache$3.set(this, {});
|
|
2417
|
+
this.load = (configuration) => {
|
|
2418
|
+
if (!(configuration === null || configuration === void 0 ? void 0 : configuration.key)) {
|
|
2419
|
+
return null;
|
|
2420
|
+
}
|
|
2421
|
+
const key = hash({
|
|
2422
|
+
prefix: '260f5e94-5865-4425-8ced-b9c083c390dd',
|
|
2423
|
+
key: configuration.key
|
|
2424
|
+
});
|
|
2425
|
+
if (!__classPrivateFieldGet(this, _cache$3)[key]) {
|
|
2426
|
+
__classPrivateFieldGet(this, _cache$3)[key] = this.settingService.create(key, {
|
|
2427
|
+
type: configuration === null || configuration === void 0 ? void 0 : configuration.storage,
|
|
2428
|
+
args: configuration === null || configuration === void 0 ? void 0 : configuration.args,
|
|
2429
|
+
default: []
|
|
2430
|
+
});
|
|
2431
|
+
}
|
|
2432
|
+
return __classPrivateFieldGet(this, _cache$3)[key];
|
|
2433
|
+
};
|
|
2434
|
+
this.loadSystem = (configuration) => {
|
|
2435
|
+
var _a;
|
|
2436
|
+
if (!(configuration === null || configuration === void 0 ? void 0 : configuration.key)) {
|
|
2437
|
+
return null;
|
|
2438
|
+
}
|
|
2439
|
+
if (!(configuration === null || configuration === void 0 ? void 0 : configuration.systemColumn)) {
|
|
2440
|
+
return null;
|
|
2441
|
+
}
|
|
2442
|
+
const key = hash({
|
|
2443
|
+
prefix: '8b8050ca-1f44-4860-bad3-20e646c0d68f',
|
|
2444
|
+
key: configuration.key
|
|
2445
|
+
});
|
|
2446
|
+
if (!__classPrivateFieldGet(this, _cache$3)[key]) {
|
|
2447
|
+
__classPrivateFieldGet(this, _cache$3)[key] = this.settingService.create(key, {
|
|
2448
|
+
type: 'server',
|
|
2449
|
+
args: (_a = configuration === null || configuration === void 0 ? void 0 : configuration.systemColumn) === null || _a === void 0 ? void 0 : _a.args,
|
|
2450
|
+
default: []
|
|
2451
|
+
});
|
|
2452
|
+
}
|
|
2453
|
+
return __classPrivateFieldGet(this, _cache$3)[key];
|
|
2454
|
+
};
|
|
2455
|
+
}
|
|
2456
|
+
}
|
|
2457
|
+
_cache$3 = new WeakMap();
|
|
2458
|
+
SdGeneratedColumnService.decorators = [
|
|
2459
|
+
{ type: Injectable }
|
|
2460
|
+
];
|
|
2461
|
+
SdGeneratedColumnService.ctorParameters = () => [
|
|
2462
|
+
{ type: SdSettingService }
|
|
2463
|
+
];
|
|
2464
|
+
|
|
2465
|
+
var _subscription$2;
|
|
2466
|
+
class SdDynamicColumn {
|
|
2467
|
+
constructor(ref, generatedColumnService, notifyService, translateService, gridConfigurationService) {
|
|
2468
|
+
this.ref = ref;
|
|
2469
|
+
this.generatedColumnService = generatedColumnService;
|
|
2470
|
+
this.notifyService = notifyService;
|
|
2471
|
+
this.translateService = translateService;
|
|
2472
|
+
this.gridConfigurationService = gridConfigurationService;
|
|
2473
|
+
_subscription$2.set(this, new Subscription());
|
|
2474
|
+
this.columnTypes = ['string', 'number', 'bool', 'date', 'datetime', 'time', 'values', 'children', 'children-col'];
|
|
2475
|
+
this.form = new FormGroup({});
|
|
2476
|
+
this.isDetail = false;
|
|
2477
|
+
this.originColumns = [];
|
|
2478
|
+
this.onDetail = (column) => {
|
|
2479
|
+
this.detail = column || {
|
|
2480
|
+
field: v4(),
|
|
2481
|
+
title: '',
|
|
2482
|
+
type: 'string',
|
|
2483
|
+
isSystem: false,
|
|
2484
|
+
useTemplate: false
|
|
2485
|
+
};
|
|
2486
|
+
this.form.markAsUntouched();
|
|
2487
|
+
this.form.markAsPristine();
|
|
2488
|
+
this.isDetail = true;
|
|
2489
|
+
};
|
|
2490
|
+
this.onSave = () => {
|
|
2491
|
+
var _a;
|
|
2492
|
+
const systemSetting = this.generatedColumnService.loadSystem(this.gridOption.config);
|
|
2493
|
+
const setting = this.generatedColumnService.load((_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.config);
|
|
2494
|
+
if (this.detail.isSystem) {
|
|
2495
|
+
if (!this.detail.id) {
|
|
2496
|
+
systemSetting.set([...this.systemColumns, Object.assign(Object.assign({}, this.detail), { id: v4() })]);
|
|
2497
|
+
}
|
|
2498
|
+
else {
|
|
2499
|
+
systemSetting.set([...this.systemColumns]);
|
|
2500
|
+
}
|
|
2501
|
+
}
|
|
2502
|
+
else {
|
|
2503
|
+
if (!this.detail.id) {
|
|
2504
|
+
setting.set([...this.columns, Object.assign(Object.assign({}, this.detail), { id: v4() })]);
|
|
2505
|
+
}
|
|
2506
|
+
else {
|
|
2507
|
+
setting.set([...this.columns]);
|
|
2508
|
+
}
|
|
2509
|
+
}
|
|
2510
|
+
};
|
|
2511
|
+
}
|
|
2512
|
+
ngOnInit() {
|
|
2513
|
+
var _a, _b, _c;
|
|
2514
|
+
const systemSetting = this.generatedColumnService.loadSystem(this.gridOption.config);
|
|
2515
|
+
const setting = this.generatedColumnService.load((_a = this.gridOption) === null || _a === void 0 ? void 0 : _a.config);
|
|
2516
|
+
if (systemSetting) {
|
|
2517
|
+
(_b = __classPrivateFieldGet(this, _subscription$2)) === null || _b === void 0 ? void 0 : _b.add(systemSetting.observer.subscribe(columns => {
|
|
2518
|
+
this.systemColumns = columns;
|
|
2519
|
+
}));
|
|
2520
|
+
}
|
|
2521
|
+
if (setting) {
|
|
2522
|
+
(_c = __classPrivateFieldGet(this, _subscription$2)) === null || _c === void 0 ? void 0 : _c.add(setting.observer.subscribe(columns => {
|
|
2523
|
+
this.columns = columns;
|
|
2524
|
+
}));
|
|
2525
|
+
}
|
|
2526
|
+
this.originColumns = this.gridOption.columns.filter(e => e.type !== 'children' && e.type !== 'children-col');
|
|
2527
|
+
}
|
|
2528
|
+
ngOnDestroy() {
|
|
2529
|
+
__classPrivateFieldGet(this, _subscription$2).unsubscribe();
|
|
2530
|
+
}
|
|
2531
|
+
}
|
|
2532
|
+
_subscription$2 = new WeakMap();
|
|
2533
|
+
SdDynamicColumn.decorators = [
|
|
2534
|
+
{ type: Component, args: [{
|
|
2535
|
+
selector: 'sd-dynamic-column',
|
|
2536
|
+
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>",
|
|
2537
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2538
|
+
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}"]
|
|
2539
|
+
},] }
|
|
2540
|
+
];
|
|
2541
|
+
SdDynamicColumn.ctorParameters = () => [
|
|
2542
|
+
{ type: ChangeDetectorRef },
|
|
2543
|
+
{ type: SdGeneratedColumnService },
|
|
2544
|
+
{ type: SdNotifyService },
|
|
2545
|
+
{ type: SdTranslateService },
|
|
2546
|
+
{ type: SdGridConfigurationService }
|
|
2547
|
+
];
|
|
2548
|
+
SdDynamicColumn.propDecorators = {
|
|
2549
|
+
sideDrawer: [{ type: ViewChild, args: [SdSideDrawer,] }],
|
|
2550
|
+
gridOption: [{ type: Input }]
|
|
2551
|
+
};
|
|
2552
|
+
|
|
2392
2553
|
class MatPaginatorIntlCro extends MatPaginatorIntl {
|
|
2393
2554
|
constructor() {
|
|
2394
2555
|
super(...arguments);
|
|
@@ -2437,7 +2598,8 @@ SdGridMaterialModule.decorators = [
|
|
|
2437
2598
|
CdkTableModule,
|
|
2438
2599
|
DragDropModule,
|
|
2439
2600
|
SdFormModule,
|
|
2440
|
-
SdServiceModule
|
|
2601
|
+
SdServiceModule,
|
|
2602
|
+
MatSliderModule
|
|
2441
2603
|
],
|
|
2442
2604
|
declarations: [
|
|
2443
2605
|
SdDesktopCellView,
|
|
@@ -2454,6 +2616,7 @@ SdGridMaterialModule.decorators = [
|
|
|
2454
2616
|
SdPopupGridConfiguration,
|
|
2455
2617
|
SdGridFilter,
|
|
2456
2618
|
SdPopupFilter,
|
|
2619
|
+
SdDynamicColumn,
|
|
2457
2620
|
// Pipes
|
|
2458
2621
|
SdGridConfigurationResultPipe,
|
|
2459
2622
|
SdColumnChildrenFilterPipe,
|
|
@@ -2488,6 +2651,7 @@ SdGridMaterialModule.decorators = [
|
|
|
2488
2651
|
SdGridService,
|
|
2489
2652
|
SdGridFilterService,
|
|
2490
2653
|
SdGridConfigurationService,
|
|
2654
|
+
SdGeneratedColumnService,
|
|
2491
2655
|
{
|
|
2492
2656
|
provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro
|
|
2493
2657
|
}
|
|
@@ -2503,5 +2667,5 @@ SdGridMaterialModule.decorators = [
|
|
|
2503
2667
|
* Generated bundle index. Do not edit.
|
|
2504
2668
|
*/
|
|
2505
2669
|
|
|
2506
|
-
export { SdGridMaterial, SdGridMaterialModule, SdMaterialCellDefDirective, SdMaterialEmptyDataDefDirective, SdMaterialFilterDefDirective, SdMaterialFooterDefDirective, SdMaterialSubInformationDefDirective, MatPaginatorIntlCro as ɵa, SdGridFilter as ɵb,
|
|
2670
|
+
export { SdGridMaterial, SdGridMaterialModule, SdMaterialCellDefDirective, SdMaterialEmptyDataDefDirective, SdMaterialFilterDefDirective, SdMaterialFooterDefDirective, SdMaterialSubInformationDefDirective, MatPaginatorIntlCro as ɵa, SdGridFilter as ɵb, SdColumnTooltipPipe as ɵba, SdColumnBadgePipe as ɵbb, SdFilterColumnPipe as ɵbc, SdFilterExternalPipe as ɵbd, SdSelectionActionFilterPipe as ɵbe, SdSelectionDisablePipe as ɵbf, SdSelectionDisableSelectAllPipe as ɵbg, SdPopupFilter as ɵc, SdGridFilterService as ɵd, SdPopupExport as ɵe, GRID_MATERIAL_CONFIG as ɵg, SdGridConfigurationService as ɵh, SdGridService as ɵi, SdDesktopCellView as ɵj, SdDesktopCellChildrenView as ɵk, SdDesktopCommand as ɵl, SdLetDirective as ɵm, SdPopupGridConfiguration as ɵn, SdDynamicColumn as ɵo, SdGeneratedColumnService as ɵp, SdGridConfigurationResultPipe as ɵq, SdColumnChildrenFilterPipe as ɵr, SdColumnTitlePipe as ɵs, SdCommandFilterPipe as ɵt, SdCommandDisablePipe as ɵu, SdCommandIconPipe as ɵv, SdCommandTitlePipe as ɵw, SdColumnValuesPipe as ɵx, SdColumnHtmlTemplatePipe as ɵy, SdColumnTransformPipe as ɵz };
|
|
2507
2671
|
//# sourceMappingURL=sd-angular-core-grid-material.js.map
|