@getflip/swirl-components 0.472.0 → 0.473.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 +13 -3
- package/dist/cjs/swirl-data-cell.cjs.entry.js +6 -2
- package/dist/cjs/swirl-modal-shell.cjs.entry.js +3 -3
- package/dist/cjs/swirl-shell-layout.cjs.entry.js +7 -6
- package/dist/cjs/swirl-shell-navigation-item.cjs.entry.js +3 -2
- package/dist/collection/components/swirl-data-cell/swirl-data-cell.js +6 -2
- package/dist/collection/components/swirl-modal-shell/swirl-modal-shell.js +3 -3
- package/dist/collection/components/swirl-modal-shell/swirl-modal-shell.stories.js +31 -1
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.js +8 -6
- package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.js +4 -2
- package/dist/components/swirl-data-cell.js +1 -1
- package/dist/components/swirl-modal-shell.js +1 -1
- package/dist/components/swirl-shell-layout.js +1 -1
- package/dist/components/swirl-shell-navigation-item.js +1 -1
- package/dist/esm/swirl-data-cell.entry.js +6 -2
- package/dist/esm/swirl-modal-shell.entry.js +3 -3
- package/dist/esm/swirl-shell-layout.entry.js +7 -6
- package/dist/esm/swirl-shell-navigation-item.entry.js +3 -2
- package/dist/swirl-components/p-00dedfee.entry.js +1 -0
- package/dist/swirl-components/p-2d11e95d.entry.js +1 -0
- package/dist/swirl-components/p-550a981d.entry.js +11 -0
- package/dist/swirl-components/p-ed4ed066.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-modal-shell/swirl-modal-shell.d.ts +1 -0
- package/dist/types/components/swirl-shell-layout/swirl-shell-layout.d.ts +1 -0
- package/dist/types/components/swirl-shell-navigation-item/swirl-shell-navigation-item.d.ts +1 -0
- package/dist/types/components.d.ts +24 -0
- package/package.json +1 -1
- package/dist/swirl-components/p-3431e87d.entry.js +0 -1
- package/dist/swirl-components/p-3a43e8ec.entry.js +0 -11
- package/dist/swirl-components/p-3d11e378.entry.js +0 -1
- package/dist/swirl-components/p-4b51723f.entry.js +0 -1
package/components.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-04-
|
|
2
|
+
"timestamp": "2026-04-08T10:12:23",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.43.1",
|
|
@@ -67754,6 +67754,10 @@
|
|
|
67754
67754
|
"tag": "swirl-shell-layout",
|
|
67755
67755
|
"docs": "",
|
|
67756
67756
|
"docsTags": [
|
|
67757
|
+
{
|
|
67758
|
+
"name": "deprecated",
|
|
67759
|
+
"text": "This component is deprecated and will be removed in the next major release."
|
|
67760
|
+
},
|
|
67757
67761
|
{
|
|
67758
67762
|
"name": "slot",
|
|
67759
67763
|
"text": "logo - Logo shown inside header."
|
|
@@ -68393,7 +68397,8 @@
|
|
|
68393
68397
|
"swirl-stack",
|
|
68394
68398
|
"swirl-button"
|
|
68395
68399
|
]
|
|
68396
|
-
}
|
|
68400
|
+
},
|
|
68401
|
+
"deprecation": "This component is deprecated and will be removed in the next major release."
|
|
68397
68402
|
},
|
|
68398
68403
|
{
|
|
68399
68404
|
"filePath": "src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.tsx",
|
|
@@ -68401,6 +68406,10 @@
|
|
|
68401
68406
|
"tag": "swirl-shell-navigation-item",
|
|
68402
68407
|
"docs": "",
|
|
68403
68408
|
"docsTags": [
|
|
68409
|
+
{
|
|
68410
|
+
"name": "deprecated",
|
|
68411
|
+
"text": "This component is deprecated and will be removed in the next major release."
|
|
68412
|
+
},
|
|
68404
68413
|
{
|
|
68405
68414
|
"name": "slot",
|
|
68406
68415
|
"text": "icon - Image or icon to display in the navigation item."
|
|
@@ -68904,7 +68913,8 @@
|
|
|
68904
68913
|
"swirl-visually-hidden",
|
|
68905
68914
|
"swirl-icon-close"
|
|
68906
68915
|
]
|
|
68907
|
-
}
|
|
68916
|
+
},
|
|
68917
|
+
"deprecation": "This component is deprecated and will be removed in the next major release."
|
|
68908
68918
|
},
|
|
68909
68919
|
{
|
|
68910
68920
|
"filePath": "src/components/swirl-skeleton-box/swirl-skeleton-box.tsx",
|
|
@@ -45,8 +45,12 @@ const SwirlDataCell = class {
|
|
|
45
45
|
});
|
|
46
46
|
const labelId = `${this.elementId}-label`;
|
|
47
47
|
const valueId = `${this.elementId}-value`;
|
|
48
|
-
const
|
|
49
|
-
|
|
48
|
+
const isInDataCellStack = this.el.parentElement?.tagName === "SWIRL-DATA-CELL-STACK";
|
|
49
|
+
const hostRole = isInDataCellStack ? "listitem" : "group";
|
|
50
|
+
const contentRole = hasCheckbox || hasRadio ? "button" : undefined;
|
|
51
|
+
const wrapperRole = isInDataCellStack && !contentRole ? "group" : contentRole;
|
|
52
|
+
const labelContent = (index.h("swirl-stack", { key: 'c0a4a14faad9ff0c649f8594ede3401bfaace84b', orientation: "horizontal", align: "center", spacing: "4" }, index.h("span", { key: 'b7a45482eaef7333e7a5b4e7b2a6d3a6f3bd45f5', class: "data-cell__label", id: labelId, role: "term" }, this.label), this.tooltip && (index.h("swirl-tooltip", { key: '43cccb7abb557f481805cb7d2ff76a85353ded30', class: "data-cell__tooltip", content: this.tooltip, position: "right" }, index.h("swirl-icon-info", { key: '0e5635708a0ea574c5afe38cde05cca227f52327', size: 16, tabIndex: 0 })))));
|
|
53
|
+
return (index.h(index.Host, { key: '0b1e6388f330d36cbf7c8b40d91ff475a08a9f7d', role: hostRole }, index.h("div", { key: 'f5bd2b0e7d38b7b879ddd7d7f9244772583b5d7e', class: className, part: "data-cell", onClick: hasCheckbox || hasRadio ? this.handleClick : undefined, role: wrapperRole, tabIndex: hasCheckbox || hasRadio ? 0 : undefined }, hasMedia && (index.h("div", { key: '338a5f743913eca6a97b8e9c75e9c5372ef5af67', class: "data-cell__media", "aria-hidden": "true" }, index.h("slot", { key: '9f30d751976bf5ee4426fb045db57a469eb0940a', name: "media" }))), index.h("div", { key: '257a35f56ec56079f06edd4af9ef8a785bf23ee0', class: "data-cell__content" }, hasLabel && (index.h("div", { key: '64b6fc162c07b8937f91787d238f132b282c8a96', class: "data-cell__label-wrapper" }, labelContent)), (hasContent || this.value || hasSuffix) && (index.h("div", { key: '96a8d037bc0cffdde98ff9202657d3ab45568adc', class: "data-cell__value-wrapper", role: "definition", "aria-labelledby": hasLabel ? labelId : undefined, id: valueId }, hasContent ? (index.h("div", { class: "data-cell__input" }, index.h("slot", { name: "content" }))) : (this.value && index.h("div", { class: "data-cell__value" }, this.value))))), hasSuffix && (index.h("div", { key: '1e1464e5d2b7cf193aae179330b29e72653b6589', class: "data-cell__suffix" }, index.h("slot", { key: '6e385ec659b10c2f0abd6730b6dcae8f67d0d942', name: "suffix" }))))));
|
|
50
54
|
}
|
|
51
55
|
get el() { return index.getElement(this); }
|
|
52
56
|
};
|
|
@@ -33,7 +33,7 @@ const SwirlModalShell = class {
|
|
|
33
33
|
this.setDialogCustomProps();
|
|
34
34
|
requestAnimationFrame(() => {
|
|
35
35
|
this.modalEl.showModal();
|
|
36
|
-
bodyScrollLock_esm.disableBodyScroll(this.
|
|
36
|
+
bodyScrollLock_esm.disableBodyScroll(this.scrollContainerEl);
|
|
37
37
|
this.isClosing = false;
|
|
38
38
|
});
|
|
39
39
|
}
|
|
@@ -41,7 +41,7 @@ const SwirlModalShell = class {
|
|
|
41
41
|
if (this.modalEl?.open) {
|
|
42
42
|
this.modalEl.close();
|
|
43
43
|
}
|
|
44
|
-
bodyScrollLock_esm.enableBodyScroll(this.
|
|
44
|
+
bodyScrollLock_esm.enableBodyScroll(this.scrollContainerEl);
|
|
45
45
|
}
|
|
46
46
|
async close() {
|
|
47
47
|
this.isClosing = true;
|
|
@@ -56,7 +56,7 @@ const SwirlModalShell = class {
|
|
|
56
56
|
const className = index$1.classnames("modal-shell", {
|
|
57
57
|
"modal-shell--closing": this.isClosing,
|
|
58
58
|
});
|
|
59
|
-
return (index.h(index.Host, { key: '
|
|
59
|
+
return (index.h(index.Host, { key: '040edfa9e8ab0bc22c1f653ceadada93809465be' }, index.h("dialog", { key: 'b9c9724d366b5a5ea6302451c87b05cd10a34293', "aria-label": this.label, class: className, onClose: this.onDialogClose, onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, index.h("div", { key: '3fcb9e41c72cc03e91414b779c4ed3b054e803dc', class: "modal-shell__backdrop" }), index.h("div", { key: '485fba3bc5aa2e96d15aa5fd3b22d74af522fe44', class: "modal-shell__scroll-container", onClick: this.onClose, ref: (el) => (this.scrollContainerEl = el) }, index.h("div", { key: '4f5421cee0190f021279e95f9e3f3c4c17473a14', class: "modal-shell__scroll-container__content", onClick: this.onContentClick }, index.h("slot", { key: '2c36d7f74b599b15fd2de8ae12b72a67fb05fb81' }))), index.h("swirl-button", { key: 'c0ac4350a2a79a0fc2c56472559aae562ebb429a', class: "modal-shell__close-button", icon: "<swirl-icon-close color='strong'></swirl-icon-close>", label: this.closeButtonLabel, hideLabel: true, variant: "translucent", onClick: this.onClose }))));
|
|
60
60
|
}
|
|
61
61
|
};
|
|
62
62
|
SwirlModalShell.style = swirlModalShellCss();
|
|
@@ -1564,6 +1564,7 @@ const SwirlShellLayout = class {
|
|
|
1564
1564
|
};
|
|
1565
1565
|
}
|
|
1566
1566
|
componentWillLoad() {
|
|
1567
|
+
console.warn('[Swirl] The "swirl-shell-layout" component is deprecated and will be removed in the next major release.');
|
|
1567
1568
|
this.isDesktopViewport = utils.isDesktopViewport();
|
|
1568
1569
|
this.collectNavItems();
|
|
1569
1570
|
const restoredNavigationCollapseState = localStorage.getItem(NAVIGATION_COLLAPSE_STORAGE_KEY) === "true";
|
|
@@ -1674,24 +1675,24 @@ const SwirlShellLayout = class {
|
|
|
1674
1675
|
"shell-layout--mobile-navigation-active": this.mobileNavigationActive,
|
|
1675
1676
|
"shell-layout--navigation-collapsed": mainNavCollapsed,
|
|
1676
1677
|
});
|
|
1677
|
-
return (index.h(index.Host, { key: '
|
|
1678
|
+
return (index.h(index.Host, { key: '5f5458f6460183f2d6a2ce7bdc95ff5d160c0b6a' }, index.h("div", { key: '92d0471c277bf968adc8a8f4e9afc578288b53f2', class: className }, index.h("header", { key: 'dc249ffe59a95fbf9b90a79b2ac0e1d3aaf29b40', class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { key: 'f667bd28c24008ee31d66ae3920038099130fff1', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { key: 'b2f378e9d99b1e363da281962521163473553b82', class: "shell-layout__header-left" }, index.h("swirl-tooltip", { key: 'dc2b3b695738a372f03c79c0731466b085f2ebd8', content: this.navigationCollapsed
|
|
1678
1679
|
? this.expandNavigationButtonLabel
|
|
1679
|
-
: this.collapseNavigationButtonLabel, delay: 100, position: "right" }, index.h("button", { key: '
|
|
1680
|
+
: this.collapseNavigationButtonLabel, delay: 100, position: "right" }, index.h("button", { key: 'a02c4615e817b81522ccd440d222ff5b840775c1', 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: 'd9b356e34b82b0acaa2c106350f249b4a2565c90' }, this.navigationCollapsed
|
|
1680
1681
|
? this.expandNavigationButtonLabel
|
|
1681
|
-
: this.collapseNavigationButtonLabel))), index.h("a", { key: '
|
|
1682
|
+
: this.collapseNavigationButtonLabel))), index.h("a", { key: '6986f46235298e58f35bd5ad31684eb2cfabe86d', class: "shell-layout__header-tool", onClick: this.historyBackClick.emit, href: "javascript:history.back()" }, index.h("swirl-icon-arrow-back", { key: 'f68f92c0821fd6b54b8341745cf558b334edd6f0', size: 20 }), index.h("swirl-visually-hidden", { key: '22801f633563ba275ebe088d2a4c341dda758544' }, this.browserBackButtonLabel)), index.h("a", { key: '02e4c396ccb4b076b9e1d5dd565bf3e5178cc7b5', class: "shell-layout__header-tool", onClick: this.historyForwardClick.emit, href: "javascript:history.forward()" }, index.h("swirl-icon-arrow-forward", { key: 'e1a884ed5b576ce45c36cd55be3f8301a9c25ab6', size: 20 }), index.h("swirl-visually-hidden", { key: '43e83f5f482f28003a57c25c27d337c62cd8ee64' }, this.browserForwardButtonLabel)), index.h("slot", { key: '6aa5a13fcdd924ccce93ed986dfa9cf44ca15441', name: "left-header-tools" })), index.h("div", { key: '7c98d9434eb3e5398aee3c9890fd3ebd9a97ec6d', class: "shell-layout__logo" }, index.h("slot", { key: '381b69009d83758713dcbaaef7ddbaf7408f5c3f', name: "logo" })), index.h("div", { key: '957cf5301164474a28ab07ad4b034ed364404a73', class: "shell-layout__header-right" }, index.h("slot", { key: '2db7f15807045fd66d9181aa0a382674d9d35ff5', name: "right-header-tools" }), index.h("slot", { key: 'b472d77a4420c68f93999ceeacf4bf7176c1072c', name: "avatar" }))), index.h("div", { key: '81e27f03e1c6d76fdd2754a0c8b33b2aa1126bc8', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), index.h("nav", { key: '308d981df11d92d1cfbe1bd1b421348a7fd0f81a', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, index.h("div", { key: 'facc60dce3cc42bf9ad138f096d00235694f01bc', class: "shell-layout__mobile-header" }, index.h("slot", { key: '6843ea436a024963dc0f58cd42fe23dee5cbca9e', name: "mobile-logo" }), index.h("div", { key: '85749821ec1fd9092b646d8f643886aca9f8f393', class: "shell-layout__mobile-header-tools" }, index.h("slot", { key: '5a30b7dfd62669531443761544477b4baeaf4a84', name: "mobile-header-tools" }), index.h("button", { key: '5340f5a188c5bcb98c63efa9ef3cda7b62e6b997', class: "shell-layout__header-tool", type: "button" }, index.h("swirl-icon-double-arrow-left", { key: '40db2029f3a81e828db27e890b52ce0d2805173c', size: 20 }), index.h("swirl-visually-hidden", { key: 'a25e358e0afc4027a0d52cbc1cf62df6a0719cc4' }, this.hideMobileNavigationButtonLabel)))), index.h("div", { key: 'a8b8a017a40a43f89c50f60c96bbbeb4d6181b3d', class: "shell-layout__nav-body" }, index.h("swirl-visually-hidden", { key: '1200560f555a2e11e7bed30697283ba660e8ea52' }, index.h("span", { key: 'a2a5c11b456c91b1fe4d006c05803829a633e3d5', id: "main-navigation-label" }, this.navigationLabel)), index.h("slot", { key: '55c3ec6a88c7e8986a7c94f4e751a4a899ffb457', name: "nav", onSlotchange: this.collectNavItems }), index.h("div", { key: '938ce0319668ed1aaee57cf435c5f8c8531d2114', class: "shell-layout__secondary-nav" }, index.h("swirl-separator", { key: '8da10296cd7d1857e7b62b89da62984814111022', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (index.h("swirl-box", { key: 'bfec55992924ce4f0bab5ba5b99e7830a925d447', paddingBlockEnd: "16" }, index.h("swirl-stack", { key: 'e06da8582e4e41ccb8c210292f466233777a97f4', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, index.h("swirl-button", { key: '1960f4768f22a6d6c8b7ef1aabcaa7b77e01a8be', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
|
|
1682
1683
|
? "<swirl-icon-expand-more></swirl-icon-expand-more>"
|
|
1683
1684
|
: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
|
|
1684
1685
|
? this.secondaryNavExpandLabel
|
|
1685
|
-
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (index.h("swirl-button", { key: '
|
|
1686
|
+
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (index.h("swirl-button", { key: '2fd6f3c41e1752103a32d59f152fad121e0a7ce1', icon: this.secondaryNavView === "grid"
|
|
1686
1687
|
? "<swirl-icon-menu></swirl-icon-menu>"
|
|
1687
1688
|
: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
|
|
1688
1689
|
? this.gridNavLayoutToggleLabel
|
|
1689
|
-
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), index.h("div", { key: '
|
|
1690
|
+
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), index.h("div", { key: '542d6a0dbcb290a175d9d9d4e9eb0f8ec2462687', class: {
|
|
1690
1691
|
[`shell-layout__secondary-nav-items--${this.secondaryNavGridLayoutVariant}`]: true,
|
|
1691
1692
|
"shell-layout__secondary-nav-items": true,
|
|
1692
1693
|
"shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
|
|
1693
1694
|
this.secondaryNavView === "grid",
|
|
1694
|
-
} }, index.h("slot", { key: '
|
|
1695
|
+
} }, index.h("slot", { key: '55a2836a2dbb4b11e2dd49063e45db21941d1490', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), index.h("main", { key: 'afa4d7ab3cadc90ddd89b11dbc84bb28acac4c41', class: "shell-layout__main", id: "main-content" }, index.h("slot", { key: '6beead6ae681df7cf8cff9734c5529668c975962' })))));
|
|
1695
1696
|
}
|
|
1696
1697
|
get el() { return index.getElement(this); }
|
|
1697
1698
|
static get watchers() { return {
|
|
@@ -15,6 +15,7 @@ const SwirlShellNavigationItem = class {
|
|
|
15
15
|
this.variant = "default";
|
|
16
16
|
}
|
|
17
17
|
componentWillLoad() {
|
|
18
|
+
console.warn('[Swirl] The "swirl-shell-navigation-item" component is deprecated and will be removed in the next major release.');
|
|
18
19
|
this.forceIconProps();
|
|
19
20
|
}
|
|
20
21
|
componentDidRender() {
|
|
@@ -64,9 +65,9 @@ const SwirlShellNavigationItem = class {
|
|
|
64
65
|
const tooltipContent = this.description
|
|
65
66
|
? `${this.label} ${this.description}`
|
|
66
67
|
: this.label;
|
|
67
|
-
return (index.h(index.Host, { key: '
|
|
68
|
+
return (index.h(index.Host, { key: 'aeac0acbbe7cd9c55c0b8d4d2821aa3918d05aa4' }, index.h("swirl-tooltip", { key: 'fbd93c62eb3fba3d3e49f2a46870a23f7ef09ffa', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right" }, index.h(Tag, { key: '912601d126642c44f55a82886b0e5d74aa77e0b9', "aria-current": this.swirlAriaCurrent, class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button", title: !this.hideLabel ? this.label : undefined }, index.h("span", { key: '88ff2c7cf186b1abf8d64a0e7a4df63dc0c559ef', class: "shell-navigation-item__icon" }, index.h("slot", { key: 'dfcf9b9382b959fac044b3790ecaf1b419e65937', 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: 'adea33c07e645202fc33b7d1463954caa4730e08', class: "shell-navigation-item__badge-wrapper" }, index.h("swirl-badge", { key: 'f92c9475d2f1060f0f3a2a2c30b9cea6d8e396df', "aria-label": this.badgeLabel, class: index$1.classnames("shell-navigation-item__badge", {
|
|
68
69
|
"shell-navigation-item__badge--dot": this.badgeLabel === "",
|
|
69
|
-
}), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (index.h("swirl-tag", { key: '
|
|
70
|
+
}), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (index.h("swirl-tag", { key: '4a3b80ead81bc32dcf84c958ed0ee9ed8f15f9b7', class: "shell-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "s", variant: "strong" })), showIsNewBadge && (index.h("swirl-badge", { key: 'de9667d2fd1c275b108f1df7875b6df7a39af77c', class: "shell-navigation-item__is-new-badge", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "xs", variant: "dot" }))))));
|
|
70
71
|
}
|
|
71
72
|
get el() { return index.getElement(this); }
|
|
72
73
|
};
|
|
@@ -43,8 +43,12 @@ export class SwirlDataCell {
|
|
|
43
43
|
});
|
|
44
44
|
const labelId = `${this.elementId}-label`;
|
|
45
45
|
const valueId = `${this.elementId}-value`;
|
|
46
|
-
const
|
|
47
|
-
|
|
46
|
+
const isInDataCellStack = this.el.parentElement?.tagName === "SWIRL-DATA-CELL-STACK";
|
|
47
|
+
const hostRole = isInDataCellStack ? "listitem" : "group";
|
|
48
|
+
const contentRole = hasCheckbox || hasRadio ? "button" : undefined;
|
|
49
|
+
const wrapperRole = isInDataCellStack && !contentRole ? "group" : contentRole;
|
|
50
|
+
const labelContent = (h("swirl-stack", { key: 'c0a4a14faad9ff0c649f8594ede3401bfaace84b', orientation: "horizontal", align: "center", spacing: "4" }, h("span", { key: 'b7a45482eaef7333e7a5b4e7b2a6d3a6f3bd45f5', class: "data-cell__label", id: labelId, role: "term" }, this.label), this.tooltip && (h("swirl-tooltip", { key: '43cccb7abb557f481805cb7d2ff76a85353ded30', class: "data-cell__tooltip", content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: '0e5635708a0ea574c5afe38cde05cca227f52327', size: 16, tabIndex: 0 })))));
|
|
51
|
+
return (h(Host, { key: '0b1e6388f330d36cbf7c8b40d91ff475a08a9f7d', role: hostRole }, h("div", { key: 'f5bd2b0e7d38b7b879ddd7d7f9244772583b5d7e', class: className, part: "data-cell", onClick: hasCheckbox || hasRadio ? this.handleClick : undefined, role: wrapperRole, tabIndex: hasCheckbox || hasRadio ? 0 : undefined }, hasMedia && (h("div", { key: '338a5f743913eca6a97b8e9c75e9c5372ef5af67', class: "data-cell__media", "aria-hidden": "true" }, h("slot", { key: '9f30d751976bf5ee4426fb045db57a469eb0940a', name: "media" }))), h("div", { key: '257a35f56ec56079f06edd4af9ef8a785bf23ee0', class: "data-cell__content" }, hasLabel && (h("div", { key: '64b6fc162c07b8937f91787d238f132b282c8a96', class: "data-cell__label-wrapper" }, labelContent)), (hasContent || this.value || hasSuffix) && (h("div", { key: '96a8d037bc0cffdde98ff9202657d3ab45568adc', class: "data-cell__value-wrapper", role: "definition", "aria-labelledby": hasLabel ? labelId : undefined, id: valueId }, hasContent ? (h("div", { class: "data-cell__input" }, h("slot", { name: "content" }))) : (this.value && h("div", { class: "data-cell__value" }, this.value))))), hasSuffix && (h("div", { key: '1e1464e5d2b7cf193aae179330b29e72653b6589', class: "data-cell__suffix" }, h("slot", { key: '6e385ec659b10c2f0abd6730b6dcae8f67d0d942', name: "suffix" }))))));
|
|
48
52
|
}
|
|
49
53
|
static get is() { return "swirl-data-cell"; }
|
|
50
54
|
static get encapsulation() { return "shadow"; }
|
|
@@ -29,7 +29,7 @@ export class SwirlModalShell {
|
|
|
29
29
|
this.setDialogCustomProps();
|
|
30
30
|
requestAnimationFrame(() => {
|
|
31
31
|
this.modalEl.showModal();
|
|
32
|
-
disableBodyScroll(this.
|
|
32
|
+
disableBodyScroll(this.scrollContainerEl);
|
|
33
33
|
this.isClosing = false;
|
|
34
34
|
});
|
|
35
35
|
}
|
|
@@ -37,7 +37,7 @@ export class SwirlModalShell {
|
|
|
37
37
|
if (this.modalEl?.open) {
|
|
38
38
|
this.modalEl.close();
|
|
39
39
|
}
|
|
40
|
-
enableBodyScroll(this.
|
|
40
|
+
enableBodyScroll(this.scrollContainerEl);
|
|
41
41
|
}
|
|
42
42
|
async close() {
|
|
43
43
|
this.isClosing = true;
|
|
@@ -52,7 +52,7 @@ export class SwirlModalShell {
|
|
|
52
52
|
const className = classnames("modal-shell", {
|
|
53
53
|
"modal-shell--closing": this.isClosing,
|
|
54
54
|
});
|
|
55
|
-
return (h(Host, { key: '
|
|
55
|
+
return (h(Host, { key: '040edfa9e8ab0bc22c1f653ceadada93809465be' }, h("dialog", { key: 'b9c9724d366b5a5ea6302451c87b05cd10a34293', "aria-label": this.label, class: className, onClose: this.onDialogClose, onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: '3fcb9e41c72cc03e91414b779c4ed3b054e803dc', class: "modal-shell__backdrop" }), h("div", { key: '485fba3bc5aa2e96d15aa5fd3b22d74af522fe44', class: "modal-shell__scroll-container", onClick: this.onClose, ref: (el) => (this.scrollContainerEl = el) }, h("div", { key: '4f5421cee0190f021279e95f9e3f3c4c17473a14', class: "modal-shell__scroll-container__content", onClick: this.onContentClick }, h("slot", { key: '2c36d7f74b599b15fd2de8ae12b72a67fb05fb81' }))), h("swirl-button", { key: 'c0ac4350a2a79a0fc2c56472559aae562ebb429a', class: "modal-shell__close-button", icon: "<swirl-icon-close color='strong'></swirl-icon-close>", label: this.closeButtonLabel, hideLabel: true, variant: "translucent", onClick: this.onClose }))));
|
|
56
56
|
}
|
|
57
57
|
static get is() { return "swirl-modal-shell"; }
|
|
58
58
|
static get encapsulation() { return "scoped"; }
|
|
@@ -38,13 +38,43 @@ const Template = (args) => {
|
|
|
38
38
|
if (isOpen) {
|
|
39
39
|
element = generateStoryElement("swirl-modal-shell", args);
|
|
40
40
|
element.innerHTML = `
|
|
41
|
-
<swirl-box width="400px">
|
|
41
|
+
<swirl-box max-width="400px">
|
|
42
42
|
<swirl-text>
|
|
43
43
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
|
|
44
44
|
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
|
|
45
45
|
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
|
46
46
|
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
|
|
47
47
|
amet.
|
|
48
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
|
|
49
|
+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
|
|
50
|
+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
|
51
|
+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
|
|
52
|
+
amet.
|
|
53
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
|
|
54
|
+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
|
|
55
|
+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
|
56
|
+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
|
|
57
|
+
amet.
|
|
58
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
|
|
59
|
+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
|
|
60
|
+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
|
61
|
+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
|
|
62
|
+
amet.
|
|
63
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
|
|
64
|
+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
|
|
65
|
+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
|
66
|
+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
|
|
67
|
+
amet.
|
|
68
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
|
|
69
|
+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
|
|
70
|
+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
|
71
|
+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
|
|
72
|
+
amet.
|
|
73
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
|
|
74
|
+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
|
|
75
|
+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
|
76
|
+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
|
|
77
|
+
amet.
|
|
48
78
|
</swirl-text>
|
|
49
79
|
</swirl-box>
|
|
50
80
|
`;
|
|
@@ -6,6 +6,7 @@ const SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGAT
|
|
|
6
6
|
const SECONDARY_NAVIGATION_VIEW_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGATION_VIEW_STATE";
|
|
7
7
|
const NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE";
|
|
8
8
|
/**
|
|
9
|
+
* @deprecated This component is deprecated and will be removed in the next major release.
|
|
9
10
|
* @slot logo - Logo shown inside header.
|
|
10
11
|
* @slot left-header-tools - Tools positioned on the header's left-hand side.
|
|
11
12
|
* @slot right-header-tools - Tools positioned on the header's right-hand side.
|
|
@@ -63,6 +64,7 @@ export class SwirlShellLayout {
|
|
|
63
64
|
};
|
|
64
65
|
}
|
|
65
66
|
componentWillLoad() {
|
|
67
|
+
console.warn('[Swirl] The "swirl-shell-layout" component is deprecated and will be removed in the next major release.');
|
|
66
68
|
this.isDesktopViewport = isDesktopViewport();
|
|
67
69
|
this.collectNavItems();
|
|
68
70
|
const restoredNavigationCollapseState = localStorage.getItem(NAVIGATION_COLLAPSE_STORAGE_KEY) === "true";
|
|
@@ -173,24 +175,24 @@ export class SwirlShellLayout {
|
|
|
173
175
|
"shell-layout--mobile-navigation-active": this.mobileNavigationActive,
|
|
174
176
|
"shell-layout--navigation-collapsed": mainNavCollapsed,
|
|
175
177
|
});
|
|
176
|
-
return (h(Host, { key: '
|
|
178
|
+
return (h(Host, { key: '5f5458f6460183f2d6a2ce7bdc95ff5d160c0b6a' }, h("div", { key: '92d0471c277bf968adc8a8f4e9afc578288b53f2', class: className }, h("header", { key: 'dc249ffe59a95fbf9b90a79b2ac0e1d3aaf29b40', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'f667bd28c24008ee31d66ae3920038099130fff1', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'b2f378e9d99b1e363da281962521163473553b82', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: 'dc2b3b695738a372f03c79c0731466b085f2ebd8', content: this.navigationCollapsed
|
|
177
179
|
? this.expandNavigationButtonLabel
|
|
178
|
-
: this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '
|
|
180
|
+
: this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: 'a02c4615e817b81522ccd440d222ff5b840775c1', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (h("swirl-icon-dock-left-expand", { size: 20 })) : (h("swirl-icon-dock-left-collapse", { size: 20 })), h("swirl-visually-hidden", { key: 'd9b356e34b82b0acaa2c106350f249b4a2565c90' }, this.navigationCollapsed
|
|
179
181
|
? this.expandNavigationButtonLabel
|
|
180
|
-
: this.collapseNavigationButtonLabel))), h("a", { key: '
|
|
182
|
+
: this.collapseNavigationButtonLabel))), h("a", { key: '6986f46235298e58f35bd5ad31684eb2cfabe86d', class: "shell-layout__header-tool", onClick: this.historyBackClick.emit, href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: 'f68f92c0821fd6b54b8341745cf558b334edd6f0', size: 20 }), h("swirl-visually-hidden", { key: '22801f633563ba275ebe088d2a4c341dda758544' }, this.browserBackButtonLabel)), h("a", { key: '02e4c396ccb4b076b9e1d5dd565bf3e5178cc7b5', class: "shell-layout__header-tool", onClick: this.historyForwardClick.emit, href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: 'e1a884ed5b576ce45c36cd55be3f8301a9c25ab6', size: 20 }), h("swirl-visually-hidden", { key: '43e83f5f482f28003a57c25c27d337c62cd8ee64' }, this.browserForwardButtonLabel)), h("slot", { key: '6aa5a13fcdd924ccce93ed986dfa9cf44ca15441', name: "left-header-tools" })), h("div", { key: '7c98d9434eb3e5398aee3c9890fd3ebd9a97ec6d', class: "shell-layout__logo" }, h("slot", { key: '381b69009d83758713dcbaaef7ddbaf7408f5c3f', name: "logo" })), h("div", { key: '957cf5301164474a28ab07ad4b034ed364404a73', class: "shell-layout__header-right" }, h("slot", { key: '2db7f15807045fd66d9181aa0a382674d9d35ff5', name: "right-header-tools" }), h("slot", { key: 'b472d77a4420c68f93999ceeacf4bf7176c1072c', name: "avatar" }))), h("div", { key: '81e27f03e1c6d76fdd2754a0c8b33b2aa1126bc8', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '308d981df11d92d1cfbe1bd1b421348a7fd0f81a', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'facc60dce3cc42bf9ad138f096d00235694f01bc', class: "shell-layout__mobile-header" }, h("slot", { key: '6843ea436a024963dc0f58cd42fe23dee5cbca9e', name: "mobile-logo" }), h("div", { key: '85749821ec1fd9092b646d8f643886aca9f8f393', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '5a30b7dfd62669531443761544477b4baeaf4a84', name: "mobile-header-tools" }), h("button", { key: '5340f5a188c5bcb98c63efa9ef3cda7b62e6b997', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '40db2029f3a81e828db27e890b52ce0d2805173c', size: 20 }), h("swirl-visually-hidden", { key: 'a25e358e0afc4027a0d52cbc1cf62df6a0719cc4' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: 'a8b8a017a40a43f89c50f60c96bbbeb4d6181b3d', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '1200560f555a2e11e7bed30697283ba660e8ea52' }, h("span", { key: 'a2a5c11b456c91b1fe4d006c05803829a633e3d5', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '55c3ec6a88c7e8986a7c94f4e751a4a899ffb457', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '938ce0319668ed1aaee57cf435c5f8c8531d2114', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '8da10296cd7d1857e7b62b89da62984814111022', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'bfec55992924ce4f0bab5ba5b99e7830a925d447', paddingBlockEnd: "16" }, h("swirl-stack", { key: 'e06da8582e4e41ccb8c210292f466233777a97f4', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '1960f4768f22a6d6c8b7ef1aabcaa7b77e01a8be', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
|
|
181
183
|
? "<swirl-icon-expand-more></swirl-icon-expand-more>"
|
|
182
184
|
: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
|
|
183
185
|
? this.secondaryNavExpandLabel
|
|
184
|
-
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '
|
|
186
|
+
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '2fd6f3c41e1752103a32d59f152fad121e0a7ce1', icon: this.secondaryNavView === "grid"
|
|
185
187
|
? "<swirl-icon-menu></swirl-icon-menu>"
|
|
186
188
|
: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
|
|
187
189
|
? this.gridNavLayoutToggleLabel
|
|
188
|
-
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '
|
|
190
|
+
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '542d6a0dbcb290a175d9d9d4e9eb0f8ec2462687', class: {
|
|
189
191
|
[`shell-layout__secondary-nav-items--${this.secondaryNavGridLayoutVariant}`]: true,
|
|
190
192
|
"shell-layout__secondary-nav-items": true,
|
|
191
193
|
"shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
|
|
192
194
|
this.secondaryNavView === "grid",
|
|
193
|
-
} }, h("slot", { key: '
|
|
195
|
+
} }, h("slot", { key: '55a2836a2dbb4b11e2dd49063e45db21941d1490', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: 'afa4d7ab3cadc90ddd89b11dbc84bb28acac4c41', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '6beead6ae681df7cf8cff9734c5529668c975962' })))));
|
|
194
196
|
}
|
|
195
197
|
static get is() { return "swirl-shell-layout"; }
|
|
196
198
|
static get encapsulation() { return "scoped"; }
|
package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import classnames from "classnames";
|
|
3
3
|
/**
|
|
4
|
+
* @deprecated This component is deprecated and will be removed in the next major release.
|
|
4
5
|
* @slot icon - Image or icon to display in the navigation item.
|
|
5
6
|
*/
|
|
6
7
|
export class SwirlShellNavigationItem {
|
|
@@ -12,6 +13,7 @@ export class SwirlShellNavigationItem {
|
|
|
12
13
|
this.variant = "default";
|
|
13
14
|
}
|
|
14
15
|
componentWillLoad() {
|
|
16
|
+
console.warn('[Swirl] The "swirl-shell-navigation-item" component is deprecated and will be removed in the next major release.');
|
|
15
17
|
this.forceIconProps();
|
|
16
18
|
}
|
|
17
19
|
componentDidRender() {
|
|
@@ -61,9 +63,9 @@ export class SwirlShellNavigationItem {
|
|
|
61
63
|
const tooltipContent = this.description
|
|
62
64
|
? `${this.label} ${this.description}`
|
|
63
65
|
: this.label;
|
|
64
|
-
return (h(Host, { key: '
|
|
66
|
+
return (h(Host, { key: 'aeac0acbbe7cd9c55c0b8d4d2821aa3918d05aa4' }, h("swirl-tooltip", { key: 'fbd93c62eb3fba3d3e49f2a46870a23f7ef09ffa', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right" }, h(Tag, { key: '912601d126642c44f55a82886b0e5d74aa77e0b9', "aria-current": this.swirlAriaCurrent, class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button", title: !this.hideLabel ? this.label : undefined }, h("span", { key: '88ff2c7cf186b1abf8d64a0e7a4df63dc0c559ef', class: "shell-navigation-item__icon" }, h("slot", { key: 'dfcf9b9382b959fac044b3790ecaf1b419e65937', name: "icon" })), !this.hideLabel ? (this.variant !== "default" ? (h("span", { class: labelClassNames }, this.label)) : (h("div", { class: "shell-navigation-item__text-wrapper" }, h("span", { class: labelClassNames }, this.label), this.description && (h("span", { class: "shell-navigation-item__description" }, this.description))))) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), hasBadge && (h("span", { key: 'adea33c07e645202fc33b7d1463954caa4730e08', class: "shell-navigation-item__badge-wrapper" }, h("swirl-badge", { key: 'f92c9475d2f1060f0f3a2a2c30b9cea6d8e396df', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
|
|
65
67
|
"shell-navigation-item__badge--dot": this.badgeLabel === "",
|
|
66
|
-
}), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: '
|
|
68
|
+
}), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: '4a3b80ead81bc32dcf84c958ed0ee9ed8f15f9b7', class: "shell-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "s", variant: "strong" })), showIsNewBadge && (h("swirl-badge", { key: 'de9667d2fd1c275b108f1df7875b6df7a39af77c', class: "shell-navigation-item__is-new-badge", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "xs", variant: "dot" }))))));
|
|
67
69
|
}
|
|
68
70
|
static get is() { return "swirl-shell-navigation-item"; }
|
|
69
71
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as a,HTMLElement as e,createEvent as l,h as t,Host as i,transformTag as
|
|
1
|
+
import{proxyCustomElement as a,HTMLElement as e,createEvent as l,h as t,Host as i,transformTag as s}from"@stencil/core/internal/client";import{c}from"./index2.js";import{d as r}from"./swirl-icon-info2.js";import{d}from"./swirl-stack2.js";import{d as o}from"./swirl-tooltip2.js";import{v as n}from"./v4.js";const f=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.valueChange=l(this,"valueChange",7),this.intent="default",this.vertical=!1,this.elementId="data-cell-"+n(),this.handleRadioClick=a=>{const e=a.target,l=this.el.querySelector('swirl-radio[slot="content"]');if(e.contains(l)){const a=l?.querySelector('input[type="radio"]');a.click()}},this.handleClick=a=>{this.handleRadioClick(a),this.valueChange.emit(a)}}render(){const a=!!this.el.querySelector('[slot="media"]'),e=!!this.el.querySelector('[slot="suffix"]'),l=!!this.label,s=!!this.el.querySelector('[slot="content"]'),r=!!this.el.querySelector('swirl-checkbox[slot="content"]'),d=!!this.el.querySelector('swirl-radio[slot="content"]'),o=c("data-cell",{"data-cell--vertical":this.vertical,"data-cell--has-media":a,"data-cell--has-suffix":e,"data-cell--has-content":s,"data-cell--no-label":!l,"data-cell--interactive":r||d,["data-cell--intent-"+this.intent]:this.intent}),n=this.elementId+"-label",f=this.elementId+"-value",u="SWIRL-DATA-CELL-STACK"===this.el.parentElement?.tagName,b=u?"listitem":"group",p=r||d?"button":void 0,h=u&&!p?"group":p,v=t("swirl-stack",{key:"c0a4a14faad9ff0c649f8594ede3401bfaace84b",orientation:"horizontal",align:"center",spacing:"4"},t("span",{key:"b7a45482eaef7333e7a5b4e7b2a6d3a6f3bd45f5",class:"data-cell__label",id:n,role:"term"},this.label),this.tooltip&&t("swirl-tooltip",{key:"43cccb7abb557f481805cb7d2ff76a85353ded30",class:"data-cell__tooltip",content:this.tooltip,position:"right"},t("swirl-icon-info",{key:"0e5635708a0ea574c5afe38cde05cca227f52327",size:16,tabIndex:0})));return t(i,{key:"0b1e6388f330d36cbf7c8b40d91ff475a08a9f7d",role:b},t("div",{key:"f5bd2b0e7d38b7b879ddd7d7f9244772583b5d7e",class:o,part:"data-cell",onClick:r||d?this.handleClick:void 0,role:h,tabIndex:r||d?0:void 0},a&&t("div",{key:"338a5f743913eca6a97b8e9c75e9c5372ef5af67",class:"data-cell__media","aria-hidden":"true"},t("slot",{key:"9f30d751976bf5ee4426fb045db57a469eb0940a",name:"media"})),t("div",{key:"257a35f56ec56079f06edd4af9ef8a785bf23ee0",class:"data-cell__content"},l&&t("div",{key:"64b6fc162c07b8937f91787d238f132b282c8a96",class:"data-cell__label-wrapper"},v),(s||this.value||e)&&t("div",{key:"96a8d037bc0cffdde98ff9202657d3ab45568adc",class:"data-cell__value-wrapper",role:"definition","aria-labelledby":l?n:void 0,id:f},s?t("div",{class:"data-cell__input"},t("slot",{name:"content"})):this.value&&t("div",{class:"data-cell__value"},this.value))),e&&t("div",{key:"1e1464e5d2b7cf193aae179330b29e72653b6589",class:"data-cell__suffix"},t("slot",{key:"6e385ec659b10c2f0abd6730b6dcae8f67d0d942",name:"suffix"}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell{display:flex;align-items:center;gap:var(--s-space-8);width:100%;padding:var(--s-space-12) var(--s-space-16);background-color:var(--s-surface-raised-50-default);border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-l))}.data-cell--interactive{cursor:pointer}.data-cell--intent-default{background-color:var(--swirl-tag-background-default)}.data-cell--intent-info{background-color:var(--s-surface-info-subdued)}.data-cell--intent-critical{background-color:var(--s-surface-critical-subdued)}.data-cell--intent-warning{background-color:var(--s-surface-warning-subdued)}.data-cell--intent-success{background-color:var(--s-surface-success-subdued)}.data-cell--intent-special{background-color:var(--s-decorative-grape-surface-subdued)}.data-cell--intent-translucent{background-color:var(--s-surface-on-image-default)}.data-cell--vertical{align-items:center}.data-cell__media{flex-shrink:0;display:flex;align-items:center}.data-cell__media ::slotted(swirl-avatar){--swirl-avatar-background-color:var(--s-surface-default)}.data-cell__content{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-space-24)}.data-cell--no-label .data-cell__content,.data-cell--no-label .data-cell__value-wrapper,.data-cell--no-label .data-cell__input{width:100%}.data-cell--vertical .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell__label-wrapper{flex-shrink:0;min-width:0}.data-cell:not(.data-cell--vertical) .data-cell__label-wrapper{width:calc(160px + var(--s-space-4) + 16px)}.data-cell__label{display:block;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);font-weight:var(--s-font-weight-normal)}.data-cell:not(.data-cell--vertical) .data-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.data-cell__tooltip swirl-icon-info{flex-shrink:0;color:var(--s-text-subdued)}.data-cell__value-wrapper{display:flex;align-items:center;gap:var(--s-space-4);flex-shrink:1;min-width:0}.data-cell--vertical .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}.data-cell__value{flex:1;min-width:0;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-cell--vertical .data-cell__value{white-space:normal;overflow:visible;text-overflow:clip}.data-cell__suffix{flex-shrink:0}.data-cell__input{width:100%}.data-cell__input ::slotted(swirl-form-control){--swirl-form-control-label-background-color:var( --swirl-data-cell-input-background, var(--s-surface-default) )}.data-cell__input ::slotted(swirl-checkbox),.data-cell__input ::slotted(swirl-radio){width:100%}@media (max-width: 767px){.data-cell:not(.data-cell--vertical) .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell:not(.data-cell--vertical) .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}}"}},[257,"swirl-data-cell",{intent:[1],label:[1],tooltip:[1],value:[1],vertical:[4]}]),u=f,b=function(){"undefined"!=typeof customElements&&["swirl-data-cell","swirl-icon-info","swirl-stack","swirl-tooltip"].forEach((a=>{switch(a){case"swirl-data-cell":customElements.get(s(a))||customElements.define(s(a),f);break;case"swirl-icon-info":customElements.get(s(a))||r();break;case"swirl-stack":customElements.get(s(a))||d();break;case"swirl-tooltip":customElements.get(s(a))||o()}}))};export{u as SwirlDataCell,b as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as s,HTMLElement as l,createEvent as e,h as o,Host as t,transformTag as i}from"@stencil/core/internal/client";import{d as a,e as c}from"./bodyScrollLock.esm.js";import{c as r}from"./index2.js";import{d as n}from"./swirl-button2.js";const d=s(class extends l{constructor(s){super(),!1!==s&&this.__registerHost(),this.closeModal=e(this,"closeModal",7),this.isClosing=!0,this.onDialogClose=()=>{this.closeModal.emit()},this.onKeyDown=s=>{"Escape"===s.code&&(s.stopImmediatePropagation(),s.preventDefault(),this.close())},this.onContentClick=s=>{s.stopPropagation()},this.onClose=()=>{this.close()}}componentDidLoad(){this.setDialogCustomProps(),requestAnimationFrame((()=>{this.modalEl.showModal(),a(this.
|
|
1
|
+
import{proxyCustomElement as s,HTMLElement as l,createEvent as e,h as o,Host as t,transformTag as i}from"@stencil/core/internal/client";import{d as a,e as c}from"./bodyScrollLock.esm.js";import{c as r}from"./index2.js";import{d as n}from"./swirl-button2.js";const d=s(class extends l{constructor(s){super(),!1!==s&&this.__registerHost(),this.closeModal=e(this,"closeModal",7),this.isClosing=!0,this.onDialogClose=()=>{this.closeModal.emit()},this.onKeyDown=s=>{"Escape"===s.code&&(s.stopImmediatePropagation(),s.preventDefault(),this.close())},this.onContentClick=s=>{s.stopPropagation()},this.onClose=()=>{this.close()}}componentDidLoad(){this.setDialogCustomProps(),requestAnimationFrame((()=>{this.modalEl.showModal(),a(this.scrollContainerEl),this.isClosing=!1}))}disconnectedCallback(){this.modalEl?.open&&this.modalEl.close(),c(this.scrollContainerEl)}async close(){this.isClosing=!0,setTimeout((()=>{this.modalEl.close()}),300)}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}render(){const s=r("modal-shell",{"modal-shell--closing":this.isClosing});return o(t,{key:"040edfa9e8ab0bc22c1f653ceadada93809465be"},o("dialog",{key:"b9c9724d366b5a5ea6302451c87b05cd10a34293","aria-label":this.label,class:s,onClose:this.onDialogClose,onKeyDown:this.onKeyDown,ref:s=>this.modalEl=s},o("div",{key:"3fcb9e41c72cc03e91414b779c4ed3b054e803dc",class:"modal-shell__backdrop"}),o("div",{key:"485fba3bc5aa2e96d15aa5fd3b22d74af522fe44",class:"modal-shell__scroll-container",onClick:this.onClose,ref:s=>this.scrollContainerEl=s},o("div",{key:"4f5421cee0190f021279e95f9e3f3c4c17473a14",class:"modal-shell__scroll-container__content",onClick:this.onContentClick},o("slot",{key:"2c36d7f74b599b15fd2de8ae12b72a67fb05fb81"}))),o("swirl-button",{key:"c0ac4350a2a79a0fc2c56472559aae562ebb429a",class:"modal-shell__close-button",icon:"<swirl-icon-close color='strong'></swirl-icon-close>",label:this.closeButtonLabel,hideLabel:!0,variant:"translucent",onClick:this.onClose})))}static get style(){return".sc-swirl-modal-shell-h{display:block}.sc-swirl-modal-shell-h *.sc-swirl-modal-shell{box-sizing:border-box}.modal-shell.sc-swirl-modal-shell{position:fixed;inset:0;z-index:var(--s-z-40);border:none;padding:0;width:100%;height:100%;max-width:none;max-height:none;overflow:visible;background:transparent}.modal-shell.sc-swirl-modal-shell::backdrop{display:none}.modal-shell__backdrop.sc-swirl-modal-shell{position:fixed;inset:0;z-index:1;background-color:var(--s-translucent-medium-default);opacity:1;-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));transition:opacity 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out;transition:opacity 0.3s ease-out, backdrop-filter 0.3s ease-out;transition:opacity 0.3s ease-out, backdrop-filter 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out}.modal-shell__scroll-container.sc-swirl-modal-shell{overflow-y:auto;position:fixed;inset:0;z-index:2;display:grid;padding:var(--s-space-24);justify-content:center;align-items:center}.modal-shell__scroll-container__content.sc-swirl-modal-shell{opacity:1;transform:scale(1);transition:opacity 0.2s ease-out, transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1)}.modal-shell__close-button.sc-swirl-modal-shell{position:fixed;top:var(--s-space-16);right:var(--s-space-16);z-index:3;opacity:1;transform:scale(1);transition:opacity 0.2s ease-out, transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1)}.modal-shell--closing.sc-swirl-modal-shell .modal-shell__backdrop.sc-swirl-modal-shell{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}.modal-shell--closing.sc-swirl-modal-shell .modal-shell__scroll-container__content.sc-swirl-modal-shell,.modal-shell--closing.sc-swirl-modal-shell .modal-shell__close-button.sc-swirl-modal-shell{opacity:0;transform:scale(1.1)}"}},[262,"swirl-modal-shell",{label:[1],closeButtonLabel:[1,"close-button-label"],isClosing:[32],close:[64]}]),h=d,b=function(){"undefined"!=typeof customElements&&["swirl-modal-shell","swirl-button"].forEach((s=>{switch(s){case"swirl-modal-shell":customElements.get(i(s))||customElements.define(i(s),d);break;case"swirl-button":customElements.get(i(s))||n()}}))};export{h as SwirlModalShell,b as defineCustomElement}
|