@vonage/vivid 4.12.0 → 4.13.0

package/shared/listbox.js

@@ -1,11 +1,11 @@
-import { k as keyArrowLeft, a as keyArrowRight } from './key-codes2.js';
-import { F as FoundationElement, O as Observable, _ as __decorate, a as attr, o as observable, D as DOM, n as nullableNumberConverter } from './index.js';
-import { i as isListboxOption } from './listbox-option.js';
+import { e as keyArrowLeft, f as keyArrowRight } from './key-codes.js';
+import { _ as __decorate, o as observable, a as attr, F as FoundationElement, O as Observable, D as DOM, n as nullableNumberConverter } from './index.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
+import { S as StartEnd } from './start-end.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes.js';
-import { u as uniqueId } from './strings.js';
-import { i as inRange } from './numbers.js';
+import { i as isHTMLElement } from './dom.js';
+import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes2.js';
+import { u as uniqueId, i as inRange } from './strings.js';
 
 /**
  * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
@@ -23,6 +23,200 @@ function findLastIndex(array, predicate) {
     return -1;
 }
 
+/**
+ * Determines if the element is a {@link (ListboxOption:class)}
+ *
+ * @param element - the element to test.
+ * @public
+ */
+function isListboxOption(el) {
+    return (isHTMLElement(el) &&
+        (el.getAttribute("role") === "option" ||
+            el instanceof HTMLOptionElement));
+}
+/**
+ * An Option Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
+ *
+ * @slot start - Content which can be provided before the listbox option content
+ * @slot end - Content which can be provided after the listbox option content
+ * @slot - The default slot for listbox option content
+ * @csspart content - Wraps the listbox option content
+ *
+ * @public
+ */
+class ListboxOption extends FoundationElement {
+    constructor(text, value, defaultSelected, selected) {
+        super();
+        /**
+         * The defaultSelected state of the option.
+         * @public
+         */
+        this.defaultSelected = false;
+        /**
+         * Tracks whether the "selected" property has been changed.
+         * @internal
+         */
+        this.dirtySelected = false;
+        /**
+         * The checked state of the control.
+         *
+         * @public
+         */
+        this.selected = this.defaultSelected;
+        /**
+         * Track whether the value has been changed from the initial value
+         */
+        this.dirtyValue = false;
+        if (text) {
+            this.textContent = text;
+        }
+        if (value) {
+            this.initialValue = value;
+        }
+        if (defaultSelected) {
+            this.defaultSelected = defaultSelected;
+        }
+        if (selected) {
+            this.selected = selected;
+        }
+        this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
+        this.proxy.disabled = this.disabled;
+    }
+    /**
+     * Updates the ariaChecked property when the checked property changes.
+     *
+     * @param prev - the previous checked value
+     * @param next - the current checked value
+     *
+     * @public
+     */
+    checkedChanged(prev, next) {
+        if (typeof next === "boolean") {
+            this.ariaChecked = next ? "true" : "false";
+            return;
+        }
+        this.ariaChecked = null;
+    }
+    /**
+     * Updates the proxy's text content when the default slot changes.
+     * @param prev - the previous content value
+     * @param next - the current content value
+     *
+     * @internal
+     */
+    contentChanged(prev, next) {
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.textContent = this.textContent;
+        }
+        this.$emit("contentchange", null, { bubbles: true });
+    }
+    defaultSelectedChanged() {
+        if (!this.dirtySelected) {
+            this.selected = this.defaultSelected;
+            if (this.proxy instanceof HTMLOptionElement) {
+                this.proxy.selected = this.defaultSelected;
+            }
+        }
+    }
+    disabledChanged(prev, next) {
+        this.ariaDisabled = this.disabled ? "true" : "false";
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.disabled = this.disabled;
+        }
+    }
+    selectedAttributeChanged() {
+        this.defaultSelected = this.selectedAttribute;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.defaultSelected = this.defaultSelected;
+        }
+    }
+    selectedChanged() {
+        this.ariaSelected = this.selected ? "true" : "false";
+        if (!this.dirtySelected) {
+            this.dirtySelected = true;
+        }
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.selected = this.selected;
+        }
+    }
+    initialValueChanged(previous, next) {
+        // If the value is clean and the component is connected to the DOM
+        // then set value equal to the attribute value.
+        if (!this.dirtyValue) {
+            this.value = this.initialValue;
+            this.dirtyValue = false;
+        }
+    }
+    get label() {
+        var _a;
+        return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
+    }
+    get text() {
+        var _a, _b;
+        return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
+    }
+    set value(next) {
+        const newValue = `${next !== null && next !== void 0 ? next : ""}`;
+        this._value = newValue;
+        this.dirtyValue = true;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.value = newValue;
+        }
+        Observable.notify(this, "value");
+    }
+    get value() {
+        var _a;
+        Observable.track(this, "value");
+        return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
+    }
+    get form() {
+        return this.proxy ? this.proxy.form : null;
+    }
+}
+__decorate([
+    observable
+], ListboxOption.prototype, "checked", void 0);
+__decorate([
+    observable
+], ListboxOption.prototype, "content", void 0);
+__decorate([
+    observable
+], ListboxOption.prototype, "defaultSelected", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], ListboxOption.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: "selected", mode: "boolean" })
+], ListboxOption.prototype, "selectedAttribute", void 0);
+__decorate([
+    observable
+], ListboxOption.prototype, "selected", void 0);
+__decorate([
+    attr({ attribute: "value", mode: "fromView" })
+], ListboxOption.prototype, "initialValue", void 0);
+/**
+ * States and properties relating to the ARIA `option` role.
+ *
+ * @public
+ */
+class DelegatesARIAListboxOption {
+}
+__decorate([
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
+__decorate([
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
+__decorate([
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
+__decorate([
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
+applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
+applyMixins(ListboxOption, StartEnd, DelegatesARIAListboxOption);
+
 /**
  * A Listbox Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#listbox | ARIA listbox }.

package/shared/{direction.cjs → localization.cjs}

@@ -3,11 +3,11 @@
 /**
  * Expose ltr and rtl strings
  */
-exports.Direction = void 0;
+var Direction;
 (function (Direction) {
     Direction["ltr"] = "ltr";
     Direction["rtl"] = "rtl";
-})(exports.Direction || (exports.Direction = {}));
+})(Direction || (Direction = {}));
 
 /**
  * a method to determine the current localization direction of the view
@@ -16,7 +16,16 @@ exports.Direction = void 0;
  */
 const getDirection = (rootNode) => {
     const dirNode = rootNode.closest("[dir]");
-    return dirNode !== null && dirNode.dir === "rtl" ? exports.Direction.rtl : exports.Direction.ltr;
+    return dirNode !== null && dirNode.dir === "rtl" ? Direction.rtl : Direction.ltr;
 };
 
+/**
+ * Expose ltr and rtl strings
+ */
+exports.Direction = void 0;
+(function (Direction) {
+    Direction["ltr"] = "ltr";
+    Direction["rtl"] = "rtl";
+})(exports.Direction || (exports.Direction = {}));
+
 exports.getDirection = getDirection;

package/shared/{direction.js → localization.js}

@@ -1,11 +1,11 @@
 /**
  * Expose ltr and rtl strings
  */
-var Direction;
+var Direction$1;
 (function (Direction) {
     Direction["ltr"] = "ltr";
     Direction["rtl"] = "rtl";
-})(Direction || (Direction = {}));
+})(Direction$1 || (Direction$1 = {}));
 
 /**
  * a method to determine the current localization direction of the view
@@ -14,7 +14,16 @@ var Direction;
  */
 const getDirection = (rootNode) => {
     const dirNode = rootNode.closest("[dir]");
-    return dirNode !== null && dirNode.dir === "rtl" ? Direction.rtl : Direction.ltr;
+    return dirNode !== null && dirNode.dir === "rtl" ? Direction$1.rtl : Direction$1.ltr;
 };
 
+/**
+ * Expose ltr and rtl strings
+ */
+var Direction;
+(function (Direction) {
+    Direction["ltr"] = "ltr";
+    Direction["rtl"] = "rtl";
+})(Direction || (Direction = {}));
+
 export { Direction as D, getDirection as g };

package/shared/numbers.cjs

@@ -21,18 +21,6 @@ function wrapInBounds(min, max, value) {
 function limit(min, max, value) {
     return Math.min(Math.max(value, min), max);
 }
-/**
- * Determines if a number value is within a specified range.
- *
- * @param value - the value to check
- * @param min - the range start
- * @param max - the range end
- */
-function inRange(value, min, max = 0) {
-    [min, max] = [min, max].sort((a, b) => a - b);
-    return min <= value && value < max;
-}
 
-exports.inRange = inRange;
 exports.limit = limit;
 exports.wrapInBounds = wrapInBounds;

package/shared/numbers.js

@@ -19,16 +19,5 @@ function wrapInBounds(min, max, value) {
 function limit(min, max, value) {
     return Math.min(Math.max(value, min), max);
 }
-/**
- * Determines if a number value is within a specified range.
- *
- * @param value - the value to check
- * @param min - the range start
- * @param max - the range end
- */
-function inRange(value, min, max = 0) {
-    [min, max] = [min, max].sort((a, b) => a - b);
-    return min <= value && value < max;
-}
 
-export { inRange as i, limit as l, wrapInBounds as w };
+export { limit as l, wrapInBounds as w };

package/shared/presentationDate.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-const definition$2 = require('./definition11.cjs');
+const definition$1 = require('./definition11.cjs');
 const definition = require('./definition64.cjs');
-const definition$1 = require('./definition56.cjs');
-const definition$3 = require('./definition22.cjs');
+const textField = require('./text-field2.cjs');
+const definition$2 = require('./definition22.cjs');
 const index = require('./index.cjs');
 const ref = require('./ref.cjs');
 const slotted = require('./slotted.cjs');
@@ -5525,7 +5525,7 @@ const areMonthsEqual = (a, b) => compareMonths(a, b) === 0;
 const monthToStr = ({ month, year }) => `${year.toString().padStart(4, "0")}-${(month + 1).toString().padStart(2, "0")}`;
 
 function renderDialogHeader(context) {
-  const buttonTag = context.tagFor(definition$2.Button$1);
+  const buttonTag = context.tagFor(definition$1.Button$1);
   return index.html`<div class="header">
 		${when.when(
     (x) => x.prevYearButton,
@@ -5615,7 +5615,7 @@ function renderDialogHeader(context) {
 	</div>`;
 }
 function renderCalendarGrid(context) {
-  const dividerTag = context.tagFor(definition$3.Divider);
+  const dividerTag = context.tagFor(definition$2.Divider);
   return index.html`<div
 		class="calendar"
 		role="grid"
@@ -5705,7 +5705,7 @@ function renderCalendarGrid(context) {
   )}`;
 }
 function renderMonthPickerGrid(context) {
-  const dividerTag = context.tagFor(definition$3.Divider);
+  const dividerTag = context.tagFor(definition$2.Divider);
   return index.html`
 		<${dividerTag}
 			class="months-separator"
@@ -5779,8 +5779,8 @@ function renderMonthPickerGrid(context) {
 }
 const DatePickerBaseTemplate = (context, _) => {
   const popupTag = context.tagFor(definition.Popup);
-  const textFieldTag = context.tagFor(definition$1.TextField);
-  const buttonTag = context.tagFor(definition$2.Button$1);
+  const textFieldTag = context.tagFor(textField.TextField);
+  const buttonTag = context.tagFor(definition$1.Button$1);
   return index.html`<div class="base" @keydown="${(x, { event }) => x._onBaseKeyDown(event)}">
 		<${textFieldTag} id="text-field"
 										 ${ref.ref("_textFieldEl")}
@@ -5991,6 +5991,12 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     this.#onFocusOut = () => {
       this.$emit("blur", void 0, { bubbles: false });
     };
+    // Reformat the presentation value when the locale changes
+    this.#localeChangeHandler = {
+      handleChange: () => {
+        this._updatePresentationValue();
+      }
+    };
     this._popupOpen = false;
     this.#dismissOnClickOutside = (event) => {
       if (!this._popupOpen) {
@@ -6081,12 +6087,18 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     document.addEventListener("click", this.#dismissOnClickOutside);
     this.addEventListener("focusin", this.#onFocusIn);
     this.addEventListener("focusout", this.#onFocusOut);
+    this.#localeChangeObserver = index.Observable.binding(
+      () => this.locale,
+      this.#localeChangeHandler
+    );
+    this.#localeChangeObserver.observe(this, index.defaultExecutionContext);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener("click", this.#dismissOnClickOutside);
     this.removeEventListener("focusin", this.#onFocusIn);
     this.removeEventListener("focusout", this.#onFocusOut);
+    this.#localeChangeObserver.disconnect();
   }
   #onFocusIn;
   #onFocusOut;
@@ -6099,6 +6111,8 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     }
     super.validate(this._textFieldEl?.querySelector("input") ?? void 0);
   }
+  #localeChangeHandler;
+  #localeChangeObserver;
   #dismissOnClickOutside;
   #openPopupIfPossible() {
     if (!this.readOnly) {

package/shared/presentationDate.js

@@ -1,8 +1,8 @@
 import { c as Button } from './definition11.js';
 import { P as Popup } from './definition64.js';
-import { T as TextField } from './definition56.js';
+import { T as TextField } from './text-field2.js';
 import { D as Divider } from './definition22.js';
-import { h as html, F as FoundationElement, D as DOM, a as attr, o as observable, v as volatile } from './index.js';
+import { h as html, F as FoundationElement, O as Observable, g as defaultExecutionContext, D as DOM, a as attr, o as observable, v as volatile } from './index.js';
 import { r as ref } from './ref.js';
 import { s as slotted } from './slotted.js';
 import { r as repeat } from './repeat.js';
@@ -5989,6 +5989,12 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     this.#onFocusOut = () => {
       this.$emit("blur", void 0, { bubbles: false });
     };
+    // Reformat the presentation value when the locale changes
+    this.#localeChangeHandler = {
+      handleChange: () => {
+        this._updatePresentationValue();
+      }
+    };
     this._popupOpen = false;
     this.#dismissOnClickOutside = (event) => {
       if (!this._popupOpen) {
@@ -6079,12 +6085,18 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     document.addEventListener("click", this.#dismissOnClickOutside);
     this.addEventListener("focusin", this.#onFocusIn);
     this.addEventListener("focusout", this.#onFocusOut);
+    this.#localeChangeObserver = Observable.binding(
+      () => this.locale,
+      this.#localeChangeHandler
+    );
+    this.#localeChangeObserver.observe(this, defaultExecutionContext);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener("click", this.#dismissOnClickOutside);
     this.removeEventListener("focusin", this.#onFocusIn);
     this.removeEventListener("focusout", this.#onFocusOut);
+    this.#localeChangeObserver.disconnect();
   }
   #onFocusIn;
   #onFocusOut;
@@ -6097,6 +6109,8 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     }
     super.validate(this._textFieldEl?.querySelector("input") ?? void 0);
   }
+  #localeChangeHandler;
+  #localeChangeObserver;
   #dismissOnClickOutside;
   #openPopupIfPossible() {
     if (!this.readOnly) {