@vonage/vivid 4.14.0 → 4.14.2

package/shared/listbox.cjs

@@ -1,10 +1,9 @@
 'use strict';
 
-const definition = require('./definition35.cjs');
+const option = require('./option.cjs');
 const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes.cjs');
 const strings = require('./strings.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
 const applyMixins = require('./apply-mixins2.cjs');
 const ariaGlobal = require('./aria-global.cjs');
 
@@ -95,12 +94,12 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    * @public
    */
   get options() {
-    defineVividComponent.Observable.track(this, "options");
+    vividElement.Observable.track(this, "options");
     return this._options;
   }
   set options(value) {
     this._options = value;
-    defineVividComponent.Observable.notify(this, "options");
+    vividElement.Observable.notify(this, "options");
   }
   static {
     /**
@@ -109,7 +108,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
      * @param n - element to filter
      * @public
      */
-    this.slottedOptionFilter = (n) => definition.isListboxOption(n) && !n.hidden;
+    this.slottedOptionFilter = (n) => option.isListboxOption(n) && !n.hidden;
   }
   static {
     /**
@@ -347,7 +346,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
   selectedOptionsChanged(_, next) {
     const filteredNext = next.filter(_Listbox.slottedOptionFilter);
     this.options.forEach((o) => {
-      const notifier = defineVividComponent.Observable.getNotifier(o);
+      const notifier = vividElement.Observable.getNotifier(o);
       notifier.unsubscribe(this, "selected");
       o.selected = filteredNext.includes(o);
       notifier.subscribe(this, "selected");
@@ -420,7 +419,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    */
   slottedOptionsChanged(_, next) {
     this.options = next.reduce((options, item) => {
-      if (definition.isListboxOption(item)) {
+      if (option.isListboxOption(item)) {
         options.push(item);
       }
       return options;
@@ -458,38 +457,38 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
 };
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], _Listbox.prototype, "disabled");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], _Listbox.prototype, "selectedIndex");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], _Listbox.prototype, "selectedOptions");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], _Listbox.prototype, "slottedOptions");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], _Listbox.prototype, "typeaheadBuffer");
 let Listbox = _Listbox;
 class DelegatesARIAListbox {
 }
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DelegatesARIAListbox.prototype, "ariaActiveDescendant");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DelegatesARIAListbox.prototype, "ariaDisabled");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DelegatesARIAListbox.prototype, "ariaExpanded");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], DelegatesARIAListbox.prototype, "ariaMultiSelectable");
 applyMixins.applyMixins(DelegatesARIAListbox, ariaGlobal.ARIAGlobalStatesAndProperties);
 applyMixins.applyMixins(Listbox, DelegatesARIAListbox);

package/shared/listbox.js

@@ -1,8 +1,7 @@
-import { i as isListboxOption } from './definition35.js';
-import { V as VividElement } from './vivid-element.js';
+import { i as isListboxOption } from './option.js';
+import { V as VividElement, O as Observable, a as attr, o as observable } from './vivid-element.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 { O as Observable, a as attr, o as observable } from './defineVividComponent.js';
 import { a as applyMixins } from './apply-mixins2.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
 

