@vonage/vivid 4.12.0 → 4.12.1

package/shared/definition40.js

@@ -1,404 +1,9 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
-import { D as Direction, g as getDirection } from './direction.js';
-import { h as keyArrowRight, i as keyArrowLeft, A as ArrowKeys, e as keyArrowUp, f as keyArrowDown, k as keyEnter } from './key-codes.js';
+import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
+import { f as keyArrowRight, e as keyArrowLeft, d as keyArrowUp, c as keyArrowDown, g as keyEnter } from './key-codes.js';
+import { O as Orientation } from './aria.js';
 import { R as Radio } from './radio.js';
 import { s as slotted, e as elements } from './slotted.js';
 import { w as when } from './when.js';
-import { O as Orientation$1 } from './aria.js';
-
-/**
- * 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 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 === keyArrowRight;
-        };
-        this.shouldMoveOffGroupToTheLeft = (group, key) => {
-            const index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
-            return index < 0 && this.isInsideToolbar && key === 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 ArrowKeys && this.isInsideFoundationToolbar) {
-                return true;
-            }
-            switch (key) {
-                case keyEnter: {
-                    this.checkFocusedRadio();
-                    break;
-                }
-                case keyArrowRight:
-                case keyArrowDown: {
-                    if (this.direction === Direction.ltr) {
-                        this.moveRight(e);
-                    }
-                    else {
-                        this.moveLeft(e);
-                    }
-                    break;
-                }
-                case keyArrowLeft:
-                case keyArrowUp: {
-                    if (this.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 = 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];
-            }
-        }
-    }
-};
-__decorate([
-    attr({ attribute: "readonly", mode: "boolean" })
-], RadioGroup$1.prototype, "readOnly", void 0);
-__decorate([
-    attr({ attribute: "disabled", mode: "boolean" })
-], RadioGroup$1.prototype, "disabled", void 0);
-__decorate([
-    attr
-], RadioGroup$1.prototype, "name", void 0);
-__decorate([
-    attr
-], RadioGroup$1.prototype, "value", void 0);
-__decorate([
-    attr
-], RadioGroup$1.prototype, "orientation", void 0);
-__decorate([
-    observable
-], RadioGroup$1.prototype, "childItems", void 0);
-__decorate([
-    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)}";
 
@@ -411,11 +16,234 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class RadioGroup extends RadioGroup$1 {
+class RadioGroup extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    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 === 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 === 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 keyEnter:
+          this.checkFocusedRadio(e.target);
+          break;
+        case keyArrowRight:
+        case keyArrowDown:
+          this.moveRight(e);
+          break;
+        case keyArrowLeft:
+        case 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([
   attr
 ], RadioGroup.prototype, "label");
+__decorateClass([
+  attr({ attribute: "readonly", mode: "boolean" })
+], RadioGroup.prototype, "readOnly");
+__decorateClass([
+  attr({ attribute: "disabled", mode: "boolean" })
+], RadioGroup.prototype, "disabled");
+__decorateClass([
+  attr
+], RadioGroup.prototype, "name");
+__decorateClass([
+  attr
+], RadioGroup.prototype, "value");
+__decorateClass([
+  attr
+], RadioGroup.prototype, "orientation");
+__decorateClass([
+  observable
+], RadioGroup.prototype, "slottedRadioButtons");
 
 const RadioGroupTemplate = (context) => {
   return html`
@@ -424,9 +252,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(
     (x) => x.label,
@@ -434,7 +261,7 @@ const RadioGroupTemplate = (context) => {
   )}
 
 			<div
-				class="positioning-region ${(x) => x.orientation === Orientation$1.horizontal ? "horizontal" : "vertical"}"
+				class="positioning-region ${(x) => x.orientation === Orientation.horizontal ? "horizontal" : "vertical"}"
 			>
 				<slot
 					${slotted({

package/shared/definition42.cjs

@@ -2,12 +2,13 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition64.cjs');
-const keyCodes = require('./key-codes2.cjs');
+const keyCodes = require('./key-codes.cjs');
 const formAssociated = require('./form-associated.cjs');
 const slider_template = require('./slider.template.cjs');
 const aria = require('./aria.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const localized = require('./localized.cjs');
+const numbers = require('./numbers.cjs');
 const formElements = require('./form-elements.cjs');
 const ref = require('./ref.cjs');
 const when = require('./when.cjs');
@@ -382,7 +383,7 @@ calculateValueFromMouseEvent_fn = function(e) {
   return slider_template.lerp(this.min, this.max, slider_template.inverseLerp(minPos, maxPos, valuePos));
 };
 roundToNearestStep_fn = function(thumb, value) {
-  return slider_template.limit(
+  return numbers.limit(
     __privateGet(this, _RangeSlider_instances, thumbConstraints_get)[thumb].min,
     __privateGet(this, _RangeSlider_instances, thumbConstraints_get)[thumb].max,
     slider_template.roundToStepValue(value - this.min, this.step) + this.min

package/shared/definition42.js

@@ -1,11 +1,12 @@
 import { F as FoundationElement, o as observable, a as attr, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
 import { P as Popup, a as PlacementStrategy, p as popupRegistries } from './definition64.js';
-import { c as keyHome, d as keyEnd, f as keyArrowUp, k as keyArrowLeft, e as keyArrowDown, a as keyArrowRight } from './key-codes2.js';
+import { b as keyHome, a as keyEnd, d as keyArrowUp, e as keyArrowLeft, c as keyArrowDown, f as keyArrowRight } from './key-codes.js';
 import { F as FormAssociated } from './form-associated.js';
-import { i as inverseLerp, l as lerp, a as limit, r as roundToStepValue, g as getMarkersTemplate } from './slider.template.js';
+import { i as inverseLerp, l as lerp, r as roundToStepValue, g as getMarkersTemplate } from './slider.template.js';
 import { O as Orientation } from './aria.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { L as Localized } from './localized.js';
+import { l as limit } from './numbers.js';
 import { f as formElements } from './form-elements.js';
 import { r as ref } from './ref.js';
 import { w as when } from './when.js';