/** * The `auro-radio-group` element is used to group a set `auro-radio` elements. * @customElement auro-radio-group * * @csspart radio-group - Apply css to the fieldset element in the shadow DOM * @slot {HTMLSlotElement} legend - Allows for the legend to be overridden. * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label. * @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden. * @event auroFormElement-validated - Notifies that the element has been validated. * @event input - Notifies every time the value prop of the element is changed. */ export class AuroRadioGroup extends LitElement { static get styles(): import("lit").CSSResult[]; static get properties(): { /** * Defines whether the component will be on lighter or darker backgrounds. * @type {'default' | 'inverse'} * @default 'default' */ appearance: "default" | "inverse"; /** * If true, all radio buttons will be disabled. */ disabled: { type: BooleanConstructor; reflect: boolean; }; /** * If true, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. */ error: { type: StringConstructor; reflect: boolean; }; /** * Indicates whether the legend slot is set or not. * @private */ hasLegend: { type: BooleanConstructor; reflect: boolean; attribute: boolean; }; /** * If true, displays radio buttons horizontally. */ horizontal: { type: BooleanConstructor; }; /** * If true, disables auto-validation on blur. */ noValidate: { type: BooleanConstructor; reflect: boolean; }; /** * DEPRECATED - use `appearance="inverse"` instead. */ onDark: { type: BooleanConstructor; reflect: boolean; }; /** * Specifies the current selected radio button. */ optionSelected: { type: ObjectConstructor; }; /** * Populates the `required` attribute on the element. Used for client-side validation. */ required: { type: BooleanConstructor; reflect: boolean; }; /** * Sets a custom help text message to display for all validityStates. */ setCustomValidity: { type: StringConstructor; }; /** * Custom help text message to display when validity = `customError`. */ setCustomValidityCustomError: { type: StringConstructor; }; /** * Custom help text message to display when validity = `valueMissing`. */ setCustomValidityValueMissing: { type: StringConstructor; }; /** * Indicates whether the radio group is in a dirty state (has been interacted with). * @private */ touched: { type: BooleanConstructor; reflect: boolean; attribute: boolean; }; /** * Specifies the `validityState` this element is in. */ validity: { type: StringConstructor; reflect: boolean; }; /** * Specifies the current value of the selected radio button. */ value: { type: StringConstructor; }; }; /** * This will register this element with the browser. * @param {string} [name="auro-radio-group"] - The name of the element that you want to register. * * @example * AuroRadioGroup.register("custom-radio-group") // This will register this element to * */ static register(name?: string): void; _initializeDefaults(): void; appearance: string; disabled: boolean; horizontal: boolean; required: boolean; validity: any; value: any; optionSelected: EventTarget; onDark: boolean; touched: boolean; hasLegend: boolean; /** * @private */ private validation; /** * @private */ private index; /** * @private */ private max; /** * @private */ private runtimeUtils; /** * @private */ private helpTextTag; firstUpdated(): void; /** * Method for handling of selection of a radio element. * @private * @param {Event} event - The trigger event tied to this function. * @returns {void} */ private handleSelection; /** * Method handles radio element blur. * @private * @returns {void} */ private handleRadioBlur; /** * LitElement lifecycle method. Called after the DOM has been updated. * @param {Map} changedProperties - Keys are the names of changed properties, values are the corresponding previous values. * @returns {void} */ updated(changedProperties: Map): void; /** * Resets component to initial state. * @returns {void} */ reset(): void; /** * Validates value. * @param {boolean} [force=false] - Whether to force validation. */ validate(force?: boolean): void; /** * Method handles the reset event from a radio element. * @private * @returns {void} */ private resetRadio; /** * Method for handling the attributes of each radio input. * @private * @returns {void} */ private handleItems; items: Element[]; /** * Method for handling slot content changes. * @private * @returns {void} */ private handleSlotChange; /** * Method for handling legend slot changes. * @private * @returns {void} */ private handleLegendSlotChange; /** * Method for initializing the tab index of the checked radio input. * @private * @returns {void} */ private initializeIndex; /** * Method for handling a newly selected radio input. * @private * @param {Event} event - The trigger event tied to this function. * @returns {void} */ private handleToggleSelected; /** * Method for selecting a radio input. * @private * @param {Number} index - The value of the element's index attribute. * @returns {void} */ private selectItem; /** * Method for selecting the next radio input. * @private * @param {Number} index - The value of the element's index attribute. * @param {String} moveDirection - Arrow key pressed by user. * @returns {void} */ private selectNextItem; /** * Method for handling a keydown event. * @private * @param {Event} event - The trigger event tied to this function. * @returns {void} */ private handleKeyDown; render(): import("lit-html").TemplateResult; } import { LitElement } from "lit";