@vonage/vivid 4.18.0 → 4.19.0-preview.0

package/custom-elements.json

@@ -288,6 +288,182 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/action-group/action-group.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ActionGroup",
+          "cssProperties": [
+            {
+              "name": "--vvd-action-group-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-action-group-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
+            },
+            {
+              "name": "--vvd-action-group-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "ActionGroupShape | undefined"
+              },
+              "description": "The shape the ActionGroup should have.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "ActionGroupAppearance | undefined"
+              },
+              "description": "The appearance the ActionGroup should have.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "tight",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether action group should have padding.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "VIVID_VERSION",
+              "static": true,
+              "default": "__PACKAGE_VERSION__",
+              "description": "The current version of the Vivid library, which is useful for debugging.\nIt can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.",
+              "type": {
+                "text": "string"
+              },
+              "inheritedFrom": {
+                "name": "VividElement",
+                "module": "libs/components/src/shared/foundation/vivid-element/vivid-element.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "shape",
+              "type": {
+                "text": "ActionGroupShape | undefined"
+              },
+              "description": "The shape the ActionGroup should have.",
+              "fieldName": "shape"
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "ActionGroupAppearance | undefined"
+              },
+              "description": "The appearance the ActionGroup should have.",
+              "fieldName": "appearance"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether action group should have padding.",
+              "fieldName": "tight"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DelegatesAria",
+              "module": "/libs/components/src/shared/aria/delegates-aria"
+            }
+          ],
+          "superclass": {
+            "name": "VividElement",
+            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "action-group"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ActionGroup",
+          "declaration": {
+            "name": "ActionGroup",
+            "module": "libs/components/src/lib/action-group/action-group.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/action-group/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "registerActionGroup",
+          "description": "Registers the action-group elements with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ActionGroupShape",
+          "declaration": {
+            "name": "ActionGroupShape",
+            "module": "./action-group"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ActionGroupAppearance",
+          "declaration": {
+            "name": "ActionGroupAppearance",
+            "module": "./action-group"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerActionGroup",
+          "declaration": {
+            "name": "registerActionGroup",
+            "module": "libs/components/src/lib/action-group/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VwcActionGroupElement",
+          "declaration": {
+            "name": "ActionGroup",
+            "module": "libs/components/src/lib/action-group/definition.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "libs/components/src/lib/accordion-item/accordion-item.ts",
@@ -530,182 +706,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/action-group/action-group.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ActionGroup",
-          "cssProperties": [
-            {
-              "name": "--vvd-action-group-accent-primary",
-              "default": "var(--vvd-color-canvas-text)"
-            },
-            {
-              "name": "--vvd-action-group-accent-intermediate",
-              "default": "var(--vvd-color-neutral-500)"
-            },
-            {
-              "name": "--vvd-action-group-accent-faint",
-              "default": "var(--vvd-color-neutral-50)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "shape",
-              "type": {
-                "text": "ActionGroupShape | undefined"
-              },
-              "description": "The shape the ActionGroup should have.",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "appearance",
-              "type": {
-                "text": "ActionGroupAppearance | undefined"
-              },
-              "description": "The appearance the ActionGroup should have.",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "tight",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether action group should have padding.",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "VIVID_VERSION",
-              "static": true,
-              "default": "__PACKAGE_VERSION__",
-              "description": "The current version of the Vivid library, which is useful for debugging.\nIt can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.",
-              "type": {
-                "text": "string"
-              },
-              "inheritedFrom": {
-                "name": "VividElement",
-                "module": "libs/components/src/shared/foundation/vivid-element/vivid-element.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "shape",
-              "type": {
-                "text": "ActionGroupShape | undefined"
-              },
-              "description": "The shape the ActionGroup should have.",
-              "fieldName": "shape"
-            },
-            {
-              "name": "appearance",
-              "type": {
-                "text": "ActionGroupAppearance | undefined"
-              },
-              "description": "The appearance the ActionGroup should have.",
-              "fieldName": "appearance"
-            },
-            {
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether action group should have padding.",
-              "fieldName": "tight"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DelegatesAria",
-              "module": "/libs/components/src/shared/aria/delegates-aria"
-            }
-          ],
-          "superclass": {
-            "name": "VividElement",
-            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
-          },
-          "vividComponent": {
-            "public": true,
-            "name": "action-group"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ActionGroup",
-          "declaration": {
-            "name": "ActionGroup",
-            "module": "libs/components/src/lib/action-group/action-group.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/action-group/definition.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "registerActionGroup",
-          "description": "Registers the action-group elements with the design system.",
-          "parameters": [
-            {
-              "description": "the prefix to use for the component name",
-              "name": "prefix"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ActionGroupShape",
-          "declaration": {
-            "name": "ActionGroupShape",
-            "module": "./action-group"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ActionGroupAppearance",
-          "declaration": {
-            "name": "ActionGroupAppearance",
-            "module": "./action-group"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "registerActionGroup",
-          "declaration": {
-            "name": "registerActionGroup",
-            "module": "libs/components/src/lib/action-group/definition.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "VwcActionGroupElement",
-          "declaration": {
-            "name": "ActionGroup",
-            "module": "libs/components/src/lib/action-group/definition.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "libs/components/src/lib/alert/alert.ts",
@@ -13884,6 +13884,26 @@
               },
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "_internalHighlightText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "highlightText",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_highlightTextToUse",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "proxy",
@@ -13942,6 +13962,13 @@
                 "text": "string | undefined"
               },
               "fieldName": "_text"
+            },
+            {
+              "name": "highlight-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "highlightText"
             }
           ],
           "superclass": {
@@ -16909,6 +16936,10 @@
             {
               "description": "Message that appears when no options match the search query.",
               "name": "no-matches"
+            },
+            {
+              "description": "Message that appears when no options are loading.",
+              "name": "loading-options"
             }
           ],
           "members": [
@@ -17057,6 +17088,11 @@
               "name": "selectedOptions",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "searchText",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#slottedOptionsChangeHandler",
@@ -17114,8 +17150,14 @@
             },
             {
               "kind": "field",
-              "name": "#suppressFilter",
-              "privacy": "private",
+              "name": "filterOption",
+              "type": {
+                "text": "(\n\t\toption: ListboxOption,\n\t\tsearchText: string\n\t) => boolean | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "loading",
               "type": {
                 "text": "boolean"
               },
@@ -17288,6 +17330,13 @@
               "description": "Fired when the selected options change",
               "name": "input"
             },
+            {
+              "type": {
+                "text": "CustomEvent<undefined>"
+              },
+              "description": "Fired when the search text changes",
+              "name": "input:search-text"
+            },
             {
               "type": {
                 "text": "CustomEvent<undefined>"
@@ -17356,6 +17405,13 @@
               "default": "null",
               "fieldName": "maxLines"
             },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "loading"
+            },
             {
               "type": {
                 "text": "boolean"

package/lib/option/option.d.ts

@@ -23,6 +23,9 @@ export declare class ListboxOption extends VividElement {
     set value(next: string);
     get value(): string;
     get form(): HTMLFormElement | null;
+    _internalHighlightText: string;
+    highlightText?: string;
+    get _highlightTextToUse(): string;
     constructor(text?: string, value?: string, defaultSelected?: boolean, selected?: boolean);
 }
 export interface ListboxOption extends AffixIconWithTrailing {

package/lib/searchable-select/searchable-select.d.ts

@@ -20,6 +20,9 @@ export declare class SearchableSelect extends FormAssociatedSearchableSelect {
     set selectedIndex(index: number);
     get options(): ListboxOption[];
     get selectedOptions(): ListboxOption[];
+    get searchText(): string;
+    filterOption?: (option: ListboxOption, searchText: string) => boolean;
+    loading: boolean;
     clearable: boolean;
     setFormValue: (value: File | string | FormData | null, state?: File | string | FormData | null) => void;
     connectedCallback(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vivid",
-	"version": "4.18.0",
+	"version": "4.19.0-preview.0",
 	"type": "module",
 	"module": "./index.js",
 	"main": "./index.cjs",

package/shared/definition36.cjs

@@ -24,6 +24,7 @@ const ListboxOptionTemplate = (context) => {
 			aria-checked="${(x) => x.checked}"
 			aria-selected="${(x) => x.selected}"
 			aria-disabled="${(x) => x.disabled}"
+			style="${(x) => x._hidden ? "display: none" : ""}"
 		>
 			<div class="${getClasses}">
 				${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
@@ -31,7 +32,7 @@ const ListboxOptionTemplate = (context) => {
     (x) => x.text,
     vividElement.html`<div class="text">
 						${when.when(
-      (x) => x._matchedRange,
+      (x) => x._highlightTextToUse,
       vividElement.html`${(x) => x.text.slice(0, x._matchedRangeSafe.from)}<span class="match"
 									>${(x) => x.text.slice(
         x._matchedRangeSafe.from,

package/shared/definition36.js

@@ -22,6 +22,7 @@ const ListboxOptionTemplate = (context) => {
 			aria-checked="${(x) => x.checked}"
 			aria-selected="${(x) => x.selected}"
 			aria-disabled="${(x) => x.disabled}"
+			style="${(x) => x._hidden ? "display: none" : ""}"
 		>
 			<div class="${getClasses}">
 				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
@@ -29,7 +30,7 @@ const ListboxOptionTemplate = (context) => {
     (x) => x.text,
     html`<div class="text">
 						${when(
-      (x) => x._matchedRange,
+      (x) => x._highlightTextToUse,
       html`${(x) => x.text.slice(0, x._matchedRangeSafe.from)}<span class="match"
 									>${(x) => x.text.slice(
         x._matchedRangeSafe.from,