@vonage/vivid 4.11.0 → 4.12.1
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 +899 -442
- package/lib/accordion/accordion.d.ts +21 -2
- package/lib/accordion-item/accordion-item.d.ts +6 -2
- package/lib/calendar/calendar.d.ts +1 -1
- package/lib/date-picker/date-picker.d.ts +1 -0
- package/lib/fab/fab.d.ts +2 -2
- package/lib/radio/radio.d.ts +12 -2
- package/lib/radio/radio.form-associated.d.ts +10 -0
- package/lib/radio-group/radio-group.d.ts +20 -2
- package/lib/tab/tab.d.ts +3 -2
- package/lib/tab-panel/tab-panel.d.ts +2 -2
- package/lib/tabs/tabs.d.ts +30 -9
- package/package.json +1 -1
- package/shared/date-picker/date-picker-base.d.ts +1 -0
- package/shared/definition.cjs +29 -72
- package/shared/definition.js +30 -73
- package/shared/definition16.cjs +1 -2
- package/shared/definition16.js +1 -2
- package/shared/definition17.cjs +2 -2
- package/shared/definition17.js +2 -2
- package/shared/definition18.cjs +6 -1
- package/shared/definition18.js +6 -1
- package/shared/definition19.cjs +17 -8
- package/shared/definition19.js +17 -8
- package/shared/definition2.cjs +154 -187
- package/shared/definition2.js +157 -190
- package/shared/definition20.cjs +1 -1
- package/shared/definition20.js +1 -1
- package/shared/definition24.cjs +11 -11
- package/shared/definition24.js +11 -11
- package/shared/definition29.cjs +2 -2
- package/shared/definition29.js +2 -2
- package/shared/definition35.cjs +1 -1
- package/shared/definition35.js +1 -1
- package/shared/definition40.cjs +226 -399
- package/shared/definition40.js +229 -402
- package/shared/definition42.cjs +3 -2
- package/shared/definition42.js +3 -2
- package/shared/definition43.cjs +1 -0
- package/shared/definition43.js +1 -0
- package/shared/definition44.cjs +1 -1
- package/shared/definition44.js +1 -1
- package/shared/definition47.cjs +3 -2
- package/shared/definition47.js +3 -2
- package/shared/definition49.cjs +1 -1
- package/shared/definition49.js +1 -1
- package/shared/definition5.cjs +1 -1
- package/shared/definition5.js +1 -1
- package/shared/definition50.cjs +1 -11
- package/shared/definition50.js +1 -11
- package/shared/definition51.cjs +4 -14
- package/shared/definition51.js +5 -15
- package/shared/definition52.cjs +269 -19
- package/shared/definition52.js +273 -23
- package/shared/definition57.cjs +26 -4
- package/shared/definition57.js +27 -5
- package/shared/definition58.cjs +1 -1
- package/shared/definition58.js +1 -1
- package/shared/definition59.cjs +1 -1
- package/shared/definition59.js +1 -1
- package/shared/definition61.cjs +1 -1
- package/shared/definition61.js +1 -1
- package/shared/definition62.cjs +17 -8
- package/shared/definition62.js +17 -8
- package/shared/definition64.cjs +55 -30
- package/shared/definition64.js +55 -30
- package/shared/form-associated.cjs +1 -1
- package/shared/form-associated.js +1 -1
- package/shared/foundation/button/button.d.ts +1 -1
- package/shared/foundation/button/button.template.d.ts +2 -2
- package/shared/icon.cjs +1 -1
- package/shared/icon.js +1 -1
- package/shared/index.cjs +1 -0
- package/shared/index.js +1 -1
- package/shared/key-codes.cjs +1 -94
- package/shared/key-codes.js +2 -89
- package/shared/key-codes2.cjs +87 -1
- package/shared/key-codes2.js +83 -2
- package/shared/listbox.cjs +6 -7
- package/shared/listbox.js +3 -4
- package/shared/numbers.cjs +0 -12
- package/shared/numbers.js +1 -12
- package/shared/presentationDate.cjs +14 -0
- package/shared/presentationDate.js +15 -1
- package/shared/radio.cjs +92 -117
- package/shared/radio.js +93 -118
- package/shared/slider.template.cjs +2 -15
- package/shared/slider.template.js +2 -14
- package/shared/strings.cjs +26 -0
- package/shared/strings.js +25 -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/shared/definition2.js
CHANGED
|
@@ -1,205 +1,165 @@
|
|
|
1
|
-
import { F as FoundationElement,
|
|
2
|
-
import { A as AccordionItem
|
|
3
|
-
import {
|
|
1
|
+
import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
|
|
2
|
+
import { A as AccordionItem, b as accordionItemRegistries } from './definition.js';
|
|
3
|
+
import { a as keyEnd, b as keyHome, c as keyArrowDown, d as keyArrowUp } from './key-codes.js';
|
|
4
4
|
import { w as wrapInBounds } from './numbers.js';
|
|
5
5
|
import { s as slotted, e as elements } from './slotted.js';
|
|
6
6
|
import { c as classNames } from './class-names.js';
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
const styles = ".base{display:flex;box-sizing:border-box;flex-direction:column}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
|
|
9
|
+
|
|
10
|
+
var __defProp = Object.defineProperty;
|
|
11
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
12
|
+
var result = void 0 ;
|
|
13
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
14
|
+
if (decorator = decorators[i])
|
|
15
|
+
result = (decorator(target, key, result) ) || result;
|
|
16
|
+
if (result) __defProp(target, key, result);
|
|
17
|
+
return result;
|
|
18
|
+
};
|
|
12
19
|
const AccordionExpandMode = {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
/**
|
|
21
|
+
* Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.
|
|
22
|
+
*/
|
|
23
|
+
single: "single",
|
|
24
|
+
/**
|
|
25
|
+
* Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.
|
|
26
|
+
*/
|
|
27
|
+
multi: "multi"
|
|
21
28
|
};
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
this.change = () => {
|
|
47
|
-
this.$emit("change", this.activeid);
|
|
48
|
-
};
|
|
49
|
-
this.setItems = () => {
|
|
50
|
-
var _a;
|
|
51
|
-
if (this.accordionItems.length === 0) {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
this.accordionIds = this.getItemIds();
|
|
55
|
-
this.accordionItems.forEach((item, index) => {
|
|
56
|
-
if (item instanceof AccordionItem$1) {
|
|
57
|
-
item.addEventListener("change", this.activeItemChange);
|
|
58
|
-
if (this.isSingleExpandMode()) {
|
|
59
|
-
this.activeItemIndex !== index
|
|
60
|
-
? (item.expanded = false)
|
|
61
|
-
: (item.expanded = true);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
const itemId = this.accordionIds[index];
|
|
65
|
-
item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
|
|
66
|
-
this.activeid = this.accordionIds[this.activeItemIndex];
|
|
67
|
-
item.addEventListener("keydown", this.handleItemKeyDown);
|
|
68
|
-
item.addEventListener("focus", this.handleItemFocus);
|
|
69
|
-
});
|
|
70
|
-
if (this.isSingleExpandMode()) {
|
|
71
|
-
const expandedItem = (_a = this.findExpandedItem()) !== null && _a !== void 0 ? _a : this.accordionItems[0];
|
|
72
|
-
expandedItem.setAttribute("aria-disabled", "true");
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
this.removeItemListeners = (oldValue) => {
|
|
76
|
-
oldValue.forEach((item, index) => {
|
|
77
|
-
item.removeEventListener("change", this.activeItemChange);
|
|
78
|
-
item.removeEventListener("keydown", this.handleItemKeyDown);
|
|
79
|
-
item.removeEventListener("focus", this.handleItemFocus);
|
|
80
|
-
});
|
|
81
|
-
};
|
|
82
|
-
this.activeItemChange = (event) => {
|
|
83
|
-
if (event.defaultPrevented || event.target !== event.currentTarget) {
|
|
84
|
-
return;
|
|
85
|
-
}
|
|
86
|
-
event.preventDefault();
|
|
87
|
-
const selectedItem = event.target;
|
|
88
|
-
this.activeid = selectedItem.getAttribute("id");
|
|
89
|
-
if (this.isSingleExpandMode()) {
|
|
90
|
-
this.resetItems();
|
|
91
|
-
selectedItem.expanded = true;
|
|
92
|
-
selectedItem.setAttribute("aria-disabled", "true");
|
|
93
|
-
this.accordionItems.forEach((item) => {
|
|
94
|
-
if (!item.hasAttribute("disabled") && item.id !== this.activeid) {
|
|
95
|
-
item.removeAttribute("aria-disabled");
|
|
96
|
-
}
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
this.activeItemIndex = Array.from(this.accordionItems).indexOf(selectedItem);
|
|
100
|
-
this.change();
|
|
101
|
-
};
|
|
102
|
-
this.handleItemKeyDown = (event) => {
|
|
103
|
-
// only handle the keydown if the event target is the accordion item
|
|
104
|
-
// prevents arrow keys from moving focus to accordion headers when focus is on accordion item panel content
|
|
105
|
-
if (event.target !== event.currentTarget) {
|
|
106
|
-
return;
|
|
107
|
-
}
|
|
108
|
-
this.accordionIds = this.getItemIds();
|
|
109
|
-
switch (event.key) {
|
|
110
|
-
case keyArrowUp:
|
|
111
|
-
event.preventDefault();
|
|
112
|
-
this.adjust(-1);
|
|
113
|
-
break;
|
|
114
|
-
case keyArrowDown:
|
|
115
|
-
event.preventDefault();
|
|
116
|
-
this.adjust(1);
|
|
117
|
-
break;
|
|
118
|
-
case keyHome:
|
|
119
|
-
this.activeItemIndex = 0;
|
|
120
|
-
this.focusItem();
|
|
121
|
-
break;
|
|
122
|
-
case keyEnd:
|
|
123
|
-
this.activeItemIndex = this.accordionItems.length - 1;
|
|
124
|
-
this.focusItem();
|
|
125
|
-
break;
|
|
126
|
-
}
|
|
127
|
-
};
|
|
128
|
-
this.handleItemFocus = (event) => {
|
|
129
|
-
// update the active item index if the focus moves to an accordion item via a different method other than the up and down arrow key actions
|
|
130
|
-
// only do so if the focus is actually on the accordion item and not on any of its children
|
|
131
|
-
if (event.target === event.currentTarget) {
|
|
132
|
-
const focusedItem = event.target;
|
|
133
|
-
const focusedIndex = (this.activeItemIndex = Array.from(this.accordionItems).indexOf(focusedItem));
|
|
134
|
-
if (this.activeItemIndex !== focusedIndex && focusedIndex !== -1) {
|
|
135
|
-
this.activeItemIndex = focusedIndex;
|
|
136
|
-
this.activeid = this.accordionIds[this.activeItemIndex];
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
};
|
|
140
|
-
}
|
|
141
|
-
/**
|
|
142
|
-
* @internal
|
|
143
|
-
*/
|
|
144
|
-
accordionItemsChanged(oldValue, newValue) {
|
|
145
|
-
if (this.$fastController.isConnected) {
|
|
146
|
-
this.removeItemListeners(oldValue);
|
|
147
|
-
this.setItems();
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
findExpandedItem() {
|
|
151
|
-
for (let item = 0; item < this.accordionItems.length; item++) {
|
|
152
|
-
if (this.accordionItems[item].getAttribute("expanded") === "true") {
|
|
153
|
-
return this.accordionItems[item];
|
|
29
|
+
class Accordion extends FoundationElement {
|
|
30
|
+
constructor() {
|
|
31
|
+
super(...arguments);
|
|
32
|
+
/* eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value */
|
|
33
|
+
this.expandmode = AccordionExpandMode.single;
|
|
34
|
+
this.activeItemIndex = 0;
|
|
35
|
+
this.change = () => {
|
|
36
|
+
this.$emit("change", this.activeid);
|
|
37
|
+
};
|
|
38
|
+
this.setItems = () => {
|
|
39
|
+
if (this.accordionItems.length === 0) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
this.accordionIds = this.getItemIds();
|
|
43
|
+
this.activeid = this.accordionIds[this.activeItemIndex];
|
|
44
|
+
this.accordionItems.forEach((item, index) => {
|
|
45
|
+
if (item instanceof AccordionItem) {
|
|
46
|
+
item.addEventListener("change", this.activeItemChange);
|
|
47
|
+
if (this.isSingleExpandMode()) {
|
|
48
|
+
const expandedItem = this.findExpandedItem();
|
|
49
|
+
if (expandedItem === null && index === 0) {
|
|
50
|
+
item.expanded = true;
|
|
51
|
+
} else {
|
|
52
|
+
item !== this.findExpandedItem() ? item.expanded = false : item.expanded = true;
|
|
154
53
|
}
|
|
54
|
+
}
|
|
155
55
|
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
56
|
+
const itemId = this.accordionIds[index];
|
|
57
|
+
item.setAttribute(
|
|
58
|
+
"id",
|
|
59
|
+
typeof itemId !== "string" ? `accordion-${index + 1}` : itemId
|
|
60
|
+
);
|
|
61
|
+
item.addEventListener("keydown", this.handleItemKeyDown);
|
|
62
|
+
});
|
|
63
|
+
if (this.isSingleExpandMode()) {
|
|
64
|
+
const expandedItem = this.findExpandedItem() ?? this.accordionItems[0];
|
|
65
|
+
expandedItem.setAttribute("aria-disabled", "true");
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
this.removeItemListeners = (oldValue) => {
|
|
69
|
+
oldValue.forEach((item) => {
|
|
70
|
+
item.removeEventListener("change", this.activeItemChange);
|
|
71
|
+
item.removeEventListener("keydown", this.handleItemKeyDown);
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
this.activeItemChange = (event) => {
|
|
75
|
+
if (event.defaultPrevented || event.target !== event.currentTarget) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
event.preventDefault();
|
|
79
|
+
const selectedItem = event.target;
|
|
80
|
+
this.activeid = selectedItem.getAttribute("id");
|
|
81
|
+
if (this.isSingleExpandMode()) {
|
|
82
|
+
this.resetItems();
|
|
83
|
+
selectedItem.expanded = true;
|
|
84
|
+
selectedItem.setAttribute("aria-disabled", "true");
|
|
85
|
+
this.accordionItems.forEach((item) => {
|
|
86
|
+
if (!item.hasAttribute("disabled") && item.id !== this.activeid) {
|
|
87
|
+
item.removeAttribute("aria-disabled");
|
|
88
|
+
}
|
|
166
89
|
});
|
|
90
|
+
}
|
|
91
|
+
this.activeItemIndex = Array.from(this.accordionItems).indexOf(
|
|
92
|
+
selectedItem
|
|
93
|
+
);
|
|
94
|
+
this.change();
|
|
95
|
+
};
|
|
96
|
+
this.handleItemKeyDown = (event) => {
|
|
97
|
+
if (event.target !== event.currentTarget) {
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
this.accordionIds = this.getItemIds();
|
|
101
|
+
switch (event.key) {
|
|
102
|
+
case keyArrowUp:
|
|
103
|
+
event.preventDefault();
|
|
104
|
+
this.adjust(event.target, -1);
|
|
105
|
+
break;
|
|
106
|
+
case keyArrowDown:
|
|
107
|
+
event.preventDefault();
|
|
108
|
+
this.adjust(event.target, 1);
|
|
109
|
+
break;
|
|
110
|
+
case keyHome:
|
|
111
|
+
this.focusItem(0);
|
|
112
|
+
break;
|
|
113
|
+
case keyEnd:
|
|
114
|
+
this.focusItem(this.accordionItems.length - 1);
|
|
115
|
+
break;
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* @internal
|
|
121
|
+
*/
|
|
122
|
+
accordionItemsChanged(oldValue) {
|
|
123
|
+
if (this.$fastController.isConnected) {
|
|
124
|
+
this.removeItemListeners(oldValue);
|
|
125
|
+
this.setItems();
|
|
167
126
|
}
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
127
|
+
}
|
|
128
|
+
findExpandedItem() {
|
|
129
|
+
for (let item = 0; item < this.accordionItems.length; item++) {
|
|
130
|
+
if (this.accordionItems[item].hasAttribute("expanded") === true) {
|
|
131
|
+
return this.accordionItems[item];
|
|
132
|
+
}
|
|
174
133
|
}
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
134
|
+
return null;
|
|
135
|
+
}
|
|
136
|
+
resetItems() {
|
|
137
|
+
this.accordionItems.forEach((item) => {
|
|
138
|
+
item.expanded = false;
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
getItemIds() {
|
|
142
|
+
return this.accordionItems.map((accordionItem) => {
|
|
143
|
+
return accordionItem.getAttribute("id");
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
isSingleExpandMode() {
|
|
147
|
+
return this.expandmode !== AccordionExpandMode.multi;
|
|
148
|
+
}
|
|
149
|
+
adjust(item, adjustment) {
|
|
150
|
+
this.focusItem(
|
|
151
|
+
wrapInBounds(
|
|
152
|
+
0,
|
|
153
|
+
this.accordionItems.length - 1,
|
|
154
|
+
this.accordionItems.indexOf(item) + adjustment
|
|
155
|
+
)
|
|
156
|
+
);
|
|
157
|
+
}
|
|
158
|
+
focusItem(index) {
|
|
159
|
+
const element = this.accordionItems[index];
|
|
160
|
+
if (element instanceof AccordionItem) {
|
|
161
|
+
element.expandbutton.focus();
|
|
180
162
|
}
|
|
181
|
-
};
|
|
182
|
-
__decorate([
|
|
183
|
-
attr({ attribute: "expand-mode" })
|
|
184
|
-
], Accordion$1.prototype, "expandmode", void 0);
|
|
185
|
-
__decorate([
|
|
186
|
-
observable
|
|
187
|
-
], Accordion$1.prototype, "accordionItems", void 0);
|
|
188
|
-
|
|
189
|
-
const styles = ".base{display:flex;box-sizing:border-box;flex-direction:column}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
|
|
190
|
-
|
|
191
|
-
class Accordion extends Accordion$1 {
|
|
192
|
-
constructor() {
|
|
193
|
-
super(...arguments);
|
|
194
|
-
/**
|
|
195
|
-
* Controls the expand mode of the Accordion, either allowing
|
|
196
|
-
* single or multiple item expansion.
|
|
197
|
-
* @public
|
|
198
|
-
*
|
|
199
|
-
* @remarks
|
|
200
|
-
* HTML attribute: expand-mode
|
|
201
|
-
*/
|
|
202
|
-
this.expandmode = AccordionExpandMode.single;
|
|
203
163
|
}
|
|
204
164
|
closeAll() {
|
|
205
165
|
if (this.expandmode === AccordionExpandMode.multi) {
|
|
@@ -209,6 +169,13 @@ class Accordion extends Accordion$1 {
|
|
|
209
169
|
}
|
|
210
170
|
}
|
|
211
171
|
}
|
|
172
|
+
__decorateClass([
|
|
173
|
+
attr({ attribute: "expand-mode" })
|
|
174
|
+
], Accordion.prototype, "expandmode");
|
|
175
|
+
// @ts-expect-error Type is incorrectly non-optional
|
|
176
|
+
__decorateClass([
|
|
177
|
+
observable
|
|
178
|
+
], Accordion.prototype, "accordionItems");
|
|
212
179
|
|
|
213
180
|
const getClasses = (_) => classNames("base");
|
|
214
181
|
const AccordionTemplate = () => html`
|
package/shared/definition20.cjs
CHANGED
|
@@ -10,7 +10,7 @@ const when = require('./when.cjs');
|
|
|
10
10
|
const classNames = require('./class-names.cjs');
|
|
11
11
|
const ref = require('./ref.cjs');
|
|
12
12
|
const repeat = require('./repeat.cjs');
|
|
13
|
-
const keyCodes = require('./key-
|
|
13
|
+
const keyCodes = require('./key-codes.cjs');
|
|
14
14
|
|
|
15
15
|
const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.digit-btn:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.call-btn{margin-top:32px;grid-column:1/-1}";
|
|
16
16
|
|
package/shared/definition20.js
CHANGED
|
@@ -8,7 +8,7 @@ import { w as when } from './when.js';
|
|
|
8
8
|
import { c as classNames } from './class-names.js';
|
|
9
9
|
import { r as ref } from './ref.js';
|
|
10
10
|
import { r as repeat } from './repeat.js';
|
|
11
|
-
import {
|
|
11
|
+
import { g as keyEnter } from './key-codes.js';
|
|
12
12
|
|
|
13
13
|
const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.digit-btn:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.call-btn{margin-top:32px;grid-column:1/-1}";
|
|
14
14
|
|
package/shared/definition24.cjs
CHANGED
|
@@ -29,7 +29,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
|
|
|
29
29
|
if (result) __defProp$1(target, key, result);
|
|
30
30
|
return result;
|
|
31
31
|
};
|
|
32
|
-
class
|
|
32
|
+
class VividFoundationButton extends FormAssociatedButton {
|
|
33
33
|
constructor() {
|
|
34
34
|
super(...arguments);
|
|
35
35
|
/**
|
|
@@ -131,28 +131,28 @@ class FoundationButton extends FormAssociatedButton {
|
|
|
131
131
|
}
|
|
132
132
|
__decorateClass$1([
|
|
133
133
|
index.attr({ mode: "boolean" })
|
|
134
|
-
],
|
|
134
|
+
], VividFoundationButton.prototype, "autofocus");
|
|
135
135
|
__decorateClass$1([
|
|
136
136
|
index.attr({ attribute: "form" })
|
|
137
|
-
],
|
|
137
|
+
], VividFoundationButton.prototype, "formId");
|
|
138
138
|
__decorateClass$1([
|
|
139
139
|
index.attr
|
|
140
|
-
],
|
|
140
|
+
], VividFoundationButton.prototype, "formaction");
|
|
141
141
|
__decorateClass$1([
|
|
142
142
|
index.attr
|
|
143
|
-
],
|
|
143
|
+
], VividFoundationButton.prototype, "formenctype");
|
|
144
144
|
__decorateClass$1([
|
|
145
145
|
index.attr
|
|
146
|
-
],
|
|
146
|
+
], VividFoundationButton.prototype, "formmethod");
|
|
147
147
|
__decorateClass$1([
|
|
148
148
|
index.attr({ mode: "boolean" })
|
|
149
|
-
],
|
|
149
|
+
], VividFoundationButton.prototype, "formnovalidate");
|
|
150
150
|
__decorateClass$1([
|
|
151
151
|
index.attr
|
|
152
|
-
],
|
|
152
|
+
], VividFoundationButton.prototype, "formtarget");
|
|
153
153
|
__decorateClass$1([
|
|
154
154
|
index.attr
|
|
155
|
-
],
|
|
155
|
+
], VividFoundationButton.prototype, "type");
|
|
156
156
|
class DelegatesARIAButton {
|
|
157
157
|
}
|
|
158
158
|
__decorateClass$1([
|
|
@@ -162,7 +162,7 @@ __decorateClass$1([
|
|
|
162
162
|
index.attr({ attribute: "aria-pressed" })
|
|
163
163
|
], DelegatesARIAButton.prototype, "ariaPressed");
|
|
164
164
|
applyMixins.applyMixins(DelegatesARIAButton, ariaGlobal.ARIAGlobalStatesAndProperties);
|
|
165
|
-
applyMixins.applyMixins(
|
|
165
|
+
applyMixins.applyMixins(VividFoundationButton, DelegatesARIAButton);
|
|
166
166
|
|
|
167
167
|
var __defProp = Object.defineProperty;
|
|
168
168
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -173,7 +173,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
173
173
|
if (result) __defProp(target, key, result);
|
|
174
174
|
return result;
|
|
175
175
|
};
|
|
176
|
-
class Fab extends
|
|
176
|
+
class Fab extends VividFoundationButton {
|
|
177
177
|
}
|
|
178
178
|
__decorateClass([
|
|
179
179
|
index.attr
|
package/shared/definition24.js
CHANGED
|
@@ -27,7 +27,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
|
|
|
27
27
|
if (result) __defProp$1(target, key, result);
|
|
28
28
|
return result;
|
|
29
29
|
};
|
|
30
|
-
class
|
|
30
|
+
class VividFoundationButton extends FormAssociatedButton {
|
|
31
31
|
constructor() {
|
|
32
32
|
super(...arguments);
|
|
33
33
|
/**
|
|
@@ -129,28 +129,28 @@ class FoundationButton extends FormAssociatedButton {
|
|
|
129
129
|
}
|
|
130
130
|
__decorateClass$1([
|
|
131
131
|
attr({ mode: "boolean" })
|
|
132
|
-
],
|
|
132
|
+
], VividFoundationButton.prototype, "autofocus");
|
|
133
133
|
__decorateClass$1([
|
|
134
134
|
attr({ attribute: "form" })
|
|
135
|
-
],
|
|
135
|
+
], VividFoundationButton.prototype, "formId");
|
|
136
136
|
__decorateClass$1([
|
|
137
137
|
attr
|
|
138
|
-
],
|
|
138
|
+
], VividFoundationButton.prototype, "formaction");
|
|
139
139
|
__decorateClass$1([
|
|
140
140
|
attr
|
|
141
|
-
],
|
|
141
|
+
], VividFoundationButton.prototype, "formenctype");
|
|
142
142
|
__decorateClass$1([
|
|
143
143
|
attr
|
|
144
|
-
],
|
|
144
|
+
], VividFoundationButton.prototype, "formmethod");
|
|
145
145
|
__decorateClass$1([
|
|
146
146
|
attr({ mode: "boolean" })
|
|
147
|
-
],
|
|
147
|
+
], VividFoundationButton.prototype, "formnovalidate");
|
|
148
148
|
__decorateClass$1([
|
|
149
149
|
attr
|
|
150
|
-
],
|
|
150
|
+
], VividFoundationButton.prototype, "formtarget");
|
|
151
151
|
__decorateClass$1([
|
|
152
152
|
attr
|
|
153
|
-
],
|
|
153
|
+
], VividFoundationButton.prototype, "type");
|
|
154
154
|
class DelegatesARIAButton {
|
|
155
155
|
}
|
|
156
156
|
__decorateClass$1([
|
|
@@ -160,7 +160,7 @@ __decorateClass$1([
|
|
|
160
160
|
attr({ attribute: "aria-pressed" })
|
|
161
161
|
], DelegatesARIAButton.prototype, "ariaPressed");
|
|
162
162
|
applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
|
|
163
|
-
applyMixins(
|
|
163
|
+
applyMixins(VividFoundationButton, DelegatesARIAButton);
|
|
164
164
|
|
|
165
165
|
var __defProp = Object.defineProperty;
|
|
166
166
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -171,7 +171,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
171
171
|
if (result) __defProp(target, key, result);
|
|
172
172
|
return result;
|
|
173
173
|
};
|
|
174
|
-
class Fab extends
|
|
174
|
+
class Fab extends VividFoundationButton {
|
|
175
175
|
}
|
|
176
176
|
__decorateClass([
|
|
177
177
|
attr
|
package/shared/definition29.cjs
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
4
|
const definition = require('./definition27.cjs');
|
|
5
|
-
const keyCodes$1 = require('./key-
|
|
5
|
+
const keyCodes$1 = require('./key-codes.cjs');
|
|
6
6
|
const affix = require('./affix.cjs');
|
|
7
7
|
const applyMixins = require('./apply-mixins.cjs');
|
|
8
8
|
const startEnd = require('./start-end.cjs');
|
|
9
9
|
const direction = require('./direction.cjs');
|
|
10
|
-
const keyCodes = require('./key-
|
|
10
|
+
const keyCodes = require('./key-codes2.cjs');
|
|
11
11
|
const icon = require('./icon.cjs');
|
|
12
12
|
const anchored = require('./anchored.cjs');
|
|
13
13
|
const dom = require('./dom.cjs');
|
package/shared/definition29.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { F as FoundationElement, D as DOM, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { a as iconRegistries } from './definition27.js';
|
|
3
|
-
import {
|
|
3
|
+
import { e as keyArrowLeft$1, f as keyArrowRight$1, k as keySpace$1, g as keyEnter$1 } from './key-codes.js';
|
|
4
4
|
import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
|
|
5
5
|
import { a as applyMixins } from './apply-mixins.js';
|
|
6
6
|
import { S as StartEnd } from './start-end.js';
|
|
7
7
|
import { D as Direction, g as getDirection } from './direction.js';
|
|
8
|
-
import { i as keyArrowLeft, h as keyArrowRight, a as keySpace, k as keyEnter, g as keyHome, d as keyEnd, e as keyArrowUp, f as keyArrowDown } from './key-
|
|
8
|
+
import { i as keyArrowLeft, h as keyArrowRight, a as keySpace, k as keyEnter, g as keyHome, d as keyEnd, e as keyArrowUp, f as keyArrowDown } from './key-codes2.js';
|
|
9
9
|
import { I as Icon } from './icon.js';
|
|
10
10
|
import { b as anchored } from './anchored.js';
|
|
11
11
|
import { i as isHTMLElement } from './dom.js';
|
package/shared/definition35.cjs
CHANGED
|
@@ -6,7 +6,7 @@ const definition$1 = require('./definition22.cjs');
|
|
|
6
6
|
const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
|
|
7
7
|
const formAssociated = require('./form-associated.cjs');
|
|
8
8
|
const textField = require('./text-field2.cjs');
|
|
9
|
-
const keyCodes = require('./key-
|
|
9
|
+
const keyCodes = require('./key-codes.cjs');
|
|
10
10
|
const formElements = require('./form-elements.cjs');
|
|
11
11
|
const affix = require('./affix.cjs');
|
|
12
12
|
const localized = require('./localized.cjs');
|
package/shared/definition35.js
CHANGED
|
@@ -4,7 +4,7 @@ import { D as Divider, a as dividerRegistries } from './definition22.js';
|
|
|
4
4
|
import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
|
|
5
5
|
import { F as FormAssociated } from './form-associated.js';
|
|
6
6
|
import { D as DelegatesARIATextbox } from './text-field2.js';
|
|
7
|
-
import {
|
|
7
|
+
import { c as keyArrowDown, d as keyArrowUp } from './key-codes.js';
|
|
8
8
|
import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './form-elements.js';
|
|
9
9
|
import { A as AffixIcon } from './affix.js';
|
|
10
10
|
import { L as Localized } from './localized.js';
|