@sd-angular/core 0.0.1030 → 0.0.1035
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/badge/sd-angular-core-badge.metadata.json +1 -1
- package/badge/src/lib/badge.component.d.ts +4 -2
- package/bundles/sd-angular-core-badge.umd.js +14 -4
- package/bundles/sd-angular-core-badge.umd.js.map +1 -1
- package/bundles/sd-angular-core-badge.umd.min.js +1 -1
- package/bundles/sd-angular-core-badge.umd.min.js.map +1 -1
- package/bundles/sd-angular-core-grid-material.umd.js +44 -19
- package/bundles/sd-angular-core-grid-material.umd.js.map +1 -1
- package/bundles/sd-angular-core-grid-material.umd.min.js +1 -1
- package/bundles/sd-angular-core-grid-material.umd.min.js.map +1 -1
- package/esm2015/badge/src/lib/badge.component.js +11 -5
- package/esm2015/grid-material/src/lib/components/desktop-cell-editor/desktop-cell-editor.component.js +2 -3
- package/esm2015/grid-material/src/lib/components/desktop-cell-view/desktop-cell-view.component.js +1 -1
- package/esm2015/grid-material/src/lib/components/desktop-editor-validation/desktop-editor-validation.component.js +4 -4
- package/esm2015/grid-material/src/lib/grid-material.component.js +16 -9
- package/esm2015/grid-material/src/lib/models/grid-column.model.js +1 -1
- package/esm2015/grid-material/src/lib/pipes/column-badge.pipe.js +23 -4
- package/esm2015/grid-material/src/lib/pipes/editor-validate.pipe.js +3 -3
- package/fesm2015/sd-angular-core-badge.js +10 -4
- package/fesm2015/sd-angular-core-badge.js.map +1 -1
- package/fesm2015/sd-angular-core-grid-material.js +44 -19
- package/fesm2015/sd-angular-core-grid-material.js.map +1 -1
- package/grid-material/sd-angular-core-grid-material.metadata.json +1 -1
- package/grid-material/src/lib/components/desktop-editor-validation/desktop-editor-validation.component.d.ts +1 -1
- package/grid-material/src/lib/grid-material.component.d.ts +4 -4
- package/grid-material/src/lib/models/grid-column.model.d.ts +10 -6
- package/grid-material/src/lib/pipes/column-badge.pipe.d.ts +6 -1
- package/grid-material/src/lib/pipes/editor-validate.pipe.d.ts +1 -1
- package/package.json +1 -1
- package/{sd-angular-core-0.0.1030.tgz → sd-angular-core-0.0.1035.tgz} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC1jb2x1bW4ubW9kZWwuanMiLCJzb3VyY2VSb290IjoiQzovVXNlcnMvbmdoaWF0dDE1L0Rlc2t0b3AvV29ya2luZy8xTUcvbGliLWNvcmUtdWkvcHJvamVjdHMvc2QtY29yZS9ncmlkLW1hdGVyaWFsLyIsInNvdXJjZXMiOlsic3JjL2xpYi9tb2RlbHMvZ3JpZC1jb2x1bW4ubW9kZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFNkQmFkZ2VDb2xvciB9IGZyb20gXCJAc2QtYW5ndWxhci9jb3JlL2JhZGdlXCI7XHJcblxyXG5leHBvcnQgdHlwZSBTZEdyaWRNYXRlcmlhbENvbHVtbjxUID0gYW55PiA9XHJcbiAgU2RHcmlkTWF0ZXJpYWxDb2x1bW5UZXh0PFQ+IHxcclxuICBTZEdyaWRNYXRlcmlhbENvbHVtbk51bWJlcjxUPiB8XHJcbiAgU2RHcmlkTWF0ZXJpYWxCb29sPFQ+IHxcclxuICBTZEdyaWRNYXRlcmlhbENvbHVtbkRhdGU8VD4gfFxyXG4gIFNkR3JpZE1hdGVyaWFsQ29sdW1uVmFsdWVzPFQ+IHxcclxuICBTZEdyaWRNYXRlcmlhbENvbHVtbkltYWdlPFQ+IHxcclxuICBTZEdyaWRNYXRlcmlhbENvbHVtbkNoaWxkcmVuPFQ+IHxcclxuICBTZEdyaWRNYXRlcmlhbENvbHVtbkNoaWxkcmVuQ29sPFQ+O1xyXG5cclxuaW50ZXJmYWNlIFNkR3JpZE1hdGVyaWFsQmFzZUNvbHVtbjxUID0gYW55PiB7XHJcbiAgZmllbGQ6IHN0cmluZztcclxuICB0aXRsZTogc3RyaW5nO1xyXG4gIHRpdGxlSHRtbD86IHN0cmluZztcclxuICBkZXNjcmlwdGlvbj86IHN0cmluZztcclxuICB3aWR0aD86IHN0cmluZztcclxuICBoaWRkZW4/OiBib29sZWFuO1xyXG4gIGludmlzaWJsZT86IGJvb2xlYW47XHJcbiAgZml4ZWQ/OiBib29sZWFuO1xyXG4gIGh0bWxUZW1wbGF0ZT86ICh2YWx1ZTogYW55LCByb3dEYXRhOiBULCBpc01vYmlsZU9yVGFibGV0OiBib29sZWFuKSA9PiBzdHJpbmc7XHJcbiAgdHJhbnNmb3JtPzogKHZhbHVlOiBhbnksIHJvd0RhdGE6IFQpID0+IHN0cmluZztcclxuICB0b29sdGlwPzogKHZhbHVlOiBhbnksIHJvd0RhdGE6IFQpID0+IHN0cmluZztcclxuICBjbGljaz86ICh2YWx1ZTogYW55LCByb3dEYXRhOiBUKSA9PiB2b2lkO1xyXG4gIHNvcnRhYmxlPzogYm9vbGVhbjtcclxuICBmaWx0ZXI/OiB7XHJcbiAgICBkaXNhYmxlZD86IGJvb2xlYW47XHJcbiAgICBkZWZhdWx0U2hvd2luZz86IGJvb2xlYW47XHJcbiAgICBkZWZhdWx0PzogdW5rbm93blxyXG4gIH07XHJcbiAgZXhwb3J0Pzoge1xyXG4gICAgZGlzYWJsZWQ/OiBib29sZWFuO1xyXG4gIH07XHJcbn1cclxuXHJcbmludGVyZmFjZSBTZEdyaWRNYXRlcmlhbENvbHVtblRleHQ8VCA9IGFueT4gZXh0ZW5kcyBTZEdyaWRNYXRlcmlhbEJhc2VDb2x1bW48VD4ge1xyXG4gIHR5cGU6ICdzdHJpbmcnO1xyXG4gIGJhZGdlPzogKHZhbHVlOiBhbnksIHJvd0RhdGE6IFQpID0+IFNkQmFkZ2VDb2xvcjtcclxuICBiYWRnZUljb24/OiAodmFsdWU6IGFueSwgcm93RGF0YTogVCkgPT4gU2RCYWRnZUNvbG9yO1xyXG4gIGJhZGdlVHlwZT86ICdjaXJjbGUnIHwgJ2ljb24nO1xyXG4gIGVkaXRvcj86IHtcclxuICAgIGNoYW5nZT86IChyb3dEYXRhOiBUKSA9PiB2b2lkLFxyXG4gICAgaGlkZGVuPzogYm9vbGVhbiB8ICgocm93RGF0YTogVCkgPT4gYm9vbGVhbiksXHJcbiAgICBkaXNhYmxlZD86IGJvb2xlYW4gfCAoKHJvd0RhdGE6IFQpID0+IGJvb2xlYW4pLFxyXG4gICAgcmVxdWlyZWQ/OiBib29sZWFuIHwgKChyb3dEYXRhOiBUKSA9PiBib29sZWFuKSxcclxuICAgIG1pbkxlbmd0aD86IG51bWJlcixcclxuICAgIG1heExlbmd0aD86IG51bWJlcixcclxuICAgIHZhbGlkYXRvcj86IChyb3dEYXRhOiBUKSA9PiBzdHJpbmdcclxuICB9XHJcbn1cclxuXHJcbmludGVyZmFjZSBTZEdyaWRNYXRlcmlhbENvbHVtbk51bWJlcjxUID0gYW55PiBleHRlbmRzIFNkR3JpZE1hdGVyaWFsQmFzZUNvbHVtbjxUPiB7XHJcbiAgdHlwZTogJ251bWJlcic7XHJcbiAgYmFkZ2U/OiAodmFsdWU6IGFueSwgcm93RGF0YTogVCkgPT4gU2RCYWRnZUNvbG9yO1xyXG4gIGJhZGdlSWNvbj86ICh2YWx1ZTogYW55LCByb3dEYXRhOiBUKSA9PiBTZEJhZGdlQ29sb3I7XHJcbiAgYmFkZ2VUeXBlPzogJ2NpcmNsZScgfCAnaWNvbic7XHJcbiAgZWRpdG9yPzoge1xyXG4gICAgY2hhbmdlPzogKHJvd0RhdGE6IFQpID0+IHZvaWQsXHJcbiAgICBoaWRkZW4/OiBib29sZWFuIHwgKChyb3dEYXRhOiBUKSA9PiBib29sZWFuKSxcclxuICAgIGRpc2FibGVkPzogYm9vbGVhbiB8ICgocm93RGF0YTogVCkgPT4gYm9vbGVhbiksXHJcbiAgICByZXF1aXJlZD86IGJvb2xlYW4gfCAoKHJvd0RhdGE6IFQpID0+IGJvb2xlYW4pLFxyXG4gICAgbWluVmFsdWU/OiBudW1iZXIsXHJcbiAgICBtYXhWYWx1ZT86IG51bWJlcixcclxuICAgIHZhbGlkYXRvcj86IChyb3dEYXRhOiBUKSA9PiBzdHJpbmdcclxuICB9XHJcbn1cclxuXHJcbmludGVyZmFjZSBTZEdyaWRNYXRlcmlhbEJvb2w8VCA9IGFueT4gZXh0ZW5kcyBTZEdyaWRNYXRlcmlhbEJhc2VDb2x1bW48VD4ge1xyXG4gIHR5cGU6ICdib29sJztcclxuICBvcHRpb24/OiB7XHJcbiAgICBkaXNwbGF5T25UcnVlPzogc3RyaW5nO1xyXG4gICAgZGlzcGxheU9uRmFsc2U/OiBzdHJpbmc7XHJcbiAgfTtcclxuICBiYWRnZVR5cGU/OiAnY2lyY2xlJztcclxuICBlZGl0b3I/OiB7XHJcbiAgICBjaGFuZ2U/OiAocm93RGF0YTogVCkgPT4gdm9pZCxcclxuICAgIGhpZGRlbj86IGJvb2xlYW4gfCAoKHJvd0RhdGE6IFQpID0+IGJvb2xlYW4pLFxyXG4gICAgZGlzYWJsZWQ/OiBib29sZWFuIHwgKChyb3dEYXRhOiBUKSA9PiBib29sZWFuKSxcclxuICAgIHJlcXVpcmVkPzogYm9vbGVhbiB8ICgocm93RGF0YTogVCkgPT4gYm9vbGVhbiksXHJcbiAgfVxyXG59XHJcblxyXG5pbnRlcmZhY2UgU2RHcmlkTWF0ZXJpYWxDb2x1bW5EYXRlPFQgPSBhbnk+IGV4dGVuZHMgU2RHcmlkTWF0ZXJpYWxCYXNlQ29sdW1uPFQ+IHtcclxuICB0eXBlOiAnZGF0ZScgfCAnZGF0ZXRpbWUnIHwgJ3RpbWUnO1xyXG4gIG9wdGlvbj86IHtcclxuICAgIHRpbWVEaWZmZXJlbnQ/OiAnc2Vjb25kJyB8ICdtaW51dGUnIHwgJ2hvdXInIHwgJ2RheScgfCAnbW9udGgnO1xyXG4gIH07XHJcbiAgZWRpdG9yPzoge1xyXG4gICAgY2hhbmdlPzogKHJvd0RhdGE6IFQpID0+IHZvaWQsXHJcbiAgICBoaWRkZW4/OiBib29sZWFuIHwgKChyb3dEYXRhOiBUKSA9PiBib29sZWFuKSxcclxuICAgIGRpc2FibGVkPzogYm9vbGVhbiB8ICgocm93RGF0YTogVCkgPT4gYm9vbGVhbiksXHJcbiAgICByZXF1aXJlZD86IGJvb2xlYW4gfCAoKHJvd0RhdGE6IFQpID0+IGJvb2xlYW4pLFxyXG4gIH1cclxufVxyXG5cclxuaW50ZXJmYWNlIFNkR3JpZE1hdGVyaWFsQ29sdW1uVmFsdWVzPFQgPSBhbnk+IGV4dGVuZHMgU2RHcmlkTWF0ZXJpYWxCYXNlQ29sdW1uPFQ+IHtcclxuICB0eXBlOiAndmFsdWVzJztcclxuICBiYWRnZT86ICh2YWx1ZTogYW55LCByb3dEYXRhOiBUKSA9PiBTZEJhZGdlQ29sb3I7XHJcbiAgYmFkZ2VJY29uPzogKHZhbHVlOiBhbnksIHJvd0RhdGE6IFQpID0+IFNkQmFkZ2VDb2xvcjtcclxuICBiYWRnZVR5cGU/OiAnY2lyY2xlJyB8ICdpY29uJztcclxuICBvcHRpb24/OiB7XHJcbiAgICBpdGVtczogYW55W10gfCAoKCkgPT4gUHJvbWlzZTxhbnlbXT4pO1xyXG4gICAgdmFsdWVGaWVsZDogc3RyaW5nO1xyXG4gICAgZGlzcGxheUZpZWxkOiBzdHJpbmc7XHJcbiAgICBzZWxlY3Rpb24/OiAnQVVUT0NPTVBMRVRFJyB8ICdNVUxUSVBMRScgfCAnTVVMVElQTEVBVVRPQ09NUExFVEUnO1xyXG4gIH07XHJcbiAgZWRpdG9yPzoge1xyXG4gICAgY2hhbmdlPzogKHJvd0RhdGE6IFQpID0+IHZvaWQsXHJcbiAgICBoaWRkZW4/OiBib29sZWFuIHwgKChyb3dEYXRhOiBUKSA9PiBib29sZWFuKSxcclxuICAgIGRpc2FibGVkPzogYm9vbGVhbiB8ICgocm93RGF0YTogVCkgPT4gYm9vbGVhbiksXHJcbiAgICByZXF1aXJlZD86IGJvb2xlYW4gfCAoKHJvd0RhdGE6IFQpID0+IGJvb2xlYW4pLFxyXG4gIH1cclxufVxyXG5cclxuaW50ZXJmYWNlIFNkR3JpZE1hdGVyaWFsQ29sdW1uSW1hZ2U8VCA9IGFueT4gZXh0ZW5kcyBTZEdyaWRNYXRlcmlhbEJhc2VDb2x1bW48VD4ge1xyXG4gIHR5cGU6ICdpbWFnZSc7XHJcbiAgb3B0aW9uOiB7XHJcbiAgICBoZWlnaHQ6IG51bWJlcixcclxuICAgIHdpZHRoOiBudW1iZXJcclxuICB9O1xyXG4gIGVkaXRvcj86IHtcclxuICAgIGNoYW5nZT86IChyb3dEYXRhOiBUKSA9PiB2b2lkLFxyXG4gICAgaGlkZGVuPzogYm9vbGVhbiB8ICgocm93RGF0YTogVCkgPT4gYm9vbGVhbiksXHJcbiAgICBkaXNhYmxlZD86IGJvb2xlYW4gfCAoKHJvd0RhdGE6IFQpID0+IGJvb2xlYW4pLFxyXG4gICAgcmVxdWlyZWQ/OiBib29sZWFuIHwgKChyb3dEYXRhOiBUKSA9PiBib29sZWFuKSxcclxuICB9XHJcbn1cclxuXHJcbnR5cGUgU2RHcmlkTWF0ZXJpYWxOb3JtYWxDb2x1bW48VD4gPVxyXG4gIEV4Y2x1ZGU8RXhjbHVkZTxTZEdyaWRNYXRlcmlhbENvbHVtbjxUPixcclxuICAgIFNkR3JpZE1hdGVyaWFsQ29sdW1uQ2hpbGRyZW48VD4+LFxyXG4gICAgU2RHcmlkTWF0ZXJpYWxDb2x1bW5DaGlsZHJlbkNvbDxUPj47XHJcblxyXG5leHBvcnQgdHlwZSBTZEdyaWRNYXRlcmlhbENoaWxkQ29sdW1uPFQgPSBhbnk+ID0gKFNkR3JpZE1hdGVyaWFsTm9ybWFsQ29sdW1uPFQ+XHJcbiAgJiB7IGR5bmFtaWNUaXRsZT86IChyb3dEYXRhOiBUKSA9PiBzdHJpbmcgfCBQcm9taXNlPHN0cmluZz4sIGNvbFNwYW46IDEgfCAyIH0pO1xyXG5cclxuZXhwb3J0IGludGVyZmFjZSBTZEdyaWRNYXRlcmlhbENvbHVtbkNoaWxkcmVuPFQgPSBhbnk+IGV4dGVuZHMgU2RHcmlkTWF0ZXJpYWxCYXNlQ29sdW1uPFQ+IHtcclxuICB0eXBlOiAnY2hpbGRyZW4nO1xyXG4gIGNoaWxkcmVuOiBTZEdyaWRNYXRlcmlhbENoaWxkQ29sdW1uPFQ+W107XHJcbn1cclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgU2RHcmlkTWF0ZXJpYWxDb2x1bW5DaGlsZHJlbkNvbDxUID0gYW55PiBleHRlbmRzIFNkR3JpZE1hdGVyaWFsQmFzZUNvbHVtbjxUPiB7XHJcbiAgdHlwZTogJ2NoaWxkcmVuLWNvbCc7XHJcbiAgY2hpbGRyZW46IFNkR3JpZE1hdGVyaWFsTm9ybWFsQ29sdW1uPFQ+W107XHJcbn1cclxuIl19
|
|
@@ -3,13 +3,32 @@ export class SdColumnBadgePipe {
|
|
|
3
3
|
constructor() { }
|
|
4
4
|
transform(value, rowData, column) {
|
|
5
5
|
if (column.type === 'string' && (column === null || column === void 0 ? void 0 : column.badge)) {
|
|
6
|
-
return
|
|
6
|
+
return {
|
|
7
|
+
type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
|
|
8
|
+
color: column.badge(value, rowData),
|
|
9
|
+
icon: column.badgeIcon(value, rowData)
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
if (column.type === 'number' && (column === null || column === void 0 ? void 0 : column.badge)) {
|
|
13
|
+
return {
|
|
14
|
+
type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
|
|
15
|
+
color: column.badge(value, rowData),
|
|
16
|
+
icon: column.badgeIcon(value, rowData)
|
|
17
|
+
};
|
|
7
18
|
}
|
|
8
19
|
if (column.type === 'bool') {
|
|
9
|
-
return
|
|
20
|
+
return {
|
|
21
|
+
type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
|
|
22
|
+
color: !!value ? 'success' : 'danger',
|
|
23
|
+
icon: null
|
|
24
|
+
};
|
|
10
25
|
}
|
|
11
26
|
if (column.type === 'values' && (column === null || column === void 0 ? void 0 : column.badge)) {
|
|
12
|
-
return
|
|
27
|
+
return {
|
|
28
|
+
type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
|
|
29
|
+
color: column.badge(value, rowData),
|
|
30
|
+
icon: column.badgeIcon(value, rowData)
|
|
31
|
+
};
|
|
13
32
|
}
|
|
14
33
|
return null;
|
|
15
34
|
}
|
|
@@ -20,4 +39,4 @@ SdColumnBadgePipe.decorators = [
|
|
|
20
39
|
},] }
|
|
21
40
|
];
|
|
22
41
|
SdColumnBadgePipe.ctorParameters = () => [];
|
|
23
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
42
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sdW1uLWJhZGdlLnBpcGUuanMiLCJzb3VyY2VSb290IjoiQzovVXNlcnMvbmdoaWF0dDE1L0Rlc2t0b3AvV29ya2luZy8xTUcvbGliLWNvcmUtdWkvcHJvamVjdHMvc2QtY29yZS9ncmlkLW1hdGVyaWFsLyIsInNvdXJjZXMiOlsic3JjL2xpYi9waXBlcy9jb2x1bW4tYmFkZ2UucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLGVBQWUsQ0FBQztBQU1wRCxNQUFNLE9BQU8saUJBQWlCO0lBQzVCLGdCQUFnQixDQUFDO0lBQ2pCLFNBQVMsQ0FBQyxLQUFVLEVBQUUsT0FBWSxFQUFFLE1BQTRCO1FBSzlELElBQUksTUFBTSxDQUFDLElBQUksS0FBSyxRQUFRLEtBQUksTUFBTSxhQUFOLE1BQU0sdUJBQU4sTUFBTSxDQUFFLEtBQUssQ0FBQSxFQUFFO1lBQzdDLE9BQU87Z0JBQ0wsSUFBSSxFQUFFLEVBQUMsTUFBTSxhQUFOLE1BQU0sdUJBQU4sTUFBTSxDQUFFLFNBQVMsQ0FBQSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxTQUFTO2dCQUNyRCxLQUFLLEVBQUUsTUFBTSxDQUFDLEtBQUssQ0FBQyxLQUFLLEVBQUUsT0FBTyxDQUFDO2dCQUNuQyxJQUFJLEVBQUUsTUFBTSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEVBQUUsT0FBTyxDQUFDO2FBQ3ZDLENBQUE7U0FDRjtRQUNELElBQUksTUFBTSxDQUFDLElBQUksS0FBSyxRQUFRLEtBQUksTUFBTSxhQUFOLE1BQU0sdUJBQU4sTUFBTSxDQUFFLEtBQUssQ0FBQSxFQUFFO1lBQzdDLE9BQU87Z0JBQ0wsSUFBSSxFQUFFLEVBQUMsTUFBTSxhQUFOLE1BQU0sdUJBQU4sTUFBTSxDQUFFLFNBQVMsQ0FBQSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxTQUFTO2dCQUNyRCxLQUFLLEVBQUUsTUFBTSxDQUFDLEtBQUssQ0FBQyxLQUFLLEVBQUUsT0FBTyxDQUFDO2dCQUNuQyxJQUFJLEVBQUUsTUFBTSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEVBQUUsT0FBTyxDQUFDO2FBQ3ZDLENBQUE7U0FDRjtRQUNELElBQUksTUFBTSxDQUFDLElBQUksS0FBSyxNQUFNLEVBQUU7WUFDMUIsT0FBTztnQkFDTCxJQUFJLEVBQUUsRUFBQyxNQUFNLGFBQU4sTUFBTSx1QkFBTixNQUFNLENBQUUsU0FBUyxDQUFBLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLFNBQVM7Z0JBQ3JELEtBQUssRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLFFBQVE7Z0JBQ3JDLElBQUksRUFBRSxJQUFJO2FBQ1gsQ0FBQTtTQUNGO1FBQ0QsSUFBSSxNQUFNLENBQUMsSUFBSSxLQUFLLFFBQVEsS0FBSSxNQUFNLGFBQU4sTUFBTSx1QkFBTixNQUFNLENBQUUsS0FBSyxDQUFBLEVBQUU7WUFDN0MsT0FBTztnQkFDTCxJQUFJLEVBQUUsRUFBQyxNQUFNLGFBQU4sTUFBTSx1QkFBTixNQUFNLENBQUUsU0FBUyxDQUFBLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLFNBQVM7Z0JBQ3JELEtBQUssRUFBRSxNQUFNLENBQUMsS0FBSyxDQUFDLEtBQUssRUFBRSxPQUFPLENBQUM7Z0JBQ25DLElBQUksRUFBRSxNQUFNLENBQUMsU0FBUyxDQUFDLEtBQUssRUFBRSxPQUFPLENBQUM7YUFDdkMsQ0FBQTtTQUNGO1FBQ0QsT0FBTyxJQUFJLENBQUM7SUFDZCxDQUFDOzs7WUF2Q0YsSUFBSSxTQUFDO2dCQUNKLElBQUksRUFBRSxhQUFhO2FBQ3BCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGlwZSwgUGlwZVRyYW5zZm9ybSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBTZEJhZGdlQ29sb3IgfSBmcm9tICdAc2QtYW5ndWxhci9jb3JlL2JhZGdlJztcclxuaW1wb3J0IHsgU2RHcmlkTWF0ZXJpYWxDb2x1bW4gfSBmcm9tICcuLi9tb2RlbHMvZ3JpZC1jb2x1bW4ubW9kZWwnO1xyXG5AUGlwZSh7XHJcbiAgbmFtZTogJ2NvbHVtbkJhZGdlJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RDb2x1bW5CYWRnZVBpcGUgaW1wbGVtZW50cyBQaXBlVHJhbnNmb3JtIHtcclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG4gIHRyYW5zZm9ybSh2YWx1ZTogYW55LCByb3dEYXRhOiBhbnksIGNvbHVtbjogU2RHcmlkTWF0ZXJpYWxDb2x1bW4pOiB7XHJcbiAgICB0eXBlOiAncm91bmQnIHwgJ2NpcmNsZScgfCAnaWNvbicsXHJcbiAgICBjb2xvcjogU2RCYWRnZUNvbG9yLFxyXG4gICAgaWNvbjogc3RyaW5nXHJcbiAgfSB7XHJcbiAgICBpZiAoY29sdW1uLnR5cGUgPT09ICdzdHJpbmcnICYmIGNvbHVtbj8uYmFkZ2UpIHtcclxuICAgICAgcmV0dXJuIHtcclxuICAgICAgICB0eXBlOiAhY29sdW1uPy5iYWRnZVR5cGUgPyAncm91bmQnIDogY29sdW1uLmJhZGdlVHlwZSxcclxuICAgICAgICBjb2xvcjogY29sdW1uLmJhZGdlKHZhbHVlLCByb3dEYXRhKSxcclxuICAgICAgICBpY29uOiBjb2x1bW4uYmFkZ2VJY29uKHZhbHVlLCByb3dEYXRhKVxyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgICBpZiAoY29sdW1uLnR5cGUgPT09ICdudW1iZXInICYmIGNvbHVtbj8uYmFkZ2UpIHtcclxuICAgICAgcmV0dXJuIHtcclxuICAgICAgICB0eXBlOiAhY29sdW1uPy5iYWRnZVR5cGUgPyAncm91bmQnIDogY29sdW1uLmJhZGdlVHlwZSxcclxuICAgICAgICBjb2xvcjogY29sdW1uLmJhZGdlKHZhbHVlLCByb3dEYXRhKSxcclxuICAgICAgICBpY29uOiBjb2x1bW4uYmFkZ2VJY29uKHZhbHVlLCByb3dEYXRhKVxyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgICBpZiAoY29sdW1uLnR5cGUgPT09ICdib29sJykge1xyXG4gICAgICByZXR1cm4ge1xyXG4gICAgICAgIHR5cGU6ICFjb2x1bW4/LmJhZGdlVHlwZSA/ICdyb3VuZCcgOiBjb2x1bW4uYmFkZ2VUeXBlLFxyXG4gICAgICAgIGNvbG9yOiAhIXZhbHVlID8gJ3N1Y2Nlc3MnIDogJ2RhbmdlcicsXHJcbiAgICAgICAgaWNvbjogbnVsbFxyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgICBpZiAoY29sdW1uLnR5cGUgPT09ICd2YWx1ZXMnICYmIGNvbHVtbj8uYmFkZ2UpIHtcclxuICAgICAgcmV0dXJuIHtcclxuICAgICAgICB0eXBlOiAhY29sdW1uPy5iYWRnZVR5cGUgPyAncm91bmQnIDogY29sdW1uLmJhZGdlVHlwZSxcclxuICAgICAgICBjb2xvcjogY29sdW1uLmJhZGdlKHZhbHVlLCByb3dEYXRhKSxcclxuICAgICAgICBpY29uOiBjb2x1bW4uYmFkZ2VJY29uKHZhbHVlLCByb3dEYXRhKVxyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgICByZXR1cm4gbnVsbDtcclxuICB9XHJcbn1cclxuIl19
|
|
@@ -6,7 +6,7 @@ export class SdEditorValidatePipe {
|
|
|
6
6
|
_previous.set(this, void 0);
|
|
7
7
|
_delay.set(this, 200); // Sau khoảng thời gian delay nếu không có thay đổi thì thì mới bắt đầu thực hiện validate
|
|
8
8
|
}
|
|
9
|
-
transform(sdId, item,
|
|
9
|
+
transform(sdId, item, items, gridOption) {
|
|
10
10
|
return __awaiter(this, void 0, void 0, function* () {
|
|
11
11
|
const { editor } = gridOption;
|
|
12
12
|
if (!editor.validate) {
|
|
@@ -28,7 +28,7 @@ export class SdEditorValidatePipe {
|
|
|
28
28
|
if (dif < __classPrivateFieldGet(this, _delay)) {
|
|
29
29
|
return;
|
|
30
30
|
}
|
|
31
|
-
const result = editor.validate(item,
|
|
31
|
+
const result = editor.validate(item, items === null || items === void 0 ? void 0 : items.indexOf(item));
|
|
32
32
|
if (result instanceof Promise) {
|
|
33
33
|
item.editorErrorMessage = yield result;
|
|
34
34
|
return;
|
|
@@ -46,4 +46,4 @@ SdEditorValidatePipe.decorators = [
|
|
|
46
46
|
name: 'sdEditorValidate'
|
|
47
47
|
},] }
|
|
48
48
|
];
|
|
49
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
49
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdG9yLXZhbGlkYXRlLnBpcGUuanMiLCJzb3VyY2VSb290IjoiQzovVXNlcnMvbmdoaWF0dDE1L0Rlc2t0b3AvV29ya2luZy8xTUcvbGliLWNvcmUtdWkvcHJvamVjdHMvc2QtY29yZS9ncmlkLW1hdGVyaWFsLyIsInNvdXJjZXMiOlsic3JjL2xpYi9waXBlcy9lZGl0b3ItdmFsaWRhdGUucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOztBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBTXBELE1BQU0sT0FBTyxvQkFBb0I7SUFIakM7UUFJRSw0QkFBZ0I7UUFDaEIsaUJBQVMsR0FBRyxFQUFDLENBQUMsMEZBQTBGO0lBK0IxRyxDQUFDO0lBOUJPLFNBQVMsQ0FBQyxJQUFZLEVBQUUsSUFBWSxFQUFFLEtBQWUsRUFBRSxVQUFnQzs7WUFDM0YsTUFBTSxFQUFFLE1BQU0sRUFBRSxHQUFHLFVBQVUsQ0FBQztZQUM5QixJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsRUFBRTtnQkFDcEIsSUFBSSxDQUFDLGtCQUFrQixHQUFHLElBQUksQ0FBQztnQkFDL0IsT0FBTzthQUNSO1lBQ0QsSUFBRyxNQUFNLENBQUMsSUFBSSxLQUFLLE9BQU8sRUFBRTtnQkFDMUIsSUFBSSxDQUFDLGtCQUFrQixHQUFHLElBQUksQ0FBQztnQkFDL0IsT0FBTzthQUNSO1lBQ0QsSUFBSSxNQUFNLENBQUMsSUFBSSxLQUFLLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUU7Z0JBQ2pELElBQUksQ0FBQyxrQkFBa0IsR0FBRyxJQUFJLENBQUM7Z0JBQy9CLE9BQU87YUFDUjtZQUNELHVCQUFBLElBQUksYUFBYSxJQUFJLElBQUksRUFBRSxFQUFDO1lBQzVCLE1BQU0sSUFBSSxPQUFPLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxVQUFVLENBQUMsT0FBTyx1Q0FBYyxDQUFDLENBQUM7WUFDL0QsTUFBTSxHQUFHLEdBQUcsSUFBSSxJQUFJLEVBQUUsQ0FBQztZQUN2QixNQUFNLEdBQUcsR0FBRyxHQUFHLENBQUMsT0FBTyxFQUFFLEdBQUcsd0NBQWUsT0FBTyxFQUFFLENBQUM7WUFDckQsSUFBSSxHQUFHLHVDQUFjLEVBQUU7Z0JBQ3JCLE9BQU87YUFDUjtZQUNELE1BQU0sTUFBTSxHQUFHLE1BQU0sQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLEtBQUssYUFBTCxLQUFLLHVCQUFMLEtBQUssQ0FBRSxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDM0QsSUFBSSxNQUFNLFlBQVksT0FBTyxFQUFFO2dCQUM3QixJQUFJLENBQUMsa0JBQWtCLEdBQUcsTUFBTSxNQUFNLENBQUM7Z0JBQ3ZDLE9BQU87YUFDUjtpQkFBTTtnQkFDTCxJQUFJLENBQUMsa0JBQWtCLEdBQUcsTUFBTSxDQUFDO2dCQUNqQyxPQUFPO2FBQ1I7UUFDSCxDQUFDO0tBQUE7Ozs7WUFuQ0YsSUFBSSxTQUFDO2dCQUNKLElBQUksRUFBRSxrQkFBa0I7YUFDekIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFNkR3JpZE1hdGVyaWFsT3B0aW9uIH0gZnJvbSAnLi4vbW9kZWxzL2dyaWQtb3B0aW9uLm1vZGVsJztcclxuaW1wb3J0IHsgU2RJdGVtIH0gZnJvbSAnLi4vbW9kZWxzL2dyaWQubW9kZWwnO1xyXG5AUGlwZSh7XHJcbiAgbmFtZTogJ3NkRWRpdG9yVmFsaWRhdGUnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTZEVkaXRvclZhbGlkYXRlUGlwZSBpbXBsZW1lbnRzIFBpcGVUcmFuc2Zvcm0ge1xyXG4gICNwcmV2aW91czogRGF0ZTtcclxuICAjZGVsYXkgPSAyMDA7IC8vIFNhdSBraG/huqNuZyB0aOG7nWkgZ2lhbiBkZWxheSBu4bq/dSBraMO0bmcgY8OzIHRoYXkgxJHhu5VpIHRow6wgdGjDrCBt4bubaSBi4bqvdCDEkeG6p3UgdGjhu7FjIGhp4buHbiB2YWxpZGF0ZVxyXG4gIGFzeW5jIHRyYW5zZm9ybShzZElkOiBzdHJpbmcsIGl0ZW06IFNkSXRlbSwgaXRlbXM6IFNkSXRlbVtdLCBncmlkT3B0aW9uOiBTZEdyaWRNYXRlcmlhbE9wdGlvbik6IFByb21pc2U8c3RyaW5nPiB7XHJcbiAgICBjb25zdCB7IGVkaXRvciB9ID0gZ3JpZE9wdGlvbjtcclxuICAgIGlmICghZWRpdG9yLnZhbGlkYXRlKSB7XHJcbiAgICAgIGl0ZW0uZWRpdG9yRXJyb3JNZXNzYWdlID0gbnVsbDtcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG4gICAgaWYoZWRpdG9yLnR5cGUgPT09ICdwb3B1cCcpIHtcclxuICAgICAgaXRlbS5lZGl0b3JFcnJvck1lc3NhZ2UgPSBudWxsO1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcbiAgICBpZiAoZWRpdG9yLnR5cGUgPT09ICdmb2N1cycgJiYgIWl0ZW0uZWRpdG9yU3RhdHVzKSB7XHJcbiAgICAgIGl0ZW0uZWRpdG9yRXJyb3JNZXNzYWdlID0gbnVsbDtcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG4gICAgdGhpcy4jcHJldmlvdXMgPSBuZXcgRGF0ZSgpO1xyXG4gICAgYXdhaXQgbmV3IFByb21pc2UocmVzb2x2ZSA9PiBzZXRUaW1lb3V0KHJlc29sdmUsIHRoaXMuI2RlbGF5KSk7XHJcbiAgICBjb25zdCBub3cgPSBuZXcgRGF0ZSgpO1xyXG4gICAgY29uc3QgZGlmID0gbm93LmdldFRpbWUoKSAtIHRoaXMuI3ByZXZpb3VzLmdldFRpbWUoKTtcclxuICAgIGlmIChkaWYgPCB0aGlzLiNkZWxheSkge1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcbiAgICBjb25zdCByZXN1bHQgPSBlZGl0b3IudmFsaWRhdGUoaXRlbSwgaXRlbXM/LmluZGV4T2YoaXRlbSkpO1xyXG4gICAgaWYgKHJlc3VsdCBpbnN0YW5jZW9mIFByb21pc2UpIHtcclxuICAgICAgaXRlbS5lZGl0b3JFcnJvck1lc3NhZ2UgPSBhd2FpdCByZXN1bHQ7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIGl0ZW0uZWRpdG9yRXJyb3JNZXNzYWdlID0gcmVzdWx0O1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiJdfQ==
|
|
@@ -8,6 +8,7 @@ class SdBadge {
|
|
|
8
8
|
this.color = 'unknown';
|
|
9
9
|
this.type = 'circle';
|
|
10
10
|
this.icon = 'fiber_manual_record';
|
|
11
|
+
this.size = 'sm';
|
|
11
12
|
this.sdClick = new EventEmitter();
|
|
12
13
|
this.onClick = (event) => {
|
|
13
14
|
this.sdClick.observers.length;
|
|
@@ -15,7 +16,7 @@ class SdBadge {
|
|
|
15
16
|
};
|
|
16
17
|
}
|
|
17
18
|
set _color(color) {
|
|
18
|
-
if (!color || !['normal', 'info', 'success', 'warning', 'danger'].includes(color)) {
|
|
19
|
+
if (!color || !['normal', 'primary', 'info', 'success', 'warning', 'danger'].includes(color)) {
|
|
19
20
|
this.color = 'unknown';
|
|
20
21
|
}
|
|
21
22
|
else {
|
|
@@ -23,13 +24,17 @@ class SdBadge {
|
|
|
23
24
|
}
|
|
24
25
|
}
|
|
25
26
|
;
|
|
27
|
+
set _icon(val) {
|
|
28
|
+
this.icon = val || 'fiber_manual_record';
|
|
29
|
+
}
|
|
30
|
+
;
|
|
26
31
|
}
|
|
27
32
|
SdBadge.decorators = [
|
|
28
33
|
{ type: Component, args: [{
|
|
29
34
|
selector: 'sd-badge',
|
|
30
|
-
template: "<div *ngIf=\"type === 'round'\" class=\"c-badge\" matTooltipPosition=\"above\" [matTooltip]=\"tooltip\"\r\n [
|
|
35
|
+
template: "<div *ngIf=\"type === 'round'\" class=\"c-badge\" matTooltipPosition=\"above\" [matTooltip]=\"tooltip\"\r\n [ngClass]=\"{'c-secondary': color === 'normal', 'c-info': color === 'info', 'c-success': color === 'success', 'c-danger': color === 'danger', 'c-warning': color === 'warning'}\"\r\n [class.pointer]=\"!!sdClick.observers?.length\" (click)=\"onClick($event)\">\r\n {{ title }}\r\n</div>\r\n<div *ngIf=\"type === 'circle' || type === 'icon'\" class=\"d-flex\" matTooltipPosition=\"above\" [matTooltip]=\"tooltip\"\r\n [ngClass]=\"{'c-badge-circle': type === 'circle','c-badge-icon': type === 'icon', 'c-unknown': color === 'unknown', 'c-primary': color === 'primary', 'c-secondary': color === 'normal', 'c-info': color === 'info', 'c-success': color === 'success', 'c-danger': color === 'danger', 'c-warning': color === 'warning'}\"\r\n [class.pointer]=\"!!sdClick.observers?.length\" (click)=\"onClick($event)\">\r\n <span>\r\n <span class=\"c-material-icon mr-4\" [ngClass]=\"{\r\n 'material-icons-outlined': color === 'unknown',\r\n 'material-icons-round': color !== 'unknown',\r\n 'c-xs': size === 'xs',\r\n 'c-sm': size === 'sm',\r\n 'c-md': size === 'md',\r\n 'c-lg': size === 'lg', \r\n 'c-unknown': color === 'unknown', \r\n 'c-primary': color === 'primary', \r\n 'c-secondary': color === 'normal', \r\n 'c-info': color === 'info', \r\n 'c-success': color === 'success', \r\n 'c-danger': color === 'danger', \r\n 'c-warning': color === 'warning'\r\n }\">\r\n {{ icon }}\r\n </span>\r\n {{ title }}\r\n </span>\r\n</div>",
|
|
31
36
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
32
|
-
styles: [".c-badge{border-radius:20px;display:inline-block;margin-bottom:4px;min-width:150px;overflow-wrap:break-word;padding:2px 12px;text-align:center}.c-badge.c-primary{background:#e7e9ff;color:#2962ff}.c-badge.c-secondary{background:#e9e9e9;color:#212121}.c-badge.c-info{background:#e7e9ff;color:#2962ff}.c-badge.c-warning{background:#ffeacc;color:#ff9600}.c-badge.c-success{background:#dbefdc;color:#4caf50}.c-badge.c-danger{background:#fed5d0;color:#f82c13}.c-badge-circle{min-width:150px}.c-badge-circle .c-material-icon{font-size:16px;height:16px;width:16px}.c-badge-circle .c-material-icon.c-badge-icon{font-size:12px;height:12px;width:12px}.c-badge-circle.c-unknown{color:#212121}.c-badge-circle.c-
|
|
37
|
+
styles: [".c-badge{border-radius:20px;display:inline-block;margin-bottom:4px;min-width:150px;overflow-wrap:break-word;padding:2px 12px;text-align:center}.c-badge.c-primary{background:#e7e9ff;color:#2962ff}.c-badge.c-secondary{background:#e9e9e9;color:#212121}.c-badge.c-info{background:#e7e9ff;color:#2962ff}.c-badge.c-warning{background:#ffeacc;color:#ff9600}.c-badge.c-success{background:#dbefdc;color:#4caf50}.c-badge.c-danger{background:#fed5d0;color:#f82c13}.c-badge-circle{min-width:150px}.c-badge-circle .c-material-icon{font-size:16px;height:16px;width:16px}.c-badge-circle .c-material-icon.c-badge-icon{font-size:12px;height:12px;width:12px}.c-badge-circle.c-unknown{color:rgba(0,0,0,.5)}.c-badge-circle.c-primary{color:#2962ff}.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}.c-badge-icon{min-width:150px}.c-badge-icon .c-material-icon{border-radius:50%;padding:2px}.c-badge-icon .c-material-icon.c-xs{font-size:14px;height:18px;width:18px}.c-badge-icon .c-material-icon.c-sm{font-size:16px;height:20px;width:20px}.c-badge-icon .c-material-icon.c-md{font-size:18px;height:22px;width:22px}.c-badge-icon .c-material-icon.c-lg{font-size:24px;height:28px;width:28px}.c-badge-icon .c-material-icon.c-unknown{color:rgba(0,0,0,.5)}.c-badge-icon .c-material-icon.c-primary{color:#2962ff}.c-badge-icon .c-material-icon.c-secondary{color:#212121}.c-badge-icon .c-material-icon.c-info{color:#2962ff}.c-badge-icon .c-material-icon.c-success{color:#4caf50}.c-badge-icon .c-material-icon.c-danger{color:#f82c13}.c-badge-icon .c-material-icon.c-warning{color:#ff9600}"]
|
|
33
38
|
},] }
|
|
34
39
|
];
|
|
35
40
|
SdBadge.propDecorators = {
|
|
@@ -37,7 +42,8 @@ SdBadge.propDecorators = {
|
|
|
37
42
|
_color: [{ type: Input, args: ['color',] }],
|
|
38
43
|
title: [{ type: Input }],
|
|
39
44
|
tooltip: [{ type: Input }],
|
|
40
|
-
|
|
45
|
+
_icon: [{ type: Input, args: ['icon',] }],
|
|
46
|
+
size: [{ type: Input }],
|
|
41
47
|
sdClick: [{ type: Output }]
|
|
42
48
|
};
|
|
43
49
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-angular-core-badge.js","sources":["../../../../projects/sd-core/badge/src/lib/badge.component.ts","../../../../projects/sd-core/badge/src/lib/badge.module.ts","../../../../projects/sd-core/badge/src/public-api.ts","../../../../projects/sd-core/badge/sd-angular-core-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\r\n\r\nexport type SdBadgeColor = 'normal' | 'info' | 'success' | 'warning' | 'danger';\r\n\r\n@Component({\r\n selector: 'sd-badge',\r\n templateUrl: './badge.component.html',\r\n styleUrls: ['./badge.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdBadge {\r\n color: SdBadgeColor | 'unknown' = 'unknown';\r\n @Input() type: 'circle' | 'round' = 'circle';\r\n @Input('color') set _color(color: SdBadgeColor){\r\n if(!color || !['normal', 'info', 'success', 'warning', 'danger'].includes(color)) {\r\n this.color = 'unknown';\r\n } else {\r\n this.color = color;\r\n }\r\n };\r\n @Input() title: string;\r\n @Input() tooltip: string;\r\n\r\n @Input()
|
|
1
|
+
{"version":3,"file":"sd-angular-core-badge.js","sources":["../../../../projects/sd-core/badge/src/lib/badge.component.ts","../../../../projects/sd-core/badge/src/lib/badge.module.ts","../../../../projects/sd-core/badge/src/public-api.ts","../../../../projects/sd-core/badge/sd-angular-core-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\r\n\r\nexport type SdBadgeColor = 'normal' | 'primary' | 'info' | 'success' | 'warning' | 'danger';\r\n\r\n@Component({\r\n selector: 'sd-badge',\r\n templateUrl: './badge.component.html',\r\n styleUrls: ['./badge.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdBadge {\r\n color: SdBadgeColor | 'unknown' = 'unknown';\r\n @Input() type: 'circle' | 'round' | 'icon' = 'circle';\r\n @Input('color') set _color(color: SdBadgeColor) {\r\n if (!color || !['normal', 'primary', 'info', 'success', 'warning', 'danger'].includes(color)) {\r\n this.color = 'unknown';\r\n } else {\r\n this.color = color;\r\n }\r\n };\r\n @Input() title: string;\r\n @Input() tooltip: string;\r\n\r\n icon: string = 'fiber_manual_record';\r\n @Input('icon') set _icon(val: string) {\r\n this.icon = val || 'fiber_manual_record';\r\n };\r\n\r\n @Input() size: 'xs' | 'sm' | 'md' | 'lg' = 'sm';\r\n @Output() sdClick = new EventEmitter();\r\n onClick = (event: Event) => {\r\n this.sdClick.observers.length\r\n this.sdClick.emit(event);\r\n }\r\n}\r\n","import { NgModule } from \"@angular/core\";\r\nimport { CommonModule } from \"@angular/common\";\r\nimport { MatIconModule } from \"@angular/material/icon\";\r\n\r\nimport { SdBadge } from \"./badge.component\";\r\nimport { MatTooltipModule } from \"@angular/material/tooltip\";\r\n\r\n@NgModule({\r\n imports: [CommonModule, MatIconModule, MatTooltipModule],\r\n declarations: [SdBadge],\r\n exports: [SdBadge],\r\n})\r\nexport class SdBadgeModule {}\r\n","/*\r\n * Public API Surface of superdev-angular-core\r\n */\r\n\r\nexport { SdBadgeModule } from \"./lib/badge.module\";\r\nexport * from \"./lib/badge.component\";\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAUa,OAAO;IANpB;QAOE,UAAK,GAA6B,SAAS,CAAC;QACnC,SAAI,GAAgC,QAAQ,CAAC;QAWtD,SAAI,GAAW,qBAAqB,CAAC;QAK5B,SAAI,GAA8B,IAAI,CAAC;QACtC,YAAO,GAAG,IAAI,YAAY,EAAE,CAAC;QACvC,YAAO,GAAG,CAAC,KAAY;YACrB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAA;YAC7B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC1B,CAAA;KACF;IArBC,IAAoB,MAAM,CAAC,KAAmB;QAC5C,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;YAC5F,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;SACxB;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACpB;KACF;;IAKD,IAAmB,KAAK,CAAC,GAAW;QAClC,IAAI,CAAC,IAAI,GAAG,GAAG,IAAI,qBAAqB,CAAC;KAC1C;;;;YAtBF,SAAS,SAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,imDAAqC;gBAErC,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;mBAGE,KAAK;qBACL,KAAK,SAAC,OAAO;oBAOb,KAAK;sBACL,KAAK;oBAGL,KAAK,SAAC,MAAM;mBAIZ,KAAK;sBACL,MAAM;;;MCjBI,aAAa;;;YALzB,QAAQ,SAAC;gBACR,OAAO,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,gBAAgB,CAAC;gBACxD,YAAY,EAAE,CAAC,OAAO,CAAC;gBACvB,OAAO,EAAE,CAAC,OAAO,CAAC;aACnB;;;ACXD;;;;ACAA;;;;;;"}
|
|
@@ -1746,7 +1746,7 @@ class SdGridMaterial {
|
|
|
1746
1746
|
temporary: Object.assign({}, item)
|
|
1747
1747
|
};
|
|
1748
1748
|
};
|
|
1749
|
-
this.onUpdate = (item
|
|
1749
|
+
this.onUpdate = (item) => {
|
|
1750
1750
|
const { editor } = this.gridOption;
|
|
1751
1751
|
item.editorStatus = 'update';
|
|
1752
1752
|
item.editorHandlerRow = Object.assign(Object.assign({}, item.editorHandlerRow), { temporary: Object.assign({}, item) });
|
|
@@ -1757,7 +1757,7 @@ class SdGridMaterial {
|
|
|
1757
1757
|
}
|
|
1758
1758
|
this.ref.detectChanges();
|
|
1759
1759
|
};
|
|
1760
|
-
this.onSave = (item
|
|
1760
|
+
this.onSave = (item) => __awaiter(this, void 0, void 0, function* () {
|
|
1761
1761
|
if (item.editorHandlerRow.saving) {
|
|
1762
1762
|
return;
|
|
1763
1763
|
}
|
|
@@ -1765,7 +1765,7 @@ class SdGridMaterial {
|
|
|
1765
1765
|
try {
|
|
1766
1766
|
item.editorHandlerRow.saving = true;
|
|
1767
1767
|
if (editor.validate) {
|
|
1768
|
-
const result = editor.validate(item,
|
|
1768
|
+
const result = editor.validate(item, this.items.indexOf(item));
|
|
1769
1769
|
if (result instanceof Promise) {
|
|
1770
1770
|
const message = yield result;
|
|
1771
1771
|
if (message) {
|
|
@@ -1801,7 +1801,7 @@ class SdGridMaterial {
|
|
|
1801
1801
|
this.ref.detectChanges();
|
|
1802
1802
|
}
|
|
1803
1803
|
});
|
|
1804
|
-
this.onCancel = (item
|
|
1804
|
+
this.onCancel = (item) => {
|
|
1805
1805
|
const { editor } = this.gridOption;
|
|
1806
1806
|
if (editor.type === 'inline') {
|
|
1807
1807
|
if (this.gridOption.type === 'local') {
|
|
@@ -1833,7 +1833,7 @@ class SdGridMaterial {
|
|
|
1833
1833
|
item.editorStatus = undefined;
|
|
1834
1834
|
this.ref.detectChanges();
|
|
1835
1835
|
};
|
|
1836
|
-
this.onRemove = (item
|
|
1836
|
+
this.onRemove = (item) => {
|
|
1837
1837
|
const { editor } = this.gridOption;
|
|
1838
1838
|
if (editor.type === 'inline') {
|
|
1839
1839
|
if (this.gridOption.type === 'local') {
|
|
@@ -1849,7 +1849,13 @@ class SdGridMaterial {
|
|
|
1849
1849
|
}
|
|
1850
1850
|
};
|
|
1851
1851
|
this.add = (idx, item) => {
|
|
1852
|
-
|
|
1852
|
+
if (this.items.length > idx) {
|
|
1853
|
+
this.items.splice(idx, 0, item);
|
|
1854
|
+
this.items = [...this.items];
|
|
1855
|
+
}
|
|
1856
|
+
else {
|
|
1857
|
+
this.items = [...this.items, item];
|
|
1858
|
+
}
|
|
1853
1859
|
};
|
|
1854
1860
|
this.update = (idx, item) => {
|
|
1855
1861
|
if (this.items[idx]) {
|
|
@@ -1859,7 +1865,8 @@ class SdGridMaterial {
|
|
|
1859
1865
|
};
|
|
1860
1866
|
this.remove = (idx) => {
|
|
1861
1867
|
if (this.items[idx]) {
|
|
1862
|
-
this.items
|
|
1868
|
+
this.items.splice(idx, 1);
|
|
1869
|
+
this.items = [...this.items];
|
|
1863
1870
|
}
|
|
1864
1871
|
};
|
|
1865
1872
|
this.detectChanges = () => this.ref.detectChanges();
|
|
@@ -1943,7 +1950,7 @@ _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap
|
|
|
1943
1950
|
SdGridMaterial.decorators = [
|
|
1944
1951
|
{ type: Component, args: [{
|
|
1945
1952
|
selector: 'sd-grid-material',
|
|
1946
|
-
template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n <ng-container *ngIf=\"\r\n gridConfiguration\r\n | sdGridConfigurationResult\r\n : gridOption\r\n : sdSubInformation as configuration\r\n \">\r\n <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n </sd-grid-filter>\r\n </ng-container>\r\n <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div class=\"c-table\" [ngStyle]=\"{\r\n 'max-height': gridOption?.maxHeight,\r\n 'min-height': gridOption?.minHeight\r\n }\">\r\n <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"items\" matSort\r\n [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <div *ngIf=\"sdSubInformation?.templateRef\" [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container *ngTemplateOutlet=\"\r\n sdSubInformation.templateRef;\r\n context: { item: item }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button *ngIf=\"!element.isExpanding\" mat-icon-button aria-label=\"Expand & Collapse\"\r\n (click)=\"onExpand(element)\">\r\n <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n </button>\r\n <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"text-center px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <ng-container *ngIf=\"items | selectionVisibleSelectAll: gridOption?.selection | async\">\r\n <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\">\r\n </mat-checkbox>\r\n </ng-container>\r\n\r\n </th>\r\n <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n <ng-container *ngIf=\"item | selectionVisible:gridOption?.selection\">\r\n <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n (change)=\"onSelect(item)\" [disabled]=\"\r\n selectedItems | selectionDisable: item:gridOption?.selection\r\n \">\r\n </mat-checkbox>\r\n </ng-container>\r\n\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditorValidation\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 2px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n </th>\r\n <td class=\"p-0 position-relative\" mat-cell *matCellDef=\"let item; index as idx\">\r\n <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [idx]=\"idx\" [gridOption]=\"gridOption\">\r\n </sd-desktop-editor-validation>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditor\">\r\n <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <button class=\"c-btn-add\"\r\n *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n </button>\r\n </th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item; index as idx\">\r\n <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item, idx)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">edit</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item, idx)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">delete</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item, idx)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">save</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item, idx)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n configuration.multipleHeader && column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \" [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \">\r\n <div>\r\n <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n !column.sortable || column.type === 'children-col'\r\n \" [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n </div>\r\n <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n [columnFilter]=\"columnFilter\" [column]=\"column\" (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n [columnFilter]=\"columnFilter\" [column]=\"column\" (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n </tr>\r\n </ng-container>\r\n <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"\r\n [class.selected]=\"row.isSelected\" [style]=\"row | sdStyleRowCss:gridOption\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n </ng-container>\r\n </table>\r\n <ng-template #elseEmpty>\r\n <table mat-table [dataSource]=\"[{}]\">\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditorValidation\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n </th>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditor\">\r\n <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <button class=\"c-btn-add\"\r\n *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n </button>\r\n </th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEmpty\">\r\n <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n <ng-container *ngTemplateOutlet=\"\r\n sdEmptyData.templateRef;\r\n context: { item: item }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #sdEmptyDataNoRef>\r\n <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n </th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n configuration.multipleHeader &&\r\n column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \" [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \">\r\n <div>\r\n <div [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n </div>\r\n <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n </tr>\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n </tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n </table>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <sd-button *ngIf=\"\r\n !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n </sd-button>\r\n <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n <ng-container *ngIf=\"isExporting; else unExporting\">\r\n <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n size=\"sm\" type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #unExporting>\r\n <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n\r\n <mat-menu #menu=\"matMenu\">\r\n <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n </button>\r\n <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault(true)\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n </button>\r\n <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n <span> {{ \"Configure\" | sdTranslate }}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n </sd-button>\r\n </div>\r\n <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </div>\r\n </div>\r\n <sd-popup-export *ngIf=\"gridOption.export?.visible\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n #sdPopupExport>\r\n </sd-popup-export>\r\n <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n </sd-popup-grid-configuration>\r\n </ng-container>\r\n</ng-container>\r\n<sd-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\" (clear)=\"onClearSelection()\">\r\n</sd-grid-quick-action>",
|
|
1953
|
+
template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n <ng-container *ngIf=\"\r\n gridConfiguration\r\n | sdGridConfigurationResult\r\n : gridOption\r\n : sdSubInformation as configuration\r\n \">\r\n <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n </sd-grid-filter>\r\n </ng-container>\r\n <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div class=\"c-table\" [ngStyle]=\"{\r\n 'max-height': gridOption?.maxHeight,\r\n 'min-height': gridOption?.minHeight\r\n }\">\r\n <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"items\" matSort\r\n [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <div *ngIf=\"sdSubInformation?.templateRef\" [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container *ngTemplateOutlet=\"\r\n sdSubInformation.templateRef;\r\n context: { item: item }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button *ngIf=\"!element.isExpanding\" mat-icon-button aria-label=\"Expand & Collapse\"\r\n (click)=\"onExpand(element)\">\r\n <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n </button>\r\n <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"text-center px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <ng-container *ngIf=\"items | selectionVisibleSelectAll: gridOption?.selection | async\">\r\n <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\">\r\n </mat-checkbox>\r\n </ng-container>\r\n\r\n </th>\r\n <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n <ng-container *ngIf=\"item | selectionVisible:gridOption?.selection\">\r\n <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n (change)=\"onSelect(item)\" [disabled]=\"\r\n selectedItems | selectionDisable: item:gridOption?.selection\r\n \">\r\n </mat-checkbox>\r\n </ng-container>\r\n\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditorValidation\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 2px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n </th>\r\n <td class=\"p-0 position-relative\" mat-cell *matCellDef=\"let item; index as idx\">\r\n <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [items]=\"items\" [gridOption]=\"gridOption\">\r\n </sd-desktop-editor-validation>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditor\">\r\n <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <button class=\"c-btn-add\"\r\n *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n </button>\r\n </th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item; index as idx\">\r\n <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">edit</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">delete</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">save</mat-icon>\r\n </button>\r\n <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n mat-icon-button>\r\n <mat-icon class=\"c-icon\">close</mat-icon>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n configuration.multipleHeader && column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \" [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \">\r\n <div>\r\n <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n !column.sortable || column.type === 'children-col'\r\n \" [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n </div>\r\n <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n [columnFilter]=\"columnFilter\" [column]=\"column\" (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n [columnFilter]=\"columnFilter\" [column]=\"column\" (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n </tr>\r\n </ng-container>\r\n <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"\r\n [class.selected]=\"row.isSelected\" [style]=\"row | sdStyleRowCss:gridOption\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n </ng-container>\r\n </table>\r\n <ng-template #elseEmpty>\r\n <table mat-table [dataSource]=\"[{}]\">\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditorValidation\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n </th>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEditor\">\r\n <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <button class=\"c-btn-add\"\r\n *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n </button>\r\n </th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\">\r\n <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\">\r\n <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdEmpty\">\r\n <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n <ng-container *ngTemplateOutlet=\"\r\n sdEmptyData.templateRef;\r\n context: { item: item }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #sdEmptyDataNoRef>\r\n <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n </th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n configuration.multipleHeader &&\r\n column.type !== 'children-col'\r\n ? 2\r\n : 1\r\n \" [attr.colspan]=\"\r\n column.type === 'children-col' ? column.children?.length : 1\r\n \">\r\n <div>\r\n <div [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n </div>\r\n <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n </div>\r\n </th>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n </tr>\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n </tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n </table>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <sd-button *ngIf=\"\r\n !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n </sd-button>\r\n <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n <ng-container *ngIf=\"isExporting; else unExporting\">\r\n <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n size=\"sm\" type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #unExporting>\r\n <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n\r\n <mat-menu #menu=\"matMenu\">\r\n <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n </button>\r\n <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n (click)=\"sdPopupExport.exportDefault(true)\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n </button>\r\n <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n <span> {{ \"Configure\" | sdTranslate }}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n </sd-button>\r\n </div>\r\n <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </div>\r\n </div>\r\n <sd-popup-export *ngIf=\"gridOption.export?.visible\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n #sdPopupExport>\r\n </sd-popup-export>\r\n <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n </sd-popup-grid-configuration>\r\n </ng-container>\r\n</ng-container>\r\n<sd-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\" (clear)=\"onClearSelection()\">\r\n</sd-grid-quick-action>",
|
|
1947
1954
|
animations: [
|
|
1948
1955
|
trigger('detailExpand', [
|
|
1949
1956
|
state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
|
|
@@ -2151,7 +2158,7 @@ class SdDesktopCellView {
|
|
|
2151
2158
|
SdDesktopCellView.decorators = [
|
|
2152
2159
|
{ type: Component, args: [{
|
|
2153
2160
|
selector: 'sd-desktop-cell-view',
|
|
2154
|
-
template: "<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 *sdLet=\"item[column.field] | columnTooltip:item:column as tooltip\">\r\n <ng-container *sdLet=\"item[column.field] | columnTransform:item:column:key | async as val\">\r\n <ng-container\r\n *ngIf=\"column.type === 'string' || column.type === 'number' || column.type === 'bool' || column.type === 'values'\">\r\n <ng-container *ngIf=\"!!badge\">\r\n <sd-badge [type]=\"
|
|
2161
|
+
template: "<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 *sdLet=\"item[column.field] | columnTooltip:item:column as tooltip\">\r\n <ng-container *sdLet=\"item[column.field] | columnTransform:item:column:key | async as val\">\r\n <ng-container\r\n *ngIf=\"column.type === 'string' || column.type === 'number' || column.type === 'bool' || column.type === 'values'\">\r\n <ng-container *ngIf=\"!!badge\">\r\n <sd-badge [type]=\"badge.type\" [title]=\"val\" [color]=\"badge.color\" [icon]=\"badge.icon\" [tooltip]=\"tooltip\"\r\n (sdClick)=\"column.click(item[column.field], item)\"></sd-badge>\r\n </ng-container>\r\n <ng-container *ngIf=\"!badge\">\r\n <div class=\"text-break\" [matTooltip]=\"tooltip\">\r\n <a *ngIf=\"column.click\" href=\"javascript:;\" (click)=\"column.click(item[column.field], item)\">{{val}}</a>\r\n <ng-container *ngIf=\"!column.click\">{{val}}\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <div *ngIf=\"column.type === 'date'\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy'\">\r\n {{val | 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 {{val | sdTimeDifferent:'dd/MM/yyyy HH:mm':column.option?.timeDifferent | async}}\r\n </div>\r\n <div *ngIf=\"column.type === 'time'\">\r\n {{val | date:'HH:mm'}}\r\n </div>\r\n <div *ngIf=\"column.type === 'image'\" class=\"align-middle text-center\">\r\n <img *ngIf=\"val\" [src]=\"val\" [width]=\"column.option?.width\" [height]=\"column.option?.height\"\r\n style=\"margin: 5px 0;object-fit: contain;\" (click)=\"column.click && column.click(item[column.field], item)\"\r\n [ngClass]=\"{'pointer':column.click}\">\r\n <mat-icon *ngIf=\"!val\" 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 </ng-container>\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>",
|
|
2155
2162
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2156
2163
|
styles: [".c-color-success{color:#4caf50}.c-color-danger{color:#f82c13}.c-img{font-size:30px;opacity:.5}.c-img.pointer:hover{opacity:.9}"]
|
|
2157
2164
|
},] }
|
|
@@ -2335,13 +2342,32 @@ class SdColumnBadgePipe {
|
|
|
2335
2342
|
constructor() { }
|
|
2336
2343
|
transform(value, rowData, column) {
|
|
2337
2344
|
if (column.type === 'string' && (column === null || column === void 0 ? void 0 : column.badge)) {
|
|
2338
|
-
return
|
|
2345
|
+
return {
|
|
2346
|
+
type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
|
|
2347
|
+
color: column.badge(value, rowData),
|
|
2348
|
+
icon: column.badgeIcon(value, rowData)
|
|
2349
|
+
};
|
|
2350
|
+
}
|
|
2351
|
+
if (column.type === 'number' && (column === null || column === void 0 ? void 0 : column.badge)) {
|
|
2352
|
+
return {
|
|
2353
|
+
type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
|
|
2354
|
+
color: column.badge(value, rowData),
|
|
2355
|
+
icon: column.badgeIcon(value, rowData)
|
|
2356
|
+
};
|
|
2339
2357
|
}
|
|
2340
2358
|
if (column.type === 'bool') {
|
|
2341
|
-
return
|
|
2359
|
+
return {
|
|
2360
|
+
type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
|
|
2361
|
+
color: !!value ? 'success' : 'danger',
|
|
2362
|
+
icon: null
|
|
2363
|
+
};
|
|
2342
2364
|
}
|
|
2343
2365
|
if (column.type === 'values' && (column === null || column === void 0 ? void 0 : column.badge)) {
|
|
2344
|
-
return
|
|
2366
|
+
return {
|
|
2367
|
+
type: !(column === null || column === void 0 ? void 0 : column.badgeType) ? 'round' : column.badgeType,
|
|
2368
|
+
color: column.badge(value, rowData),
|
|
2369
|
+
icon: column.badgeIcon(value, rowData)
|
|
2370
|
+
};
|
|
2345
2371
|
}
|
|
2346
2372
|
return null;
|
|
2347
2373
|
}
|
|
@@ -2806,8 +2832,7 @@ SdDesktopCellEditor.decorators = [
|
|
|
2806
2832
|
{ type: Component, args: [{
|
|
2807
2833
|
selector: 'sd-desktop-cell-editor',
|
|
2808
2834
|
template: "<sd-input *ngIf=\"column.type === 'string'\" size=\"sm\" type=\"text\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-input>\r\n<sd-input *ngIf=\"column.type === 'number'\" size=\"sm\" type=\"number\" [(model)]=\"item[column.field]\"\r\n (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-input>\r\n<sd-select *ngIf=\"column.type === 'bool'\" size=\"sm\" [items]=\"[\r\n { value: true, display: column.option?.displayOnTrue || 'True' },\r\n { value: false, display: column.option?.displayOnFalse || 'False' }\r\n ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-select>\r\n<sd-select *ngIf=\"\r\n column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\r\n \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\" [multiple]=\"\r\n column?.option?.selection === 'MULTIPLE' ||\r\n column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\r\n \" [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" disableErrorMessage>\r\n</sd-select>\r\n<sd-autocomplete *ngIf=\"\r\n column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\r\n \" size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\" [(model)]=\"item[column.field]\" (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-autocomplete>\r\n<sd-date-time *ngIf=\"\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time'\r\n \" size=\"sm\" [(model)]=\"item[column.field]\" [type]=\"column.type\" (sdChange)=\"onChange()\" disableErrorMessage>\r\n</sd-date-time>",
|
|
2809
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
2810
|
-
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}.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}"]
|
|
2835
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
|
2811
2836
|
},] }
|
|
2812
2837
|
];
|
|
2813
2838
|
SdDesktopCellEditor.ctorParameters = () => [];
|
|
@@ -2902,7 +2927,7 @@ class SdEditorValidatePipe {
|
|
|
2902
2927
|
_previous.set(this, void 0);
|
|
2903
2928
|
_delay.set(this, 200); // Sau khoảng thời gian delay nếu không có thay đổi thì thì mới bắt đầu thực hiện validate
|
|
2904
2929
|
}
|
|
2905
|
-
transform(sdId, item,
|
|
2930
|
+
transform(sdId, item, items, gridOption) {
|
|
2906
2931
|
return __awaiter(this, void 0, void 0, function* () {
|
|
2907
2932
|
const { editor } = gridOption;
|
|
2908
2933
|
if (!editor.validate) {
|
|
@@ -2924,7 +2949,7 @@ class SdEditorValidatePipe {
|
|
|
2924
2949
|
if (dif < __classPrivateFieldGet(this, _delay)) {
|
|
2925
2950
|
return;
|
|
2926
2951
|
}
|
|
2927
|
-
const result = editor.validate(item,
|
|
2952
|
+
const result = editor.validate(item, items === null || items === void 0 ? void 0 : items.indexOf(item));
|
|
2928
2953
|
if (result instanceof Promise) {
|
|
2929
2954
|
item.editorErrorMessage = yield result;
|
|
2930
2955
|
return;
|
|
@@ -2961,16 +2986,16 @@ class SdDesktopEditorValidation {
|
|
|
2961
2986
|
SdDesktopEditorValidation.decorators = [
|
|
2962
2987
|
{ type: Component, args: [{
|
|
2963
2988
|
selector: 'sd-desktop-editor-validation',
|
|
2964
|
-
template: "
|
|
2989
|
+
template: "<ng-container *sdLet=\"item.sdId | sdEditorValidate:item:items:gridOption | async\">\r\n <div class=\"c-editor-validation\" [class.c-danger]=\"!!item.editorErrorMessage\" matTooltipPosition=\"after\"\r\n [matTooltip]=\"item.editorErrorMessage\">\r\n </div>\r\n</ng-container>",
|
|
2965
2990
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2966
|
-
styles: [":host{height:100%;left:0;position:absolute;top:0}:host .c-editor-validation{height:100%;max-width:4px;min-width:4px;width:4px}:host .c-danger{background-color:#f82c13}"]
|
|
2991
|
+
styles: [":host{height:100%;left:0;padding:12px 0;position:absolute;top:0}:host .c-editor-validation{border-bottom-right-radius:2px;border-top-right-radius:2px;height:100%;max-width:4px;min-width:4px;width:4px}:host .c-danger{background-color:#f82c13}"]
|
|
2967
2992
|
},] }
|
|
2968
2993
|
];
|
|
2969
2994
|
SdDesktopEditorValidation.ctorParameters = () => [];
|
|
2970
2995
|
SdDesktopEditorValidation.propDecorators = {
|
|
2971
2996
|
sdId: [{ type: Input }],
|
|
2972
2997
|
item: [{ type: Input }],
|
|
2973
|
-
|
|
2998
|
+
items: [{ type: Input }],
|
|
2974
2999
|
gridOption: [{ type: Input }]
|
|
2975
3000
|
};
|
|
2976
3001
|
|