@vonage/vivid 4.18.0 → 4.19.0-preview.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/shared/option.cjs CHANGED
@@ -6,12 +6,13 @@ const vividElement = require('./vivid-element.cjs');
6
6
  const dom = require('./dom.cjs');
7
7
 
8
8
  var __defProp = Object.defineProperty;
9
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
9
10
  var __decorateClass = (decorators, target, key, kind) => {
10
- var result = void 0 ;
11
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
11
12
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
12
13
  if (decorator = decorators[i])
13
- result = (decorator(target, key, result) ) || result;
14
- if (result) __defProp(target, key, result);
14
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
15
+ if (kind && result) __defProp(target, key, result);
15
16
  return result;
16
17
  };
17
18
  function isListboxOption(el) {
@@ -33,7 +34,9 @@ class ListboxOption extends vividElement.VividElement {
33
34
  this.dirtyValue = false;
34
35
  this._highlighted = false;
35
36
  this._displayCheckmark = false;
37
+ this._internalHighlightText = "";
36
38
  this._matchedRange = null;
39
+ this._hidden = false;
37
40
  if (text) {
38
41
  this.text = text;
39
42
  }
@@ -116,52 +119,74 @@ class ListboxOption extends vividElement.VividElement {
116
119
  get form() {
117
120
  return null;
118
121
  }
119
- /**
120
- * @internal
121
- */
122
+ get _highlightTextToUse() {
123
+ return this.highlightText ?? this._internalHighlightText;
124
+ }
122
125
  get _matchedRangeSafe() {
123
- return this._matchedRange ?? { from: 0, to: 0 };
126
+ if (this._highlightTextToUse) {
127
+ const matchIndex = this.text.toLowerCase().indexOf(this._highlightTextToUse.toLowerCase());
128
+ return matchIndex === -1 ? { from: 0, to: 0 } : {
129
+ from: matchIndex,
130
+ to: matchIndex + this._highlightTextToUse.length
131
+ };
132
+ }
133
+ return { from: 0, to: 0 };
124
134
  }
125
135
  }
126
136
  __decorateClass([
127
137
  vividElement.observable
128
- ], ListboxOption.prototype, "checked");
138
+ ], ListboxOption.prototype, "checked", 2);
129
139
  __decorateClass([
130
140
  vividElement.observable
131
- ], ListboxOption.prototype, "defaultSelected");
141
+ ], ListboxOption.prototype, "defaultSelected", 2);
132
142
  // @ts-expect-error Type is incorrectly non-optional
133
143
  __decorateClass([
134
144
  vividElement.attr({ mode: "boolean" })
135
- ], ListboxOption.prototype, "disabled");
145
+ ], ListboxOption.prototype, "disabled", 2);
136
146
  // @ts-expect-error Type is incorrectly non-optional
137
147
  __decorateClass([
138
148
  vividElement.attr({ attribute: "selected", mode: "boolean" })
139
- ], ListboxOption.prototype, "selectedAttribute");
149
+ ], ListboxOption.prototype, "selectedAttribute", 2);
140
150
  __decorateClass([
141
151
  vividElement.observable
142
- ], ListboxOption.prototype, "selected");
152
+ ], ListboxOption.prototype, "selected", 2);
143
153
  __decorateClass([
144
154
  vividElement.attr({ attribute: "value", mode: "fromView" })
145
- ], ListboxOption.prototype, "initialValue");
155
+ ], ListboxOption.prototype, "initialValue", 2);
146
156
  __decorateClass([
147
157
  vividElement.attr({
148
158
  attribute: "label"
149
159
  })
150
- ], ListboxOption.prototype, "_label");
160
+ ], ListboxOption.prototype, "_label", 2);
151
161
  __decorateClass([
152
162
  vividElement.attr({
153
163
  attribute: "text"
154
164
  })
155
- ], ListboxOption.prototype, "_text");
165
+ ], ListboxOption.prototype, "_text", 2);
156
166
  __decorateClass([
157
167
  vividElement.observable
158
- ], ListboxOption.prototype, "_highlighted");
168
+ ], ListboxOption.prototype, "_highlighted", 2);
159
169
  __decorateClass([
160
170
  vividElement.observable
161
- ], ListboxOption.prototype, "_displayCheckmark");
171
+ ], ListboxOption.prototype, "_displayCheckmark", 2);
172
+ __decorateClass([
173
+ vividElement.observable
174
+ ], ListboxOption.prototype, "_internalHighlightText", 2);
175
+ __decorateClass([
176
+ vividElement.attr({ attribute: "highlight-text" })
177
+ ], ListboxOption.prototype, "highlightText", 2);
178
+ __decorateClass([
179
+ vividElement.volatile
180
+ ], ListboxOption.prototype, "_highlightTextToUse", 1);
181
+ __decorateClass([
182
+ vividElement.observable
183
+ ], ListboxOption.prototype, "_matchedRange", 2);
184
+ __decorateClass([
185
+ vividElement.volatile
186
+ ], ListboxOption.prototype, "_matchedRangeSafe", 1);
162
187
  __decorateClass([
163
188
  vividElement.observable
164
- ], ListboxOption.prototype, "_matchedRange");
189
+ ], ListboxOption.prototype, "_hidden", 2);
165
190
  applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing);
