@vonage/vivid 5.3.0 → 5.4.0

package/combobox/index.js

@@ -1,11 +1,11 @@
-import { i as k } from "../bundled/definition2.js";
-import { P as $, p as I } from "../bundled/definition9.js";
-import { l as C } from "../bundled/definition11.js";
-import { s as O } from "../bundled/text-field.js";
-import { U as S, O as v, a as l, o as b, h as u, c as A, d as V } from "../bundled/vivid-element.js";
-import { W as H, f as T } from "../bundled/mixins.js";
-import { L as m } from "../bundled/listbox.js";
-import { F as D } from "../bundled/form-associated.js";
+import { i as y } from "../bundled/definition2.js";
+import { P as k, p as $ } from "../bundled/definition9.js";
+import { l as I } from "../bundled/definition11.js";
+import { s as C } from "../bundled/text-field.js";
+import { U as O, O as S, a as l, o as v, h as u, c as A, d as V } from "../bundled/vivid-element.js";
+import { W as D, f as H } from "../bundled/mixins.js";
+import { L as b } from "../bundled/listbox.js";
+import { F as T } from "../bundled/form-associated.js";
 import { W as F } from "../bundled/with-contextual-help.js";
 import { W as B } from "../bundled/with-error-text.js";
 import { W as L } from "../bundled/with-success-text.js";
@@ -25,15 +25,15 @@ const j = '.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-ex
   both: "both",
   none: "none"
 };
