@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
89 lines (88 loc) • 7.2 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
import { c as createObserver } from "../../chunks/observers.js";
import { I as InternalLabel } from "../../chunks/InternalLabel.js";
import { V as Validation } from "../../chunks/Validation.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
const CSS = {
itemWrapper: "item-wrapper"
};
const IDS = {
validationMessage: "radioButtonGroupValidationMessage"
};
const styles = css`:host{display:flex;flex-direction:column}:host>.item-wrapper{display:flex;max-inline-size:100vw}:host([layout=horizontal])>.item-wrapper{flex-direction:row;flex-wrap:wrap}:host([layout=horizontal][scale=s])>.item-wrapper{column-gap:var(--calcite-radio-button-group-gap, var(--calcite-spacing-lg))}:host([layout=horizontal][scale=m])>.item-wrapper{column-gap:var(--calcite-radio-button-group-gap, var(--calcite-spacing-xl))}:host([layout=horizontal][scale=l])>.item-wrapper{column-gap:var(--calcite-radio-button-group-gap, var(--calcite-spacing-xxl))}:host([layout=vertical])>.item-wrapper{flex-direction:column;inline-size:fit-content}:host([scale=s]) calcite-input-message{--calcite-input-message-spacing: var( --calcite-radio-button-input-message-spacing, calc(var(--calcite-spacing-xxs) * -1) )}:host([scale=m]) calcite-input-message{--calcite-input-message-spacing: var( --calcite-radio-button-input-message-spacing, calc(var(--calcite-spacing-sm) * -1) )}:host([scale=l]) calcite-input-message{--calcite-input-message-spacing: var( --calcite-radio-button-input-message-spacing, calc(var(--calcite-spacing-md) * -1) )}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}:host([hidden]){display:none}[hidden]{display:none}`;
class RadioButtonGroup extends LitElement {
constructor() {
super();
this.messages = useT9n();
this.mutationObserver = createObserver("mutation", () => this.passPropsToRadioButtons());
this.focusSetter = useSetFocus()(this);
this.radioButtons = [];
this.disabled = false;
this.layout = "horizontal";
this.required = false;
this.scale = "m";
this.selectedItem = null;
this.status = "idle";
this.calciteRadioButtonGroupChange = createEvent({ cancelable: false });
this.listen("calciteRadioButtonChange", this.radioButtonChangeHandler);
}
static {
this.properties = { radioButtons: [16, {}, { state: true }], disabled: [7, {}, { reflect: true, type: Boolean }], labelText: 1, layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectedItem: [0, {}, { attribute: false }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1 };
}
static {
this.styles = styles;
}
async setFocus(options) {
return this.focusSetter(() => this.selectedItem && !this.selectedItem.disabled ? this.selectedItem : this.getFocusableRadioButton(), options);
}
connectedCallback() {
super.connectedCallback();
this.passPropsToRadioButtons();
this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
}
willUpdate(changes) {
if (changes.has("disabled") && (this.hasUpdated || this.disabled !== false) || changes.has("layout") && (this.hasUpdated || this.layout !== "horizontal") || changes.has("scale") && (this.hasUpdated || this.scale !== "m")) {
this.passPropsToRadioButtons();
}
}
loaded() {
this.passPropsToRadioButtons();
}
disconnectedCallback() {
super.disconnectedCallback();
this.mutationObserver?.disconnect();
}
passPropsToRadioButtons() {
this.radioButtons = Array.from(this.el.querySelectorAll("calcite-radio-button"));
this.selectedItem = Array.from(this.radioButtons).reverse().find((radioButton) => radioButton.checked) || null;
if (this.radioButtons.length > 0) {
this.radioButtons.forEach((radioButton) => {
if (this.hasUpdated) {
radioButton.disabled = this.disabled || radioButton.disabled;
}
radioButton.name = this.name;
radioButton.required = this.required;
radioButton.scale = this.scale;
});
}
}
getFocusableRadioButton() {
return this.radioButtons.find((radiobutton) => !radiobutton.disabled) ?? null;
}
radioButtonChangeHandler(event) {
this.selectedItem = event.target;
this.calciteRadioButtonGroupChange.emit();
}
render() {
this.el.role = "radiogroup";
return html`${this.labelText && InternalLabel({ labelText: this.labelText, required: this.required, tooltipText: this.messages.required }) || ""}<div aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaRequired=${this.required} class=${safeClassMap(CSS.itemWrapper)}><slot></slot></div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}`;
}
}
customElement("calcite-radio-button-group", RadioButtonGroup);
export {
RadioButtonGroup
};