166
191
 
167
192
  exports.ListboxOption = ListboxOption;
package/shared/option.js CHANGED
@@ -1,15 +1,16 @@
1
1
  import { a as applyMixins } from './apply-mixins.js';
2
2
  import { A as AffixIconWithTrailing } from './affix.js';
3
- import { V as VividElement, O as Observable, o as observable, a as attr } from './vivid-element.js';
3
+ import { V as VividElement, O as Observable, o as observable, a as attr, v as volatile } from './vivid-element.js';
4
4
  import { i as isHTMLElement } from './dom.js';
5
5
 
6
6
  var __defProp = Object.defineProperty;
7
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
7
8
  var __decorateClass = (decorators, target, key, kind) => {
8
- var result = void 0 ;
9
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
9
10
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
10
11
  if (decorator = decorators[i])
11
- result = (decorator(target, key, result) ) || result;
12
- if (result) __defProp(target, key, result);
12
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
13
+ if (kind && result) __defProp(target, key, result);
13
14
  return result;
14
15
  };
15
16
  function isListboxOption(el) {
@@ -31,7 +32,9 @@ class ListboxOption extends VividElement {
31
32
  this.dirtyValue = false;
32
33
  this._highlighted = false;
33
34
  this._displayCheckmark = false;
35
+ this._internalHighlightText = "";
34
36
  this._matchedRange = null;
37
+ this._hidden = false;
35
38
  if (text) {
36
39
  this.text = text;
37
40
  }
@@ -114,52 +117,74 @@ class ListboxOption extends VividElement {
114
117
  get form() {
115
118
  return null;
116
119
  }
117
- /**
118
- * @internal
119
- */
120
+ get _highlightTextToUse() {
121
+ return this.highlightText ?? this._internalHighlightText;
122
+ }
120
123
  get _matchedRangeSafe() {
121
- return this._matchedRange ?? { from: 0, to: 0 };
124
+ if (this._highlightTextToUse) {
125
+ const matchIndex = this.text.toLowerCase().indexOf(this._highlightTextToUse.toLowerCase());
126
+ return matchIndex === -1 ? { from: 0, to: 0 } : {
127
+ from: matchIndex,
128
+ to: matchIndex + this._highlightTextToUse.length
129
+ };
130
+ }
131
+ return { from: 0, to: 0 };
122
132
  }
123
133
  }
124
134
  __decorateClass([
125
135
  observable
126
- ], ListboxOption.prototype, "checked");
136
+ ], ListboxOption.prototype, "checked", 2);
127
137
  __decorateClass([
128
138
  observable
129
- ], ListboxOption.prototype, "defaultSelected");
139
+ ], ListboxOption.prototype, "defaultSelected", 2);
130
140
  // @ts-expect-error Type is incorrectly non-optional
131
141
  __decorateClass([
132
142
  attr({ mode: "boolean" })
133
- ], ListboxOption.prototype, "disabled");
143
+ ], ListboxOption.prototype, "disabled", 2);
134
144
  // @ts-expect-error Type is incorrectly non-optional