-var Y = Object.defineProperty, n = (a, t, e, o) => {
+var Y = Object.defineProperty, i = (a, t, e, o) => {
   for (var r = void 0, s = a.length - 1, c; s >= 0; s--)
     (c = a[s]) && (r = c(t, e, r) || r);
   return r && Y(t, e, r), r;
 };
-class i extends F(
-  H(
+class n extends F(
+  D(
     B(
-      L(E(W(D(m))))
+      L(E(W(T(b))))
     )
   )
 ) {
@@ -41,12 +41,10 @@ class i extends F(
     super(...arguments), this.filteredOptions = [], this.filter = "", this.fixedDropdown = !1, this.listboxId = z("listbox-"), this.maxHeight = 0, this.open = !1, this.proxy = document.createElement("input");
   }
   /**
-   * Reset the element to its first selectable option when its parent form is reset.
-   *
    * @internal
    */
   formResetCallback() {
-    super.formResetCallback(), this.setDefaultSelectedOption(), this.updateValue();
+    super.formResetCallback(), this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1, this.value = this.firstSelectedOption?.text || "";
   }
   /** {@inheritDoc (FormAssociated:interface).validate} */
   validate() {
@@ -71,7 +69,7 @@ class i extends F(
    */
   openChanged() {
     if (this.open) {
-      this.focusAndScrollOptionIntoView(), S.enqueue(() => this.control.focus());
+      this.focusAndScrollOptionIntoView(), O.enqueue(() => this.control.focus());
       return;
     }
   }
@@ -83,10 +81,10 @@ class i extends F(
    * Overrides `Listbox.options`.
    */
   get options() {
-    return v.track(this, "options"), this.filteredOptions.length ? this.filteredOptions : this._options;
+    return S.track(this, "options"), this.filteredOptions.length ? this.filteredOptions : this._options;
   }
   set options(t) {
-    this._options = t, v.notify(this, "options");
+    super.options = t;
   }
   /**
    * Updates the placeholder on the proxy element.
@@ -262,20 +260,8 @@ class i extends F(
   selectPreviousOption() {
     !this.disabled && this.selectedIndex >= 0 && (this.selectedIndex = this.selectedIndex - 1);
   }
-  /**
-   * Set the default selected options at initialization or reset.
-   *
-   * @internal
-   * @remarks
-   * Overrides `Listbox.setDefaultSelectedOption`
-   */
-  setDefaultSelectedOption() {
-    if (this.$fastController.isConnected && this.options) {
-      const t = this.options.findIndex(
-        (e) => e.getAttribute("selected") !== null || e.selected
-      );
-      this.selectedIndex = t, !this.dirtyValue && this.firstSelectedOption && (this.value = this.firstSelectedOption.text), this.setSelectedOptions();
-    }
+  _isDefaultSelected(t) {
+    return super._isDefaultSelected(t) || t.text !== "" && t.text === this.initialValue;
   }
   /**
    * Focus and set the content of the control based on the first selected option.
@@ -344,7 +330,7 @@ class i extends F(
    * @internal
    */
   updateValue(t) {
-    this.$fastController.isConnected && (this.value = this.firstSelectedOption?.text || this.control.value, this.control.value = this.value), t && this.$emit("change");
+    this.$fastController.isConnected && (this.value = this.firstSelectedOption?.text || this.control.value), t && this.$emit("change");
   }
   /**
    * @internal
@@ -354,36 +340,36 @@ class i extends F(
     this.control.setSelectionRange(t, t);
   }
 }
-n([
+i([
   l({ attribute: "autocomplete", mode: "fromView" })
-], i.prototype, "autocomplete");
-n([
+], n.prototype, "autocomplete");
+i([
   l
-], i.prototype, "appearance");
-n([
+], n.prototype, "appearance");
+i([
   l
-], i.prototype, "shape");
-n([
+], n.prototype, "shape");
+i([
   l()
-], i.prototype, "scale");
-n([
+], n.prototype, "scale");
+i([
   l
-], i.prototype, "placement");
-n([
+], n.prototype, "placement");
+i([
   l({ mode: "boolean", attribute: "fixed-dropdown" })
-], i.prototype, "fixedDropdown");
-n([
-  b
-], i.prototype, "metaSlottedContent");
-n([
-  b
-], i.prototype, "maxHeight");
-n([
+], n.prototype, "fixedDropdown");
+i([
+  v
+], n.prototype, "metaSlottedContent");
+i([
+  v
+], n.prototype, "maxHeight");
+i([
   l({ attribute: "open", mode: "boolean" })
-], i.prototype, "open");
-n([
+], n.prototype, "open");
+i([
   l
-], i.prototype, "placeholder");
+], n.prototype, "placeholder");
 const G = ({
   icon: a,
   iconSlottedContent: t,
@@ -392,23 +378,23 @@ const G = ({
   successText: r,
   shape: s,
   scale: c,
-  disabled: x,
-  placeholder: g,
-  label: _,
+  disabled: m,
+  placeholder: x,
+  label: g,
   appearance: f,
-  open: w,
-  _activeDescendant: y
+  open: _,
+  _activeDescendant: w
 }) => N(
   "base",
-  ["disabled", x],
+  ["disabled", m],
   [`shape-${s}`, !!s],
   [`size-${c}`, !!c],
-  ["placeholder", !!g],
+  ["placeholder", !!x],
   [`appearance-${f}`, !!f],
-  ["no-label", !_],
+  ["no-label", !g],
   ["has-icon", !!a || !!t?.length],
   ["has-meta", !!e?.length],
-  ["has-activedescendant", !!y && w],
+  ["has-activedescendant", !!w && _],
   ["error", !!o],
   ["success", !!r]
 );
@@ -464,7 +450,7 @@ function X(a) {
 	</div>`;
 }
 const Z = (a) => {
-  const t = a.tagFor($);
+  const t = a.tagFor(k);
   return u`
 		<template
 			tabindex="${(e) => e.disabled ? null : "0"}"
@@ -486,7 +472,7 @@ const Z = (a) => {
 						?disabled="${(e) => e.disabled}"
 						${d("listbox")}>
 						<slot ${h({
-    filter: m.slottedOptionFilter,
+    filter: b.slottedOptionFilter,
     flatten: !0,
     property: "slottedOptions"
   })}>
@@ -501,16 +487,16 @@ const Z = (a) => {
 	`;
 }, ee = V(
   "combobox",
-  i,
+  n,
   Z,
   [
-    k,
+    y,
+    $,
     I,
-    C,
-    T
+    H
   ],
   {
-    styles: [O, j],
+    styles: [C, j],
     shadowOptions: {
       delegatesFocus: !0
     }

package/custom-elements.json

@@ -8300,6 +8300,28 @@
               "description": "Filter available options by text value.",
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "_isDefaultSelected",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "ListboxOption"
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "Listbox",
+                "module": "src/shared/foundation/listbox/listbox.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "helperText",
@@ -8645,6 +8667,45 @@
                 "module": "src/shared/foundation/listbox/listbox.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "getNextSelectableIndex",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "fromIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "Listbox",
+                "module": "src/shared/foundation/listbox/listbox.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_validSelectedIndex",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "Listbox",
+                "module": "src/shared/foundation/listbox/listbox.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "selectFirstOption",
@@ -8660,6 +8721,40 @@
                 "module": "src/shared/foundation/listbox/listbox.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "_newDefaultSelectedIndex",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "number | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "prev",
+                  "type": {
+                    "text": "ListboxOption[]"
+                  }
+                },
+                {
+                  "name": "next",
+                  "type": {
+                    "text": "ListboxOption[]"
+                  }
+                },
+                {
+                  "name": "currentSelectedIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "Listbox",
+                "module": "src/shared/foundation/listbox/listbox.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "setSelectedOptions",
@@ -25580,6 +25675,34 @@
               "kind": "method",
               "name": "#updateSelectionLimit"
             },
+            {
+              "kind": "field",
+              "name": "enableSelectAll",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a \"Select All\" option at the top of the options list.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "selectAllText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Overrides the default \"Select All\" text",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "deselectAllText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Overrides the default \"Deselect All\" text",
+              "privacy": "public"
+            },
             {
               "kind": "method",
               "name": "#determineInitialValues"
@@ -26056,6 +26179,31 @@
               "default": "null",
               "fieldName": "maxSelected"
             },
+            {
+              "name": "enable-select-all",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds a \"Select All\" option at the top of the options list.",
+              "fieldName": "enableSelectAll"
+            },
+            {
+              "name": "select-all-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Overrides the default \"Select All\" text",
+              "fieldName": "selectAllText"
+            },
+            {
+              "name": "deselect-all-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Overrides the default \"Deselect All\" text",
+              "fieldName": "deselectAllText"
+            },
             {
               "name": "helper-text",
               "type": {
@@ -26498,11 +26646,53 @@
             },
             {
               "kind": "method",
-              "name": "setDefaultSelectedOption",
+              "name": "_newDefaultSelectedIndex",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "number | null"
                 }
+              },
+              "parameters": [
+                {
+                  "name": "prev",
+                  "type": {
+                    "text": "ListboxOption[]"
+                  }
+                },
+                {
+                  "name": "next",
+                  "type": {
+                    "text": "ListboxOption[]"
+                  }
+                },
+                {
+                  "name": "currentSelectIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "Listbox",
+                "module": "src/shared/foundation/listbox/listbox.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_isDefaultSelected",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "ListboxOption"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "Listbox",
+                "module": "src/shared/foundation/listbox/listbox.ts"
               }
             },
             {
@@ -26919,6 +27109,45 @@
                 "module": "src/shared/foundation/listbox/listbox.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "getNextSelectableIndex",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "fromIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "Listbox",
+                "module": "src/shared/foundation/listbox/listbox.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_validSelectedIndex",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "Listbox",
+                "module": "src/shared/foundation/listbox/listbox.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "selectFirstOption",
@@ -38795,6 +39024,37 @@
               ],
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "getNextSelectableIndex",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "fromIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_validSelectedIndex",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "selectFirstOption",
@@ -38806,6 +39066,49 @@
               "description": "Moves focus to the first selectable option.",
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "_newDefaultSelectedIndex",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "number | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "prev",
+                  "type": {
+                    "text": "ListboxOption[]"
+                  }
+                },
+                {
+                  "name": "next",
+                  "type": {
+                    "text": "ListboxOption[]"
+                  }
+                },
+                {
+                  "name": "currentSelectedIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_isDefaultSelected",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "ListboxOption"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "setSelectedOptions",

package/date-picker/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const button_definition = require('../unbundled/definition.cjs');
 const textField_definition = require('../text-field/definition.cjs');
 const divider_definition = require('../divider/definition.cjs');

package/date-picker/definition.js

@@ -1,4 +1,4 @@
-import { p as popupDefinition } from '../unbundled/definition4.js';
+import { p as popupDefinition } from '../unbundled/definition5.js';
 import { b as buttonDefinition } from '../unbundled/definition.js';
 import { textFieldDefinition } from '../text-field/definition.js';
 import { dividerDefinition } from '../divider/definition.js';

package/date-range-picker/definition.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const button_definition = require('../unbundled/definition.cjs');
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const textField_definition = require('../text-field/definition.cjs');
 const divider_definition = require('../divider/definition.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');

package/date-range-picker/definition.js

@@ -1,5 +1,5 @@
 import { b as buttonDefinition } from '../unbundled/definition.js';
-import { p as popupDefinition } from '../unbundled/definition4.js';
+import { p as popupDefinition } from '../unbundled/definition5.js';
 import { textFieldDefinition } from '../text-field/definition.js';
 import { dividerDefinition } from '../divider/definition.js';
 import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';

package/date-time-picker/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const button_definition = require('../unbundled/definition.cjs');
 const textField_definition = require('../text-field/definition.cjs');
 const divider_definition = require('../divider/definition.cjs');

package/date-time-picker/definition.js

@@ -1,4 +1,4 @@
-import { p as popupDefinition } from '../unbundled/definition4.js';
+import { p as popupDefinition } from '../unbundled/definition5.js';
 import { b as buttonDefinition } from '../unbundled/definition.js';
 import { textFieldDefinition } from '../text-field/definition.js';
 import { dividerDefinition } from '../divider/definition.js';