@esri/calcite-components 5.1.0-next.44 → 5.1.0-next.45

package/dist/components/calcite-radio-button/customElement.js

@@ -1,183 +1,15 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
-import { html, isServer, css, nothing } from "lit";
+import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
 import { g as getRoundRobinIndex } from "../../chunks/array.js";
-import { q as queryElementRoots, c as closestElementCrossShadowBoundary } from "../../chunks/dom.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-const hiddenFormInputSlotName = "hidden-form-input";
-function isCheckable(component) {
-  return "checked" in component;
-}
-const onFormResetMap = /* @__PURE__ */ new WeakMap();
-const formComponentSet = /* @__PURE__ */ new WeakSet();
-function hasRegisteredFormComponentParent(form, formComponentEl) {
-  const hasParentComponentWithFormIdSet = closestElementCrossShadowBoundary(formComponentEl.parentElement, "[form]");
-  if (hasParentComponentWithFormIdSet) {
-    return true;
-  }
-  const formComponentRegisterEventName = "calciteInternalFormComponentRegister";
-  let hasRegisteredFormComponentParent2 = false;
-  form.addEventListener(formComponentRegisterEventName, (event) => {
-    hasRegisteredFormComponentParent2 = event.composedPath().some((element) => formComponentSet.has(element));
-    event.stopPropagation();
-  }, { once: true });
-  formComponentEl.dispatchEvent(new CustomEvent(formComponentRegisterEventName, {
-    bubbles: true,
-    composed: true
-  }));
-  return hasRegisteredFormComponentParent2;
-}
-function getValidationComponent(el) {
-  if (el.nodeName === "CALCITE-RADIO-BUTTON") {
-    return closestElementCrossShadowBoundary(el, "calcite-radio-button-group");
-  }
-  return el;
-}
-function connectForm(component) {
-  const { el, value } = component;
-  const associatedForm = findAssociatedForm(component);
-  if (!associatedForm || hasRegisteredFormComponentParent(associatedForm, el)) {
-    return;
-  }
-  component.formEl = associatedForm;
-  component.defaultValue = value;
-  if (isCheckable(component)) {
-    component.defaultChecked = component.checked;
-  }
-  const boundOnFormReset = onFormReset.bind(component);
-  associatedForm.addEventListener("reset", boundOnFormReset);
-  onFormResetMap.set(component.el, boundOnFormReset);
-  formComponentSet.add(el);
-}
-function findAssociatedForm(component) {
-  const { el, form } = component;
-  return form ? queryElementRoots(el, { id: form }) : closestElementCrossShadowBoundary(el, "form");
-}
-function onFormReset() {
-  if ("status" in this) {
-    this.status = "idle";
-  }
-  if ("validationIcon" in this) {
-    this.validationIcon = false;
-  }
-  if ("validationMessage" in this) {
-    this.validationMessage = "";
-  }
-  if (isCheckable(this)) {
-    this.checked = this.defaultChecked;
-    return;
-  }
-  this.value = this.defaultValue;
-  this.onFormReset?.();
-}
-function disconnectForm(component) {
-  const { el, formEl } = component;
-  if (!formEl) {
-    return;
-  }
-  const boundOnFormReset = onFormResetMap.get(el);
-  formEl.removeEventListener("reset", boundOnFormReset);
-  onFormResetMap.delete(el);
-  component.formEl = null;
-  formComponentSet.delete(el);
-}
-const internalHiddenInputInputEvent = "calciteInternalHiddenInputInput";
-const hiddenInputInputHandler = (event) => {
-  event.target.dispatchEvent(new CustomEvent(internalHiddenInputInputEvent, { bubbles: true }));
-};
-const removeHiddenInputChangeEventListener = (input) => input.removeEventListener("input", hiddenInputInputHandler);
-function syncHiddenFormInput(component) {
-  const { el, formEl, name, value } = component;
-  const { ownerDocument } = el;
-  if (isServer) {
-    return;
-  }
-  const inputs = el.querySelectorAll(`input[slot="${hiddenFormInputSlotName}"]`);
-  if (!formEl || !name) {
-    inputs.forEach((input) => {
-      removeHiddenInputChangeEventListener(input);
-      input.remove();
-    });
-    return;
-  }
-  const values = Array.isArray(value) ? value : [value];
-  const extra = [];
-  const seen = /* @__PURE__ */ new Set();
-  inputs.forEach((input) => {
-    const valueMatch = values.find((val) => (
-      /* intentional non-strict equality check */
-      val == input.value
-    ));
-    if (valueMatch != null) {
-      seen.add(valueMatch);
-      defaultSyncHiddenFormInput(component, input, valueMatch);
-    } else {
-      extra.push(input);
-    }
-  });
-  let docFrag;
-  values.forEach((value2) => {
-    if (seen.has(value2)) {
-      return;
-    }
-    let input = extra.pop();
-    if (!input) {
-      input = ownerDocument.createElement("input");
-      input.ariaHidden = "true";
-      input.slot = hiddenFormInputSlotName;
-    }
-    if (!docFrag) {
-      docFrag = ownerDocument.createDocumentFragment();
-    }
-    docFrag.append(input);
-    input.addEventListener("input", hiddenInputInputHandler);
-    defaultSyncHiddenFormInput(component, input, value2);
-  });
-  if (docFrag) {
-    el.append(docFrag);
-  }
-  extra.forEach((input) => {
-    removeHiddenInputChangeEventListener(input);
-    input.remove();
-  });
-}
-function defaultSyncHiddenFormInput(component, input, value) {
-  const { defaultValue, disabled, form, name, required } = component;
-  input.defaultValue = defaultValue;
-  input.disabled = disabled;
-  input.name = name;
-  input.required = required;
-  input.tabIndex = -1;
-  if (form) {
-    input.setAttribute("form", form);
-  } else {
-    input.removeAttribute("form");
-  }
-  if (isCheckable(component)) {
-    input.checked = component.checked;
-    input.defaultChecked = component.defaultChecked;
-    input.value = component.checked ? value || "on" : "";
-  } else {
-    input.value = value || "";
-  }
-  component.syncHiddenFormInput?.(input);
-  const validationComponent = getValidationComponent(component.el);
-  if (validationComponent && "validity" in validationComponent) {
-    for (const key in { ...input?.validity }) {
-      validationComponent.validity[key] = input.validity[key];
-    }
-  }
-}
-const HiddenFormInputSlot = ({ component }) => {
-  syncHiddenFormInput(component);
-  return html`<slot name=${hiddenFormInputSlotName}></slot>`;
-};
+import { u as useForm } from "../../chunks/useForm.js";
 const CSS = {
   container: "container",
   radio: "radio"
@@ -188,6 +20,7 @@ class RadioButton extends LitElement {
     super();
     this.containerRef = createRef();
     this.direction = useDirection();
+    this.formSupport = useForm({ inputType: "radio" })(this);
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.checked = false;
@@ -206,7 +39,10 @@ class RadioButton extends LitElement {
     this.listen("keydown", this.handleKeyDown);
   }
   static {
-    this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], focused: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], hovered: [7, {}, { reflect: true, type: Boolean }], label: 1, labelText: 1, name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], value: 1 };
+    this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], focused: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], hovered: [7, {}, { reflect: true, type: Boolean }], label: 1, labelText: 1, name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
+  }
+  static {
+    this.formAssociated = true;
   }
   static {
     this.styles = styles;
@@ -217,13 +53,15 @@ class RadioButton extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.containerRef.value, options);
   }
