/**
* The `auro-checkbox-group` element is a wrapper for `auro-checkbox` elements.
* @customElement auro-checkbox-group
*
* @slot legend - Allows for the legend to be overridden.
* @slot optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
* @slot helpText - Allows for the helper text to be overridden.
* @slot default - The default slot for the checkbox items.
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
*/
export class AuroCheckboxGroup 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 set, disables the checkbox group.
*/
disabled: {
type: BooleanConstructor;
reflect: boolean;
};
/**
* When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
*/
error: {
type: StringConstructor;
reflect: boolean;
};
/**
* If set, checkboxes will be aligned horizontally.
*/
horizontal: {
type: BooleanConstructor;
reflect: boolean;
};
/**
* If set, disables auto-validation on blur.
*/
noValidate: {
type: BooleanConstructor;
reflect: boolean;
};
/**
* DEPRECATED - use `appearance="inverse"` instead.
*/
onDark: {
type: BooleanConstructor;
reflect: boolean;
};
/**
* 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;
};
/**
* Specifies the `validityState` this element is in.
*/
validity: {
type: StringConstructor;
reflect: boolean;
};
};
/**
* This will register this element with the browser.
* @param {string} [name="auro-checkbox-group"] - The name of the element that you want to register.
*
* @example
* AuroCheckboxGroup.register("custom-checkbox-group") // this will register this element to
*
*/
static register(name?: string): void;
_initializeDefaults(): void;
appearance: string;
validity: any;
disabled: any;
required: boolean;
horizontal: boolean;
onDark: boolean;
/**
* Indicates whether the checkbox group is in a dirty state (has been interacted with).
* @type {boolean}
* @default false
* @private
*/
private touched;
/**
* @private
*/
private value;
/**
* @private
*/
private index;
/**
* @private
*/
private maxNumber;
/**
* @private
*/
private validation;
/**
* @private
*/
private runtimeUtils;
/**
* @private
*/
private helpTextTag;
/**
* Helper method to handle checkbox value changing.
* @private
* @param {String} value - The value of the checkbox.
* @param {Boolean} selected - The checked state of the checkbox.
* @returns {void}
*/
private handleValueUpdate;
firstUpdated(): void;
focusWithin: boolean;
/**
* Helper method that handles the state of preselected checkboxes.
* @private
* @returns {void}
*/
private handlePreselectedItems;
/**
* Helper method that handles the state of checkboxes.
* @private
* @returns {void}
*/
private handleItems;
checkboxes: Element[];
/**
* Resets component to initial state.
* @returns {void}
*/
reset(): void;
/**
* 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;
/**
* Validates value.
* @param {boolean} [force=false] - Whether to force validation.
*/
validate(force?: boolean): void;
render(): import("lit-html").TemplateResult;
}
import { LitElement } from 'lit';