@indigina/ui-kit 1.0.131 → 1.0.132
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/components/kit-checkbox/kit-checkbox.component.mjs +15 -4
- package/esm2020/lib/components/kit-radio-button/kit-radio-button.component.mjs +3 -3
- package/esm2020/lib/components/kit-radio-button/kit-radio-button.model.mjs +1 -1
- package/fesm2015/indigina-ui-kit.mjs +16 -5
- package/fesm2015/indigina-ui-kit.mjs.map +1 -1
- package/fesm2020/indigina-ui-kit.mjs +16 -5
- package/fesm2020/indigina-ui-kit.mjs.map +1 -1
- package/lib/components/kit-checkbox/kit-checkbox.component.d.ts +6 -1
- package/lib/components/kit-radio-button/kit-radio-button.model.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1882,6 +1882,10 @@ class KitCheckboxComponent {
|
|
|
1882
1882
|
* Defines a default value
|
|
1883
1883
|
*/
|
|
1884
1884
|
this.defaultChecked = false;
|
|
1885
|
+
/**
|
|
1886
|
+
* Defines whether checkbox be in readonly state
|
|
1887
|
+
*/
|
|
1888
|
+
this.readonly = false;
|
|
1885
1889
|
/**
|
|
1886
1890
|
* Defines a particular state for the component
|
|
1887
1891
|
*/
|
|
@@ -1911,6 +1915,11 @@ class KitCheckboxComponent {
|
|
|
1911
1915
|
this.onChange(checked);
|
|
1912
1916
|
this.changed.emit(checked);
|
|
1913
1917
|
}
|
|
1918
|
+
handleClick(event) {
|
|
1919
|
+
if (this.readonly) {
|
|
1920
|
+
event.preventDefault();
|
|
1921
|
+
}
|
|
1922
|
+
}
|
|
1914
1923
|
registerOnChange(fn) {
|
|
1915
1924
|
this.onChange = fn;
|
|
1916
1925
|
}
|
|
@@ -1926,24 +1935,26 @@ class KitCheckboxComponent {
|
|
|
1926
1935
|
}
|
|
1927
1936
|
}
|
|
1928
1937
|
KitCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: KitCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1929
|
-
KitCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: { label: "label", disabled: "disabled", defaultChecked: "defaultChecked", state: "state", messageIcon: "messageIcon", messageText: "messageText", messageType: "messageType" }, outputs: { changed: "changed" }, providers: [{
|
|
1938
|
+
KitCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: { label: "label", disabled: "disabled", defaultChecked: "defaultChecked", readonly: "readonly", state: "state", messageIcon: "messageIcon", messageText: "messageText", messageType: "messageType" }, outputs: { changed: "changed" }, providers: [{
|
|
1930
1939
|
provide: NG_VALUE_ACCESSOR,
|
|
1931
1940
|
useExisting: forwardRef(() => KitCheckboxComponent),
|
|
1932
1941
|
multi: true,
|
|
1933
|
-
}], ngImport: i0, template: "<div class=\"kit-checkbox\" [ngClass]=\"state\">\n <div class=\"display-flex flex-align-items-center\">\n <input kendoCheckBox #checkbox type=\"checkbox\" class=\"kit-checkbox-input\"\n [checked]=\"defaultChecked\"\n [disabled]=\"disabled\"\n (change)=\"onInputStateChange($event)\" />\n <kendo-label *ngIf=\"label\" class=\"kit-checkbox-label\"\n [text]=\"label\"\n [for]=\"checkbox\"\n ></kendo-label>\n </div>\n\n <kit-input-message *ngIf=\"messageText\"\n [type]=\"messageType\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".kit-checkbox-input{border-radius:2px;background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-green);opacity:1;width:18px;height:18px}.kit-checkbox-input:hover:not([disabled]),.kit-checkbox-input:hover:not([disabled]):focus{box-shadow:0 0 0 4px var(--ui-kit-color-grey-4)}.kit-checkbox-input:hover:not([disabled]):checked,.kit-checkbox-input:hover:not([disabled]):focus:checked{background-color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-checkbox-input:hover:not([disabled]):not(:checked),.kit-checkbox-input:hover:not([disabled]):focus:not(:checked){background-color:var(--ui-kit-color-grey-4)}.kit-checkbox-input:focus{box-shadow:none}.kit-checkbox-input:checked{background-color:var(--ui-kit-color-green)}.kit-checkbox-input[disabled]{border-color:var(--ui-kit-color-grey-6);background-color:var(--ui-kit-color-white)}.kit-checkbox-input[disabled]:checked{background-color:var(--ui-kit-color-grey-6)}.kit-checkbox-label{font-size:12px;color:var(--ui-kit-color-grey-0);margin-left:12px}.kit-checkbox.danger .kit-checkbox-input{border-color:var(--ui-kit-color-red);background-color:var(--ui-kit-color-red-20)}.kit-checkbox.danger .kit-checkbox-input[disabled]{opacity:.6}.kit-checkbox.danger .kit-checkbox-input:hover:not([disabled]){background-color:var(--ui-kit-color-red-20);border-color:var(--ui-kit-color-red);box-shadow:0 0 0 4px var(--ui-kit-color-red-20)}.kit-checkbox.danger .kit-checkbox-input:checked{background-color:var(--ui-kit-color-red-20)}:host ::ng-deep .kit-checkbox-input:not([disabled])+.kit-checkbox-label .k-label:hover{cursor:pointer}\n"], components: [{ type: i1$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["type", "icon", "message"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1942
|
+
}], ngImport: i0, template: "<div class=\"kit-checkbox\" [ngClass]=\"state\">\n <div class=\"display-flex flex-align-items-center\">\n <input kendoCheckBox #checkbox type=\"checkbox\" class=\"kit-checkbox-input\"\n [checked]=\"defaultChecked\"\n [class.readonly]=\"readonly\"\n [disabled]=\"disabled\"\n (click)=\"handleClick($event)\"\n (change)=\"onInputStateChange($event)\" />\n <kendo-label *ngIf=\"label\" class=\"kit-checkbox-label\"\n [text]=\"label\"\n [for]=\"checkbox\"\n ></kendo-label>\n </div>\n\n <kit-input-message *ngIf=\"messageText\"\n [type]=\"messageType\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".kit-checkbox-input{border-radius:2px;background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-green);opacity:1;width:18px;height:18px}.kit-checkbox-input:hover:not([disabled]):not(.readonly),.kit-checkbox-input:hover:not([disabled]):not(.readonly):focus{box-shadow:0 0 0 4px var(--ui-kit-color-grey-4)}.kit-checkbox-input:hover:not([disabled]):not(.readonly):checked,.kit-checkbox-input:hover:not([disabled]):not(.readonly):focus:checked{background-color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-checkbox-input:hover:not([disabled]):not(.readonly):not(:checked),.kit-checkbox-input:hover:not([disabled]):not(.readonly):focus:not(:checked){background-color:var(--ui-kit-color-grey-4)}.kit-checkbox-input:focus{box-shadow:none}.kit-checkbox-input:checked{background-color:var(--ui-kit-color-green)}.kit-checkbox-input[disabled]{border-color:var(--ui-kit-color-grey-6);background-color:var(--ui-kit-color-white)}.kit-checkbox-input[disabled]:checked{background-color:var(--ui-kit-color-grey-6)}.kit-checkbox-input.readonly{cursor:default}.kit-checkbox-label{font-size:12px;color:var(--ui-kit-color-grey-0);margin-left:12px}.kit-checkbox.danger .kit-checkbox-input{border-color:var(--ui-kit-color-red);background-color:var(--ui-kit-color-red-20)}.kit-checkbox.danger .kit-checkbox-input[disabled]{opacity:.6}.kit-checkbox.danger .kit-checkbox-input:hover:not([disabled]){background-color:var(--ui-kit-color-red-20);border-color:var(--ui-kit-color-red);box-shadow:0 0 0 4px var(--ui-kit-color-red-20)}.kit-checkbox.danger .kit-checkbox-input:checked{background-color:var(--ui-kit-color-red-20)}:host ::ng-deep .kit-checkbox-input:not([disabled])+.kit-checkbox-label .k-label:hover{cursor:pointer}\n"], components: [{ type: i1$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["type", "icon", "message"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1934
1943
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: KitCheckboxComponent, decorators: [{
|
|
1935
1944
|
type: Component,
|
|
1936
1945
|
args: [{ selector: 'kit-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
1937
1946
|
provide: NG_VALUE_ACCESSOR,
|
|
1938
1947
|
useExisting: forwardRef(() => KitCheckboxComponent),
|
|
1939
1948
|
multi: true,
|
|
1940
|
-
}], template: "<div class=\"kit-checkbox\" [ngClass]=\"state\">\n <div class=\"display-flex flex-align-items-center\">\n <input kendoCheckBox #checkbox type=\"checkbox\" class=\"kit-checkbox-input\"\n [checked]=\"defaultChecked\"\n [disabled]=\"disabled\"\n (change)=\"onInputStateChange($event)\" />\n <kendo-label *ngIf=\"label\" class=\"kit-checkbox-label\"\n [text]=\"label\"\n [for]=\"checkbox\"\n ></kendo-label>\n </div>\n\n <kit-input-message *ngIf=\"messageText\"\n [type]=\"messageType\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".kit-checkbox-input{border-radius:2px;background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-green);opacity:1;width:18px;height:18px}.kit-checkbox-input:hover:not([disabled]),.kit-checkbox-input:hover:not([disabled]):focus{box-shadow:0 0 0 4px var(--ui-kit-color-grey-4)}.kit-checkbox-input:hover:not([disabled]):checked,.kit-checkbox-input:hover:not([disabled]):focus:checked{background-color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-checkbox-input:hover:not([disabled]):not(:checked),.kit-checkbox-input:hover:not([disabled]):focus:not(:checked){background-color:var(--ui-kit-color-grey-4)}.kit-checkbox-input:focus{box-shadow:none}.kit-checkbox-input:checked{background-color:var(--ui-kit-color-green)}.kit-checkbox-input[disabled]{border-color:var(--ui-kit-color-grey-6);background-color:var(--ui-kit-color-white)}.kit-checkbox-input[disabled]:checked{background-color:var(--ui-kit-color-grey-6)}.kit-checkbox-label{font-size:12px;color:var(--ui-kit-color-grey-0);margin-left:12px}.kit-checkbox.danger .kit-checkbox-input{border-color:var(--ui-kit-color-red);background-color:var(--ui-kit-color-red-20)}.kit-checkbox.danger .kit-checkbox-input[disabled]{opacity:.6}.kit-checkbox.danger .kit-checkbox-input:hover:not([disabled]){background-color:var(--ui-kit-color-red-20);border-color:var(--ui-kit-color-red);box-shadow:0 0 0 4px var(--ui-kit-color-red-20)}.kit-checkbox.danger .kit-checkbox-input:checked{background-color:var(--ui-kit-color-red-20)}:host ::ng-deep .kit-checkbox-input:not([disabled])+.kit-checkbox-label .k-label:hover{cursor:pointer}\n"] }]
|
|
1949
|
+
}], template: "<div class=\"kit-checkbox\" [ngClass]=\"state\">\n <div class=\"display-flex flex-align-items-center\">\n <input kendoCheckBox #checkbox type=\"checkbox\" class=\"kit-checkbox-input\"\n [checked]=\"defaultChecked\"\n [class.readonly]=\"readonly\"\n [disabled]=\"disabled\"\n (click)=\"handleClick($event)\"\n (change)=\"onInputStateChange($event)\" />\n <kendo-label *ngIf=\"label\" class=\"kit-checkbox-label\"\n [text]=\"label\"\n [for]=\"checkbox\"\n ></kendo-label>\n </div>\n\n <kit-input-message *ngIf=\"messageText\"\n [type]=\"messageType\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".kit-checkbox-input{border-radius:2px;background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-green);opacity:1;width:18px;height:18px}.kit-checkbox-input:hover:not([disabled]):not(.readonly),.kit-checkbox-input:hover:not([disabled]):not(.readonly):focus{box-shadow:0 0 0 4px var(--ui-kit-color-grey-4)}.kit-checkbox-input:hover:not([disabled]):not(.readonly):checked,.kit-checkbox-input:hover:not([disabled]):not(.readonly):focus:checked{background-color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-checkbox-input:hover:not([disabled]):not(.readonly):not(:checked),.kit-checkbox-input:hover:not([disabled]):not(.readonly):focus:not(:checked){background-color:var(--ui-kit-color-grey-4)}.kit-checkbox-input:focus{box-shadow:none}.kit-checkbox-input:checked{background-color:var(--ui-kit-color-green)}.kit-checkbox-input[disabled]{border-color:var(--ui-kit-color-grey-6);background-color:var(--ui-kit-color-white)}.kit-checkbox-input[disabled]:checked{background-color:var(--ui-kit-color-grey-6)}.kit-checkbox-input.readonly{cursor:default}.kit-checkbox-label{font-size:12px;color:var(--ui-kit-color-grey-0);margin-left:12px}.kit-checkbox.danger .kit-checkbox-input{border-color:var(--ui-kit-color-red);background-color:var(--ui-kit-color-red-20)}.kit-checkbox.danger .kit-checkbox-input[disabled]{opacity:.6}.kit-checkbox.danger .kit-checkbox-input:hover:not([disabled]){background-color:var(--ui-kit-color-red-20);border-color:var(--ui-kit-color-red);box-shadow:0 0 0 4px var(--ui-kit-color-red-20)}.kit-checkbox.danger .kit-checkbox-input:checked{background-color:var(--ui-kit-color-red-20)}:host ::ng-deep .kit-checkbox-input:not([disabled])+.kit-checkbox-label .k-label:hover{cursor:pointer}\n"] }]
|
|
1941
1950
|
}], propDecorators: { label: [{
|
|
1942
1951
|
type: Input
|
|
1943
1952
|
}], disabled: [{
|
|
1944
1953
|
type: Input
|
|
1945
1954
|
}], defaultChecked: [{
|
|
1946
1955
|
type: Input
|
|
1956
|
+
}], readonly: [{
|
|
1957
|
+
type: Input
|
|
1947
1958
|
}], state: [{
|
|
1948
1959
|
type: Input
|
|
1949
1960
|
}], messageIcon: [{
|
|
@@ -2809,14 +2820,14 @@ KitRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
|
|
|
2809
2820
|
provide: NG_VALUE_ACCESSOR,
|
|
2810
2821
|
useExisting: forwardRef(() => KitRadioButtonComponent),
|
|
2811
2822
|
multi: true,
|
|
2812
|
-
}], ngImport: i0, template: "<div class=\"kit-radio-button\">\n <kendo-label class=\"kit-radio-button-label\" [text]=\"label\"\n ></kendo-label>\n\n <div *ngIf=\"items.length\" class=\"kit-radio-button-items\">\n <div *ngFor=\"let item of items; let index = index\" class=\"kit-radio-button-item\"\n [class.readonly]=\"item.readonly || readonly || disabled\"\n [class.disabled]=\"item.disabled || disabled\">\n <input kendoRadioButton type=\"radio\"\n [id]=\"buildLabelId(index)\"\n [name]=\"name\"\n [value]=\"item.value\"\n (click)=\"handleClick($event, item)\"\n (change)=\"onRadioValueChange(item)\" />\n\n <kendo-label [text]=\"item.label\"\n [for]=\"buildLabelId(index)\"\n ></kendo-label>\n </div>\n </div>\n</div>\n", styles: [".kit-radio-button-items{display:flex;gap:10px;margin-top:10px}.kit-radio-button-label{color:var(--ui-kit-color-grey-7);font-weight:500;font-size:13px}:host ::ng-deep .kit-radio-button-item{display:flex;align-items:center;gap:10px}:host ::ng-deep .kit-radio-button-item .k-radio{display:grid;place-content:center;box-sizing:border-box;width:20px;height:20px;padding:0;margin:0;-webkit-appearance:none;appearance:none;border:2px solid var(--ui-kit-color-grey-0);border-radius:50%;cursor:pointer}:host ::ng-deep .kit-radio-button-item .k-radio:before{content:\"\";width:10px;height:10px;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;background:var(--ui-kit-color-main)}:host ::ng-deep .kit-radio-button-item .k-radio:checked{border-color:var(--ui-kit-color-main)}:host ::ng-deep .kit-radio-button-item .k-radio:checked:before{transform:scale(1)}:host ::ng-deep .kit-radio-button-item .k-label{color:var(--ui-kit-color-grey-0);font-size:12px;cursor:pointer}:host ::ng-deep .kit-radio-button .readonly .k-radio,:host ::ng-deep .kit-radio-button .readonly .k-label,:host ::ng-deep .kit-radio-button .disabled .k-radio,:host ::ng-deep .kit-radio-button .disabled .k-label{cursor:default}:host ::ng-deep .kit-radio-button .disabled .k-radio,:host ::ng-deep .kit-radio-button .disabled .k-label{opacity:.6}\n"], components: [{ type: i1$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2823
|
+
}], ngImport: i0, template: "<div class=\"kit-radio-button\">\n <kendo-label class=\"kit-radio-button-label\" [text]=\"label\"\n ></kendo-label>\n\n <div *ngIf=\"items.length\" class=\"kit-radio-button-items\">\n <div *ngFor=\"let item of items; let index = index\" class=\"kit-radio-button-item\"\n [class.readonly]=\"item.readonly || readonly || disabled\"\n [class.disabled]=\"item.disabled || disabled\">\n <input kendoRadioButton type=\"radio\"\n [id]=\"buildLabelId(index)\"\n [name]=\"name\"\n [value]=\"item.value\"\n [checked]=\"item.checked\"\n (click)=\"handleClick($event, item)\"\n (change)=\"onRadioValueChange(item)\" />\n\n <kendo-label [text]=\"item.label\"\n [for]=\"buildLabelId(index)\"\n ></kendo-label>\n </div>\n </div>\n</div>\n", styles: [".kit-radio-button-items{display:flex;gap:10px;margin-top:10px}.kit-radio-button-label{color:var(--ui-kit-color-grey-7);font-weight:500;font-size:13px}:host ::ng-deep .kit-radio-button-item{display:flex;align-items:center;gap:10px}:host ::ng-deep .kit-radio-button-item .k-radio{display:grid;place-content:center;box-sizing:border-box;width:20px;height:20px;padding:0;margin:0;-webkit-appearance:none;appearance:none;border:2px solid var(--ui-kit-color-grey-0);border-radius:50%;cursor:pointer}:host ::ng-deep .kit-radio-button-item .k-radio:before{content:\"\";width:10px;height:10px;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;background:var(--ui-kit-color-main)}:host ::ng-deep .kit-radio-button-item .k-radio:checked{border-color:var(--ui-kit-color-main)}:host ::ng-deep .kit-radio-button-item .k-radio:checked:before{transform:scale(1)}:host ::ng-deep .kit-radio-button-item .k-label{color:var(--ui-kit-color-grey-0);font-size:12px;cursor:pointer}:host ::ng-deep .kit-radio-button .readonly .k-radio,:host ::ng-deep .kit-radio-button .readonly .k-label,:host ::ng-deep .kit-radio-button .disabled .k-radio,:host ::ng-deep .kit-radio-button .disabled .k-label{cursor:default}:host ::ng-deep .kit-radio-button .disabled .k-radio,:host ::ng-deep .kit-radio-button .disabled .k-label{opacity:.6}\n"], components: [{ type: i1$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2813
2824
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: KitRadioButtonComponent, decorators: [{
|
|
2814
2825
|
type: Component,
|
|
2815
2826
|
args: [{ selector: 'kit-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
2816
2827
|
provide: NG_VALUE_ACCESSOR,
|
|
2817
2828
|
useExisting: forwardRef(() => KitRadioButtonComponent),
|
|
2818
2829
|
multi: true,
|
|
2819
|
-
}], template: "<div class=\"kit-radio-button\">\n <kendo-label class=\"kit-radio-button-label\" [text]=\"label\"\n ></kendo-label>\n\n <div *ngIf=\"items.length\" class=\"kit-radio-button-items\">\n <div *ngFor=\"let item of items; let index = index\" class=\"kit-radio-button-item\"\n [class.readonly]=\"item.readonly || readonly || disabled\"\n [class.disabled]=\"item.disabled || disabled\">\n <input kendoRadioButton type=\"radio\"\n [id]=\"buildLabelId(index)\"\n [name]=\"name\"\n [value]=\"item.value\"\n (click)=\"handleClick($event, item)\"\n (change)=\"onRadioValueChange(item)\" />\n\n <kendo-label [text]=\"item.label\"\n [for]=\"buildLabelId(index)\"\n ></kendo-label>\n </div>\n </div>\n</div>\n", styles: [".kit-radio-button-items{display:flex;gap:10px;margin-top:10px}.kit-radio-button-label{color:var(--ui-kit-color-grey-7);font-weight:500;font-size:13px}:host ::ng-deep .kit-radio-button-item{display:flex;align-items:center;gap:10px}:host ::ng-deep .kit-radio-button-item .k-radio{display:grid;place-content:center;box-sizing:border-box;width:20px;height:20px;padding:0;margin:0;-webkit-appearance:none;appearance:none;border:2px solid var(--ui-kit-color-grey-0);border-radius:50%;cursor:pointer}:host ::ng-deep .kit-radio-button-item .k-radio:before{content:\"\";width:10px;height:10px;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;background:var(--ui-kit-color-main)}:host ::ng-deep .kit-radio-button-item .k-radio:checked{border-color:var(--ui-kit-color-main)}:host ::ng-deep .kit-radio-button-item .k-radio:checked:before{transform:scale(1)}:host ::ng-deep .kit-radio-button-item .k-label{color:var(--ui-kit-color-grey-0);font-size:12px;cursor:pointer}:host ::ng-deep .kit-radio-button .readonly .k-radio,:host ::ng-deep .kit-radio-button .readonly .k-label,:host ::ng-deep .kit-radio-button .disabled .k-radio,:host ::ng-deep .kit-radio-button .disabled .k-label{cursor:default}:host ::ng-deep .kit-radio-button .disabled .k-radio,:host ::ng-deep .kit-radio-button .disabled .k-label{opacity:.6}\n"] }]
|
|
2830
|
+
}], template: "<div class=\"kit-radio-button\">\n <kendo-label class=\"kit-radio-button-label\" [text]=\"label\"\n ></kendo-label>\n\n <div *ngIf=\"items.length\" class=\"kit-radio-button-items\">\n <div *ngFor=\"let item of items; let index = index\" class=\"kit-radio-button-item\"\n [class.readonly]=\"item.readonly || readonly || disabled\"\n [class.disabled]=\"item.disabled || disabled\">\n <input kendoRadioButton type=\"radio\"\n [id]=\"buildLabelId(index)\"\n [name]=\"name\"\n [value]=\"item.value\"\n [checked]=\"item.checked\"\n (click)=\"handleClick($event, item)\"\n (change)=\"onRadioValueChange(item)\" />\n\n <kendo-label [text]=\"item.label\"\n [for]=\"buildLabelId(index)\"\n ></kendo-label>\n </div>\n </div>\n</div>\n", styles: [".kit-radio-button-items{display:flex;gap:10px;margin-top:10px}.kit-radio-button-label{color:var(--ui-kit-color-grey-7);font-weight:500;font-size:13px}:host ::ng-deep .kit-radio-button-item{display:flex;align-items:center;gap:10px}:host ::ng-deep .kit-radio-button-item .k-radio{display:grid;place-content:center;box-sizing:border-box;width:20px;height:20px;padding:0;margin:0;-webkit-appearance:none;appearance:none;border:2px solid var(--ui-kit-color-grey-0);border-radius:50%;cursor:pointer}:host ::ng-deep .kit-radio-button-item .k-radio:before{content:\"\";width:10px;height:10px;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;background:var(--ui-kit-color-main)}:host ::ng-deep .kit-radio-button-item .k-radio:checked{border-color:var(--ui-kit-color-main)}:host ::ng-deep .kit-radio-button-item .k-radio:checked:before{transform:scale(1)}:host ::ng-deep .kit-radio-button-item .k-label{color:var(--ui-kit-color-grey-0);font-size:12px;cursor:pointer}:host ::ng-deep .kit-radio-button .readonly .k-radio,:host ::ng-deep .kit-radio-button .readonly .k-label,:host ::ng-deep .kit-radio-button .disabled .k-radio,:host ::ng-deep .kit-radio-button .disabled .k-label{cursor:default}:host ::ng-deep .kit-radio-button .disabled .k-radio,:host ::ng-deep .kit-radio-button .disabled .k-label{opacity:.6}\n"] }]
|
|
2820
2831
|
}], propDecorators: { items: [{
|
|
2821
2832
|
type: Input
|
|
2822
2833
|
}], label: [{
|