@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
76 lines (75 loc) • 4.6 kB
TypeScript
import { FocusOrigin } from '@angular/cdk/a11y';
import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { FocusIndicatorDirective } from '../../directives/accessibility';
import { FocusableControl } from '../menu/interfaces/focusable-control.interface';
import * as i0 from "@angular/core";
export declare const RADIOBUTTON_VALUE_ACCESSOR: {
provide: import("@angular/core").InjectionToken<readonly ControlValueAccessor[]>;
useExisting: import("@angular/core").Type<any>;
multi: boolean;
};
export declare class RadioButtonComponent<T = unknown> implements ControlValueAccessor, OnChanges, FocusableControl {
private readonly _changeDetector;
private readonly _group;
/** Provide a default unique id value for the radiobutton */
_radioButtonId: string;
/** Specify a unique Id for this component */
id: string;
/** Specify a form name for the input element */
name: string | null;
/** Specify the role of the input element. */
inputRole: string;
/** This should be a two way binding and will store the currently selected option. Each radio button in the same group should have the same value variable. */
value: T;
/** Specify if this is a required input */
required: boolean;
/** Specify the tabindex */
tabindex: number;
/** If set to `true` the radio button will not change state when clicked. */
clickable: boolean;
/** If this value is set to `true` then the radio button will be disabled */
disabled: boolean;
/** If set to `true` the checkbox will be displayed without a border and background. */
simplified: boolean;
/**
* This should contain the value that this radio button represents. This will be stored in the value variable when the radio button is selected.
* No two radio buttons should have the same option value within the same group of radio buttons.
*/
option: T;
/** Specify an aria label for the input element */
ariaLabel: string;
/** Specify an aria labelledby property for the input element */
ariaLabelledby: string;
/** Specify an aria describedby property for the input element */
ariaDescribedby: string;
/** Emits when the value has been changed. */
valueChange: EventEmitter<T>;
/** Get the focus indicator to set focus */
_focusIndicator?: FocusIndicatorDirective;
/** Determine if the underlying input component has been focused with the keyboard */
_focused: boolean;
/** Internally store the current tabindex */
_internalTabindex: number;
/** Used to inform Angular forms that the component has been touched */
onTouchedCallback: () => void;
/** Used to inform Angular forms that the component value has changed */
onChangeCallback: (_: any) => void;
ngOnChanges(changes: SimpleChanges): void;
/** Select the current option */
select(): void;
writeValue(value: T): void;
/** Allow Angular forms for provide us with a callback for when the input value changes */
registerOnChange(fn: () => void): void;
/** Allow Angular forms for provide us with a callback for when the touched state changes */
registerOnTouched(fn: () => void): void;
/** Allow Angular forms to disable the component */
setDisabledState(isDisabled: boolean): void;
/** Set the internal tab index of the radio button */
setInternalTabindex(tabIndex: any): void;
/** Focus the input element */
focus(origin: FocusOrigin): void;
setInputTabIndex(tabindex: number): void;
static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent<any>, "ux-radio-button", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "inputRole": { "alias": "inputRole"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "clickable": { "alias": "clickable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "simplified": { "alias": "simplified"; "required": false; }; "option": { "alias": "option"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; }, { "valueChange": "valueChange"; }, never, ["*"], false, never>;
}