135
145
  __decorateClass([
136
146
  attr({ attribute: "selected", mode: "boolean" })
137
- ], ListboxOption.prototype, "selectedAttribute");
147
+ ], ListboxOption.prototype, "selectedAttribute", 2);
138
148
  __decorateClass([
139
149
  observable
140
- ], ListboxOption.prototype, "selected");
150
+ ], ListboxOption.prototype, "selected", 2);
141
151
  __decorateClass([
142
152
  attr({ attribute: "value", mode: "fromView" })
143
- ], ListboxOption.prototype, "initialValue");
153
+ ], ListboxOption.prototype, "initialValue", 2);
144
154
  __decorateClass([
145
155
  attr({
146
156
  attribute: "label"
147
157
  })
148
- ], ListboxOption.prototype, "_label");
158
+ ], ListboxOption.prototype, "_label", 2);
149
159
  __decorateClass([
150
160
  attr({
151
161
  attribute: "text"
152
162
  })
153
- ], ListboxOption.prototype, "_text");
163
+ ], ListboxOption.prototype, "_text", 2);
154
164
  __decorateClass([
155
165
  observable
156
- ], ListboxOption.prototype, "_highlighted");
166
+ ], ListboxOption.prototype, "_highlighted", 2);
157
167
  __decorateClass([
158
168
  observable
159
- ], ListboxOption.prototype, "_displayCheckmark");
169
+ ], ListboxOption.prototype, "_displayCheckmark", 2);
170
+ __decorateClass([
171
+ observable
172
+ ], ListboxOption.prototype, "_internalHighlightText", 2);
173
+ __decorateClass([
174
+ attr({ attribute: "highlight-text" })
175
+ ], ListboxOption.prototype, "highlightText", 2);
176
+ __decorateClass([
177
+ volatile
178
+ ], ListboxOption.prototype, "_highlightTextToUse", 1);
179
+ __decorateClass([
180
+ observable
181
+ ], ListboxOption.prototype, "_matchedRange", 2);
182
+ __decorateClass([
183
+ volatile
184
+ ], ListboxOption.prototype, "_matchedRangeSafe", 1);
160
185
  __decorateClass([
161
186
  observable
162
- ], ListboxOption.prototype, "_matchedRange");
187
+ ], ListboxOption.prototype, "_hidden", 2);
163
188
  applyMixins(ListboxOption, AffixIconWithTrailing);
164
189
 
165
190
  export { ListboxOption as L, isListboxOption as i };
