@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
203 lines (202 loc) • 9.13 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, ElementRef, forwardRef, Input, HostBinding, Renderer2, Output, EventEmitter, ChangeDetectorRef, NgZone, Injector } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { EventsOutsideAngularDirective, KendoInput } from '@progress/kendo-angular-common';
import { validatePackage } from '@progress/kendo-licensing';
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
import { packageMetadata } from '../package-metadata';
import { Subscription } from 'rxjs';
import { RadioCheckBoxBase } from '../common/radio-checkbox.base';
import { SharedInputEventsDirective } from '../shared/shared-events.directive';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
export class RadioButtonComponent extends RadioCheckBoxBase {
renderer;
hostElement;
cdr;
ngZone;
injector;
localizationService;
hostClass = true;
direction;
/**
* Specifies the checked state of the RadioButton.
*
* @default false
*/
checked = false;
/**
* Fires each time the checked state is changed.
* When the state of the component is programmatically changed to `ngModel` or `formControl`
* through its API or form binding, the `checkedStateChange` event is not triggered because it
* might cause a mix-up with the built-in mechanisms of the `ngModel` or `formControl` bindings.
*
* Used to provide a two-way binding for the `checked` property.
*/
checkedChange = new EventEmitter();
subs = new Subscription();
get defaultAttributes() {
return {
type: 'radio',
id: this.focusableId,
title: this.title,
tabindex: this.tabindex,
tabIndex: this.tabindex,
disabled: this.disabled ? '' : null,
value: this.value,
checked: this.checked,
name: this.name,
'aria-invalid': this.isControlInvalid
};
}
constructor(renderer, hostElement, cdr, ngZone, injector, localizationService) {
super('radio', hostElement, renderer, cdr, ngZone, injector);
this.renderer = renderer;
this.hostElement = hostElement;
this.cdr = cdr;
this.ngZone = ngZone;
this.injector = injector;
this.localizationService = localizationService;
validatePackage(packageMetadata);
this.direction = localizationService.rtl ? 'rtl' : 'ltr';
}
ngOnInit() {
super.ngOnInit();
this.subs.add(this.localizationService.changes.subscribe(({ rtl }) => {
this.direction = rtl ? 'rtl' : 'ltr';
}));
}
ngAfterViewInit() {
const stylingInputs = ['size'];
stylingInputs.forEach(input => {
this.handleClasses(this[input], input);
});
// Otherwise the view is not updated in Reactive Forms - https://github.com/angular/angular/issues/13792
if (this.control) {
this.subs.add(this.control.valueChanges.subscribe(e => {
this.control.control.setValue(e, { emitEvent: false });
}));
}
}
ngOnDestroy() {
this.subs.unsubscribe();
}
/**
* @hidden
*/
handleChange = ($event) => {
this.ngZone.run(() => {
this.checked = $event.target.checked;
this.checkedChange.emit(this.checked);
this.ngChange($event.target.value);
});
};
/**
* @hidden
*/
writeValue(value) {
this.checked = value === this.value;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioButtonComponent, isStandalone: true, selector: "kendo-radiobutton", inputs: { checked: "checked" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.k-radio-wrap": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
LocalizationService,
{ provide: L10N_PREFIX, useValue: 'kendo.radiobutton' },
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RadioButtonComponent),
multi: true
},
{ provide: KendoInput, useExisting: forwardRef(() => RadioButtonComponent) }
], exportAs: ["kendoRadioButton"], usesInheritance: true, ngImport: i0, template: `
<ng-container
kendoInputSharedEvents
[hostElement]="hostElement"
[(isFocused)]="isFocused"
(handleBlur)="handleBlur()"
(onFocus)="handleFocus()"
>
<input #input
type="radio"
class="k-radio"
[id]="focusableId"
[attr.title]="title"
[disabled]="disabled"
[class.k-disabled]="disabled"
[attr.tabindex]="disabled ? undefined : tabindex"
[value]="value"
[name]="name"
[checked]="checked"
[class.k-checked]="checked"
[attr.aria-invalid]="isControlInvalid"
[class.k-invalid]="isControlInvalid"
[attr.required]="isControlRequired ? '' : null"
[kendoEventsOutsideAngular]="{
blur: handleInputBlur,
change: handleChange
}"
/>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoRadioButton',
providers: [
LocalizationService,
{ provide: L10N_PREFIX, useValue: 'kendo.radiobutton' },
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RadioButtonComponent),
multi: true
},
{ provide: KendoInput, useExisting: forwardRef(() => RadioButtonComponent) }
],
selector: 'kendo-radiobutton',
template: `
<ng-container
kendoInputSharedEvents
[hostElement]="hostElement"
[(isFocused)]="isFocused"
(handleBlur)="handleBlur()"
(onFocus)="handleFocus()"
>
<input #input
type="radio"
class="k-radio"
[id]="focusableId"
[attr.title]="title"
[disabled]="disabled"
[class.k-disabled]="disabled"
[attr.tabindex]="disabled ? undefined : tabindex"
[value]="value"
[name]="name"
[checked]="checked"
[class.k-checked]="checked"
[attr.aria-invalid]="isControlInvalid"
[class.k-invalid]="isControlInvalid"
[attr.required]="isControlRequired ? '' : null"
[kendoEventsOutsideAngular]="{
blur: handleInputBlur,
change: handleChange
}"
/>
</ng-container>
`,
standalone: true,
imports: [SharedInputEventsDirective, EventsOutsideAngularDirective]
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-radio-wrap']
}], direction: [{
type: HostBinding,
args: ['attr.dir']
}], checked: [{
type: Input
}], checkedChange: [{
type: Output
}] } });