package/shared/localized.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const locales_enUS = require('../locales/en-US.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,7 +18,7 @@ class CurrentLocale {
   }
 }
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], CurrentLocale.prototype, "locale");
 const currentLocale = new CurrentLocale();
 const setLocale = (locale) => {

package/shared/localized.js

@@ -1,5 +1,5 @@
 import enUS from '../locales/en-US.js';
-import { o as observable } from './defineVividComponent.js';
+import { o as observable } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/option.cjs

@@ -0,0 +1,205 @@
+'use strict';
+
+const applyMixins = require('./apply-mixins.cjs');
+const affix = require('./affix.cjs');
+const ariaGlobal = require('./aria-global.cjs');
+const vividElement = require('./vivid-element.cjs');
+const dom = require('./dom.cjs');
+
+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;
+};
+function isListboxOption(el) {
+  return dom.isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
+}
+class ListboxOption extends vividElement.VividElement {
+  constructor(text, value, defaultSelected, selected) {
+    super();
+    this.defaultSelected = false;
+    /**
+     * Tracks whether the "selected" property has been changed.
+     * @internal
+     */
+    this.dirtySelected = false;
+    this.selected = this.defaultSelected;
+    /**
+     * Track whether the value has been changed from the initial value
+     */
+    this.dirtyValue = false;
+    this._highlighted = false;
+    this._displayCheckmark = false;
+    this._matchedRange = null;
+    if (text) {
+      this.text = text;
+    }
+    if (value) {
+      this.initialValue = value;
+    }
+    if (defaultSelected) {
+      this.defaultSelected = defaultSelected;
+    }
+    if (selected) {
+      this.selected = selected;
+    }
+    this.proxy = new Option(
+      this.text,
+      // @ts-expect-error Propery is used before it is assigned
+      this.initialValue,
+      this.defaultSelected,
+      this.selected
+    );
+    this.proxy.disabled = this.disabled;
+  }
+  /**
+   * Updates the ariaChecked property when the checked property changes.
+   *
+   * @param _ - the previous checked value
+   * @param next - the current checked value
+   *
+   * @public
+   */
+  checkedChanged(_, next) {
+    if (typeof next === "boolean") {
+      this.ariaChecked = next ? "true" : "false";
+      return;
+    }
+    this.ariaChecked = null;
+  }
+  defaultSelectedChanged() {
+    if (!this.dirtySelected) {
+      this.selected = this.defaultSelected;
+      if (this.proxy instanceof HTMLOptionElement) {
+        this.proxy.selected = this.defaultSelected;
+      }
+    }
+  }
+  disabledChanged() {
+    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() {
+    if (!this.dirtyValue) {
+      this.value = this.initialValue;
+      this.dirtyValue = false;
+    }
+  }
+  get label() {
+    return this._label ?? this.text;
+  }
+  set label(value) {
+    this._label = value;
+  }
+  set text(value) {
+    this._text = value;
+  }
+  get text() {
+    return this._text ?? "";
+  }
+  set value(next) {
+    const newValue = `${next ?? ""}`;
+    this._value = newValue;
+    this.dirtyValue = true;
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.value = newValue;
+    }
+    vividElement.Observable.notify(this, "value");
+  }
+  get value() {
+    vividElement.Observable.track(this, "value");
+    return this._value ?? this.text;
+  }
+  get form() {
+    return null;
+  }
+  /**
+   * @internal
+   */
+  get _matchedRangeSafe() {
+    return this._matchedRange ?? { from: 0, to: 0 };
+  }
+}
+__decorateClass([
+  vividElement.observable
+], ListboxOption.prototype, "checked");
+__decorateClass([
+  vividElement.observable
+], ListboxOption.prototype, "defaultSelected");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], ListboxOption.prototype, "disabled");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  vividElement.attr({ attribute: "selected", mode: "boolean" })
+], ListboxOption.prototype, "selectedAttribute");
+__decorateClass([
+  vividElement.observable
+], ListboxOption.prototype, "selected");
+__decorateClass([
+  vividElement.attr({ attribute: "value", mode: "fromView" })
+], ListboxOption.prototype, "initialValue");
+__decorateClass([
+  vividElement.attr({
+    attribute: "label"
+  })
+], ListboxOption.prototype, "_label");
+__decorateClass([
+  vividElement.attr({
+    attribute: "text"
+  })
+], ListboxOption.prototype, "_text");
+__decorateClass([
+  vividElement.observable
+], ListboxOption.prototype, "_highlighted");
+__decorateClass([
+  vividElement.observable
+], ListboxOption.prototype, "_displayCheckmark");
+__decorateClass([
+  vividElement.observable
+], ListboxOption.prototype, "_matchedRange");
+class DelegatesARIAListboxOption {
+}
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  vividElement.observable
+], DelegatesARIAListboxOption.prototype, "ariaChecked");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  vividElement.observable
+], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  vividElement.observable
+], DelegatesARIAListboxOption.prototype, "ariaSelected");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  vividElement.observable
+], DelegatesARIAListboxOption.prototype, "ariaSetSize");
+applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing, DelegatesARIAListboxOption);
+
+exports.ListboxOption = ListboxOption;
+exports.isListboxOption = isListboxOption;

package/shared/option.js

