@vonage/vivid 4.14.1 → 4.14.3
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/custom-elements.json +393 -201
- package/index.cjs +1 -0
- package/index.js +1 -1
- package/lib/accordion/definition.d.ts +5 -1
- package/lib/combobox/combobox.d.ts +5 -1
- package/lib/divider/divider.d.ts +1 -1
- package/lib/divider/divider.template.d.ts +1 -1
- package/lib/file-picker/file-picker.d.ts +1 -0
- package/lib/menu-item/definition.d.ts +1 -1
- package/lib/menu-item/menu-item-role.d.ts +7 -0
- package/lib/menu-item/menu-item.d.ts +1 -7
- package/lib/number-field/number-field.d.ts +1 -1
- package/lib/radio/radio.d.ts +2 -2
- package/lib/searchable-select/option-tag.d.ts +2 -2
- package/lib/select/select.form-associated.d.ts +1 -1
- package/lib/switch/switch.d.ts +1 -0
- package/lib/tabs/tabs.d.ts +5 -1
- package/lib/text-anchor/text-anchor.d.ts +1 -1
- package/lib/tree-item/tree-item.d.ts +1 -1
- package/lib/tree-view/tree-view.d.ts +1 -1
- package/package.json +1 -1
- package/shared/affix.js +1 -1
- package/shared/applyMixinsWithObservables.cjs +1 -1
- package/shared/applyMixinsWithObservables.js +1 -1
- package/shared/definition.js +1 -1
- package/shared/definition11.cjs +1 -1
- package/shared/definition11.js +2 -2
- package/shared/definition16.cjs +64 -32
- package/shared/definition16.js +62 -30
- package/shared/definition17.cjs +9 -7
- package/shared/definition17.js +9 -7
- package/shared/definition2.cjs +9 -4
- package/shared/definition2.js +9 -5
- package/shared/definition22.cjs +2 -1
- package/shared/definition22.js +2 -1
- package/shared/definition24.js +1 -1
- package/shared/definition25.cjs +25 -18
- package/shared/definition25.js +26 -19
- package/shared/definition27.cjs +1 -1
- package/shared/definition27.js +1 -1
- package/shared/definition29.cjs +12 -30
- package/shared/definition29.js +13 -31
- package/shared/definition30.js +1 -1
- package/shared/definition31.js +1 -1
- package/shared/definition33.cjs +1 -1
- package/shared/definition33.js +2 -2
- package/shared/definition34.cjs +7 -228
- package/shared/definition34.js +5 -226
- package/shared/definition35.cjs +2 -201
- package/shared/definition35.js +4 -201
- package/shared/definition4.js +1 -1
- package/shared/definition41.cjs +1 -1
- package/shared/definition41.js +1 -1
- package/shared/definition42.cjs +2 -3
- package/shared/definition42.js +3 -4
- package/shared/definition43.cjs +10 -11
- package/shared/definition43.js +6 -7
- package/shared/definition46.cjs +2 -2
- package/shared/definition46.js +3 -3
- package/shared/definition47.js +1 -1
- package/shared/definition48.cjs +22 -15
- package/shared/definition48.js +22 -15
- package/shared/definition5.cjs +3 -2
- package/shared/definition5.js +3 -2
- package/shared/definition50.js +1 -1
- package/shared/definition51.cjs +14 -383
- package/shared/definition51.js +17 -386
- package/shared/definition53.js +1 -1
- package/shared/definition54.js +1 -1
- package/shared/definition56.js +1 -1
- package/shared/definition59.js +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.js +1 -1
- package/shared/direction.cjs +2 -16
- package/shared/direction.js +3 -17
- package/shared/foundation/utilities/direction.d.ts +2 -0
- package/shared/listbox.cjs +25 -6
- package/shared/listbox.js +22 -3
- package/shared/option.cjs +205 -0
- package/shared/option.js +202 -0
- package/shared/text-anchor.cjs +1 -1
- package/shared/text-anchor.js +2 -2
- package/shared/text-field2.js +2 -2
- package/shared/vivid-element.cjs +0 -2
- package/shared/vivid-element.js +1 -1
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/vivid.api.json +70 -3
- package/lib/listbox/definition.d.ts +0 -2
- package/lib/listbox/listbox.d.ts +0 -14
- package/lib/listbox/listbox.template.d.ts +0 -2
- package/listbox/index.cjs +0 -54
- package/listbox/index.js +0 -52
- package/shared/apply-mixins2.cjs +0 -25
- package/shared/apply-mixins2.js +0 -23
- package/shared/aria-global2.cjs +0 -75
- package/shared/aria-global2.js +0 -73
- package/shared/form-associated2.cjs +0 -383
- package/shared/form-associated2.js +0 -381
- package/shared/key-codes2.cjs +0 -1565
- package/shared/key-codes2.js +0 -1551
- package/shared/listbox2.cjs +0 -1267
- package/shared/listbox2.js +0 -1264
- package/shared/strings2.cjs +0 -37
- package/shared/strings2.js +0 -33
package/shared/listbox.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { i as isListboxOption } from './
|
|
2
|
-
import { V as VividElement, O as Observable, a as attr, o as observable } from './vivid-element.js';
|
|
1
|
+
import { i as isListboxOption } from './option.js';
|
|
2
|
+
import { A as AttributeConfiguration, V as VividElement, O as Observable, a as attr, o as observable } from './vivid-element.js';
|
|
3
3
|
import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes.js';
|
|
4
4
|
import { u as uniqueId } from './strings.js';
|
|
5
|
-
import { a as applyMixins } from './apply-mixins2.js';
|
|
6
5
|
import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
|
|
7
6
|
|
|
8
7
|
/**
|
|
@@ -21,6 +20,26 @@ function findLastIndex(array, predicate) {
|
|
|
21
20
|
return -1;
|
|
22
21
|
}
|
|
23
22
|
|
|
23
|
+
/**
|
|
24
|
+
* Apply mixins to a constructor.
|
|
25
|
+
* Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
|
|
26
|
+
* @public
|
|
27
|
+
*/
|
|
28
|
+
function applyMixins(derivedCtor, ...baseCtors) {
|
|
29
|
+
const derivedAttributes = AttributeConfiguration.locate(derivedCtor);
|
|
30
|
+
baseCtors.forEach(baseCtor => {
|
|
31
|
+
Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
|
|
32
|
+
if (name !== "constructor") {
|
|
33
|
+
Object.defineProperty(derivedCtor.prototype, name,
|
|
34
|
+
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
|
|
35
|
+
Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
const baseAttributes = AttributeConfiguration.locate(baseCtor);
|
|
39
|
+
baseAttributes.forEach(x => derivedAttributes.push(x));
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
|
|
24
43
|
var __defProp = Object.defineProperty;
|
|
25
44
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
26
45
|
var result = void 0 ;
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const applyMixins = require('./apply-mixins.cjs');
|
|
4
|
+
const affix = require('./affix.cjs');
|
|
5
|
+
const ariaGlobal = require('./aria-global.cjs');
|
|
6
|
+
const vividElement = require('./vivid-element.cjs');
|
|
7
|
+
const dom = require('./dom.cjs');
|
|
8
|
+
|
|
9
|
+
var __defProp = Object.defineProperty;
|
|
10
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
11
|
+
var result = void 0 ;
|
|
12
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
13
|
+
if (decorator = decorators[i])
|
|
14
|
+
result = (decorator(target, key, result) ) || result;
|
|
15
|
+
if (result) __defProp(target, key, result);
|
|
16
|
+
return result;
|
|
17
|
+
};
|
|
18
|
+
function isListboxOption(el) {
|
|
19
|
+
return dom.isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
|
|
20
|
+
}
|
|
21
|
+
class ListboxOption extends vividElement.VividElement {
|
|
22
|
+
constructor(text, value, defaultSelected, selected) {
|
|
23
|
+
super();
|
|
24
|
+
this.defaultSelected = false;
|
|
25
|
+
/**
|
|
26
|
+
* Tracks whether the "selected" property has been changed.
|
|
27
|
+
* @internal
|
|
28
|
+
*/
|
|
29
|
+
this.dirtySelected = false;
|
|
30
|
+
this.selected = this.defaultSelected;
|
|
31
|
+
/**
|
|
32
|
+
* Track whether the value has been changed from the initial value
|
|
33
|
+
*/
|
|
34
|
+
this.dirtyValue = false;
|
|
35
|
+
this._highlighted = false;
|
|
36
|
+
this._displayCheckmark = false;
|
|
37
|
+
this._matchedRange = null;
|
|
38
|
+
if (text) {
|
|
39
|
+
this.text = text;
|
|
40
|
+
}
|
|
41
|
+
if (value) {
|
|
42
|
+
this.initialValue = value;
|
|
43
|
+
}
|
|
44
|
+
if (defaultSelected) {
|
|
45
|
+
this.defaultSelected = defaultSelected;
|
|
46
|
+
}
|
|
47
|
+
if (selected) {
|
|
48
|
+
this.selected = selected;
|
|
49
|
+
}
|
|
50
|
+
this.proxy = new Option(
|
|
51
|
+
this.text,
|
|
52
|
+
// @ts-expect-error Propery is used before it is assigned
|
|
53
|
+
this.initialValue,
|
|
54
|
+
this.defaultSelected,
|
|
55
|
+
this.selected
|
|
56
|
+
);
|
|
57
|
+
this.proxy.disabled = this.disabled;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Updates the ariaChecked property when the checked property changes.
|
|
61
|
+
*
|
|
62
|
+
* @param _ - the previous checked value
|
|
63
|
+
* @param next - the current checked value
|
|
64
|
+
*
|
|
65
|
+
* @public
|
|
66
|
+
*/
|
|
67
|
+
checkedChanged(_, next) {
|
|
68
|
+
if (typeof next === "boolean") {
|
|
69
|
+
this.ariaChecked = next ? "true" : "false";
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
this.ariaChecked = null;
|
|
73
|
+
}
|
|
74
|
+
defaultSelectedChanged() {
|
|
75
|
+
if (!this.dirtySelected) {
|
|
76
|
+
this.selected = this.defaultSelected;
|
|
77
|
+
if (this.proxy instanceof HTMLOptionElement) {
|
|
78
|
+
this.proxy.selected = this.defaultSelected;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
disabledChanged() {
|
|
83
|
+
this.ariaDisabled = this.disabled ? "true" : "false";
|
|
84
|
+
if (this.proxy instanceof HTMLOptionElement) {
|
|
85
|
+
this.proxy.disabled = this.disabled;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
selectedAttributeChanged() {
|
|
89
|
+
this.defaultSelected = this.selectedAttribute;
|
|
90
|
+
if (this.proxy instanceof HTMLOptionElement) {
|
|
91
|
+
this.proxy.defaultSelected = this.defaultSelected;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
selectedChanged() {
|
|
95
|
+
this.ariaSelected = this.selected ? "true" : "false";
|
|
96
|
+
if (!this.dirtySelected) {
|
|
97
|
+
this.dirtySelected = true;
|
|
98
|
+
}
|
|
99
|
+
if (this.proxy instanceof HTMLOptionElement) {
|
|
100
|
+
this.proxy.selected = this.selected;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
initialValueChanged() {
|
|
104
|
+
if (!this.dirtyValue) {
|
|
105
|
+
this.value = this.initialValue;
|
|
106
|
+
this.dirtyValue = false;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
get label() {
|
|
110
|
+
return this._label ?? this.text;
|
|
111
|
+
}
|
|
112
|
+
set label(value) {
|
|
113
|
+
this._label = value;
|
|
114
|
+
}
|
|
115
|
+
set text(value) {
|
|
116
|
+
this._text = value;
|
|
117
|
+
}
|
|
118
|
+
get text() {
|
|
119
|
+
return this._text ?? "";
|
|
120
|
+
}
|
|
121
|
+
set value(next) {
|
|
122
|
+
const newValue = `${next ?? ""}`;
|
|
123
|
+
this._value = newValue;
|
|
124
|
+
this.dirtyValue = true;
|
|
125
|
+
if (this.proxy instanceof HTMLOptionElement) {
|
|
126
|
+
this.proxy.value = newValue;
|
|
127
|
+
}
|
|
128
|
+
vividElement.Observable.notify(this, "value");
|
|
129
|
+
}
|
|
130
|
+
get value() {
|
|
131
|
+
vividElement.Observable.track(this, "value");
|
|
132
|
+
return this._value ?? this.text;
|
|
133
|
+
}
|
|
134
|
+
get form() {
|
|
135
|
+
return null;
|
|
136
|
+
}
|
|
137
|
+
/**
|
|
138
|
+
* @internal
|
|
139
|
+
*/
|
|
140
|
+
get _matchedRangeSafe() {
|
|
141
|
+
return this._matchedRange ?? { from: 0, to: 0 };
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
__decorateClass([
|
|
145
|
+
vividElement.observable
|
|
146
|
+
], ListboxOption.prototype, "checked");
|
|
147
|
+
__decorateClass([
|
|
148
|
+
vividElement.observable
|
|
149
|
+
], ListboxOption.prototype, "defaultSelected");
|
|
150
|
+
// @ts-expect-error Type is incorrectly non-optional
|
|
151
|
+
__decorateClass([
|
|
152
|
+
vividElement.attr({ mode: "boolean" })
|
|
153
|
+
], ListboxOption.prototype, "disabled");
|
|
154
|
+
// @ts-expect-error Type is incorrectly non-optional
|
|
155
|
+
__decorateClass([
|
|
156
|
+
vividElement.attr({ attribute: "selected", mode: "boolean" })
|
|
157
|
+
], ListboxOption.prototype, "selectedAttribute");
|
|
158
|
+
__decorateClass([
|
|
159
|
+
vividElement.observable
|
|
160
|
+
], ListboxOption.prototype, "selected");
|
|
161
|
+
__decorateClass([
|
|
162
|
+
vividElement.attr({ attribute: "value", mode: "fromView" })
|
|
163
|
+
], ListboxOption.prototype, "initialValue");
|
|
164
|
+
__decorateClass([
|
|
165
|
+
vividElement.attr({
|
|
166
|
+
attribute: "label"
|
|
167
|
+
})
|
|
168
|
+
], ListboxOption.prototype, "_label");
|
|
169
|
+
__decorateClass([
|
|
170
|
+
vividElement.attr({
|
|
171
|
+
attribute: "text"
|
|
172
|
+
})
|
|
173
|
+
], ListboxOption.prototype, "_text");
|
|
174
|
+
__decorateClass([
|
|
175
|
+
vividElement.observable
|
|
176
|
+
], ListboxOption.prototype, "_highlighted");
|
|
177
|
+
__decorateClass([
|
|
178
|
+
vividElement.observable
|
|
179
|
+
], ListboxOption.prototype, "_displayCheckmark");
|
|
180
|
+
__decorateClass([
|
|
181
|
+
vividElement.observable
|
|
182
|
+
], ListboxOption.prototype, "_matchedRange");
|
|
183
|
+
class DelegatesARIAListboxOption {
|
|
184
|
+
}
|
|
185
|
+
// @ts-expect-error Type is incorrectly non-optional
|
|
186
|
+
__decorateClass([
|
|
187
|
+
vividElement.observable
|
|
188
|
+
], DelegatesARIAListboxOption.prototype, "ariaChecked");
|
|
189
|
+
// @ts-expect-error Type is incorrectly non-optional
|
|
190
|
+
__decorateClass([
|
|
191
|
+
vividElement.observable
|
|
192
|
+
], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
|
|
193
|
+
// @ts-expect-error Type is incorrectly non-optional
|
|
194
|
+
__decorateClass([
|
|
195
|
+
vividElement.observable
|
|
196
|
+
], DelegatesARIAListboxOption.prototype, "ariaSelected");
|
|
197
|
+
// @ts-expect-error Type is incorrectly non-optional
|
|
198
|
+
__decorateClass([
|
|
199
|
+
vividElement.observable
|
|
200
|
+
], DelegatesARIAListboxOption.prototype, "ariaSetSize");
|
|
201
|
+
applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
|
|
202
|
+
applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing, DelegatesARIAListboxOption);
|
|
203
|
+
|
|
204
|
+
exports.ListboxOption = ListboxOption;
|
|
205
|
+
exports.isListboxOption = isListboxOption;
|
package/shared/option.js
ADDED
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
import { a as applyMixins } from './apply-mixins.js';
|
|
2
|
+
import { A as AffixIconWithTrailing } from './affix.js';
|
|
3
|
+
import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
|
|
4
|
+
import { V as VividElement, O as Observable, o as observable, a as attr } from './vivid-element.js';
|
|
5
|
+
import { i as isHTMLElement } from './dom.js';
|
|
6
|
+
|
|
7
|
+
var __defProp = Object.defineProperty;
|
|
8
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
9
|
+
var result = void 0 ;
|
|
10
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
11
|
+
if (decorator = decorators[i])
|
|
12
|
+
result = (decorator(target, key, result) ) || result;
|
|
13
|
+
if (result) __defProp(target, key, result);
|
|
14
|
+
return result;
|
|
15
|
+
};
|
|
16
|
+
function isListboxOption(el) {
|
|
17
|
+
return isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
|
|
18
|
+
}
|
|
19
|
+
class ListboxOption extends VividElement {
|
|
20
|
+
constructor(text, value, defaultSelected, selected) {
|
|
21
|
+
super();
|
|
22
|
+
this.defaultSelected = false;
|
|
23
|
+
/**
|
|
24
|
+
* Tracks whether the "selected" property has been changed.
|
|
25
|
+
* @internal
|
|
26
|
+
*/
|
|
27
|
+
this.dirtySelected = false;
|
|
28
|
+
this.selected = this.defaultSelected;
|
|
29
|
+
/**
|
|
30
|
+
* Track whether the value has been changed from the initial value
|
|
31
|
+
*/
|
|
32
|
+
this.dirtyValue = false;
|
|
33
|
+
this._highlighted = false;
|
|
34
|
+
this._displayCheckmark = false;
|
|
35
|
+
this._matchedRange = null;
|
|
36
|
+
if (text) {
|
|
37
|
+
this.text = text;
|
|
38
|
+
}
|
|
39
|
+
if (value) {
|
|
40
|
+
this.initialValue = value;
|
|
41
|
+
}
|
|
42
|
+
if (defaultSelected) {
|
|
43
|
+
this.defaultSelected = defaultSelected;
|
|
44
|
+
}
|
|
45
|
+
if (selected) {
|
|
46
|
+
this.selected = selected;
|
|
47
|
+
}
|
|
48
|
+
this.proxy = new Option(
|
|
49
|
+
this.text,
|
|
50
|
+
// @ts-expect-error Propery is used before it is assigned
|
|
51
|
+
this.initialValue,
|
|
52
|
+
this.defaultSelected,
|
|
53
|
+
this.selected
|
|
54
|
+
);
|
|
55
|
+
this.proxy.disabled = this.disabled;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Updates the ariaChecked property when the checked property changes.
|
|
59
|
+
*
|
|
60
|
+
* @param _ - the previous checked value
|
|
61
|
+
* @param next - the current checked value
|
|
62
|
+
*
|
|
63
|
+
* @public
|
|
64
|
+
*/
|
|
65
|
+
checkedChanged(_, next) {
|
|
66
|
+
if (typeof next === "boolean") {
|
|
67
|
+
this.ariaChecked = next ? "true" : "false";
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
this.ariaChecked = null;
|
|
71
|
+
}
|
|
72
|
+
defaultSelectedChanged() {
|
|
73
|
+
if (!this.dirtySelected) {
|
|
74
|
+
this.selected = this.defaultSelected;
|
|
75
|
+
if (this.proxy instanceof HTMLOptionElement) {
|
|
76
|
+
this.proxy.selected = this.defaultSelected;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
disabledChanged() {
|
|
81
|
+
this.ariaDisabled = this.disabled ? "true" : "false";
|
|
82
|
+
if (this.proxy instanceof HTMLOptionElement) {
|
|
83
|
+
this.proxy.disabled = this.disabled;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
selectedAttributeChanged() {
|
|
87
|
+
this.defaultSelected = this.selectedAttribute;
|
|
88
|
+
if (this.proxy instanceof HTMLOptionElement) {
|
|
89
|
+
this.proxy.defaultSelected = this.defaultSelected;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
selectedChanged() {
|
|
93
|
+
this.ariaSelected = this.selected ? "true" : "false";
|
|
94
|
+
if (!this.dirtySelected) {
|
|
95
|
+
this.dirtySelected = true;
|
|
96
|
+
}
|
|
97
|
+
if (this.proxy instanceof HTMLOptionElement) {
|
|
98
|
+
this.proxy.selected = this.selected;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
initialValueChanged() {
|
|
102
|
+
if (!this.dirtyValue) {
|
|
103
|
+
this.value = this.initialValue;
|
|
104
|
+
this.dirtyValue = false;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
get label() {
|
|
108
|
+
return this._label ?? this.text;
|
|
109
|
+
}
|
|
110
|
+
set label(value) {
|
|
111
|
+
this._label = value;
|
|
112
|
+
}
|
|
113
|
+
set text(value) {
|
|
114
|
+
this._text = value;
|
|
115
|
+
}
|
|
116
|
+
get text() {
|
|
117
|
+
return this._text ?? "";
|
|
118
|
+
}
|
|
119
|
+
set value(next) {
|
|
120
|
+
const newValue = `${next ?? ""}`;
|
|
121
|
+
this._value = newValue;
|
|
122
|
+
this.dirtyValue = true;
|
|
123
|
+
if (this.proxy instanceof HTMLOptionElement) {
|
|
124
|
+
this.proxy.value = newValue;
|
|
125
|
+
}
|
|
126
|
+
Observable.notify(this, "value");
|
|
127
|
+
}
|
|
128
|
+
get value() {
|
|
129
|
+
Observable.track(this, "value");
|
|
130
|
+
return this._value ?? this.text;
|
|
131
|
+
}
|
|
132
|
+
get form() {
|
|
133
|
+
return null;
|
|
134
|
+
}
|
|
135
|
+
/**
|
|
136
|
+
* @internal
|
|
137
|
+
*/
|
|
138
|
+
get _matchedRangeSafe() {
|
|
139
|
+
return this._matchedRange ?? { from: 0, to: 0 };
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
__decorateClass([
|
|
143
|
+
observable
|
|
144
|
+
], ListboxOption.prototype, "checked");
|
|
145
|
+
__decorateClass([
|
|
146
|
+
observable
|
|
147
|
+
], ListboxOption.prototype, "defaultSelected");
|
|
148
|
+
// @ts-expect-error Type is incorrectly non-optional
|
|
149
|
+
__decorateClass([
|
|
150
|
+
attr({ mode: "boolean" })
|
|
151
|
+
], ListboxOption.prototype, "disabled");
|
|
152
|
+
// @ts-expect-error Type is incorrectly non-optional
|
|
153
|
+
__decorateClass([
|
|
154
|
+
attr({ attribute: "selected", mode: "boolean" })
|
|
155
|
+
], ListboxOption.prototype, "selectedAttribute");
|
|
156
|
+
__decorateClass([
|
|
157
|
+
observable
|
|
158
|
+
], ListboxOption.prototype, "selected");
|
|
159
|
+
__decorateClass([
|
|
160
|
+
attr({ attribute: "value", mode: "fromView" })
|
|
161
|
+
], ListboxOption.prototype, "initialValue");
|
|
162
|
+
__decorateClass([
|
|
163
|
+
attr({
|
|
164
|
+
attribute: "label"
|
|
165
|
+
})
|
|
166
|
+
], ListboxOption.prototype, "_label");
|
|
167
|
+
__decorateClass([
|
|
168
|
+
attr({
|
|
169
|
+
attribute: "text"
|
|
170
|
+
})
|
|
171
|
+
], ListboxOption.prototype, "_text");
|
|
172
|
+
__decorateClass([
|
|
173
|
+
observable
|
|
174
|
+
], ListboxOption.prototype, "_highlighted");
|
|
175
|
+
__decorateClass([
|
|
176
|
+
observable
|
|
177
|
+
], ListboxOption.prototype, "_displayCheckmark");
|
|
178
|
+
__decorateClass([
|
|
179
|
+
observable
|
|
180
|
+
], ListboxOption.prototype, "_matchedRange");
|
|
181
|
+
class DelegatesARIAListboxOption {
|
|
182
|
+
}
|
|
183
|
+
// @ts-expect-error Type is incorrectly non-optional
|
|
184
|
+
__decorateClass([
|
|
185
|
+
observable
|
|
186
|
+
], DelegatesARIAListboxOption.prototype, "ariaChecked");
|
|
187
|
+
// @ts-expect-error Type is incorrectly non-optional
|
|
188
|
+
__decorateClass([
|
|
189
|
+
observable
|
|
190
|
+
], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
|
|
191
|
+
// @ts-expect-error Type is incorrectly non-optional
|
|
192
|
+
__decorateClass([
|
|
193
|
+
observable
|
|
194
|
+
], DelegatesARIAListboxOption.prototype, "ariaSelected");
|
|
195
|
+
// @ts-expect-error Type is incorrectly non-optional
|
|
196
|
+
__decorateClass([
|
|
197
|
+
observable
|
|
198
|
+
], DelegatesARIAListboxOption.prototype, "ariaSetSize");
|
|
199
|
+
applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
|
|
200
|
+
applyMixins(ListboxOption, AffixIconWithTrailing, DelegatesARIAListboxOption);
|
|
201
|
+
|
|
202
|
+
export { ListboxOption as L, isListboxOption as i };
|
package/shared/text-anchor.cjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
const vividElement = require('./vivid-element.cjs');
|
|
3
4
|
const affix = require('./affix.cjs');
|
|
4
5
|
const applyMixins = require('./apply-mixins.cjs');
|
|
5
6
|
const anchor = require('./anchor.cjs');
|
|
6
|
-
const vividElement = require('./vivid-element.cjs');
|
|
7
7
|
|
|
8
8
|
var __defProp = Object.defineProperty;
|
|
9
9
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/text-anchor.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { V as VividElement, a as attr } from './vivid-element.js';
|
|
2
|
+
import { b as AffixIcon } from './affix.js';
|
|
2
3
|
import { a as applyMixins } from './apply-mixins.js';
|
|
3
4
|
import { A as Anchor } from './anchor.js';
|
|
4
|
-
import { V as VividElement, a as attr } from './vivid-element.js';
|
|
5
5
|
|
|
6
6
|
var __defProp = Object.defineProperty;
|
|
7
7
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/text-field2.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { a as applyMixins } from './apply-mixins.js';
|
|
2
|
-
import { O as Observable, D as DOM, V as VividElement, a as attr,
|
|
2
|
+
import { O as Observable, D as DOM, V as VividElement, a as attr, o as observable, n as nullableNumberConverter } from './vivid-element.js';
|
|
3
3
|
import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
|
|
4
4
|
import { F as FormAssociated } from './form-associated.js';
|
|
5
5
|
import { m as memoizeWith } from './definition27.js';
|
|
6
6
|
import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount } from './form-elements.js';
|
|
7
7
|
import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
|
|
8
|
-
import {
|
|
8
|
+
import { b as AffixIcon } from './affix.js';
|
|
9
9
|
|
|
10
10
|
const byteToHex = [];
|
|
11
11
|
for (let i = 0; i < 256; ++i) {
|
package/shared/vivid-element.cjs
CHANGED
|
@@ -2597,8 +2597,6 @@ class VividElement extends FASTElement {
|
|
|
2597
2597
|
exports.AttachedBehaviorHTMLDirective = AttachedBehaviorHTMLDirective;
|
|
2598
2598
|
exports.AttributeConfiguration = AttributeConfiguration;
|
|
2599
2599
|
exports.DOM = DOM;
|
|
2600
|
-
exports.ElementStyles = ElementStyles;
|
|
2601
|
-
exports.FASTElement = FASTElement;
|
|
2602
2600
|
exports.HTMLDirective = HTMLDirective;
|
|
2603
2601
|
exports.HTMLView = HTMLView;
|
|
2604
2602
|
exports.Observable = Observable;
|
package/shared/vivid-element.js
CHANGED
|
@@ -2592,4 +2592,4 @@ const defineVividComponent = (name, type, template, dependencies, options) => ({
|
|
|
2592
2592
|
class VividElement extends FASTElement {
|
|
2593
2593
|
}
|
|
2594
2594
|
|
|
2595
|
-
export { AttributeConfiguration as A, DOM as D,
|
|
2595
|
+
export { AttributeConfiguration as A, DOM as D, HTMLDirective as H, Observable as O, SubscriberSet as S, VividElement as V, attr as a, AttachedBehaviorHTMLDirective as b, booleanConverter as c, defineVividComponent as d, emptyArray as e, createRegisterFunction as f, HTMLView as g, html as h, defaultExecutionContext as i, nullableNumberConverter as n, observable as o, volatile as v };
|
package/styles/core/all.css
CHANGED
package/styles/core/theme.css
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 04 Feb 2025 08:59:25 GMT
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Tue, 04 Feb 2025 08:59:25 GMT
|
|
8
8
|
*/
|
|
9
9
|
/**
|
|
10
10
|
* Do not edit directly
|
|
11
|
-
* Generated on
|
|
11
|
+
* Generated on Tue, 04 Feb 2025 08:59:25 GMT
|
|
12
12
|
*/
|
|
13
13
|
/**
|
|
14
14
|
* Do not edit directly
|
|
15
|
-
* Generated on
|
|
15
|
+
* Generated on Tue, 04 Feb 2025 08:59: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
|
|
3
|
+
* Generated on Tue, 04 Feb 2025 08:59:25 GMT
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Tue, 04 Feb 2025 08:59:25 GMT
|
|
8
8
|
*/
|
|
9
9
|
/**
|
|
10
10
|
* Do not edit directly
|
|
11
|
-
* Generated on
|
|
11
|
+
* Generated on Tue, 04 Feb 2025 08:59:25 GMT
|
|
12
12
|
*/
|
|
13
13
|
/**
|
|
14
14
|
* Do not edit directly
|
|
15
|
-
* Generated on
|
|
15
|
+
* Generated on Tue, 04 Feb 2025 08:59:25 GMT
|
|
16
16
|
*/
|
|
17
17
|
@property --vvd-size-density {
|
|
18
18
|
syntax: "<integer>";
|
package/vivid.api.json
CHANGED
|
@@ -195,6 +195,73 @@
|
|
|
195
195
|
"name": "",
|
|
196
196
|
"preserveMemberOrder": false,
|
|
197
197
|
"members": [
|
|
198
|
+
{
|
|
199
|
+
"kind": "TypeAlias",
|
|
200
|
+
"canonicalReference": "@vonage/vivid!AccordionExpandMode:type",
|
|
201
|
+
"docComment": "",
|
|
202
|
+
"excerptTokens": [
|
|
203
|
+
{
|
|
204
|
+
"kind": "Content",
|
|
205
|
+
"text": "export type AccordionExpandMode = "
|
|
206
|
+
},
|
|
207
|
+
{
|
|
208
|
+
"kind": "Content",
|
|
209
|
+
"text": "typeof "
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"kind": "Reference",
|
|
213
|
+
"text": "AccordionExpandMode",
|
|
214
|
+
"canonicalReference": "@vonage/vivid!AccordionExpandMode:var"
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"kind": "Content",
|
|
218
|
+
"text": "[keyof typeof "
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
"kind": "Reference",
|
|
222
|
+
"text": "AccordionExpandMode",
|
|
223
|
+
"canonicalReference": "@vonage/vivid!AccordionExpandMode:var"
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"kind": "Content",
|
|
227
|
+
"text": "]"
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
"kind": "Content",
|
|
231
|
+
"text": ";"
|
|
232
|
+
}
|
|
233
|
+
],
|
|
234
|
+
"fileUrlPath": "../../dist/libs/components/lib/accordion/definition.d.ts",
|
|
235
|
+
"releaseTag": "Public",
|
|
236
|
+
"name": "AccordionExpandMode",
|
|
237
|
+
"typeTokenRange": {
|
|
238
|
+
"startIndex": 1,
|
|
239
|
+
"endIndex": 6
|
|
240
|
+
}
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
"kind": "Variable",
|
|
244
|
+
"canonicalReference": "@vonage/vivid!AccordionExpandMode:var",
|
|
245
|
+
"docComment": "",
|
|
246
|
+
"excerptTokens": [
|
|
247
|
+
{
|
|
248
|
+
"kind": "Content",
|
|
249
|
+
"text": "AccordionExpandMode: "
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
"kind": "Content",
|
|
253
|
+
"text": "{\n readonly single: \"single\";\n readonly multi: \"multi\";\n}"
|
|
254
|
+
}
|
|
255
|
+
],
|
|
256
|
+
"fileUrlPath": "../../dist/libs/components/lib/accordion/definition.d.ts",
|
|
257
|
+
"isReadonly": true,
|
|
258
|
+
"releaseTag": "Public",
|
|
259
|
+
"name": "AccordionExpandMode",
|
|
260
|
+
"variableTypeTokenRange": {
|
|
261
|
+
"startIndex": 1,
|
|
262
|
+
"endIndex": 2
|
|
263
|
+
}
|
|
264
|
+
},
|
|
198
265
|
{
|
|
199
266
|
"kind": "TypeAlias",
|
|
200
267
|
"canonicalReference": "@vonage/vivid!ActionGroupAppearance:type",
|
|
@@ -3050,7 +3117,7 @@
|
|
|
3050
3117
|
"text": ";"
|
|
3051
3118
|
}
|
|
3052
3119
|
],
|
|
3053
|
-
"fileUrlPath": "../../dist/libs/components/lib/menu-item/menu-item.d.ts",
|
|
3120
|
+
"fileUrlPath": "../../dist/libs/components/lib/menu-item/menu-item-role.d.ts",
|
|
3054
3121
|
"releaseTag": "Public",
|
|
3055
3122
|
"name": "MenuItemRole",
|
|
3056
3123
|
"typeTokenRange": {
|
|
@@ -3069,10 +3136,10 @@
|
|
|
3069
3136
|
},
|
|
3070
3137
|
{
|
|
3071
3138
|
"kind": "Content",
|
|
3072
|
-
"text": "{\n readonly
|
|
3139
|
+
"text": "{\n readonly menuitem: \"menuitem\";\n readonly menuitemcheckbox: \"menuitemcheckbox\";\n readonly menuitemradio: \"menuitemradio\";\n readonly presentation: \"presentation\";\n}"
|
|
3073
3140
|
}
|
|
3074
3141
|
],
|
|
3075
|
-
"fileUrlPath": "../../dist/libs/components/lib/menu-item/menu-item.d.ts",
|
|
3142
|
+
"fileUrlPath": "../../dist/libs/components/lib/menu-item/menu-item-role.d.ts",
|
|
3076
3143
|
"isReadonly": true,
|
|
3077
3144
|
"releaseTag": "Public",
|
|
3078
3145
|
"name": "MenuItemRole",
|