@vonage/vivid 3.28.2 → 3.30.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 +400 -2
- package/index.js +13 -12
- package/lib/components.d.ts +1 -0
- package/lib/icon/icon.d.ts +1 -1
- package/lib/menu/menu.d.ts +1 -1
- package/lib/split-button/definition.d.ts +2 -0
- package/lib/split-button/index.d.ts +1 -0
- package/lib/split-button/split-button.d.ts +25 -0
- package/lib/split-button/split-button.template.d.ts +4 -0
- package/listbox/index.js +1 -1
- package/package.json +1 -1
- package/shared/definition.js +1 -1
- package/shared/definition10.js +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition12.js +1 -1
- package/shared/definition14.js +1 -1
- package/shared/definition15.js +1 -1
- package/shared/definition16.js +1 -1
- package/shared/definition17.js +1 -1
- package/shared/definition18.js +1 -1
- package/shared/definition19.js +1 -1
- package/shared/definition2.js +1 -1
- package/shared/definition21.js +1 -1
- package/shared/definition22.js +2 -2
- package/shared/definition23.js +1 -1
- package/shared/definition24.js +1 -1
- package/shared/definition25.js +1 -1
- package/shared/definition26.js +1 -1
- package/shared/definition27.js +1 -1
- package/shared/definition28.js +1 -1
- package/shared/definition30.js +7 -2
- package/shared/definition31.js +1 -1
- package/shared/definition33.js +1 -1
- package/shared/definition34.js +1 -1
- package/shared/definition35.js +1 -1
- package/shared/definition36.js +1 -1
- package/shared/definition37.js +1 -1
- package/shared/definition38.js +1 -1
- package/shared/definition39.js +1 -1
- package/shared/definition4.js +1 -1
- package/shared/definition40.js +1 -1
- package/shared/definition41.js +1 -1
- package/shared/definition42.js +1 -1
- package/shared/definition44.js +91 -126
- package/shared/definition45.js +123 -49
- package/shared/definition46.js +56 -16
- package/shared/definition47.js +16 -483
- package/shared/definition48.js +476 -96
- package/shared/definition49.js +108 -16
- package/shared/definition5.js +1 -1
- package/shared/definition50.js +15 -270
- package/shared/definition51.js +245 -89
- package/shared/definition52.js +113 -120
- package/shared/definition53.js +91 -82
- package/shared/definition54.js +111 -65
- package/shared/definition55.js +64 -291
- package/shared/definition56.js +303 -0
- package/shared/definition6.js +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition9.js +1 -1
- package/shared/form-elements.js +1 -1
- package/shared/icon.js +1 -1
- package/shared/patterns/form-elements/form-elements.d.ts +4 -4
- package/shared/text-field.js +1 -1
- package/split-button/index.js +15 -0
- 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/switch/index.js +1 -1
- package/tab/index.js +1 -1
- package/tab-panel/index.js +1 -1
- package/tabs/index.js +3 -3
- package/tag/index.js +1 -1
- package/tag-group/index.js +1 -1
- package/text-area/index.js +1 -1
- package/text-field/index.js +1 -1
- package/toggletip/index.js +1 -1
- package/tooltip/index.js +1 -1
- package/tree-item/index.js +1 -1
- package/tree-view/index.js +1 -1
- package/vivid.api.json +287 -0
package/shared/definition45.js
CHANGED
|
@@ -1,70 +1,144 @@
|
|
|
1
|
-
import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
|
|
1
|
+
import { F as FoundationElement, _ as __decorate, a as attr, o as observable, b as __metadata, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { i as iconRegistries } from './definition3.js';
|
|
3
3
|
import { f as focusRegistries } from './definition4.js';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { C as CheckableFormAssociated } from './form-associated.js';
|
|
5
|
+
import { e as keySpace, d as keyEnter } from './key-codes.js';
|
|
6
|
+
import './affix.js';
|
|
6
7
|
import { f as focusTemplateFactory } from './focus2.js';
|
|
8
|
+
import './form-elements.js';
|
|
9
|
+
import { w as when } from './when.js';
|
|
7
10
|
import { c as classNames } from './class-names.js';
|
|
8
11
|
|
|
12
|
+
class _Switch extends FoundationElement {
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* A form-associated base class for the {@link @microsoft/fast-foundation#(Switch:class)} component.
|
|
16
|
+
*
|
|
17
|
+
* @internal
|
|
18
|
+
*/
|
|
19
|
+
class FormAssociatedSwitch extends CheckableFormAssociated(_Switch) {
|
|
20
|
+
constructor() {
|
|
21
|
+
super(...arguments);
|
|
22
|
+
this.proxy = document.createElement("input");
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
9
26
|
/**
|
|
10
|
-
* A
|
|
27
|
+
* A Switch Custom HTML Element.
|
|
28
|
+
* Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
|
|
11
29
|
*
|
|
12
|
-
* @slot - The
|
|
30
|
+
* @slot - The deafult slot for the label
|
|
31
|
+
* @slot checked-message - The message when in a checked state
|
|
32
|
+
* @slot unchecked-message - The message when in an unchecked state
|
|
33
|
+
* @csspart label - The label
|
|
34
|
+
* @csspart switch - The element representing the switch, which wraps the indicator
|
|
35
|
+
* @csspart status-message - The wrapper for the status messages
|
|
36
|
+
* @csspart checked-message - The checked message
|
|
37
|
+
* @csspart unchecked-message - The unchecked message
|
|
38
|
+
* @fires change - Emits a custom change event when the checked state changes
|
|
13
39
|
*
|
|
14
40
|
* @public
|
|
15
41
|
*/
|
|
16
|
-
class
|
|
42
|
+
class Switch$1 extends FormAssociatedSwitch {
|
|
43
|
+
constructor() {
|
|
44
|
+
super();
|
|
45
|
+
/**
|
|
46
|
+
* The element's value to be included in form submission when checked.
|
|
47
|
+
* Default to "on" to reach parity with input[type="checkbox"]
|
|
48
|
+
*
|
|
49
|
+
* @internal
|
|
50
|
+
*/
|
|
51
|
+
this.initialValue = "on";
|
|
52
|
+
/**
|
|
53
|
+
* @internal
|
|
54
|
+
*/
|
|
55
|
+
this.keypressHandler = (e) => {
|
|
56
|
+
if (this.readOnly) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
switch (e.key) {
|
|
60
|
+
case keyEnter:
|
|
61
|
+
case keySpace:
|
|
62
|
+
this.checked = !this.checked;
|
|
63
|
+
break;
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
/**
|
|
67
|
+
* @internal
|
|
68
|
+
*/
|
|
69
|
+
this.clickHandler = (e) => {
|
|
70
|
+
if (!this.disabled && !this.readOnly) {
|
|
71
|
+
this.checked = !this.checked;
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
this.proxy.setAttribute("type", "checkbox");
|
|
75
|
+
}
|
|
76
|
+
readOnlyChanged() {
|
|
77
|
+
if (this.proxy instanceof HTMLInputElement) {
|
|
78
|
+
this.proxy.readOnly = this.readOnly;
|
|
79
|
+
}
|
|
80
|
+
this.readOnly
|
|
81
|
+
? this.classList.add("readonly")
|
|
82
|
+
: this.classList.remove("readonly");
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* @internal
|
|
86
|
+
*/
|
|
87
|
+
checkedChanged(prev, next) {
|
|
88
|
+
super.checkedChanged(prev, next);
|
|
89
|
+
/**
|
|
90
|
+
* @deprecated - this behavior already exists in the template and should not exist in the class.
|
|
91
|
+
*/
|
|
92
|
+
this.checked ? this.classList.add("checked") : this.classList.remove("checked");
|
|
93
|
+
}
|
|
17
94
|
}
|
|
18
95
|
__decorate([
|
|
19
|
-
attr({ mode: "boolean" })
|
|
20
|
-
],
|
|
96
|
+
attr({ attribute: "readonly", mode: "boolean" })
|
|
97
|
+
], Switch$1.prototype, "readOnly", void 0);
|
|
98
|
+
__decorate([
|
|
99
|
+
observable
|
|
100
|
+
], Switch$1.prototype, "defaultSlottedNodes", void 0);
|
|
21
101
|
|
|
22
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on Mon,
|
|
102
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 14 Aug 2023 13:17:40 GMT\n */\n.control {\n display: inline-flex;\n gap: 8px;\n}\n.control.connotation-cta {\n /* @cssprop [--vvd-switch-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-switch-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-switch-cta-primary-increment=var(--vvd-color-cta-600)] */\n --_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-switch-cta-backdrop=var(--vvd-color-cta-50)] */\n --_connotation-color-backdrop: var(--vvd-switch-cta-backdrop, var(--vvd-color-cta-50));\n /* @cssprop [--vvd-switch-cta-firm=var(--vvd-color-cta-600)] */\n --_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-switch-cta-intermediate=var(--vvd-color-cta-500)] */\n --_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));\n}\n.control.connotation-alert {\n /* @cssprop [--vvd-switch-alert-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-switch-alert-primary=var(--vvd-color-alert-500)] */\n --_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-switch-alert-primary-increment=var(--vvd-color-alert-600)] */\n --_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));\n /* @cssprop [--vvd-switch-alert-backdrop=var(--vvd-color-alert-50)] */\n --_connotation-color-backdrop: var(--vvd-switch-alert-backdrop, var(--vvd-color-alert-50));\n /* @cssprop [--vvd-switch-alert-firm=var(--vvd-color-alert-600)] */\n --_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));\n /* @cssprop [--vvd-switch-alert-intermediate=var(--vvd-color-alert-500)] */\n --_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));\n}\n.control.connotation-success {\n /* @cssprop [--vvd-switch-success-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-switch-success-primary=var(--vvd-color-success-500)] */\n --_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));\n /* @cssprop [--vvd-switch-success-primary-increment=var(--vvd-color-success-600)] */\n --_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));\n /* @cssprop [--vvd-switch-success-backdrop=var(--vvd-color-success-50)] */\n --_connotation-color-backdrop: var(--vvd-switch-success-backdrop, var(--vvd-color-success-50));\n /* @cssprop [--vvd-switch-success-firm=var(--vvd-color-success-600)] */\n --_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));\n /* @cssprop [--vvd-switch-success-intermediate=var(--vvd-color-success-500)] */\n --_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));\n}\n.control:not(.connotation-cta, .connotation-alert, .connotation-success) {\n /* @cssprop [--vvd-switch-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-switch-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-switch-accent-primary-increment=var(--vvd-color-neutral-800)] */\n --_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-switch-accent-backdrop=var(--vvd-color-canvas)] */\n --_connotation-color-backdrop: var(--vvd-switch-accent-backdrop, var(--vvd-color-canvas));\n /* @cssprop [--vvd-switch-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-switch-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));\n}\n.control {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.control.appearance-filled {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.control:where(:disabled, .disabled).appearance-filled {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: transparent;\n}\n.control:where(.readonly):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.control:where(.readonly):where(:not(:disabled, .disabled)).appearance-filled {\n --_appearance-color-text: var(--vvd-color-neutral-800);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: transparent;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n@supports (user-select: none) {\n .control {\n user-select: none;\n }\n}\n.control:not(.disabled) {\n cursor: pointer;\n}\n.control.disabled {\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.switch {\n --_switch-inline-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) * 1.8);\n position: relative;\n display: flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n border-radius: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) / .5);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n inline-size: var(--_switch-inline-size);\n transition: all 0.2s ease-in-out 0s;\n}\n\n.checked-indicator {\n --_switch-checked-indicator-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) / 1.6667);\n --_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);\n block-size: var(--_switch-checked-indicator-size);\n border-radius: inherit;\n inline-size: var(--_switch-checked-indicator-size);\n margin-inline-start: auto;\n transition: all 0.2s ease-in-out 0s;\n}\n.control.appearance-filled .checked-indicator {\n background-color: var(--vvd-color-neutral-100);\n}\n.control:not(.appearance-filled) .checked-indicator {\n background-color: var(--_appearance-color-outline);\n}\n.control:not(.checked) .checked-indicator {\n transform: translateX(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)));\n}\n.control.checked .checked-indicator {\n transform: translateX(calc(-1 * var(--_switch-gutter)));\n}\n\n.label {\n color: var(--vvd-color-canvas-text);\n cursor: pointer;\n font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n --focus-inset: -4px;\n --focus-stroke-gap-color: transparent;\n border-radius: 14px;\n}\n.control:not(:focus-visible) .focus-indicator {\n display: none;\n}";
|
|
23
103
|
|
|
24
|
-
class
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
this.tabIndex = '-1';
|
|
28
|
-
this.ariaSelected = null;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
__decorate([attr, __metadata("design:type", String)], Tab.prototype, "connotation", void 0);
|
|
32
|
-
__decorate([attr, __metadata("design:type", String)], Tab.prototype, "shape", void 0);
|
|
33
|
-
__decorate([attr, __metadata("design:type", String)], Tab.prototype, "label", void 0);
|
|
34
|
-
__decorate([attr({
|
|
35
|
-
mode: 'fromView'
|
|
36
|
-
}), __metadata("design:type", Object)], Tab.prototype, "tabIndex", void 0);
|
|
37
|
-
__decorate([attr({
|
|
38
|
-
attribute: 'aria-selected'
|
|
39
|
-
}), __metadata("design:type", Object)], Tab.prototype, "ariaSelected", void 0);
|
|
40
|
-
applyMixins(Tab, AffixIconWithTrailing);
|
|
104
|
+
class Switch extends Switch$1 {}
|
|
105
|
+
__decorate([attr, __metadata("design:type", String)], Switch.prototype, "label", void 0);
|
|
106
|
+
__decorate([attr, __metadata("design:type", String)], Switch.prototype, "connotation", void 0);
|
|
41
107
|
|
|
42
|
-
const getClasses = ({
|
|
43
|
-
|
|
44
|
-
disabled,
|
|
45
|
-
ariaSelected,
|
|
46
|
-
iconTrailing,
|
|
47
|
-
shape
|
|
48
|
-
}) => classNames('base', [`connotation-${connotation}`, Boolean(connotation) && ariaSelected === 'true'], [`shape-${shape}`, Boolean(shape)], ['disabled', Boolean(disabled)], ['selected', ariaSelected === 'true'], ['icon-trailing', iconTrailing]);
|
|
49
|
-
function TabTemplate(context) {
|
|
50
|
-
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
108
|
+
const getClasses = _ => classNames('control', ['appearance-filled', _.checked && !_.disabled && !_.readOnly], ['checked', _.checked], ['disabled', _.disabled], ['readonly', _.readOnly], [`connotation-${_.connotation}`, Boolean(_.checked) && Boolean(_.connotation)]);
|
|
109
|
+
const SwitchTemplate = context => {
|
|
51
110
|
const focusTemplate = focusTemplateFactory(context);
|
|
52
111
|
return html`
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
112
|
+
<div
|
|
113
|
+
class="${getClasses}"
|
|
114
|
+
role="switch"
|
|
115
|
+
aria-checked="${x => x.checked}"
|
|
116
|
+
aria-disabled="${x => x.disabled}"
|
|
117
|
+
aria-readonly="${x => x.readOnly}"
|
|
118
|
+
tabindex="${x => x.disabled ? null : 0}"
|
|
119
|
+
@keypress="${(x, c) => x.keypressHandler(c.event)}"
|
|
120
|
+
@click="${(x, c) => x.clickHandler(c.event)}"
|
|
121
|
+
>
|
|
122
|
+
<div class="switch">
|
|
123
|
+
<span class="checked-indicator"></span>
|
|
124
|
+
${() => focusTemplate}
|
|
125
|
+
</div>
|
|
126
|
+
${when(x => x.label, html`<div class="label">
|
|
127
|
+
${x => x.label}
|
|
128
|
+
</div>`)}
|
|
58
129
|
</div>
|
|
59
|
-
|
|
60
|
-
}
|
|
130
|
+
`;
|
|
131
|
+
};
|
|
61
132
|
|
|
62
|
-
const
|
|
63
|
-
baseName: '
|
|
64
|
-
template:
|
|
65
|
-
styles: css_248z
|
|
133
|
+
const switchDefinition = Switch.compose({
|
|
134
|
+
baseName: 'switch',
|
|
135
|
+
template: SwitchTemplate,
|
|
136
|
+
styles: css_248z,
|
|
137
|
+
shadowOptions: {
|
|
138
|
+
delegatesFocus: true
|
|
139
|
+
}
|
|
66
140
|
});
|
|
67
|
-
const
|
|
68
|
-
const
|
|
141
|
+
const switchRegistries = [switchDefinition(), ...iconRegistries, ...focusRegistries];
|
|
142
|
+
const registerSwitch = registerFactory(switchRegistries);
|
|
69
143
|
|
|
70
|
-
export {
|
|
144
|
+
export { switchRegistries as a, registerSwitch as r, switchDefinition as s };
|
package/shared/definition46.js
CHANGED
|
@@ -1,30 +1,70 @@
|
|
|
1
|
-
import { F as FoundationElement, h as html, r as registerFactory } from './index.js';
|
|
1
|
+
import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
|
|
2
|
+
import { i as iconRegistries } from './definition3.js';
|
|
3
|
+
import { f as focusRegistries } from './definition4.js';
|
|
4
|
+
import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from './affix.js';
|
|
5
|
+
import { a as applyMixins } from './apply-mixins.js';
|
|
6
|
+
import { f as focusTemplateFactory } from './focus2.js';
|
|
7
|
+
import { c as classNames } from './class-names.js';
|
|
2
8
|
|
|
3
9
|
/**
|
|
4
|
-
* A
|
|
10
|
+
* A Tab Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
|
|
5
11
|
*
|
|
6
|
-
* @slot - The default slot for the
|
|
12
|
+
* @slot - The default slot for the tab content
|
|
7
13
|
*
|
|
8
14
|
* @public
|
|
9
15
|
*/
|
|
10
|
-
class
|
|
16
|
+
class Tab$1 extends FoundationElement {
|
|
11
17
|
}
|
|
18
|
+
__decorate([
|
|
19
|
+
attr({ mode: "boolean" })
|
|
20
|
+
], Tab$1.prototype, "disabled", void 0);
|
|
12
21
|
|
|
13
|
-
|
|
22
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 14 Aug 2023 13:17:40 GMT\n */\n@supports selector(:focus-visible) {\n :host(:focus) {\n outline: none;\n }\n}\n:host(.vertical) {\n justify-content: end;\n grid-column: 1/auto;\n}\n\n.base {\n position: relative;\n display: flex;\n box-sizing: border-box;\n align-items: center;\n padding: var(--_tabs-tablist-gutter);\n background-color: var(--_appearance-color-fill);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n font: var(--vvd-typography-base);\n gap: var(--_tabs-tablist-gutter);\n min-block-size: 40px;\n vertical-align: middle;\n white-space: nowrap;\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-tab-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-tab-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-tab-cta-firm=var(--vvd-color-cta-600)] */\n --_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));\n /* @cssprop [--vvd-tab-cta-faint=var(--vvd-color-cta-50)] */\n --_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));\n /* @cssprop [--vvd-tab-cta-fierce=var(--vvd-color-cta-700)] */\n --_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));\n /* @cssprop [--vvd-tab-cta-pale=var(--vvd-color-cta-300)] */\n --_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));\n}\n.base:not(.connotation-cta) {\n /* @cssprop [--vvd-tab-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-tab-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-tab-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-tab-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-tab-accent-fierce=var(--vvd-color-neutral-700)] */\n --_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));\n /* @cssprop [--vvd-tab-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n.base:not(.shape-sharp) {\n border-radius: 6px;\n}\n.base:not(.disabled) {\n cursor: pointer;\n}\n.base.disabled {\n cursor: not-allowed;\n pointer-events: none;\n}\n:host(.vertical) .base {\n padding-inline-start: calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter));\n}\n\n:host(:not(:focus-visible)) .focus-indicator {\n display: none;\n}\n\n.icon {\n font-size: 20px;\n}\n.icon-trailing .icon {\n order: 1;\n margin-inline-start: auto;\n}\n\n:host(:not(.vertical)) .base::after {\n position: absolute;\n background: currentColor;\n block-size: 2px;\n content: \"\";\n inline-size: calc(100% + var(--_tabs-tablist-gutter) * 2);\n inset-block-end: 0;\n margin-inline: calc(var(--_tabs-tablist-gutter) * -2);\n pointer-events: none;\n transition-property: opacity;\n}\n:host(:not(.vertical)):host([aria-selected=true]) .base::after {\n transition-delay: 0.2s;\n}\n:host(:not(.vertical)):host(:not([aria-selected=true])) .base::after {\n opacity: 0;\n}";
|
|
14
23
|
|
|
15
|
-
|
|
24
|
+
class Tab extends Tab$1 {
|
|
25
|
+
constructor() {
|
|
26
|
+
super(...arguments);
|
|
27
|
+
this.tabIndex = '-1';
|
|
28
|
+
this.ariaSelected = null;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
__decorate([attr, __metadata("design:type", String)], Tab.prototype, "connotation", void 0);
|
|
32
|
+
__decorate([attr, __metadata("design:type", String)], Tab.prototype, "shape", void 0);
|
|
33
|
+
__decorate([attr, __metadata("design:type", String)], Tab.prototype, "label", void 0);
|
|
34
|
+
__decorate([attr({
|
|
35
|
+
mode: 'fromView'
|
|
36
|
+
}), __metadata("design:type", Object)], Tab.prototype, "tabIndex", void 0);
|
|
37
|
+
__decorate([attr({
|
|
38
|
+
attribute: 'aria-selected'
|
|
39
|
+
}), __metadata("design:type", Object)], Tab.prototype, "ariaSelected", void 0);
|
|
40
|
+
applyMixins(Tab, AffixIconWithTrailing);
|
|
41
|
+
|
|
42
|
+
const getClasses = ({
|
|
43
|
+
connotation,
|
|
44
|
+
disabled,
|
|
45
|
+
ariaSelected,
|
|
46
|
+
iconTrailing,
|
|
47
|
+
shape
|
|
48
|
+
}) => classNames('base', [`connotation-${connotation}`, Boolean(connotation) && ariaSelected === 'true'], [`shape-${shape}`, Boolean(shape)], ['disabled', Boolean(disabled)], ['selected', ariaSelected === 'true'], ['icon-trailing', iconTrailing]);
|
|
49
|
+
function TabTemplate(context) {
|
|
50
|
+
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
51
|
+
const focusTemplate = focusTemplateFactory(context);
|
|
16
52
|
return html`
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
53
|
+
<template slot="tab" role="tab" aria-disabled="${x => x.disabled}" aria-selected="${x => x.ariaSelected}">
|
|
54
|
+
<div class="${getClasses}" >
|
|
55
|
+
${() => focusTemplate}
|
|
56
|
+
${x => affixIconTemplate(x.icon)}
|
|
57
|
+
${x => x.label}
|
|
58
|
+
</div>
|
|
59
|
+
</template>`;
|
|
21
60
|
}
|
|
22
61
|
|
|
23
|
-
const
|
|
24
|
-
baseName: 'tab
|
|
25
|
-
template:
|
|
62
|
+
const tabDefinition = Tab.compose({
|
|
63
|
+
baseName: 'tab',
|
|
64
|
+
template: TabTemplate,
|
|
65
|
+
styles: css_248z
|
|
26
66
|
});
|
|
27
|
-
const
|
|
28
|
-
const
|
|
67
|
+
const tabRegistries = [tabDefinition(), ...iconRegistries, ...focusRegistries];
|
|
68
|
+
const registerTab = registerFactory(tabRegistries);
|
|
29
69
|
|
|
30
|
-
export {
|
|
70
|
+
export { tabDefinition as a, registerTab as r, tabRegistries as t };
|