@vonage/vivid 3.0.0-next.8 → 3.0.0-next.80
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/README.md +141 -4
- package/accordion/index.js +2 -4
- package/accordion-item/index.js +26 -20
- package/action-group/index.js +47 -0
- package/avatar/index.js +70 -0
- package/badge/index.js +17 -21
- package/banner/index.js +23 -87
- package/breadcrumb/index.js +21 -18
- package/breadcrumb-item/index.js +19 -12
- package/button/index.js +19 -757
- package/calendar/index.js +67 -25
- package/calendar-event/index.js +115 -0
- package/card/index.js +132 -0
- package/checkbox/index.js +184 -0
- package/dialog/index.js +281 -0
- package/divider/index.js +3 -0
- package/elevation/index.js +3 -31
- package/fab/index.js +105 -0
- package/focus/index.js +18 -3
- package/header/index.js +66 -0
- package/icon/index.js +9 -5
- package/index.js +53 -20
- package/layout/index.js +4 -6
- package/lib/accordion-item/accordion-item.d.ts +2 -2
- package/lib/accordion-item/index.d.ts +2 -1
- package/lib/action-group/action-group.d.ts +10 -0
- package/lib/{sidenav-item/sidenav-item.template.d.ts → action-group/action-group.template.d.ts} +2 -2
- package/lib/{sidenav-item → action-group}/index.d.ts +1 -2
- package/lib/avatar/avatar.d.ts +15 -0
- package/lib/avatar/avatar.template.d.ts +4 -0
- package/lib/avatar/index.d.ts +3 -0
- package/lib/badge/badge.d.ts +5 -5
- package/lib/badge/index.d.ts +1 -1
- package/lib/banner/banner.d.ts +1 -1
- package/lib/banner/banner.template.d.ts +0 -2
- package/lib/banner/index.d.ts +1 -0
- package/lib/breadcrumb/breadcrumb.template.d.ts +4 -0
- package/lib/breadcrumb-item/breadcrumb-item.d.ts +1 -1
- package/lib/breadcrumb-item/index.d.ts +1 -0
- package/lib/button/button.d.ts +6 -5
- package/lib/button/index.d.ts +2 -19
- package/lib/calendar/calendar.d.ts +3 -1
- package/lib/calendar/index.d.ts +0 -1
- package/lib/calendar-event/calendar-event.d.ts +14 -0
- package/lib/calendar-event/calendar-event.template.d.ts +4 -0
- package/lib/calendar-event/index.d.ts +2 -0
- package/lib/card/card.d.ts +10 -0
- package/lib/{text/text.template.d.ts → card/card.template.d.ts} +2 -2
- package/lib/card/index.d.ts +4 -0
- package/lib/checkbox/checkbox.d.ts +5 -0
- package/lib/checkbox/checkbox.template.d.ts +4 -0
- package/lib/checkbox/index.d.ts +4 -0
- package/lib/components.d.ts +27 -10
- package/lib/dialog/dialog.d.ts +20 -0
- package/lib/dialog/dialog.template.d.ts +4 -0
- package/lib/dialog/index.d.ts +5 -0
- package/lib/divider/divider.d.ts +3 -0
- package/lib/divider/divider.template.d.ts +4 -0
- package/lib/divider/index.d.ts +2 -0
- package/lib/elevation/elevation.d.ts +1 -0
- package/lib/elevation/index.d.ts +1 -1
- package/lib/enums.d.ts +11 -6
- package/lib/fab/fab.d.ts +13 -0
- package/lib/fab/fab.template.d.ts +4 -0
- package/lib/fab/index.d.ts +4 -0
- package/lib/focus/index.d.ts +1 -1
- package/lib/header/header.d.ts +5 -0
- package/lib/header/header.template.d.ts +4 -0
- package/lib/header/index.d.ts +3 -0
- package/lib/icon/icon.d.ts +4 -3
- package/lib/layout/index.d.ts +1 -1
- package/lib/layout/layout.d.ts +3 -3
- package/lib/menu/index.d.ts +12 -0
- package/lib/menu/menu.d.ts +10 -0
- package/lib/menu/menu.template.d.ts +3 -0
- package/lib/menu-item/index.d.ts +3 -0
- package/lib/menu-item/menu-item.d.ts +7 -0
- package/lib/menu-item/menu-item.template.d.ts +5 -0
- package/lib/nav/index.d.ts +2 -0
- package/lib/nav/nav.d.ts +3 -0
- package/lib/nav/nav.template.d.ts +4 -0
- package/lib/nav-disclosure/index.d.ts +4 -0
- package/lib/nav-disclosure/nav-disclosure.d.ts +10 -0
- package/lib/nav-disclosure/nav-disclosure.template.d.ts +4 -0
- package/lib/nav-item/index.d.ts +4 -0
- package/lib/{sidenav-item/sidenav-item.d.ts → nav-item/nav-item.d.ts} +2 -2
- package/lib/nav-item/nav-item.template.d.ts +4 -0
- package/lib/{text → note}/index.d.ts +1 -1
- package/lib/note/note.d.ts +10 -0
- package/lib/note/note.template.d.ts +5 -0
- package/lib/number-field/index.d.ts +4 -0
- package/lib/number-field/number-field.d.ts +16 -0
- package/lib/number-field/number-field.template.d.ts +4 -0
- package/lib/popup/index.d.ts +1 -1
- package/lib/popup/popup.d.ts +2 -1
- package/lib/progress/progress.d.ts +1 -1
- package/lib/progress-ring/progress-ring.d.ts +2 -1
- package/lib/radio/index.d.ts +3 -0
- package/lib/radio/radio.d.ts +4 -0
- package/lib/radio/radio.template.d.ts +4 -0
- package/lib/side-drawer/index.d.ts +1 -1
- package/lib/side-drawer/side-drawer.d.ts +3 -2
- package/lib/text-anchor/text-anchor.d.ts +1 -1
- package/lib/text-area/index.d.ts +3 -0
- package/lib/text-area/text-area.d.ts +9 -0
- package/lib/text-area/text-area.template.d.ts +4 -0
- package/lib/text-field/index.d.ts +4 -0
- package/lib/text-field/text-field.d.ts +16 -0
- package/lib/text-field/text-field.template.d.ts +5 -0
- package/lib/tooltip/tooltip.d.ts +2 -2
- package/menu/index.js +381 -0
- package/menu-item/index.js +19 -0
- package/nav/index.js +17 -0
- package/nav-disclosure/index.js +88 -0
- package/nav-item/index.js +45 -0
- package/note/index.js +66 -0
- package/number-field/index.js +529 -0
- package/package.json +51 -7
- package/popup/index.js +23 -2061
- package/progress/index.js +35 -28
- package/progress-ring/index.js +9 -5
- package/radio/index.js +174 -0
- package/shared/anchor.js +10 -2
- package/shared/aria-global.js +2 -86
- package/shared/base-progress.js +5 -0
- package/shared/breadcrumb-item.js +1 -1
- package/shared/button.js +200 -0
- package/shared/calendar-event.js +26 -0
- package/shared/dialog-polyfill.esm.js +858 -0
- package/shared/enums.js +79 -0
- package/shared/es.object.assign.js +7 -6
- package/shared/export.js +995 -0
- package/shared/focus.js +5 -0
- package/shared/focus2.js +11 -0
- package/shared/form-associated.js +466 -0
- package/shared/form-elements.js +299 -0
- package/shared/icon.js +533 -520
- package/shared/index.js +71 -55
- package/shared/index2.js +110 -13
- package/shared/index3.js +35 -0
- package/shared/index4.js +86 -0
- package/shared/index5.js +2100 -0
- package/shared/index6.js +371 -0
- package/shared/iterators.js +61 -0
- package/shared/key-codes.js +90 -0
- package/shared/object-keys.js +13 -0
- package/shared/patterns/focus.d.ts +3 -0
- package/shared/patterns/form-elements.d.ts +22 -0
- package/shared/patterns/index.d.ts +1 -0
- package/shared/ref.js +41 -0
- package/shared/regexp-flags.js +21 -0
- package/shared/start-end.js +50 -0
- package/shared/text-anchor.js +2 -11
- package/shared/text-anchor.template.js +5 -2
- package/shared/to-string.js +51 -0
- package/shared/web.dom-collections.iterator.js +78 -1083
- package/side-drawer/index.js +44 -23
- package/styles/core/all.css +75 -0
- package/styles/core/theme.css +11 -0
- package/styles/core/typography.css +69 -0
- package/styles/fonts/SpeziaCompleteVariableItalicWeb.woff2 +0 -0
- package/styles/fonts/SpeziaCompleteVariableUprightWeb.woff2 +0 -0
- package/styles/fonts/SpeziaMonoCompleteVariableWeb.woff2 +0 -0
- package/styles/fonts/spezia.css +9 -12
- package/styles/tokens/theme-dark.css +211 -0
- package/styles/tokens/theme-light.css +211 -0
- package/text-anchor/index.js +9 -1
- package/text-area/index.js +304 -0
- package/text-field/index.js +152 -0
- package/tooltip/index.js +23 -16
- package/lib/text/text.d.ts +0 -10
- package/shared/style-inject.es.js +0 -28
- package/sidenav-item/index.js +0 -38
- package/styles/themes/dark.css +0 -205
- package/styles/themes/light.css +0 -205
- package/text/index.js +0 -45
package/shared/button.js
ADDED
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
|
|
2
|
+
import { a as applyMixins } from './apply-mixins.js';
|
|
3
|
+
import { F as FormAssociated } from './form-associated.js';
|
|
4
|
+
import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
|
|
5
|
+
import { S as StartEnd } from './start-end.js';
|
|
6
|
+
|
|
7
|
+
class _Button extends FoundationElement {
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* A form-associated base class for the {@link @microsoft/fast-foundation#(Button:class)} component.
|
|
11
|
+
*
|
|
12
|
+
* @internal
|
|
13
|
+
*/
|
|
14
|
+
class FormAssociatedButton extends FormAssociated(_Button) {
|
|
15
|
+
constructor() {
|
|
16
|
+
super(...arguments);
|
|
17
|
+
this.proxy = document.createElement("input");
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* A Button Custom HTML Element.
|
|
23
|
+
* Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
|
|
24
|
+
*
|
|
25
|
+
* @slot start - Content which can be provided before the button content
|
|
26
|
+
* @slot end - Content which can be provided after the button content
|
|
27
|
+
* @slot - The default slot for button content
|
|
28
|
+
* @csspart control - The button element
|
|
29
|
+
* @csspart content - The element wrapping button content
|
|
30
|
+
*
|
|
31
|
+
* @public
|
|
32
|
+
*/
|
|
33
|
+
class Button extends FormAssociatedButton {
|
|
34
|
+
constructor() {
|
|
35
|
+
super(...arguments);
|
|
36
|
+
/**
|
|
37
|
+
* Prevent events to propagate if disabled and has no slotted content wrapped in HTML elements
|
|
38
|
+
* @internal
|
|
39
|
+
*/
|
|
40
|
+
this.handleClick = (e) => {
|
|
41
|
+
var _a;
|
|
42
|
+
if (this.disabled && ((_a = this.defaultSlottedContent) === null || _a === void 0 ? void 0 : _a.length) <= 1) {
|
|
43
|
+
e.stopPropagation();
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
/**
|
|
47
|
+
* Submits the parent form
|
|
48
|
+
*/
|
|
49
|
+
this.handleSubmission = () => {
|
|
50
|
+
if (!this.form) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
const attached = this.proxy.isConnected;
|
|
54
|
+
if (!attached) {
|
|
55
|
+
this.attachProxy();
|
|
56
|
+
}
|
|
57
|
+
// Browser support for requestSubmit is not comprehensive
|
|
58
|
+
// so click the proxy if it isn't supported
|
|
59
|
+
typeof this.form.requestSubmit === "function"
|
|
60
|
+
? this.form.requestSubmit(this.proxy)
|
|
61
|
+
: this.proxy.click();
|
|
62
|
+
if (!attached) {
|
|
63
|
+
this.detachProxy();
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
/**
|
|
67
|
+
* Resets the parent form
|
|
68
|
+
*/
|
|
69
|
+
this.handleFormReset = () => {
|
|
70
|
+
var _a;
|
|
71
|
+
(_a = this.form) === null || _a === void 0 ? void 0 : _a.reset();
|
|
72
|
+
};
|
|
73
|
+
/**
|
|
74
|
+
* Overrides the focus call for where delegatesFocus is unsupported.
|
|
75
|
+
* This check works for Chrome, Edge Chromium, FireFox, and Safari
|
|
76
|
+
* Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
|
|
77
|
+
*/
|
|
78
|
+
this.handleUnsupportedDelegatesFocus = () => {
|
|
79
|
+
var _a;
|
|
80
|
+
// Check to see if delegatesFocus is supported
|
|
81
|
+
if (window.ShadowRoot &&
|
|
82
|
+
!window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
|
|
83
|
+
((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
|
|
84
|
+
this.focus = () => {
|
|
85
|
+
this.control.focus();
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
}
|
|
90
|
+
formactionChanged() {
|
|
91
|
+
if (this.proxy instanceof HTMLInputElement) {
|
|
92
|
+
this.proxy.formAction = this.formaction;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
formenctypeChanged() {
|
|
96
|
+
if (this.proxy instanceof HTMLInputElement) {
|
|
97
|
+
this.proxy.formEnctype = this.formenctype;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
formmethodChanged() {
|
|
101
|
+
if (this.proxy instanceof HTMLInputElement) {
|
|
102
|
+
this.proxy.formMethod = this.formmethod;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
formnovalidateChanged() {
|
|
106
|
+
if (this.proxy instanceof HTMLInputElement) {
|
|
107
|
+
this.proxy.formNoValidate = this.formnovalidate;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
formtargetChanged() {
|
|
111
|
+
if (this.proxy instanceof HTMLInputElement) {
|
|
112
|
+
this.proxy.formTarget = this.formtarget;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
typeChanged(previous, next) {
|
|
116
|
+
if (this.proxy instanceof HTMLInputElement) {
|
|
117
|
+
this.proxy.type = this.type;
|
|
118
|
+
}
|
|
119
|
+
next === "submit" && this.addEventListener("click", this.handleSubmission);
|
|
120
|
+
previous === "submit" && this.removeEventListener("click", this.handleSubmission);
|
|
121
|
+
next === "reset" && this.addEventListener("click", this.handleFormReset);
|
|
122
|
+
previous === "reset" && this.removeEventListener("click", this.handleFormReset);
|
|
123
|
+
}
|
|
124
|
+
/** {@inheritDoc (FormAssociated:interface).validate} */
|
|
125
|
+
validate() {
|
|
126
|
+
super.validate(this.control);
|
|
127
|
+
}
|
|
128
|
+
/**
|
|
129
|
+
* @internal
|
|
130
|
+
*/
|
|
131
|
+
connectedCallback() {
|
|
132
|
+
var _a;
|
|
133
|
+
super.connectedCallback();
|
|
134
|
+
this.proxy.setAttribute("type", this.type);
|
|
135
|
+
this.handleUnsupportedDelegatesFocus();
|
|
136
|
+
const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
|
|
137
|
+
if (elements) {
|
|
138
|
+
elements.forEach((span) => {
|
|
139
|
+
span.addEventListener("click", this.handleClick);
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
/**
|
|
144
|
+
* @internal
|
|
145
|
+
*/
|
|
146
|
+
disconnectedCallback() {
|
|
147
|
+
var _a;
|
|
148
|
+
super.disconnectedCallback();
|
|
149
|
+
const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
|
|
150
|
+
if (elements) {
|
|
151
|
+
elements.forEach((span) => {
|
|
152
|
+
span.removeEventListener("click", this.handleClick);
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
__decorate([
|
|
158
|
+
attr({ mode: "boolean" })
|
|
159
|
+
], Button.prototype, "autofocus", void 0);
|
|
160
|
+
__decorate([
|
|
161
|
+
attr({ attribute: "form" })
|
|
162
|
+
], Button.prototype, "formId", void 0);
|
|
163
|
+
__decorate([
|
|
164
|
+
attr
|
|
165
|
+
], Button.prototype, "formaction", void 0);
|
|
166
|
+
__decorate([
|
|
167
|
+
attr
|
|
168
|
+
], Button.prototype, "formenctype", void 0);
|
|
169
|
+
__decorate([
|
|
170
|
+
attr
|
|
171
|
+
], Button.prototype, "formmethod", void 0);
|
|
172
|
+
__decorate([
|
|
173
|
+
attr({ mode: "boolean" })
|
|
174
|
+
], Button.prototype, "formnovalidate", void 0);
|
|
175
|
+
__decorate([
|
|
176
|
+
attr
|
|
177
|
+
], Button.prototype, "formtarget", void 0);
|
|
178
|
+
__decorate([
|
|
179
|
+
attr
|
|
180
|
+
], Button.prototype, "type", void 0);
|
|
181
|
+
__decorate([
|
|
182
|
+
observable
|
|
183
|
+
], Button.prototype, "defaultSlottedContent", void 0);
|
|
184
|
+
/**
|
|
185
|
+
* Includes ARIA states and properties relating to the ARIA button role
|
|
186
|
+
*
|
|
187
|
+
* @public
|
|
188
|
+
*/
|
|
189
|
+
class DelegatesARIAButton {
|
|
190
|
+
}
|
|
191
|
+
__decorate([
|
|
192
|
+
attr({ attribute: "aria-expanded" })
|
|
193
|
+
], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
|
|
194
|
+
__decorate([
|
|
195
|
+
attr({ attribute: "aria-pressed" })
|
|
196
|
+
], DelegatesARIAButton.prototype, "ariaPressed", void 0);
|
|
197
|
+
applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
|
|
198
|
+
applyMixins(Button, StartEnd, DelegatesARIAButton);
|
|
199
|
+
|
|
200
|
+
export { Button as B };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, n as nullableNumberConverter } from './index.js';
|
|
2
|
+
|
|
3
|
+
class CalendarEvent extends FoundationElement {}
|
|
4
|
+
|
|
5
|
+
__decorate([attr, __metadata("design:type", String)], CalendarEvent.prototype, "heading", void 0);
|
|
6
|
+
|
|
7
|
+
__decorate([attr, __metadata("design:type", String)], CalendarEvent.prototype, "description", void 0);
|
|
8
|
+
|
|
9
|
+
__decorate([attr, __metadata("design:type", String)], CalendarEvent.prototype, "connotation", void 0);
|
|
10
|
+
|
|
11
|
+
__decorate([attr, __metadata("design:type", String)], CalendarEvent.prototype, "appearance", void 0);
|
|
12
|
+
|
|
13
|
+
__decorate([attr({
|
|
14
|
+
converter: nullableNumberConverter,
|
|
15
|
+
attribute: 'overlap-count'
|
|
16
|
+
}), __metadata("design:type", Number)], CalendarEvent.prototype, "overlapCount", void 0);
|
|
17
|
+
|
|
18
|
+
__decorate([attr({
|
|
19
|
+
converter: nullableNumberConverter
|
|
20
|
+
}), __metadata("design:type", Number)], CalendarEvent.prototype, "start", void 0);
|
|
21
|
+
|
|
22
|
+
__decorate([attr({
|
|
23
|
+
converter: nullableNumberConverter
|
|
24
|
+
}), __metadata("design:type", Number)], CalendarEvent.prototype, "duration", void 0);
|
|
25
|
+
|
|
26
|
+
export { CalendarEvent as C };
|