/* COPYRIGHT Esri - https://js.arcgis.com/5.1/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";
import { c as clearValidationMessage, d as displayValidationMessage } from "../../chunks/useForm.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);
    this.listen("calciteInvalid", this.handleInvalidFormEvent);
    this.listen("luminaFormResetCallback", () => {
      if (this.status === "invalid") {
        clearValidationMessage(this);
      }
    });
  }
  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") || changes.has("status") && this.hasUpdated) {
      this.passPropsToRadioButtons();
    }
  }
  loaded() {
    this.passPropsToRadioButtons();
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.mutationObserver?.disconnect();
  }
  handleInvalidFormEvent(event) {
    const message = this.validationMessage || event.target.validationMessage || "";
    displayValidationMessage(this, {
      message,
      icon: true,
      status: "invalid"
    });
  }
  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;
        radioButton.status = this.status;
      });
    }
  }
  getFocusableRadioButton() {
    return this.radioButtons.find((radiobutton) => !radiobutton.disabled);
  }
  radioButtonChangeHandler(event) {
    this.selectedItem = event.target;
    if (this.required && this.selectedItem && this.status === "invalid") {
      clearValidationMessage(this);
    }
    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
};
