@getflip/swirl-components 0.222.0 → 0.223.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 +1 -1
- package/dist/cjs/swirl-shell-layout.cjs.entry.js +9 -7
- package/dist/cjs/swirl-table-cell.cjs.entry.js +1 -1
- package/dist/cjs/swirl-table-column.cjs.entry.js +1 -1
- package/dist/cjs/swirl-table-row-group.cjs.entry.js +1 -1
- package/dist/cjs/swirl-table.cjs.entry.js +73 -15
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.js +9 -7
- package/dist/collection/components/swirl-table/swirl-table.css +4 -8
- package/dist/collection/components/swirl-table/swirl-table.js +73 -15
- package/dist/collection/components/swirl-table-cell/swirl-table-cell.css +10 -0
- package/dist/collection/components/swirl-table-column/swirl-table-column.css +9 -0
- package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.css +3 -6
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-shell-layout.js +9 -7
- package/dist/components/swirl-table-cell.js +1 -1
- package/dist/components/swirl-table-column.js +1 -1
- package/dist/components/swirl-table-row-group.js +1 -1
- package/dist/components/swirl-table.js +73 -15
- package/dist/esm/swirl-shell-layout.entry.js +9 -7
- package/dist/esm/swirl-table-cell.entry.js +1 -1
- package/dist/esm/swirl-table-column.entry.js +1 -1
- package/dist/esm/swirl-table-row-group.entry.js +1 -1
- package/dist/esm/swirl-table.entry.js +73 -15
- package/dist/swirl-components/p-1a17a207.entry.js +1 -0
- package/dist/swirl-components/p-7594cf33.entry.js +1 -0
- package/dist/swirl-components/p-9eca1d3a.entry.js +1 -0
- package/dist/swirl-components/p-b4e7cea6.entry.js +1 -0
- package/dist/swirl-components/p-cbc739d8.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-shell-layout/swirl-shell-layout.d.ts +2 -2
- package/dist/types/components/swirl-table/swirl-table.d.ts +7 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-08d14c15.entry.js +0 -1
- package/dist/swirl-components/p-13220615.entry.js +0 -1
- package/dist/swirl-components/p-4def436f.entry.js +0 -1
- package/dist/swirl-components/p-71259db0.entry.js +0 -1
- package/dist/swirl-components/p-cf61e1bd.entry.js +0 -1
|
@@ -31,7 +31,8 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
|
|
|
31
31
|
this.secondaryNavItems = Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='secondary-nav'], [slot='secondary-nav'] swirl-shell-navigation-item"));
|
|
32
32
|
this.toggleNavItemLabels();
|
|
33
33
|
};
|
|
34
|
-
this.toggleSecondaryNavView = () => {
|
|
34
|
+
this.toggleSecondaryNavView = (event) => {
|
|
35
|
+
event.stopPropagation();
|
|
35
36
|
if (this.secondaryNavView === "grid") {
|
|
36
37
|
this.secondaryNavView = "list";
|
|
37
38
|
}
|
|
@@ -41,7 +42,8 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
|
|
|
41
42
|
this.setSecondaryNavItemsTiled();
|
|
42
43
|
localStorage.setItem(SECONDARY_NAVIGATION_VIEW_STORAGE_KEY, String(this.secondaryNavView));
|
|
43
44
|
};
|
|
44
|
-
this.toggleSecondaryNavCollapse = () => {
|
|
45
|
+
this.toggleSecondaryNavCollapse = (event) => {
|
|
46
|
+
event.stopPropagation();
|
|
45
47
|
this.secondaryNavCollapsed = !this.secondaryNavCollapsed;
|
|
46
48
|
localStorage.setItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.secondaryNavCollapsed));
|
|
47
49
|
};
|
|
@@ -177,22 +179,22 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
|
|
|
177
179
|
"shell-layout--navigation-collapsed": this.navigationCollapsed,
|
|
178
180
|
"shell-layout--sidebar-active": this.sidebarActive,
|
|
179
181
|
});
|
|
180
|
-
return (h(Host, { key: '
|
|
182
|
+
return (h(Host, { key: '92965e028660ec4a0dd6532cbbf6af458242897c' }, h("div", { key: 'a24a9b68e31b1709e5092b62f3eae8945446abcf', class: className }, h("header", { key: '4b87606b0a52c9f9c28a1d5925712f0675ecfeec', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '614f5e4e66262889025dd5b44c662f7c1a8a6c50', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'a872ec88ec93df784a9dbc63aaf6cc1a52d2244c', class: "shell-layout__header-left" }, h("button", { key: 'e97c75dbbd122728974316673e1330457f19eaf9', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-dock-left", { key: '50da43ecf3f912fa36c386a9959efa1d76b80fdb', size: 20 }), h("swirl-visually-hidden", { key: 'ce3d6276aae55c79028cd313beb9a7bf221ebf76' }, this.navigationToggleLabel)), h("a", { key: '8e3f10495a30c0f15e8fcb7ae9070e1171714b04', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '272329fac7f7814609b48539708e16ddc0200dbb', size: 20 }), h("swirl-visually-hidden", { key: 'c0120fdec27fe9f2c8cf453e7e04ff5896124cf4' }, this.browserBackButtonLabel)), h("a", { key: '264f76c8c3d51124a221ab8f3c704b01c3f1e76d', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '3d4a49f864035e2ee25603a26167271036510174', size: 20 }), h("swirl-visually-hidden", { key: 'f0537898089b1df1dc5fb61ccae3ed34f44836c2' }, this.browserForwardButtonLabel)), h("slot", { key: '951e7ea60ff412f97305cb96c1a82598508d5e63', name: "left-header-tools" })), h("div", { key: '77c8308a4eca1f53536628df219ccc78613763de', class: "shell-layout__logo" }, h("slot", { key: '2b872739a23d0c98804d28af740cf84e8e654ac0', name: "logo" })), h("div", { key: '06055b0c3516be3115ca54e700bf0e15c1be369b', class: "shell-layout__header-right" }, h("slot", { key: '9654178fe8c8f47fa9b7895fd5239caff720983b', name: "right-header-tools" }), h("button", { key: '77d871163d148929b83743e6621824368d2202e8', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '87c5a5e8dfcc32296a7a4b4c69707c055f6677a8', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: 'c7049d520094643e54598a51a9c80abc9d94f97c' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: 'b1ace1f7fd27bccdc61eb00bfcd50989293bdcd6', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
|
|
181
183
|
? this.sidebarToggleBadgeAriaLabel
|
|
182
|
-
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '
|
|
184
|
+
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '910a55412116b423ba00285441aacd02f2b51e3c', name: "avatar" }))), h("div", { key: '2af2fbd8f1d4dbe9aa97a7468cb26136410aae18', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '23dd3f877bb001663a3e5e6ec72238a9d8931c43', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'e7d0abe5b88f44dff919f3548c649e453c2274ee', class: "shell-layout__mobile-header" }, h("slot", { key: '44fe8dfaa3a304f3d7e5afe0d05b033888cb0ed2', name: "mobile-logo" }), h("div", { key: '8a2be53ceabc13635f6eabc5d00a8d5527556d9d', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '6b048b69b0a63c9d5c769ffb5c2d902702855ea1', name: "mobile-header-tools" }), h("button", { key: '1bb84665cc2f97484f814fa1fd92079c21df2ce6', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '37e18ea6fc5dbe368e1c52aac568f12f29599502', size: 20 }), h("swirl-visually-hidden", { key: 'b8012fd608401d74760dcf5f18186e2046dc50b3' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: 'd1fa96efbfcf0b99e4bf4effe31c6508e035f514', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '6ef8bcf2d8451dc36aa0f16c4ae2e40153bc741c' }, h("span", { key: '8257d50c13b224979e538156f91797920c180397', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'b7ea77ecc173179bb4a4263d62409e0500bc7e1f', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '0f42bd57ceba945d4cba756309a2664bb83796f5', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'd93dee747a91a636ff7bb94a6060fdcb4a6e03aa', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'b80aad606656e5e574166a61067ae69291dad2c8', paddingBlockEnd: "16" }, h("swirl-stack", { key: '08de7d5a0b1d22661b20b6fbff5786aef51211ba', justify: this.navigationCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '2f1b2e375e92bd392c64ae782ff5c8f9f7dc3a45', hideLabel: this.navigationCollapsed, icon: this.secondaryNavCollapsed
|
|
183
185
|
? "<swirl-icon-expand-more></swirl-icon-expand-more>"
|
|
184
186
|
: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
|
|
185
187
|
? this.secondaryNavExpandLabel
|
|
186
188
|
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !this.navigationCollapsed &&
|
|
187
|
-
!this.secondaryNavCollapsed && (h("swirl-button", { key: '
|
|
189
|
+
!this.secondaryNavCollapsed && (h("swirl-button", { key: '26db5633d9c235f376451f54be9d6a43387bd9dc', icon: this.secondaryNavView === "grid"
|
|
188
190
|
? "<swirl-icon-menu></swirl-icon-menu>"
|
|
189
191
|
: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
|
|
190
192
|
? this.gridNavLayoutToggleLabel
|
|
191
|
-
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '
|
|
193
|
+
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: 'e5e98f4cc25462536f076cea469fdc5ceff80546', class: {
|
|
192
194
|
"shell-layout__secondary-nav-items": true,
|
|
193
195
|
"shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
|
|
194
196
|
this.secondaryNavView === "grid",
|
|
195
|
-
} }, h("slot", { key: '
|
|
197
|
+
} }, h("slot", { key: '15ef5908f4021271eb81bbba6e588025f6c0dfdb', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '2674b8624a508679d80d906cafae84c9200c13c9', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '79b11456e9ba1b2757303b49436c660f8b00004a' })), h("aside", { key: '09c4067dba7a8e36581f7a45f1061656134fd2cb', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '010cb284efba3704c1989d481bd765259d80d1b8', class: "shell-layout__sidebar-body" }, h("div", { key: 'db132c6c718b6499130be2fab5696185062fa156', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '7f6411a9d71bcabf9c2cb81d8401caa32545cbe9', name: "sidebar-app-bar" })), h("div", { key: 'd7c6f80ab3fcfbfa2e4191002bfee8194a0844e5', class: "shell-layout__sidebar-content" }, h("slot", { key: 'eba1265ba878bf6a0fc15f0c27d0637aeebde27e', name: "sidebar" })))))));
|
|
196
198
|
}
|
|
197
199
|
get el() { return this; }
|
|
198
200
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const swirlTableCellCss = ":host{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default);word-break:break-word;-webkit-hyphens:auto;hyphens:auto;transition:box-shadow 0.15s}:host(.table-cell--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-cell--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}";
|
|
3
|
+
const swirlTableCellCss = ":host{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default);word-break:break-word;-webkit-hyphens:auto;hyphens:auto;transition:box-shadow 0.15s}:host(.table-cell--is-sticky){position:sticky}:host(.table-cell--is-sticky-right){position:sticky;right:0;overflow:hidden}:host(.table-cell--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-cell--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}";
|
|
4
4
|
const SwirlTableCellStyle0 = swirlTableCellCss;
|
|
5
5
|
|
|
6
6
|
const SwirlTableCell$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTableCell extends HTMLElement {
|
|
@@ -3,7 +3,7 @@ import { c as closestPassShadow } from './utils.js';
|
|
|
3
3
|
import { d as defineCustomElement$3 } from './swirl-icon-arrow-downward2.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './swirl-icon-arrow-upward2.js';
|
|
5
5
|
|
|
6
|
-
const swirlTableColumnCss = ":host{display:flex;overflow:hidden;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);background-color:var(--s-surface-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;letter-spacing:var(--s-letter-spacing-tighter);text-overflow:ellipsis;transition:box-shadow 0.15s;gap:var(--s-space-8)}:host(.table-column--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-column--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}.table-column__sort-indicator{display:inline-flex;width:1.25rem;height:1.25rem;flex-grow:0;flex-shrink:0}";
|
|
6
|
+
const swirlTableColumnCss = ":host{display:flex;overflow:hidden;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);background-color:var(--s-surface-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;letter-spacing:var(--s-letter-spacing-tighter);text-overflow:ellipsis;transition:box-shadow 0.15s;gap:var(--s-space-8)}:host(.table-column--is-sticky){position:sticky}:host(.table-column--is-sticky-right){position:sticky;right:0}:host(.table-column--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-column--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}.table-column__sort-indicator{display:inline-flex;width:1.25rem;height:1.25rem;flex-grow:0;flex-shrink:0}";
|
|
7
7
|
const SwirlTableColumnStyle0 = swirlTableColumnCss;
|
|
8
8
|
|
|
9
9
|
const SwirlTableColumn$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTableColumn extends HTMLElement {
|
|
@@ -3,7 +3,7 @@ import { d as defineCustomElement$4 } from './swirl-button2.js';
|
|
|
3
3
|
import { d as defineCustomElement$3 } from './swirl-icon-info2.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './swirl-tooltip2.js';
|
|
5
5
|
|
|
6
|
-
const swirlTableRowGroupCss = ":host{position:relative;z-index:1;display:block}:host *{box-sizing:border-box}:host(:hover),:host(:focus-within){z-index:2}.table-row-group__header-row{position:relative;z-index:var(--s-z-10);padding:var(--s-space-12) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-surface-raised-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);display:flex;align-items:center}
|
|
6
|
+
const swirlTableRowGroupCss = ":host{position:relative;z-index:1;display:block}:host *{box-sizing:border-box}:host(:hover),:host(:focus-within){z-index:2}.table-row-group__header-row{position:relative;z-index:var(--s-z-10);padding:var(--s-space-12) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-surface-raised-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);display:flex;align-items:center}.table-row-group__label{position:sticky;left:var(--s-space-16)}.table-row-group__tooltip{display:inline-flex;margin-left:var(--s-space-4);vertical-align:middle}.table-row-group__tooltip-icon{color:var(--s-icon-default)}.table-row-group__collapse-icon{color:var(--s-icon-default);padding-right:var(--s-space-20)}.table-row-group__rows-container{display:contents;transition:height 0.3s ease-out}.table-row-group__rows-container.is-hidden{height:0}.sc-swirl-button-h{display:flex}";
|
|
7
7
|
const SwirlTableRowGroupStyle0 = swirlTableRowGroupCss;
|
|
8
8
|
|
|
9
9
|
const SwirlTableRowGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTableRowGroup extends HTMLElement {
|
|
@@ -74,7 +74,7 @@ function defer() {
|
|
|
74
74
|
return deferred;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
const swirlTableCss = ":host{position:relative;display:block}:host *{box-sizing:border-box}.table__container{position:relative;overflow:auto;width:100%}.table__container--scrolled{--swirl-table-sticky-right-shadow:
|
|
77
|
+
const swirlTableCss = ":host{position:relative;display:block}:host *{box-sizing:border-box}.table__container{position:relative;overflow:auto;width:100%}.table__container--scrolled{--swirl-table-sticky-right-shadow:4px 0 16px -4px rgba(23, 23, 23, 0.04),\n 2px 0 4px -2px rgba(23, 23, 23, 0.04)}.table__container--scrollable:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px rgba(23, 23, 23, 0.04),\n 0px 1px 4px 0px rgba(23, 23, 23, 0.04)}.table__table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header ::slotted(*){display:flex}.table__empty-row{display:flex}.table__empty-row-cell{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell>*{flex-grow:1}";
|
|
78
78
|
const SwirlTableStyle0 = swirlTableCss;
|
|
79
79
|
|
|
80
80
|
const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTable extends HTMLElement {
|
|
@@ -94,7 +94,7 @@ const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTable extends H
|
|
|
94
94
|
this.resetRowGroupStyles();
|
|
95
95
|
this.layoutEmptyRow();
|
|
96
96
|
this.layoutRowGroups();
|
|
97
|
-
this.
|
|
97
|
+
this.layOutCellsAndColumns();
|
|
98
98
|
}, 16, { leading: true });
|
|
99
99
|
this.onScroll = () => {
|
|
100
100
|
this.updateScrolledState();
|
|
@@ -147,22 +147,20 @@ const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTable extends H
|
|
|
147
147
|
resetColumnStyles() {
|
|
148
148
|
const columns = this.getColumns();
|
|
149
149
|
columns.forEach((column) => {
|
|
150
|
-
column.classList.remove("table-column--has-shadow");
|
|
150
|
+
column.classList.remove("table-column--has-shadow", "table-column--is-sticky", "table-column--is-sticky-right");
|
|
151
151
|
column.style.right = "";
|
|
152
152
|
column.style.left = "";
|
|
153
153
|
column.style.position = "";
|
|
154
|
-
column.style.zIndex = "";
|
|
155
154
|
});
|
|
156
155
|
}
|
|
157
156
|
resetCellStyles() {
|
|
158
157
|
const cells = this.getCells();
|
|
159
158
|
cells.forEach((cell) => {
|
|
160
|
-
cell.classList.remove("table-cell--has-shadow");
|
|
159
|
+
cell.classList.remove("table-cell--has-shadow", "table-cell--is-sticky", "table-cell--is-sticky-right");
|
|
161
160
|
cell.style.flex = "";
|
|
162
161
|
cell.style.left = "";
|
|
163
162
|
cell.style.right = "";
|
|
164
163
|
cell.style.position = "";
|
|
165
|
-
cell.style.zIndex = "";
|
|
166
164
|
});
|
|
167
165
|
}
|
|
168
166
|
updateScrolledState() {
|
|
@@ -221,25 +219,85 @@ const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTable extends H
|
|
|
221
219
|
tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = scrollWidth;
|
|
222
220
|
});
|
|
223
221
|
}
|
|
224
|
-
|
|
222
|
+
layOutCellsAndColumns() {
|
|
225
223
|
const columns = this.getColumns();
|
|
226
224
|
const cells = this.getCells();
|
|
227
225
|
columns.forEach((column, colIndex) => {
|
|
228
|
-
const cellsOfColumn =
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
cellsOfColumn.forEach((cell) => {
|
|
233
|
-
cell.style.flex = Boolean(columnWidth) ? `0 0 ${columnWidth}` : "";
|
|
234
|
-
});
|
|
226
|
+
const cellsOfColumn = this.getCellsForColumn(cells, columns, colIndex);
|
|
227
|
+
const columnProperties = this.calculateColumnProperties(column, columns, colIndex);
|
|
228
|
+
cellsOfColumn.forEach((cell) => this.applyCellStyles(cell, column, columnProperties));
|
|
229
|
+
this.applyColumnStyles(column, columnProperties);
|
|
235
230
|
});
|
|
236
231
|
}
|
|
232
|
+
getCellsForColumn(cells, columns, colIndex) {
|
|
233
|
+
return cells.filter((_, cellIndex) => (colIndex - cellIndex) % columns.length === 0);
|
|
234
|
+
}
|
|
235
|
+
calculateColumnProperties(column, columns, colIndex) {
|
|
236
|
+
const leftOffsetForStickyColumn = column.sticky
|
|
237
|
+
? this.getLeftOffsetForStickyColumn(columns, colIndex)
|
|
238
|
+
: 0;
|
|
239
|
+
const columnWidth = `${column.getBoundingClientRect().width}px`;
|
|
240
|
+
const isLastColumnSticky = column.sticky && columns.length === colIndex + 1;
|
|
241
|
+
const hasShadowRight = column.sticky && !this.hasStickyColumnsToRight(columns, colIndex);
|
|
242
|
+
return {
|
|
243
|
+
leftOffsetForStickyColumn,
|
|
244
|
+
columnWidth,
|
|
245
|
+
isLastColumnSticky,
|
|
246
|
+
hasShadowRight,
|
|
247
|
+
};
|
|
248
|
+
}
|
|
249
|
+
applyCellStyles(cell, column, columnProperties) {
|
|
250
|
+
const { leftOffsetForStickyColumn, columnWidth, isLastColumnSticky, hasShadowRight, } = columnProperties;
|
|
251
|
+
cell.style.flex = Boolean(columnWidth) ? `0 0 ${columnWidth}` : "";
|
|
252
|
+
if (isMobileViewport()) {
|
|
253
|
+
return;
|
|
254
|
+
}
|
|
255
|
+
if (column.sticky && !isLastColumnSticky) {
|
|
256
|
+
cell.classList.add("table-cell--is-sticky");
|
|
257
|
+
cell.style.left = leftOffsetForStickyColumn + "px";
|
|
258
|
+
if (hasShadowRight) {
|
|
259
|
+
cell.classList.add("table-cell--has-shadow-right");
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
if (isLastColumnSticky) {
|
|
263
|
+
cell.classList.add("table-cell--is-sticky-right", "table-cell--has-shadow-left");
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
applyColumnStyles(column, columnProperties) {
|
|
267
|
+
if (isMobileViewport()) {
|
|
268
|
+
return;
|
|
269
|
+
}
|
|
270
|
+
const { leftOffsetForStickyColumn, isLastColumnSticky, hasShadowRight } = columnProperties;
|
|
271
|
+
if (column.sticky && !isLastColumnSticky) {
|
|
272
|
+
column.classList.add("table-column--is-sticky");
|
|
273
|
+
column.style.left = leftOffsetForStickyColumn + "px";
|
|
274
|
+
if (hasShadowRight) {
|
|
275
|
+
column.classList.add("table-column--has-shadow-right");
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
if (isLastColumnSticky) {
|
|
279
|
+
column.classList.add("table-column--is-sticky-right", "table-column--has-shadow-left");
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
getLeftOffsetForStickyColumn(columns, colIndex) {
|
|
283
|
+
return columns.slice(0, colIndex).reduce((acc, column) => {
|
|
284
|
+
if (column.sticky) {
|
|
285
|
+
acc += column.getBoundingClientRect().width;
|
|
286
|
+
return acc;
|
|
287
|
+
}
|
|
288
|
+
}, 0);
|
|
289
|
+
}
|
|
290
|
+
hasStickyColumnsToRight(columns, colIndex) {
|
|
291
|
+
return columns
|
|
292
|
+
.slice(colIndex + 1, columns.length - 1)
|
|
293
|
+
.some((column) => column.sticky);
|
|
294
|
+
}
|
|
237
295
|
updateEmptyState() {
|
|
238
296
|
const rowsContainer = this.el.querySelector('[slot="rows"]');
|
|
239
297
|
this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
|
|
240
298
|
}
|
|
241
299
|
render() {
|
|
242
|
-
return (h(Host, { key: '
|
|
300
|
+
return (h(Host, { key: '59389d06eecc1d62c7cd2931a8f0946491b44565' }, h("div", { key: '18365ebb43523b9e3277a01f9e48f48f78aa946c', class: "table" }, h("div", { key: 'ccb893bd05311639eb5c4bf4b86cb3a27b1dc9c4', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, h("div", { key: '07bc0ce02a7cc585cdb23e4983afa857b0616982', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: 'bb9ccf052db48f193d401b8e0734010469cd5e63' }, h("div", { key: '3d72d8b1a93cdadf6e93f5fc7882d2dd1a23e9cd', id: "caption" }, this.caption))), h("div", { key: '90f80820ced1232bf9cce6c61bbb44bf2fe0fa91', role: "rowgroup" }, h("div", { key: '88499b5c66ec529d554e1141b19c38ddde849922', class: "table__header", role: "row" }, h("slot", { key: 'e9a1e16c209711c6fd8f7a389842eb29b80e04ea', name: "columns", onSlotchange: this.onSlotChange }))), h("div", { key: '015224e31715570a33746b4032c5d08de2f31316', class: "table__body" }, h("slot", { key: '22ff1f82d5ecb3550a926cbbe853e118155d46b7', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (h("div", { key: '4b85e6ee790e3e31a19f5fbe199b22d30d4e9145', class: "table__empty-row", role: "row" }, h("div", { key: '2a7c656b198016815b960708d7527135523472fa', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("swirl-text", { key: '234015c2f5e389270184716949fbccb63acd4853', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
|
|
243
301
|
}
|
|
244
302
|
get el() { return this; }
|
|
245
303
|
static get style() { return SwirlTableStyle0; }
|
|
@@ -19,7 +19,8 @@ const SwirlShellLayout = class {
|
|
|
19
19
|
this.secondaryNavItems = Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='secondary-nav'], [slot='secondary-nav'] swirl-shell-navigation-item"));
|
|
20
20
|
this.toggleNavItemLabels();
|
|
21
21
|
};
|
|
22
|
-
this.toggleSecondaryNavView = () => {
|
|
22
|
+
this.toggleSecondaryNavView = (event) => {
|
|
23
|
+
event.stopPropagation();
|
|
23
24
|
if (this.secondaryNavView === "grid") {
|
|
24
25
|
this.secondaryNavView = "list";
|
|
25
26
|
}
|
|
@@ -29,7 +30,8 @@ const SwirlShellLayout = class {
|
|
|
29
30
|
this.setSecondaryNavItemsTiled();
|
|
30
31
|
localStorage.setItem(SECONDARY_NAVIGATION_VIEW_STORAGE_KEY, String(this.secondaryNavView));
|
|
31
32
|
};
|
|
32
|
-
this.toggleSecondaryNavCollapse = () => {
|
|
33
|
+
this.toggleSecondaryNavCollapse = (event) => {
|
|
34
|
+
event.stopPropagation();
|
|
33
35
|
this.secondaryNavCollapsed = !this.secondaryNavCollapsed;
|
|
34
36
|
localStorage.setItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.secondaryNavCollapsed));
|
|
35
37
|
};
|
|
@@ -165,22 +167,22 @@ const SwirlShellLayout = class {
|
|
|
165
167
|
"shell-layout--navigation-collapsed": this.navigationCollapsed,
|
|
166
168
|
"shell-layout--sidebar-active": this.sidebarActive,
|
|
167
169
|
});
|
|
168
|
-
return (h(Host, { key: '
|
|
170
|
+
return (h(Host, { key: '92965e028660ec4a0dd6532cbbf6af458242897c' }, h("div", { key: 'a24a9b68e31b1709e5092b62f3eae8945446abcf', class: className }, h("header", { key: '4b87606b0a52c9f9c28a1d5925712f0675ecfeec', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '614f5e4e66262889025dd5b44c662f7c1a8a6c50', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'a872ec88ec93df784a9dbc63aaf6cc1a52d2244c', class: "shell-layout__header-left" }, h("button", { key: 'e97c75dbbd122728974316673e1330457f19eaf9', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-dock-left", { key: '50da43ecf3f912fa36c386a9959efa1d76b80fdb', size: 20 }), h("swirl-visually-hidden", { key: 'ce3d6276aae55c79028cd313beb9a7bf221ebf76' }, this.navigationToggleLabel)), h("a", { key: '8e3f10495a30c0f15e8fcb7ae9070e1171714b04', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '272329fac7f7814609b48539708e16ddc0200dbb', size: 20 }), h("swirl-visually-hidden", { key: 'c0120fdec27fe9f2c8cf453e7e04ff5896124cf4' }, this.browserBackButtonLabel)), h("a", { key: '264f76c8c3d51124a221ab8f3c704b01c3f1e76d', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '3d4a49f864035e2ee25603a26167271036510174', size: 20 }), h("swirl-visually-hidden", { key: 'f0537898089b1df1dc5fb61ccae3ed34f44836c2' }, this.browserForwardButtonLabel)), h("slot", { key: '951e7ea60ff412f97305cb96c1a82598508d5e63', name: "left-header-tools" })), h("div", { key: '77c8308a4eca1f53536628df219ccc78613763de', class: "shell-layout__logo" }, h("slot", { key: '2b872739a23d0c98804d28af740cf84e8e654ac0', name: "logo" })), h("div", { key: '06055b0c3516be3115ca54e700bf0e15c1be369b', class: "shell-layout__header-right" }, h("slot", { key: '9654178fe8c8f47fa9b7895fd5239caff720983b', name: "right-header-tools" }), h("button", { key: '77d871163d148929b83743e6621824368d2202e8', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '87c5a5e8dfcc32296a7a4b4c69707c055f6677a8', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: 'c7049d520094643e54598a51a9c80abc9d94f97c' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: 'b1ace1f7fd27bccdc61eb00bfcd50989293bdcd6', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
|
|
169
171
|
? this.sidebarToggleBadgeAriaLabel
|
|
170
|
-
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '
|
|
172
|
+
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '910a55412116b423ba00285441aacd02f2b51e3c', name: "avatar" }))), h("div", { key: '2af2fbd8f1d4dbe9aa97a7468cb26136410aae18', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '23dd3f877bb001663a3e5e6ec72238a9d8931c43', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'e7d0abe5b88f44dff919f3548c649e453c2274ee', class: "shell-layout__mobile-header" }, h("slot", { key: '44fe8dfaa3a304f3d7e5afe0d05b033888cb0ed2', name: "mobile-logo" }), h("div", { key: '8a2be53ceabc13635f6eabc5d00a8d5527556d9d', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '6b048b69b0a63c9d5c769ffb5c2d902702855ea1', name: "mobile-header-tools" }), h("button", { key: '1bb84665cc2f97484f814fa1fd92079c21df2ce6', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '37e18ea6fc5dbe368e1c52aac568f12f29599502', size: 20 }), h("swirl-visually-hidden", { key: 'b8012fd608401d74760dcf5f18186e2046dc50b3' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: 'd1fa96efbfcf0b99e4bf4effe31c6508e035f514', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '6ef8bcf2d8451dc36aa0f16c4ae2e40153bc741c' }, h("span", { key: '8257d50c13b224979e538156f91797920c180397', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'b7ea77ecc173179bb4a4263d62409e0500bc7e1f', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '0f42bd57ceba945d4cba756309a2664bb83796f5', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'd93dee747a91a636ff7bb94a6060fdcb4a6e03aa', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'b80aad606656e5e574166a61067ae69291dad2c8', paddingBlockEnd: "16" }, h("swirl-stack", { key: '08de7d5a0b1d22661b20b6fbff5786aef51211ba', justify: this.navigationCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '2f1b2e375e92bd392c64ae782ff5c8f9f7dc3a45', hideLabel: this.navigationCollapsed, icon: this.secondaryNavCollapsed
|
|
171
173
|
? "<swirl-icon-expand-more></swirl-icon-expand-more>"
|
|
172
174
|
: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
|
|
173
175
|
? this.secondaryNavExpandLabel
|
|
174
176
|
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !this.navigationCollapsed &&
|
|
175
|
-
!this.secondaryNavCollapsed && (h("swirl-button", { key: '
|
|
177
|
+
!this.secondaryNavCollapsed && (h("swirl-button", { key: '26db5633d9c235f376451f54be9d6a43387bd9dc', icon: this.secondaryNavView === "grid"
|
|
176
178
|
? "<swirl-icon-menu></swirl-icon-menu>"
|
|
177
179
|
: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
|
|
178
180
|
? this.gridNavLayoutToggleLabel
|
|
179
|
-
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '
|
|
181
|
+
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: 'e5e98f4cc25462536f076cea469fdc5ceff80546', class: {
|
|
180
182
|
"shell-layout__secondary-nav-items": true,
|
|
181
183
|
"shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
|
|
182
184
|
this.secondaryNavView === "grid",
|
|
183
|
-
} }, h("slot", { key: '
|
|
185
|
+
} }, h("slot", { key: '15ef5908f4021271eb81bbba6e588025f6c0dfdb', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '2674b8624a508679d80d906cafae84c9200c13c9', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '79b11456e9ba1b2757303b49436c660f8b00004a' })), h("aside", { key: '09c4067dba7a8e36581f7a45f1061656134fd2cb', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '010cb284efba3704c1989d481bd765259d80d1b8', class: "shell-layout__sidebar-body" }, h("div", { key: 'db132c6c718b6499130be2fab5696185062fa156', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '7f6411a9d71bcabf9c2cb81d8401caa32545cbe9', name: "sidebar-app-bar" })), h("div", { key: 'd7c6f80ab3fcfbfa2e4191002bfee8194a0844e5', class: "shell-layout__sidebar-content" }, h("slot", { key: 'eba1265ba878bf6a0fc15f0c27d0637aeebde27e', name: "sidebar" })))))));
|
|
184
186
|
}
|
|
185
187
|
get el() { return getElement(this); }
|
|
186
188
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host } from './index-2d054a87.js';
|
|
2
2
|
|
|
3
|
-
const swirlTableCellCss = ":host{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default);word-break:break-word;-webkit-hyphens:auto;hyphens:auto;transition:box-shadow 0.15s}:host(.table-cell--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-cell--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}";
|
|
3
|
+
const swirlTableCellCss = ":host{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default);word-break:break-word;-webkit-hyphens:auto;hyphens:auto;transition:box-shadow 0.15s}:host(.table-cell--is-sticky){position:sticky}:host(.table-cell--is-sticky-right){position:sticky;right:0;overflow:hidden}:host(.table-cell--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-cell--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}";
|
|
4
4
|
const SwirlTableCellStyle0 = swirlTableCellCss;
|
|
5
5
|
|
|
6
6
|
const SwirlTableCell = class {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-2d054a87.js';
|
|
2
2
|
import { c as closestPassShadow } from './utils-9b747dd7.js';
|
|
3
3
|
|
|
4
|
-
const swirlTableColumnCss = ":host{display:flex;overflow:hidden;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);background-color:var(--s-surface-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;letter-spacing:var(--s-letter-spacing-tighter);text-overflow:ellipsis;transition:box-shadow 0.15s;gap:var(--s-space-8)}:host(.table-column--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-column--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}.table-column__sort-indicator{display:inline-flex;width:1.25rem;height:1.25rem;flex-grow:0;flex-shrink:0}";
|
|
4
|
+
const swirlTableColumnCss = ":host{display:flex;overflow:hidden;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);background-color:var(--s-surface-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;letter-spacing:var(--s-letter-spacing-tighter);text-overflow:ellipsis;transition:box-shadow 0.15s;gap:var(--s-space-8)}:host(.table-column--is-sticky){position:sticky}:host(.table-column--is-sticky-right){position:sticky;right:0}:host(.table-column--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-column--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}.table-column__sort-indicator{display:inline-flex;width:1.25rem;height:1.25rem;flex-grow:0;flex-shrink:0}";
|
|
5
5
|
const SwirlTableColumnStyle0 = swirlTableColumnCss;
|
|
6
6
|
|
|
7
7
|
const SwirlTableColumn = class {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-2d054a87.js';
|
|
2
2
|
|
|
3
|
-
const swirlTableRowGroupCss = ":host{position:relative;z-index:1;display:block}:host *{box-sizing:border-box}:host(:hover),:host(:focus-within){z-index:2}.table-row-group__header-row{position:relative;z-index:var(--s-z-10);padding:var(--s-space-12) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-surface-raised-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);display:flex;align-items:center}
|
|
3
|
+
const swirlTableRowGroupCss = ":host{position:relative;z-index:1;display:block}:host *{box-sizing:border-box}:host(:hover),:host(:focus-within){z-index:2}.table-row-group__header-row{position:relative;z-index:var(--s-z-10);padding:var(--s-space-12) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-surface-raised-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);display:flex;align-items:center}.table-row-group__label{position:sticky;left:var(--s-space-16)}.table-row-group__tooltip{display:inline-flex;margin-left:var(--s-space-4);vertical-align:middle}.table-row-group__tooltip-icon{color:var(--s-icon-default)}.table-row-group__collapse-icon{color:var(--s-icon-default);padding-right:var(--s-space-20)}.table-row-group__rows-container{display:contents;transition:height 0.3s ease-out}.table-row-group__rows-container.is-hidden{height:0}.sc-swirl-button-h{display:flex}";
|
|
4
4
|
const SwirlTableRowGroupStyle0 = swirlTableRowGroupCss;
|
|
5
5
|
|
|
6
6
|
const SwirlTableRowGroup = class {
|
|
@@ -72,7 +72,7 @@ function defer() {
|
|
|
72
72
|
return deferred;
|
|
73
73
|
}
|
|
74
74
|
|
|
75
|
-
const swirlTableCss = ":host{position:relative;display:block}:host *{box-sizing:border-box}.table__container{position:relative;overflow:auto;width:100%}.table__container--scrolled{--swirl-table-sticky-right-shadow:
|
|
75
|
+
const swirlTableCss = ":host{position:relative;display:block}:host *{box-sizing:border-box}.table__container{position:relative;overflow:auto;width:100%}.table__container--scrolled{--swirl-table-sticky-right-shadow:4px 0 16px -4px rgba(23, 23, 23, 0.04),\n 2px 0 4px -2px rgba(23, 23, 23, 0.04)}.table__container--scrollable:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px rgba(23, 23, 23, 0.04),\n 0px 1px 4px 0px rgba(23, 23, 23, 0.04)}.table__table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header ::slotted(*){display:flex}.table__empty-row{display:flex}.table__empty-row-cell{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell>*{flex-grow:1}";
|
|
76
76
|
const SwirlTableStyle0 = swirlTableCss;
|
|
77
77
|
|
|
78
78
|
const SwirlTable = class {
|
|
@@ -90,7 +90,7 @@ const SwirlTable = class {
|
|
|
90
90
|
this.resetRowGroupStyles();
|
|
91
91
|
this.layoutEmptyRow();
|
|
92
92
|
this.layoutRowGroups();
|
|
93
|
-
this.
|
|
93
|
+
this.layOutCellsAndColumns();
|
|
94
94
|
}, 16, { leading: true });
|
|
95
95
|
this.onScroll = () => {
|
|
96
96
|
this.updateScrolledState();
|
|
@@ -143,22 +143,20 @@ const SwirlTable = class {
|
|
|
143
143
|
resetColumnStyles() {
|
|
144
144
|
const columns = this.getColumns();
|
|
145
145
|
columns.forEach((column) => {
|
|
146
|
-
column.classList.remove("table-column--has-shadow");
|
|
146
|
+
column.classList.remove("table-column--has-shadow", "table-column--is-sticky", "table-column--is-sticky-right");
|
|
147
147
|
column.style.right = "";
|
|
148
148
|
column.style.left = "";
|
|
149
149
|
column.style.position = "";
|
|
150
|
-
column.style.zIndex = "";
|
|
151
150
|
});
|
|
152
151
|
}
|
|
153
152
|
resetCellStyles() {
|
|
154
153
|
const cells = this.getCells();
|
|
155
154
|
cells.forEach((cell) => {
|
|
156
|
-
cell.classList.remove("table-cell--has-shadow");
|
|
155
|
+
cell.classList.remove("table-cell--has-shadow", "table-cell--is-sticky", "table-cell--is-sticky-right");
|
|
157
156
|
cell.style.flex = "";
|
|
158
157
|
cell.style.left = "";
|
|
159
158
|
cell.style.right = "";
|
|
160
159
|
cell.style.position = "";
|
|
161
|
-
cell.style.zIndex = "";
|
|
162
160
|
});
|
|
163
161
|
}
|
|
164
162
|
updateScrolledState() {
|
|
@@ -217,25 +215,85 @@ const SwirlTable = class {
|
|
|
217
215
|
tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = scrollWidth;
|
|
218
216
|
});
|
|
219
217
|
}
|
|
220
|
-
|
|
218
|
+
layOutCellsAndColumns() {
|
|
221
219
|
const columns = this.getColumns();
|
|
222
220
|
const cells = this.getCells();
|
|
223
221
|
columns.forEach((column, colIndex) => {
|
|
224
|
-
const cellsOfColumn =
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
cellsOfColumn.forEach((cell) => {
|
|
229
|
-
cell.style.flex = Boolean(columnWidth) ? `0 0 ${columnWidth}` : "";
|
|
230
|
-
});
|
|
222
|
+
const cellsOfColumn = this.getCellsForColumn(cells, columns, colIndex);
|
|
223
|
+
const columnProperties = this.calculateColumnProperties(column, columns, colIndex);
|
|
224
|
+
cellsOfColumn.forEach((cell) => this.applyCellStyles(cell, column, columnProperties));
|
|
225
|
+
this.applyColumnStyles(column, columnProperties);
|
|
231
226
|
});
|
|
232
227
|
}
|
|
228
|
+
getCellsForColumn(cells, columns, colIndex) {
|
|
229
|
+
return cells.filter((_, cellIndex) => (colIndex - cellIndex) % columns.length === 0);
|
|
230
|
+
}
|
|
231
|
+
calculateColumnProperties(column, columns, colIndex) {
|
|
232
|
+
const leftOffsetForStickyColumn = column.sticky
|
|
233
|
+
? this.getLeftOffsetForStickyColumn(columns, colIndex)
|
|
234
|
+
: 0;
|
|
235
|
+
const columnWidth = `${column.getBoundingClientRect().width}px`;
|
|
236
|
+
const isLastColumnSticky = column.sticky && columns.length === colIndex + 1;
|
|
237
|
+
const hasShadowRight = column.sticky && !this.hasStickyColumnsToRight(columns, colIndex);
|
|
238
|
+
return {
|
|
239
|
+
leftOffsetForStickyColumn,
|
|
240
|
+
columnWidth,
|
|
241
|
+
isLastColumnSticky,
|
|
242
|
+
hasShadowRight,
|
|
243
|
+
};
|
|
244
|
+
}
|
|
245
|
+
applyCellStyles(cell, column, columnProperties) {
|
|
246
|
+
const { leftOffsetForStickyColumn, columnWidth, isLastColumnSticky, hasShadowRight, } = columnProperties;
|
|
247
|
+
cell.style.flex = Boolean(columnWidth) ? `0 0 ${columnWidth}` : "";
|
|
248
|
+
if (isMobileViewport()) {
|
|
249
|
+
return;
|
|
250
|
+
}
|
|
251
|
+
if (column.sticky && !isLastColumnSticky) {
|
|
252
|
+
cell.classList.add("table-cell--is-sticky");
|
|
253
|
+
cell.style.left = leftOffsetForStickyColumn + "px";
|
|
254
|
+
if (hasShadowRight) {
|
|
255
|
+
cell.classList.add("table-cell--has-shadow-right");
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
if (isLastColumnSticky) {
|
|
259
|
+
cell.classList.add("table-cell--is-sticky-right", "table-cell--has-shadow-left");
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
applyColumnStyles(column, columnProperties) {
|
|
263
|
+
if (isMobileViewport()) {
|
|
264
|
+
return;
|
|
265
|
+
}
|
|
266
|
+
const { leftOffsetForStickyColumn, isLastColumnSticky, hasShadowRight } = columnProperties;
|
|
267
|
+
if (column.sticky && !isLastColumnSticky) {
|
|
268
|
+
column.classList.add("table-column--is-sticky");
|
|
269
|
+
column.style.left = leftOffsetForStickyColumn + "px";
|
|
270
|
+
if (hasShadowRight) {
|
|
271
|
+
column.classList.add("table-column--has-shadow-right");
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
if (isLastColumnSticky) {
|
|
275
|
+
column.classList.add("table-column--is-sticky-right", "table-column--has-shadow-left");
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
getLeftOffsetForStickyColumn(columns, colIndex) {
|
|
279
|
+
return columns.slice(0, colIndex).reduce((acc, column) => {
|
|
280
|
+
if (column.sticky) {
|
|
281
|
+
acc += column.getBoundingClientRect().width;
|
|
282
|
+
return acc;
|
|
283
|
+
}
|
|
284
|
+
}, 0);
|
|
285
|
+
}
|
|
286
|
+
hasStickyColumnsToRight(columns, colIndex) {
|
|
287
|
+
return columns
|
|
288
|
+
.slice(colIndex + 1, columns.length - 1)
|
|
289
|
+
.some((column) => column.sticky);
|
|
290
|
+
}
|
|
233
291
|
updateEmptyState() {
|
|
234
292
|
const rowsContainer = this.el.querySelector('[slot="rows"]');
|
|
235
293
|
this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
|
|
236
294
|
}
|
|
237
295
|
render() {
|
|
238
|
-
return (h(Host, { key: '
|
|
296
|
+
return (h(Host, { key: '59389d06eecc1d62c7cd2931a8f0946491b44565' }, h("div", { key: '18365ebb43523b9e3277a01f9e48f48f78aa946c', class: "table" }, h("div", { key: 'ccb893bd05311639eb5c4bf4b86cb3a27b1dc9c4', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, h("div", { key: '07bc0ce02a7cc585cdb23e4983afa857b0616982', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: 'bb9ccf052db48f193d401b8e0734010469cd5e63' }, h("div", { key: '3d72d8b1a93cdadf6e93f5fc7882d2dd1a23e9cd', id: "caption" }, this.caption))), h("div", { key: '90f80820ced1232bf9cce6c61bbb44bf2fe0fa91', role: "rowgroup" }, h("div", { key: '88499b5c66ec529d554e1141b19c38ddde849922', class: "table__header", role: "row" }, h("slot", { key: 'e9a1e16c209711c6fd8f7a389842eb29b80e04ea', name: "columns", onSlotchange: this.onSlotChange }))), h("div", { key: '015224e31715570a33746b4032c5d08de2f31316', class: "table__body" }, h("slot", { key: '22ff1f82d5ecb3550a926cbbe853e118155d46b7', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (h("div", { key: '4b85e6ee790e3e31a19f5fbe199b22d30d4e9145', class: "table__empty-row", role: "row" }, h("div", { key: '2a7c656b198016815b960708d7527135523472fa', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("swirl-text", { key: '234015c2f5e389270184716949fbccb63acd4853', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
|
|
239
297
|
}
|
|
240
298
|
get el() { return getElement(this); }
|
|
241
299
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,h as e,H as s,g as i}from"./p-e212b5b7.js";import{d as a,i as l}from"./p-58abf3c6.js";var o=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=void 0,a=void 0,l=void 0,o=[];return function(){var c=function(t){return"function"==typeof t?t():t}(e),n=(new Date).getTime(),h=!i||n-i>c;i=n;for(var d=arguments.length,b=Array(d),u=0;u<d;u++)b[u]=arguments[u];if(h&&s.leading)return s.accumulate?Promise.resolve(t.call(this,[b])).then((function(t){return t[0]})):Promise.resolve(t.call.apply(t,[this].concat(b)));if(a?clearTimeout(l):a=function(){var t={};return t.promise=new Promise((function(e,s){t.resolve=e,t.reject=s})),t}(),o.push(b),l=setTimeout(r.bind(this),c),s.accumulate){var f=o.length-1;return a.promise.then((function(t){return t[f]}))}return a.promise};function r(){var e=a;clearTimeout(l),Promise.resolve(s.accumulate?t.call(this,o):t.apply(this,o[o.length-1])).then(e.resolve,e.reject),o=[],a=null}};const r=class{constructor(e){t(this,e),this.triggerRerender=a((async()=>{await this.updateLayout(),this.updateScrolledState(),this.updateEmptyState()}),0,!0),this.updateLayout=o((async()=>{this.resetCellStyles(),this.resetColumnStyles(),this.resetEmptyRowStyles(),this.resetRowGroupStyles(),this.layoutEmptyRow(),this.layoutRowGroups(),this.layOutCellsAndColumns()}),16,{leading:!0}),this.onScroll=()=>{this.updateScrolledState()},this.onSlotChange=async()=>{await this.updateLayout(),this.updateScrolledState(),this.updateEmptyState()},this.caption=void 0,this.emptyStateLabel="No results found.",this.label=void 0,this.empty=void 0,this.scrollable=void 0,this.scrolled=void 0,this.scrolledToEnd=void 0}async componentDidRender(){await this.updateLayout(),this.updateScrolledState(),this.updateEmptyState()}async onWindowResize(){await this.updateLayout(),this.updateScrolledState()}async rerender(){this.triggerRerender()}resetEmptyRowStyles(){const t=this.el.shadowRoot.querySelector(".table__empty-row");Boolean(t)&&(t.style.width="")}resetRowGroupStyles(){Array.from(this.el.querySelectorAll("swirl-table-row-group")).forEach((t=>{const e=t.shadowRoot.querySelector(".table-row-group__header-row");Boolean(e)&&(t.shadowRoot.querySelector(".table-row-group__header-row").style.width="")}))}resetColumnStyles(){this.getColumns().forEach((t=>{t.classList.remove("table-column--has-shadow","table-column--is-sticky","table-column--is-sticky-right"),t.style.right="",t.style.left="",t.style.position=""}))}resetCellStyles(){this.getCells().forEach((t=>{t.classList.remove("table-cell--has-shadow","table-cell--is-sticky","table-cell--is-sticky-right"),t.style.flex="",t.style.left="",t.style.right="",t.style.position=""}))}updateScrolledState(){const t=l(),e=this.container.scrollWidth>this.container.clientWidth,s=this.container.scrollLeft>0,i=Math.ceil(this.container.clientWidth+this.container.scrollLeft)>=Math.floor(this.container.scrollWidth);e!==this.scrollable&&(e&&!t?this.container.classList.add("table__container--scrollable"):this.container.classList.remove("table__container--scrollable")),s!==this.scrolled&&(s&&!t?this.container.classList.add("table__container--scrolled"):this.container.classList.remove("table__container--scrolled")),i!==this.scrolledToEnd&&(i&&!t?this.container.classList.add("table__container--scrolled-to-end"):this.container.classList.remove("table__container--scrolled-to-end"))}getColumns(){return Array.from(this.el.querySelectorAll("swirl-table-column"))}getCells(){return Array.from(this.el.querySelectorAll("swirl-table-cell"))}layoutEmptyRow(){const t=this.el.shadowRoot.querySelector(".table__empty-row");if(!Boolean(t))return;const e=`${this.el.shadowRoot.querySelector(".table__container").scrollWidth}px`;t.style.width=e}layoutRowGroups(){const t=Array.from(this.el.querySelectorAll("swirl-table-row-group")),e=`${this.el.shadowRoot.querySelector(".table__container")?.scrollWidth}px`;t.forEach((t=>{const s=t.shadowRoot.querySelector(".table-row-group__header-row");Boolean(s)&&(t.shadowRoot.querySelector(".table-row-group__header-row").style.width=e)}))}layOutCellsAndColumns(){const t=this.getColumns(),e=this.getCells();t.forEach(((s,i)=>{const a=this.getCellsForColumn(e,t,i),l=this.calculateColumnProperties(s,t,i);a.forEach((t=>this.applyCellStyles(t,s,l))),this.applyColumnStyles(s,l)}))}getCellsForColumn(t,e,s){return t.filter(((t,i)=>(s-i)%e.length==0))}calculateColumnProperties(t,e,s){return{leftOffsetForStickyColumn:t.sticky?this.getLeftOffsetForStickyColumn(e,s):0,columnWidth:`${t.getBoundingClientRect().width}px`,isLastColumnSticky:t.sticky&&e.length===s+1,hasShadowRight:t.sticky&&!this.hasStickyColumnsToRight(e,s)}}applyCellStyles(t,e,s){const{leftOffsetForStickyColumn:i,columnWidth:a,isLastColumnSticky:o,hasShadowRight:r}=s;t.style.flex=Boolean(a)?`0 0 ${a}`:"",l()||(e.sticky&&!o&&(t.classList.add("table-cell--is-sticky"),t.style.left=i+"px",r&&t.classList.add("table-cell--has-shadow-right")),o&&t.classList.add("table-cell--is-sticky-right","table-cell--has-shadow-left"))}applyColumnStyles(t,e){if(l())return;const{leftOffsetForStickyColumn:s,isLastColumnSticky:i,hasShadowRight:a}=e;t.sticky&&!i&&(t.classList.add("table-column--is-sticky"),t.style.left=s+"px",a&&t.classList.add("table-column--has-shadow-right")),i&&t.classList.add("table-column--is-sticky-right","table-column--has-shadow-left")}getLeftOffsetForStickyColumn(t,e){return t.slice(0,e).reduce(((t,e)=>{if(e.sticky)return t+e.getBoundingClientRect().width}),0)}hasStickyColumnsToRight(t,e){return t.slice(e+1,t.length-1).some((t=>t.sticky))}updateEmptyState(){const t=this.el.querySelector('[slot="rows"]');this.empty=!Boolean(t)||0===t.children.length}render(){return e(s,{key:"59389d06eecc1d62c7cd2931a8f0946491b44565"},e("div",{key:"18365ebb43523b9e3277a01f9e48f48f78aa946c",class:"table"},e("div",{key:"ccb893bd05311639eb5c4bf4b86cb3a27b1dc9c4",class:"table__container",onScroll:this.onScroll,ref:t=>this.container=t},e("div",{key:"07bc0ce02a7cc585cdb23e4983afa857b0616982","aria-describedby":Boolean(this.caption)?"caption":void 0,"aria-label":this.label,role:"table",class:"table__table"},this.caption&&e("swirl-visually-hidden",{key:"bb9ccf052db48f193d401b8e0734010469cd5e63"},e("div",{key:"3d72d8b1a93cdadf6e93f5fc7882d2dd1a23e9cd",id:"caption"},this.caption)),e("div",{key:"90f80820ced1232bf9cce6c61bbb44bf2fe0fa91",role:"rowgroup"},e("div",{key:"88499b5c66ec529d554e1141b19c38ddde849922",class:"table__header",role:"row"},e("slot",{key:"e9a1e16c209711c6fd8f7a389842eb29b80e04ea",name:"columns",onSlotchange:this.onSlotChange}))),e("div",{key:"015224e31715570a33746b4032c5d08de2f31316",class:"table__body"},e("slot",{key:"22ff1f82d5ecb3550a926cbbe853e118155d46b7",name:"rows",onSlotchange:this.onSlotChange}),this.empty&&e("div",{key:"4b85e6ee790e3e31a19f5fbe199b22d30d4e9145",class:"table__empty-row",role:"row"},e("div",{key:"2a7c656b198016815b960708d7527135523472fa","aria-colspan":this.getColumns().length,class:"table__empty-row-cell",role:"cell"},e("swirl-text",{key:"234015c2f5e389270184716949fbccb63acd4853",align:"center",size:"sm"},this.emptyStateLabel))))))))}get el(){return i(this)}};r.style=":host{position:relative;display:block}:host *{box-sizing:border-box}.table__container{position:relative;overflow:auto;width:100%}.table__container--scrolled{--swirl-table-sticky-right-shadow:4px 0 16px -4px rgba(23, 23, 23, 0.04),\n 2px 0 4px -2px rgba(23, 23, 23, 0.04)}.table__container--scrollable:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px rgba(23, 23, 23, 0.04),\n 0px 1px 4px 0px rgba(23, 23, 23, 0.04)}.table__table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header ::slotted(*){display:flex}.table__empty-row{display:flex}.table__empty-row-cell{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell>*{flex-grow:1}";export{r as swirl_table}
|