@vonage/vivid 4.12.0 → 4.13.0

package/shared/definition36.cjs

@@ -3,7 +3,7 @@
 const index = require('./index.cjs');
 const definition = require('./definition27.cjs');
 const affix = require('./affix.cjs');
-const listboxOption = require('./listbox-option.cjs');
+const ariaGlobal = require('./aria-global2.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const icon = require('./icon.cjs');
 const when = require('./when.cjs');
@@ -18,19 +18,93 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class ListboxOption extends listboxOption.ListboxOption {
-  constructor() {
-    super(...arguments);
+class ListboxOption extends index.FoundationElement {
+  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;
   }
-  // #region overrides base class accessor
-  set text(value) {
-    this._text = value;
+  /**
+   * 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;
   }
-  get text() {
-    return this._text ?? "";
+  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;
@@ -38,6 +112,28 @@ class ListboxOption extends listboxOption.ListboxOption {
   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;
+    }
+    index.Observable.notify(this, "value");
+  }
+  get value() {
+    index.Observable.track(this, "value");
+    return this._value ?? this.text;
+  }
+  get form() {
+    return null;
+  }
   /**
    * @internal
    */
@@ -46,15 +142,35 @@ class ListboxOption extends listboxOption.ListboxOption {
   }
 }
 __decorateClass([
-  index.attr({
-    attribute: "text"
-  })
-], ListboxOption.prototype, "_text");
+  index.observable
+], ListboxOption.prototype, "checked");
+__decorateClass([
+  index.observable
+], ListboxOption.prototype, "defaultSelected");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], ListboxOption.prototype, "disabled");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  index.attr({ attribute: "selected", mode: "boolean" })
+], ListboxOption.prototype, "selectedAttribute");
+__decorateClass([
+  index.observable
+], ListboxOption.prototype, "selected");
+__decorateClass([
+  index.attr({ attribute: "value", mode: "fromView" })
+], ListboxOption.prototype, "initialValue");
 __decorateClass([
   index.attr({
     attribute: "label"
   })
 ], ListboxOption.prototype, "_label");
+__decorateClass([
+  index.attr({
+    attribute: "text"
+  })
+], ListboxOption.prototype, "_text");
 __decorateClass([
   index.observable
 ], ListboxOption.prototype, "_highlighted");
@@ -64,7 +180,26 @@ __decorateClass([
 __decorateClass([
   index.observable
 ], ListboxOption.prototype, "_matchedRange");
-applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing);
+class DelegatesARIAListboxOption {
+}
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  index.observable
+], DelegatesARIAListboxOption.prototype, "ariaChecked");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  index.observable
+], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  index.observable
+], DelegatesARIAListboxOption.prototype, "ariaSelected");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  index.observable
+], DelegatesARIAListboxOption.prototype, "ariaSetSize");
+applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing, DelegatesARIAListboxOption);
 
 const getClasses = (x) => classNames.classNames(
   "base",

package/shared/definition36.js

@@ -1,7 +1,7 @@
-import { a as attr, o as observable, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, O as Observable, o as observable, a as attr, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition27.js';
 import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { L as ListboxOption$1 } from './listbox-option.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global2.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
@@ -16,19 +16,93 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class ListboxOption extends ListboxOption$1 {
-  constructor() {
-    super(...arguments);
+class ListboxOption extends FoundationElement {
+  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;
   }
-  // #region overrides base class accessor
-  set text(value) {
-    this._text = value;
+  /**
+   * 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;
   }
-  get text() {
-    return this._text ?? "";
+  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;
@@ -36,6 +110,28 @@ class ListboxOption extends ListboxOption$1 {
   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
    */
@@ -44,15 +140,35 @@ class ListboxOption extends ListboxOption$1 {
   }
 }
 __decorateClass([
-  attr({
-    attribute: "text"
-  })
-], ListboxOption.prototype, "_text");
+  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");
@@ -62,7 +178,26 @@ __decorateClass([
 __decorateClass([
   observable
 ], ListboxOption.prototype, "_matchedRange");
-applyMixins(ListboxOption, AffixIconWithTrailing);
+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);
 
 const getClasses = (x) => classNames(
   "base",