rd-outer-component 0.1.59 → 0.1.60
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/esm2020/lib/modules/custom-checkbox/custom-checkbox.component.mjs +37 -12
- package/fesm2015/rd-outer-component.mjs +36 -10
- package/fesm2015/rd-outer-component.mjs.map +1 -1
- package/fesm2020/rd-outer-component.mjs +34 -10
- package/fesm2020/rd-outer-component.mjs.map +1 -1
- package/lib/modules/custom-checkbox/custom-checkbox.component.d.ts +14 -4
- package/package.json +1 -1
|
@@ -1,30 +1,49 @@
|
|
|
1
1
|
import { Component, EventEmitter, forwardRef, Input, Output, } from '@angular/core';
|
|
2
2
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
|
-
import * as i1 from "@
|
|
5
|
-
import * as i2 from "@angular/
|
|
6
|
-
import * as i3 from "
|
|
4
|
+
import * as i1 from "@ngx-translate/core";
|
|
5
|
+
import * as i2 from "@angular/common";
|
|
6
|
+
import * as i3 from "@angular/forms";
|
|
7
|
+
import * as i4 from "ng-zorro-antd/checkbox";
|
|
7
8
|
export class CustomCheckboxComponent {
|
|
8
9
|
/** Local color context. Omit to inherit body `.theme-light` / `.theme-dark`. */
|
|
9
10
|
set options(val) {
|
|
10
|
-
this.
|
|
11
|
+
this.translationSubscription?.unsubscribe();
|
|
12
|
+
this._rawOptions = (val ?? []).map((option) => ({ ...option }));
|
|
13
|
+
this.displayOptions = this._rawOptions.map(option => ({ ...option }));
|
|
14
|
+
const keys = [...new Set(this._rawOptions.map(option => option.label)
|
|
15
|
+
.filter((label) => typeof label === 'string' && label.length > 0))];
|
|
16
|
+
if (keys.length) {
|
|
17
|
+
this.translationSubscription = this.translate.stream(keys).subscribe(translations => {
|
|
18
|
+
this.displayOptions = this._rawOptions.map(option => ({
|
|
19
|
+
...option,
|
|
20
|
+
label: option.label ? translations[option.label] ?? option.label : option.label,
|
|
21
|
+
}));
|
|
22
|
+
this.cdr.markForCheck();
|
|
23
|
+
});
|
|
24
|
+
}
|
|
11
25
|
}
|
|
12
26
|
get options() {
|
|
13
27
|
return this._rawOptions;
|
|
14
28
|
}
|
|
15
|
-
constructor(cdr) {
|
|
29
|
+
constructor(cdr, translate) {
|
|
16
30
|
this.cdr = cdr;
|
|
31
|
+
this.translate = translate;
|
|
17
32
|
this.label = '';
|
|
18
33
|
this.name = '';
|
|
19
34
|
this.disabled = false;
|
|
20
35
|
this.type = '';
|
|
21
36
|
this.valueChange = new EventEmitter();
|
|
37
|
+
this.displayOptions = [];
|
|
22
38
|
this._rawOptions = [];
|
|
23
39
|
this.value = undefined;
|
|
24
40
|
this.nativeValue = undefined;
|
|
25
41
|
this.onChange = () => { };
|
|
26
42
|
this.onTouched = () => { };
|
|
27
43
|
}
|
|
44
|
+
ngOnDestroy() {
|
|
45
|
+
this.translationSubscription?.unsubscribe();
|
|
46
|
+
}
|
|
28
47
|
setDisabledState(isDisabled) {
|
|
29
48
|
this.disabled = isDisabled;
|
|
30
49
|
this.cdr.markForCheck();
|
|
@@ -40,18 +59,24 @@ export class CustomCheckboxComponent {
|
|
|
40
59
|
this.onTouched = fn;
|
|
41
60
|
}
|
|
42
61
|
handleValueChange(value) {
|
|
43
|
-
this.
|
|
44
|
-
|
|
62
|
+
this.displayOptions = value;
|
|
63
|
+
// Keep translation keys in the form value; only the view contains translated labels.
|
|
64
|
+
this._rawOptions = this._rawOptions.map((option, index) => ({
|
|
65
|
+
...option,
|
|
66
|
+
checked: value[index]?.checked ?? option.checked,
|
|
67
|
+
}));
|
|
68
|
+
this.onChange(this._rawOptions);
|
|
69
|
+
this.valueChange.emit(this._rawOptions);
|
|
45
70
|
}
|
|
46
71
|
}
|
|
47
|
-
CustomCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
72
|
+
CustomCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
48
73
|
CustomCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomCheckboxComponent, selector: "app-rd-checkbox", inputs: { label: "label", name: "name", disabled: "disabled", type: "type", options: "options" }, outputs: { valueChange: "valueChange" }, providers: [
|
|
49
74
|
{
|
|
50
75
|
provide: NG_VALUE_ACCESSOR,
|
|
51
76
|
useExisting: forwardRef(() => CustomCheckboxComponent),
|
|
52
77
|
multi: true,
|
|
53
78
|
},
|
|
54
|
-
], ngImport: i0, template: "<div>\n <div\n class=\"rd-form-item-check\"\n [ngClass]=\"{\n disabled: disabled,\n isBpn: type === 'isBpn',\n }\"\n >\n <div class=\"rd-form-item-check-label\">{{ label }}</div>\n <nz-checkbox-group\n [
|
|
79
|
+
], ngImport: i0, template: "<div>\n <div\n class=\"rd-form-item-check\"\n [ngClass]=\"{\n disabled: disabled,\n isBpn: type === 'isBpn',\n }\"\n >\n <div class=\"rd-form-item-check-label\">{{ label }}</div>\n <nz-checkbox-group\n [ngModel]=\"displayOptions\"\n (ngModelChange)=\"handleValueChange($event)\"\n ></nz-checkbox-group>\n </div>\n</div>\n", styles: ["::ng-deep .rd-form-item-check .ant-checkbox-group{display:flex}::ng-deep .rd-form-item-check .ant-checkbox-group label{flex:1;color:var(--rd-copy-primary);font-size:14px;font-weight:400;line-height:22px}::ng-deep .rd-form-item-check .ant-checkbox-group .ant-checkbox-inner{border-radius:var(--rd-control-radius);background-color:var(--rd-control-input-empty);border:1px solid var(--rd-control-border-empty)}::ng-deep .rd-form-item-check .ant-checkbox-group .ant-checkbox-checked .ant-checkbox-inner{background-color:var(--rd-control-input-selected)!important;border:none!important}::ng-deep .rd-form-item-check .ant-checkbox-group .ant-checkbox-checked .ant-checkbox-inner:after{border:2px solid var(--rd-copy-inverse);border-top:0;border-left:0}::ng-deep .rd-form-item-check .ant-checkbox-group .ant-checkbox-checked:after{border-radius:var(--rd-control-radius)}::ng-deep .rd-form-item-check.isBpn .ant-checkbox-group label{color:var(--rd-copy-secondary);font-size:14px;font-weight:400;line-height:22px}::ng-deep .rd-form-item-check.isBpn .ant-checkbox-inner{width:16px;height:16px;border:1px solid var(--rd-control-border-empty);border-radius:var(--rd-control-radius);background:var(--rd-control-input-empty)}::ng-deep .rd-form-item-check.isBpn .ant-checkbox-checked .ant-checkbox-inner{background:var(--rd-copy-primary)!important;border-color:var(--rd-copy-primary)!important}::ng-deep .rd-form-item-check.isBpn .ant-checkbox-checked .ant-checkbox-inner:after{border-color:var(--rd-copy-inverse)}:host .rd-form-item-check{position:relative;background-color:transparent;width:100%}:host .rd-form-item-check-label{font-size:14px;font-weight:500;color:var(--rd-copy-primary)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NzCheckboxGroupComponent, selector: "nz-checkbox-group", inputs: ["nzDisabled"], exportAs: ["nzCheckboxGroup"] }] });
|
|
55
80
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomCheckboxComponent, decorators: [{
|
|
56
81
|
type: Component,
|
|
57
82
|
args: [{ selector: 'app-rd-checkbox', providers: [
|
|
@@ -60,8 +85,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
60
85
|
useExisting: forwardRef(() => CustomCheckboxComponent),
|
|
61
86
|
multi: true,
|
|
62
87
|
},
|
|
63
|
-
], template: "<div>\n <div\n class=\"rd-form-item-check\"\n [ngClass]=\"{\n disabled: disabled,\n isBpn: type === 'isBpn',\n }\"\n >\n <div class=\"rd-form-item-check-label\">{{ label }}</div>\n <nz-checkbox-group\n [
|
|
64
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
|
|
88
|
+
], template: "<div>\n <div\n class=\"rd-form-item-check\"\n [ngClass]=\"{\n disabled: disabled,\n isBpn: type === 'isBpn',\n }\"\n >\n <div class=\"rd-form-item-check-label\">{{ label }}</div>\n <nz-checkbox-group\n [ngModel]=\"displayOptions\"\n (ngModelChange)=\"handleValueChange($event)\"\n ></nz-checkbox-group>\n </div>\n</div>\n", styles: ["::ng-deep .rd-form-item-check .ant-checkbox-group{display:flex}::ng-deep .rd-form-item-check .ant-checkbox-group label{flex:1;color:var(--rd-copy-primary);font-size:14px;font-weight:400;line-height:22px}::ng-deep .rd-form-item-check .ant-checkbox-group .ant-checkbox-inner{border-radius:var(--rd-control-radius);background-color:var(--rd-control-input-empty);border:1px solid var(--rd-control-border-empty)}::ng-deep .rd-form-item-check .ant-checkbox-group .ant-checkbox-checked .ant-checkbox-inner{background-color:var(--rd-control-input-selected)!important;border:none!important}::ng-deep .rd-form-item-check .ant-checkbox-group .ant-checkbox-checked .ant-checkbox-inner:after{border:2px solid var(--rd-copy-inverse);border-top:0;border-left:0}::ng-deep .rd-form-item-check .ant-checkbox-group .ant-checkbox-checked:after{border-radius:var(--rd-control-radius)}::ng-deep .rd-form-item-check.isBpn .ant-checkbox-group label{color:var(--rd-copy-secondary);font-size:14px;font-weight:400;line-height:22px}::ng-deep .rd-form-item-check.isBpn .ant-checkbox-inner{width:16px;height:16px;border:1px solid var(--rd-control-border-empty);border-radius:var(--rd-control-radius);background:var(--rd-control-input-empty)}::ng-deep .rd-form-item-check.isBpn .ant-checkbox-checked .ant-checkbox-inner{background:var(--rd-copy-primary)!important;border-color:var(--rd-copy-primary)!important}::ng-deep .rd-form-item-check.isBpn .ant-checkbox-checked .ant-checkbox-inner:after{border-color:var(--rd-copy-inverse)}:host .rd-form-item-check{position:relative;background-color:transparent;width:100%}:host .rd-form-item-check-label{font-size:14px;font-weight:500;color:var(--rd-copy-primary)}\n"] }]
|
|
89
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }]; }, propDecorators: { label: [{
|
|
65
90
|
type: Input
|
|
66
91
|
}], name: [{
|
|
67
92
|
type: Input
|
|
@@ -74,4 +99,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
74
99
|
}], valueChange: [{
|
|
75
100
|
type: Output
|
|
76
101
|
}] } });
|
|
77
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
102
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLWNoZWNrYm94LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NoYXJlZC1saWIvc3JjL2xpYi9tb2R1bGVzL2N1c3RvbS1jaGVja2JveC9jdXN0b20tY2hlY2tib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2hhcmVkLWxpYi9zcmMvbGliL21vZHVsZXMvY3VzdG9tLWNoZWNrYm94L2N1c3RvbS1jaGVja2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFlBQVksRUFDWixVQUFVLEVBRVYsS0FBSyxFQUNMLE1BQU0sR0FFUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7OztBQW1CekUsTUFBTSxPQUFPLHVCQUF1QjtJQUtsQyxnRkFBZ0Y7SUFFaEYsSUFDSSxPQUFPLENBQUMsR0FBUTtRQUNsQixJQUFJLENBQUMsdUJBQXVCLEVBQUUsV0FBVyxFQUFFLENBQUM7UUFDNUMsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDLEdBQUcsSUFBSSxFQUFFLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxNQUFzQixFQUFFLEVBQUUsQ0FBQyxDQUFDLEVBQUUsR0FBRyxNQUFNLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDaEYsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDLENBQUMsRUFBRSxHQUFHLE1BQU0sRUFBRSxDQUFDLENBQUMsQ0FBQztRQUN0RSxNQUFNLElBQUksR0FBRyxDQUFDLEdBQUcsSUFBSSxHQUFHLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQyxNQUFNLENBQUMsS0FB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Q0FBQztRQUNoQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDMUMsQ0FBQzs7cUhBMUVVLHVCQUF1Qjt5R0FBdkIsdUJBQXVCLHFMQVJ2QjtRQUNUO1lBQ0UsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLHVCQUF1QixDQUFDO1lBQ3RELEtBQUssRUFBRSxJQUFJO1NBQ1o7S0FDRiwwQkMxQkgsNFdBZUE7NEZEYWEsdUJBQXVCO2tCQVpuQyxTQUFTOytCQUNFLGlCQUFpQixhQUdoQjt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSx3QkFBd0IsQ0FBQzs0QkFDdEQsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7dUlBR1EsS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFJRixPQUFPO3NCQURWLEtBQUs7Z0JBc0JJLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgZm9yd2FyZFJlZixcbiAgT25EZXN0cm95LFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBJU2VsZWN0T3B0aW9uIH0gZnJvbSAnLi4vY3VzdG9tLXNlbGVjdCc7XG5pbXBvcnQgeyBUcmFuc2xhdGVTZXJ2aWNlIH0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcblxudHlwZSBDaGVja2JveE9wdGlvbiA9IElTZWxlY3RPcHRpb24gJiB7IGxhYmVsPzogc3RyaW5nOyBjaGVja2VkPzogYm9vbGVhbiB9O1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtcmQtY2hlY2tib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vY3VzdG9tLWNoZWNrYm94LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY3VzdG9tLWNoZWNrYm94LmNvbXBvbmVudC5zY3NzJ10sXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQ3VzdG9tQ2hlY2tib3hDb21wb25lbnQpLFxuICAgICAgbXVsdGk6IHRydWUsXG4gICAgfSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgQ3VzdG9tQ2hlY2tib3hDb21wb25lbnQgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciwgT25EZXN0cm95IHtcbiAgQElucHV0KCkgbGFiZWw6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBuYW1lID0gJyc7XG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIHR5cGU6ICcnIHwgJ2lzQnBuJyA9ICcnO1xuICAvKiogTG9jYWwgY29sb3IgY29udGV4dC4gT21pdCB0byBpbmhlcml0IGJvZHkgYC50aGVtZS1saWdodGAgLyBgLnRoZW1lLWRhcmtgLiAqL1xuXG4gIEBJbnB1dCgpXG4gIHNldCBvcHRpb25zKHZhbDogYW55KSB7XG4gICAgdGhpcy50cmFuc2xhdGlvblN1YnNjcmlwdGlvbj8udW5zdWJzY3JpYmUoKTtcbiAgICB0aGlzLl9yYXdPcHRpb25zID0gKHZhbCA/PyBbXSkubWFwKChvcHRpb246IENoZWNrYm94T3B0aW9uKSA9PiAoeyAuLi5vcHRpb24gfSkpO1xuICAgIHRoaXMuZGlzcGxheU9wdGlvbnMgPSB0aGlzLl9yYXdPcHRpb25zLm1hcChvcHRpb24gPT4gKHsgLi4ub3B0aW9uIH0pKTtcbiAgICBjb25zdCBrZXlzID0gWy4uLm5ldyBTZXQodGhpcy5fcmF3T3B0aW9ucy5tYXAob3B0aW9uID0+IG9wdGlvbi5sYWJlbClcbiAgICAgIC5maWx0ZXIoKGxhYmVsKTogbGFiZWwgaXMgc3RyaW5nID0+IHR5cGVvZiBsYWJlbCA9PT0gJ3N0cmluZycgJiYgbGFiZWwubGVuZ3RoID4gMCkpXTtcblxuICAgIGlmIChrZXlzLmxlbmd0aCkge1xuICAgICAgdGhpcy50cmFuc2xhdGlvblN1YnNjcmlwdGlvbiA9IHRoaXMudHJhbnNsYXRlLnN0cmVhbShrZXlzKS5zdWJzY3JpYmUodHJhbnNsYXRpb25zID0+IHtcbiAgICAgICAgdGhpcy5kaXNwbGF5T3B0aW9ucyA9IHRoaXMuX3Jhd09wdGlvbnMubWFwKG9wdGlvbiA9PiAoe1xuICAgICAgICAgIC4uLm9wdGlvbixcbiAgICAgICAgICBsYWJlbDogb3B0aW9uLmxhYmVsID8gdHJhbnNsYXRpb25zW29wdGlvbi5sYWJlbF0gPz8gb3B0aW9uLmxhYmVsIDogb3B0aW9uLmxhYmVsLFxuICAgICAgICB9KSk7XG4gICAgICAgIHRoaXMuY2RyLm1hcmtGb3JDaGVjaygpO1xuICAgICAgfSk7XG4gICAgfVxuICB9XG4gIGdldCBvcHRpb25zKCk6IGFueSB7XG4gICAgcmV0dXJuIHRoaXMuX3Jhd09wdGlvbnM7XG4gIH1cblxuICBAT3V0cHV0KCkgdmFsdWVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPElTZWxlY3RPcHRpb25bXT4oKTtcblxuICBkaXNwbGF5T3B0aW9uczogQ2hlY2tib3hPcHRpb25bXSA9IFtdO1xuICBwcml2YXRlIF9yYXdPcHRpb25zOiBDaGVja2JveE9wdGlvbltdID0gW107XG4gIHByaXZhdGUgdHJhbnNsYXRpb25TdWJzY3JpcHRpb24/OiBTdWJzY3JpcHRpb247XG5cbiAgdmFsdWU6IElTZWxlY3RPcHRpb24gfCB1bmRlZmluZWQgPSB1bmRlZmluZWQ7XG4gIG5hdGl2ZVZhbHVlOiBJU2VsZWN0T3B0aW9uWyd2YWx1ZSddIHwgdW5kZWZpbmVkID0gdW5kZWZpbmVkO1xuXG4gIG9uQ2hhbmdlOiAodmFsdWU6IElTZWxlY3RPcHRpb25bXSkgPT4gdm9pZCA9ICgpID0+IHt9O1xuICBvblRvdWNoZWQ6ICgpID0+IHZvaWQgPSAoKSA9PiB7fTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYsIHByaXZhdGUgdHJhbnNsYXRlOiBUcmFuc2xhdGVTZXJ2aWNlKSB7fVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMudHJhbnNsYXRpb25TdWJzY3JpcHRpb24/LnVuc3Vic2NyaWJlKCk7XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLmRpc2FibGVkID0gaXNEaXNhYmxlZDtcbiAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgfVxuXG4gIHdyaXRlVmFsdWUodmFsdWU6IElTZWxlY3RPcHRpb24pOiB2b2lkIHtcbiAgICB0aGlzLnZhbHVlID0gdmFsdWU7XG4gICAgdGhpcy5uYXRpdmVWYWx1ZSA9IHZhbHVlPy52YWx1ZTtcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcbiAgfVxuXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xuICB9XG5cbiAgaGFuZGxlVmFsdWVDaGFuZ2UodmFsdWU6IENoZWNrYm94T3B0aW9uW10pOiB2b2lkIHtcbiAgICB0aGlzLmRpc3BsYXlPcHRpb25zID0gdmFsdWU7XG4gICAgLy8gS2VlcCB0cmFuc2xhdGlvbiBrZXlzIGluIHRoZSBmb3JtIHZhbHVlOyBvbmx5IHRoZSB2aWV3IGNvbnRhaW5zIHRyYW5zbGF0ZWQgbGFiZWxzLlxuICAgIHRoaXMuX3Jhd09wdGlvbnMgPSB0aGlzLl9yYXdPcHRpb25zLm1hcCgob3B0aW9uLCBpbmRleCkgPT4gKHtcbiAgICAgIC4uLm9wdGlvbixcbiAgICAgIGNoZWNrZWQ6IHZhbHVlW2luZGV4XT8uY2hlY2tlZCA/PyBvcHRpb24uY2hlY2tlZCxcbiAgICB9KSk7XG4gICAgdGhpcy5vbkNoYW5nZSh0aGlzLl9yYXdPcHRpb25zKTtcbiAgICB0aGlzLnZhbHVlQ2hhbmdlLmVtaXQodGhpcy5fcmF3T3B0aW9ucyk7XG4gIH1cbn1cbiIsIjxkaXY+XG4gIDxkaXZcbiAgICBjbGFzcz1cInJkLWZvcm0taXRlbS1jaGVja1wiXG4gICAgW25nQ2xhc3NdPVwie1xuICAgICAgZGlzYWJsZWQ6IGRpc2FibGVkLFxuICAgICAgaXNCcG46IHR5cGUgPT09ICdpc0JwbicsXG4gICAgfVwiXG4gID5cbiAgICA8ZGl2IGNsYXNzPVwicmQtZm9ybS1pdGVtLWNoZWNrLWxhYmVsXCI+e3sgbGFiZWwgfX08L2Rpdj5cbiAgICA8bnotY2hlY2tib3gtZ3JvdXBcbiAgICAgIFtuZ01vZGVsXT1cImRpc3BsYXlPcHRpb25zXCJcbiAgICAgIChuZ01vZGVsQ2hhbmdlKT1cImhhbmRsZVZhbHVlQ2hhbmdlKCRldmVudClcIlxuICAgID48L256LWNoZWNrYm94LWdyb3VwPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -2,12 +2,12 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { EventEmitter, forwardRef, Component, Input, Output, NgModule, ViewChild, ChangeDetectionStrategy, HostListener, ViewEncapsulation, createComponent, Injectable, Optional, SkipSelf, HostBinding, Pipe } from '@angular/core';
|
|
3
3
|
import * as i3 from '@angular/forms';
|
|
4
4
|
import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, NG_VALIDATORS, FormControl, Validators } from '@angular/forms';
|
|
5
|
+
import * as i1 from '@ngx-translate/core';
|
|
6
|
+
import { TranslateModule } from '@ngx-translate/core';
|
|
5
7
|
import * as i2 from '@angular/common';
|
|
6
8
|
import { CommonModule, formatDate } from '@angular/common';
|
|
7
9
|
import * as i9 from 'ng-zorro-antd/checkbox';
|
|
8
10
|
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
|
|
9
|
-
import * as i1 from '@ngx-translate/core';
|
|
10
|
-
import { TranslateModule } from '@ngx-translate/core';
|
|
11
11
|
import * as i4 from 'ng-zorro-antd/date-picker';
|
|
12
12
|
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
|
|
13
13
|
import Big from 'big.js';
|
|
@@ -56,24 +56,44 @@ import { debounceTime, filter, switchMap } from 'rxjs/operators';
|
|
|
56
56
|
class CustomCheckboxComponent {
|
|
57
57
|
/** Local color context. Omit to inherit body `.theme-light` / `.theme-dark`. */
|
|
58
58
|
set options(val) {
|
|
59
|
-
|
|
59
|
+
var _a;
|
|
60
|
+
(_a = this.translationSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
61
|
+
this._rawOptions = (val !== null && val !== void 0 ? val : []).map((option) => (Object.assign({}, option)));
|
|
62
|
+
this.displayOptions = this._rawOptions.map(option => (Object.assign({}, option)));
|
|
63
|
+
const keys = [...new Set(this._rawOptions.map(option => option.label)
|
|
64
|
+
.filter((label) => typeof label === 'string' && label.length > 0))];
|
|
65
|
+
if (keys.length) {
|
|
66
|
+
this.translationSubscription = this.translate.stream(keys).subscribe(translations => {
|
|
67
|
+
this.displayOptions = this._rawOptions.map(option => {
|
|
68
|
+
var _a;
|
|
69
|
+
return (Object.assign(Object.assign({}, option), { label: option.label ? (_a = translations[option.label]) !== null && _a !== void 0 ? _a : option.label : option.label }));
|
|
70
|
+
});
|
|
71
|
+
this.cdr.markForCheck();
|
|
72
|
+
});
|
|
73
|
+
}
|
|
60
74
|
}
|
|
61
75
|
get options() {
|
|
62
76
|
return this._rawOptions;
|
|
63
77
|
}
|
|
64
|
-
constructor(cdr) {
|
|
78
|
+
constructor(cdr, translate) {
|
|
65
79
|
this.cdr = cdr;
|
|
80
|
+
this.translate = translate;
|
|
66
81
|
this.label = '';
|
|
67
82
|
this.name = '';
|
|
68
83
|
this.disabled = false;
|
|
69
84
|
this.type = '';
|
|
70
85
|
this.valueChange = new EventEmitter();
|
|
86
|
+
this.displayOptions = [];
|
|
71
87
|
this._rawOptions = [];
|
|
72
88
|
this.value = undefined;
|
|
73
89
|
this.nativeValue = undefined;
|
|
74
90
|
this.onChange = () => { };
|
|
75
91
|
this.onTouched = () => { };
|
|
76
92
|
}
|
|
93
|
+
ngOnDestroy() {
|
|
94
|
+
var _a;
|
|
95
|
+
(_a = this.translationSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
96
|
+
}
|
|
77
97
|
setDisabledState(isDisabled) {
|
|
78
98
|
this.disabled = isDisabled;
|
|
79
99
|
this.cdr.markForCheck();
|
|
@@ -89,18 +109,24 @@ class CustomCheckboxComponent {
|
|
|
89
109
|
this.onTouched = fn;
|
|
90
110
|
}
|
|
91
111
|
handleValueChange(value) {
|
|
92
|
-
this.
|
|
93
|
-
|
|
112
|
+
this.displayOptions = value;
|
|
113
|
+
// Keep translation keys in the form value; only the view contains translated labels.
|
|
114
|
+
this._rawOptions = this._rawOptions.map((option, index) => {
|
|
115
|
+
var _a, _b;
|
|
116
|
+
return (Object.assign(Object.assign({}, option), { checked: (_b = (_a = value[index]) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : option.checked }));
|
|
117
|
+
});
|
|
118
|
+
this.onChange(this._rawOptions);
|
|
119
|
+
this.valueChange.emit(this._rawOptions);
|
|
94
120
|
}
|
|
95
121
|
}
|
|
96
|
-
CustomCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
122
|
+
CustomCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
97
123
|
CustomCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomCheckboxComponent, selector: "app-rd-checkbox", inputs: { label: "label", name: "name", disabled: "disabled", type: "type", options: "options" }, outputs: { valueChange: "valueChange" }, providers: [
|
|
98
124
|
{
|
|
99
125
|
provide: NG_VALUE_ACCESSOR,
|
|
100
126
|
useExisting: forwardRef(() => CustomCheckboxComponent),
|
|
101
127
|
multi: true,
|
|
102
128
|
},
|
|
103
|
-
], ngImport: i0, template: "<div>\n <div\n class=\"rd-form-item-check\"\n [ngClass]=\"{\n disabled: disabled,\n isBpn: type === 'isBpn',\n }\"\n >\n <div class=\"rd-form-item-check-label\">{{ label }}</div>\n <nz-checkbox-group\n [
|
|
129
|
+
], ngImport: i0, template: "<div>\n <div\n class=\"rd-form-item-check\"\n [ngClass]=\"{\n disabled: disabled,\n isBpn: type === 'isBpn',\n }\"\n >\n <div class=\"rd-form-item-check-label\">{{ label }}</div>\n <nz-checkbox-group\n [ngModel]=\"displayOptions\"\n (ngModelChange)=\"handleValueChange($event)\"\n ></nz-checkbox-group>\n </div>\n</div>\n", styles: ["::ng-deep .rd-form-item-check .ant-checkbox-group{display:flex}::ng-deep .rd-form-item-check .ant-checkbox-group label{flex:1;color:var(--rd-copy-primary);font-size:14px;font-weight:400;line-height:22px}::ng-deep .rd-form-item-check .ant-checkbox-group .ant-checkbox-inner{border-radius:var(--rd-control-radius);background-color:var(--rd-control-input-empty);border:1px solid var(--rd-control-border-empty)}::ng-deep .rd-form-item-check .ant-checkbox-group .ant-checkbox-checked .ant-checkbox-inner{background-color:var(--rd-control-input-selected)!important;border:none!important}::ng-deep .rd-form-item-check .ant-checkbox-group .ant-checkbox-checked .ant-checkbox-inner:after{border:2px solid var(--rd-copy-inverse);border-top:0;border-left:0}::ng-deep .rd-form-item-check .ant-checkbox-group .ant-checkbox-checked:after{border-radius:var(--rd-control-radius)}::ng-deep .rd-form-item-check.isBpn .ant-checkbox-group label{color:var(--rd-copy-secondary);font-size:14px;font-weight:400;line-height:22px}::ng-deep .rd-form-item-check.isBpn .ant-checkbox-inner{width:16px;height:16px;border:1px solid var(--rd-control-border-empty);border-radius:var(--rd-control-radius);background:var(--rd-control-input-empty)}::ng-deep .rd-form-item-check.isBpn .ant-checkbox-checked .ant-checkbox-inner{background:var(--rd-copy-primary)!important;border-color:var(--rd-copy-primary)!important}::ng-deep .rd-form-item-check.isBpn .ant-checkbox-checked .ant-checkbox-inner:after{border-color:var(--rd-copy-inverse)}:host .rd-form-item-check{position:relative;background-color:transparent;width:100%}:host .rd-form-item-check-label{font-size:14px;font-weight:500;color:var(--rd-copy-primary)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.NzCheckboxGroupComponent, selector: "nz-checkbox-group", inputs: ["nzDisabled"], exportAs: ["nzCheckboxGroup"] }] });
|
|
104
130
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomCheckboxComponent, decorators: [{
|
|
105
131
|
type: Component,
|
|
106
132
|
args: [{ selector: 'app-rd-checkbox', providers: [
|
|
@@ -109,8 +135,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
109
135
|
useExisting: forwardRef(() => CustomCheckboxComponent),
|
|
110
136
|
multi: true,
|
|
111
137
|
},
|
|
112
|
-
], template: "<div>\n <div\n class=\"rd-form-item-check\"\n [ngClass]=\"{\n disabled: disabled,\n isBpn: type === 'isBpn',\n }\"\n >\n <div class=\"rd-form-item-check-label\">{{ label }}</div>\n <nz-checkbox-group\n [
|
|
113
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
|
|
138
|
+
], template: "<div>\n <div\n class=\"rd-form-item-check\"\n [ngClass]=\"{\n disabled: disabled,\n isBpn: type === 'isBpn',\n }\"\n >\n <div class=\"rd-form-item-check-label\">{{ label }}</div>\n <nz-checkbox-group\n [ngModel]=\"displayOptions\"\n (ngModelChange)=\"handleValueChange($event)\"\n ></nz-checkbox-group>\n </div>\n</div>\n", styles: ["::ng-deep .rd-form-item-check .ant-checkbox-group{display:flex}::ng-deep .rd-form-item-check .ant-checkbox-group label{flex:1;color:var(--rd-copy-primary);font-size:14px;font-weight:400;line-height:22px}::ng-deep .rd-form-item-check .ant-checkbox-group .ant-checkbox-inner{border-radius:var(--rd-control-radius);background-color:var(--rd-control-input-empty);border:1px solid var(--rd-control-border-empty)}::ng-deep .rd-form-item-check .ant-checkbox-group .ant-checkbox-checked .ant-checkbox-inner{background-color:var(--rd-control-input-selected)!important;border:none!important}::ng-deep .rd-form-item-check .ant-checkbox-group .ant-checkbox-checked .ant-checkbox-inner:after{border:2px solid var(--rd-copy-inverse);border-top:0;border-left:0}::ng-deep .rd-form-item-check .ant-checkbox-group .ant-checkbox-checked:after{border-radius:var(--rd-control-radius)}::ng-deep .rd-form-item-check.isBpn .ant-checkbox-group label{color:var(--rd-copy-secondary);font-size:14px;font-weight:400;line-height:22px}::ng-deep .rd-form-item-check.isBpn .ant-checkbox-inner{width:16px;height:16px;border:1px solid var(--rd-control-border-empty);border-radius:var(--rd-control-radius);background:var(--rd-control-input-empty)}::ng-deep .rd-form-item-check.isBpn .ant-checkbox-checked .ant-checkbox-inner{background:var(--rd-copy-primary)!important;border-color:var(--rd-copy-primary)!important}::ng-deep .rd-form-item-check.isBpn .ant-checkbox-checked .ant-checkbox-inner:after{border-color:var(--rd-copy-inverse)}:host .rd-form-item-check{position:relative;background-color:transparent;width:100%}:host .rd-form-item-check-label{font-size:14px;font-weight:500;color:var(--rd-copy-primary)}\n"] }]
|
|
139
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }]; }, propDecorators: { label: [{
|
|
114
140
|
type: Input
|
|
115
141
|
}], name: [{
|
|
116
142
|
type: Input
|