@getflip/swirl-components 0.43.0 → 0.43.2
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.cjs.entry.js +13 -21
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +0 -22
- package/dist/collection/components/swirl-table/swirl-table.js +13 -21
- package/dist/components/assets/pdfjs/pdf.worker.min.js +0 -22
- package/dist/components/swirl-table.js +13 -21
- package/dist/esm/swirl-table.entry.js +13 -21
- package/dist/swirl-components/p-40b1fc51.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-table/swirl-table.d.ts +1 -2
- package/package.json +1 -1
- package/dist/swirl-components/p-514fcbf9.entry.js +0 -1
|
@@ -16,15 +16,10 @@ export class SwirlTable {
|
|
|
16
16
|
await this.layoutRowGroups();
|
|
17
17
|
await this.layOutColumns();
|
|
18
18
|
this.layOutCells();
|
|
19
|
-
},
|
|
19
|
+
}, 17, { leading: true });
|
|
20
20
|
this.onScroll = () => {
|
|
21
21
|
this.updateScrolledState();
|
|
22
22
|
};
|
|
23
|
-
this.onSlotChange = async () => {
|
|
24
|
-
await this.updateLayout();
|
|
25
|
-
this.updateScrolledState();
|
|
26
|
-
this.updateEmptyState();
|
|
27
|
-
};
|
|
28
23
|
this.caption = undefined;
|
|
29
24
|
this.emptyStateLabel = "No results found.";
|
|
30
25
|
this.label = undefined;
|
|
@@ -34,11 +29,20 @@ export class SwirlTable {
|
|
|
34
29
|
this.scrolledToEnd = undefined;
|
|
35
30
|
}
|
|
36
31
|
componentDidLoad() {
|
|
37
|
-
this.
|
|
32
|
+
this.observer = new MutationObserver(async () => {
|
|
33
|
+
await this.updateLayout();
|
|
34
|
+
this.updateScrolledState();
|
|
35
|
+
this.updateEmptyState();
|
|
36
|
+
});
|
|
37
|
+
this.observer.observe(this.el, {
|
|
38
|
+
childList: true,
|
|
39
|
+
subtree: true,
|
|
40
|
+
});
|
|
38
41
|
}
|
|
39
42
|
disconnectedCallback() {
|
|
40
|
-
var _a;
|
|
43
|
+
var _a, _b;
|
|
41
44
|
(_a = this.columnObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
45
|
+
(_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
|
|
42
46
|
}
|
|
43
47
|
async componentDidRender() {
|
|
44
48
|
await this.updateLayout();
|
|
@@ -49,18 +53,6 @@ export class SwirlTable {
|
|
|
49
53
|
await this.updateLayout();
|
|
50
54
|
this.updateScrolledState();
|
|
51
55
|
}
|
|
52
|
-
observeColumnChanges() {
|
|
53
|
-
var _a, _b, _c;
|
|
54
|
-
this.columnObserver = new MutationObserver(this.onSlotChange);
|
|
55
|
-
const columnsContainer = (_c = (_b = (_a = this.el.shadowRoot
|
|
56
|
-
.querySelector('slot[name="columns"]')).assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c[0];
|
|
57
|
-
if (!Boolean(columnsContainer)) {
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
this.columnObserver.observe(columnsContainer, {
|
|
61
|
-
childList: true,
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
56
|
updateScrolledState() {
|
|
65
57
|
const isMobile = isMobileViewport();
|
|
66
58
|
const scrollable = this.container.scrollWidth > this.container.clientWidth;
|
|
@@ -243,7 +235,7 @@ export class SwirlTable {
|
|
|
243
235
|
this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
|
|
244
236
|
}
|
|
245
237
|
render() {
|
|
246
|
-
return (h(Host, null, h("div", { class: "table" }, h("div", { class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, h("div", { "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", null, h("div", { id: "caption" }, this.caption))), h("div", { role: "rowgroup" }, h("div", { class: "table__header", role: "row" }, h("slot", { name: "columns"
|
|
238
|
+
return (h(Host, null, h("div", { class: "table" }, h("div", { class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, h("div", { "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", null, h("div", { id: "caption" }, this.caption))), h("div", { role: "rowgroup" }, h("div", { class: "table__header", role: "row" }, h("slot", { name: "columns" }))), h("div", { class: "table__body" }, h("slot", { name: "rows" }), this.empty && (h("div", { class: "table__empty-row", role: "row" }, h("div", { "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("swirl-text", { align: "center", size: "sm" }, this.emptyStateLabel))))))))));
|
|
247
239
|
}
|
|
248
240
|
static get is() { return "swirl-table"; }
|
|
249
241
|
static get encapsulation() { return "shadow"; }
|