@vonage/vivid 4.11.0 → 4.12.1

package/shared/definition40.cjs

@@ -1,406 +1,11 @@
 'use strict';
 
 const index = require('./index.cjs');
-const direction = require('./direction.cjs');
 const keyCodes = require('./key-codes.cjs');
+const aria = require('./aria.cjs');
 const radio = require('./radio.cjs');
 const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
-const aria = require('./aria.cjs');
-
-/**
- * Standard orientation values
- */
-const Orientation = {
-    horizontal: "horizontal",
-    vertical: "vertical",
-};
-
-/**
- * An Radio Group Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radiogroup | ARIA radiogroup }.
- *
- * @slot label - The slot for the label
- * @slot - The default slot for radio buttons
- * @csspart positioning-region - The positioning region for laying out the radios
- * @fires change - Fires a custom 'change' event when the value changes
- *
- * @public
- */
-let RadioGroup$1 = class RadioGroup extends index.FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The orientation of the group
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: orientation
-         */
-        this.orientation = Orientation.horizontal;
-        this.radioChangeHandler = (e) => {
-            const changedRadio = e.target;
-            if (changedRadio.checked) {
-                this.slottedRadioButtons.forEach((radio) => {
-                    if (radio !== changedRadio) {
-                        radio.checked = false;
-                        if (!this.isInsideFoundationToolbar) {
-                            radio.setAttribute("tabindex", "-1");
-                        }
-                    }
-                });
-                this.selectedRadio = changedRadio;
-                this.value = changedRadio.value;
-                changedRadio.setAttribute("tabindex", "0");
-                this.focusedRadio = changedRadio;
-            }
-            e.stopPropagation();
-        };
-        this.moveToRadioByIndex = (group, index) => {
-            const radio = group[index];
-            if (!this.isInsideToolbar) {
-                radio.setAttribute("tabindex", "0");
-                if (radio.readOnly) {
-                    this.slottedRadioButtons.forEach((nextRadio) => {
-                        if (nextRadio !== radio) {
-                            nextRadio.setAttribute("tabindex", "-1");
-                        }
-                    });
-                }
-                else {
-                    radio.checked = true;
-                    this.selectedRadio = radio;
-                }
-            }
-            this.focusedRadio = radio;
-            radio.focus();
-        };
-        this.moveRightOffGroup = () => {
-            var _a;
-            (_a = this.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
-        };
-        this.moveLeftOffGroup = () => {
-            var _a;
-            (_a = this.previousElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
-        };
-        /**
-         * @internal
-         */
-        this.focusOutHandler = (e) => {
-            const group = this.slottedRadioButtons;
-            const radio = e.target;
-            const index = radio !== null ? group.indexOf(radio) : 0;
-            const focusedIndex = this.focusedRadio
-                ? group.indexOf(this.focusedRadio)
-                : -1;
-            if ((focusedIndex === 0 && index === focusedIndex) ||
-                (focusedIndex === group.length - 1 && focusedIndex === index)) {
-                if (!this.selectedRadio) {
-                    this.focusedRadio = group[0];
-                    this.focusedRadio.setAttribute("tabindex", "0");
-                    group.forEach((nextRadio) => {
-                        if (nextRadio !== this.focusedRadio) {
-                            nextRadio.setAttribute("tabindex", "-1");
-                        }
-                    });
-                }
-                else {
-                    this.focusedRadio = this.selectedRadio;
-                    if (!this.isInsideFoundationToolbar) {
-                        this.selectedRadio.setAttribute("tabindex", "0");
-                        group.forEach((nextRadio) => {
-                            if (nextRadio !== this.selectedRadio) {
-                                nextRadio.setAttribute("tabindex", "-1");
-                            }
-                        });
-                    }
-                }
-            }
-            return true;
-        };
-        /**
-         * @internal
-         */
-        this.clickHandler = (e) => {
-            const radio = e.target;
-            if (radio) {
-                const group = this.slottedRadioButtons;
-                if (radio.checked || group.indexOf(radio) === 0) {
-                    radio.setAttribute("tabindex", "0");
-                    this.selectedRadio = radio;
-                }
-                else {
-                    radio.setAttribute("tabindex", "-1");
-                    this.selectedRadio = null;
-                }
-                this.focusedRadio = radio;
-            }
-            e.preventDefault();
-        };
-        this.shouldMoveOffGroupToTheRight = (index, group, key) => {
-            return index === group.length && this.isInsideToolbar && key === keyCodes.keyArrowRight;
-        };
-        this.shouldMoveOffGroupToTheLeft = (group, key) => {
-            const index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
-            return index < 0 && this.isInsideToolbar && key === keyCodes.keyArrowLeft;
-        };
-        this.checkFocusedRadio = () => {
-            if (this.focusedRadio !== null &&
-                !this.focusedRadio.readOnly &&
-                !this.focusedRadio.checked) {
-                this.focusedRadio.checked = true;
-                this.focusedRadio.setAttribute("tabindex", "0");
-                this.focusedRadio.focus();
-                this.selectedRadio = this.focusedRadio;
-            }
-        };
-        this.moveRight = (e) => {
-            const group = this.slottedRadioButtons;
-            let index = 0;
-            index = this.focusedRadio ? group.indexOf(this.focusedRadio) + 1 : 1;
-            if (this.shouldMoveOffGroupToTheRight(index, group, e.key)) {
-                this.moveRightOffGroup();
-                return;
-            }
-            else if (index === group.length) {
-                index = 0;
-            }
-            /* looping to get to next radio that is not disabled */
-            /* matching native radio/radiogroup which does not select an item if there is only 1 in the group */
-            while (index < group.length && group.length > 1) {
-                if (!group[index].disabled) {
-                    this.moveToRadioByIndex(group, index);
-                    break;
-                }
-                else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
-                    break;
-                }
-                else if (index + 1 >= group.length) {
-                    if (this.isInsideToolbar) {
-                        break;
-                    }
-                    else {
-                        index = 0;
-                    }
-                }
-                else {
-                    index += 1;
-                }
-            }
-        };
-        this.moveLeft = (e) => {
-            const group = this.slottedRadioButtons;
-            let index = 0;
-            index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
-            index = index < 0 ? group.length - 1 : index;
-            if (this.shouldMoveOffGroupToTheLeft(group, e.key)) {
-                this.moveLeftOffGroup();
-                return;
-            }
-            /* looping to get to next radio that is not disabled */
-            while (index >= 0 && group.length > 1) {
-                if (!group[index].disabled) {
-                    this.moveToRadioByIndex(group, index);
-                    break;
-                }
-                else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
-                    break;
-                }
-                else if (index - 1 < 0) {
-                    index = group.length - 1;
-                }
-                else {
-                    index -= 1;
-                }
-            }
-        };
-        /**
-         * 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) => {
-            const key = e.key;
-            if (key in keyCodes.ArrowKeys && this.isInsideFoundationToolbar) {
-                return true;
-            }
-            switch (key) {
-                case keyCodes.keyEnter: {
-                    this.checkFocusedRadio();
-                    break;
-                }
-                case keyCodes.keyArrowRight:
-                case keyCodes.keyArrowDown: {
-                    if (this.direction === direction.Direction.ltr) {
-                        this.moveRight(e);
-                    }
-                    else {
-                        this.moveLeft(e);
-                    }
-                    break;
-                }
-                case keyCodes.keyArrowLeft:
-                case keyCodes.keyArrowUp: {
-                    if (this.direction === direction.Direction.ltr) {
-                        this.moveLeft(e);
-                    }
-                    else {
-                        this.moveRight(e);
-                    }
-                    break;
-                }
-                default: {
-                    return true;
-                }
-            }
-        };
-    }
-    readOnlyChanged() {
-        if (this.slottedRadioButtons !== undefined) {
-            this.slottedRadioButtons.forEach((radio) => {
-                if (this.readOnly) {
-                    radio.readOnly = true;
-                }
-                else {
-                    radio.readOnly = false;
-                }
-            });
-        }
-    }
-    disabledChanged() {
-        if (this.slottedRadioButtons !== undefined) {
-            this.slottedRadioButtons.forEach((radio) => {
-                if (this.disabled) {
-                    radio.disabled = true;
-                }
-                else {
-                    radio.disabled = false;
-                }
-            });
-        }
-    }
-    nameChanged() {
-        if (this.slottedRadioButtons) {
-            this.slottedRadioButtons.forEach((radio) => {
-                radio.setAttribute("name", this.name);
-            });
-        }
-    }
-    valueChanged() {
-        if (this.slottedRadioButtons) {
-            this.slottedRadioButtons.forEach((radio) => {
-                if (radio.value === this.value) {
-                    radio.checked = true;
-                    this.selectedRadio = radio;
-                }
-            });
-        }
-        this.$emit("change");
-    }
-    slottedRadioButtonsChanged(oldValue, newValue) {
-        if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) {
-            this.setupRadioButtons();
-        }
-    }
-    get parentToolbar() {
-        return this.closest('[role="toolbar"]');
-    }
-    get isInsideToolbar() {
-        var _a;
-        return ((_a = this.parentToolbar) !== null && _a !== void 0 ? _a : false);
-    }
-    get isInsideFoundationToolbar() {
-        var _a;
-        return !!((_a = this.parentToolbar) === null || _a === void 0 ? void 0 : _a["$fastController"]);
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.direction = direction.getDirection(this);
-        this.setupRadioButtons();
-    }
-    disconnectedCallback() {
-        this.slottedRadioButtons.forEach((radio) => {
-            radio.removeEventListener("change", this.radioChangeHandler);
-        });
-    }
-    setupRadioButtons() {
-        const checkedRadios = this.slottedRadioButtons.filter((radio) => {
-            return radio.hasAttribute("checked");
-        });
-        const numberOfCheckedRadios = checkedRadios ? checkedRadios.length : 0;
-        if (numberOfCheckedRadios > 1) {
-            const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
-            lastCheckedRadio.checked = true;
-        }
-        let foundMatchingVal = false;
-        this.slottedRadioButtons.forEach((radio) => {
-            if (this.name !== undefined) {
-                radio.setAttribute("name", this.name);
-            }
-            if (this.disabled) {
-                radio.disabled = true;
-            }
-            if (this.readOnly) {
-                radio.readOnly = true;
-            }
-            if (this.value && this.value === radio.value) {
-                this.selectedRadio = radio;
-                this.focusedRadio = radio;
-                radio.checked = true;
-                radio.setAttribute("tabindex", "0");
-                foundMatchingVal = true;
-            }
-            else {
-                if (!this.isInsideFoundationToolbar) {
-                    radio.setAttribute("tabindex", "-1");
-                }
-                radio.checked = false;
-            }
-            radio.addEventListener("change", this.radioChangeHandler);
-        });
-        if (this.value === undefined && this.slottedRadioButtons.length > 0) {
-            const checkedRadios = this.slottedRadioButtons.filter((radio) => {
-                return radio.hasAttribute("checked");
-            });
-            const numberOfCheckedRadios = checkedRadios !== null ? checkedRadios.length : 0;
-            if (numberOfCheckedRadios > 0 && !foundMatchingVal) {
-                const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
-                lastCheckedRadio.checked = true;
-                this.focusedRadio = lastCheckedRadio;
-                lastCheckedRadio.setAttribute("tabindex", "0");
-            }
-            else {
-                this.slottedRadioButtons[0].setAttribute("tabindex", "0");
-                this.focusedRadio = this.slottedRadioButtons[0];
-            }
-        }
-    }
-};
-index.__decorate([
-    index.attr({ attribute: "readonly", mode: "boolean" })
-], RadioGroup$1.prototype, "readOnly", void 0);
-index.__decorate([
-    index.attr({ attribute: "disabled", mode: "boolean" })
-], RadioGroup$1.prototype, "disabled", void 0);
-index.__decorate([
-    index.attr
-], RadioGroup$1.prototype, "name", void 0);
-index.__decorate([
-    index.attr
-], RadioGroup$1.prototype, "value", void 0);
-index.__decorate([
-    index.attr
-], RadioGroup$1.prototype, "orientation", void 0);
-index.__decorate([
-    index.observable
-], RadioGroup$1.prototype, "childItems", void 0);
-index.__decorate([
-    index.observable
-], RadioGroup$1.prototype, "slottedRadioButtons", void 0);
 
 const styles = ".positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}label+.positioning-region{margin-block-start:8px}label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
 
@@ -413,11 +18,234 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class RadioGroup extends RadioGroup$1 {
+class RadioGroup extends index.FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    aria.Orientation.horizontal;
+    this.slottedRadioButtons = [];
+    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 keyCodes.keyEnter:
+          this.checkFocusedRadio(e.target);
+          break;
+        case keyCodes.keyArrowRight:
+        case keyCodes.keyArrowDown:
+          this.moveRight(e);
+          break;
+        case keyCodes.keyArrowLeft:
+        case keyCodes.keyArrowUp:
+          this.moveLeft(e);
+          break;
+        default:
+          return true;
+      }
+    };
+  }
+  /**
+   * @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");
+  }
+  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
+      );
+    });
+  }
+  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.value && this.value === radio.value) {
+        radio.checked = true;
+        this.#setTabRovingTarget(radio);
+        foundMatchingVal = true;
+      } else {
+        radio.checked = false;
+      }
+      radio.addEventListener(
+        "change",
+        this.radioChangeHandler
+      );
+    }
+    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([
   index.attr
 ], RadioGroup.prototype, "label");
+__decorateClass([
+  index.attr({ attribute: "readonly", mode: "boolean" })
+], RadioGroup.prototype, "readOnly");
+__decorateClass([
+  index.attr({ attribute: "disabled", mode: "boolean" })
+], RadioGroup.prototype, "disabled");
+__decorateClass([
+  index.attr
+], RadioGroup.prototype, "name");
+__decorateClass([
+  index.attr
+], RadioGroup.prototype, "value");
+__decorateClass([
+  index.attr
+], RadioGroup.prototype, "orientation");
+__decorateClass([
+  index.observable
+], RadioGroup.prototype, "slottedRadioButtons");
 
 const RadioGroupTemplate = (context) => {
   return index.html`
@@ -426,9 +254,8 @@ const RadioGroupTemplate = (context) => {
 			aria-disabled="${(x) => x.disabled}"
 			aria-readonly="${(x) => x.readOnly}"
 			aria-orientation="${(x) => x.orientation}"
-			@click="${(x, c) => x.clickHandler(c.event)}"
 			@keydown="${(x, c) => x.keydownHandler(c.event)}"
-			@focusout="${(x, c) => x.focusOutHandler(c.event)}"
+			@focusin="${(x, c) => x.focusInHandler(c.event)}"
 		>
 			${when.when(
     (x) => x.label,