@getflip/swirl-components 0.403.0 → 0.405.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 +200 -17
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-app-layout_5.cjs.entry.js +4 -2
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-icon-arrow-left_4.cjs.entry.js +1 -1
- package/dist/cjs/swirl-icon-error_3.cjs.entry.js +1 -1
- package/dist/cjs/swirl-search.cjs.entry.js +1 -1
- package/dist/cjs/swirl-shell-layout.cjs.entry.js +6 -6
- package/dist/cjs/swirl-shell-navigation-item.cjs.entry.js +2 -2
- package/dist/cjs/swirl-skeleton-box.cjs.entry.js +2 -2
- package/dist/cjs/swirl-skeleton-text.cjs.entry.js +1 -1
- package/dist/cjs/swirl-status-indicator.cjs.entry.js +1 -1
- package/dist/cjs/swirl-switch.cjs.entry.js +2 -2
- package/dist/cjs/swirl-tab-bar.cjs.entry.js +1 -1
- package/dist/cjs/swirl-tab.cjs.entry.js +1 -1
- package/dist/cjs/swirl-table-column.cjs.entry.js +1 -1
- package/dist/cjs/swirl-table.cjs.entry.js +1 -1
- package/dist/cjs/swirl-tag.cjs.entry.js +1 -1
- package/dist/cjs/swirl-text.cjs.entry.js +1 -1
- package/dist/cjs/swirl-toast-provider.cjs.entry.js +1 -1
- package/dist/cjs/swirl-toast.cjs.entry.js +1 -1
- package/dist/cjs/swirl-toggle-group.cjs.entry.js +1 -1
- package/dist/cjs/swirl-toolbar.cjs.entry.js +1 -1
- package/dist/cjs/swirl-tooltip.cjs.entry.js +42 -40
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css +0 -1
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js +48 -1
- package/dist/collection/components/swirl-search/swirl-search.js +1 -1
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.js +6 -6
- package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.js +2 -2
- package/dist/collection/components/swirl-skeleton-box/swirl-skeleton-box.js +2 -2
- package/dist/collection/components/swirl-skeleton-text/swirl-skeleton-text.js +1 -1
- package/dist/collection/components/swirl-spinner/swirl-spinner.js +1 -1
- package/dist/collection/components/swirl-status-indicator/swirl-status-indicator.js +1 -1
- package/dist/collection/components/swirl-switch/swirl-switch.js +2 -2
- package/dist/collection/components/swirl-tab/swirl-tab.js +1 -1
- package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.js +1 -1
- package/dist/collection/components/swirl-table/swirl-table.js +1 -1
- package/dist/collection/components/swirl-table-column/swirl-table-column.js +1 -1
- package/dist/collection/components/swirl-tag/swirl-tag.js +1 -1
- package/dist/collection/components/swirl-text/swirl-text.js +1 -1
- package/dist/collection/components/swirl-thumbnail/swirl-thumbnail.js +1 -1
- package/dist/collection/components/swirl-toast/swirl-toast.js +1 -1
- package/dist/collection/components/swirl-toast-provider/swirl-toast-provider.js +1 -1
- package/dist/collection/components/swirl-toggle-group/swirl-toggle-group.js +1 -1
- package/dist/collection/components/swirl-toolbar/swirl-toolbar.js +1 -1
- package/dist/collection/components/swirl-tooltip/swirl-tooltip.css +3 -4
- package/dist/collection/components/swirl-tooltip/swirl-tooltip.js +124 -50
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/file-manager.js +64 -58
- package/dist/components/swirl-resource-list-item2.js +20 -10
- package/dist/components/swirl-search.js +1 -1
- package/dist/components/swirl-shell-layout.js +6 -6
- package/dist/components/swirl-shell-navigation-item.js +2 -2
- package/dist/components/swirl-skeleton-box2.js +2 -2
- package/dist/components/swirl-skeleton-text.js +1 -1
- package/dist/components/swirl-spinner2.js +1 -1
- package/dist/components/swirl-status-indicator.js +1 -1
- package/dist/components/swirl-switch.js +2 -2
- package/dist/components/swirl-tab-bar2.js +1 -1
- package/dist/components/swirl-tab.js +1 -1
- package/dist/components/swirl-table-column.js +1 -1
- package/dist/components/swirl-table.js +1 -1
- package/dist/components/swirl-tag2.js +1 -1
- package/dist/components/swirl-text2.js +1 -1
- package/dist/components/swirl-thumbnail2.js +1 -1
- package/dist/components/swirl-toast-provider.js +1 -1
- package/dist/components/swirl-toast2.js +1 -1
- package/dist/components/swirl-toggle-group.js +1 -1
- package/dist/components/swirl-toolbar.js +1 -1
- package/dist/components/swirl-tooltip2.js +47 -43
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-app-layout_5.entry.js +4 -2
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-icon-arrow-left_4.entry.js +1 -1
- package/dist/esm/swirl-icon-error_3.entry.js +1 -1
- package/dist/esm/swirl-search.entry.js +1 -1
- package/dist/esm/swirl-shell-layout.entry.js +6 -6
- package/dist/esm/swirl-shell-navigation-item.entry.js +2 -2
- package/dist/esm/swirl-skeleton-box.entry.js +2 -2
- package/dist/esm/swirl-skeleton-text.entry.js +1 -1
- package/dist/esm/swirl-status-indicator.entry.js +1 -1
- package/dist/esm/swirl-switch.entry.js +2 -2
- package/dist/esm/swirl-tab-bar.entry.js +1 -1
- package/dist/esm/swirl-tab.entry.js +1 -1
- package/dist/esm/swirl-table-column.entry.js +1 -1
- package/dist/esm/swirl-table.entry.js +1 -1
- package/dist/esm/swirl-tag.entry.js +1 -1
- package/dist/esm/swirl-text.entry.js +1 -1
- package/dist/esm/swirl-toast-provider.entry.js +1 -1
- package/dist/esm/swirl-toast.entry.js +1 -1
- package/dist/esm/swirl-toggle-group.entry.js +1 -1
- package/dist/esm/swirl-toolbar.entry.js +1 -1
- package/dist/esm/swirl-tooltip.entry.js +43 -41
- package/dist/swirl-components/{p-25a0bc6f.entry.js → p-0d86713d.entry.js} +1 -1
- package/dist/swirl-components/{p-93bb3365.entry.js → p-251853c7.entry.js} +2 -2
- package/dist/swirl-components/{p-b23edf69.entry.js → p-2dd48f2d.entry.js} +1 -1
- package/dist/swirl-components/{p-046c85df.entry.js → p-2fbbff16.entry.js} +1 -1
- package/dist/swirl-components/p-31157c43.entry.js +1 -0
- package/dist/swirl-components/{p-b98cc8ee.entry.js → p-32205cb6.entry.js} +1 -1
- package/dist/swirl-components/{p-00b0bcdf.entry.js → p-4fe92179.entry.js} +1 -1
- package/dist/swirl-components/{p-362cf5cd.entry.js → p-525eccb7.entry.js} +1 -1
- package/dist/swirl-components/{p-66f57e69.entry.js → p-6058e144.entry.js} +1 -1
- package/dist/swirl-components/{p-900b7395.entry.js → p-61f63eb1.entry.js} +1 -1
- package/dist/swirl-components/p-6294b4b8.entry.js +1 -0
- package/dist/swirl-components/{p-68f1fc93.entry.js → p-8e15adb5.entry.js} +1 -1
- package/dist/swirl-components/{p-25937c0c.entry.js → p-9116eac5.entry.js} +1 -1
- package/dist/swirl-components/{p-38205c0f.entry.js → p-91d81ff7.entry.js} +1 -1
- package/dist/swirl-components/{p-e79a2b2f.entry.js → p-b56f08dd.entry.js} +1 -1
- package/dist/swirl-components/{p-55342fef.entry.js → p-bb3bf811.entry.js} +1 -1
- package/dist/swirl-components/{p-62a94658.entry.js → p-d8201d5b.entry.js} +1 -1
- package/dist/swirl-components/{p-a3709d0e.entry.js → p-d82c10a6.entry.js} +1 -1
- package/dist/swirl-components/{p-5067665a.entry.js → p-e24e9424.entry.js} +1 -1
- package/dist/swirl-components/{p-f4cd2bc8.entry.js → p-eccc6946.entry.js} +1 -1
- package/dist/swirl-components/{p-db2de234.entry.js → p-f49848d1.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-resource-list-item/swirl-resource-list-item.d.ts +3 -0
- package/dist/types/components/swirl-tooltip/swirl-tooltip.d.ts +8 -9
- package/dist/types/components.d.ts +30 -10
- package/package.json +1 -1
- package/vscode-data.json +36 -2
- package/dist/swirl-components/p-da93355a.entry.js +0 -1
- package/dist/swirl-components/p-fef8e82f.entry.js +0 -1
|
@@ -169,24 +169,24 @@ const SwirlShellLayout = class {
|
|
|
169
169
|
"shell-layout--mobile-navigation-active": this.mobileNavigationActive,
|
|
170
170
|
"shell-layout--navigation-collapsed": mainNavCollapsed,
|
|
171
171
|
});
|
|
172
|
-
return (index.h(index.Host, { key: '
|
|
172
|
+
return (index.h(index.Host, { key: 'ba71850ab25187477de0fd280333491e17aa507e' }, index.h("div", { key: '1783f51de5c40b6b58a8c351c12259dcf360eb8b', class: className }, index.h("header", { key: '60e343ccfcab61ac22310c7cb49a27cf545d5bd2', class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { key: 'add3019d8df87297e691ceadd0e9a608207a4c02', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { key: '8aeeebda57bcf6b99806896d3e77a29c577ef64b', class: "shell-layout__header-left" }, index.h("swirl-tooltip", { key: '8c76fce6027707fc32c50d2628a82954fc9b948c', content: this.navigationCollapsed
|
|
173
173
|
? this.expandNavigationButtonLabel
|
|
174
|
-
: this.collapseNavigationButtonLabel, delay: 100, position: "right" }, index.h("button", { key: '
|
|
174
|
+
: this.collapseNavigationButtonLabel, delay: 100, position: "right" }, index.h("button", { key: 'ac3db57bb52dd17e08e429e6a322c854367bcc63', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (index.h("swirl-icon-dock-left-expand", { size: 20 })) : (index.h("swirl-icon-dock-left-collapse", { size: 20 })), index.h("swirl-visually-hidden", { key: '74a9b9f0f625c3cf1ecd4d54d6da9e7820e4fe79' }, this.navigationCollapsed
|
|
175
175
|
? this.expandNavigationButtonLabel
|
|
176
|
-
: this.collapseNavigationButtonLabel))), index.h("a", { key: '
|
|
176
|
+
: this.collapseNavigationButtonLabel))), index.h("a", { key: '3e79631fa44f47145c3d04904fd82d8c1123a5de', class: "shell-layout__header-tool", href: "javascript:history.back()" }, index.h("swirl-icon-arrow-back", { key: '2344d7fb3dd96d2324cc722201994441d9681554', size: 20 }), index.h("swirl-visually-hidden", { key: '57f42760e017b7564aef0a09c2cce29623bbb238' }, this.browserBackButtonLabel)), index.h("a", { key: '8d82f609f9d21ba4aabdc6f6984ef865ca13482f', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, index.h("swirl-icon-arrow-forward", { key: '877244452295b3bc41f51393bc56660287e5f394', size: 20 }), index.h("swirl-visually-hidden", { key: '55053998bd6f93f168b13de4d91b8771f380db21' }, this.browserForwardButtonLabel)), index.h("slot", { key: 'b51a7edc15aa6fb8b86474d0f7a94f0da4b9dc66', name: "left-header-tools" })), index.h("div", { key: 'e3be12dfb40ad48280f5ce919cbbb03126a9b136', class: "shell-layout__logo" }, index.h("slot", { key: 'd6292d958c06e33b25f5b848ef1f305560b346a6', name: "logo" })), index.h("div", { key: '432770ab91b3fb0d6512632ca7272cc02220f93f', class: "shell-layout__header-right" }, index.h("slot", { key: 'ffe6e81aacc341b6617ead1191b5172779f0e6bb', name: "right-header-tools" }), index.h("slot", { key: '45aa7fa1d83cbc7cd25a3479247d62ba14d39839', name: "avatar" }))), index.h("div", { key: 'c11e952da53499494f794e1439519862580c28cf', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), index.h("nav", { key: 'e718116e58c0c9b9875d16f7b340f7b10284c407', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, index.h("div", { key: '9461acc9b41bebd9ab0d5a8cf2535babb18e3ec0', class: "shell-layout__mobile-header" }, index.h("slot", { key: 'bd90c25a4f27085037853fd96df9c04167d31413', name: "mobile-logo" }), index.h("div", { key: 'affad63e0ae66b9810479ff1472101bc71b1b745', class: "shell-layout__mobile-header-tools" }, index.h("slot", { key: '4cac99bc568ff6d345c3d8c8921cadd38e054294', name: "mobile-header-tools" }), index.h("button", { key: 'b6e53b7a8e5b0be7c4bc81626fced0a0b22ac807', class: "shell-layout__header-tool", type: "button" }, index.h("swirl-icon-double-arrow-left", { key: '52fe0309bc2ff3c988c406dcbd34ea505e602ef3', size: 20 }), index.h("swirl-visually-hidden", { key: '7425e4993d3c11609673d5444f197b4cce23b0b0' }, this.hideMobileNavigationButtonLabel)))), index.h("div", { key: '76e3108a837e780f5ba7c115d9ab9c654cee2583', class: "shell-layout__nav-body" }, index.h("swirl-visually-hidden", { key: '93a613134cf84890462f030007f8712f67e896ce' }, index.h("span", { key: '8abd0fe2b0b7dab953ff12fb4d6b23129ffee71e', id: "main-navigation-label" }, this.navigationLabel)), index.h("slot", { key: '493535666ed3af1401c90142654362abb4783a05', name: "nav", onSlotchange: this.collectNavItems }), index.h("div", { key: '70799718bc984b00f421f3dcbee1e46d131fd439', class: "shell-layout__secondary-nav" }, index.h("swirl-separator", { key: '0a956f25ae179002f308aa8a0e1278b18fbbd26e', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (index.h("swirl-box", { key: 'ed807b244604feb205503ca6951240c556f2ff99', paddingBlockEnd: "16" }, index.h("swirl-stack", { key: '90d40a649043b463531d6614e0ba4dfd6d675006', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, index.h("swirl-button", { key: 'dfdbd0a375bf32cf06fde7eee4cf9a64640d78ca', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
|
|
177
177
|
? "<swirl-icon-expand-more></swirl-icon-expand-more>"
|
|
178
178
|
: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
|
|
179
179
|
? this.secondaryNavExpandLabel
|
|
180
|
-
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (index.h("swirl-button", { key: '
|
|
180
|
+
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (index.h("swirl-button", { key: '55467b2ec7f96372bedaba657b068bf2b044bd4d', icon: this.secondaryNavView === "grid"
|
|
181
181
|
? "<swirl-icon-menu></swirl-icon-menu>"
|
|
182
182
|
: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
|
|
183
183
|
? this.gridNavLayoutToggleLabel
|
|
184
|
-
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), index.h("div", { key: '
|
|
184
|
+
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), index.h("div", { key: '38f99681433035f63b2fcc9185d7e6b1888f4bb4', class: {
|
|
185
185
|
[`shell-layout__secondary-nav-items--${this.secondaryNavGridLayoutVariant}`]: true,
|
|
186
186
|
"shell-layout__secondary-nav-items": true,
|
|
187
187
|
"shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
|
|
188
188
|
this.secondaryNavView === "grid",
|
|
189
|
-
} }, index.h("slot", { key: '
|
|
189
|
+
} }, index.h("slot", { key: '8d49eb0021897e49b9271c5ead87cc67befe0fdc', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), index.h("main", { key: '5e3c5fcff583838c418f4a6989b7e10b63831a4f', class: "shell-layout__main", id: "main-content" }, index.h("slot", { key: '688823dcc10d0b29c9a08e014ad8769b8ac22f61' })))));
|
|
190
190
|
}
|
|
191
191
|
get el() { return index.getElement(this); }
|
|
192
192
|
static get watchers() { return {
|
|
@@ -64,9 +64,9 @@ const SwirlShellNavigationItem = class {
|
|
|
64
64
|
const tooltipContent = this.description
|
|
65
65
|
? `${this.label} ${this.description}`
|
|
66
66
|
: this.label;
|
|
67
|
-
return (index.h(index.Host, { key: '
|
|
67
|
+
return (index.h(index.Host, { key: '449f8152f3e43b5286253b3cad88b97e7e7511fa' }, index.h("swirl-tooltip", { key: 'c38fd294886949488ebb68e44243dedf4b9353cb', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right", positioning: "fixed" }, index.h(Tag, { key: 'b109c272afaa8d81406c77f9a383eb0265ba0abe', class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button", title: !this.hideLabel ? this.label : undefined }, index.h("span", { key: 'e798c1c7fd44a3f60969649f377dc569ef790d14', class: "shell-navigation-item__icon" }, index.h("slot", { key: '74253d57363c4ab083e1df01bcc8ff3a39dc875b', name: "icon" })), !this.hideLabel ? (this.variant !== "default" ? (index.h("span", { class: labelClassNames }, this.label)) : (index.h("div", { class: "shell-navigation-item__text-wrapper" }, index.h("span", { class: labelClassNames }, this.label), this.description && (index.h("span", { class: "shell-navigation-item__description" }, this.description))))) : (index.h("swirl-visually-hidden", null, index.h("span", { class: labelClassNames }, this.label))), hasBadge && (index.h("span", { key: '314a39b2198bc28f55ee94a14eec540ac465924a', class: "shell-navigation-item__badge-wrapper" }, index.h("swirl-badge", { key: '67e82dd1cf4e5097fb8572aefba5c6c43808a0f7', "aria-label": this.badgeLabel, class: index$1.classnames("shell-navigation-item__badge", {
|
|
68
68
|
"shell-navigation-item__badge--dot": this.badgeLabel === "",
|
|
69
|
-
}), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (index.h("swirl-tag", { key: '
|
|
69
|
+
}), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (index.h("swirl-tag", { key: 'e4c5c0f2efa1237f658c3a0378046e5c16188228', class: "shell-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "s", variant: "strong" })), showIsNewBadge && (index.h("swirl-badge", { key: '21aac8cdecddb54b7c654d119c5a07eeadf5d216', class: "shell-navigation-item__is-new-badge", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "xs", variant: "dot" }))))));
|
|
70
70
|
}
|
|
71
71
|
get el() { return index.getElement(this); }
|
|
72
72
|
};
|
|
@@ -13,11 +13,11 @@ const SwirlSkeletonBox = class {
|
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
15
|
const className = index$1.classnames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
|
|
16
|
-
return (index.h(index.Host, { key: '
|
|
16
|
+
return (index.h(index.Host, { key: '0766d24e9c6dd8b47f0cde12acc961798539a663', style: {
|
|
17
17
|
width: !Boolean(this.width) && !Boolean(this.aspectRatio)
|
|
18
18
|
? "100%"
|
|
19
19
|
: undefined,
|
|
20
|
-
} }, index.h("div", { key: '
|
|
20
|
+
} }, index.h("div", { key: '78ef731b5c403dfe74d3034ac8bcef63e0bac16c', class: className, style: {
|
|
21
21
|
aspectRatio: this.aspectRatio,
|
|
22
22
|
borderRadius: this.borderRadius !== "pill" && this.borderRadius !== "none"
|
|
23
23
|
? `var(--s-border-radius-${this.borderRadius})`
|
|
@@ -15,7 +15,7 @@ const SwirlSkeletonText = class {
|
|
|
15
15
|
render() {
|
|
16
16
|
const className = index$1.classnames("skeleton-text", `skeleton-text--size-${this.size}`, { "skeleton-text--static": !this.animated });
|
|
17
17
|
const lineClassName = index$1.classnames("skeleton-text__line", `skeleton-text__line--size-${this.size}`);
|
|
18
|
-
return (index.h(index.Host, { key: '
|
|
18
|
+
return (index.h(index.Host, { key: '77301b4779d053d7485e3fc056093c8aca75d56c' }, index.h("div", { key: 'd48fb445adb540f5fcc2a3c0fcfe64c263ef2be9', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index$1) => (index.h("div", { class: lineClassName, key: index$1, part: lineClassName }))))));
|
|
19
19
|
}
|
|
20
20
|
};
|
|
21
21
|
SwirlSkeletonText.style = swirlSkeletonTextCss;
|
|
@@ -11,7 +11,7 @@ const SwirlStatusIndicator = class {
|
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
13
|
const className = index$1.classnames("status-indicator", `status-indicator--intent-${this.intent}`);
|
|
14
|
-
return (index.h(index.Host, { key: '
|
|
14
|
+
return (index.h(index.Host, { key: '62f371ab1f733071a33215f1b2d618f352932906' }, index.h("div", { key: 'de36fa200de899dfa926b58506ebfe498095d65b', class: className }, index.h("span", { key: '70097360cd5d8f107768409986891c0e4759c768', class: "status-indicator__dot" }), index.h("span", { key: 'bb9a68874c9ea67161d73291315974c449688723', class: "status-indicator__label" }, this.label))));
|
|
15
15
|
}
|
|
16
16
|
};
|
|
17
17
|
SwirlStatusIndicator.style = swirlStatusIndicatorCss;
|
|
@@ -33,9 +33,9 @@ const SwirlSwitch = class {
|
|
|
33
33
|
"switch--disabled": this.disabled,
|
|
34
34
|
"switch--hide-content": this.hideLabel && (!this.description || this.hideDescription),
|
|
35
35
|
});
|
|
36
|
-
return (index.h(index.Host, { key: '
|
|
36
|
+
return (index.h(index.Host, { key: '50b3357b11531b7b54760da2a757c5d20c2456a7' }, index.h("label", { key: '2fb84e079c1e250042827d4b727ede8fb1d8dfbf', class: className, htmlFor: this.inputId }, index.h("span", { key: '272a48201fab35cdf5e9e5e2048369a864403b34', class: "switch__control" }, index.h("swirl-visually-hidden", { key: '66e44c3a9b42cd634cf87e399b37436c9c250fa6' }, index.h("input", { key: 'ae147b742a03936b5cb7e3337a9ad8ace135b6f7', "aria-checked": ariaCheckedLabel, "aria-label": !this.hideLabel && this.swirlAriaLabel
|
|
37
37
|
? this.swirlAriaLabel
|
|
38
|
-
: undefined, checked: on, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), role: "switch", type: "checkbox", value: this.value })), index.h("span", { key: '
|
|
38
|
+
: undefined, checked: on, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), role: "switch", type: "checkbox", value: this.value })), index.h("span", { key: '0e8bc773fa78d82f17e84b43d59d804246879619', "aria-hidden": "true", class: "switch__thumb" })), index.h("swirl-stack", { key: 'd9bec995417f915c3219ed3ff4d4eaa10d23f4b9', class: "switch__content" }, this.label && !this.hideLabel && (index.h("span", { key: 'bcb1123bdf250a15454fbed0cc0fcd3b484887bd', class: "switch__label" }, this.label)), this.hideLabel && (index.h("swirl-visually-hidden", { key: 'd8e3e5bc029e05b8f73500ab70d3fb73b1420b6a' }, this.swirlAriaLabel || this.label)), this.description && !this.hideDescription && (index.h("span", { key: 'a46ecfe95969643500e26224f8b021985f461fa9', class: "switch__description" }, this.description)), this.description && this.hideDescription && (index.h("swirl-visually-hidden", { key: '71c99b5f29ab55c5c9a48e4ae1e009e326a39729' }, this.description))))));
|
|
39
39
|
}
|
|
40
40
|
get el() { return index.getElement(this); }
|
|
41
41
|
};
|
|
@@ -63,7 +63,7 @@ const SwirlTabBar = class {
|
|
|
63
63
|
? `var(--s-space-${this.paddingBlockStart})`
|
|
64
64
|
: undefined,
|
|
65
65
|
};
|
|
66
|
-
return (index.h(index.Host, { key: '
|
|
66
|
+
return (index.h(index.Host, { key: '281aeb39ec1dad585e2d528867b95eae025954d4' }, index.h("div", { key: '0563370c98c70a77e0fb2b763fa1314e71f629e9', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
|
|
67
67
|
const className = index$1.classnames("tab-bar__tab", {
|
|
68
68
|
"tab-bar__tab--active": tab.active,
|
|
69
69
|
"tab-bar__tab--variant-pill": this.variant === "pill",
|
|
@@ -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: '4dcaa666ac2c76ef69a3db108fec8d9261f0c2c9', "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: 'd4be897cca0b201d4b72b400f6a7433ccf86921c' })));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
SwirlTab.style = swirlTabCss;
|
|
@@ -20,7 +20,7 @@ const SwirlTableColumn = class {
|
|
|
20
20
|
maxWidth: this.maxWidth || "",
|
|
21
21
|
minWidth: this.minWidth || "",
|
|
22
22
|
};
|
|
23
|
-
return (index.h(index.Host, { key: '
|
|
23
|
+
return (index.h(index.Host, { key: '7b44381a58a3166a253085ad49e9dfd2c789a6cb', "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles }, index.h("span", { key: 'bbd36f836c804b7705a4734146d75b0947c60d0e' }, index.h("slot", { key: '31bd5ea3ad4241e3220982b3b6b09177b1797815' })), this.sortable && (index.h("span", { key: 'f1412c8cfee58866f449cb188a2def485af9066d', class: "table-column__sort-indicator" }, this.sort === "ascending" && (index.h("swirl-icon-arrow-upward", { key: 'bb54544c676dcfb0f13f93354d6438a635fa028d', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (index.h("swirl-icon-arrow-downward", { key: 'cfb63e3e1edc6c6d99da43eed402b467f3ca7770', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
|
|
24
24
|
}
|
|
25
25
|
get el() { return index.getElement(this); }
|
|
26
26
|
};
|
|
@@ -580,7 +580,7 @@ const SwirlTable = class {
|
|
|
580
580
|
"table--show-empty-state": this.empty && !this.loading,
|
|
581
581
|
"table--keyboard-move": this.movingViaKeyboard,
|
|
582
582
|
});
|
|
583
|
-
return (index$1.h(index$1.Host, { key: '
|
|
583
|
+
return (index$1.h(index$1.Host, { key: '58cb39e970718c947af8fb05e49327f69ce52406' }, index$1.h("div", { key: 'ccc4d4c35f16a0250bca6473848ec928a20d69f1', class: className }, this.enableDragDrop && (index$1.h("swirl-visually-hidden", { key: '984ee69c68a1f7ede7c68d11e08ab87677c75d8c' }, index$1.h("span", { key: '7a27389724c8c0d877c79af23589b637e44d5669', "aria-live": "assertive" }, this.liveRegionText))), index$1.h("div", { key: 'd17f542eac55c6da592fc2ab12d838e30ef318e6', class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (el) => (this.container = el), tabIndex: -1 }, index$1.h("div", { key: 'dd983c262ce853828b3040c9f97c510c769662e3', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (index$1.h("swirl-visually-hidden", { key: '031594755193d7ca2e0f8624afd79ec38ac0dec7' }, index$1.h("div", { key: '7b76523681ef767eb7a5805cc45da2259d6b9ce5', id: "caption" }, this.caption))), index$1.h("div", { key: 'ac6f9ffa3703cbadb12b7384e8f897c5af9d0bc1', role: "rowgroup" }, index$1.h("div", { key: '5263be7e317340491ee5890a1a2e5d25fcba06d5', class: "table__header", ref: (el) => (this.headerEl = el), role: "row" }, index$1.h("slot", { key: '3171ffdd4027b3f32d2d2b110f55209c8bdc5e7e', name: "columns" }))), index$1.h("div", { key: '32c054e3e9f63439efb8f9cf9633f5b628a789e0', class: "table__body", ref: (el) => (this.bodyEl = el) }, index$1.h("slot", { key: '2f5b748c60f91dbe4df98d0f18b367f8292100d0', name: "rows" }), index$1.h("div", { key: 'b51e7e34b4d4e1c4044f9480a0a115393064d221', class: "table__empty-row", role: "row" }, index$1.h("div", { key: '1cb8061bef8a30965ea023b31dd0fcfac0276f26', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, index$1.h("slot", { key: 'e512da95e312bb19dca9b36e0092a0001810eda7', name: "empty" }), !hasEmptyStateSlotAssignment && (index$1.h("swirl-text", { key: 'ab17ca80ff8a609d5eaa4addee7d3358791bc11d', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
|
|
584
584
|
}
|
|
585
585
|
get el() { return index$1.getElement(this); }
|
|
586
586
|
static get watchers() { return {
|
|
@@ -39,7 +39,7 @@ const SwirlTag = class {
|
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
41
|
const className = index$1.classnames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`, { "tag--hide-label": this.hideLabel });
|
|
42
|
-
return (index.h(index.Host, { key: '
|
|
42
|
+
return (index.h(index.Host, { key: 'a3ade00e730b9c5a0bf70ce18555894162efcdb9' }, index.h("span", { key: '9adecf537f7923514ec8eca45badc8560a1448b8', class: className, part: "tag" }, this.icon && (index.h("span", { key: '0adc214659f1680182981e70724fcbc1782f01d0', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !this.hideLabel ? (index.h("span", { class: "tag__label" }, this.label)) : (index.h("swirl-visually-hidden", null, this.label)), this.removable && (index.h("button", { key: 'e1981afdf9819c222ca92f08fdf57cdd7e4f3f26', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, index.h("swirl-icon-close", { key: '6b06d0db7dcd182742f5399cd20d2d7532b9ff0c', size: 16 }))))));
|
|
43
43
|
}
|
|
44
44
|
get el() { return index.getElement(this); }
|
|
45
45
|
};
|
|
@@ -988,7 +988,7 @@ const SwirlText = class {
|
|
|
988
988
|
const styles = {
|
|
989
989
|
whiteSpace: truncate ? "nowrap" : this.whiteSpace,
|
|
990
990
|
};
|
|
991
|
-
return (index$1.h(index$1.Host, { key: '
|
|
991
|
+
return (index$1.h(index$1.Host, { key: '56f7218ef3a537fec98997d1b14ca35c2c479676' }, index$1.h(Tag, { key: 'b921b87fd42122292d4db0368a5aba72e0975f7a', class: className, ref: (el) => (this.textEl = el), style: styles }, index$1.h("slot", { key: '7e8f3315ebe21dc4e598c375d300143a519b697e' }))));
|
|
992
992
|
}
|
|
993
993
|
get el() { return index$1.getElement(this); }
|
|
994
994
|
};
|
|
@@ -45,7 +45,7 @@ const SwirlToastProvider = class {
|
|
|
45
45
|
return newToastWithId;
|
|
46
46
|
}
|
|
47
47
|
render() {
|
|
48
|
-
return (index.h(index.Host, { key: '
|
|
48
|
+
return (index.h(index.Host, { key: 'ed46f2145bfb6a36b7d7e66206f92aa048b0b0ff', role: "status" }, index.h("swirl-stack", { key: 'd3302dba7a8f2cd47b77adacb1d6ee51d32b4b85', spacing: "12" }, this.toasts.map((toast) => {
|
|
49
49
|
const props = { ...toast, content: undefined };
|
|
50
50
|
return (index.h("swirl-toast", { key: toast.toastId, onDismiss: this.onDismiss, ...props }, toast.content));
|
|
51
51
|
}))));
|
|
@@ -54,7 +54,7 @@ const SwirlToast = class {
|
|
|
54
54
|
}
|
|
55
55
|
render() {
|
|
56
56
|
const className = index$1.classnames("toast", `toast--intent-${this.intent}`);
|
|
57
|
-
return (index.h(index.Host, { key: '
|
|
57
|
+
return (index.h(index.Host, { key: '7fea68476343a3a1036bcf9f7594a6e1a79cff8d' }, index.h("div", { key: 'fbffb818800e9a1a09d152b304247d2d4f142011', class: className }, this.icon && (index.h("span", { key: '3dd08af863ab3e470b04382280e48898b1855df5', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), index.h("span", { key: 'cb7f747663e9abac62571814a39d4295e33cba5c', class: "toast__content", innerHTML: this.content, part: "toast__content" }, index.h("slot", { key: 'fe656f4eb9dc33af885d7b41f8a1b846bc1e5649' })), index.h("button", { key: '974e2f354db147b74fd5e88e4fb17a8b611f1fa9', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (index.h("swirl-icon-close", { key: '26d3e2c61a864953c15e1ca071a00cb33bdc412b', ref: (el) => (this.dismissIconEl = el) }))))));
|
|
58
58
|
}
|
|
59
59
|
static get watchers() { return {
|
|
60
60
|
"duration": ["watchDuration"]
|
|
@@ -62,7 +62,7 @@ const SwirlToggleGroup = class {
|
|
|
62
62
|
const className = index$1.classnames("toggle-group", `toggle-group--variant-${this.variant}`, {
|
|
63
63
|
"toggle-group--elevated": this.elevated,
|
|
64
64
|
});
|
|
65
|
-
return (index.h("swirl-stack", { key: '
|
|
65
|
+
return (index.h("swirl-stack", { key: '53d1ed77435d8b176d2ecd9f17a91d7ce898089c', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, index.h("slot", { key: '86d94274de5474cd95c7a8e9bc00470a769f0338', onSlotchange: this.onSlotChange })));
|
|
66
66
|
}
|
|
67
67
|
get el() { return index.getElement(this); }
|
|
68
68
|
static get watchers() { return {
|
|
@@ -71,7 +71,7 @@ const SwirlToolbar = class {
|
|
|
71
71
|
});
|
|
72
72
|
}
|
|
73
73
|
render() {
|
|
74
|
-
return (index.h(index.Host, { key: '
|
|
74
|
+
return (index.h(index.Host, { key: '68b45bf033f288bfcc91816113e4a9dc1ef3969f' }, index.h("swirl-stack", { key: '5e47332dbd0f692c105a8271b381b474e87e6a79', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, index.h("slot", { key: 'fcd391ebc21c6b829394c28b2968c5007f3be389' }))));
|
|
75
75
|
}
|
|
76
76
|
get el() { return index.getElement(this); }
|
|
77
77
|
};
|
|
@@ -5,25 +5,30 @@ var floatingUi_dom_browser_min = require('./floating-ui.dom.browser.min-PA1q-Uql
|
|
|
5
5
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
6
6
|
var utils = require('./utils-UfZG-xPD.js');
|
|
7
7
|
|
|
8
|
-
const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--active .tooltip__popper{display:block}.tooltip--visible .tooltip__popper{animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:absolute;z-index:var(--s-z-40);display:none;max-width:17.5rem;opacity:0}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}.tooltip--
|
|
8
|
+
const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--active .tooltip__popper{display:block}.tooltip--visible .tooltip__popper{animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:absolute;z-index:var(--s-z-40);display:none;max-width:17.5rem;opacity:0}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}.tooltip--intent-info .tooltip__bubble,.tooltip--intent-info .tooltip__arrow{background-color:var(--s-surface-info-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
|
|
9
9
|
|
|
10
10
|
const SwirlTooltip = class {
|
|
11
11
|
constructor(hostRef) {
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
this.active = true;
|
|
14
14
|
this.delay = 200;
|
|
15
|
+
this.intent = "default";
|
|
15
16
|
this.position = "top";
|
|
16
17
|
this.positioning = "absolute";
|
|
17
|
-
|
|
18
|
-
* If set to true, tooltip will be initially visible.
|
|
19
|
-
* It will only be dismissible via a click and will not reappear.
|
|
20
|
-
* Tooltip will have a blue background color.
|
|
21
|
-
*/
|
|
22
|
-
this.isPromo = false;
|
|
18
|
+
this.trigger = ["focus", "hover"];
|
|
23
19
|
this.visible = false;
|
|
24
|
-
this.isPromoShown = false;
|
|
25
20
|
this.onKeydown = (event) => {
|
|
26
|
-
if (event.code === "Escape"
|
|
21
|
+
if (event.code === "Escape") {
|
|
22
|
+
this.hide();
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
this.onFocusIn = () => {
|
|
26
|
+
if (this.trigger.includes("focus")) {
|
|
27
|
+
this.show();
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
this.onFocusOut = () => {
|
|
31
|
+
if (this.trigger.includes("focus")) {
|
|
27
32
|
this.hide();
|
|
28
33
|
}
|
|
29
34
|
};
|
|
@@ -44,20 +49,6 @@ const SwirlTooltip = class {
|
|
|
44
49
|
top: Boolean(arrowY) ? arrowY + "px" : undefined,
|
|
45
50
|
};
|
|
46
51
|
};
|
|
47
|
-
this.show = () => {
|
|
48
|
-
if (!this.active || (this.isPromo && this.isPromoShown)) {
|
|
49
|
-
return;
|
|
50
|
-
}
|
|
51
|
-
this.visible = true;
|
|
52
|
-
requestAnimationFrame(() => {
|
|
53
|
-
const referenceElement = this.el.children[0];
|
|
54
|
-
if (!Boolean(referenceElement)) {
|
|
55
|
-
return;
|
|
56
|
-
}
|
|
57
|
-
this.reposition();
|
|
58
|
-
this.disableAutoUpdate = floatingUi_dom_browser_min.N(referenceElement, this.popperEl, this.reposition.bind(this));
|
|
59
|
-
});
|
|
60
|
-
};
|
|
61
52
|
this.showWithDelay = () => {
|
|
62
53
|
if (!this.active) {
|
|
63
54
|
return;
|
|
@@ -70,14 +61,6 @@ const SwirlTooltip = class {
|
|
|
70
61
|
this.show();
|
|
71
62
|
}, this.delay);
|
|
72
63
|
};
|
|
73
|
-
this.hide = () => {
|
|
74
|
-
if (Boolean(this.showTimeout)) {
|
|
75
|
-
clearTimeout(this.showTimeout);
|
|
76
|
-
this.showTimeout = undefined;
|
|
77
|
-
}
|
|
78
|
-
this.visible = false;
|
|
79
|
-
this.disableAutoUpdate?.();
|
|
80
|
-
};
|
|
81
64
|
this.updateOptions = () => {
|
|
82
65
|
const margin = utils.getPixelsFromRemToken("--s-space-12");
|
|
83
66
|
const shiftPaddingY = utils.getPixelsFromRemToken("--s-space-8");
|
|
@@ -104,10 +87,12 @@ const SwirlTooltip = class {
|
|
|
104
87
|
this.updateOptions();
|
|
105
88
|
}
|
|
106
89
|
onMouseEnter() {
|
|
107
|
-
this.
|
|
90
|
+
if (this.trigger.includes("hover")) {
|
|
91
|
+
this.showWithDelay();
|
|
92
|
+
}
|
|
108
93
|
}
|
|
109
94
|
onMouseLeave() {
|
|
110
|
-
if (
|
|
95
|
+
if (this.trigger.includes("hover")) {
|
|
111
96
|
this.hide();
|
|
112
97
|
}
|
|
113
98
|
}
|
|
@@ -128,18 +113,35 @@ const SwirlTooltip = class {
|
|
|
128
113
|
}
|
|
129
114
|
componentDidLoad() {
|
|
130
115
|
this.updateOptions();
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
116
|
+
}
|
|
117
|
+
async show() {
|
|
118
|
+
if (!this.active) {
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
this.visible = true;
|
|
122
|
+
requestAnimationFrame(() => {
|
|
123
|
+
const referenceElement = this.el.children[0];
|
|
124
|
+
if (!Boolean(referenceElement)) {
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
this.reposition();
|
|
128
|
+
this.disableAutoUpdate = floatingUi_dom_browser_min.N(referenceElement, this.popperEl, this.reposition.bind(this));
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
async hide() {
|
|
132
|
+
if (Boolean(this.showTimeout)) {
|
|
133
|
+
clearTimeout(this.showTimeout);
|
|
134
|
+
this.showTimeout = undefined;
|
|
134
135
|
}
|
|
136
|
+
this.visible = false;
|
|
137
|
+
this.disableAutoUpdate?.();
|
|
135
138
|
}
|
|
136
139
|
render() {
|
|
137
|
-
const className = index$1.classnames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, {
|
|
140
|
+
const className = index$1.classnames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, `tooltip--intent-${this.intent}`, {
|
|
138
141
|
"tooltip--active": this.active,
|
|
139
142
|
"tooltip--visible": this.visible,
|
|
140
|
-
"tooltip--promo": this.isPromo,
|
|
141
143
|
});
|
|
142
|
-
return (index.h(index.Host, { key: '
|
|
144
|
+
return (index.h(index.Host, { key: 'e418f075955973796c17ba8994cfb63284b99d13', onKeydown: this.onKeydown }, index.h("span", { key: '410ac8bc16773617287b73b4676682b4e887eeb3', class: className }, index.h("span", { key: 'e111062966a91142006124131819095cd3e41e69', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, index.h("slot", { key: 'fc43ad1b5a655a0512157a6cc6c9877c592caa1c' })), index.h("span", { key: '360545df93f2ea5b655166769d1a3d95c8dca299', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
|
|
143
145
|
top: Boolean(this.actualPosition)
|
|
144
146
|
? `${this.actualPosition?.y}px`
|
|
145
147
|
: "",
|
|
@@ -147,7 +149,7 @@ const SwirlTooltip = class {
|
|
|
147
149
|
? `${this.actualPosition?.x}px`
|
|
148
150
|
: "",
|
|
149
151
|
position: this.positioning,
|
|
150
|
-
} }, this.visible && (index.h("span", { key: '
|
|
152
|
+
} }, this.visible && (index.h("span", { key: 'b4af0145c86950a1a863f73d63f77000bd98f95a', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, index.h("span", { key: '84a35eb842594411f9deac1c47b04034bdd64362', class: "tooltip__content", innerHTML: this.content }))), index.h("span", { key: 'c6796dee53c0fd6d1fbc2a39d6495f91360671fc', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
|
|
151
153
|
...this.arrowStyles,
|
|
152
154
|
visibility: this.visible ? "visible" : "hidden",
|
|
153
155
|
} })))));
|
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
"components/swirl-progress-indicator/swirl-progress-indicator.js",
|
|
40
40
|
"components/swirl-radio/swirl-radio.js",
|
|
41
41
|
"components/swirl-resource-list/swirl-resource-list.js",
|
|
42
|
+
"components/swirl-tooltip/swirl-tooltip.js",
|
|
42
43
|
"components/swirl-resource-list-item/swirl-resource-list-item.js",
|
|
43
44
|
"components/swirl-search/swirl-search.js",
|
|
44
45
|
"components/swirl-shell-navigation-item/swirl-shell-navigation-item.js",
|
|
@@ -59,7 +60,6 @@
|
|
|
59
60
|
"components/swirl-toast-provider/swirl-toast-provider.js",
|
|
60
61
|
"components/swirl-toggle-group/swirl-toggle-group.js",
|
|
61
62
|
"components/swirl-toolbar/swirl-toolbar.js",
|
|
62
|
-
"components/swirl-tooltip/swirl-tooltip.js",
|
|
63
63
|
"components/swirl-tree-view-item/swirl-tree-view-item.js",
|
|
64
64
|
"components/swirl-tree-view/swirl-tree-view.js",
|
|
65
65
|
"components/swirl-accordion/swirl-accordion.js",
|
|
@@ -14,6 +14,7 @@ export class SwirlResourceListItem {
|
|
|
14
14
|
this.dragHandleLabel = "Move item";
|
|
15
15
|
this.interactive = true;
|
|
16
16
|
this.labelWeight = "medium";
|
|
17
|
+
this.labelTooltipPosition = "top";
|
|
17
18
|
this.menuTriggerLabel = "Options";
|
|
18
19
|
this.hasMedia = false;
|
|
19
20
|
this.iconSize = 24;
|
|
@@ -125,6 +126,7 @@ export class SwirlResourceListItem {
|
|
|
125
126
|
const labelContainerStyles = {
|
|
126
127
|
minHeight: this.labelMinHeight ?? undefined,
|
|
127
128
|
};
|
|
129
|
+
const renderLabel = () => (h("span", { key: '042e3b3257e6f219d2b93aed266c9fc3c839b5d9', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label));
|
|
128
130
|
const className = classnames("resource-list-item", `resource-list-item--label-weight-${this.labelWeight}`, {
|
|
129
131
|
"resource-list-item--active": this.active,
|
|
130
132
|
"resource-list-item--checked": this.checked,
|
|
@@ -141,7 +143,7 @@ export class SwirlResourceListItem {
|
|
|
141
143
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
142
144
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
143
145
|
});
|
|
144
|
-
return (h(Host, { key: '
|
|
146
|
+
return (h(Host, { key: '6171aee719b310c2493500dbc77981f06f75a8b3', role: hostRole }, h("div", { key: '38413b7327e723ee69c1a8ac3ec91a3d14110fec', class: className, role: containerRole, onClick: this.onClick }, h(Tag, { key: '20c815a424d302e1c5f69baa1b459d7c04f8b0a7', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: '19806427f62924b14b048c38625903f431bc71f2', class: "resource-list-item__media" }, h("slot", { key: 'f4cc953be27c43fc53be3c609ded5e33fe5bab92', name: "media" }))), h("span", { key: '4f3d985cf6ab2bac661214b7d9fa173dc38336fb', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition, positioning: "fixed" }, renderLabel())) : (renderLabel()), this.description && (h("span", { key: '0474304ec2d9253acde6b2d7c6a4b1fea63eac52', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (h("span", { key: '9694af4087e954fcdc4a2a0a5c034914ff195aea', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: 'c68a10da73a18d4b5e52a1de21ecf70e263a7c36', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '5bb865ca210e947d8c3c357b4efe3fc3a5e69592' }))))), showMeta && (h("span", { key: 'ce1b56f2c842676abbded89737c80b923bce7c89', class: "resource-list-item__meta" }, this.meta && (h("span", { key: '2fcd0dd606c30754fe8f1288d822a037be617944', class: "resource-list-item__meta-text" }, this.meta)), h("span", { key: 'c2bd1ab1c4cf18e6b5602be136232336d9e50eb9', class: "resource-list-item__badges" }, h("slot", { key: 'c5a41c1b5e78a0569e41fb58300bfab51c0ece85', name: "badges" })))), h("span", { key: '84c77b4cb7a530336531ca57d33be7256da65f64', class: "resource-list-item__control", onClick: this.onControlClick }, h("slot", { key: 'bd64567e76f7b234600e06fab50523440c38bb00', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: 'a749f34659a7b780652c6c4d02419e64c06ee8ff', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '75da162b270daef8ac08746c985d641462734434', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: '41f09b95de618cfcfa5c524cf99a7a06199b33ca', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: 'd275e1fcde190da7bbd7278edc1e1d2af0938f2f', size: this.iconSize })))));
|
|
145
147
|
}
|
|
146
148
|
static get is() { return "swirl-resource-list-item"; }
|
|
147
149
|
static get encapsulation() { return "scoped"; }
|
|
@@ -510,6 +512,51 @@ export class SwirlResourceListItem {
|
|
|
510
512
|
"setter": false,
|
|
511
513
|
"reflect": false
|
|
512
514
|
},
|
|
515
|
+
"labelTooltip": {
|
|
516
|
+
"type": "string",
|
|
517
|
+
"attribute": "label-tooltip",
|
|
518
|
+
"mutable": false,
|
|
519
|
+
"complexType": {
|
|
520
|
+
"original": "string",
|
|
521
|
+
"resolved": "string",
|
|
522
|
+
"references": {}
|
|
523
|
+
},
|
|
524
|
+
"required": false,
|
|
525
|
+
"optional": true,
|
|
526
|
+
"docs": {
|
|
527
|
+
"tags": [],
|
|
528
|
+
"text": ""
|
|
529
|
+
},
|
|
530
|
+
"getter": false,
|
|
531
|
+
"setter": false,
|
|
532
|
+
"reflect": false
|
|
533
|
+
},
|
|
534
|
+
"labelTooltipPosition": {
|
|
535
|
+
"type": "string",
|
|
536
|
+
"attribute": "label-tooltip-position",
|
|
537
|
+
"mutable": false,
|
|
538
|
+
"complexType": {
|
|
539
|
+
"original": "SwirlTooltipPosition",
|
|
540
|
+
"resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
|
|
541
|
+
"references": {
|
|
542
|
+
"SwirlTooltipPosition": {
|
|
543
|
+
"location": "import",
|
|
544
|
+
"path": "../swirl-tooltip/swirl-tooltip",
|
|
545
|
+
"id": "src/components/swirl-tooltip/swirl-tooltip.tsx::SwirlTooltipPosition"
|
|
546
|
+
}
|
|
547
|
+
}
|
|
548
|
+
},
|
|
549
|
+
"required": false,
|
|
550
|
+
"optional": true,
|
|
551
|
+
"docs": {
|
|
552
|
+
"tags": [],
|
|
553
|
+
"text": ""
|
|
554
|
+
},
|
|
555
|
+
"getter": false,
|
|
556
|
+
"setter": false,
|
|
557
|
+
"reflect": false,
|
|
558
|
+
"defaultValue": "\"top\""
|
|
559
|
+
},
|
|
513
560
|
"menuTriggerId": {
|
|
514
561
|
"type": "string",
|
|
515
562
|
"attribute": "menu-trigger-id",
|
|
@@ -58,7 +58,7 @@ export class SwirlSearch {
|
|
|
58
58
|
const className = classnames("search", `search--variant-${this.variant}`, {
|
|
59
59
|
"search--disabled": this.disabled,
|
|
60
60
|
});
|
|
61
|
-
return (h(Host, { key: '
|
|
61
|
+
return (h(Host, { key: 'e81efc90b3d6a499688011221cc2a15c6f792dc2' }, h("span", { key: 'b7790e867c09bf68ffe59ec8d28f3880d4e8545a', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: 'dbda6b7c55171ee6c1d70d2eb12d42ed0158f10c', "aria-hidden": "true", class: "search__icon" }), h("input", { key: '4cebbf2d5e9543728453055bfed8a6d94f6bd935', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && this.clearable && (h("button", { key: 'a471b4e873ed08cf152c9b60fef8f36df2bb6b65', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.handleClear, type: "button" }, h("swirl-icon-cancel", { key: 'c418cfeddcadecbb411e72e5a66dd00ca3a46679' }))))));
|
|
62
62
|
}
|
|
63
63
|
static get is() { return "swirl-search"; }
|
|
64
64
|
static get encapsulation() { return "scoped"; }
|