/**
* 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";