@vonage/vivid 5.15.1 → 5.17.0

package/radio-group/definition.cjs

@@ -1,361 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const vividElement = require('../unbundled/vivid-element.cjs');
-const radio_definition = require('../radio/definition.cjs');
-const mixins = require('../unbundled/mixins.cjs');
-const fastElement = require('@microsoft/fast-element');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const keyCodes = require('../unbundled/key-codes.cjs');
-const delegatesAria = require('../unbundled/delegates-aria.cjs');
-
-const styles = ".base{display:flex;flex-direction:column;gap:8px;--_low-ink-color: var(--vvd-color-neutral-600)}.positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}fieldset{display:block;padding:0;border:none;margin:0}legend{padding:0;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);margin-block-end:8px}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class RadioGroup extends mixins.WithFeedback(vividElement.VividElement) {
-  constructor() {
-    super(...arguments);
-    this.errorValidationMessage = "";
-    this.orientation = // eslint-disable-next-line @repo/repo/no-attribute-default-value
-    fastWebUtilities.Orientation.horizontal;
-    this.slottedRadioButtons = [];
-    this.radioErrorHandler = (e) => {
-      const radio = e.target;
-      this.errorValidationMessage = radio.errorValidationMessage || "";
-    };
-    this.radioChangeHandler = (e) => {
-      const changedRadio = e.target;
-      if (changedRadio.checked) {
-        this.slottedRadioButtons?.forEach((radio) => {
-          if (radio !== changedRadio) {
-            radio.checked = false;
-          }
-        });
-        this.value = changedRadio.value;
-        this.#setTabRovingTarget(changedRadio);
-      }
-      e.stopPropagation();
-    };
-    this.moveToRadioByIndex = (group, index) => {
-      const radio = group[index];
-      if (!this.isInsideToolbar && !radio.readOnly) {
-        radio.checked = true;
-      }
-      radio.focus();
-    };
-    this.moveRightOffGroup = () => {
-      this.nextElementSibling?.focus();
-    };
-    this.moveLeftOffGroup = () => {
-      this.previousElementSibling?.focus();
-    };
-    this.moveRight = (e) => {
-      const radio = e.target;
-      const group = this.#focusableRadioButtons;
-      let index = 0;
-      index = group.indexOf(radio) + 1;
-      if (index === group.length && this.isInsideToolbar && e.key === keyCodes.keyArrowRight) {
-        this.moveRightOffGroup();
-        return;
-      }
-      if (index === group.length) {
-        index = 0;
-      }
-      this.moveToRadioByIndex(group, index);
-    };
-    this.moveLeft = (e) => {
-      const radio = e.target;
-      const group = this.#focusableRadioButtons;
-      let index = group.indexOf(radio) - 1;
-      if (this.isInsideToolbar && e.key === keyCodes.keyArrowLeft && index < 0) {
-        this.moveLeftOffGroup();
-        return;
-      }
-      index = index < 0 ? group.length - 1 : index;
-      this.moveToRadioByIndex(group, index);
-    };
-    /**
-     * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
-     * navigation is different when there is an ancestor with role='toolbar'
-     *
-     * @internal
-     */
-    this.keydownHandler = (e) => {
-      switch (e.key) {
-        case fastWebUtilities.keyEnter:
-          this.checkFocusedRadio(e.target);
-          break;
-        case keyCodes.keyArrowRight:
-        case fastWebUtilities.keyArrowDown:
-          this.moveRight(e);
-          break;
-        case keyCodes.keyArrowLeft:
-        case fastWebUtilities.keyArrowUp:
-          this.moveLeft(e);
-          break;
-        default:
-          return true;
-      }
-    };
-  }
-  /**
-   * @internal
-   */
-  requiredChanged() {
-    this.slottedRadioButtons?.forEach((radio) => {
-      if (this.required) {
-        radio.required = true;
-      } else {
-        radio.required = false;
-      }
-    });
-  }
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    this.slottedRadioButtons?.forEach((radio) => {
-      if (this.readOnly) {
-        radio.readOnly = true;
-      } else {
-        radio.readOnly = false;
-      }
-    });
-  }
-  /**
-   * @internal
-   */
-  disabledChanged() {
-    this.slottedRadioButtons?.forEach((radio) => {
-      if (this.disabled) {
-        radio.disabled = true;
-      } else {
-        radio.disabled = false;
-      }
-    });
-  }
-  nameChanged() {
-    this.slottedRadioButtons?.forEach((radio) => {
-      radio.setAttribute("name", this.name);
-    });
-  }
-  /**
-   * @internal
-   */
-  valueChanged() {
-    this.slottedRadioButtons?.forEach((radio) => {
-      if (radio.value === this.value) {
-        radio.checked = true;
-      }
-    });
-    this.$emit("change");
-  }
-  /**
-   * @internal
-   */
-  handleSlotChange() {
-    if (this.errorText) {
-      this.slottedRadioButtons?.forEach((radio) => {
-        radio.errorText = this.errorText;
-      });
-    }
-  }
-  /**
-   * @internal
-   */
-  errorTextChanged(_, newErrorText) {
-    if (newErrorText) {
-      this.errorValidationMessage = newErrorText;
-    } else {
-      this.errorValidationMessage = "";
-    }
-  }
-  get #focusableRadioButtons() {
-    return this.slottedRadioButtons?.filter((radio) => !radio.disabled);
-  }
-  /**
-   * @internal
-   */
-  slottedRadioButtonsChanged() {
-    if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) {
-      this.setupRadioButtons();
-    }
-  }
-  get isInsideToolbar() {
-    return !!this.closest('[role="toolbar"]');
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.setupRadioButtons();
-  }
-  disconnectedCallback() {
-    this.slottedRadioButtons?.forEach((radio) => {
-      radio.removeEventListener(
-        "change",
-        this.radioChangeHandler
-      );
-      radio.removeEventListener(
-        "invalid",
-        this.radioErrorHandler
-      );
-    });
-  }
-  setupRadioButtons() {
-    let foundMatchingVal = false;
-    for (const radio of this.slottedRadioButtons) {
-      if (this.name !== void 0) {
-        radio.setAttribute("name", this.name);
-      }
-      if (this.disabled) {
-        radio.disabled = true;
-      }
-      if (this.readOnly) {
-        radio.readOnly = true;
-      }
-      if (this.required) {
-        radio.required = true;
-      }
-      if (this.value && this.value === radio.value) {
-        radio.checked = true;
-        this.#setTabRovingTarget(radio);
-        foundMatchingVal = true;
-      } else {
-        radio.checked = false;
-      }
-      radio.addEventListener(
-        "change",
-        this.radioChangeHandler
-      );
-      radio.addEventListener(
-        "invalid",
-        this.radioErrorHandler
-      );
-    }
-    if (this.value === void 0 && this.slottedRadioButtons?.length > 0) {
-      const checkedRadios = this.slottedRadioButtons?.filter(
-        (radio) => radio.hasAttribute("checked")
-      );
-      if (checkedRadios.length > 0 && !foundMatchingVal) {
-        const lastCheckedRadio = checkedRadios[checkedRadios.length - 1];
-        lastCheckedRadio.checked = true;
-        this.#setTabRovingTarget(lastCheckedRadio);
-      } else {
-        this.#setTabRovingTarget(this.slottedRadioButtons[0]);
-      }
-    }
-  }
-  /**
-   * @internal
-   */
-  focusInHandler(e) {
-    this.#setTabRovingTarget(e.target);
-  }
-  #setTabRovingTarget(radio) {
-    radio.setAttribute("tabindex", "0");
-    for (const slottedRadio of this.slottedRadioButtons) {
-      if (slottedRadio !== radio) {
-        slottedRadio.setAttribute("tabindex", "-1");
-      }
-    }
-  }
-  checkFocusedRadio(target) {
-    if (!target.readOnly) {
-      target.checked = true;
-    }
-  }
-}
-__decorateClass([
-  fastElement.attr
-], RadioGroup.prototype, "label");
-__decorateClass([
-  fastElement.attr({ attribute: "required", mode: "boolean" })
-], RadioGroup.prototype, "required");
-__decorateClass([
-  fastElement.attr({ attribute: "readonly", mode: "boolean" })
-], RadioGroup.prototype, "readOnly");
-__decorateClass([
-  fastElement.attr({ attribute: "disabled", mode: "boolean" })
-], RadioGroup.prototype, "disabled");
-__decorateClass([
-  fastElement.attr
-], RadioGroup.prototype, "name");
-__decorateClass([
-  fastElement.attr
-], RadioGroup.prototype, "value");
-__decorateClass([
-  fastElement.observable
-], RadioGroup.prototype, "errorValidationMessage");
-__decorateClass([
-  fastElement.attr({ attribute: "error-text" })
-], RadioGroup.prototype, "errorText");
-__decorateClass([
-  fastElement.attr
-], RadioGroup.prototype, "orientation");
-__decorateClass([
-  fastElement.observable
-], RadioGroup.prototype, "slottedRadioButtons");
-
-const RadioGroupTemplate = (context) => {
-  const radioTagName = context.tagFor(radio_definition.VwcRadioElement, true);
-  return fastElement.html`
-		<template
-			@keydown="${(x, c) => x.keydownHandler(c.event)}"
-			@focusin="${(x, c) => x.focusInHandler(c.event)}"
-		>
-			<div class="base">
-				<fieldset
-					${delegatesAria.delegateAria({
-    role: "radiogroup",
-    ariaDisabled: (x) => x.disabled,
-    ariaReadOnly: (x) => x.readOnly,
-    ariaOrientation: (x) => x.orientation
-  })}
-					aria-labelledby="label"
-					aria-describedby="${(x) => x._feedbackDescribedBy}"
-					aria-invalid="${(x) => x.errorText ? "true" : "false"}"
-					class="control positioning-region ${(x) => x.orientation === fastWebUtilities.Orientation.horizontal ? "horizontal" : "vertical"}"
-				>
-					${fastElement.when(
-    (x) => x.label,
-    fastElement.html`<legend id="label">${(x) => x.label}</legend>`
-  )}
-					<slot
-						${fastElement.slotted({
-    property: "slottedRadioButtons",
-    filter: fastElement.elements(radioTagName)
-  })}
-						@slotchange="${(x) => x.handleSlotChange()}"
-					></slot>
-				</fieldset>
-				${(x) => x._getFeedbackTemplate(context)}
-			</div>
-		</template>
-	`;
-};
-
-const radioGroupDefinition = vividElement.defineVividComponent(
-  "radio-group",
-  RadioGroup,
-  RadioGroupTemplate,
-  [radio_definition.radioDefinition, mixins.feedbackMessageDefinition],
-  {
-    styles
-  }
-);
-const registerRadioGroup = vividElement.createRegisterFunction(radioGroupDefinition);
-
-exports.VwcRadioGroupElement = RadioGroup;
-exports.radioGroupDefinition = radioGroupDefinition;
-exports.registerRadioGroup = registerRadioGroup;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition54.cjs");
+exports.VwcRadioGroupElement = require_definition$1.RadioGroup;
+exports.radioGroupDefinition = require_definition$1.radioGroupDefinition;
+exports.registerRadioGroup = require_definition$1.registerRadioGroup;