@vonage/vivid 3.24.0 → 3.26.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/index.js +0 -1
- package/accordion-item/index.js +0 -1
- package/alert/index.js +0 -1
- package/avatar/index.js +0 -1
- package/badge/index.js +0 -1
- package/banner/index.js +0 -1
- package/breadcrumb-item/index.js +0 -1
- package/button/index.js +0 -1
- package/card/index.js +0 -1
- package/checkbox/index.js +0 -1
- package/combobox/index.js +0 -1
- package/custom-elements.json +82 -10
- package/data-grid/index.js +7 -2
- package/dialog/index.js +0 -1
- package/empty-state/index.js +0 -1
- package/fab/index.js +0 -1
- package/icon/index.js +0 -1
- package/index.js +27 -29
- package/lib/action-group/action-group.d.ts +1 -1
- package/lib/avatar/avatar.d.ts +1 -1
- package/lib/checkbox/checkbox.d.ts +0 -1
- package/lib/components.d.ts +0 -2
- package/lib/data-grid/data-grid-cell.d.ts +14 -1
- package/lib/data-grid/data-grid.d.ts +4 -0
- package/lib/data-grid/data-grid.options.d.ts +7 -0
- package/lib/dialog/dialog.d.ts +1 -0
- package/lib/listbox/listbox.d.ts +1 -1
- package/lib/menu/menu.d.ts +0 -1
- package/lib/menu-item/menu-item.d.ts +6 -0
- package/lib/menu-item/menu-item.template.d.ts +2 -3
- package/lib/number-field/number-field.d.ts +1 -1
- package/lib/select/select.d.ts +1 -1
- package/lib/text-field/text-field.d.ts +1 -1
- package/listbox/index.js +56 -11
- package/menu/index.js +2 -3
- package/menu-item/index.js +2 -2
- package/nav/index.js +1 -1
- package/nav-disclosure/index.js +1 -2
- package/nav-item/index.js +1 -2
- package/note/index.js +1 -2
- package/number-field/index.js +1 -2
- package/option/index.js +0 -1
- package/package.json +1 -1
- package/pagination/index.js +1 -2
- package/popup/index.js +0 -1
- package/progress/index.js +1 -1
- package/radio/index.js +1 -1
- package/radio-group/index.js +1 -1
- package/select/index.js +1 -2
- 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 +2 -2
- 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 +76 -21
- package/shared/definition23.js +5 -4
- 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/definition29.js +368 -48
- package/shared/definition30.js +301 -298
- package/shared/definition31.js +14 -366
- package/shared/definition32.js +70 -13
- package/shared/definition33.js +25 -64
- package/shared/definition34.js +39 -27
- package/shared/definition35.js +431 -31
- package/shared/definition36.js +214 -430
- package/shared/definition37.js +70 -209
- package/shared/definition38.js +33 -81
- package/shared/definition39.js +423 -32
- package/shared/definition4.js +1 -1
- package/shared/definition40.js +586 -358
- package/shared/definition41.js +73 -648
- package/shared/definition42.js +584 -70
- package/shared/definition43.js +81 -538
- package/shared/definition44.js +52 -127
- package/shared/definition45.js +16 -56
- package/shared/definition46.js +485 -17
- package/shared/definition47.js +99 -477
- package/shared/definition48.js +19 -114
- package/shared/definition49.js +276 -19
- package/shared/definition5.js +1 -1
- package/shared/definition50.js +89 -245
- package/shared/definition51.js +629 -109
- package/shared/definition52.js +86 -601
- package/shared/definition53.js +68 -112
- package/shared/definition54.js +294 -69
- package/shared/definition6.js +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.js +2 -2
- package/shared/definition9.js +1 -1
- package/shared/es.object.assign.js +1 -1
- package/shared/es.regexp.to-string.js +1 -1
- package/shared/es.string.includes.js +1 -1
- package/shared/form-elements.js +1 -1
- package/shared/icon.js +17 -13
- package/shared/index.js +1 -1
- package/shared/patterns/form-elements/form-elements.d.ts +4 -4
- package/shared/string-trim.js +1 -1
- package/shared/text-field.js +1 -1
- package/shared/to-string.js +1 -1
- package/side-drawer/index.js +1 -1
- package/slider/index.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/switch/index.js +1 -2
- package/tab/index.js +1 -2
- package/tab-panel/index.js +1 -1
- package/tabs/index.js +3 -4
- package/tag/index.js +1 -2
- package/tag-group/index.js +1 -1
- package/text-anchor/index.js +0 -1
- package/text-area/index.js +1 -2
- package/text-field/index.js +3 -2
- package/toggletip/index.js +1 -2
- package/tooltip/index.js +1 -2
- package/tree-item/index.js +1 -2
- package/tree-view/index.js +1 -1
- package/vivid.api.json +19 -210
- package/shared/definition55.js +0 -305
- package/shared/engine-is-node.js +0 -8
package/shared/definition44.js
CHANGED
|
@@ -1,147 +1,72 @@
|
|
|
1
|
-
import { F as FoundationElement, _ as __decorate, a as attr,
|
|
1
|
+
import { F as FoundationElement, _ as __decorate, a as attr, 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 {
|
|
6
|
-
import './affix.js';
|
|
4
|
+
import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from './affix.js';
|
|
5
|
+
import { a as applyMixins } from './apply-mixins.js';
|
|
7
6
|
import { f as focusTemplateFactory } from './focus2.js';
|
|
8
|
-
import './form-elements.js';
|
|
9
|
-
import { w as when } from './when.js';
|
|
10
7
|
import { c as classNames } from './class-names.js';
|
|
11
8
|
|
|
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
|
-
|
|
26
9
|
/**
|
|
27
|
-
* A
|
|
28
|
-
* Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
|
|
10
|
+
* A Tab Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
|
|
29
11
|
*
|
|
30
|
-
* @slot - The
|
|
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
|
|
12
|
+
* @slot - The default slot for the tab content
|
|
39
13
|
*
|
|
40
14
|
* @public
|
|
41
15
|
*/
|
|
42
|
-
class
|
|
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
|
-
}
|
|
16
|
+
class Tab$1 extends FoundationElement {
|
|
94
17
|
}
|
|
95
18
|
__decorate([
|
|
96
|
-
attr({
|
|
97
|
-
],
|
|
98
|
-
__decorate([
|
|
99
|
-
observable
|
|
100
|
-
], Switch$1.prototype, "defaultSlottedNodes", void 0);
|
|
19
|
+
attr({ mode: "boolean" })
|
|
20
|
+
], Tab$1.prototype, "disabled", void 0);
|
|
101
21
|
|
|
102
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
22
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 25 Jul 2023 07:38:24 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}";
|
|
103
23
|
|
|
104
|
-
class
|
|
105
|
-
|
|
106
|
-
|
|
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);
|
|
107
41
|
|
|
108
|
-
let
|
|
109
|
-
_t
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
42
|
+
let _ = t => t,
|
|
43
|
+
_t;
|
|
44
|
+
const getClasses = ({
|
|
45
|
+
connotation,
|
|
46
|
+
disabled,
|
|
47
|
+
ariaSelected,
|
|
48
|
+
iconTrailing,
|
|
49
|
+
shape
|
|
50
|
+
}) => classNames('base', [`connotation-${connotation}`, Boolean(connotation) && ariaSelected === 'true'], [`shape-${shape}`, Boolean(shape)], ['disabled', Boolean(disabled)], ['selected', ariaSelected === 'true'], ['icon-trailing', iconTrailing]);
|
|
51
|
+
function TabTemplate(context) {
|
|
52
|
+
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
113
53
|
const focusTemplate = focusTemplateFactory(context);
|
|
114
|
-
return html(_t || (_t =
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
aria-readonly="${0}"
|
|
121
|
-
tabindex="${0}"
|
|
122
|
-
@keypress="${0}"
|
|
123
|
-
@click="${0}"
|
|
124
|
-
>
|
|
125
|
-
<div class="switch">
|
|
126
|
-
<span class="checked-indicator"></span>
|
|
127
|
-
${0}
|
|
128
|
-
</div>
|
|
129
|
-
${0}
|
|
54
|
+
return html(_t || (_t = _`
|
|
55
|
+
<template slot="tab" role="tab" aria-disabled="${0}" aria-selected="${0}">
|
|
56
|
+
<div class="${0}" >
|
|
57
|
+
${0}
|
|
58
|
+
${0}
|
|
59
|
+
${0}
|
|
130
60
|
</div>
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
</div>`), x => x.label)));
|
|
134
|
-
};
|
|
61
|
+
</template>`), x => x.disabled, x => x.ariaSelected, getClasses, () => focusTemplate, x => affixIconTemplate(x.icon), x => x.label);
|
|
62
|
+
}
|
|
135
63
|
|
|
136
|
-
const
|
|
137
|
-
baseName: '
|
|
138
|
-
template:
|
|
139
|
-
styles: css_248z
|
|
140
|
-
shadowOptions: {
|
|
141
|
-
delegatesFocus: true
|
|
142
|
-
}
|
|
64
|
+
const tabDefinition = Tab.compose({
|
|
65
|
+
baseName: 'tab',
|
|
66
|
+
template: TabTemplate,
|
|
67
|
+
styles: css_248z
|
|
143
68
|
});
|
|
144
|
-
const
|
|
145
|
-
const
|
|
69
|
+
const tabRegistries = [tabDefinition(), ...iconRegistries, ...focusRegistries];
|
|
70
|
+
const registerTab = registerFactory(tabRegistries);
|
|
146
71
|
|
|
147
|
-
export {
|
|
72
|
+
export { tabDefinition as a, registerTab as r, tabRegistries as t };
|
package/shared/definition45.js
CHANGED
|
@@ -1,72 +1,32 @@
|
|
|
1
|
-
import { F as FoundationElement,
|
|
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';
|
|
1
|
+
import { F as FoundationElement, h as html, r as registerFactory } from './index.js';
|
|
8
2
|
|
|
9
3
|
/**
|
|
10
|
-
* A
|
|
4
|
+
* A TabPanel Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
|
|
11
5
|
*
|
|
12
|
-
* @slot - The default slot for the
|
|
6
|
+
* @slot - The default slot for the tabpanel content
|
|
13
7
|
*
|
|
14
8
|
* @public
|
|
15
9
|
*/
|
|
16
|
-
class
|
|
10
|
+
class TabPanel$1 extends FoundationElement {
|
|
17
11
|
}
|
|
18
|
-
__decorate([
|
|
19
|
-
attr({ mode: "boolean" })
|
|
20
|
-
], Tab$1.prototype, "disabled", void 0);
|
|
21
12
|
|
|
22
|
-
|
|
23
|
-
|
|
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);
|
|
13
|
+
class TabPanel extends TabPanel$1 {}
|
|
41
14
|
|
|
42
15
|
let _ = t => t,
|
|
43
16
|
_t;
|
|
44
|
-
|
|
45
|
-
connotation,
|
|
46
|
-
disabled,
|
|
47
|
-
ariaSelected,
|
|
48
|
-
iconTrailing,
|
|
49
|
-
shape
|
|
50
|
-
}) => classNames('base', [`connotation-${connotation}`, Boolean(connotation) && ariaSelected === 'true'], [`shape-${shape}`, Boolean(shape)], ['disabled', Boolean(disabled)], ['selected', ariaSelected === 'true'], ['icon-trailing', iconTrailing]);
|
|
51
|
-
function TabTemplate(context) {
|
|
52
|
-
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
53
|
-
const focusTemplate = focusTemplateFactory(context);
|
|
17
|
+
function TabPanelTemplate() {
|
|
54
18
|
return html(_t || (_t = _`
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
${0}
|
|
60
|
-
</div>
|
|
61
|
-
</template>`), x => x.disabled, x => x.ariaSelected, getClasses, () => focusTemplate, x => affixIconTemplate(x.icon), x => x.label);
|
|
19
|
+
<template slot="tabpanel" role="tabpanel">
|
|
20
|
+
<slot></slot>
|
|
21
|
+
</template>
|
|
22
|
+
`));
|
|
62
23
|
}
|
|
63
24
|
|
|
64
|
-
const
|
|
65
|
-
baseName: 'tab',
|
|
66
|
-
template:
|
|
67
|
-
styles: css_248z
|
|
25
|
+
const tabPanelDefinition = TabPanel.compose({
|
|
26
|
+
baseName: 'tab-panel',
|
|
27
|
+
template: TabPanelTemplate
|
|
68
28
|
});
|
|
69
|
-
const
|
|
70
|
-
const
|
|
29
|
+
const tabPanelRegistries = [tabPanelDefinition()];
|
|
30
|
+
const registerTabPanel = registerFactory(tabPanelRegistries);
|
|
71
31
|
|
|
72
|
-
export {
|
|
32
|
+
export { tabPanelDefinition as a, registerTabPanel as r, tabPanelRegistries as t };
|