@getflip/swirl-components 0.222.1 → 0.224.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.
Files changed (39) hide show
  1. package/components.json +20 -1
  2. package/dist/cjs/swirl-chip.cjs.entry.js +2 -1
  3. package/dist/cjs/swirl-table-cell.cjs.entry.js +1 -1
  4. package/dist/cjs/swirl-table-column.cjs.entry.js +1 -1
  5. package/dist/cjs/swirl-table-row-group.cjs.entry.js +1 -1
  6. package/dist/cjs/swirl-table.cjs.entry.js +73 -15
  7. package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
  8. package/dist/collection/components/swirl-chip/swirl-chip.js +21 -1
  9. package/dist/collection/components/swirl-table/swirl-table.css +4 -8
  10. package/dist/collection/components/swirl-table/swirl-table.js +73 -15
  11. package/dist/collection/components/swirl-table-cell/swirl-table-cell.css +10 -0
  12. package/dist/collection/components/swirl-table-column/swirl-table-column.css +9 -0
  13. package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.css +3 -6
  14. package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
  15. package/dist/components/swirl-chip.js +2 -1
  16. package/dist/components/swirl-table-cell.js +1 -1
  17. package/dist/components/swirl-table-column.js +1 -1
  18. package/dist/components/swirl-table-row-group.js +1 -1
  19. package/dist/components/swirl-table.js +73 -15
  20. package/dist/esm/swirl-chip.entry.js +2 -1
  21. package/dist/esm/swirl-table-cell.entry.js +1 -1
  22. package/dist/esm/swirl-table-column.entry.js +1 -1
  23. package/dist/esm/swirl-table-row-group.entry.js +1 -1
  24. package/dist/esm/swirl-table.entry.js +73 -15
  25. package/dist/swirl-components/p-1a17a207.entry.js +1 -0
  26. package/dist/swirl-components/p-9c02b88b.entry.js +1 -0
  27. package/dist/swirl-components/p-9eca1d3a.entry.js +1 -0
  28. package/dist/swirl-components/p-b4e7cea6.entry.js +1 -0
  29. package/dist/swirl-components/p-cbc739d8.entry.js +1 -0
  30. package/dist/swirl-components/swirl-components.esm.js +1 -1
  31. package/dist/types/components/swirl-chip/swirl-chip.d.ts +1 -0
  32. package/dist/types/components/swirl-table/swirl-table.d.ts +7 -1
  33. package/dist/types/components.d.ts +2 -0
  34. package/package.json +1 -1
  35. package/dist/swirl-components/p-08d14c15.entry.js +0 -1
  36. package/dist/swirl-components/p-4def436f.entry.js +0 -1
  37. package/dist/swirl-components/p-71259db0.entry.js +0 -1
  38. package/dist/swirl-components/p-7490b2df.entry.js +0 -1
  39. package/dist/swirl-components/p-cf61e1bd.entry.js +0 -1
package/components.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-08-07T07:57:42",
2
+ "timestamp": "2024-08-09T13:43:29",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.18.1",
@@ -6991,6 +6991,25 @@
6991
6991
  ],
6992
6992
  "methods": [],
