@getflip/swirl-components 0.522.0 → 0.523.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/components.json +55 -8
- package/dist/cjs/index-DfC2lanl.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-tab-bar.cjs.entry.js +3 -3
- package/dist/cjs/swirl-tab.cjs.entry.js +1 -1
- package/dist/cjs/swirl-tabs.cjs.entry.js +4 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/swirl-tab/swirl-tab.js +25 -1
- package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.css +10 -0
- package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.js +2 -2
- package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.stories.js +27 -22
- package/dist/collection/components/swirl-tabs/swirl-tabs.js +4 -1
- package/dist/collection/components/swirl-tabs/swirl-tabs.stories.js +19 -0
- package/dist/components/swirl-tab-bar2.js +1 -1
- package/dist/components/swirl-tab.js +1 -1
- package/dist/components/swirl-tabs.js +1 -1
- package/dist/esm/index-BdGaOt5L.js +4 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-tab-bar.entry.js +3 -3
- package/dist/esm/swirl-tab.entry.js +1 -1
- package/dist/esm/swirl-tabs.entry.js +4 -1
- package/dist/swirl-components/p-17c0ccd3.entry.js +1 -0
- package/dist/swirl-components/{p-191c2f65.entry.js → p-1e6aa1a4.entry.js} +1 -1
- package/dist/swirl-components/p-b771be58.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-tab/swirl-tab.d.ts +2 -0
- package/dist/types/components/swirl-tab-bar/swirl-tab-bar.d.ts +11 -0
- package/dist/types/components/swirl-tabs/swirl-tabs.stories.d.ts +1 -0
- package/dist/types/components.d.ts +4 -2
- package/package.json +1 -1
- package/dist/swirl-components/p-a234d1c3.entry.js +0 -1
- package/dist/swirl-components/p-b7fa3ead.entry.js +0 -1
|
@@ -4,7 +4,7 @@ var index = require('./index-DfC2lanl.js');
|
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
var utils = require('./utils-UfZG-xPD.js');
|
|
6
6
|
|
|
7
|
-
const swirlTabBarCss = () => `.sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;overflow-x:auto;width:100%;justify-content:flex-start;scrollbar-width:none}.tab-bar.tab-bar--variant-default.sc-swirl-tab-bar{border-bottom:var(--swirl-tab-bar-border-width) solid var(--s-border-default)}.tab-bar.tab-bar--variant-pill.sc-swirl-tab-bar{gap:var(--s-space-8)}.tab-bar--wrap.sc-swirl-tab-bar{flex-wrap:wrap}.tab-bar--justify-evenly.sc-swirl-tab-bar>*.sc-swirl-tab-bar,.tab-bar--justify-evenly.sc-swirl-tab-bar .tab-bar__tab.sc-swirl-tab-bar{flex:1}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:flex;min-width:-moz-fit-content;min-width:fit-content;margin:0;justify-content:center;align-items:center;border:none;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);cursor:pointer}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar{padding:var(--s-space-4) var(--s-space-8);color:var(--s-interactive-neutral-default);background-color:transparent}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:"";transform:translateX(-50%);pointer-events:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:"";transform:translateX(-50%);pointer-events:none}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar{padding:var(--s-space-8) var(--s-space-16);border-radius:var(--s-border-radius-full-round);color:var(--s-text-default);background:var(--s-action-neutral-default);gap:var(--s-space-8)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:hover{background:var(--s-action-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:active{background:var(--s-action-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-on-action-primary);background:var(--s-action-primary-default)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-on-action-primary)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{padding:calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-icon.sc-swirl-tab-bar{display:inline-flex}.tab-bar__tab-label.sc-swirl-tab-bar{display:inline-flex;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;gap:var(--s-space-4)}.tab-bar__tab-label.tab-bar__tab-label--variant-pill.sc-swirl-tab-bar{padding:0}.tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-normal)}`;
|
|
7
|
+
const swirlTabBarCss = () => `.sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;overflow-x:auto;width:100%;justify-content:flex-start;scrollbar-width:none}.tab-bar.tab-bar--variant-default.sc-swirl-tab-bar{border-bottom:var(--swirl-tab-bar-border-width) solid var(--s-border-default)}.tab-bar.tab-bar--variant-pill.sc-swirl-tab-bar{gap:var(--s-space-8)}.tab-bar--wrap.sc-swirl-tab-bar{flex-wrap:wrap}.tab-bar--justify-evenly.sc-swirl-tab-bar>*.sc-swirl-tab-bar,.tab-bar--justify-evenly.sc-swirl-tab-bar .tab-bar__tab.sc-swirl-tab-bar{flex:1}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:flex;min-width:-moz-fit-content;min-width:fit-content;margin:0;justify-content:center;align-items:center;border:none;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);cursor:pointer}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar{padding:var(--s-space-4) var(--s-space-8);color:var(--s-interactive-neutral-default);background-color:transparent}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:"";transform:translateX(-50%);pointer-events:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:"";transform:translateX(-50%);pointer-events:none}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar{padding:var(--s-space-8) var(--s-space-16);border-radius:var(--s-border-radius-full-round);color:var(--s-text-default);background:var(--s-action-neutral-default);gap:var(--s-space-8)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:hover{background:var(--s-action-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:active{background:var(--s-action-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-on-action-primary);background:var(--s-action-primary-default)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-on-action-primary)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-subdued)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar .tab-bar__tab-badge.sc-swirl-tab-bar{--swirl-badge-border-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{padding:calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-icon.sc-swirl-tab-bar{display:inline-flex}.tab-bar__tab-label.sc-swirl-tab-bar{display:inline-flex;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;gap:var(--s-space-4)}.tab-bar__tab-label.tab-bar__tab-label--variant-pill.sc-swirl-tab-bar{padding:0}.tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-normal)}.tab-bar__tab-badge.sc-swirl-tab-bar{padding-left:calc(var(--s-space-4) + var(--s-space-2))}`;
|
|
8
8
|
|
|
9
9
|
const SwirlTabBar = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -64,7 +64,7 @@ const SwirlTabBar = class {
|
|
|
64
64
|
? `var(--s-space-${this.paddingBlockStart})`
|
|
65
65
|
: undefined,
|
|
66
66
|
};
|
|
67
|
-
return (index.h(index.Host, { key: '
|
|
67
|
+
return (index.h(index.Host, { key: '51fed6a97827130f1204dc3c25f8536b039901f9' }, index.h("div", { key: 'ee9a9cb8c16d06fe70233e5462225edafbf49122', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
|
|
68
68
|
const className = index$1.classnames("tab-bar__tab", {
|
|
69
69
|
"tab-bar__tab--active": tab.active,
|
|
70
70
|
"tab-bar__tab--variant-pill": this.variant === "pill",
|
|
@@ -79,7 +79,7 @@ const SwirlTabBar = class {
|
|
|
79
79
|
? "true"
|
|
80
80
|
: "false", class: className, id: `tab-${tab.id}`, key: tab.tooltip ? undefined : tab.id,
|
|
81
81
|
// eslint-disable-next-line react/jsx-no-bind
|
|
82
|
-
onClick: () => this.activateTab.emit(tab.id), onFocus: this.onTabFocus, role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (index.h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), index.h("span", { class: labelClassName }, tab.label, tab.suffix && (index.h("span", { class: "tab-bar__tab-suffix" }, tab.suffix)))));
|
|
82
|
+
onClick: () => this.activateTab.emit(tab.id), onFocus: this.onTabFocus, role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (index.h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), index.h("span", { class: labelClassName }, tab.label, tab.suffix && (index.h("span", { class: "tab-bar__tab-suffix" }, tab.suffix)), tab.badge && (index.h("swirl-badge", { class: "tab-bar__tab-badge", intent: tab.badge.intent ?? "info", label: tab.badge.label, size: "xs", variant: "dot" })))));
|
|
83
83
|
return tab.tooltip ? (index.h("swirl-tooltip", { content: tab.tooltip, key: tab.id }, tabButton)) : (tabButton);
|
|
84
84
|
}))));
|
|
85
85
|
}
|
|
@@ -12,7 +12,7 @@ const SwirlTab = class {
|
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
14
|
const className = index$1.classnames("tab", { "tab--active": this.active });
|
|
15
|
-
return (index.h(index.Host, { key: '
|
|
15
|
+
return (index.h(index.Host, { key: '6708f1585aefc6ecd5d2d3eee159e358c7e47e16', "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1, class: className, style: { padding: `var(--s-space-${this.padding})` } }, index.h("slot", { key: 'adba089df5cd6c60a8387f1321159a09daeb7d23' })));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
SwirlTab.style = swirlTabCss();
|
|
@@ -68,9 +68,12 @@ const SwirlTabs = class {
|
|
|
68
68
|
const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);
|
|
69
69
|
this.activateTab(Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId);
|
|
70
70
|
}
|
|
71
|
+
// only runs on load and on activation
|
|
72
|
+
// a prop change at runtime is not picked up until the next tab click
|
|
71
73
|
updateTabBarTabs() {
|
|
72
74
|
this.tabBarTabs = this.tabs.map((tab) => ({
|
|
73
75
|
active: this.activeTab === tab.tabId,
|
|
76
|
+
badge: tab.badge,
|
|
74
77
|
icon: tab.icon,
|
|
75
78
|
id: tab.tabId,
|
|
76
79
|
label: tab.label,
|
|
@@ -78,7 +81,7 @@ const SwirlTabs = class {
|
|
|
78
81
|
}));
|
|
79
82
|
}
|
|
80
83
|
render() {
|
|
81
|
-
return (index.h(index.Host, { key: '
|
|
84
|
+
return (index.h(index.Host, { key: '4d7f710d18d9d1b58fc658dbf8e6922a46a19cb0' }, index.h("div", { key: 'ada4ac17bf87a77bf63b5459b8c7a20560913b59', class: "tabs" }, index.h("swirl-tab-bar", { key: '53f3aaaab6a55e2f907e6db2d94a11db3b1100fa', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), index.h("slot", { key: '524a105bd28721d506d0e6a067f1a054c272dc52' })));
|
|
82
85
|
}
|
|
83
86
|
get el() { return index.getElement(this); }
|
|
84
87
|
};
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
"components/swirl-spinner/swirl-spinner.js",
|
|
51
51
|
"components/swirl-status-indicator/swirl-status-indicator.js",
|
|
52
52
|
"components/swirl-switch/swirl-switch.js",
|
|
53
|
-
"components/swirl-tab/swirl-tab.js",
|
|
54
53
|
"components/swirl-tab-bar/swirl-tab-bar.js",
|
|
54
|
+
"components/swirl-tab/swirl-tab.js",
|
|
55
55
|
"components/swirl-table/swirl-table.js",
|
|
56
56
|
"components/swirl-table-column/swirl-table-column.js",
|
|
57
57
|
"components/swirl-tag/swirl-tag.js",
|
|
@@ -6,7 +6,7 @@ export class SwirlTab {
|
|
|
6
6
|
}
|
|
7
7
|
render() {
|
|
8
8
|
const className = classnames("tab", { "tab--active": this.active });
|
|
9
|
-
return (h(Host, { key: '
|
|
9
|
+
return (h(Host, { key: '6708f1585aefc6ecd5d2d3eee159e358c7e47e16', "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1, class: className, style: { padding: `var(--s-space-${this.padding})` } }, h("slot", { key: 'adba089df5cd6c60a8387f1321159a09daeb7d23' })));
|
|
10
10
|
}
|
|
11
11
|
static get is() { return "swirl-tab"; }
|
|
12
12
|
static get encapsulation() { return "shadow"; }
|
|
@@ -41,6 +41,30 @@ export class SwirlTab {
|
|
|
41
41
|
"reflect": false,
|
|
42
42
|
"attribute": "active"
|
|
43
43
|
},
|
|
44
|
+
"badge": {
|
|
45
|
+
"type": "unknown",
|
|
46
|
+
"mutable": false,
|
|
47
|
+
"complexType": {
|
|
48
|
+
"original": "SwirlTabBarTabBadge",
|
|
49
|
+
"resolved": "{ intent?: SwirlBadgeIntent; label: string; }",
|
|
50
|
+
"references": {
|
|
51
|
+
"SwirlTabBarTabBadge": {
|
|
52
|
+
"location": "import",
|
|
53
|
+
"path": "../swirl-tab-bar/swirl-tab-bar",
|
|
54
|
+
"id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarTabBadge",
|
|
55
|
+
"referenceLocation": "SwirlTabBarTabBadge"
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"required": false,
|
|
60
|
+
"optional": true,
|
|
61
|
+
"docs": {
|
|
62
|
+
"tags": [],
|
|
63
|
+
"text": ""
|
|
64
|
+
},
|
|
65
|
+
"getter": false,
|
|
66
|
+
"setter": false
|
|
67
|
+
},
|
|
44
68
|
"icon": {
|
|
45
69
|
"type": "string",
|
|
46
70
|
"mutable": false,
|
|
@@ -148,6 +148,12 @@
|
|
|
148
148
|
color: var(--s-text-subdued);
|
|
149
149
|
}
|
|
150
150
|
|
|
151
|
+
/* the badge sits inline on a pill, so it needs no border to separate it from its surroundings */
|
|
152
|
+
|
|
153
|
+
.tab-bar__tab.tab-bar__tab--variant-pill .tab-bar__tab-badge {
|
|
154
|
+
--swirl-badge-border-color: transparent;
|
|
155
|
+
}
|
|
156
|
+
|
|
151
157
|
@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
|
|
152
158
|
|
|
153
159
|
.tab-bar__tab {
|
|
@@ -177,3 +183,7 @@
|
|
|
177
183
|
color: var(--s-interactive-neutral-default);
|
|
178
184
|
font-weight: var(--s-font-weight-normal);
|
|
179
185
|
}
|
|
186
|
+
|
|
187
|
+
.tab-bar__tab-badge {
|
|
188
|
+
padding-left: calc(var(--s-space-4) + var(--s-space-2));
|
|
189
|
+
}
|
|
@@ -55,7 +55,7 @@ export class SwirlTabBar {
|
|
|
55
55
|
? `var(--s-space-${this.paddingBlockStart})`
|
|
56
56
|
: undefined,
|
|
57
57
|
};
|
|
58
|
-
return (h(Host, { key: '
|
|
58
|
+
return (h(Host, { key: '51fed6a97827130f1204dc3c25f8536b039901f9' }, h("div", { key: 'ee9a9cb8c16d06fe70233e5462225edafbf49122', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
|
|
59
59
|
const className = classnames("tab-bar__tab", {
|
|
60
60
|
"tab-bar__tab--active": tab.active,
|
|
61
61
|
"tab-bar__tab--variant-pill": this.variant === "pill",
|
|
@@ -70,7 +70,7 @@ export class SwirlTabBar {
|
|
|
70
70
|
? "true"
|
|
71
71
|
: "false", class: className, id: `tab-${tab.id}`, key: tab.tooltip ? undefined : tab.id,
|
|
72
72
|
// eslint-disable-next-line react/jsx-no-bind
|
|
73
|
-
onClick: () => this.activateTab.emit(tab.id), onFocus: this.onTabFocus, role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), h("span", { class: labelClassName }, tab.label, tab.suffix && (h("span", { class: "tab-bar__tab-suffix" }, tab.suffix)))));
|
|
73
|
+
onClick: () => this.activateTab.emit(tab.id), onFocus: this.onTabFocus, role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), h("span", { class: labelClassName }, tab.label, tab.suffix && (h("span", { class: "tab-bar__tab-suffix" }, tab.suffix)), tab.badge && (h("swirl-badge", { class: "tab-bar__tab-badge", intent: tab.badge.intent ?? "info", label: tab.badge.label, size: "xs", variant: "dot" })))));
|
|
74
74
|
return tab.tooltip ? (h("swirl-tooltip", { content: tab.tooltip, key: tab.id }, tabButton)) : (tabButton);
|
|
75
75
|
}))));
|
|
76
76
|
}
|
|
@@ -14,28 +14,33 @@ const Template = (args) => {
|
|
|
14
14
|
const element = generateStoryElement("swirl-tab-bar", args);
|
|
15
15
|
return element;
|
|
16
16
|
};
|
|
17
|
+
const tabs = [
|
|
18
|
+
{
|
|
19
|
+
active: false,
|
|
20
|
+
id: "tab1",
|
|
21
|
+
label: "A Tab",
|
|
22
|
+
suffix: "2",
|
|
23
|
+
tooltip: "With a tooltip",
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
active: true,
|
|
27
|
+
badge: {
|
|
28
|
+
intent: "info",
|
|
29
|
+
label: "Batches running",
|
|
30
|
+
},
|
|
31
|
+
icon: '<swirl-icon glyph="emoji-mood" size="20"></swirl-icon>',
|
|
32
|
+
id: "tab2",
|
|
33
|
+
label: "Another Tab",
|
|
34
|
+
suffix: "12",
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
active: false,
|
|
38
|
+
icon: '<swirl-icon glyph="emoji-satisfied" size="20"></swirl-icon>',
|
|
39
|
+
id: "tab3",
|
|
40
|
+
label: "Yet Another Tab",
|
|
41
|
+
},
|
|
42
|
+
];
|
|
17
43
|
export const SwirlTabBar = Template.bind({});
|
|
18
44
|
SwirlTabBar.args = {
|
|
19
|
-
tabs
|
|
20
|
-
{
|
|
21
|
-
active: false,
|
|
22
|
-
id: "tab1",
|
|
23
|
-
label: "A Tab",
|
|
24
|
-
suffix: "2",
|
|
25
|
-
tooltip: "With a tooltip",
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
active: true,
|
|
29
|
-
icon: '<swirl-icon glyph="emoji-mood" size="20"></swirl-icon>',
|
|
30
|
-
id: "tab2",
|
|
31
|
-
label: "Another Tab",
|
|
32
|
-
suffix: "12",
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
active: false,
|
|
36
|
-
icon: '<swirl-icon glyph="emoji-satisfied" size="20"></swirl-icon>',
|
|
37
|
-
id: "tab3",
|
|
38
|
-
label: "Yet Another Tab",
|
|
39
|
-
},
|
|
40
|
-
],
|
|
45
|
+
tabs,
|
|
41
46
|
};
|
|
@@ -61,9 +61,12 @@ export class SwirlTabs {
|
|
|
61
61
|
const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);
|
|
62
62
|
this.activateTab(Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId);
|
|
63
63
|
}
|
|
64
|
+
// only runs on load and on activation
|
|
65
|
+
// a prop change at runtime is not picked up until the next tab click
|
|
64
66
|
updateTabBarTabs() {
|
|
65
67
|
this.tabBarTabs = this.tabs.map((tab) => ({
|
|
66
68
|
active: this.activeTab === tab.tabId,
|
|
69
|
+
badge: tab.badge,
|
|
67
70
|
icon: tab.icon,
|
|
68
71
|
id: tab.tabId,
|
|
69
72
|
label: tab.label,
|
|
@@ -71,7 +74,7 @@ export class SwirlTabs {
|
|
|
71
74
|
}));
|
|
72
75
|
}
|
|
73
76
|
render() {
|
|
74
|
-
return (h(Host, { key: '
|
|
77
|
+
return (h(Host, { key: '4d7f710d18d9d1b58fc658dbf8e6922a46a19cb0' }, h("div", { key: 'ada4ac17bf87a77bf63b5459b8c7a20560913b59', class: "tabs" }, h("swirl-tab-bar", { key: '53f3aaaab6a55e2f907e6db2d94a11db3b1100fa', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: '524a105bd28721d506d0e6a067f1a054c272dc52' })));
|
|
75
78
|
}
|
|
76
79
|
static get is() { return "swirl-tabs"; }
|
|
77
80
|
static get encapsulation() { return "scoped"; }
|
|
@@ -24,3 +24,22 @@ SwirlTabs.args = {
|
|
|
24
24
|
initialTab: "tab-2",
|
|
25
25
|
label: "Tabs",
|
|
26
26
|
};
|
|
27
|
+
const StatusBadgesTemplate = (args) => {
|
|
28
|
+
const element = generateStoryElement("swirl-tabs", args);
|
|
29
|
+
element.innerHTML = `
|
|
30
|
+
<swirl-tab label="Users" tab-id="tab-1"><swirl-text>Users</swirl-text></swirl-tab>
|
|
31
|
+
<swirl-tab label="Invite code batches" tab-id="tab-2"><swirl-text>Invite code batches</swirl-text></swirl-tab>
|
|
32
|
+
<swirl-tab label="Groups" tab-id="tab-3"><swirl-text>Groups</swirl-text></swirl-tab>
|
|
33
|
+
`;
|
|
34
|
+
// badge is an object, so it has to be set as a property
|
|
35
|
+
element.querySelector("[tab-id='tab-2']").badge = {
|
|
36
|
+
intent: "info",
|
|
37
|
+
label: "Batches running",
|
|
38
|
+
};
|
|
39
|
+
return element;
|
|
40
|
+
};
|
|
41
|
+
export const StatusBadges = StatusBadgesTemplate.bind({});
|
|
42
|
+
StatusBadges.args = {
|
|
43
|
+
initialTab: "tab-1",
|
|
44
|
+
label: "Tabs",
|
|
45
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as a,HTMLElement as t,createEvent as r,h as b,Host as i,transformTag as s}from"@stencil/core/internal/client";import{c as e}from"./index2.js";import{o as l}from"./utils.js";import{d as n}from"./swirl-tooltip2.js";const
|
|
1
|
+
import{proxyCustomElement as a,HTMLElement as t,createEvent as r,h as b,Host as i,transformTag as s}from"@stencil/core/internal/client";import{c as e}from"./index2.js";import{o as l}from"./utils.js";import{d as n}from"./swirl-badge2.js";import{d as o}from"./swirl-tooltip2.js";import{d as c}from"./swirl-visually-hidden2.js";const d=a(class extends t{constructor(a){super(),!1!==a&&this.__registerHost(),this.activateNextTab=r(this,"activateNextTab",7),this.activatePreviousTab=r(this,"activatePreviousTab",7),this.activateTab=r(this,"activateTab",7),this.justify="start",this.tabs=[],this.variant="default",this.onKeyDown=a=>{"ArrowLeft"===a.code?(a.preventDefault(),this.focusAdjacentTab(!0),this.activatePreviousTab.emit()):"ArrowRight"===a.code&&(a.preventDefault(),this.focusAdjacentTab(!1),this.activateNextTab.emit())}}onTabFocus(a){a.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})}focusAdjacentTab(a){const t=this.getTabs(),r=t.findIndex((a=>"true"===a.ariaSelected));t[l(a?r-1:r+1,t.length)].focus()}getTabs(){return Array.from(this.el.querySelectorAll('[role="tab"]'))}render(){const a=e("tab-bar",`tab-bar--justify-${this.justify}`,{"tab-bar--variant-pill":"pill"===this.variant,"tab-bar--variant-default":"default"===this.variant,"tab-bar--wrap":this.wrap}),t={paddingInlineEnd:Boolean(this.paddingInlineEnd)?`var(--s-space-${this.paddingInlineEnd})`:void 0,paddingInlineStart:Boolean(this.paddingInlineStart)?`var(--s-space-${this.paddingInlineStart})`:void 0,paddingBlockEnd:Boolean(this.paddingBlockEnd)?`var(--s-space-${this.paddingBlockEnd})`:void 0,paddingBlockStart:Boolean(this.paddingBlockStart)?`var(--s-space-${this.paddingBlockStart})`:void 0};return b(i,{key:"51fed6a97827130f1204dc3c25f8536b039901f9"},b("div",{key:"ee9a9cb8c16d06fe70233e5462225edafbf49122","aria-label":this.label,class:a,onKeyDown:this.onKeyDown,role:this.disableTabSemantics?void 0:"tablist",style:t},this.tabs.map((a=>{const t=e("tab-bar__tab",{"tab-bar__tab--active":a.active,"tab-bar__tab--variant-pill":"pill"===this.variant,"tab-bar__tab--variant-default":"default"===this.variant}),r=e("tab-bar__tab-label",{"tab-bar__tab-label--variant-pill":"pill"===this.variant}),i=b("button",{"aria-controls":this.disableTabSemantics?void 0:a.id,"aria-selected":this.disableTabSemantics?void 0:a.active?"true":"false",class:t,id:`tab-${a.id}`,key:a.tooltip?void 0:a.id,onClick:()=>this.activateTab.emit(a.id),onFocus:this.onTabFocus,role:this.disableTabSemantics?void 0:"tab",tabIndex:this.disableTabSemantics?void 0:a.active?0:-1,type:"button"},a.icon&&b("span",{class:"tab-bar__tab-icon",innerHTML:a.icon}),b("span",{class:r},a.label,a.suffix&&b("span",{class:"tab-bar__tab-suffix"},a.suffix),a.badge&&b("swirl-badge",{class:"tab-bar__tab-badge",intent:a.badge.intent??"info",label:a.badge.label,size:"xs",variant:"dot"})));return a.tooltip?b("swirl-tooltip",{content:a.tooltip,key:a.id},i):i}))))}get el(){return this}static get style(){return'.sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;overflow-x:auto;width:100%;justify-content:flex-start;scrollbar-width:none}.tab-bar.tab-bar--variant-default.sc-swirl-tab-bar{border-bottom:var(--swirl-tab-bar-border-width) solid var(--s-border-default)}.tab-bar.tab-bar--variant-pill.sc-swirl-tab-bar{gap:var(--s-space-8)}.tab-bar--wrap.sc-swirl-tab-bar{flex-wrap:wrap}.tab-bar--justify-evenly.sc-swirl-tab-bar>*.sc-swirl-tab-bar,.tab-bar--justify-evenly.sc-swirl-tab-bar .tab-bar__tab.sc-swirl-tab-bar{flex:1}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:flex;min-width:-moz-fit-content;min-width:fit-content;margin:0;justify-content:center;align-items:center;border:none;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);cursor:pointer}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar{padding:var(--s-space-4) var(--s-space-8);color:var(--s-interactive-neutral-default);background-color:transparent}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:"";transform:translateX(-50%);pointer-events:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:"";transform:translateX(-50%);pointer-events:none}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar{padding:var(--s-space-8) var(--s-space-16);border-radius:var(--s-border-radius-full-round);color:var(--s-text-default);background:var(--s-action-neutral-default);gap:var(--s-space-8)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:hover{background:var(--s-action-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:active{background:var(--s-action-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-on-action-primary);background:var(--s-action-primary-default)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-on-action-primary)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-subdued)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar .tab-bar__tab-badge.sc-swirl-tab-bar{--swirl-badge-border-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{padding:calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-icon.sc-swirl-tab-bar{display:inline-flex}.tab-bar__tab-label.sc-swirl-tab-bar{display:inline-flex;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;gap:var(--s-space-4)}.tab-bar__tab-label.tab-bar__tab-label--variant-pill.sc-swirl-tab-bar{padding:0}.tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-normal)}.tab-bar__tab-badge.sc-swirl-tab-bar{padding-left:calc(var(--s-space-4) + var(--s-space-2))}'}},[2,"swirl-tab-bar",{disableTabSemantics:[4,"disable-tab-semantics"],label:[1],justify:[1],paddingBlockEnd:[1,"padding-block-end"],paddingBlockStart:[1,"padding-block-start"],paddingInlineEnd:[1,"padding-inline-end"],paddingInlineStart:[1,"padding-inline-start"],tabs:[16],variant:[1],wrap:[4]}]);function _(){"undefined"!=typeof customElements&&["swirl-tab-bar","swirl-badge","swirl-tooltip","swirl-visually-hidden"].forEach((a=>{switch(a){case"swirl-tab-bar":customElements.get(s(a))||customElements.define(s(a),d);break;case"swirl-badge":customElements.get(s(a))||n();break;case"swirl-tooltip":customElements.get(s(a))||o();break;case"swirl-visually-hidden":customElements.get(s(a))||c()}}))}export{d as S,_ as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as e,h as s,Host as
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as e,h as s,Host as a,transformTag as i}from"@stencil/core/internal/client";import{c as o}from"./index2.js";const d=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.padding="8"}render(){const t=o("tab",{"tab--active":this.active});return s(a,{key:"6708f1585aefc6ecd5d2d3eee159e358c7e47e16","aria-labelledby":"tab-"+this.tabId,id:this.tabId,role:"tabpanel",tabIndex:this.active?0:-1,class:t,style:{padding:`var(--s-space-${this.padding})`}},s("slot",{key:"adba089df5cd6c60a8387f1321159a09daeb7d23"}))}static get style(){return":host{display:none;width:100%}:host(.tab--active){display:block}:host *{box-sizing:border-box}"}},[257,"swirl-tab",{active:[4],badge:[16],icon:[1],label:[1],padding:[1],tabId:[1,"tab-id"],tooltip:[1]}]),n=d,c=function(){"undefined"!=typeof customElements&&["swirl-tab"].forEach((t=>{"swirl-tab"===t&&(customElements.get(i(t))||customElements.define(i(t),d))}))};export{n as SwirlTab,c as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as a,createEvent as i,h as s,Host as e,transformTag as r}from"@stencil/core/internal/client";import{o as b}from"./utils.js";import{d as n}from"./swirl-badge2.js";import{d as l}from"./swirl-tab-bar2.js";import{d}from"./swirl-tooltip2.js";import{d as h}from"./swirl-visually-hidden2.js";const o=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.tabActivated=i(this,"tabActivated",7),this.tabBarVariant="default",this.tabBarTabs=[],this.tabs=[],this.onActivateNextTab=()=>{this.activateNextTab()},this.onActivatePreviousTab=()=>{this.activatePreviousTab()},this.onActivateTab=t=>{this.activateTab(t.detail)}}componentWillLoad(){this.collectTabs(),this.updateTabBarTabs()}async activateTab(t){if(this.activeTab===t)return;this.activeTab=t,this.tabs.forEach((t=>t.active=!1));const a=this.tabs.find((a=>a.tabId===t));a&&(a.active=!0,this.tabActivated.emit(a),this.updateTabBarTabs())}activateNextTab(){const t=this.tabs.findIndex((t=>t.tabId===this.activeTab)),a=b(t+1,this.tabs.length);this.activateTab(this.tabs[a].tabId),requestAnimationFrame((()=>{this.el.querySelector(".tabs__tab--active")?.focus()}))}activatePreviousTab(){const t=this.tabs.findIndex((t=>t.tabId===this.activeTab)),a=b(t-1,this.tabs.length);this.activateTab(this.tabs[a].tabId),requestAnimationFrame((()=>{this.el.querySelector(".tabs__tab--active")?.focus()}))}collectTabs(){if(this.tabs=Array.from(this.el.querySelectorAll("swirl-tab")),0===this.tabs.length)return;const t=this.tabs.find((t=>t.tabId===this.initialTab));this.activateTab(t?t.tabId:this.tabs[0].tabId)}updateTabBarTabs(){this.tabBarTabs=this.tabs.map((t=>({active:this.activeTab===t.tabId,badge:t.badge,icon:t.icon,id:t.tabId,label:t.label,tooltip:t.tooltip})))}render(){return s(e,{key:"4d7f710d18d9d1b58fc658dbf8e6922a46a19cb0"},s("div",{key:"ada4ac17bf87a77bf63b5459b8c7a20560913b59",class:"tabs"},s("swirl-tab-bar",{key:"53f3aaaab6a55e2f907e6db2d94a11db3b1100fa",label:this.label,onActivateNextTab:this.onActivateNextTab,onActivatePreviousTab:this.onActivatePreviousTab,onActivateTab:this.onActivateTab,tabs:this.tabBarTabs,justify:this.justifyTabBar,paddingBlockEnd:this.tabBarPaddingBlockEnd,paddingBlockStart:this.tabBarPaddingBlockStart,paddingInlineEnd:this.tabBarPaddingInlineEnd,paddingInlineStart:this.tabBarPaddingInlineStart,variant:this.tabBarVariant})),s("slot",{key:"524a105bd28721d506d0e6a067f1a054c272dc52"}))}get el(){return this}static get style(){return".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}"}},[262,"swirl-tabs",{initialTab:[1,"initial-tab"],label:[1],justifyTabBar:[1,"justify-tab-bar"],tabBarPaddingBlockEnd:[1,"tab-bar-padding-block-end"],tabBarPaddingBlockStart:[1,"tab-bar-padding-block-start"],tabBarPaddingInlineEnd:[1,"tab-bar-padding-inline-end"],tabBarPaddingInlineStart:[1,"tab-bar-padding-inline-start"],tabBarVariant:[1,"tab-bar-variant"],activeTab:[32],tabBarTabs:[32],activateTab:[64]}]),c=o,m=function(){"undefined"!=typeof customElements&&["swirl-tabs","swirl-badge","swirl-tab-bar","swirl-tooltip","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-tabs":customElements.get(r(t))||customElements.define(r(t),o);break;case"swirl-badge":customElements.get(r(t))||n();break;case"swirl-tab-bar":customElements.get(r(t))||l();break;case"swirl-tooltip":customElements.get(r(t))||d();break;case"swirl-visually-hidden":customElements.get(r(t))||h()}}))};export{c as SwirlTabs,m as defineCustomElement}
|
|
@@ -1962,10 +1962,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
1962
1962
|
return import(
|
|
1963
1963
|
/* webpackMode: "lazy" */
|
|
1964
1964
|
'./swirl-video-thumbnail.entry.js').then(processMod, consoleError);
|
|
1965
|
-
case 'swirl-badge':
|
|
1966
|
-
return import(
|
|
1967
|
-
/* webpackMode: "lazy" */
|
|
1968
|
-
'./swirl-badge.entry.js').then(processMod, consoleError);
|
|
1969
1965
|
case 'swirl-icon-cloud-upload':
|
|
1970
1966
|
return import(
|
|
1971
1967
|
/* webpackMode: "lazy" */
|
|
@@ -2002,6 +1998,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
2002
1998
|
return import(
|
|
2003
1999
|
/* webpackMode: "lazy" */
|
|
2004
2000
|
'./swirl-option-list.entry.js').then(processMod, consoleError);
|
|
2001
|
+
case 'swirl-badge':
|
|
2002
|
+
return import(
|
|
2003
|
+
/* webpackMode: "lazy" */
|
|
2004
|
+
'./swirl-badge.entry.js').then(processMod, consoleError);
|
|
2005
2005
|
case 'swirl-box':
|
|
2006
2006
|
return import(
|
|
2007
2007
|
/* webpackMode: "lazy" */
|