@vonage/vivid 4.17.0 → 4.19.0-preview.0

package/shared/option.cjs

@@ -2,17 +2,17 @@
 
 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 __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   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);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 function isListboxOption(el) {
@@ -34,7 +34,9 @@ class ListboxOption extends vividElement.VividElement {
     this.dirtyValue = false;
     this._highlighted = false;
     this._displayCheckmark = false;
+    this._internalHighlightText = "";
     this._matchedRange = null;
+    this._hidden = false;
     if (text) {
       this.text = text;
     }
@@ -56,21 +58,6 @@ class ListboxOption extends vividElement.VividElement {
     );
     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;
@@ -80,7 +67,6 @@ class ListboxOption extends vividElement.VividElement {
     }
   }
   disabledChanged() {
-    this.ariaDisabled = this.disabled ? "true" : "false";
     if (this.proxy instanceof HTMLOptionElement) {
       this.proxy.disabled = this.disabled;
     }
@@ -92,7 +78,6 @@ class ListboxOption extends vividElement.VividElement {
     }
   }
   selectedChanged() {
-    this.ariaSelected = this.selected ? "true" : "false";
     if (!this.dirtySelected) {
       this.dirtySelected = true;
     }
@@ -134,72 +119,75 @@ class ListboxOption extends vividElement.VividElement {
   get form() {
     return null;
   }
-  /**
-   * @internal
-   */
+  get _highlightTextToUse() {
+    return this.highlightText ?? this._internalHighlightText;
+  }
   get _matchedRangeSafe() {
-    return this._matchedRange ?? { from: 0, to: 0 };
+    if (this._highlightTextToUse) {
+      const matchIndex = this.text.toLowerCase().indexOf(this._highlightTextToUse.toLowerCase());
+      return matchIndex === -1 ? { from: 0, to: 0 } : {
+        from: matchIndex,
+        to: matchIndex + this._highlightTextToUse.length
+      };
+    }
+    return { from: 0, to: 0 };
   }
 }
 __decorateClass([
   vividElement.observable
-], ListboxOption.prototype, "checked");
+], ListboxOption.prototype, "checked", 2);
 __decorateClass([
   vividElement.observable
-], ListboxOption.prototype, "defaultSelected");
+], ListboxOption.prototype, "defaultSelected", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
   vividElement.attr({ mode: "boolean" })
-], ListboxOption.prototype, "disabled");
+], ListboxOption.prototype, "disabled", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
   vividElement.attr({ attribute: "selected", mode: "boolean" })
-], ListboxOption.prototype, "selectedAttribute");
+], ListboxOption.prototype, "selectedAttribute", 2);
 __decorateClass([
   vividElement.observable
-], ListboxOption.prototype, "selected");
+], ListboxOption.prototype, "selected", 2);
 __decorateClass([
   vividElement.attr({ attribute: "value", mode: "fromView" })
-], ListboxOption.prototype, "initialValue");
+], ListboxOption.prototype, "initialValue", 2);
 __decorateClass([
   vividElement.attr({
     attribute: "label"
   })
-], ListboxOption.prototype, "_label");
+], ListboxOption.prototype, "_label", 2);
 __decorateClass([
   vividElement.attr({
     attribute: "text"
   })
-], ListboxOption.prototype, "_text");
+], ListboxOption.prototype, "_text", 2);
 __decorateClass([
   vividElement.observable
-], ListboxOption.prototype, "_highlighted");
+], ListboxOption.prototype, "_highlighted", 2);
 __decorateClass([
   vividElement.observable
-], ListboxOption.prototype, "_displayCheckmark");
+], ListboxOption.prototype, "_displayCheckmark", 2);
 __decorateClass([
   vividElement.observable
-], ListboxOption.prototype, "_matchedRange");
-class DelegatesARIAListboxOption {
-}
-// @ts-expect-error Type is incorrectly non-optional
+], ListboxOption.prototype, "_internalHighlightText", 2);
 __decorateClass([
-  vividElement.observable
-], DelegatesARIAListboxOption.prototype, "ariaChecked");
-// @ts-expect-error Type is incorrectly non-optional
+  vividElement.attr({ attribute: "highlight-text" })
+], ListboxOption.prototype, "highlightText", 2);
 __decorateClass([
-  vividElement.observable
-], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
-// @ts-expect-error Type is incorrectly non-optional
+  vividElement.volatile
+], ListboxOption.prototype, "_highlightTextToUse", 1);
 __decorateClass([
   vividElement.observable
-], DelegatesARIAListboxOption.prototype, "ariaSelected");
-// @ts-expect-error Type is incorrectly non-optional
+], ListboxOption.prototype, "_matchedRange", 2);
+__decorateClass([
+  vividElement.volatile
+], ListboxOption.prototype, "_matchedRangeSafe", 1);
 __decorateClass([
   vividElement.observable
-], DelegatesARIAListboxOption.prototype, "ariaSetSize");
-applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing, DelegatesARIAListboxOption);
+], ListboxOption.prototype, "_hidden", 2);
+applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing);
 
 exports.ListboxOption = ListboxOption;
 exports.isListboxOption = isListboxOption;

package/shared/option.js

