import * as i0 from '@angular/core'; import { AfterViewInit, OnDestroy, EventEmitter, DoCheck, QueryList } from '@angular/core'; import { ControlValueAccessor, NgControl } from '@angular/forms'; import { EditorProvider } from 'igniteui-angular/core'; import { CheckboxBaseDirective, IChangeCheckboxEventArgs } from 'igniteui-angular/directives'; /** * **Ignite UI for Angular Radio Button** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio_button.html) * * The Ignite UI Radio Button allows the user to select a single option from an available set of options that are listed side by side. * * Example: * ```html * * Simple radio button * * ``` */ declare class IgxRadioComponent extends CheckboxBaseDirective implements AfterViewInit, OnDestroy, ControlValueAccessor, EditorProvider { /** @hidden @internal */ blurRadio: EventEmitter; private radioGroup; /** * Returns the class of the radio component. * ```typescript * let radioClass = this.radio.cssClass; * ``` * * @memberof IgxRadioComponent */ cssClass: string; /** * Sets/gets the `checked` attribute. * Default value is `false`. * ```html * * ``` * ```typescript * let isChecked = this.radio.checked; * ``` * * @memberof IgxRadioComponent */ set checked(value: boolean); get checked(): boolean; /** * Sets/gets the `disabled` attribute. * Default value is `false`. * ```html * * ``` * ```typescript * let isDisabled = this.radio.disabled; * ``` * * @memberof IgxRadioComponent */ disabled: boolean; /** * Sets/gets whether the radio button is invalid. * Default value is `false`. * ```html * * ``` * ```typescript * let isInvalid = this.radio.invalid; * ``` * * @memberof IgxRadioComponent */ invalid: boolean; /** * Sets/gets whether the radio component is on focus. * Default value is `false`. * ```typescript * this.radio.focus = true; * ``` * ```typescript * let isFocused = this.radio.focused; * ``` * * @memberof IgxRadioComponent */ focused: boolean; /** * @hidden * @internal */ _changed(event: IChangeCheckboxEventArgs): void; /** * @hidden */ _onCheckboxClick(): void; /** * Selects the current radio button. * ```typescript * this.radio.select(); * ``` * * @memberof IgxRadioComponent */ select(): void; /** * Deselects the current radio button. * ```typescript * this.radio.deselect(); * ``` * * @memberof IgxRadioComponent */ deselect(): void; /** * Checks whether the provided value is consistent to the current radio button. * If it is, the checked attribute will have value `true`; * ```typescript * this.radio.writeValue('radioButtonValue'); * ``` */ writeValue(value: any): void; /** * @hidden */ onBlur(): void; /** * @hidden * @internal */ ngAfterViewInit(): void; /** * @hidden * @internal */ ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_checked: unknown; static ngAcceptInputType_disabled: unknown; static ngAcceptInputType_invalid: unknown; } /** * Determines the Radio Group alignment */ declare const RadioGroupAlignment: { readonly horizontal: "horizontal"; readonly vertical: "vertical"; }; type RadioGroupAlignment = typeof RadioGroupAlignment[keyof typeof RadioGroupAlignment]; /** * Radio group directive renders set of radio buttons. * * @igxModule IgxRadioModule * * @igxTheme igx-radio-theme * * @igxKeywords radiogroup, radio, button, input * * @igxGroup Data Entry & Display * * @remarks * The Ignite UI Radio Group allows the user to select a single option from an available set of options that are listed side by side. * * @example: * ```html * * * {{item}} * * * ``` */ declare class IgxRadioGroupDirective implements ControlValueAccessor, OnDestroy, DoCheck { ngControl: NgControl; private _directionality; private cdr; private _radioButtons; private _radioButtonsList; /** * Returns reference to the child radio buttons. * * @example * ```typescript * let radioButtons = this.radioGroup.radioButtons; * ``` */ get radioButtons(): QueryList; /** * Sets/gets the `value` attribute. * * @example * ```html * * ``` */ get value(): any; set value(newValue: any); /** * Sets/gets the `name` attribute of the radio group component. All child radio buttons inherits this name. * * @example * ```html * * ``` */ get name(): string; set name(newValue: string); /** * Sets/gets whether the radio group is required. * * @remarks * If not set, `required` will have value `false`. * * @example * ```html * * ``` */ get required(): boolean; set required(value: boolean); /** * Sets/gets the selected child radio button. * * @example * ```typescript * let selectedButton = this.radioGroup.selected; * this.radioGroup.selected = selectedButton; * ``` */ get selected(): IgxRadioComponent | null; set selected(selected: IgxRadioComponent | null); /** * Sets/gets whether the radio group is invalid. * * @remarks * If not set, `invalid` will have value `false`. * * @example * ```html * * ``` */ get invalid(): boolean; set invalid(value: boolean); /** * An event that is emitted after the radio group `value` is changed. * * @remarks * Provides references to the selected `IgxRadioComponent` and the `value` property as event arguments. * * @example * ```html * * ``` */ readonly change: EventEmitter; /** * The css class applied to the component. * * @hidden * @internal */ cssClass: string; /** * @hidden * @internal * Sets vertical alignment to the radio group, if `alignment` is set to `vertical`. * By default the alignment is horizontal. * * @example * ```html * * ``` */ protected vertical: boolean; /** * A css class applied to the component if any of the * child radio buttons labelPosition is set to `before`. * * @hidden * @internal */ protected get labelBefore(): boolean; /** * A css class applied to the component if all * child radio buttons are disabled. * * @hidden * @internal */ protected get disabled(): boolean; protected handleClick(event: MouseEvent): void; protected handleKeyDown(event: KeyboardEvent): void; /** * Returns the alignment of the `igx-radio-group`. * ```typescript * @ViewChild("MyRadioGroup") * public radioGroup: IgxRadioGroupDirective; * ngAfterViewInit(){ * let radioAlignment = this.radioGroup.alignment; * } * ``` */ get alignment(): RadioGroupAlignment; /** * Allows you to set the radio group alignment. * Available options are `RadioGroupAlignment.horizontal` (default) and `RadioGroupAlignment.vertical`. * ```typescript * public alignment = RadioGroupAlignment.vertical; * //.. * ``` * ```html * * ``` */ set alignment(value: RadioGroupAlignment); /** * @hidden * @internal */ private _onChangeCallback; /** * @hidden * @internal */ private _name; /** * @hidden * @internal */ private _value; /** * @hidden * @internal */ private _selected; /** * @hidden * @internal */ private _isInitialized; /** * @hidden * @internal */ private _required; /** * @hidden * @internal */ private _invalid; /** * @hidden * @internal */ private destroy$; /** * @hidden * @internal */ private queryChange$; /** * @hidden * @internal */ private updateValidityOnBlur; /** * @hidden * @internal */ private updateOnKeyUp; ngDoCheck(): void; private _updateTabIndex; /** * Sets the "checked" property value on the radio input element. * * @remarks * Checks whether the provided value is consistent to the current radio button. * If it is, the checked attribute will have value `true` and selected property will contain the selected `IgxRadioComponent`. * * @example * ```typescript * this.radioGroup.writeValue('radioButtonValue'); * ``` */ writeValue(value: any): void; /** * Registers a function called when the control value changes. * * @hidden * @internal */ registerOnChange(fn: (_: any) => void): void; /** * Registers a function called when the control is touched. * * @hidden * @internal */ registerOnTouched(fn: () => void): void; /** * @hidden * @internal */ ngOnDestroy(): void; constructor(); /** * @hidden * @internal */ private initialize; /** * @hidden * @internal */ private setRadioButtons; /** * @hidden * @internal */ private _setRadioButtonEvents; /** * @hidden * @internal */ private _selectedRadioButtonChanged; /** * @hidden * @internal */ private _setRadioButtonNames; /** * @hidden * @internal */ private _selectRadioButton; /** * @hidden * @internal */ private _setRadioButtonsRequired; /** * Registers a radio button with this radio group. * This method is called by radio button components when they are created. * @hidden @internal */ _addRadioButton(radioButton: IgxRadioComponent): void; /** * Unregisters a radio button from this radio group. * This method is called by radio button components when they are destroyed. * @hidden @internal */ _removeRadioButton(radioButton: IgxRadioComponent): void; /** * @hidden * @internal */ private _setRadioButtonsInvalid; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; static ngAcceptInputType_required: unknown; static ngAcceptInputType_invalid: unknown; } declare const IGX_RADIO_GROUP_DIRECTIVES: readonly [typeof IgxRadioGroupDirective, typeof IgxRadioComponent]; /** * @hidden * @deprecated * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxRadioModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export { IGX_RADIO_GROUP_DIRECTIVES, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, RadioGroupAlignment };