6993
6993
  "events": [
6994
+ {
6995
+ "event": "chipClick",
6996
+ "detail": "MouseEvent",
6997
+ "bubbles": true,
6998
+ "complexType": {
6999
+ "original": "MouseEvent",
7000
+ "resolved": "MouseEvent",
7001
+ "references": {
7002
+ "MouseEvent": {
7003
+ "location": "global",
7004
+ "id": "global::MouseEvent"
7005
+ }
7006
+ }
7007
+ },
7008
+ "cancelable": true,
7009
+ "composed": true,
7010
+ "docs": "",
7011
+ "docsTags": []
7012
+ },
6994
7013
  {
6995
7014
  "event": "remove",
6996
7015
  "detail": "MouseEvent",
@@ -12,6 +12,7 @@ const SwirlChipStyle0 = swirlChipCss;
12
12
  const SwirlChip = class {
13
13
  constructor(hostRef) {
14
14
  index.registerInstance(this, hostRef);
15
+ this.chipClick = index.createEvent(this, "chipClick", 7);
15
16
  this.remove = index.createEvent(this, "remove", 7);
16
17
  this.desktopMediaQuery = utils.getDesktopMediaQuery();
17
18
  this.desktopMediaQueryHandler = (event) => {
@@ -56,7 +57,7 @@ const SwirlChip = class {
56
57
  "chip--interactive": this.interactive || this.pressed !== undefined,
57
58
  "chip--removable": this.removable,
58
59
  });
59
- return (index.h(index.Host, { key: '2c558ecbcce9b65da44616543ec1f764a01cb2cf' }, index.h(Tag, { key: '4f146a7481412df5d1b398b85b455114afc40297', class: className, type: this.interactive ? "button" : undefined, "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined }, index.h("span", { key: '1718cc6dc4e726a8ed98fecf322cd0b6284f67a1', class: "chip__inner" }, showAvatar && (index.h("span", { key: '9ae76d5e8b2349ad69c704b062ea6638c1f50191', class: "chip__avatar" }, index.h("slot", { key: '87d4b9788a9efca593aa1e0cacb2e84eeae6fea3', name: "avatar" }))), showIcon && (index.h("span", { key: 'e92922a857124377ca8892c3c242f6444954cb02', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: '7b7d73e445ed9ea5c5641c23bcbff85aaafb0a02', class: "chip__label" }, this.label)), this.progress !== undefined && (index.h("span", { key: '8a9fc592a21a81237a13b15185c382a016a70b5f', class: "chip__progress-indicator" }, index.h("swirl-progress-indicator", { key: 'fad6f0d26d8968a40bcb3c6d71c66c5f109e8012', label: this.progressBarLabel, value: this.progress })))), this.removable && (index.h("button", { key: '5ec9c622c143c895146cbee3643ddfd7247ad383', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit, type: "button" }, index.h("swirl-icon-close", { key: 'c259db9f4c46a5f0a1e083b5f99d696dee815954', size: 20 })))));
60
+ return (index.h(index.Host, { key: 'fb5885a5e342bf086ec524d438b9427b30b29598' }, index.h(Tag, { key: '06aabd7960c3919ecb90640a313462bbf89d2b42', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, index.h("span", { key: '4f7f50827d6fc53aece738f31aff1a7694d63b98', class: "chip__inner" }, showAvatar && (index.h("span", { key: '91c3b2dda9886ca0d831c7871986b979c9f272a1', class: "chip__avatar" }, index.h("slot", { key: '8a160db2247eb3467ce80197f9fff840a71594d4', name: "avatar" }))), showIcon && (index.h("span", { key: '788ca102c452ce600738a0c3f8584c748c1275f4', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: 'd5b3eb5d4f4384847d53e05d296ade03fe6354f2', class: "chip__label" }, this.label)), this.progress !== undefined && (index.h("span", { key: '49e776230624ab382a0a745d1ffa3e051c9a21ff', class: "chip__progress-indicator" }, index.h("swirl-progress-indicator", { key: '86ad1c9d6c9c4b12ccb337667272e5ecb3233730', label: this.progressBarLabel, value: this.progress })))), this.removable && (index.h("button", { key: '1e2440e03f99407293420744d52e0c5d2c60855b', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit, type: "button" }, index.h("swirl-icon-close", { key: 'df8db1499738c9eb952fc78802bebfcd03cd65f8', size: 20 })))));
60
61
  }
61
62
  get el() { return index.getElement(this); }
62
63
  };
@@ -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}@media (min-width: 768px){.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{overflow:hidden;transition:height 0.3s ease-out}.table-row-group__rows-container.is-hidden{height:0}.sc-swirl-button-h{display:flex}";
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:0.0625rem 0 0 0 var(--s-border-default),\n -0.0625rem 0 0 0 var(--s-border-default),\n 0 0.25rem 1rem rgba(25, 26, 28, 0.04),\n 0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16)}.table__container--scrollable:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0.0625rem 0 0 0 var(--s-border-default),\n -0.0625rem 0 0 0 var(--s-border-default),\n 0 0.25rem 1rem rgba(25, 26, 28, 0.04),\n 0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16)}.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}";
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.layOutCells();
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
- layOutCells() {
222
+ layOutCellsAndColumns() {
225
223
  const columns = this.getColumns();
226
224
  const cells = this.getCells();
227
225
  columns.forEach((column, colIndex) => {
228
- const cellsOfColumn = cells.filter((_, cellIndex) => {
229
- return (colIndex - cellIndex) % columns.length === 0;
230
- });
231
- const columnWidth = column.width || `${column.getBoundingClientRect().width}px`;
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: 'b1f0af240d936904b960103568f929bf31397849' }, index.h("div", { key: 'fb0f701b67023ddc52765cff52b00bce7def4530', class: "table" }, index.h("div", { key: '8c41225148c9f058d314ae973a2ef91740b1cc8a', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("div", { key: '8c67633613bd3a36bbc17dd9f49c7c1d5b9182b3', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (index.h("swirl-visually-hidden", { key: '912e38cda9e1c447f614f9df13bb2c4dc6980ece' }, index.h("div", { key: '67685bbcecd9f1fa67cd48a39ef3718f459dbbd1', id: "caption" }, this.caption))), index.h("div", { key: 'c80f770dcf7e35c36365be7210e85657a682ef64', role: "rowgroup" }, index.h("div", { key: 'a14a6e9de7cdb0c7f60b886f9f733b8e27b0153f', class: "table__header", role: "row" }, index.h("slot", { key: '8c3ac3bb558109ee791338599c0ac96d80f441b7', name: "columns", onSlotchange: this.onSlotChange }))), index.h("div", { key: 'b221e7f4e314dcf425a1058ea8f001756f27a1b7', class: "table__body" }, index.h("slot", { key: '116ffc8eaceade3c1a4d935ffc6ea0226279975e', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (index.h("div", { key: 'a1d8d4f25895637b3b888549014f7aa939a9750f', class: "table__empty-row", role: "row" }, index.h("div", { key: '3d870da3885ee4ef26075304f6700cb689469155', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, index.h("swirl-text", { key: '04c093fbd33e17d2402872dc02e0321385987e31', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
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
  };