/** * 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 * @csspart helpText - Apply css to the help text element that displays helper or error messages. * @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; attribute: string; reflect: boolean; }; /** * DEPRECATED - use `appearance="inverse"` instead. * @deprecated Use `appearance="inverse"` instead. */ onDark: { type: BooleanConstructor; attribute: string; reflect: boolean; }; /** * Specifies the current selected radio button. * @type {HTMLElement} */ optionSelected: HTMLElement; /** * 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; attribute: string; }; /** * Custom help text message to display when validity = `customError`. */ setCustomValidityCustomError: { type: StringConstructor; attribute: string; }; /** * Custom help text message to display when validity = `valueMissing`. */ setCustomValidityValueMissing: { type: StringConstructor; attribute: string; }; /** * 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 | undefined; disabled: boolean | undefined; horizontal: boolean | undefined; required: boolean | undefined; validity: any; value: any; optionSelected: EventTarget | null | undefined; onDark: boolean | undefined; touched: boolean | undefined; hasLegend: boolean | undefined; /** * @private */ private validation; /** * @private */ private index; /** * @private */ private max; /** * @private */ private runtimeUtils; /** * @private */ private helpTextTag; /** * @private */ private uniqueId; 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; errorMessage: string | undefined; /** * 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; /** * Whether the group is currently in an invalid state. * `validity` — not `error` — is the authoritative source: `validate()` resolves the * `error` attribute to `validity = 'customError'`, so `error` is already covered here. * Single definition of "invalid" for the whole component, consumed by `render()` and * `syncItemValidity()` so the fieldset and its children can never disagree. * @private * @returns {boolean} */ private get isInvalid(); /** * Method for mirroring the group's invalid state onto each radio input. * Has to be re-applied from `handleItems()` as well, because a slot change or a * reconnect can happen without `validity` itself changing. * @private * @returns {void} */ private syncItemValidity; /** * 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[] | undefined; /** * 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";