@sd-angular/core 1.1.22 → 1.1.23
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 +1 -1
- package/bundles/sd-angular-core-grid-material.umd.min.js +1 -1
- package/bundles/sd-angular-core-json-editor.umd.js +21 -16
- package/bundles/sd-angular-core-json-editor.umd.js.map +1 -1
- package/bundles/sd-angular-core-json-editor.umd.min.js +2 -2
- package/bundles/sd-angular-core-json-editor.umd.min.js.map +1 -1
- package/esm2015/grid-material/src/lib/grid-material.component.js +1 -1
- package/esm2015/json-editor/src/lib/json-editor.component.js +22 -16
- package/fesm2015/sd-angular-core-grid-material.js +1 -1
- package/fesm2015/sd-angular-core-json-editor.js +21 -15
- package/fesm2015/sd-angular-core-json-editor.js.map +1 -1
- package/grid-material/sd-angular-core-grid-material.metadata.json +1 -1
- package/json-editor/sd-angular-core-json-editor.metadata.json +1 -1
- package/package.json +1 -1
- package/{sd-angular-core-1.1.22.tgz → sd-angular-core-1.1.23.tgz} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _name, _form, _model, _subscription, _onChange, _updateJson;
|
|
1
|
+
var _name, _form, _model, _subscription, _reload, _onChange, _updateJson;
|
|
2
2
|
import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
|
|
3
3
|
import { Component, Input, Output, EventEmitter, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
|
|
4
4
|
import { NgForm } from '@angular/forms';
|
|
@@ -21,6 +21,22 @@ export class SdJsonEditor {
|
|
|
21
21
|
this.sdChange = new EventEmitter();
|
|
22
22
|
this.formControl = new SdFormControl();
|
|
23
23
|
_subscription.set(this, new Subscription());
|
|
24
|
+
_reload.set(this, () => {
|
|
25
|
+
var _a;
|
|
26
|
+
const container = document.getElementById(this.id);
|
|
27
|
+
const option = {
|
|
28
|
+
mode: this.formControl.disabled ? 'view' : 'form',
|
|
29
|
+
modes: ['form', 'text', 'view'],
|
|
30
|
+
onChange: () => {
|
|
31
|
+
__classPrivateFieldSet(this, _model, this.editor.get());
|
|
32
|
+
this.formControl.setValue(__classPrivateFieldGet(this, _model));
|
|
33
|
+
},
|
|
34
|
+
};
|
|
35
|
+
this.editor = new JSONEditor(container, option);
|
|
36
|
+
__classPrivateFieldGet(this, _updateJson).call(this);
|
|
37
|
+
__classPrivateFieldGet(this, _subscription).add(this.formControl.valueChanges.pipe(debounceTime(100)).subscribe(__classPrivateFieldGet(this, _onChange)));
|
|
38
|
+
(_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.addControl(__classPrivateFieldGet(this, _name), this.formControl);
|
|
39
|
+
});
|
|
24
40
|
this.reValidate = () => {
|
|
25
41
|
this.formControl.updateValueAndValidity();
|
|
26
42
|
};
|
|
@@ -51,7 +67,7 @@ export class SdJsonEditor {
|
|
|
51
67
|
set model(value) {
|
|
52
68
|
if (__classPrivateFieldGet(this, _model) !== value) {
|
|
53
69
|
__classPrivateFieldSet(this, _model, value);
|
|
54
|
-
this.formControl.setValue(
|
|
70
|
+
this.formControl.setValue(__classPrivateFieldGet(this, _model), {
|
|
55
71
|
emitEvent: false
|
|
56
72
|
});
|
|
57
73
|
__classPrivateFieldGet(this, _updateJson).call(this);
|
|
@@ -77,17 +93,7 @@ export class SdJsonEditor {
|
|
|
77
93
|
}));
|
|
78
94
|
}
|
|
79
95
|
ngAfterViewInit() {
|
|
80
|
-
|
|
81
|
-
const container = document.getElementById(this.id);
|
|
82
|
-
const option = {
|
|
83
|
-
onChange: () => {
|
|
84
|
-
this.formControl.setValue(this.editor.get());
|
|
85
|
-
},
|
|
86
|
-
};
|
|
87
|
-
this.editor = new JSONEditor(container, option);
|
|
88
|
-
__classPrivateFieldGet(this, _updateJson).call(this);
|
|
89
|
-
__classPrivateFieldGet(this, _subscription).add(this.formControl.valueChanges.pipe(debounceTime(100)).subscribe(__classPrivateFieldGet(this, _onChange)));
|
|
90
|
-
(_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.addControl(__classPrivateFieldGet(this, _name), this.formControl);
|
|
96
|
+
__classPrivateFieldGet(this, _reload).call(this);
|
|
91
97
|
}
|
|
92
98
|
ngOnDestroy() {
|
|
93
99
|
var _a;
|
|
@@ -95,11 +101,11 @@ export class SdJsonEditor {
|
|
|
95
101
|
__classPrivateFieldGet(this, _subscription).unsubscribe();
|
|
96
102
|
}
|
|
97
103
|
}
|
|
98
|
-
_name = new WeakMap(), _form = new WeakMap(), _model = new WeakMap(), _subscription = new WeakMap(), _onChange = new WeakMap(), _updateJson = new WeakMap();
|
|
104
|
+
_name = new WeakMap(), _form = new WeakMap(), _model = new WeakMap(), _subscription = new WeakMap(), _reload = new WeakMap(), _onChange = new WeakMap(), _updateJson = new WeakMap();
|
|
99
105
|
SdJsonEditor.decorators = [
|
|
100
106
|
{ type: Component, args: [{
|
|
101
107
|
selector: 'sd-json-editor',
|
|
102
|
-
template: "<label *ngIf=\"label\" class=\"d-block T14M\">{{label}} <span class=\"text-danger mb-2\" *ngIf=\"required\">*</span></label>\r\n<div [id]=\"id\"></div>\r\n",
|
|
108
|
+
template: "<label *ngIf=\"label\" class=\"d-block T14M\">{{label}} <span class=\"text-danger mb-2\" *ngIf=\"required\">*</span></label>\r\n<div [id]=\"id\" style=\"min-height: 400px;\"></div>\r\n",
|
|
103
109
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
104
110
|
styles: [""]
|
|
105
111
|
},] }
|
|
@@ -118,4 +124,4 @@ SdJsonEditor.propDecorators = {
|
|
|
118
124
|
tooltip: [{ type: Input }],
|
|
119
125
|
sdChange: [{ type: Output }]
|
|
120
126
|
};
|
|
121
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
127
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoianNvbi1lZGl0b3IuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IkM6L1VzZXJzL25naGlhdHQxNV9vbmVtb3VudC9Eb2N1bWVudHMvbGliLWNvcmUtdWkvcHJvamVjdHMvc2QtY29yZS9qc29uLWVkaXRvci8iLCJzb3VyY2VzIjpbInNyYy9saWIvanNvbi1lZGl0b3IuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBRUwsTUFBTSxFQUNOLFlBQVksRUFDWixpQkFBaUIsRUFNakIsdUJBQXVCLEVBRXhCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxNQUFNLEVBQWEsTUFBTSxnQkFBZ0IsQ0FBQztBQUNuRCxPQUFPLEtBQUssSUFBSSxNQUFNLE1BQU0sQ0FBQztBQUM3QixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDOUMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUNwQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDeEQsT0FBTyxZQUFZLENBQUM7QUFDcEIsT0FBTyxVQUFpQyxNQUFNLFlBQVksQ0FBQztBQU8zRCxNQUFNLE9BQU8sWUFBWTtJQW9EdkIsWUFDUyxHQUFzQjtRQUF0QixRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQXBEL0IsT0FBRSxHQUFHLElBQUksSUFBSSxDQUFDLEVBQUUsRUFBRSxFQUFFLENBQUM7UUFFckIsZ0JBQVEsSUFBSSxDQUFDLEVBQUUsRUFBRSxFQUFDO1FBTWxCLHdCQUFpQjtRQVdqQix5QkFBWTtRQVVGLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUUzQyxZQUFZO1FBQ1osZUFBVSxHQUFHLEtBQUssQ0FBQztRQWVULGFBQVEsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBRTdDLGdCQUFXLEdBQUcsSUFBSSxhQUFhLEVBQUUsQ0FBQztRQUNsQyx3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O1lBQ0wsSUFBSSxDQUFDLFdBQVcsQ0FBQyxNQUFNLEVBQUUsQ0FBQztTQUMzQjtJQUNILENBQUM7SUFVRCxRQUFRO1FBQ04sNENBQW1CLEdBQUcsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLFNBQVMsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQy9ELElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDMUIsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNOLENBQUM7SUFFRCxlQUFlO1FBQ2IsMkNBQUEsSUFBSSxDQUFVLENBQUM7SUFDakIsQ0FBQztJQWtCRCxXQUFXOztRQUNULG1GQUFZLGFBQWEsc0NBQWE7UUFDdEMsNENBQW1CLFdBQVcsRUFBRSxDQUFDO0lBQ25DLENBQUM7Ozs7WUEzRkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxnQkFBZ0I7Z0JBQzFCLG9NQUEyQztnQkFFM0MsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07O2FBQ2hEOzs7WUFyQkMsaUJBQWlCOzs7bUJBMEJoQixLQUFLO21CQU1MLEtBQUs7b0JBU0wsS0FBSztvQkFFTCxLQUFLOzBCQVNMLE1BQU07dUJBSU4sS0FBSzt1QkFLTCxLQUFLO3NCQVFMLEtBQUs7dUJBQ0wsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQ29tcG9uZW50LFxyXG4gIElucHV0LFxyXG4gIFZpZXdDaGlsZCxcclxuICBPdXRwdXQsXHJcbiAgRXZlbnRFbWl0dGVyLFxyXG4gIENoYW5nZURldGVjdG9yUmVmLFxyXG4gIE9uRGVzdHJveSxcclxuICBBZnRlclZpZXdJbml0LFxyXG4gIEVsZW1lbnRSZWYsXHJcbiAgT25Jbml0LFxyXG4gIENvbnRlbnRDaGlsZCxcclxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcclxuICBIb3N0TGlzdGVuZXJcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTmdGb3JtLCBGb3JtR3JvdXAgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcbmltcG9ydCAqIGFzIHV1aWQgZnJvbSAndXVpZCc7XHJcbmltcG9ydCB7IGRlYm91bmNlVGltZSB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcclxuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7IFNkRm9ybUNvbnRyb2wgfSBmcm9tICdAc2QtYW5ndWxhci9jb3JlL2NvbW1vbic7XHJcbmltcG9ydCAnanNvbmVkaXRvcic7XHJcbmltcG9ydCBKU09ORWRpdG9yLCB7IEpTT05FZGl0b3JPcHRpb25zIH0gZnJvbSAnanNvbmVkaXRvcic7XHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnc2QtanNvbi1lZGl0b3InLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9qc29uLWVkaXRvci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vanNvbi1lZGl0b3IuY29tcG9uZW50LnNjc3MnXSxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RKc29uRWRpdG9yIGltcGxlbWVudHMgT25EZXN0cm95LCBPbkluaXQsIEFmdGVyVmlld0luaXQge1xyXG4gIGlkID0gYEkke3V1aWQudjQoKX1gO1xyXG4gIGVkaXRvcjogSlNPTkVkaXRvcjtcclxuICAjbmFtZSA9IHV1aWQudjQoKTtcclxuICBASW5wdXQoKSBzZXQgbmFtZSh2YWw6IHN0cmluZykge1xyXG4gICAgaWYgKHZhbCkge1xyXG4gICAgICB0aGlzLiNuYW1lID0gdmFsO1xyXG4gICAgfVxyXG4gIH1cclxuICAjZm9ybTogRm9ybUdyb3VwO1xyXG4gIEBJbnB1dCgpIHNldCBmb3JtKHZhbDogTmdGb3JtIHwgRm9ybUdyb3VwKSB7XHJcbiAgICBpZiAodmFsKSB7XHJcbiAgICAgIGlmICh2YWwgaW5zdGFuY2VvZiBOZ0Zvcm0pIHtcclxuICAgICAgICB0aGlzLiNmb3JtID0gdmFsLmZvcm07XHJcbiAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgdGhpcy4jZm9ybSA9IHZhbDtcclxuICAgICAgfVxyXG4gICAgfVxyXG4gIH1cclxuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nO1xyXG4gICNtb2RlbDogYW55O1xyXG4gIEBJbnB1dCgpIHNldCBtb2RlbCh2YWx1ZTogYW55KSB7XHJcbiAgICBpZiAodGhpcy4jbW9kZWwgIT09IHZhbHVlKSB7XHJcbiAgICAgIHRoaXMuI21vZGVsID0gdmFsdWU7XHJcbiAgICAgIHRoaXMuZm9ybUNvbnRyb2wuc2V0VmFsdWUodGhpcy4jbW9kZWwsIHtcclxuICAgICAgICBlbWl0RXZlbnQ6IGZhbHNlXHJcbiAgICAgIH0pO1xyXG4gICAgICB0aGlzLiN1cGRhdGVKc29uKCk7XHJcbiAgICB9XHJcbiAgfVxyXG4gIEBPdXRwdXQoKSBtb2RlbENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcbiAgLy8gVmFsaWRhdG9yXHJcbiAgaXNSZXF1aXJlZCA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIHNldCByZXF1aXJlZCh2YWw6IGJvb2xlYW4gfCAnJykge1xyXG4gICAgdGhpcy5pc1JlcXVpcmVkID0gKHZhbCA9PT0gJycpIHx8IHZhbDtcclxuICAgIC8vIHRoaXMuI3VwZGF0ZVZhbGlkYXRvcigpO1xyXG4gIH1cclxuICAvLyBPcHRpb25hbFxyXG4gIEBJbnB1dCgpIHNldCBkaXNhYmxlZCh2YWw6IGJvb2xlYW4gfCAnJykge1xyXG4gICAgdmFsID0gKHZhbCA9PT0gJycpIHx8IHZhbDtcclxuICAgIGlmICh2YWwpIHtcclxuICAgICAgdGhpcy5mb3JtQ29udHJvbC5kaXNhYmxlKCk7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0aGlzLmZvcm1Db250cm9sLmVuYWJsZSgpO1xyXG4gICAgfVxyXG4gIH1cclxuICBASW5wdXQoKSB0b29sdGlwOiBzdHJpbmcgfCAoKGlucHV0VmFsdWU6IHN0cmluZykgPT4gc3RyaW5nKTtcclxuICBAT3V0cHV0KCkgc2RDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuXHJcbiAgZm9ybUNvbnRyb2wgPSBuZXcgU2RGb3JtQ29udHJvbCgpO1xyXG4gICNzdWJzY3JpcHRpb24gPSBuZXcgU3Vic2NyaXB0aW9uKCk7XHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwdWJsaWMgcmVmOiBDaGFuZ2VEZXRlY3RvclJlZikge1xyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgICB0aGlzLiNzdWJzY3JpcHRpb24uYWRkKHRoaXMuZm9ybUNvbnRyb2wuc2RDaGFuZ2VzLnN1YnNjcmliZSgoKSA9PiB7XHJcbiAgICAgIHRoaXMucmVmLm1hcmtGb3JDaGVjaygpO1xyXG4gICAgfSkpO1xyXG4gIH1cclxuXHJcbiAgbmdBZnRlclZpZXdJbml0KCkge1xyXG4gICAgdGhpcy4jcmVsb2FkKCk7XHJcbiAgfVxyXG5cclxuICAjcmVsb2FkID0gKCkgPT4ge1xyXG4gICAgY29uc3QgY29udGFpbmVyID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQodGhpcy5pZCk7XHJcbiAgICBjb25zdCBvcHRpb246IEpTT05FZGl0b3JPcHRpb25zID0ge1xyXG4gICAgICBtb2RlOiB0aGlzLmZvcm1Db250cm9sLmRpc2FibGVkID8gJ3ZpZXcnIDogJ2Zvcm0nLFxyXG4gICAgICBtb2RlczogWydmb3JtJywgJ3RleHQnLCAndmlldyddLFxyXG4gICAgICBvbkNoYW5nZTogKCkgPT4ge1xyXG4gICAgICAgIHRoaXMuI21vZGVsID0gdGhpcy5lZGl0b3IuZ2V0KCk7XHJcbiAgICAgICAgdGhpcy5mb3JtQ29udHJvbC5zZXRWYWx1ZSh0aGlzLiNtb2RlbCk7XHJcbiAgICAgIH0sXHJcbiAgICB9O1xyXG4gICAgdGhpcy5lZGl0b3IgPSBuZXcgSlNPTkVkaXRvcihjb250YWluZXIsIG9wdGlvbik7XHJcbiAgICB0aGlzLiN1cGRhdGVKc29uKCk7XHJcbiAgICB0aGlzLiNzdWJzY3JpcHRpb24uYWRkKHRoaXMuZm9ybUNvbnRyb2wudmFsdWVDaGFuZ2VzLnBpcGUoZGVib3VuY2VUaW1lKDEwMCkpLnN1YnNjcmliZSh0aGlzLiNvbkNoYW5nZSkpO1xyXG4gICAgdGhpcy4jZm9ybT8uYWRkQ29udHJvbCh0aGlzLiNuYW1lLCB0aGlzLmZvcm1Db250cm9sKTtcclxuICB9XHJcblxyXG4gIG5nT25EZXN0cm95KCkge1xyXG4gICAgdGhpcy4jZm9ybT8ucmVtb3ZlQ29udHJvbCh0aGlzLiNuYW1lKTtcclxuICAgIHRoaXMuI3N1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xyXG4gIH1cclxuXHJcbiAgcmVWYWxpZGF0ZSA9ICgpID0+IHtcclxuICAgIHRoaXMuZm9ybUNvbnRyb2wudXBkYXRlVmFsdWVBbmRWYWxpZGl0eSgpO1xyXG4gIH1cclxuXHJcbiAgI29uQ2hhbmdlID0gKHZhbHVlOiBhbnkpID0+IHtcclxuICAgIHRoaXMubW9kZWxDaGFuZ2UuZW1pdCh2YWx1ZSk7XHJcbiAgICB0aGlzLnNkQ2hhbmdlLmVtaXQodmFsdWUpO1xyXG4gIH1cclxuXHJcbiAgI3VwZGF0ZUpzb24gPSAoKSA9PiB7XHJcbiAgICB0aGlzLmVkaXRvcj8uc2V0Py4odGhpcy5mb3JtQ29udHJvbC52YWx1ZSk7XHJcbiAgfVxyXG59XHJcbiJdfQ==
|
|
@@ -2001,7 +2001,7 @@ _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap
|
|
|
2001
2001
|
SdGridMaterial.decorators = [
|
|
2002
2002
|
{ type: Component, args: [{
|
|
2003
2003
|
selector: 'sd-grid-material',
|
|
2004
|
-
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 <ng-container *ngIf=\"items | sdGroup:gridOption; $implicit as groupedItems\">\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\" sdScroll [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]=\"groupedItems\" matSort\r\n [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n\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 <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n <ng-container *ngIf=\"gridOption?.subInformation?.always;else useExpandCollapse\">\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 <ng-template #useExpandCollapse>\r\n <div [@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 </ng-template>\r\n </ng-container>\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 && !gridOption?.subInformation?.always\" mat-icon-button\r\n aria-label=\"Expand & Collapse\" (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\"\r\n [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 matColumnDef=\"sdGroup\">\r\n <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n </th>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\"\r\n [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\">\r\n </div>\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\"\r\n [matColumnDef]=\"column.field\" [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 \" [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [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()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td pl-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell class=\"d-block px-8\" *ngIf=\"!item?.sdGroup\" [sdId]=\"item.sdId\" [key]=\"key\"\r\n [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\"\r\n [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.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()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td pl-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell class=\"d-block px-8\" [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\"\r\n [column]=\"column\" [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\">\r\n </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\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 py-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 matColumnDef=\"sdGroup\">\r\n <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\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 *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\"\r\n [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n </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 [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [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\"\r\n [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.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 <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-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\"\r\n (clear)=\"onClearSelection(groupedItems)\">\r\n </sd-grid-quick-action>\r\n <sd-popup-export *ngIf=\"gridOption.export?.visible\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n #sdPopupExport>\r\n </sd-popup-export>\r\n <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n </sd-popup-grid-configuration>\r\n </ng-container>\r\n </ng-container>\r\n</ng-container>",
|
|
2004
|
+
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 <ng-container *ngIf=\"items | sdGroup:gridOption; $implicit as groupedItems\">\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\" sdScroll [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]=\"groupedItems\" matSort\r\n [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n\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 <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n <ng-container *ngIf=\"gridOption?.subInformation?.always;else useExpandCollapse\">\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 <ng-template #useExpandCollapse>\r\n <div [@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 </ng-template>\r\n </ng-container>\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 && !gridOption?.subInformation?.always\" mat-icon-button\r\n aria-label=\"Expand & Collapse\" (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\"\r\n [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 matColumnDef=\"sdGroup\">\r\n <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n </th>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\"\r\n [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\">\r\n </div>\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\"\r\n [matColumnDef]=\"column.field\" [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 \" [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [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()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell class=\"d-block px-8\" *ngIf=\"!item?.sdGroup\" [sdId]=\"item.sdId\" [key]=\"key\"\r\n [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\"\r\n [gridOption]=\"gridOption\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"\r\n footerDef[column.field].templateRef;\r\n context: { items: items, column: column }\r\n \">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.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()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell class=\"d-block px-8\" [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\"\r\n [column]=\"column\" [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\">\r\n </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\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 py-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 matColumnDef=\"sdGroup\">\r\n <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\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 *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\"\r\n [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n </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 [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [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\"\r\n [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.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 <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-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\"\r\n (clear)=\"onClearSelection(groupedItems)\">\r\n </sd-grid-quick-action>\r\n <sd-popup-export *ngIf=\"gridOption.export?.visible\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n #sdPopupExport>\r\n </sd-popup-export>\r\n <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n </sd-popup-grid-configuration>\r\n </ng-container>\r\n </ng-container>\r\n</ng-container>",
|
|
2005
2005
|
animations: [
|
|
2006
2006
|
trigger('detailExpand', [
|
|
2007
2007
|
state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
|
|
@@ -14,7 +14,7 @@ import { debounceTime } from 'rxjs/operators';
|
|
|
14
14
|
import { Subscription } from 'rxjs';
|
|
15
15
|
import JSONEditor from 'jsoneditor';
|
|
16
16
|
|
|
17
|
-
var _name, _form, _model, _subscription, _onChange, _updateJson;
|
|
17
|
+
var _name, _form, _model, _subscription, _reload, _onChange, _updateJson;
|
|
18
18
|
class SdJsonEditor {
|
|
19
19
|
constructor(ref) {
|
|
20
20
|
this.ref = ref;
|
|
@@ -28,6 +28,22 @@ class SdJsonEditor {
|
|
|
28
28
|
this.sdChange = new EventEmitter();
|
|
29
29
|
this.formControl = new SdFormControl();
|
|
30
30
|
_subscription.set(this, new Subscription());
|
|
31
|
+
_reload.set(this, () => {
|
|
32
|
+
var _a;
|
|
33
|
+
const container = document.getElementById(this.id);
|
|
34
|
+
const option = {
|
|
35
|
+
mode: this.formControl.disabled ? 'view' : 'form',
|
|
36
|
+
modes: ['form', 'text', 'view'],
|
|
37
|
+
onChange: () => {
|
|
38
|
+
__classPrivateFieldSet(this, _model, this.editor.get());
|
|
39
|
+
this.formControl.setValue(__classPrivateFieldGet(this, _model));
|
|
40
|
+
},
|
|
41
|
+
};
|
|
42
|
+
this.editor = new JSONEditor(container, option);
|
|
43
|
+
__classPrivateFieldGet(this, _updateJson).call(this);
|
|
44
|
+
__classPrivateFieldGet(this, _subscription).add(this.formControl.valueChanges.pipe(debounceTime(100)).subscribe(__classPrivateFieldGet(this, _onChange)));
|
|
45
|
+
(_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.addControl(__classPrivateFieldGet(this, _name), this.formControl);
|
|
46
|
+
});
|
|
31
47
|
this.reValidate = () => {
|
|
32
48
|
this.formControl.updateValueAndValidity();
|
|
33
49
|
};
|
|
@@ -58,7 +74,7 @@ class SdJsonEditor {
|
|
|
58
74
|
set model(value) {
|
|
59
75
|
if (__classPrivateFieldGet(this, _model) !== value) {
|
|
60
76
|
__classPrivateFieldSet(this, _model, value);
|
|
61
|
-
this.formControl.setValue(
|
|
77
|
+
this.formControl.setValue(__classPrivateFieldGet(this, _model), {
|
|
62
78
|
emitEvent: false
|
|
63
79
|
});
|
|
64
80
|
__classPrivateFieldGet(this, _updateJson).call(this);
|
|
@@ -84,17 +100,7 @@ class SdJsonEditor {
|
|
|
84
100
|
}));
|
|
85
101
|
}
|
|
86
102
|
ngAfterViewInit() {
|
|
87
|
-
|
|
88
|
-
const container = document.getElementById(this.id);
|
|
89
|
-
const option = {
|
|
90
|
-
onChange: () => {
|
|
91
|
-
this.formControl.setValue(this.editor.get());
|
|
92
|
-
},
|
|
93
|
-
};
|
|
94
|
-
this.editor = new JSONEditor(container, option);
|
|
95
|
-
__classPrivateFieldGet(this, _updateJson).call(this);
|
|
96
|
-
__classPrivateFieldGet(this, _subscription).add(this.formControl.valueChanges.pipe(debounceTime(100)).subscribe(__classPrivateFieldGet(this, _onChange)));
|
|
97
|
-
(_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.addControl(__classPrivateFieldGet(this, _name), this.formControl);
|
|
103
|
+
__classPrivateFieldGet(this, _reload).call(this);
|
|
98
104
|
}
|
|
99
105
|
ngOnDestroy() {
|
|
100
106
|
var _a;
|
|
@@ -102,11 +108,11 @@ class SdJsonEditor {
|
|
|
102
108
|
__classPrivateFieldGet(this, _subscription).unsubscribe();
|
|
103
109
|
}
|
|
104
110
|
}
|
|
105
|
-
_name = new WeakMap(), _form = new WeakMap(), _model = new WeakMap(), _subscription = new WeakMap(), _onChange = new WeakMap(), _updateJson = new WeakMap();
|
|
111
|
+
_name = new WeakMap(), _form = new WeakMap(), _model = new WeakMap(), _subscription = new WeakMap(), _reload = new WeakMap(), _onChange = new WeakMap(), _updateJson = new WeakMap();
|
|
106
112
|
SdJsonEditor.decorators = [
|
|
107
113
|
{ type: Component, args: [{
|
|
108
114
|
selector: 'sd-json-editor',
|
|
109
|
-
template: "<label *ngIf=\"label\" class=\"d-block T14M\">{{label}} <span class=\"text-danger mb-2\" *ngIf=\"required\">*</span></label>\r\n<div [id]=\"id\"></div>\r\n",
|
|
115
|
+
template: "<label *ngIf=\"label\" class=\"d-block T14M\">{{label}} <span class=\"text-danger mb-2\" *ngIf=\"required\">*</span></label>\r\n<div [id]=\"id\" style=\"min-height: 400px;\"></div>\r\n",
|
|
110
116
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
111
117
|
styles: [""]
|
|
112
118
|
},] }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-angular-core-json-editor.js","sources":["../../../../projects/sd-core/json-editor/src/lib/json-editor.component.ts","../../../../projects/sd-core/json-editor/src/lib/json-editor.module.ts","../../../../projects/sd-core/json-editor/src/public-api.ts","../../../../projects/sd-core/json-editor/sd-angular-core-json-editor.ts"],"sourcesContent":["import {\r\n Component,\r\n Input,\r\n ViewChild,\r\n Output,\r\n EventEmitter,\r\n ChangeDetectorRef,\r\n OnDestroy,\r\n AfterViewInit,\r\n ElementRef,\r\n OnInit,\r\n ContentChild,\r\n ChangeDetectionStrategy,\r\n HostListener\r\n} from '@angular/core';\r\nimport { NgForm, FormGroup } from '@angular/forms';\r\nimport * as uuid from 'uuid';\r\nimport { debounceTime } from 'rxjs/operators';\r\nimport { Subscription } from 'rxjs';\r\nimport { SdFormControl } from '@sd-angular/core/common';\r\nimport
|
|
1
|
+
{"version":3,"file":"sd-angular-core-json-editor.js","sources":["../../../../projects/sd-core/json-editor/src/lib/json-editor.component.ts","../../../../projects/sd-core/json-editor/src/lib/json-editor.module.ts","../../../../projects/sd-core/json-editor/src/public-api.ts","../../../../projects/sd-core/json-editor/sd-angular-core-json-editor.ts"],"sourcesContent":["import {\r\n Component,\r\n Input,\r\n ViewChild,\r\n Output,\r\n EventEmitter,\r\n ChangeDetectorRef,\r\n OnDestroy,\r\n AfterViewInit,\r\n ElementRef,\r\n OnInit,\r\n ContentChild,\r\n ChangeDetectionStrategy,\r\n HostListener\r\n} from '@angular/core';\r\nimport { NgForm, FormGroup } from '@angular/forms';\r\nimport * as uuid from 'uuid';\r\nimport { debounceTime } from 'rxjs/operators';\r\nimport { Subscription } from 'rxjs';\r\nimport { SdFormControl } from '@sd-angular/core/common';\r\nimport 'jsoneditor';\r\nimport JSONEditor, { JSONEditorOptions } from 'jsoneditor';\r\n@Component({\r\n selector: 'sd-json-editor',\r\n templateUrl: './json-editor.component.html',\r\n styleUrls: ['./json-editor.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdJsonEditor implements OnDestroy, OnInit, AfterViewInit {\r\n id = `I${uuid.v4()}`;\r\n editor: JSONEditor;\r\n #name = uuid.v4();\r\n @Input() set name(val: string) {\r\n if (val) {\r\n this.#name = val;\r\n }\r\n }\r\n #form: FormGroup;\r\n @Input() set form(val: NgForm | FormGroup) {\r\n if (val) {\r\n if (val instanceof NgForm) {\r\n this.#form = val.form;\r\n } else {\r\n this.#form = val;\r\n }\r\n }\r\n }\r\n @Input() label: string;\r\n #model: any;\r\n @Input() set model(value: any) {\r\n if (this.#model !== value) {\r\n this.#model = value;\r\n this.formControl.setValue(this.#model, {\r\n emitEvent: false\r\n });\r\n this.#updateJson();\r\n }\r\n }\r\n @Output() modelChange = new EventEmitter();\r\n\r\n // Validator\r\n isRequired = false;\r\n @Input() set required(val: boolean | '') {\r\n this.isRequired = (val === '') || val;\r\n // this.#updateValidator();\r\n }\r\n // Optional\r\n @Input() set disabled(val: boolean | '') {\r\n val = (val === '') || val;\r\n if (val) {\r\n this.formControl.disable();\r\n } else {\r\n this.formControl.enable();\r\n }\r\n }\r\n @Input() tooltip: string | ((inputValue: string) => string);\r\n @Output() sdChange = new EventEmitter<any>();\r\n\r\n formControl = new SdFormControl();\r\n #subscription = new Subscription();\r\n constructor(\r\n public ref: ChangeDetectorRef) {\r\n }\r\n\r\n ngOnInit() {\r\n this.#subscription.add(this.formControl.sdChanges.subscribe(() => {\r\n this.ref.markForCheck();\r\n }));\r\n }\r\n\r\n ngAfterViewInit() {\r\n this.#reload();\r\n }\r\n\r\n #reload = () => {\r\n const container = document.getElementById(this.id);\r\n const option: JSONEditorOptions = {\r\n mode: this.formControl.disabled ? 'view' : 'form',\r\n modes: ['form', 'text', 'view'],\r\n onChange: () => {\r\n this.#model = this.editor.get();\r\n this.formControl.setValue(this.#model);\r\n },\r\n };\r\n this.editor = new JSONEditor(container, option);\r\n this.#updateJson();\r\n this.#subscription.add(this.formControl.valueChanges.pipe(debounceTime(100)).subscribe(this.#onChange));\r\n this.#form?.addControl(this.#name, this.formControl);\r\n }\r\n\r\n ngOnDestroy() {\r\n this.#form?.removeControl(this.#name);\r\n this.#subscription.unsubscribe();\r\n }\r\n\r\n reValidate = () => {\r\n this.formControl.updateValueAndValidity();\r\n }\r\n\r\n #onChange = (value: any) => {\r\n this.modelChange.emit(value);\r\n this.sdChange.emit(value);\r\n }\r\n\r\n #updateJson = () => {\r\n this.editor?.set?.(this.formControl.value);\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\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { SdCommonModule } from '@sd-angular/core/common';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { SdJsonEditor } from './json-editor.component';\r\n\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n MatFormFieldModule,\r\n MatInputModule,\r\n MatIconModule,\r\n MatTooltipModule,\r\n SdTranslateModule,\r\n SdCommonModule,\r\n MatButtonModule\r\n ],\r\n declarations: [\r\n SdJsonEditor,\r\n ],\r\n exports: [\r\n SdJsonEditor\r\n ]\r\n})\r\nexport class SdJsonEditorModule { }\r\n","/*\r\n * Public API Surface of superdev-angular-core\r\n */\r\n\r\nexport * from './lib/json-editor.module';\r\nexport * from './lib/json-editor.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["uuid.v4"],"mappings":"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"}
|