@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
package/components.json
CHANGED
|
@@ -90,15 +90,10 @@ const SwirlTable = class {
|
|
|
90
90
|
await this.layoutRowGroups();
|
|
91
91
|
await this.layOutColumns();
|
|
92
92
|
this.layOutCells();
|
|
93
|
-
},
|
|
93
|
+
}, 17, { leading: true });
|
|
94
94
|
this.onScroll = () => {
|
|
95
95
|
this.updateScrolledState();
|
|
96
96
|
};
|
|
97
|
-
this.onSlotChange = async () => {
|
|
98
|
-
await this.updateLayout();
|
|
99
|
-
this.updateScrolledState();
|
|
100
|
-
this.updateEmptyState();
|
|
101
|
-
};
|
|
102
97
|
this.caption = undefined;
|
|
103
98
|
this.emptyStateLabel = "No results found.";
|
|
104
99
|
this.label = undefined;
|
|
@@ -108,11 +103,20 @@ const SwirlTable = class {
|
|
|
108
103
|
this.scrolledToEnd = undefined;
|
|
109
104
|
}
|
|
110
105
|
componentDidLoad() {
|
|
111
|
-
this.
|
|
106
|
+
this.observer = new MutationObserver(async () => {
|
|
107
|
+
await this.updateLayout();
|
|
108
|
+
this.updateScrolledState();
|
|
109
|
+
this.updateEmptyState();
|
|
110
|
+
});
|
|
111
|
+
this.observer.observe(this.el, {
|
|
112
|
+
childList: true,
|
|
113
|
+
subtree: true,
|
|
114
|
+
});
|
|
112
115
|
}
|
|
113
116
|
disconnectedCallback() {
|
|
114
|
-
var _a;
|
|
117
|
+
var _a, _b;
|
|
115
118
|
(_a = this.columnObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
119
|
+
(_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
|
|
116
120
|
}
|
|
117
121
|
async componentDidRender() {
|
|
118
122
|
await this.updateLayout();
|
|
@@ -123,18 +127,6 @@ const SwirlTable = class {
|
|
|
123
127
|
await this.updateLayout();
|
|
124
128
|
this.updateScrolledState();
|
|
125
129
|
}
|
|
126
|
-
observeColumnChanges() {
|
|
127
|
-
var _a, _b, _c;
|
|
128
|
-
this.columnObserver = new MutationObserver(this.onSlotChange);
|
|
129
|
-
const columnsContainer = (_c = (_b = (_a = this.el.shadowRoot
|
|
130
|
-
.querySelector('slot[name="columns"]')).assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c[0];
|
|
131
|
-
if (!Boolean(columnsContainer)) {
|
|
132
|
-
return;
|
|
133
|
-
}
|
|
134
|
-
this.columnObserver.observe(columnsContainer, {
|
|
135
|
-
childList: true,
|
|
136
|
-
});
|
|
137
|
-
}
|
|
138
130
|
updateScrolledState() {
|
|
139
131
|
const isMobile = utils.isMobileViewport();
|
|
140
132
|
const scrollable = this.container.scrollWidth > this.container.clientWidth;
|
|
@@ -317,7 +309,7 @@ const SwirlTable = class {
|
|
|
317
309
|
this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
|
|
318
310
|
}
|
|
319
311
|
render() {
|
|
320
|
-
return (index.h(index.Host, null, index.h("div", { class: "table" }, index.h("div", { class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("div", { "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (index.h("swirl-visually-hidden", null, index.h("div", { id: "caption" }, this.caption))), index.h("div", { role: "rowgroup" }, index.h("div", { class: "table__header", role: "row" }, index.h("slot", { name: "columns"
|
|
312
|
+
return (index.h(index.Host, null, index.h("div", { class: "table" }, index.h("div", { class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, index.h("div", { "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (index.h("swirl-visually-hidden", null, index.h("div", { id: "caption" }, this.caption))), index.h("div", { role: "rowgroup" }, index.h("div", { class: "table__header", role: "row" }, index.h("slot", { name: "columns" }))), index.h("div", { class: "table__body" }, index.h("slot", { name: "rows" }), this.empty && (index.h("div", { class: "table__empty-row", role: "row" }, index.h("div", { "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, index.h("swirl-text", { align: "center", size: "sm" }, this.emptyStateLabel))))))))));
|
|
321
313
|
}
|
|
322
314
|
get el() { return index.getElement(this); }
|
|
323
315
|
};
|