@vonage/vivid 5.3.0 → 5.5.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/accordion-item/definition.js +1 -1
- package/alert/definition.cjs +1 -1
- package/alert/definition.js +2 -2
- package/badge/definition.js +1 -1
- package/banner/definition.js +1 -1
- package/bundled/base-color-picker.cjs +18 -13
- package/bundled/base-color-picker.js +98 -81
- package/bundled/calendar-picker.template.cjs +7 -7
- package/bundled/calendar-picker.template.js +102 -102
- package/bundled/char-count.cjs +1 -1
- package/bundled/char-count.js +1 -1
- package/bundled/definition10.cjs +1 -1
- package/bundled/definition10.js +2 -2
- package/bundled/definition11.cjs +12 -19
- package/bundled/definition11.js +87 -66
- package/bundled/definition12.cjs +19 -10
- package/bundled/definition12.js +217 -36
- package/bundled/definition13.cjs +10 -1
- package/bundled/definition13.js +38 -14
- package/bundled/definition14.cjs +1 -5
- package/bundled/definition14.js +15 -24
- package/bundled/definition15.cjs +5 -30
- package/bundled/definition15.js +22 -73
- package/bundled/definition16.cjs +30 -19
- package/bundled/definition16.js +74 -97
- package/bundled/definition17.cjs +19 -13
- package/bundled/definition17.js +83 -117
- package/bundled/definition18.cjs +13 -12
- package/bundled/definition18.js +114 -71
- package/bundled/definition19.cjs +26 -27
- package/bundled/definition19.js +171 -180
- package/bundled/definition2.cjs +9 -9
- package/bundled/definition2.js +84 -129
- package/bundled/definition3.cjs +1 -1
- package/bundled/definition3.js +1 -1
- package/bundled/definition6.cjs +3 -3
- package/bundled/definition6.js +19 -19
- package/bundled/definition9.cjs +5 -5
- package/bundled/definition9.js +394 -392
- package/bundled/listbox.cjs +1 -1
- package/bundled/listbox.js +82 -102
- package/bundled/localized.cjs +1 -1
- package/bundled/localized.js +48 -31
- package/bundled/mixins.cjs +1 -1
- package/bundled/mixins.js +1 -1
- package/bundled/picker-field.template.cjs +14 -14
- package/bundled/picker-field.template.js +35 -56
- package/bundled/time-selection-picker.template.cjs +12 -12
- package/bundled/time-selection-picker.template.js +13 -12
- package/bundled/trapped-focus.cjs +1 -0
- package/bundled/trapped-focus.js +26 -0
- package/bundled/vivid-element.cjs +5 -1
- package/bundled/vivid-element.js +401 -358
- package/calendar/index.cjs +13 -13
- package/calendar/index.js +171 -143
- package/card/definition.cjs +1 -1
- package/card/definition.js +1 -1
- package/color-picker/definition.cjs +209 -113
- package/color-picker/definition.js +209 -113
- package/color-picker/index.cjs +104 -75
- package/color-picker/index.js +412 -326
- package/combobox/definition.cjs +7 -27
- package/combobox/definition.js +8 -28
- package/combobox/index.cjs +6 -6
- package/combobox/index.js +57 -71
- package/contextual-help/index.cjs +1 -1
- package/contextual-help/index.js +1 -1
- package/custom-elements.json +354 -2
- package/data-grid/index.cjs +1 -1
- package/data-grid/index.js +1 -1
- package/date-picker/definition.cjs +1 -1
- package/date-picker/definition.js +1 -1
- package/date-picker/index.cjs +1 -1
- package/date-picker/index.js +2 -2
- package/date-range-picker/definition.cjs +1 -1
- package/date-range-picker/definition.js +1 -1
- package/date-range-picker/index.cjs +1 -1
- package/date-range-picker/index.js +2 -2
- package/date-time-picker/definition.cjs +1 -1
- package/date-time-picker/definition.js +1 -1
- package/date-time-picker/index.cjs +1 -1
- package/date-time-picker/index.js +2 -2
- package/dial-pad/definition.cjs +139 -0
- package/dial-pad/definition.js +139 -0
- package/dial-pad/index.cjs +27 -20
- package/dial-pad/index.js +177 -100
- package/dialog/definition.cjs +2 -2
- package/dialog/definition.js +2 -2
- package/dialog/index.cjs +7 -7
- package/dialog/index.js +6 -6
- package/divider/index.cjs +1 -1
- package/divider/index.js +1 -1
- package/elevation/definition.cjs +1 -1
- package/elevation/definition.js +1 -1
- package/fab/definition.js +1 -1
- package/header/definition.cjs +1 -1
- package/header/definition.js +1 -1
- package/icon/definition.cjs +56 -22
- package/icon/definition.js +56 -22
- package/index.cjs +3 -4
- package/index.js +2 -3
- package/lib/accordion/accordion.d.ts +1 -1
- package/lib/accordion/definition.d.ts +1 -1
- package/lib/audio-player/audio-player.d.ts +1 -1
- package/lib/color-picker/color-picker.d.ts +390 -12
- package/lib/color-picker/locale.d.ts +4 -0
- package/lib/combobox/combobox.d.ts +1 -0
- package/lib/combobox/combobox.options.d.ts +1 -1
- package/lib/date-picker/date-picker.d.ts +38 -38
- package/lib/date-range-picker/date-range-picker.d.ts +20 -20
- package/lib/date-time-picker/date-time-picker.d.ts +40 -40
- package/lib/dial-pad/dial-pad.d.ts +1 -0
- package/lib/divider/divider.d.ts +1 -1
- package/lib/icon/icon.d.ts +1 -0
- package/lib/menu-item/menu-item-role.d.ts +1 -1
- package/lib/popup/popup.d.ts +1 -1
- package/lib/searchable-select/locale.d.ts +4 -0
- package/lib/searchable-select/searchable-select.d.ts +3 -0
- package/lib/select/select.d.ts +3 -1
- package/lib/simple-color-picker/simple-color-picker.d.ts +2 -1
- package/lib/slider/slider.d.ts +1 -1
- package/lib/tabs/tabs.d.ts +2 -2
- package/lib/text-area/text-area.d.ts +1 -1
- package/lib/text-field/text-field.d.ts +1 -1
- package/lib/time-picker/time-picker.d.ts +20 -20
- package/locales/de-DE.cjs +20 -3
- package/locales/de-DE.js +20 -3
- package/locales/en-GB.cjs +21 -4
- package/locales/en-GB.js +21 -4
- package/locales/en-US.cjs +21 -4
- package/locales/en-US.js +21 -4
- package/locales/ja-JP.cjs +20 -3
- package/locales/ja-JP.js +20 -3
- package/locales/zh-CN.cjs +19 -2
- package/locales/zh-CN.js +19 -2
- package/menu/definition.cjs +4 -4
- package/menu/definition.js +4 -4
- package/nav-disclosure/definition.js +1 -1
- package/nav-item/definition.js +1 -1
- package/note/definition.js +1 -1
- package/number-field/definition.js +1 -1
- package/number-field/index.cjs +1 -1
- package/number-field/index.js +3 -3
- package/option/definition.cjs +6 -77
- package/option/definition.js +3 -78
- package/option/index.cjs +1 -1
- package/option/index.js +1 -1
- package/package.json +31 -5
- package/popup/definition.cjs +2 -2
- package/popup/definition.js +2 -2
- package/progress-ring/index.cjs +1 -1
- package/progress-ring/index.js +1 -1
- package/radio/index.cjs +1 -1
- package/radio/index.js +1 -1
- package/radio-group/index.cjs +1 -1
- package/radio-group/index.js +1 -1
- package/range-slider/definition.cjs +1 -1
- package/range-slider/definition.js +1 -1
- package/rich-text-editor/definition.cjs +2 -3
- package/rich-text-editor/definition.js +1 -2
- package/rich-text-editor/index.cjs +27 -27
- package/rich-text-editor/index.js +1209 -1199
- package/searchable-select/definition.cjs +103 -11
- package/searchable-select/definition.js +103 -11
- package/searchable-select/index.cjs +81 -69
- package/searchable-select/index.js +359 -273
- package/select/definition.cjs +30 -44
- package/select/definition.js +30 -44
- package/selectable-box/definition.cjs +1 -1
- package/selectable-box/definition.js +1 -1
- package/selectable-box/index.cjs +1 -1
- package/selectable-box/index.js +2 -2
- package/shared/aria/aria-mixin.d.ts +1 -1
- package/shared/color-picker/base-color-picker.d.ts +2 -1
- package/shared/foundation/listbox/listbox.d.ts +4 -0
- package/shared/picker-field/mixins/calendar-picker.d.ts +10 -10
- package/shared/picker-field/mixins/calendar-picker.template.d.ts +10 -10
- package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +20 -20
- package/shared/picker-field/mixins/single-date-picker.d.ts +28 -28
- package/shared/picker-field/mixins/single-value-picker.d.ts +8 -8
- package/shared/picker-field/mixins/time-selection-picker.d.ts +20 -20
- package/shared/picker-field/mixins/time-selection-picker.template.d.ts +20 -20
- package/simple-color-picker/definition.cjs +9 -7
- package/simple-color-picker/definition.js +9 -7
- package/simple-color-picker/index.cjs +6 -6
- package/simple-color-picker/index.js +41 -39
- package/slider/definition.cjs +1 -1
- package/slider/definition.js +1 -1
- package/split-button/definition.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/tab/definition.js +1 -1
- package/tag/definition.cjs +34 -14
- package/tag/definition.js +35 -15
- package/tag/index.cjs +25 -12
- package/tag/index.js +64 -47
- package/tag-group/definition.cjs +1 -2
- package/tag-group/definition.js +1 -2
- package/tag-group/index.cjs +1 -1
- package/tag-group/index.js +11 -12
- package/text-area/index.cjs +1 -1
- package/text-area/index.js +2 -2
- package/text-field/definition.js +1 -1
- package/time-picker/definition.cjs +1 -1
- package/time-picker/definition.js +1 -1
- package/time-picker/index.cjs +1 -1
- package/time-picker/index.js +1 -1
- package/toggletip/definition.cjs +1 -1
- package/toggletip/definition.js +1 -1
- package/toggletip/index.cjs +1 -1
- package/toggletip/index.js +1 -1
- package/tooltip/definition.cjs +3 -3
- package/tooltip/definition.js +3 -3
- package/tooltip/index.cjs +1 -1
- package/tooltip/index.js +1 -1
- package/tree-item/definition.cjs +1 -1
- package/tree-item/definition.js +1 -1
- package/tree-view/definition.cjs +1 -1
- package/tree-view/definition.js +1 -1
- package/unbundled/affix.js +1 -1
- package/unbundled/base-color-picker.cjs +36 -18
- package/unbundled/base-color-picker.js +36 -18
- package/unbundled/calendar-picker.template.cjs +2 -2
- package/unbundled/calendar-picker.template.js +2 -2
- package/unbundled/definition.js +1 -1
- package/unbundled/definition2.js +1 -1
- package/unbundled/definition3.cjs +222 -141
- package/unbundled/definition3.js +220 -139
- package/unbundled/definition4.cjs +145 -235
- package/unbundled/definition4.js +143 -233
- package/unbundled/definition5.cjs +269 -27
- package/unbundled/definition5.js +267 -26
- package/unbundled/definition6.cjs +56 -0
- package/unbundled/definition6.js +52 -0
- package/unbundled/listbox.cjs +41 -63
- package/unbundled/listbox.js +39 -61
- package/unbundled/picker-field.template.cjs +3 -36
- package/unbundled/picker-field.template.js +3 -35
- package/unbundled/slider.template.cjs +1 -1
- package/unbundled/slider.template.js +1 -1
- package/unbundled/time-selection-picker.template.cjs +2 -1
- package/unbundled/time-selection-picker.template.js +2 -1
- package/unbundled/trapped-focus.cjs +37 -0
- package/unbundled/trapped-focus.js +34 -0
- package/unbundled/vivid-element.cjs +1 -1
- package/unbundled/vivid-element.js +1 -1
- package/video-player/definition.cjs +56 -16
- package/video-player/definition.js +56 -16
- package/video-player/index.cjs +36 -36
- package/video-player/index.js +2461 -2445
- package/visually-hidden/index.cjs +1 -1
- package/visually-hidden/index.js +1 -1
- package/vivid.api.json +285 -38
- package/bundled/_has.cjs +0 -1
- package/bundled/_has.js +0 -34
- package/bundled/option.cjs +0 -1
- package/bundled/option.js +0 -158
- package/unbundled/option.cjs +0 -217
- package/unbundled/option.js +0 -214
package/unbundled/option.cjs
DELETED
|
@@ -1,217 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const fastElement = require('@microsoft/fast-element');
|
|
4
|
-
const fastWebUtilities = require('@microsoft/fast-web-utilities');
|
|
5
|
-
const affix = require('./affix.cjs');
|
|
6
|
-
const vividElement = require('./vivid-element.cjs');
|
|
7
|
-
const hostSemantics = require('./host-semantics.cjs');
|
|
8
|
-
|
|
9
|
-
var __defProp = Object.defineProperty;
|
|
10
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
11
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
12
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
13
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
14
|
-
if (decorator = decorators[i])
|
|
15
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
16
|
-
if (kind && result) __defProp(target, key, result);
|
|
17
|
-
return result;
|
|
18
|
-
};
|
|
19
|
-
function isListboxOption(el) {
|
|
20
|
-
return fastWebUtilities.isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement || el instanceof ListboxOption);
|
|
21
|
-
}
|
|
22
|
-
class ListboxOption extends hostSemantics.HostSemantics(
|
|
23
|
-
affix.AffixIconWithTrailing(vividElement.VividElement)
|
|
24
|
-
) {
|
|
25
|
-
constructor(text, value, defaultSelected, selected) {
|
|
26
|
-
super();
|
|
27
|
-
this.defaultSelected = false;
|
|
28
|
-
/**
|
|
29
|
-
* Tracks whether the "selected" property has been changed.
|
|
30
|
-
* @internal
|
|
31
|
-
*/
|
|
32
|
-
this.dirtySelected = false;
|
|
33
|
-
// eslint-disable-next-line @repo/repo/no-attribute-default-value
|
|
34
|
-
this.value = "";
|
|
35
|
-
this._highlighted = false;
|
|
36
|
-
this._displayCheckmark = false;
|
|
37
|
-
this._vvdSearchText = "";
|
|
38
|
-
this._isNotMatching = false;
|
|
39
|
-
if (text) {
|
|
40
|
-
this.text = text;
|
|
41
|
-
}
|
|
42
|
-
if (value) {
|
|
43
|
-
this.value = value;
|
|
44
|
-
}
|
|
45
|
-
if (defaultSelected) {
|
|
46
|
-
this.defaultSelected = defaultSelected;
|
|
47
|
-
}
|
|
48
|
-
if (selected) {
|
|
49
|
-
this.selected = selected;
|
|
50
|
-
}
|
|
51
|
-
this.proxy = new Option(
|
|
52
|
-
this.text,
|
|
53
|
-
this.value,
|
|
54
|
-
this.defaultSelected,
|
|
55
|
-
this.selected
|
|
56
|
-
);
|
|
57
|
-
this.proxy.disabled = this.disabled;
|
|
58
|
-
}
|
|
59
|
-
defaultSelectedChanged() {
|
|
60
|
-
if (!this.dirtySelected) {
|
|
61
|
-
this.selected = this.defaultSelected;
|
|
62
|
-
if (this.proxy instanceof HTMLOptionElement) {
|
|
63
|
-
this.proxy.selected = this.defaultSelected;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
if (this.proxy instanceof HTMLOptionElement) {
|
|
67
|
-
this.proxy.defaultSelected = this.defaultSelected;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
disabledChanged() {
|
|
71
|
-
if (this.proxy instanceof HTMLOptionElement) {
|
|
72
|
-
this.proxy.disabled = this.disabled;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
/**
|
|
76
|
-
* @deprecated Use `defaultSelected` instead.
|
|
77
|
-
*/
|
|
78
|
-
get selectedAttribute() {
|
|
79
|
-
return this.defaultSelected;
|
|
80
|
-
}
|
|
81
|
-
set selectedAttribute(value) {
|
|
82
|
-
this.defaultSelected = value;
|
|
83
|
-
}
|
|
84
|
-
selectedChanged() {
|
|
85
|
-
if (!this.dirtySelected) {
|
|
86
|
-
this.dirtySelected = true;
|
|
87
|
-
}
|
|
88
|
-
if (this.proxy instanceof HTMLOptionElement) {
|
|
89
|
-
this.proxy.selected = this.selected;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
valueChanged() {
|
|
93
|
-
if (typeof this.value !== "string") {
|
|
94
|
-
this.value = "";
|
|
95
|
-
return;
|
|
96
|
-
}
|
|
97
|
-
if (this.proxy instanceof HTMLOptionElement) {
|
|
98
|
-
this.proxy.value = this.value;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
get label() {
|
|
102
|
-
return this._label ?? this.text;
|
|
103
|
-
}
|
|
104
|
-
set label(value) {
|
|
105
|
-
this._label = value;
|
|
106
|
-
}
|
|
107
|
-
set text(value) {
|
|
108
|
-
this._text = value;
|
|
109
|
-
}
|
|
110
|
-
get text() {
|
|
111
|
-
return this._text ?? "";
|
|
112
|
-
}
|
|
113
|
-
/**
|
|
114
|
-
* Provides an accessible name for use by parent components.
|
|
115
|
-
* Note: Does not implement full accessible name computation, e.g. slotted content is missed.
|
|
116
|
-
* @internal
|
|
117
|
-
*/
|
|
118
|
-
_getAccessibleName() {
|
|
119
|
-
return this.ariaLabel || `${this.text}${this.textSecondary ? ` ${this.textSecondary}` : ""}`;
|
|
120
|
-
}
|
|
121
|
-
get form() {
|
|
122
|
-
return null;
|
|
123
|
-
}
|
|
124
|
-
get _hasMatchedText() {
|
|
125
|
-
return Boolean(this.matchedText ?? this._vvdSearchText);
|
|
126
|
-
}
|
|
127
|
-
get _matchedRange() {
|
|
128
|
-
const matchedText = this.matchedText ?? this._vvdSearchText;
|
|
129
|
-
if (matchedText) {
|
|
130
|
-
const matchIndex = this.text.toLowerCase().indexOf(matchedText.toLowerCase());
|
|
131
|
-
return matchIndex === -1 ? { from: 0, to: 0 } : {
|
|
132
|
-
from: matchIndex,
|
|
133
|
-
to: matchIndex + matchedText.length
|
|
134
|
-
};
|
|
135
|
-
}
|
|
136
|
-
return { from: 0, to: 0 };
|
|
137
|
-
}
|
|
138
|
-
/**
|
|
139
|
-
* @internal
|
|
140
|
-
*/
|
|
141
|
-
connectedCallback() {
|
|
142
|
-
super.connectedCallback();
|
|
143
|
-
if (!this.dirtySelected) {
|
|
144
|
-
this.selected = this.defaultSelected;
|
|
145
|
-
this.dirtySelected = false;
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
__decorateClass([
|
|
150
|
-
fastElement.attr({
|
|
151
|
-
converter: {
|
|
152
|
-
fromView: (value) => {
|
|
153
|
-
if (value === true || value === "true") {
|
|
154
|
-
return true;
|
|
155
|
-
}
|
|
156
|
-
if (value === false || value === "false") {
|
|
157
|
-
return false;
|
|
158
|
-
}
|
|
159
|
-
return void 0;
|
|
160
|
-
},
|
|
161
|
-
toView: (value) => value
|
|
162
|
-
}
|
|
163
|
-
})
|
|
164
|
-
], ListboxOption.prototype, "checked", 2);
|
|
165
|
-
__decorateClass([
|
|
166
|
-
fastElement.attr({ attribute: "selected", mode: "boolean" })
|
|
167
|
-
], ListboxOption.prototype, "defaultSelected", 2);
|
|
168
|
-
// @ts-expect-error Type is incorrectly non-optional
|
|
169
|
-
__decorateClass([
|
|
170
|
-
fastElement.attr({ mode: "boolean" })
|
|
171
|
-
], ListboxOption.prototype, "disabled", 2);
|
|
172
|
-
__decorateClass([
|
|
173
|
-
fastElement.attr({ attribute: "current-selected", mode: "boolean" })
|
|
174
|
-
], ListboxOption.prototype, "selected", 2);
|
|
175
|
-
__decorateClass([
|
|
176
|
-
fastElement.attr({ attribute: "value" })
|
|
177
|
-
], ListboxOption.prototype, "value", 2);
|
|
178
|
-
__decorateClass([
|
|
179
|
-
fastElement.attr({
|
|
180
|
-
attribute: "label"
|
|
181
|
-
})
|
|
182
|
-
], ListboxOption.prototype, "_label", 2);
|
|
183
|
-
__decorateClass([
|
|
184
|
-
fastElement.attr({
|
|
185
|
-
attribute: "text"
|
|
186
|
-
})
|
|
187
|
-
], ListboxOption.prototype, "_text", 2);
|
|
188
|
-
__decorateClass([
|
|
189
|
-
fastElement.attr({ attribute: "text-secondary" })
|
|
190
|
-
], ListboxOption.prototype, "textSecondary", 2);
|
|
191
|
-
__decorateClass([
|
|
192
|
-
fastElement.observable
|
|
193
|
-
], ListboxOption.prototype, "_highlighted", 2);
|
|
194
|
-
__decorateClass([
|
|
195
|
-
fastElement.observable
|
|
196
|
-
], ListboxOption.prototype, "_displayCheckmark", 2);
|
|
197
|
-
__decorateClass([
|
|
198
|
-
fastElement.attr({ attribute: "matched-text" })
|
|
199
|
-
], ListboxOption.prototype, "matchedText", 2);
|
|
200
|
-
__decorateClass([
|
|
201
|
-
fastElement.observable
|
|
202
|
-
], ListboxOption.prototype, "_vvdSearchText", 2);
|
|
203
|
-
__decorateClass([
|
|
204
|
-
fastElement.volatile
|
|
205
|
-
], ListboxOption.prototype, "_hasMatchedText", 1);
|
|
206
|
-
__decorateClass([
|
|
207
|
-
fastElement.observable
|
|
208
|
-
], ListboxOption.prototype, "_isNotMatching", 2);
|
|
209
|
-
__decorateClass([
|
|
210
|
-
fastElement.volatile
|
|
211
|
-
], ListboxOption.prototype, "_matchedRange", 1);
|
|
212
|
-
__decorateClass([
|
|
213
|
-
fastElement.attr({ attribute: "tag-connotation" })
|
|
214
|
-
], ListboxOption.prototype, "tagConnotation", 2);
|
|
215
|
-
|
|
216
|
-
exports.ListboxOption = ListboxOption;
|
|
217
|
-
exports.isListboxOption = isListboxOption;
|
package/unbundled/option.js
DELETED
|
@@ -1,214 +0,0 @@
|
|
|
1
|
-
import { attr, observable, volatile } from '@microsoft/fast-element';
|
|
2
|
-
import { isHTMLElement } from '@microsoft/fast-web-utilities';
|
|
3
|
-
import { A as AffixIconWithTrailing } from './affix.js';
|
|
4
|
-
import { V as VividElement } from './vivid-element.js';
|
|
5
|
-
import { H as HostSemantics } from './host-semantics.js';
|
|
6
|
-
|
|
7
|
-
var __defProp = Object.defineProperty;
|
|
8
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
9
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
10
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
11
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
12
|
-
if (decorator = decorators[i])
|
|
13
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
14
|
-
if (kind && result) __defProp(target, key, result);
|
|
15
|
-
return result;
|
|
16
|
-
};
|
|
17
|
-
function isListboxOption(el) {
|
|
18
|
-
return isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement || el instanceof ListboxOption);
|
|
19
|
-
}
|
|
20
|
-
class ListboxOption extends HostSemantics(
|
|
21
|
-
AffixIconWithTrailing(VividElement)
|
|
22
|
-
) {
|
|
23
|
-
constructor(text, value, defaultSelected, selected) {
|
|
24
|
-
super();
|
|
25
|
-
this.defaultSelected = false;
|
|
26
|
-
/**
|
|
27
|
-
* Tracks whether the "selected" property has been changed.
|
|
28
|
-
* @internal
|
|
29
|
-
*/
|
|
30
|
-
this.dirtySelected = false;
|
|
31
|
-
// eslint-disable-next-line @repo/repo/no-attribute-default-value
|
|
32
|
-
this.value = "";
|
|
33
|
-
this._highlighted = false;
|
|
34
|
-
this._displayCheckmark = false;
|
|
35
|
-
this._vvdSearchText = "";
|
|
36
|
-
this._isNotMatching = false;
|
|
37
|
-
if (text) {
|
|
38
|
-
this.text = text;
|
|
39
|
-
}
|
|
40
|
-
if (value) {
|
|
41
|
-
this.value = value;
|
|
42
|
-
}
|
|
43
|
-
if (defaultSelected) {
|
|
44
|
-
this.defaultSelected = defaultSelected;
|
|
45
|
-
}
|
|
46
|
-
if (selected) {
|
|
47
|
-
this.selected = selected;
|
|
48
|
-
}
|
|
49
|
-
this.proxy = new Option(
|
|
50
|
-
this.text,
|
|
51
|
-
this.value,
|
|
52
|
-
this.defaultSelected,
|
|
53
|
-
this.selected
|
|
54
|
-
);
|
|
55
|
-
this.proxy.disabled = this.disabled;
|
|
56
|
-
}
|
|
57
|
-
defaultSelectedChanged() {
|
|
58
|
-
if (!this.dirtySelected) {
|
|
59
|
-
this.selected = this.defaultSelected;
|
|
60
|
-
if (this.proxy instanceof HTMLOptionElement) {
|
|
61
|
-
this.proxy.selected = this.defaultSelected;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
if (this.proxy instanceof HTMLOptionElement) {
|
|
65
|
-
this.proxy.defaultSelected = this.defaultSelected;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
disabledChanged() {
|
|
69
|
-
if (this.proxy instanceof HTMLOptionElement) {
|
|
70
|
-
this.proxy.disabled = this.disabled;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
/**
|
|
74
|
-
* @deprecated Use `defaultSelected` instead.
|
|
75
|
-
*/
|
|
76
|
-
get selectedAttribute() {
|
|
77
|
-
return this.defaultSelected;
|
|
78
|
-
}
|
|
79
|
-
set selectedAttribute(value) {
|
|
80
|
-
this.defaultSelected = value;
|
|
81
|
-
}
|
|
82
|
-
selectedChanged() {
|
|
83
|
-
if (!this.dirtySelected) {
|
|
84
|
-
this.dirtySelected = true;
|
|
85
|
-
}
|
|
86
|
-
if (this.proxy instanceof HTMLOptionElement) {
|
|
87
|
-
this.proxy.selected = this.selected;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
valueChanged() {
|
|
91
|
-
if (typeof this.value !== "string") {
|
|
92
|
-
this.value = "";
|
|
93
|
-
return;
|
|
94
|
-
}
|
|
95
|
-
if (this.proxy instanceof HTMLOptionElement) {
|
|
96
|
-
this.proxy.value = this.value;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
get label() {
|
|
100
|
-
return this._label ?? this.text;
|
|
101
|
-
}
|
|
102
|
-
set label(value) {
|
|
103
|
-
this._label = value;
|
|
104
|
-
}
|
|
105
|
-
set text(value) {
|
|
106
|
-
this._text = value;
|
|
107
|
-
}
|
|
108
|
-
get text() {
|
|
109
|
-
return this._text ?? "";
|
|
110
|
-
}
|
|
111
|
-
/**
|
|
112
|
-
* Provides an accessible name for use by parent components.
|
|
113
|
-
* Note: Does not implement full accessible name computation, e.g. slotted content is missed.
|
|
114
|
-
* @internal
|
|
115
|
-
*/
|
|
116
|
-
_getAccessibleName() {
|
|
117
|
-
return this.ariaLabel || `${this.text}${this.textSecondary ? ` ${this.textSecondary}` : ""}`;
|
|
118
|
-
}
|
|
119
|
-
get form() {
|
|
120
|
-
return null;
|
|
121
|
-
}
|
|
122
|
-
get _hasMatchedText() {
|
|
123
|
-
return Boolean(this.matchedText ?? this._vvdSearchText);
|
|
124
|
-
}
|
|
125
|
-
get _matchedRange() {
|
|
126
|
-
const matchedText = this.matchedText ?? this._vvdSearchText;
|
|
127
|
-
if (matchedText) {
|
|
128
|
-
const matchIndex = this.text.toLowerCase().indexOf(matchedText.toLowerCase());
|
|
129
|
-
return matchIndex === -1 ? { from: 0, to: 0 } : {
|
|
130
|
-
from: matchIndex,
|
|
131
|
-
to: matchIndex + matchedText.length
|
|
132
|
-
};
|
|
133
|
-
}
|
|
134
|
-
return { from: 0, to: 0 };
|
|
135
|
-
}
|
|
136
|
-
/**
|
|
137
|
-
* @internal
|
|
138
|
-
*/
|
|
139
|
-
connectedCallback() {
|
|
140
|
-
super.connectedCallback();
|
|
141
|
-
if (!this.dirtySelected) {
|
|
142
|
-
this.selected = this.defaultSelected;
|
|
143
|
-
this.dirtySelected = false;
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
__decorateClass([
|
|
148
|
-
attr({
|
|
149
|
-
converter: {
|
|
150
|
-
fromView: (value) => {
|
|
151
|
-
if (value === true || value === "true") {
|
|
152
|
-
return true;
|
|
153
|
-
}
|
|
154
|
-
if (value === false || value === "false") {
|
|
155
|
-
return false;
|
|
156
|
-
}
|
|
157
|
-
return void 0;
|
|
158
|
-
},
|
|
159
|
-
toView: (value) => value
|
|
160
|
-
}
|
|
161
|
-
})
|
|
162
|
-
], ListboxOption.prototype, "checked", 2);
|
|
163
|
-
__decorateClass([
|
|
164
|
-
attr({ attribute: "selected", mode: "boolean" })
|
|
165
|
-
], ListboxOption.prototype, "defaultSelected", 2);
|
|
166
|
-
// @ts-expect-error Type is incorrectly non-optional
|
|
167
|
-
__decorateClass([
|
|
168
|
-
attr({ mode: "boolean" })
|
|
169
|
-
], ListboxOption.prototype, "disabled", 2);
|
|
170
|
-
__decorateClass([
|
|
171
|
-
attr({ attribute: "current-selected", mode: "boolean" })
|
|
172
|
-
], ListboxOption.prototype, "selected", 2);
|
|
173
|
-
__decorateClass([
|
|
174
|
-
attr({ attribute: "value" })
|
|
175
|
-
], ListboxOption.prototype, "value", 2);
|
|
176
|
-
__decorateClass([
|
|
177
|
-
attr({
|
|
178
|
-
attribute: "label"
|
|
179
|
-
})
|
|
180
|
-
], ListboxOption.prototype, "_label", 2);
|
|
181
|
-
__decorateClass([
|
|
182
|
-
attr({
|
|
183
|
-
attribute: "text"
|
|
184
|
-
})
|
|
185
|
-
], ListboxOption.prototype, "_text", 2);
|
|
186
|
-
__decorateClass([
|
|
187
|
-
attr({ attribute: "text-secondary" })
|
|
188
|
-
], ListboxOption.prototype, "textSecondary", 2);
|
|
189
|
-
__decorateClass([
|
|
190
|
-
observable
|
|
191
|
-
], ListboxOption.prototype, "_highlighted", 2);
|
|
192
|
-
__decorateClass([
|
|
193
|
-
observable
|
|
194
|
-
], ListboxOption.prototype, "_displayCheckmark", 2);
|
|
195
|
-
__decorateClass([
|
|
196
|
-
attr({ attribute: "matched-text" })
|
|
197
|
-
], ListboxOption.prototype, "matchedText", 2);
|
|
198
|
-
__decorateClass([
|
|
199
|
-
observable
|
|
200
|
-
], ListboxOption.prototype, "_vvdSearchText", 2);
|
|
201
|
-
__decorateClass([
|
|
202
|
-
volatile
|
|
203
|
-
], ListboxOption.prototype, "_hasMatchedText", 1);
|
|
204
|
-
__decorateClass([
|
|
205
|
-
observable
|
|
206
|
-
], ListboxOption.prototype, "_isNotMatching", 2);
|
|
207
|
-
__decorateClass([
|
|
208
|
-
volatile
|
|
209
|
-
], ListboxOption.prototype, "_matchedRange", 1);
|
|
210
|
-
__decorateClass([
|
|
211
|
-
attr({ attribute: "tag-connotation" })
|
|
212
|
-
], ListboxOption.prototype, "tagConnotation", 2);
|
|
213
|
-
|
|
214
|
-
export { ListboxOption as L, isListboxOption as i };
|