@getflip/swirl-components 0.225.2 → 0.226.1
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/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-file-viewer_8.cjs.entry.js +24 -27
- package/dist/cjs/swirl-shell-layout.cjs.entry.js +20 -13
- 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.cjs.entry.js +34 -5
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.js +25 -28
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.js +22 -13
- package/dist/collection/components/swirl-table/swirl-table.js +34 -5
- package/dist/collection/components/swirl-table/swirl-table.spec.js +1 -1
- package/dist/collection/components/swirl-table-cell/swirl-table-cell.css +2 -0
- package/dist/collection/components/swirl-table-column/swirl-table-column.css +2 -0
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-file-viewer-pdf2.js +25 -28
- package/dist/components/swirl-shell-layout.js +21 -13
- package/dist/components/swirl-table-cell.js +1 -1
- package/dist/components/swirl-table-column.js +1 -1
- package/dist/components/swirl-table.js +34 -5
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-file-viewer_8.entry.js +24 -27
- package/dist/esm/swirl-shell-layout.entry.js +20 -13
- 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.entry.js +34 -5
- package/dist/swirl-components/p-002da4b3.entry.js +1 -0
- package/dist/swirl-components/{p-37588551.entry.js → p-1f46d2bf.entry.js} +1 -1
- package/dist/swirl-components/{p-9eca1d3a.entry.js → p-2824cfca.entry.js} +1 -1
- package/dist/swirl-components/{p-1aa17be4.entry.js → p-6fea6759.entry.js} +2 -2
- package/dist/swirl-components/p-e8fdfc29.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.d.ts +1 -2
- package/dist/types/components/swirl-shell-layout/swirl-shell-layout.d.ts +2 -0
- package/dist/types/components/swirl-table/swirl-table.d.ts +10 -0
- package/package.json +1 -1
- package/dist/swirl-components/p-25130205.entry.js +0 -1
- package/dist/swirl-components/p-a00005a8.entry.js +0 -1
|
@@ -76,14 +76,7 @@ const SwirlShellLayout = class {
|
|
|
76
76
|
: this.sidebarActive;
|
|
77
77
|
const restoredNavigationCollapseState = localStorage.getItem(NAVIGATION_COLLAPSE_STORAGE_KEY) === "true";
|
|
78
78
|
this.navigationCollapsed = restoredNavigationCollapseState;
|
|
79
|
-
|
|
80
|
-
const restoredSecondaryNavigationCollapseState = localStorage.getItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY) ===
|
|
81
|
-
"true";
|
|
82
|
-
this.secondaryNavCollapsed = restoredSecondaryNavigationCollapseState;
|
|
83
|
-
const restoredSecondaryNavigationViewState = localStorage.getItem(SECONDARY_NAVIGATION_VIEW_STORAGE_KEY);
|
|
84
|
-
this.secondaryNavView =
|
|
85
|
-
restoredSecondaryNavigationViewState;
|
|
86
|
-
}
|
|
79
|
+
this.restoreSecondaryNavState();
|
|
87
80
|
}
|
|
88
81
|
componentDidLoad() {
|
|
89
82
|
this.focusTrap = focusTrap_esm.createFocusTrap(this.navElement, {
|
|
@@ -117,6 +110,9 @@ const SwirlShellLayout = class {
|
|
|
117
110
|
this.hideMobileNavigation();
|
|
118
111
|
}
|
|
119
112
|
}
|
|
113
|
+
watchEnableSecondaryNavGridLayout() {
|
|
114
|
+
this.restoreSecondaryNavState();
|
|
115
|
+
}
|
|
120
116
|
watchMobileNavigationState() {
|
|
121
117
|
if (this.mobileNavigationActive) {
|
|
122
118
|
// wait for animation
|
|
@@ -160,6 +156,16 @@ const SwirlShellLayout = class {
|
|
|
160
156
|
this.enableSecondaryNavGridLayout && this.secondaryNavView === "grid";
|
|
161
157
|
});
|
|
162
158
|
}
|
|
159
|
+
restoreSecondaryNavState() {
|
|
160
|
+
if (this.enableSecondaryNavGridLayout) {
|
|
161
|
+
const restoredSecondaryNavigationCollapseState = localStorage.getItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY) ===
|
|
162
|
+
"true";
|
|
163
|
+
this.secondaryNavCollapsed = restoredSecondaryNavigationCollapseState;
|
|
164
|
+
const restoredSecondaryNavigationViewState = localStorage.getItem(SECONDARY_NAVIGATION_VIEW_STORAGE_KEY);
|
|
165
|
+
this.secondaryNavView =
|
|
166
|
+
restoredSecondaryNavigationViewState;
|
|
167
|
+
}
|
|
168
|
+
}
|
|
163
169
|
render() {
|
|
164
170
|
const hasSidebarToggleBadgeWithLabel = this.sidebarToggleBadge !== true && this.sidebarToggleBadge !== "true";
|
|
165
171
|
const hasSecondaryNav = Boolean(this.el.querySelector("[slot='secondary-nav']"));
|
|
@@ -171,25 +177,26 @@ const SwirlShellLayout = class {
|
|
|
171
177
|
"shell-layout--navigation-collapsed": this.navigationCollapsed,
|
|
172
178
|
"shell-layout--sidebar-active": this.sidebarActive,
|
|
173
179
|
});
|
|
174
|
-
return (index.h(index.Host, { key: '
|
|
180
|
+
return (index.h(index.Host, { key: '7c121c7bb025c5198deb16d4bd5b6a6b42852dae' }, index.h("div", { key: 'c1f0d2f83ab22bdb45bd04e75ac983867e1b90ad', class: className }, index.h("header", { key: '3abffe6c117961ef8208bd7b1ef4252068a9ea56', class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { key: 'c55d519266b6e17ae8fbd30f2401dc7e6e19f6d9', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { key: '28ae1bec83a8c3681d2dc66e7888566380d2a96b', class: "shell-layout__header-left" }, index.h("button", { key: '16cb1928a57db48d777d9f6230f4a238bf0bb194', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, index.h("swirl-icon-dock-left", { key: '538eeaf51ccb40e93bf50fc856ff83bc0746f5d8', size: 20 }), index.h("swirl-visually-hidden", { key: '55cfda584993bb4b4b1a691dc94f4a3351a12ebe' }, this.navigationToggleLabel)), index.h("a", { key: 'dd757d408dcf0f890b43ac6a45c58758576b0371', class: "shell-layout__header-tool", href: "javascript:history.back()" }, index.h("swirl-icon-arrow-back", { key: '5b3cd810397b619b1083574667cdc8dff2f6bffe', size: 20 }), index.h("swirl-visually-hidden", { key: '468af62c4fef1e20d58776ee735f2279982d17b2' }, this.browserBackButtonLabel)), index.h("a", { key: '313e0e6e927ac749e6cf9129356006f3b92deacb', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, index.h("swirl-icon-arrow-forward", { key: 'ca09c2ca62c435a7c65541bbd05bf62823038d27', size: 20 }), index.h("swirl-visually-hidden", { key: '73861fbfa073afb2c68f488bcf0a8a988f78e293' }, this.browserForwardButtonLabel)), index.h("slot", { key: 'b3033965357b4e5ebe8043e4a2336a0fa6f2611d', name: "left-header-tools" })), index.h("div", { key: 'aee860cf12da0bdf167000fc87ebe421f3cfba83', class: "shell-layout__logo" }, index.h("slot", { key: '34fe15b3a7c7096adc59fc5d57b5208ffbb3bc7f', name: "logo" })), index.h("div", { key: 'b317c678daac0adbbec8f08fba91d31cdff98342', class: "shell-layout__header-right" }, index.h("slot", { key: '521ee644e2d915a1c55b37e3a9b12be69848a8bd', name: "right-header-tools" }), index.h("button", { key: '1f377866aaa05b727509797b2758402940217e73', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, index.h("swirl-icon", { key: '8b006de02ea12b320b505376f64947252f4dcbff', glyph: this.sidebarToggleIcon, size: 20 }), index.h("swirl-visually-hidden", { key: '9b7da4055462934a511513ed745ce5c29f3cfaa6' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (index.h("swirl-badge", { key: '9603843122ac1ccf20e98174b8a01ecca66ae9e2', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
|
|
175
181
|
? this.sidebarToggleBadgeAriaLabel
|
|
176
|
-
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), index.h("slot", { key: '
|
|
182
|
+
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), index.h("slot", { key: 'f2575ed4ca35025ed802f963c5bfb01e152ac892', name: "avatar" }))), index.h("div", { key: 'd5207f5581dd4ac790ad06e8b2b24a1c173b5429', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), index.h("nav", { key: 'f11e77a62223b0a7f48cdd0bb20fd3b165096469', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, index.h("div", { key: '76aa9bc409a372ca923232a5d942977137462722', class: "shell-layout__mobile-header" }, index.h("slot", { key: 'e504eacd565dda63fc355f7834bf5d3753377fc5', name: "mobile-logo" }), index.h("div", { key: 'a38344e8d212317b43d19831289eb76bbd6a0617', class: "shell-layout__mobile-header-tools" }, index.h("slot", { key: 'f11acf287b1c74b9c1a5821927f27cdac04fe237', name: "mobile-header-tools" }), index.h("button", { key: 'dd917fc5331bd09927d992bf1d25de4eca4701a0', class: "shell-layout__header-tool", type: "button" }, index.h("swirl-icon-double-arrow-left", { key: '01e75b9cba8473d6d0f2636f7eb2a5b5b142ab16', size: 20 }), index.h("swirl-visually-hidden", { key: '8f3899995bb0ba72b81f1b3efecc03c78c949834' }, this.hideMobileNavigationButtonLabel)))), index.h("div", { key: '5ed1a8a2f66aa4ff937c5e97ae016584921e1cea', class: "shell-layout__nav-body" }, index.h("swirl-visually-hidden", { key: '6607e8316f0cb96ed73ffe13174e2da05ade8a34' }, index.h("span", { key: 'bad079202ee965bb522813ea0c2ec1b424564b52', id: "main-navigation-label" }, this.navigationLabel)), index.h("slot", { key: '6e85c3cd85fbecc075228e9d1ba04496db9f9189', name: "nav", onSlotchange: this.collectNavItems }), index.h("div", { key: '93fde6902ef7d68a59726cd07acd6c3c87e61842', class: "shell-layout__secondary-nav" }, index.h("swirl-separator", { key: '247f8a5c460dc7f9df7f22905a18cc6331b14f91', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (index.h("swirl-box", { key: 'bf05f293440481a1fa356f290ce58b18850cacc8', paddingBlockEnd: "16" }, index.h("swirl-stack", { key: 'c1e2b3c0d313844e5a477397f9837f8aae4c1775', justify: this.navigationCollapsed ? "center" : "space-between", orientation: "horizontal" }, index.h("swirl-button", { key: 'ef76a699c2b75968d41cf2636943a25261c99dc5', hideLabel: this.navigationCollapsed, icon: this.secondaryNavCollapsed
|
|
177
183
|
? "<swirl-icon-expand-more></swirl-icon-expand-more>"
|
|
178
184
|
: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
|
|
179
185
|
? this.secondaryNavExpandLabel
|
|
180
186
|
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !this.navigationCollapsed &&
|
|
181
|
-
!this.secondaryNavCollapsed && (index.h("swirl-button", { key: '
|
|
187
|
+
!this.secondaryNavCollapsed && (index.h("swirl-button", { key: 'b451d0a2bab8eff6675d475ea53dd653113f09b0', icon: this.secondaryNavView === "grid"
|
|
182
188
|
? "<swirl-icon-menu></swirl-icon-menu>"
|
|
183
189
|
: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
|
|
184
190
|
? this.gridNavLayoutToggleLabel
|
|
185
|
-
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), index.h("div", { key: '
|
|
191
|
+
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), index.h("div", { key: '6c37bcce68c9cdb5d3aa22f4ef608c2fb50ced63', class: {
|
|
186
192
|
"shell-layout__secondary-nav-items": true,
|
|
187
193
|
"shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
|
|
188
194
|
this.secondaryNavView === "grid",
|
|
189
|
-
} }, index.h("slot", { key: '
|
|
195
|
+
} }, index.h("slot", { key: '76e3ea3df88f8cceb2538b9a0a33429c66a1babf', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), index.h("main", { key: '7db1a491e101b03859c38e0f069e0896693adab4', class: "shell-layout__main", id: "main-content" }, index.h("slot", { key: 'd3218aff7439613c08f9adaf1c04502fec3d6217' })), index.h("aside", { key: '3db4114feb2fe2bc9f947a1baf0fa79699e6a104', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, index.h("div", { key: '8b769e933fbc3310e3e6b42a567c7c983ad98b76', class: "shell-layout__sidebar-body" }, index.h("div", { key: '4fd39766aeb3d24cae70e67834ab3df17b332684', class: "shell-layout__sidebar-app-bar" }, index.h("slot", { key: 'c20a35973024b1b94c406d200124167bca39d872', name: "sidebar-app-bar" })), index.h("div", { key: '07f459327d8fa115d1cc5b41cb1322db13a314ba', class: "shell-layout__sidebar-content" }, index.h("slot", { key: '05020d1b8fdbdcb69cc194363dc3f900ca715293', name: "sidebar" })))))));
|
|
190
196
|
}
|
|
191
197
|
get el() { return index.getElement(this); }
|
|
192
198
|
static get watchers() { return {
|
|
199
|
+
"enableSecondaryNavGridLayout": ["watchEnableSecondaryNavGridLayout"],
|
|
193
200
|
"mobileNavigationActive": ["watchMobileNavigationState"],
|
|
194
201
|
"navigationCollapsed": ["watchNavigationCollapsed"],
|
|
195
202
|
"sidebarActive": ["watchSidebarActive"]
|
|
@@ -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--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}";
|
|
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;z-index:1}:host(.table-cell--is-sticky-right){position:sticky;z-index:1;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--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}";
|
|
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;z-index:1}:host(.table-column--is-sticky-right){position:sticky;z-index:1;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 {
|
|
@@ -84,7 +84,6 @@ const SwirlTable = class {
|
|
|
84
84
|
index.registerInstance(this, hostRef);
|
|
85
85
|
this.triggerRerender = utils.debounce(async () => {
|
|
86
86
|
await this.updateLayout();
|
|
87
|
-
this.updateScrolledState();
|
|
88
87
|
this.updateEmptyState();
|
|
89
88
|
}, 0, true);
|
|
90
89
|
this.updateLayout = dist(async () => {
|
|
@@ -95,13 +94,13 @@ const SwirlTable = class {
|
|
|
95
94
|
this.layoutEmptyRow();
|
|
96
95
|
this.layoutRowGroups();
|
|
97
96
|
this.layOutCellsAndColumns();
|
|
97
|
+
this.updateScrolledState();
|
|
98
98
|
}, 16, { leading: true });
|
|
99
99
|
this.onScroll = () => {
|
|
100
100
|
this.updateScrolledState();
|
|
101
101
|
};
|
|
102
102
|
this.onSlotChange = async () => {
|
|
103
103
|
await this.updateLayout();
|
|
104
|
-
this.updateScrolledState();
|
|
105
104
|
this.updateEmptyState();
|
|
106
105
|
};
|
|
107
106
|
this.caption = undefined;
|
|
@@ -112,14 +111,39 @@ const SwirlTable = class {
|
|
|
112
111
|
this.scrolled = undefined;
|
|
113
112
|
this.scrolledToEnd = undefined;
|
|
114
113
|
}
|
|
114
|
+
async componentDidLoad() {
|
|
115
|
+
this.setupIntersectionObserver();
|
|
116
|
+
}
|
|
117
|
+
disconnectedCallback() {
|
|
118
|
+
this.intersectionObserver?.disconnect();
|
|
119
|
+
}
|
|
120
|
+
/**
|
|
121
|
+
* Set up an Intersection Observer to monitor when the table container becomes visible.
|
|
122
|
+
* This is important because the table's layout may need updating when it becomes visible,
|
|
123
|
+
* especially if it is rendered within a modal that opens after rendering.
|
|
124
|
+
*/
|
|
125
|
+
setupIntersectionObserver() {
|
|
126
|
+
this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
|
|
127
|
+
threshold: 0,
|
|
128
|
+
});
|
|
129
|
+
this.intersectionObserver.observe(this.container);
|
|
130
|
+
}
|
|
131
|
+
async onVisibilityChange(entries) {
|
|
132
|
+
const inViewport = entries.some((entry) => entry.isIntersecting);
|
|
133
|
+
if (inViewport) {
|
|
134
|
+
// Delay layout update to ensure the container is fully visible,
|
|
135
|
+
// especially if it was initially rendered in a modal.
|
|
136
|
+
setTimeout(async () => {
|
|
137
|
+
await this.updateLayout();
|
|
138
|
+
}, 100);
|
|
139
|
+
}
|
|
140
|
+
}
|
|
115
141
|
async componentDidRender() {
|
|
116
142
|
await this.updateLayout();
|
|
117
|
-
this.updateScrolledState();
|
|
118
143
|
this.updateEmptyState();
|
|
119
144
|
}
|
|
120
145
|
async onWindowResize() {
|
|
121
146
|
await this.updateLayout();
|
|
122
|
-
this.updateScrolledState();
|
|
123
147
|
}
|
|
124
148
|
/**
|
|
125
149
|
* Force a re-render of the table
|
|
@@ -151,6 +175,7 @@ const SwirlTable = class {
|
|
|
151
175
|
column.style.right = "";
|
|
152
176
|
column.style.left = "";
|
|
153
177
|
column.style.position = "";
|
|
178
|
+
column.style.zIndex = "";
|
|
154
179
|
});
|
|
155
180
|
}
|
|
156
181
|
resetCellStyles() {
|
|
@@ -161,10 +186,14 @@ const SwirlTable = class {
|
|
|
161
186
|
cell.style.left = "";
|
|
162
187
|
cell.style.right = "";
|
|
163
188
|
cell.style.position = "";
|
|
189
|
+
cell.style.zIndex = "";
|
|
164
190
|
});
|
|
165
191
|
}
|
|
166
192
|
updateScrolledState() {
|
|
167
193
|
const isMobile = utils.isMobileViewport();
|
|
194
|
+
if (this.container === undefined) {
|
|
195
|
+
return;
|
|
196
|
+
}
|
|
168
197
|
const scrollable = this.container.scrollWidth > this.container.clientWidth;
|
|
169
198
|
const scrolled = this.container.scrollLeft > 0;
|
|
170
199
|
const scrolledToEnd = Math.ceil(this.container.clientWidth + this.container.scrollLeft) >=
|
|
@@ -297,7 +326,7 @@ const SwirlTable = class {
|
|
|
297
326
|
this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
|
|
298
327
|
}
|
|
299
328
|
render() {
|
|
300
|
-
return (index.h(index.Host, { key: '
|
|
329
|
+
return (index.h(index.Host, { key: '375c7b9ed74b08a4dd4f93a40390b36ef9ba7cf6' }, index.h("div", { key: '280f0d90c5899074c8ab783df64ee9a3c8fce7af', class: "table" }, index.h("div", { key: 'ba9d29fb8b7743a1259dabe64535284cda3e3ac7', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("div", { key: 'e00b9870884c3585a45329c1f44a769a7f74bebd', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (index.h("swirl-visually-hidden", { key: 'd3c2ab9771d93e6f8a71724637b2e10e3a04044a' }, index.h("div", { key: 'f658fd8feb639bd39d450085228344bc7b9fd043', id: "caption" }, this.caption))), index.h("div", { key: 'f300cf2d69f449cdd87b1413e3295ea0f4d1ef11', role: "rowgroup" }, index.h("div", { key: 'a21c8da3eb5482467e304609d95dbf7ae666d2d2', class: "table__header", role: "row" }, index.h("slot", { key: '8c510369deb673df8ec0ac591d5bc6b66d3fc2b2', name: "columns", onSlotchange: this.onSlotChange }))), index.h("div", { key: '1b50c67e78e176cb31f10c5469d0a1b07f60891d', class: "table__body" }, index.h("slot", { key: 'ae50a28f390ff6a2d349bb685445f29245f29751', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (index.h("div", { key: 'd2ff20c0f27d4e0743696cbbcb524b7ff573ceba', class: "table__empty-row", role: "row" }, index.h("div", { key: 'aa51ecd760c1f7ef830be9ce2405119a1f870c89', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, index.h("swirl-text", { key: 'c6f7156718c95fce2b8e6d51b5ba9547c6404e47', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
|
|
301
330
|
}
|
|
302
331
|
get el() { return index.getElement(this); }
|
|
303
332
|
};
|