@vonage/vivid 4.12.1 → 4.13.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/custom-elements.json +1388 -128
- package/lib/file-picker/file-picker.d.ts +6 -0
- package/lib/menu/menu.d.ts +16 -3
- package/lib/menu-item/menu-item.d.ts +10 -2
- package/lib/option/option.d.ts +27 -7
- package/lib/switch/switch.d.ts +5 -2
- package/lib/switch/switch.form-associated.d.ts +10 -0
- package/lib/tabs/tabs.d.ts +3 -2
- package/lib/text-area/text-area.d.ts +25 -3
- package/lib/text-area/text-field.form-associated.d.ts +10 -0
- package/lib/text-field/text-field.d.ts +28 -3
- package/lib/text-field/text-field.form-associated.d.ts +10 -0
- package/package.json +1 -1
- package/shared/definition11.cjs +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition17.cjs +1 -1
- package/shared/definition17.js +1 -1
- package/shared/definition20.cjs +2 -1
- package/shared/definition20.js +2 -1
- package/shared/definition21.cjs +1 -1
- package/shared/definition21.js +1 -1
- package/shared/definition24.cjs +1 -1
- package/shared/definition24.js +1 -1
- package/shared/definition25.cjs +24 -3
- package/shared/definition25.js +24 -3
- package/shared/definition29.cjs +358 -559
- package/shared/definition29.js +359 -560
- package/shared/definition30.cjs +2 -0
- package/shared/definition30.js +2 -0
- package/shared/definition35.cjs +222 -2
- package/shared/definition35.js +222 -2
- package/shared/definition36.cjs +149 -14
- package/shared/definition36.js +150 -15
- package/shared/definition46.cjs +1 -1
- package/shared/definition46.js +1 -1
- package/shared/definition47.cjs +5 -14
- package/shared/definition47.js +1 -10
- package/shared/definition49.cjs +65 -90
- package/shared/definition49.js +66 -91
- package/shared/definition51.cjs +1 -1
- package/shared/definition51.js +1 -1
- package/shared/definition52.cjs +15 -1
- package/shared/definition52.js +15 -1
- package/shared/definition55.cjs +160 -180
- package/shared/definition55.js +160 -180
- package/shared/definition56.cjs +3 -307
- package/shared/definition56.js +5 -309
- package/shared/definition57.cjs +8 -7
- package/shared/definition57.js +3 -2
- package/shared/definition64.cjs +18 -7
- package/shared/definition64.js +19 -8
- package/shared/listbox.cjs +198 -3
- package/shared/listbox.js +197 -2
- package/shared/{direction.cjs → localization.cjs} +12 -3
- package/shared/{direction.js → localization.js} +12 -3
- package/shared/presentationDate.cjs +8 -8
- package/shared/presentationDate.js +1 -1
- package/shared/text-field2.cjs +538 -194
- package/shared/text-field2.js +539 -195
- package/styles/core/all.css +21 -1
- package/styles/core/theme.css +21 -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 +44 -0
- package/shared/Reflector.cjs +0 -71
- package/shared/Reflector.js +0 -69
- package/shared/listbox-option.cjs +0 -204
- package/shared/listbox-option.js +0 -201
package/shared/listbox-option.js
DELETED
|
@@ -1,201 +0,0 @@
|
|
|
1
|
-
import { F as FoundationElement, O as Observable, _ as __decorate, o as observable, a as attr } from './index.js';
|
|
2
|
-
import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
|
|
3
|
-
import { S as StartEnd } from './start-end.js';
|
|
4
|
-
import { a as applyMixins } from './apply-mixins.js';
|
|
5
|
-
import { i as isHTMLElement } from './dom.js';
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* Determines if the element is a {@link (ListboxOption:class)}
|
|
9
|
-
*
|
|
10
|
-
* @param element - the element to test.
|
|
11
|
-
* @public
|
|
12
|
-
*/
|
|
13
|
-
function isListboxOption(el) {
|
|
14
|
-
return (isHTMLElement(el) &&
|
|
15
|
-
(el.getAttribute("role") === "option" ||
|
|
16
|
-
el instanceof HTMLOptionElement));
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* An Option Custom HTML Element.
|
|
20
|
-
* Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
|
|
21
|
-
*
|
|
22
|
-
* @slot start - Content which can be provided before the listbox option content
|
|
23
|
-
* @slot end - Content which can be provided after the listbox option content
|
|
24
|
-
* @slot - The default slot for listbox option content
|
|
25
|
-
* @csspart content - Wraps the listbox option content
|
|
26
|
-
*
|
|
27
|
-
* @public
|
|
28
|
-
*/
|
|
29
|
-
let ListboxOption$1 = class ListboxOption extends FoundationElement {
|
|
30
|
-
constructor(text, value, defaultSelected, selected) {
|
|
31
|
-
super();
|
|
32
|
-
/**
|
|
33
|
-
* The defaultSelected state of the option.
|
|
34
|
-
* @public
|
|
35
|
-
*/
|
|
36
|
-
this.defaultSelected = false;
|
|
37
|
-
/**
|
|
38
|
-
* Tracks whether the "selected" property has been changed.
|
|
39
|
-
* @internal
|
|
40
|
-
*/
|
|
41
|
-
this.dirtySelected = false;
|
|
42
|
-
/**
|
|
43
|
-
* The checked state of the control.
|
|
44
|
-
*
|
|
45
|
-
* @public
|
|
46
|
-
*/
|
|
47
|
-
this.selected = this.defaultSelected;
|
|
48
|
-
/**
|
|
49
|
-
* Track whether the value has been changed from the initial value
|
|
50
|
-
*/
|
|
51
|
-
this.dirtyValue = false;
|
|
52
|
-
if (text) {
|
|
53
|
-
this.textContent = text;
|
|
54
|
-
}
|
|
55
|
-
if (value) {
|
|
56
|
-
this.initialValue = value;
|
|
57
|
-
}
|
|
58
|
-
if (defaultSelected) {
|
|
59
|
-
this.defaultSelected = defaultSelected;
|
|
60
|
-
}
|
|
61
|
-
if (selected) {
|
|
62
|
-
this.selected = selected;
|
|
63
|
-
}
|
|
64
|
-
this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
|
|
65
|
-
this.proxy.disabled = this.disabled;
|
|
66
|
-
}
|
|
67
|
-
/**
|
|
68
|
-
* Updates the ariaChecked property when the checked property changes.
|
|
69
|
-
*
|
|
70
|
-
* @param prev - the previous checked value
|
|
71
|
-
* @param next - the current checked value
|
|
72
|
-
*
|
|
73
|
-
* @public
|
|
74
|
-
*/
|
|
75
|
-
checkedChanged(prev, next) {
|
|
76
|
-
if (typeof next === "boolean") {
|
|
77
|
-
this.ariaChecked = next ? "true" : "false";
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
80
|
-
this.ariaChecked = null;
|
|
81
|
-
}
|
|
82
|
-
/**
|
|
83
|
-
* Updates the proxy's text content when the default slot changes.
|
|
84
|
-
* @param prev - the previous content value
|
|
85
|
-
* @param next - the current content value
|
|
86
|
-
*
|
|
87
|
-
* @internal
|
|
88
|
-
*/
|
|
89
|
-
contentChanged(prev, next) {
|
|
90
|
-
if (this.proxy instanceof HTMLOptionElement) {
|
|
91
|
-
this.proxy.textContent = this.textContent;
|
|
92
|
-
}
|
|
93
|
-
this.$emit("contentchange", null, { bubbles: true });
|
|
94
|
-
}
|
|
95
|
-
defaultSelectedChanged() {
|
|
96
|
-
if (!this.dirtySelected) {
|
|
97
|
-
this.selected = this.defaultSelected;
|
|
98
|
-
if (this.proxy instanceof HTMLOptionElement) {
|
|
99
|
-
this.proxy.selected = this.defaultSelected;
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
disabledChanged(prev, next) {
|
|
104
|
-
this.ariaDisabled = this.disabled ? "true" : "false";
|
|
105
|
-
if (this.proxy instanceof HTMLOptionElement) {
|
|
106
|
-
this.proxy.disabled = this.disabled;
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
selectedAttributeChanged() {
|
|
110
|
-
this.defaultSelected = this.selectedAttribute;
|
|
111
|
-
if (this.proxy instanceof HTMLOptionElement) {
|
|
112
|
-
this.proxy.defaultSelected = this.defaultSelected;
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
selectedChanged() {
|
|
116
|
-
this.ariaSelected = this.selected ? "true" : "false";
|
|
117
|
-
if (!this.dirtySelected) {
|
|
118
|
-
this.dirtySelected = true;
|
|
119
|
-
}
|
|
120
|
-
if (this.proxy instanceof HTMLOptionElement) {
|
|
121
|
-
this.proxy.selected = this.selected;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
initialValueChanged(previous, next) {
|
|
125
|
-
// If the value is clean and the component is connected to the DOM
|
|
126
|
-
// then set value equal to the attribute value.
|
|
127
|
-
if (!this.dirtyValue) {
|
|
128
|
-
this.value = this.initialValue;
|
|
129
|
-
this.dirtyValue = false;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
get label() {
|
|
133
|
-
var _a;
|
|
134
|
-
return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
|
|
135
|
-
}
|
|
136
|
-
get text() {
|
|
137
|
-
var _a, _b;
|
|
138
|
-
return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
|
|
139
|
-
}
|
|
140
|
-
set value(next) {
|
|
141
|
-
const newValue = `${next !== null && next !== void 0 ? next : ""}`;
|
|
142
|
-
this._value = newValue;
|
|
143
|
-
this.dirtyValue = true;
|
|
144
|
-
if (this.proxy instanceof HTMLOptionElement) {
|
|
145
|
-
this.proxy.value = newValue;
|
|
146
|
-
}
|
|
147
|
-
Observable.notify(this, "value");
|
|
148
|
-
}
|
|
149
|
-
get value() {
|
|
150
|
-
var _a;
|
|
151
|
-
Observable.track(this, "value");
|
|
152
|
-
return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
|
|
153
|
-
}
|
|
154
|
-
get form() {
|
|
155
|
-
return this.proxy ? this.proxy.form : null;
|
|
156
|
-
}
|
|
157
|
-
};
|
|
158
|
-
__decorate([
|
|
159
|
-
observable
|
|
160
|
-
], ListboxOption$1.prototype, "checked", void 0);
|
|
161
|
-
__decorate([
|
|
162
|
-
observable
|
|
163
|
-
], ListboxOption$1.prototype, "content", void 0);
|
|
164
|
-
__decorate([
|
|
165
|
-
observable
|
|
166
|
-
], ListboxOption$1.prototype, "defaultSelected", void 0);
|
|
167
|
-
__decorate([
|
|
168
|
-
attr({ mode: "boolean" })
|
|
169
|
-
], ListboxOption$1.prototype, "disabled", void 0);
|
|
170
|
-
__decorate([
|
|
171
|
-
attr({ attribute: "selected", mode: "boolean" })
|
|
172
|
-
], ListboxOption$1.prototype, "selectedAttribute", void 0);
|
|
173
|
-
__decorate([
|
|
174
|
-
observable
|
|
175
|
-
], ListboxOption$1.prototype, "selected", void 0);
|
|
176
|
-
__decorate([
|
|
177
|
-
attr({ attribute: "value", mode: "fromView" })
|
|
178
|
-
], ListboxOption$1.prototype, "initialValue", void 0);
|
|
179
|
-
/**
|
|
180
|
-
* States and properties relating to the ARIA `option` role.
|
|
181
|
-
*
|
|
182
|
-
* @public
|
|
183
|
-
*/
|
|
184
|
-
class DelegatesARIAListboxOption {
|
|
185
|
-
}
|
|
186
|
-
__decorate([
|
|
187
|
-
observable
|
|
188
|
-
], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
|
|
189
|
-
__decorate([
|
|
190
|
-
observable
|
|
191
|
-
], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
|
|
192
|
-
__decorate([
|
|
193
|
-
observable
|
|
194
|
-
], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
|
|
195
|
-
__decorate([
|
|
196
|
-
observable
|
|
197
|
-
], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
|
|
198
|
-
applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
|
|
199
|
-
applyMixins(ListboxOption$1, StartEnd, DelegatesARIAListboxOption);
|
|
200
|
-
|
|
201
|
-
export { ListboxOption$1 as L, isListboxOption as i };
|