@getflip/swirl-components 0.222.1 → 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-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/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-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-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-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-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-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
|
@@ -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
|
};
|
|
@@ -14,17 +14,13 @@
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.table__container--scrolled {
|
|
17
|
-
--swirl-table-sticky-right-shadow:
|
|
18
|
-
|
|
19
|
-
0 0.25rem 1rem rgba(25, 26, 28, 0.04),
|
|
20
|
-
0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16);
|
|
17
|
+
--swirl-table-sticky-right-shadow: 4px 0 16px -4px rgba(23, 23, 23, 0.04),
|
|
18
|
+
2px 0 4px -2px rgba(23, 23, 23, 0.04);
|
|
21
19
|
}
|
|
22
20
|
|
|
23
21
|
.table__container--scrollable:not(.table__container--scrolled-to-end) {
|
|
24
|
-
--swirl-table-sticky-left-shadow:
|
|
25
|
-
|
|
26
|
-
0 0.25rem 1rem rgba(25, 26, 28, 0.04),
|
|
27
|
-
0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16);
|
|
22
|
+
--swirl-table-sticky-left-shadow: 0px 4px 16px 0px rgba(23, 23, 23, 0.04),
|
|
23
|
+
0px 1px 4px 0px rgba(23, 23, 23, 0.04);
|
|
28
24
|
}
|
|
29
25
|
|
|
30
26
|
.table__table {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import debouncePromise from "debounce-promise";
|
|
1
2
|
import { h, Host, } from "@stencil/core";
|
|
2
3
|
import { debounce, isMobileViewport } from "../../utils";
|
|
3
|
-
import debouncePromise from "debounce-promise";
|
|
4
4
|
/**
|
|
5
5
|
* @slot columns - Column container, should contain SwirlTableColumns.
|
|
6
6
|
* @slot rows - Row container, should contain SwirlTableRows.
|
|
@@ -19,7 +19,7 @@ export class SwirlTable {
|
|
|
19
19
|
this.resetRowGroupStyles();
|
|
20
20
|
this.layoutEmptyRow();
|
|
21
21
|
this.layoutRowGroups();
|
|
22
|
-
this.
|
|
22
|
+
this.layOutCellsAndColumns();
|
|
23
23
|
}, 16, { leading: true });
|
|
24
24
|
this.onScroll = () => {
|
|
25
25
|
this.updateScrolledState();
|
|
@@ -72,22 +72,20 @@ export class SwirlTable {
|
|
|
72
72
|
resetColumnStyles() {
|
|
73
73
|
const columns = this.getColumns();
|
|
74
74
|
columns.forEach((column) => {
|
|
75
|
-
column.classList.remove("table-column--has-shadow");
|
|
75
|
+
column.classList.remove("table-column--has-shadow", "table-column--is-sticky", "table-column--is-sticky-right");
|
|
76
76
|
column.style.right = "";
|
|
77
77
|
column.style.left = "";
|
|
78
78
|
column.style.position = "";
|
|
79
|
-
column.style.zIndex = "";
|
|
80
79
|
});
|
|
81
80
|
}
|
|
82
81
|
resetCellStyles() {
|
|
83
82
|
const cells = this.getCells();
|
|
84
83
|
cells.forEach((cell) => {
|
|
85
|
-
cell.classList.remove("table-cell--has-shadow");
|
|
84
|
+
cell.classList.remove("table-cell--has-shadow", "table-cell--is-sticky", "table-cell--is-sticky-right");
|
|
86
85
|
cell.style.flex = "";
|
|
87
86
|
cell.style.left = "";
|
|
88
87
|
cell.style.right = "";
|
|
89
88
|
cell.style.position = "";
|
|
90
|
-
cell.style.zIndex = "";
|
|
91
89
|
});
|
|
92
90
|
}
|
|
93
91
|
updateScrolledState() {
|
|
@@ -146,25 +144,85 @@ export class SwirlTable {
|
|
|
146
144
|
tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row").style.width = scrollWidth;
|
|
147
145
|
});
|
|
148
146
|
}
|
|
149
|
-
|
|
147
|
+
layOutCellsAndColumns() {
|
|
150
148
|
const columns = this.getColumns();
|
|
151
149
|
const cells = this.getCells();
|
|
152
150
|
columns.forEach((column, colIndex) => {
|
|
153
|
-
const cellsOfColumn =
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
cellsOfColumn.forEach((cell) => {
|
|
158
|
-
cell.style.flex = Boolean(columnWidth) ? `0 0 ${columnWidth}` : "";
|
|
159
|
-
});
|
|
151
|
+
const cellsOfColumn = this.getCellsForColumn(cells, columns, colIndex);
|
|
152
|
+
const columnProperties = this.calculateColumnProperties(column, columns, colIndex);
|
|
153
|
+
cellsOfColumn.forEach((cell) => this.applyCellStyles(cell, column, columnProperties));
|
|
154
|
+
this.applyColumnStyles(column, columnProperties);
|
|
160
155
|
});
|
|
161
156
|
}
|
|
157
|
+
getCellsForColumn(cells, columns, colIndex) {
|
|
158
|
+
return cells.filter((_, cellIndex) => (colIndex - cellIndex) % columns.length === 0);
|
|
159
|
+
}
|
|
160
|
+
calculateColumnProperties(column, columns, colIndex) {
|
|
161
|
+
const leftOffsetForStickyColumn = column.sticky
|
|
162
|
+
? this.getLeftOffsetForStickyColumn(columns, colIndex)
|
|
163
|
+
: 0;
|
|
164
|
+
const columnWidth = `${column.getBoundingClientRect().width}px`;
|
|
165
|
+
const isLastColumnSticky = column.sticky && columns.length === colIndex + 1;
|
|
166
|
+
const hasShadowRight = column.sticky && !this.hasStickyColumnsToRight(columns, colIndex);
|
|
167
|
+
return {
|
|
168
|
+
leftOffsetForStickyColumn,
|
|
169
|
+
columnWidth,
|
|
170
|
+
isLastColumnSticky,
|
|
171
|
+
hasShadowRight,
|
|
172
|
+
};
|
|
173
|
+
}
|
|
174
|
+
applyCellStyles(cell, column, columnProperties) {
|
|
175
|
+
const { leftOffsetForStickyColumn, columnWidth, isLastColumnSticky, hasShadowRight, } = columnProperties;
|
|
176
|
+
cell.style.flex = Boolean(columnWidth) ? `0 0 ${columnWidth}` : "";
|
|
177
|
+
if (isMobileViewport()) {
|
|
178
|
+
return;
|
|
179
|
+
}
|
|
180
|
+
if (column.sticky && !isLastColumnSticky) {
|
|
181
|
+
cell.classList.add("table-cell--is-sticky");
|
|
182
|
+
cell.style.left = leftOffsetForStickyColumn + "px";
|
|
183
|
+
if (hasShadowRight) {
|
|
184
|
+
cell.classList.add("table-cell--has-shadow-right");
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
if (isLastColumnSticky) {
|
|
188
|
+
cell.classList.add("table-cell--is-sticky-right", "table-cell--has-shadow-left");
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
applyColumnStyles(column, columnProperties) {
|
|
192
|
+
if (isMobileViewport()) {
|
|
193
|
+
return;
|
|
194
|
+
}
|
|
195
|
+
const { leftOffsetForStickyColumn, isLastColumnSticky, hasShadowRight } = columnProperties;
|
|
196
|
+
if (column.sticky && !isLastColumnSticky) {
|
|
197
|
+
column.classList.add("table-column--is-sticky");
|
|
198
|
+
column.style.left = leftOffsetForStickyColumn + "px";
|
|
199
|
+
if (hasShadowRight) {
|
|
200
|
+
column.classList.add("table-column--has-shadow-right");
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
if (isLastColumnSticky) {
|
|
204
|
+
column.classList.add("table-column--is-sticky-right", "table-column--has-shadow-left");
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
getLeftOffsetForStickyColumn(columns, colIndex) {
|
|
208
|
+
return columns.slice(0, colIndex).reduce((acc, column) => {
|
|
209
|
+
if (column.sticky) {
|
|
210
|
+
acc += column.getBoundingClientRect().width;
|
|
211
|
+
return acc;
|
|
212
|
+
}
|
|
213
|
+
}, 0);
|
|
214
|
+
}
|
|
215
|
+
hasStickyColumnsToRight(columns, colIndex) {
|
|
216
|
+
return columns
|
|
217
|
+
.slice(colIndex + 1, columns.length - 1)
|
|
218
|
+
.some((column) => column.sticky);
|
|
219
|
+
}
|
|
162
220
|
updateEmptyState() {
|
|
163
221
|
const rowsContainer = this.el.querySelector('[slot="rows"]');
|
|
164
222
|
this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
|
|
165
223
|
}
|
|
166
224
|
render() {
|
|
167
|
-
return (h(Host, { key: '
|
|
225
|
+
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))))))))));
|
|
168
226
|
}
|
|
169
227
|
static get is() { return "swirl-table"; }
|
|
170
228
|
static get encapsulation() { return "shadow"; }
|
|
@@ -16,6 +16,16 @@
|
|
|
16
16
|
transition: box-shadow 0.15s;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
:host(.table-cell--is-sticky) {
|
|
20
|
+
position: sticky;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
:host(.table-cell--is-sticky-right) {
|
|
24
|
+
position: sticky;
|
|
25
|
+
right: 0;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
}
|
|
28
|
+
|
|
19
29
|
:host(.table-cell--has-shadow-right) {
|
|
20
30
|
box-shadow: var(--swirl-table-sticky-right-shadow);
|
|
21
31
|
}
|
|
@@ -22,6 +22,15 @@
|
|
|
22
22
|
gap: var(--s-space-8);
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
+
:host(.table-column--is-sticky) {
|
|
26
|
+
position: sticky;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
:host(.table-column--is-sticky-right) {
|
|
30
|
+
position: sticky;
|
|
31
|
+
right: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
25
34
|
:host(.table-column--has-shadow-right) {
|
|
26
35
|
box-shadow: var(--swirl-table-sticky-right-shadow);
|
|
27
36
|
}
|
|
@@ -26,13 +26,10 @@
|
|
|
26
26
|
align-items: center;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
@media (min-width: 768px) {
|
|
30
|
-
|
|
31
29
|
.table-row-group__label {
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
position: sticky;
|
|
31
|
+
left: var(--s-space-16);
|
|
34
32
|
}
|
|
35
|
-
}
|
|
36
33
|
|
|
37
34
|
.table-row-group__tooltip {
|
|
38
35
|
display: inline-flex;
|
|
@@ -50,7 +47,7 @@
|
|
|
50
47
|
}
|
|
51
48
|
|
|
52
49
|
.table-row-group__rows-container {
|
|
53
|
-
|
|
50
|
+
display: contents;
|
|
54
51
|
transition: height 0.3s ease-out;
|
|
55
52
|
}
|
|
56
53
|
|