@@ -2593,7 +2593,7 @@ const defineVividComponent = (name, type, template, dependencies, options) => ({
2593
2593
 
2594
2594
  class VividElement extends FASTElement {
2595
2595
  static {
2596
- this.VIVID_VERSION = "4.18.0";
2596
+ this.VIVID_VERSION = "4.19.0-preview.0";
2597
2597
  }
2598
2598
  }
2599
2599
 
@@ -2591,7 +2591,7 @@ const defineVividComponent = (name, type, template, dependencies, options) => ({
2591
2591
 
2592
2592
  class VividElement extends FASTElement {
2593
2593
  static {
2594
- this.VIVID_VERSION = "4.18.0";
2594
+ this.VIVID_VERSION = "4.19.0-preview.0";
2595
2595
  }
2596
2596
  }
2597
2597
 
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 18 Mar 2025 10:16:55 GMT
3
+ * Generated on Tue, 18 Mar 2025 11:47:25 GMT
4
4
  */
5
5
  .vvd-root {
6
6
  color-scheme: var(--vvd-color-scheme);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 18 Mar 2025 10:16:55 GMT
3
+ * Generated on Tue, 18 Mar 2025 11:47:25 GMT
4
4
  */
5
5
  .vvd-root {
6
6
  color-scheme: var(--vvd-color-scheme);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 18 Mar 2025 10:16:55 GMT
3
+ * Generated on Tue, 18 Mar 2025 11:47:25 GMT
4
4
  */
5
5
  .vvd-root:root {
6
6
  --vvd-size-font-scale-base: 1rem;
@@ -1,18 +1,18 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 18 Mar 2025 10:16:55 GMT
3
+ * Generated on Tue, 18 Mar 2025 11:47:25 GMT
4
4
  */
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Tue, 18 Mar 2025 10:16:55 GMT
7
+ * Generated on Tue, 18 Mar 2025 11:47:25 GMT
8
8
  */
9
9
  /**
10
10
  * Do not edit directly
11
- * Generated on Tue, 18 Mar 2025 10:16:55 GMT
11
+ * Generated on Tue, 18 Mar 2025 11:47:25 GMT
12
12
  */
13
13
  /**
14
14
  * Do not edit directly
15
- * Generated on Tue, 18 Mar 2025 10:16:55 GMT
15
+ * Generated on Tue, 18 Mar 2025 11:47:25 GMT
16
16
  */
17
17
  @property --vvd-size-density {
18
18
  syntax: "<integer>";
@@ -1,18 +1,18 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 18 Mar 2025 10:16:55 GMT
3
+ * Generated on Tue, 18 Mar 2025 11:47:25 GMT
4
4
  */
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Tue, 18 Mar 2025 10:16:55 GMT
7
+ * Generated on Tue, 18 Mar 2025 11:47:25 GMT
8
8
  */
9
9
  /**
10
10
  * Do not edit directly
11
- * Generated on Tue, 18 Mar 2025 10:16:55 GMT
11
+ * Generated on Tue, 18 Mar 2025 11:47:25 GMT
12
12
  */
13
13
  /**
14
14
  * Do not edit directly
15
- * Generated on Tue, 18 Mar 2025 10:16:55 GMT
15
+ * Generated on Tue, 18 Mar 2025 11:47:25 GMT
16
16
  */
17
17
  @property --vvd-size-density {
18
18
  syntax: "<integer>";
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 18 Mar 2025 10:16:55 GMT
3
+ * Generated on Tue, 18 Mar 2025 11:47:25 GMT
4
4
  */
5
5
  .vvd-root, ::part(vvd-root),
6
6
  .vvd-theme-alternate, ::part(vvd-theme-alternate) {
package/vivid.api.json CHANGED
@@ -20013,6 +20013,66 @@
20013
20013
  "name": "VwcOptionElement",
20014
20014
  "preserveMemberOrder": false,
20015
20015
  "members": [
20016
+ {
20017
+ "kind": "Property",
20018
+ "canonicalReference": "@vonage/vivid!VwcOptionElement#_highlightTextToUse:member",
20019
+ "docComment": "",
20020
+ "excerptTokens": [
20021
+ {
20022
+ "kind": "Content",
20023
+ "text": "get _highlightTextToUse(): "
20024
+ },
20025
+ {
20026
+ "kind": "Content",
20027
+ "text": "string"
20028
+ },
20029
+ {
20030
+ "kind": "Content",
20031
+ "text": ";"
20032
+ }
20033
+ ],
20034
+ "isReadonly": true,
20035
+ "isOptional": false,
20036
+ "releaseTag": "Public",
20037
+ "name": "_highlightTextToUse",
20038
+ "propertyTypeTokenRange": {
20039
+ "startIndex": 1,
20040
+ "endIndex": 2
20041
+ },
20042
+ "isStatic": false,
20043
+ "isProtected": false,
20044
+ "isAbstract": false
20045
+ },
20046
+ {
20047
+ "kind": "Property",
20048
+ "canonicalReference": "@vonage/vivid!VwcOptionElement#_internalHighlightText:member",
20049
+ "docComment": "",
20050
+ "excerptTokens": [
20051
+ {
20052
+ "kind": "Content",
20053
+ "text": "_internalHighlightText: "
20054
+ },
20055
+ {
20056
+ "kind": "Content",
20057
+ "text": "string"
20058
+ },
20059
+ {
20060
+ "kind": "Content",
20061
+ "text": ";"
20062
+ }
20063
+ ],
20064
+ "isReadonly": false,
20065
+ "isOptional": false,
20066
+ "releaseTag": "Public",
20067
+ "name": "_internalHighlightText",
20068
+ "propertyTypeTokenRange": {
20069
+ "startIndex": 1,
20070
+ "endIndex": 2
20071
+ },
20072
+ "isStatic": false,
20073
+ "isProtected": false,
20074
+ "isAbstract": false
20075
+ },
20016
20076
  {
20017
20077
  "kind": "Property",
20018
20078
  "canonicalReference": "@vonage/vivid!VwcOptionElement#_label:member",
@@ -20370,6 +20430,36 @@
20370
20430
  "isProtected": false,
20371
20431
  "isAbstract": false
20372
20432
  },
20433
+ {
20434
+ "kind": "Property",
20435
+ "canonicalReference": "@vonage/vivid!VwcOptionElement#highlightText:member",
20436
+ "docComment": "",
20437
+ "excerptTokens": [
20438
+ {
20439
+ "kind": "Content",
20440
+ "text": "highlightText?: "
20441
+ },
20442
+ {
20443
+ "kind": "Content",
20444
+ "text": "string"
20445
+ },
20446
+ {
20447
+ "kind": "Content",
20448
+ "text": ";"
20449
+ }
20450
+ ],
20451
+ "isReadonly": false,
20452
+ "isOptional": true,
20453
+ "releaseTag": "Public",
20454
+ "name": "highlightText",
20455
+ "propertyTypeTokenRange": {
20456
+ "startIndex": 1,
20457
+ "endIndex": 2
20458
+ },
20459
+ "isStatic": false,
20460
+ "isProtected": false,
20461
+ "isAbstract": false
20462
+ },
20373
20463
  {
20374
20464
  "kind": "Property",
20375
20465
  "canonicalReference": "@vonage/vivid!VwcOptionElement#initialValue:member",
@@ -22792,6 +22882,45 @@
22792
22882
  "isProtected": false,
22793
22883
  "isAbstract": false
22794
22884
  },
22885
+ {
22886
+ "kind": "Property",
22887
+ "canonicalReference": "@vonage/vivid!VwcSearchableSelectElement#filterOption:member",
22888
+ "docComment": "",
22889
+ "excerptTokens": [
22890
+ {
22891
+ "kind": "Content",
22892
+ "text": "filterOption?: "
22893
+ },
22894
+ {
22895
+ "kind": "Content",
22896
+ "text": "(option: "
22897
+ },
22898
+ {
22899
+ "kind": "Reference",
22900
+ "text": "ListboxOption",
22901
+ "canonicalReference": "@vonage/vivid!VwcOptionElement:class"
22902
+ },
22903
+ {
22904
+ "kind": "Content",
22905
+ "text": ", searchText: string) => boolean"
22906
+ },
22907
+ {
22908
+ "kind": "Content",
22909
+ "text": ";"
22910
+ }
22911
+ ],
22912
+ "isReadonly": false,
22913
+ "isOptional": true,
22914
+ "releaseTag": "Public",
22915
+ "name": "filterOption",
22916
+ "propertyTypeTokenRange": {
22917
+ "startIndex": 1,
22918
+ "endIndex": 4
22919
+ },
22920
+ "isStatic": false,
22921
+ "isProtected": false,
22922
+ "isAbstract": false
22923
+ },
22795
22924
  {
22796
22925
  "kind": "Property",
22797
22926
  "canonicalReference": "@vonage/vivid!VwcSearchableSelectElement#fixedDropdown:member",
@@ -22852,6 +22981,36 @@
22852
22981
  "isProtected": false,
22853
22982
  "isAbstract": false
22854
22983
  },
22984
+ {
22985
+ "kind": "Property",
22986
+ "canonicalReference": "@vonage/vivid!VwcSearchableSelectElement#loading:member",
22987
+ "docComment": "",
22988
+ "excerptTokens": [
22989
+ {
22990
+ "kind": "Content",
22991
+ "text": "loading: "
22992
+ },
22993
+ {
22994
+ "kind": "Content",
22995
+ "text": "boolean"
22996
+ },
22997
+ {
22998
+ "kind": "Content",
22999
+ "text": ";"
23000
+ }
23001
+ ],
23002
+ "isReadonly": false,
23003
+ "isOptional": false,
23004
+ "releaseTag": "Public",
23005
+ "name": "loading",
23006
+ "propertyTypeTokenRange": {
23007
+ "startIndex": 1,
23008
+ "endIndex": 2
23009
+ },
23010
+ "isStatic": false,
23011
+ "isProtected": false,
23012
+ "isAbstract": false
23013
+ },
22855
23014
  {
22856
23015
  "kind": "Property",
22857
23016
  "canonicalReference": "@vonage/vivid!VwcSearchableSelectElement#maxLines:member",
@@ -23007,6 +23166,36 @@
23007
23166
  "isProtected": false,
23008
23167
  "isAbstract": false
23009
23168
  },
23169
+ {
23170
+ "kind": "Property",
23171
+ "canonicalReference": "@vonage/vivid!VwcSearchableSelectElement#searchText:member",
23172
+ "docComment": "",
23173
+ "excerptTokens": [
23174
+ {
23175
+ "kind": "Content",
23176
+ "text": "get searchText(): "
23177
+ },
23178
+ {
23179
+ "kind": "Content",
23180
+ "text": "string"
23181
+ },
23182
+ {
23183
+ "kind": "Content",
23184
+ "text": ";"
23185
+ }
23186
+ ],
23187
+ "isReadonly": true,
23188
+ "isOptional": false,
23189
+ "releaseTag": "Public",
23190
+ "name": "searchText",
23191
+ "propertyTypeTokenRange": {
23192
+ "startIndex": 1,
23193
+ "endIndex": 2
23194
+ },
23195
+ "isStatic": false,
23196
+ "isProtected": false,
23197
+ "isAbstract": false
23198
+ },
23010
23199
  {
23011
23200
  "kind": "Property",
23012
23201
  "canonicalReference": "@vonage/vivid!VwcSearchableSelectElement#selectedIndex:member",