@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
package/components.json
CHANGED
|
@@ -23,7 +23,8 @@ const SwirlShellLayout = class {
|
|
|
23
23
|
this.secondaryNavItems = Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='secondary-nav'], [slot='secondary-nav'] swirl-shell-navigation-item"));
|
|
24
24
|
this.toggleNavItemLabels();
|
|
25
25
|
};
|
|
26
|
-
this.toggleSecondaryNavView = () => {
|
|
26
|
+
this.toggleSecondaryNavView = (event) => {
|
|
27
|
+
event.stopPropagation();
|
|
27
28
|
if (this.secondaryNavView === "grid") {
|
|
28
29
|
this.secondaryNavView = "list";
|
|
29
30
|
}
|
|
@@ -33,7 +34,8 @@ const SwirlShellLayout = class {
|
|
|
33
34
|
this.setSecondaryNavItemsTiled();
|
|
34
35
|
localStorage.setItem(SECONDARY_NAVIGATION_VIEW_STORAGE_KEY, String(this.secondaryNavView));
|
|
35
36
|
};
|
|
36
|
-
this.toggleSecondaryNavCollapse = () => {
|
|
37
|
+
this.toggleSecondaryNavCollapse = (event) => {
|
|
38
|
+
event.stopPropagation();
|
|
37
39
|
this.secondaryNavCollapsed = !this.secondaryNavCollapsed;
|
|
38
40
|
localStorage.setItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.secondaryNavCollapsed));
|
|
39
41
|
};
|
|
@@ -169,22 +171,22 @@ const SwirlShellLayout = class {
|
|
|
169
171
|
"shell-layout--navigation-collapsed": this.navigationCollapsed,
|
|
170
172
|
"shell-layout--sidebar-active": this.sidebarActive,
|
|
171
173
|
});
|
|
172
|
-
return (index.h(index.Host, { key: '
|
|
174
|
+
return (index.h(index.Host, { key: '92965e028660ec4a0dd6532cbbf6af458242897c' }, index.h("div", { key: 'a24a9b68e31b1709e5092b62f3eae8945446abcf', class: className }, index.h("header", { key: '4b87606b0a52c9f9c28a1d5925712f0675ecfeec', class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { key: '614f5e4e66262889025dd5b44c662f7c1a8a6c50', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { key: 'a872ec88ec93df784a9dbc63aaf6cc1a52d2244c', class: "shell-layout__header-left" }, index.h("button", { key: 'e97c75dbbd122728974316673e1330457f19eaf9', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, index.h("swirl-icon-dock-left", { key: '50da43ecf3f912fa36c386a9959efa1d76b80fdb', size: 20 }), index.h("swirl-visually-hidden", { key: 'ce3d6276aae55c79028cd313beb9a7bf221ebf76' }, this.navigationToggleLabel)), index.h("a", { key: '8e3f10495a30c0f15e8fcb7ae9070e1171714b04', class: "shell-layout__header-tool", href: "javascript:history.back()" }, index.h("swirl-icon-arrow-back", { key: '272329fac7f7814609b48539708e16ddc0200dbb', size: 20 }), index.h("swirl-visually-hidden", { key: 'c0120fdec27fe9f2c8cf453e7e04ff5896124cf4' }, this.browserBackButtonLabel)), index.h("a", { key: '264f76c8c3d51124a221ab8f3c704b01c3f1e76d', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, index.h("swirl-icon-arrow-forward", { key: '3d4a49f864035e2ee25603a26167271036510174', size: 20 }), index.h("swirl-visually-hidden", { key: 'f0537898089b1df1dc5fb61ccae3ed34f44836c2' }, this.browserForwardButtonLabel)), index.h("slot", { key: '951e7ea60ff412f97305cb96c1a82598508d5e63', name: "left-header-tools" })), index.h("div", { key: '77c8308a4eca1f53536628df219ccc78613763de', class: "shell-layout__logo" }, index.h("slot", { key: '2b872739a23d0c98804d28af740cf84e8e654ac0', name: "logo" })), index.h("div", { key: '06055b0c3516be3115ca54e700bf0e15c1be369b', class: "shell-layout__header-right" }, index.h("slot", { key: '9654178fe8c8f47fa9b7895fd5239caff720983b', name: "right-header-tools" }), index.h("button", { key: '77d871163d148929b83743e6621824368d2202e8', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, index.h("swirl-icon", { key: '87c5a5e8dfcc32296a7a4b4c69707c055f6677a8', glyph: this.sidebarToggleIcon, size: 20 }), index.h("swirl-visually-hidden", { key: 'c7049d520094643e54598a51a9c80abc9d94f97c' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (index.h("swirl-badge", { key: 'b1ace1f7fd27bccdc61eb00bfcd50989293bdcd6', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
|
|
173
175
|
? this.sidebarToggleBadgeAriaLabel
|
|
174
|
-
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), index.h("slot", { key: '
|
|
176
|
+
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), index.h("slot", { key: '910a55412116b423ba00285441aacd02f2b51e3c', name: "avatar" }))), index.h("div", { key: '2af2fbd8f1d4dbe9aa97a7468cb26136410aae18', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), index.h("nav", { key: '23dd3f877bb001663a3e5e6ec72238a9d8931c43', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, index.h("div", { key: 'e7d0abe5b88f44dff919f3548c649e453c2274ee', class: "shell-layout__mobile-header" }, index.h("slot", { key: '44fe8dfaa3a304f3d7e5afe0d05b033888cb0ed2', name: "mobile-logo" }), index.h("div", { key: '8a2be53ceabc13635f6eabc5d00a8d5527556d9d', class: "shell-layout__mobile-header-tools" }, index.h("slot", { key: '6b048b69b0a63c9d5c769ffb5c2d902702855ea1', name: "mobile-header-tools" }), index.h("button", { key: '1bb84665cc2f97484f814fa1fd92079c21df2ce6', class: "shell-layout__header-tool", type: "button" }, index.h("swirl-icon-double-arrow-left", { key: '37e18ea6fc5dbe368e1c52aac568f12f29599502', size: 20 }), index.h("swirl-visually-hidden", { key: 'b8012fd608401d74760dcf5f18186e2046dc50b3' }, this.hideMobileNavigationButtonLabel)))), index.h("div", { key: 'd1fa96efbfcf0b99e4bf4effe31c6508e035f514', class: "shell-layout__nav-body" }, index.h("swirl-visually-hidden", { key: '6ef8bcf2d8451dc36aa0f16c4ae2e40153bc741c' }, index.h("span", { key: '8257d50c13b224979e538156f91797920c180397', id: "main-navigation-label" }, this.navigationLabel)), index.h("slot", { key: 'b7ea77ecc173179bb4a4263d62409e0500bc7e1f', name: "nav", onSlotchange: this.collectNavItems }), index.h("div", { key: '0f42bd57ceba945d4cba756309a2664bb83796f5', class: "shell-layout__secondary-nav" }, index.h("swirl-separator", { key: 'd93dee747a91a636ff7bb94a6060fdcb4a6e03aa', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (index.h("swirl-box", { key: 'b80aad606656e5e574166a61067ae69291dad2c8', paddingBlockEnd: "16" }, index.h("swirl-stack", { key: '08de7d5a0b1d22661b20b6fbff5786aef51211ba', justify: this.navigationCollapsed ? "center" : "space-between", orientation: "horizontal" }, index.h("swirl-button", { key: '2f1b2e375e92bd392c64ae782ff5c8f9f7dc3a45', hideLabel: this.navigationCollapsed, icon: this.secondaryNavCollapsed
|
|
175
177
|
? "<swirl-icon-expand-more></swirl-icon-expand-more>"
|
|
176
178
|
: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
|
|
177
179
|
? this.secondaryNavExpandLabel
|
|
178
180
|
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !this.navigationCollapsed &&
|
|
179
|
-
!this.secondaryNavCollapsed && (index.h("swirl-button", { key: '
|
|
181
|
+
!this.secondaryNavCollapsed && (index.h("swirl-button", { key: '26db5633d9c235f376451f54be9d6a43387bd9dc', icon: this.secondaryNavView === "grid"
|
|
180
182
|
? "<swirl-icon-menu></swirl-icon-menu>"
|
|
181
183
|
: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
|
|
182
184
|
? this.gridNavLayoutToggleLabel
|
|
183
|
-
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), index.h("div", { key: '
|
|
185
|
+
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), index.h("div", { key: 'e5e98f4cc25462536f076cea469fdc5ceff80546', class: {
|
|
184
186
|
"shell-layout__secondary-nav-items": true,
|
|
185
187
|
"shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
|
|
186
188
|
this.secondaryNavView === "grid",
|
|
187
|
-
} }, index.h("slot", { key: '
|
|
189
|
+
} }, index.h("slot", { key: '15ef5908f4021271eb81bbba6e588025f6c0dfdb', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), index.h("main", { key: '2674b8624a508679d80d906cafae84c9200c13c9', class: "shell-layout__main", id: "main-content" }, index.h("slot", { key: '79b11456e9ba1b2757303b49436c660f8b00004a' })), index.h("aside", { key: '09c4067dba7a8e36581f7a45f1061656134fd2cb', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, index.h("div", { key: '010cb284efba3704c1989d481bd765259d80d1b8', class: "shell-layout__sidebar-body" }, index.h("div", { key: 'db132c6c718b6499130be2fab5696185062fa156', class: "shell-layout__sidebar-app-bar" }, index.h("slot", { key: '7f6411a9d71bcabf9c2cb81d8401caa32545cbe9', name: "sidebar-app-bar" })), index.h("div", { key: 'd7c6f80ab3fcfbfa2e4191002bfee8194a0844e5', class: "shell-layout__sidebar-content" }, index.h("slot", { key: 'eba1265ba878bf6a0fc15f0c27d0637aeebde27e', name: "sidebar" })))))));
|
|
188
190
|
}
|
|
189
191
|
get el() { return index.getElement(this); }
|
|
190
192
|
static get watchers() { return {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-6aba64ed.js');
|
|
6
6
|
|
|
7
|
-
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}";
|
|
7
|
+
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}";
|
|
8
8
|
const SwirlTableCellStyle0 = swirlTableCellCss;
|
|
9
9
|
|
|
10
10
|
const SwirlTableCell = class {
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-6aba64ed.js');
|
|
6
6
|
const utils = require('./utils-c82e5573.js');
|
|
7
7
|
|
|
8
|
-
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}";
|
|
8
|
+
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}";
|
|
9
9
|
const SwirlTableColumnStyle0 = swirlTableColumnCss;
|
|
10
10
|
|
|
11
11
|
const SwirlTableColumn = class {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-6aba64ed.js');
|
|
6
6
|
|
|
7
|
-
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}
|
|
7
|
+
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}";
|
|
8
8
|
const SwirlTableRowGroupStyle0 = swirlTableRowGroupCss;
|
|
9
9
|
|
|
10
10
|
const SwirlTableRowGroup = class {
|
|
@@ -76,7 +76,7 @@ function defer() {
|
|
|
76
76
|
return deferred;
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
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:
|
|
79
|
+
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}";
|
|
80
80
|
const SwirlTableStyle0 = swirlTableCss;
|
|
81
81
|
|
|
82
82
|
const SwirlTable = class {
|
|
@@ -94,7 +94,7 @@ const SwirlTable = class {
|
|
|
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 = class {
|
|
|
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 = class {
|
|
|
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 (utils.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 (utils.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 (index.h(index.Host, { key: '
|
|
300
|
+
return (index.h(index.Host, { key: '59389d06eecc1d62c7cd2931a8f0946491b44565' }, index.h("div", { key: '18365ebb43523b9e3277a01f9e48f48f78aa946c', class: "table" }, index.h("div", { key: 'ccb893bd05311639eb5c4bf4b86cb3a27b1dc9c4', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("div", { key: '07bc0ce02a7cc585cdb23e4983afa857b0616982', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (index.h("swirl-visually-hidden", { key: 'bb9ccf052db48f193d401b8e0734010469cd5e63' }, index.h("div", { key: '3d72d8b1a93cdadf6e93f5fc7882d2dd1a23e9cd', id: "caption" }, this.caption))), index.h("div", { key: '90f80820ced1232bf9cce6c61bbb44bf2fe0fa91', role: "rowgroup" }, index.h("div", { key: '88499b5c66ec529d554e1141b19c38ddde849922', class: "table__header", role: "row" }, index.h("slot", { key: 'e9a1e16c209711c6fd8f7a389842eb29b80e04ea', name: "columns", onSlotchange: this.onSlotChange }))), index.h("div", { key: '015224e31715570a33746b4032c5d08de2f31316', class: "table__body" }, index.h("slot", { key: '22ff1f82d5ecb3550a926cbbe853e118155d46b7', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (index.h("div", { key: '4b85e6ee790e3e31a19f5fbe199b22d30d4e9145', class: "table__empty-row", role: "row" }, index.h("div", { key: '2a7c656b198016815b960708d7527135523472fa', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, index.h("swirl-text", { key: '234015c2f5e389270184716949fbccb63acd4853', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
|
|
243
301
|
}
|
|
244
302
|
get el() { return index.getElement(this); }
|
|
245
303
|
};
|