rd-outer-component 0.1.59 → 0.1.61
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/esm2020/lib/modules/custom-radio/custom-radio.component.mjs +4 -3
- package/esm2020/lib/modules/custom-radio/custom-radio.module.mjs +7 -3
- package/fesm2015/rd-outer-component.mjs +43 -14
- package/fesm2015/rd-outer-component.mjs.map +1 -1
- package/fesm2020/rd-outer-component.mjs +41 -14
- package/fesm2020/rd-outer-component.mjs.map +1 -1
- package/lib/modules/custom-checkbox/custom-checkbox.component.d.ts +14 -4
- package/lib/modules/custom-radio/custom-radio.module.d.ts +2 -1
- package/package.json +1 -1
|
@@ -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,42 @@ 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
|
-
this.
|
|
59
|
+
this.translationSubscription?.unsubscribe();
|
|
60
|
+
this._rawOptions = (val ?? []).map((option) => ({ ...option }));
|
|
61
|
+
this.displayOptions = this._rawOptions.map(option => ({ ...option }));
|
|
62
|
+
const keys = [...new Set(this._rawOptions.map(option => option.label)
|
|
63
|
+
.filter((label) => typeof label === 'string' && label.length > 0))];
|
|
64
|
+
if (keys.length) {
|
|
65
|
+
this.translationSubscription = this.translate.stream(keys).subscribe(translations => {
|
|
66
|
+
this.displayOptions = this._rawOptions.map(option => ({
|
|
67
|
+
...option,
|
|
68
|
+
label: option.label ? translations[option.label] ?? option.label : option.label,
|
|
69
|
+
}));
|
|
70
|
+
this.cdr.markForCheck();
|
|
71
|
+
});
|
|
72
|
+
}
|
|
60
73
|
}
|
|
61
74
|
get options() {
|
|
62
75
|
return this._rawOptions;
|
|
63
76
|
}
|
|
64
|
-
constructor(cdr) {
|
|
77
|
+
constructor(cdr, translate) {
|
|
65
78
|
this.cdr = cdr;
|
|
79
|
+
this.translate = translate;
|
|
66
80
|
this.label = '';
|
|
67
81
|
this.name = '';
|
|
68
82
|
this.disabled = false;
|
|
69
83
|
this.type = '';
|
|
70
84
|
this.valueChange = new EventEmitter();
|
|
85
|
+
this.displayOptions = [];
|
|
71
86
|
this._rawOptions = [];
|
|
72
87
|
this.value = undefined;
|
|
73
88
|
this.nativeValue = undefined;
|
|
74
89
|
this.onChange = () => { };
|
|
75
90
|
this.onTouched = () => { };
|
|
76
91
|
}
|
|
92
|
+
ngOnDestroy() {
|
|
93
|
+
this.translationSubscription?.unsubscribe();
|
|
94
|
+
}
|
|
77
95
|
setDisabledState(isDisabled) {
|
|
78
96
|
this.disabled = isDisabled;
|
|
79
97
|
this.cdr.markForCheck();
|
|
@@ -89,18 +107,24 @@ class CustomCheckboxComponent {
|
|
|
89
107
|
this.onTouched = fn;
|
|
90
108
|
}
|
|
91
109
|
handleValueChange(value) {
|
|
92
|
-
this.
|
|
93
|
-
|
|
110
|
+
this.displayOptions = value;
|
|
111
|
+
// Keep translation keys in the form value; only the view contains translated labels.
|
|
112
|
+
this._rawOptions = this._rawOptions.map((option, index) => ({
|
|
113
|
+
...option,
|
|
114
|
+
checked: value[index]?.checked ?? option.checked,
|
|
115
|
+
}));
|
|
116
|
+
this.onChange(this._rawOptions);
|
|
117
|
+
this.valueChange.emit(this._rawOptions);
|
|
94
118
|
}
|
|
95
119
|
}
|
|
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 });
|
|
120
|
+
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
121
|
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
122
|
{
|
|
99
123
|
provide: NG_VALUE_ACCESSOR,
|
|
100
124
|
useExisting: forwardRef(() => CustomCheckboxComponent),
|
|
101
125
|
multi: true,
|
|
102
126
|
},
|
|
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 [
|
|
127
|
+
], 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
128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomCheckboxComponent, decorators: [{
|
|
105
129
|
type: Component,
|
|
106
130
|
args: [{ selector: 'app-rd-checkbox', providers: [
|
|
@@ -109,8 +133,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
109
133
|
useExisting: forwardRef(() => CustomCheckboxComponent),
|
|
110
134
|
multi: true,
|
|
111
135
|
},
|
|
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: [{
|
|
136
|
+
], 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"] }]
|
|
137
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }]; }, propDecorators: { label: [{
|
|
114
138
|
type: Input
|
|
115
139
|
}], name: [{
|
|
116
140
|
type: Input
|
|
@@ -1264,7 +1288,7 @@ CustomRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
1264
1288
|
useExisting: forwardRef(() => CustomRadioComponent),
|
|
1265
1289
|
multi: true,
|
|
1266
1290
|
},
|
|
1267
|
-
], ngImport: i0, template: "<div\n class=\"rd-form-item-radio\"\n [ngClass]=\"{\n 'rd-form-item-radio-disabled': disabled,\n 'rd-form-item-radio-vertical': direction === 'vertical',\n large: size === 'large',\n }\"\n>\n <div class=\"rd-form-item-radio-label\" *ngIf=\"label\">\n {{ label }}\n </div>\n\n <div\n [ngClass]=\"{\n 'rd-radio-group-horizontal': direction === 'horizontal',\n 'rd-radio-group-vertical': direction === 'vertical',\n }\"\n class=\"rd-custom-radio-group\"\n >\n <label\n *ngFor=\"let option of options\"\n class=\"rd-radio-item\"\n [class.rd-radio-item-selected]=\"isOptionSelected(option.value)\"\n [class.rd-radio-item-disabled]=\"disabled || option.disabled\"\n [class.rd-radio-item-large]=\"size === 'large'\"\n [class.rd-radio-item-small]=\"size === 'small'\"\n (click)=\"handleRadioClick(option.value)\"\n >\n <div\n [style.width.px]=\"size === 'large' ? 40 : size === 'small' ? 20 : 24\"\n [style.height.px]=\"size === 'large' ? 40 : size === 'small' ? 20 : 24\"\n >\n <span\n class=\"rd-custom-radio\"\n [class.rd-custom-radio-selected]=\"isOptionSelected(option.value)\"\n [class.rd-custom-radio-disabled]=\"disabled || option.disabled\"\n >\n <span class=\"rd-custom-radio-inner\"></span>\n </span>\n </div>\n <span class=\"rd-radio-text\" [innerHtml]=\"option.label\"> </span>\n </label>\n </div>\n</div>\n", styles: ["::ng-deep .rd-form-item-check .ant-radio-group{display:flex;margin-top:11px}::ng-deep .rd-form-item-check .ant-radio-group label{flex:1;color:var(--rd-copy-primary);font-size:14px;font-weight:500}::ng-deep .rd-form-item-check .ant-radio-group .ant-radio-checked .ant-radio-inner:after{background-color:var(--rd-control-input-selected)}::ng-deep .rd-form-item-check .ant-radio-group .ant-radio-checked:after{border-color:var(--rd-control-border-selected)}:host .rd-form-item-check{position:relative;background-color:var(--rd-bg-panel);width:100%}:host .rd-form-item-check-label{font-size:14px;font-weight:500;color:var(--rd-copy-secondary)}:host .rd-form-item-radio{position:relative;background-color:transparent;width:100%}:host .rd-form-item-radio-disabled{opacity:.5;pointer-events:none}:host .rd-form-item-radio-vertical .rd-radio-group-vertical{flex-direction:column;gap:12px}:host .rd-form-item-radio-label{font-size:14px;font-weight:500;color:var(--rd-copy-primary);margin-bottom:12px}:host .large .rd-custom-radio{width:24px!important;height:24px!important;margin-right:16px!important}:host .large .rd-custom-radio-inner{width:11.2px!important;height:11.2px!important}::ng-deep .rd-form-item-radio .rd-custom-radio-group{display:flex}::ng-deep .rd-form-item-radio .rd-custom-radio-group.rd-radio-group-horizontal{flex-direction:row;gap:24px}::ng-deep .rd-form-item-radio .rd-custom-radio-group.rd-radio-group-vertical{flex-direction:column;gap:12px}::ng-deep .rd-form-item-radio .rd-radio-item{display:flex;align-items:flex-start;cursor:pointer;-webkit-user-select:auto;user-select:auto}::ng-deep .rd-form-item-radio .rd-radio-item:hover .rd-custom-radio:not(.rd-custom-radio-disabled){border-color:var(--rd-control-border-hover)}::ng-deep .rd-form-item-radio .rd-radio-item:hover .rd-custom-radio-selected:not(.rd-custom-radio-disabled){border-color:var(--rd-control-border-hover-selected);background:var(--rd-control-input-hover-selected)}::ng-deep .rd-form-item-radio .rd-radio-item-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}::ng-deep .rd-form-item-radio .rd-custom-radio{position:relative;display:inline-block;width:16px;height:16px;margin:4px 8px 4px 0;border:1px solid var(--rd-control-border-empty);background-color:var(--rd-control-input-empty);border-radius:50%;transition:all .3s ease}::ng-deep .rd-form-item-radio .rd-custom-radio-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:9px;height:9px;background-color:var(--rd-copy-inverse);mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgOSA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC43OTk4MDUgNC44MDA3OEwzLjU5OTggOC4wMDA3OEw3Ljk5OTggMC44MDA3ODEiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgOSA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC43OTk4MDUgNC44MDA3OEwzLjU5OTggOC4wMDA3OEw3Ljk5OTggMC44MDA3ODEiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;transition:transform .3s cubic-bezier(.78,.14,.15,.86)}.rd-radio-item-large ::ng-deep .rd-form-item-radio .rd-custom-radio{width:22px;height:22px}.rd-radio-item-large ::ng-deep .rd-form-item-radio .rd-custom-radio-inner{width:10px;height:10px}.rd-radio-item-small ::ng-deep .rd-form-item-radio .rd-custom-radio{width:14px;height:14px}.rd-radio-item-small ::ng-deep .rd-form-item-radio .rd-custom-radio-inner{width:6px;height:6px}::ng-deep .rd-form-item-radio .rd-custom-radio-selected{border-color:transparent!important;background:var(--rd-control-input-selected)}::ng-deep .rd-form-item-radio .rd-custom-radio-selected .rd-custom-radio-inner{transform:translate(-50%,-50%) scale(1)}::ng-deep .rd-form-item-radio .rd-custom-radio-disabled{border-color:var(--rd-control-border-disable)!important;background-color:var(--rd-control-input-disable)!important;cursor:not-allowed}::ng-deep .rd-form-item-radio .rd-custom-radio-disabled.rd-custom-radio-selected{background-color:var(--rd-control-input-disable)!important}::ng-deep .rd-form-item-radio .rd-radio-text{font-weight:400;font-size:14px;line-height:22px;color:var(--rd-copy-primary)}.rd-radio-item-disabled ::ng-deep .rd-form-item-radio .rd-radio-text{color:var(--rd-copy-disable)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1291
|
+
], ngImport: i0, template: "<div\n class=\"rd-form-item-radio\"\n [ngClass]=\"{\n 'rd-form-item-radio-disabled': disabled,\n 'rd-form-item-radio-vertical': direction === 'vertical',\n large: size === 'large',\n }\"\n>\n <div class=\"rd-form-item-radio-label\" *ngIf=\"label\">\n {{ label }}\n </div>\n\n <div\n [ngClass]=\"{\n 'rd-radio-group-horizontal': direction === 'horizontal',\n 'rd-radio-group-vertical': direction === 'vertical',\n }\"\n class=\"rd-custom-radio-group\"\n >\n <label\n *ngFor=\"let option of options\"\n class=\"rd-radio-item\"\n [class.rd-radio-item-selected]=\"isOptionSelected(option.value)\"\n [class.rd-radio-item-disabled]=\"disabled || option.disabled\"\n [class.rd-radio-item-large]=\"size === 'large'\"\n [class.rd-radio-item-small]=\"size === 'small'\"\n (click)=\"handleRadioClick(option.value)\"\n >\n <div\n [style.width.px]=\"size === 'large' ? 40 : size === 'small' ? 20 : 24\"\n [style.height.px]=\"size === 'large' ? 40 : size === 'small' ? 20 : 24\"\n >\n <span\n class=\"rd-custom-radio\"\n [class.rd-custom-radio-selected]=\"isOptionSelected(option.value)\"\n [class.rd-custom-radio-disabled]=\"disabled || option.disabled\"\n >\n <span class=\"rd-custom-radio-inner\"></span>\n </span>\n </div>\n <span class=\"rd-radio-text\" [innerHtml]=\"(option.label ?? '') | translate\"> </span>\n </label>\n </div>\n</div>\n", styles: ["::ng-deep .rd-form-item-check .ant-radio-group{display:flex;margin-top:11px}::ng-deep .rd-form-item-check .ant-radio-group label{flex:1;color:var(--rd-copy-primary);font-size:14px;font-weight:500}::ng-deep .rd-form-item-check .ant-radio-group .ant-radio-checked .ant-radio-inner:after{background-color:var(--rd-control-input-selected)}::ng-deep .rd-form-item-check .ant-radio-group .ant-radio-checked:after{border-color:var(--rd-control-border-selected)}:host .rd-form-item-check{position:relative;background-color:var(--rd-bg-panel);width:100%}:host .rd-form-item-check-label{font-size:14px;font-weight:500;color:var(--rd-copy-secondary)}:host .rd-form-item-radio{position:relative;background-color:transparent;width:100%}:host .rd-form-item-radio-disabled{opacity:.5;pointer-events:none}:host .rd-form-item-radio-vertical .rd-radio-group-vertical{flex-direction:column;gap:12px}:host .rd-form-item-radio-label{font-size:14px;font-weight:500;color:var(--rd-copy-primary);margin-bottom:12px}:host .large .rd-custom-radio{width:24px!important;height:24px!important;margin-right:16px!important}:host .large .rd-custom-radio-inner{width:11.2px!important;height:11.2px!important}::ng-deep .rd-form-item-radio .rd-custom-radio-group{display:flex}::ng-deep .rd-form-item-radio .rd-custom-radio-group.rd-radio-group-horizontal{flex-direction:row;gap:24px}::ng-deep .rd-form-item-radio .rd-custom-radio-group.rd-radio-group-vertical{flex-direction:column;gap:12px}::ng-deep .rd-form-item-radio .rd-radio-item{display:flex;align-items:flex-start;cursor:pointer;-webkit-user-select:auto;user-select:auto}::ng-deep .rd-form-item-radio .rd-radio-item:hover .rd-custom-radio:not(.rd-custom-radio-disabled){border-color:var(--rd-control-border-hover)}::ng-deep .rd-form-item-radio .rd-radio-item:hover .rd-custom-radio-selected:not(.rd-custom-radio-disabled){border-color:var(--rd-control-border-hover-selected);background:var(--rd-control-input-hover-selected)}::ng-deep .rd-form-item-radio .rd-radio-item-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}::ng-deep .rd-form-item-radio .rd-custom-radio{position:relative;display:inline-block;width:16px;height:16px;margin:4px 8px 4px 0;border:1px solid var(--rd-control-border-empty);background-color:var(--rd-control-input-empty);border-radius:50%;transition:all .3s ease}::ng-deep .rd-form-item-radio .rd-custom-radio-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:9px;height:9px;background-color:var(--rd-copy-inverse);mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgOSA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC43OTk4MDUgNC44MDA3OEwzLjU5OTggOC4wMDA3OEw3Ljk5OTggMC44MDA3ODEiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgOSA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC43OTk4MDUgNC44MDA3OEwzLjU5OTggOC4wMDA3OEw3Ljk5OTggMC44MDA3ODEiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;transition:transform .3s cubic-bezier(.78,.14,.15,.86)}.rd-radio-item-large ::ng-deep .rd-form-item-radio .rd-custom-radio{width:22px;height:22px}.rd-radio-item-large ::ng-deep .rd-form-item-radio .rd-custom-radio-inner{width:10px;height:10px}.rd-radio-item-small ::ng-deep .rd-form-item-radio .rd-custom-radio{width:14px;height:14px}.rd-radio-item-small ::ng-deep .rd-form-item-radio .rd-custom-radio-inner{width:6px;height:6px}::ng-deep .rd-form-item-radio .rd-custom-radio-selected{border-color:transparent!important;background:var(--rd-control-input-selected)}::ng-deep .rd-form-item-radio .rd-custom-radio-selected .rd-custom-radio-inner{transform:translate(-50%,-50%) scale(1)}::ng-deep .rd-form-item-radio .rd-custom-radio-disabled{border-color:var(--rd-control-border-disable)!important;background-color:var(--rd-control-input-disable)!important;cursor:not-allowed}::ng-deep .rd-form-item-radio .rd-custom-radio-disabled.rd-custom-radio-selected{background-color:var(--rd-control-input-disable)!important}::ng-deep .rd-form-item-radio .rd-radio-text{font-weight:400;font-size:14px;line-height:22px;color:var(--rd-copy-primary)}.rd-radio-item-disabled ::ng-deep .rd-form-item-radio .rd-radio-text{color:var(--rd-copy-disable)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
1268
1292
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomRadioComponent, decorators: [{
|
|
1269
1293
|
type: Component,
|
|
1270
1294
|
args: [{ selector: 'app-rd-radio', providers: [
|
|
@@ -1273,7 +1297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1273
1297
|
useExisting: forwardRef(() => CustomRadioComponent),
|
|
1274
1298
|
multi: true,
|
|
1275
1299
|
},
|
|
1276
|
-
], template: "<div\n class=\"rd-form-item-radio\"\n [ngClass]=\"{\n 'rd-form-item-radio-disabled': disabled,\n 'rd-form-item-radio-vertical': direction === 'vertical',\n large: size === 'large',\n }\"\n>\n <div class=\"rd-form-item-radio-label\" *ngIf=\"label\">\n {{ label }}\n </div>\n\n <div\n [ngClass]=\"{\n 'rd-radio-group-horizontal': direction === 'horizontal',\n 'rd-radio-group-vertical': direction === 'vertical',\n }\"\n class=\"rd-custom-radio-group\"\n >\n <label\n *ngFor=\"let option of options\"\n class=\"rd-radio-item\"\n [class.rd-radio-item-selected]=\"isOptionSelected(option.value)\"\n [class.rd-radio-item-disabled]=\"disabled || option.disabled\"\n [class.rd-radio-item-large]=\"size === 'large'\"\n [class.rd-radio-item-small]=\"size === 'small'\"\n (click)=\"handleRadioClick(option.value)\"\n >\n <div\n [style.width.px]=\"size === 'large' ? 40 : size === 'small' ? 20 : 24\"\n [style.height.px]=\"size === 'large' ? 40 : size === 'small' ? 20 : 24\"\n >\n <span\n class=\"rd-custom-radio\"\n [class.rd-custom-radio-selected]=\"isOptionSelected(option.value)\"\n [class.rd-custom-radio-disabled]=\"disabled || option.disabled\"\n >\n <span class=\"rd-custom-radio-inner\"></span>\n </span>\n </div>\n <span class=\"rd-radio-text\" [innerHtml]=\"option.label\"> </span>\n </label>\n </div>\n</div>\n", styles: ["::ng-deep .rd-form-item-check .ant-radio-group{display:flex;margin-top:11px}::ng-deep .rd-form-item-check .ant-radio-group label{flex:1;color:var(--rd-copy-primary);font-size:14px;font-weight:500}::ng-deep .rd-form-item-check .ant-radio-group .ant-radio-checked .ant-radio-inner:after{background-color:var(--rd-control-input-selected)}::ng-deep .rd-form-item-check .ant-radio-group .ant-radio-checked:after{border-color:var(--rd-control-border-selected)}:host .rd-form-item-check{position:relative;background-color:var(--rd-bg-panel);width:100%}:host .rd-form-item-check-label{font-size:14px;font-weight:500;color:var(--rd-copy-secondary)}:host .rd-form-item-radio{position:relative;background-color:transparent;width:100%}:host .rd-form-item-radio-disabled{opacity:.5;pointer-events:none}:host .rd-form-item-radio-vertical .rd-radio-group-vertical{flex-direction:column;gap:12px}:host .rd-form-item-radio-label{font-size:14px;font-weight:500;color:var(--rd-copy-primary);margin-bottom:12px}:host .large .rd-custom-radio{width:24px!important;height:24px!important;margin-right:16px!important}:host .large .rd-custom-radio-inner{width:11.2px!important;height:11.2px!important}::ng-deep .rd-form-item-radio .rd-custom-radio-group{display:flex}::ng-deep .rd-form-item-radio .rd-custom-radio-group.rd-radio-group-horizontal{flex-direction:row;gap:24px}::ng-deep .rd-form-item-radio .rd-custom-radio-group.rd-radio-group-vertical{flex-direction:column;gap:12px}::ng-deep .rd-form-item-radio .rd-radio-item{display:flex;align-items:flex-start;cursor:pointer;-webkit-user-select:auto;user-select:auto}::ng-deep .rd-form-item-radio .rd-radio-item:hover .rd-custom-radio:not(.rd-custom-radio-disabled){border-color:var(--rd-control-border-hover)}::ng-deep .rd-form-item-radio .rd-radio-item:hover .rd-custom-radio-selected:not(.rd-custom-radio-disabled){border-color:var(--rd-control-border-hover-selected);background:var(--rd-control-input-hover-selected)}::ng-deep .rd-form-item-radio .rd-radio-item-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}::ng-deep .rd-form-item-radio .rd-custom-radio{position:relative;display:inline-block;width:16px;height:16px;margin:4px 8px 4px 0;border:1px solid var(--rd-control-border-empty);background-color:var(--rd-control-input-empty);border-radius:50%;transition:all .3s ease}::ng-deep .rd-form-item-radio .rd-custom-radio-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:9px;height:9px;background-color:var(--rd-copy-inverse);mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgOSA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC43OTk4MDUgNC44MDA3OEwzLjU5OTggOC4wMDA3OEw3Ljk5OTggMC44MDA3ODEiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgOSA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC43OTk4MDUgNC44MDA3OEwzLjU5OTggOC4wMDA3OEw3Ljk5OTggMC44MDA3ODEiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;transition:transform .3s cubic-bezier(.78,.14,.15,.86)}.rd-radio-item-large ::ng-deep .rd-form-item-radio .rd-custom-radio{width:22px;height:22px}.rd-radio-item-large ::ng-deep .rd-form-item-radio .rd-custom-radio-inner{width:10px;height:10px}.rd-radio-item-small ::ng-deep .rd-form-item-radio .rd-custom-radio{width:14px;height:14px}.rd-radio-item-small ::ng-deep .rd-form-item-radio .rd-custom-radio-inner{width:6px;height:6px}::ng-deep .rd-form-item-radio .rd-custom-radio-selected{border-color:transparent!important;background:var(--rd-control-input-selected)}::ng-deep .rd-form-item-radio .rd-custom-radio-selected .rd-custom-radio-inner{transform:translate(-50%,-50%) scale(1)}::ng-deep .rd-form-item-radio .rd-custom-radio-disabled{border-color:var(--rd-control-border-disable)!important;background-color:var(--rd-control-input-disable)!important;cursor:not-allowed}::ng-deep .rd-form-item-radio .rd-custom-radio-disabled.rd-custom-radio-selected{background-color:var(--rd-control-input-disable)!important}::ng-deep .rd-form-item-radio .rd-radio-text{font-weight:400;font-size:14px;line-height:22px;color:var(--rd-copy-primary)}.rd-radio-item-disabled ::ng-deep .rd-form-item-radio .rd-radio-text{color:var(--rd-copy-disable)!important}\n"] }]
|
|
1300
|
+
], template: "<div\n class=\"rd-form-item-radio\"\n [ngClass]=\"{\n 'rd-form-item-radio-disabled': disabled,\n 'rd-form-item-radio-vertical': direction === 'vertical',\n large: size === 'large',\n }\"\n>\n <div class=\"rd-form-item-radio-label\" *ngIf=\"label\">\n {{ label }}\n </div>\n\n <div\n [ngClass]=\"{\n 'rd-radio-group-horizontal': direction === 'horizontal',\n 'rd-radio-group-vertical': direction === 'vertical',\n }\"\n class=\"rd-custom-radio-group\"\n >\n <label\n *ngFor=\"let option of options\"\n class=\"rd-radio-item\"\n [class.rd-radio-item-selected]=\"isOptionSelected(option.value)\"\n [class.rd-radio-item-disabled]=\"disabled || option.disabled\"\n [class.rd-radio-item-large]=\"size === 'large'\"\n [class.rd-radio-item-small]=\"size === 'small'\"\n (click)=\"handleRadioClick(option.value)\"\n >\n <div\n [style.width.px]=\"size === 'large' ? 40 : size === 'small' ? 20 : 24\"\n [style.height.px]=\"size === 'large' ? 40 : size === 'small' ? 20 : 24\"\n >\n <span\n class=\"rd-custom-radio\"\n [class.rd-custom-radio-selected]=\"isOptionSelected(option.value)\"\n [class.rd-custom-radio-disabled]=\"disabled || option.disabled\"\n >\n <span class=\"rd-custom-radio-inner\"></span>\n </span>\n </div>\n <span class=\"rd-radio-text\" [innerHtml]=\"(option.label ?? '') | translate\"> </span>\n </label>\n </div>\n</div>\n", styles: ["::ng-deep .rd-form-item-check .ant-radio-group{display:flex;margin-top:11px}::ng-deep .rd-form-item-check .ant-radio-group label{flex:1;color:var(--rd-copy-primary);font-size:14px;font-weight:500}::ng-deep .rd-form-item-check .ant-radio-group .ant-radio-checked .ant-radio-inner:after{background-color:var(--rd-control-input-selected)}::ng-deep .rd-form-item-check .ant-radio-group .ant-radio-checked:after{border-color:var(--rd-control-border-selected)}:host .rd-form-item-check{position:relative;background-color:var(--rd-bg-panel);width:100%}:host .rd-form-item-check-label{font-size:14px;font-weight:500;color:var(--rd-copy-secondary)}:host .rd-form-item-radio{position:relative;background-color:transparent;width:100%}:host .rd-form-item-radio-disabled{opacity:.5;pointer-events:none}:host .rd-form-item-radio-vertical .rd-radio-group-vertical{flex-direction:column;gap:12px}:host .rd-form-item-radio-label{font-size:14px;font-weight:500;color:var(--rd-copy-primary);margin-bottom:12px}:host .large .rd-custom-radio{width:24px!important;height:24px!important;margin-right:16px!important}:host .large .rd-custom-radio-inner{width:11.2px!important;height:11.2px!important}::ng-deep .rd-form-item-radio .rd-custom-radio-group{display:flex}::ng-deep .rd-form-item-radio .rd-custom-radio-group.rd-radio-group-horizontal{flex-direction:row;gap:24px}::ng-deep .rd-form-item-radio .rd-custom-radio-group.rd-radio-group-vertical{flex-direction:column;gap:12px}::ng-deep .rd-form-item-radio .rd-radio-item{display:flex;align-items:flex-start;cursor:pointer;-webkit-user-select:auto;user-select:auto}::ng-deep .rd-form-item-radio .rd-radio-item:hover .rd-custom-radio:not(.rd-custom-radio-disabled){border-color:var(--rd-control-border-hover)}::ng-deep .rd-form-item-radio .rd-radio-item:hover .rd-custom-radio-selected:not(.rd-custom-radio-disabled){border-color:var(--rd-control-border-hover-selected);background:var(--rd-control-input-hover-selected)}::ng-deep .rd-form-item-radio .rd-radio-item-disabled{cursor:not-allowed;opacity:.5;pointer-events:none}::ng-deep .rd-form-item-radio .rd-custom-radio{position:relative;display:inline-block;width:16px;height:16px;margin:4px 8px 4px 0;border:1px solid var(--rd-control-border-empty);background-color:var(--rd-control-input-empty);border-radius:50%;transition:all .3s ease}::ng-deep .rd-form-item-radio .rd-custom-radio-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:9px;height:9px;background-color:var(--rd-copy-inverse);mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgOSA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC43OTk4MDUgNC44MDA3OEwzLjU5OTggOC4wMDA3OEw3Ljk5OTggMC44MDA3ODEiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgOSA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC43OTk4MDUgNC44MDA3OEwzLjU5OTggOC4wMDA3OEw3Ljk5OTggMC44MDA3ODEiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;transition:transform .3s cubic-bezier(.78,.14,.15,.86)}.rd-radio-item-large ::ng-deep .rd-form-item-radio .rd-custom-radio{width:22px;height:22px}.rd-radio-item-large ::ng-deep .rd-form-item-radio .rd-custom-radio-inner{width:10px;height:10px}.rd-radio-item-small ::ng-deep .rd-form-item-radio .rd-custom-radio{width:14px;height:14px}.rd-radio-item-small ::ng-deep .rd-form-item-radio .rd-custom-radio-inner{width:6px;height:6px}::ng-deep .rd-form-item-radio .rd-custom-radio-selected{border-color:transparent!important;background:var(--rd-control-input-selected)}::ng-deep .rd-form-item-radio .rd-custom-radio-selected .rd-custom-radio-inner{transform:translate(-50%,-50%) scale(1)}::ng-deep .rd-form-item-radio .rd-custom-radio-disabled{border-color:var(--rd-control-border-disable)!important;background-color:var(--rd-control-input-disable)!important;cursor:not-allowed}::ng-deep .rd-form-item-radio .rd-custom-radio-disabled.rd-custom-radio-selected{background-color:var(--rd-control-input-disable)!important}::ng-deep .rd-form-item-radio .rd-radio-text{font-weight:400;font-size:14px;line-height:22px;color:var(--rd-copy-primary)}.rd-radio-item-disabled ::ng-deep .rd-form-item-radio .rd-radio-text{color:var(--rd-copy-disable)!important}\n"] }]
|
|
1277
1301
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
|
|
1278
1302
|
type: Input
|
|
1279
1303
|
}], name: [{
|
|
@@ -1299,12 +1323,14 @@ RdRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
|
|
|
1299
1323
|
FormsModule,
|
|
1300
1324
|
ReactiveFormsModule,
|
|
1301
1325
|
NzSpinModule,
|
|
1302
|
-
NzRadioModule
|
|
1326
|
+
NzRadioModule,
|
|
1327
|
+
TranslateModule], exports: [CustomRadioComponent] });
|
|
1303
1328
|
RdRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RdRadioModule, imports: [CommonModule,
|
|
1304
1329
|
FormsModule,
|
|
1305
1330
|
ReactiveFormsModule,
|
|
1306
1331
|
NzSpinModule,
|
|
1307
|
-
NzRadioModule
|
|
1332
|
+
NzRadioModule,
|
|
1333
|
+
TranslateModule] });
|
|
1308
1334
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RdRadioModule, decorators: [{
|
|
1309
1335
|
type: NgModule,
|
|
1310
1336
|
args: [{
|
|
@@ -1315,6 +1341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1315
1341
|
ReactiveFormsModule,
|
|
1316
1342
|
NzSpinModule,
|
|
1317
1343
|
NzRadioModule,
|
|
1344
|
+
TranslateModule,
|
|
1318
1345
|
],
|
|
1319
1346
|
exports: [CustomRadioComponent],
|
|
1320
1347
|
}]
|