@@ -1,16 +1,16 @@
 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 { V as VividElement, O as Observable, o as observable, a as attr, v as volatile } from './vivid-element.js';
 import { i as isHTMLElement } from './dom.js';
 
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   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);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 function isListboxOption(el) {
@@ -32,7 +32,9 @@ class ListboxOption extends VividElement {
     this.dirtyValue = false;
     this._highlighted = false;
     this._displayCheckmark = false;
+    this._internalHighlightText = "";
     this._matchedRange = null;
+    this._hidden = false;
     if (text) {
       this.text = text;
     }
@@ -54,21 +56,6 @@ class ListboxOption extends VividElement {
     );
     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;
@@ -78,7 +65,6 @@ class ListboxOption extends VividElement {
     }
   }
   disabledChanged() {
-    this.ariaDisabled = this.disabled ? "true" : "false";
     if (this.proxy instanceof HTMLOptionElement) {
       this.proxy.disabled = this.disabled;
     }
@@ -90,7 +76,6 @@ class ListboxOption extends VividElement {
     }
   }
   selectedChanged() {
-    this.ariaSelected = this.selected ? "true" : "false";
     if (!this.dirtySelected) {
       this.dirtySelected = true;
     }
@@ -132,71 +117,74 @@ class ListboxOption extends VividElement {
   get form() {
     return null;
   }
-  /**
-   * @internal
-   */
+  get _highlightTextToUse() {
+    return this.highlightText ?? this._internalHighlightText;
+  }
   get _matchedRangeSafe() {
-    return this._matchedRange ?? { from: 0, to: 0 };
+    if (this._highlightTextToUse) {
+      const matchIndex = this.text.toLowerCase().indexOf(this._highlightTextToUse.toLowerCase());
+      return matchIndex === -1 ? { from: 0, to: 0 } : {
+        from: matchIndex,
+        to: matchIndex + this._highlightTextToUse.length
+      };
+    }
+    return { from: 0, to: 0 };
   }
 }
 __decorateClass([
   observable
-], ListboxOption.prototype, "checked");
+], ListboxOption.prototype, "checked", 2);
 __decorateClass([
   observable
-], ListboxOption.prototype, "defaultSelected");
+], ListboxOption.prototype, "defaultSelected", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
   attr({ mode: "boolean" })
-], ListboxOption.prototype, "disabled");
+], ListboxOption.prototype, "disabled", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
   attr({ attribute: "selected", mode: "boolean" })
-], ListboxOption.prototype, "selectedAttribute");
+], ListboxOption.prototype, "selectedAttribute", 2);
 __decorateClass([
   observable
-], ListboxOption.prototype, "selected");
+], ListboxOption.prototype, "selected", 2);
 __decorateClass([
   attr({ attribute: "value", mode: "fromView" })
-], ListboxOption.prototype, "initialValue");
+], ListboxOption.prototype, "initialValue", 2);
 __decorateClass([
   attr({
     attribute: "label"
   })
-], ListboxOption.prototype, "_label");
+], ListboxOption.prototype, "_label", 2);
 __decorateClass([
   attr({
     attribute: "text"
   })
-], ListboxOption.prototype, "_text");
+], ListboxOption.prototype, "_text", 2);
 __decorateClass([
   observable
-], ListboxOption.prototype, "_highlighted");
+], ListboxOption.prototype, "_highlighted", 2);
 __decorateClass([
   observable
-], ListboxOption.prototype, "_displayCheckmark");
+], ListboxOption.prototype, "_displayCheckmark", 2);
 __decorateClass([
   observable
-], ListboxOption.prototype, "_matchedRange");
-class DelegatesARIAListboxOption {
-}
-// @ts-expect-error Type is incorrectly non-optional
+], ListboxOption.prototype, "_internalHighlightText", 2);
 __decorateClass([
-  observable
-], DelegatesARIAListboxOption.prototype, "ariaChecked");
-// @ts-expect-error Type is incorrectly non-optional
+  attr({ attribute: "highlight-text" })
+], ListboxOption.prototype, "highlightText", 2);
 __decorateClass([
-  observable
-], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
-// @ts-expect-error Type is incorrectly non-optional
+  volatile
+], ListboxOption.prototype, "_highlightTextToUse", 1);
 __decorateClass([
   observable
-], DelegatesARIAListboxOption.prototype, "ariaSelected");
-// @ts-expect-error Type is incorrectly non-optional
+], ListboxOption.prototype, "_matchedRange", 2);
+__decorateClass([
+  volatile
+], ListboxOption.prototype, "_matchedRangeSafe", 1);
 __decorateClass([
   observable
-], DelegatesARIAListboxOption.prototype, "ariaSetSize");
-applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
-applyMixins(ListboxOption, AffixIconWithTrailing, DelegatesARIAListboxOption);
+], ListboxOption.prototype, "_hidden", 2);
+applyMixins(ListboxOption, AffixIconWithTrailing);
 
 export { ListboxOption as L, isListboxOption as i };

package/shared/picker-field/locale.d.ts

@@ -0,0 +1,4 @@
+export interface PickerFieldLocale {
+    clearLabel: string;
+    okLabel: string;
+}