+  async setValidity(validity, validationMessage = "") {
+    this.elementInternals.setValidity(validity, validationMessage);
+  }
   connectedCallback() {
     this.rootNode = this.el.getRootNode();
     if (this.name) {
       this.checkLastRadioButton();
     }
     connectLabel(this);
-    connectForm(this);
     this.updateTabIndexOfOtherRadioButtonsInGroup();
     super.connectedCallback();
   }
@@ -246,7 +84,6 @@ class RadioButton extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
-    disconnectForm(this);
     this.updateTabIndexOfOtherRadioButtonsInGroup();
   }
   checkedChanged(newChecked) {
@@ -255,9 +92,6 @@ class RadioButton extends LitElement {
     }
     this.calciteInternalRadioButtonCheckedChange.emit();
   }
-  syncHiddenFormInput(input) {
-    input.type = "radio";
-  }
   selectItem(items, selectedIndex) {
     items[selectedIndex].click();
   }
@@ -279,7 +113,6 @@ class RadioButton extends LitElement {
     if (this.checked) {
       return;
     }
-    this.uncheckAllRadioButtonsInGroup();
     this.checked = true;
     this.calciteRadioButtonChange.emit();
   }
@@ -318,15 +151,6 @@ class RadioButton extends LitElement {
       });
     }
   }
-  uncheckAllRadioButtonsInGroup() {
-    const radioButtons = this.queryButtons();
-    radioButtons.forEach((radioButton) => {
-      if (radioButton.checked) {
-        radioButton.checked = false;
-        radioButton.focused = false;
-      }
-    });
-  }
   uncheckOtherRadioButtonsInGroup() {
     const radioButtons = this.queryButtons();
     const otherRadioButtons = radioButtons.filter((radioButton) => radioButton !== this.el);
@@ -426,7 +250,7 @@ class RadioButton extends LitElement {
   }
   render() {
     const tabIndex = this.getTabIndex();
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.checked} .ariaLabel=${getLabelText(this)} class=${safeClassMap(CSS.container)} @blur=${this.onContainerBlur} @focus=${this.onContainerFocus} role=radio tabindex=${tabIndex ?? nothing} ${ref(this.containerRef)}><div class=${safeClassMap(CSS.radio)}></div>${this.labelText && InternalLabel({ labelText: this.labelText, spacingInlineStart: true }) || ""}</div>${HiddenFormInputSlot({ component: this })}` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.checked} .ariaLabel=${getLabelText(this)} class=${safeClassMap(CSS.container)} @blur=${this.onContainerBlur} @focus=${this.onContainerFocus} role=radio tabindex=${tabIndex ?? nothing} ${ref(this.containerRef)}><div class=${safeClassMap(CSS.radio)}></div>${this.labelText && InternalLabel({ labelText: this.labelText, spacingInlineStart: true }) || ""}</div>` });
   }
 }
 customElement("calcite-radio-button", RadioButton);