@@ -0,0 +1,202 @@
+import { a as applyMixins } from './apply-mixins.js';
+import { A as AffixIconWithTrailing } from './affix.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
+import { V as VividElement, O as Observable, o as observable, a as attr } from './vivid-element.js';
+import { i as isHTMLElement } from './dom.js';
+
+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;
+};
+function isListboxOption(el) {
+  return isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
+}
+class ListboxOption extends VividElement {
+  constructor(text, value, defaultSelected, selected) {
+    super();
+    this.defaultSelected = false;
+    /**
+     * Tracks whether the "selected" property has been changed.
+     * @internal
+     */
+    this.dirtySelected = false;
+    this.selected = this.defaultSelected;
+    /**
+     * Track whether the value has been changed from the initial value
+     */
+    this.dirtyValue = false;
+    this._highlighted = false;
+    this._displayCheckmark = false;
+    this._matchedRange = null;
+    if (text) {
+      this.text = text;
+    }
+    if (value) {
+      this.initialValue = value;
+    }
+    if (defaultSelected) {
+      this.defaultSelected = defaultSelected;
+    }
+    if (selected) {
+      this.selected = selected;
+    }
+    this.proxy = new Option(
+      this.text,
+      // @ts-expect-error Propery is used before it is assigned
+      this.initialValue,
+      this.defaultSelected,
+      this.selected
+    );
+    this.proxy.disabled = this.disabled;
+  }
+  /**
+   * Updates the ariaChecked property when the checked property changes.
+   *
+   * @param _ - the previous checked value
+   * @param next - the current checked value
+   *
+   * @public
+   */
+  checkedChanged(_, next) {
+    if (typeof next === "boolean") {
+      this.ariaChecked = next ? "true" : "false";
+      return;
+    }
+    this.ariaChecked = null;
+  }
+  defaultSelectedChanged() {
+    if (!this.dirtySelected) {
+      this.selected = this.defaultSelected;
+      if (this.proxy instanceof HTMLOptionElement) {
+        this.proxy.selected = this.defaultSelected;
+      }
+    }
+  }
+  disabledChanged() {
+    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() {
+    if (!this.dirtyValue) {
+      this.value = this.initialValue;
+      this.dirtyValue = false;
+    }
+  }
+  get label() {
+    return this._label ?? this.text;
+  }
+  set label(value) {
+    this._label = value;
+  }
+  set text(value) {
+    this._text = value;
+  }
+  get text() {
+    return this._text ?? "";
+  }
+  set value(next) {
+    const newValue = `${next ?? ""}`;
+    this._value = newValue;
+    this.dirtyValue = true;
+    if (this.proxy instanceof HTMLOptionElement) {
+      this.proxy.value = newValue;
+    }
+    Observable.notify(this, "value");
+  }
+  get value() {
+    Observable.track(this, "value");
+    return this._value ?? this.text;
+  }
+  get form() {
+    return null;
+  }
+  /**
+   * @internal
+   */
+  get _matchedRangeSafe() {
+    return this._matchedRange ?? { from: 0, to: 0 };
+  }
+}
+__decorateClass([
+  observable
+], ListboxOption.prototype, "checked");
+__decorateClass([
+  observable
+], ListboxOption.prototype, "defaultSelected");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  attr({ mode: "boolean" })
+], ListboxOption.prototype, "disabled");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  attr({ attribute: "selected", mode: "boolean" })
+], ListboxOption.prototype, "selectedAttribute");
+__decorateClass([
+  observable
+], ListboxOption.prototype, "selected");
+__decorateClass([
+  attr({ attribute: "value", mode: "fromView" })
+], ListboxOption.prototype, "initialValue");
+__decorateClass([
+  attr({
+    attribute: "label"
+  })
+], ListboxOption.prototype, "_label");
+__decorateClass([
+  attr({
+    attribute: "text"
+  })
+], ListboxOption.prototype, "_text");
+__decorateClass([
+  observable
+], ListboxOption.prototype, "_highlighted");
+__decorateClass([
+  observable
+], ListboxOption.prototype, "_displayCheckmark");
+__decorateClass([
+  observable
+], ListboxOption.prototype, "_matchedRange");
+class DelegatesARIAListboxOption {
+}
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  observable
+], DelegatesARIAListboxOption.prototype, "ariaChecked");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  observable
+], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  observable
+], DelegatesARIAListboxOption.prototype, "ariaSelected");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  observable
+], DelegatesARIAListboxOption.prototype, "ariaSetSize");
+applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
+applyMixins(ListboxOption, AffixIconWithTrailing, DelegatesARIAListboxOption);
+
+export { ListboxOption as L, isListboxOption as i };