@getflip/swirl-components 0.363.1 → 0.363.3
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 +12 -2
- package/dist/cjs/swirl-time-input.cjs.entry.js +2 -1
- package/dist/collection/components/swirl-table/swirl-table.js +12 -2
- package/dist/collection/components/swirl-time-input/swirl-time-input.js +2 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +0 -28
- package/dist/components/swirl-table.js +12 -2
- package/dist/components/swirl-time-input.js +2 -1
- package/dist/esm/swirl-table.entry.js +12 -2
- package/dist/esm/swirl-time-input.entry.js +2 -1
- package/dist/swirl-components/p-4c87fcab.entry.js +1 -0
- package/dist/swirl-components/p-992376a7.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-table/swirl-table.d.ts +2 -0
- package/package.json +1 -1
- package/dist/swirl-components/p-0846e5fa.entry.js +0 -1
- package/dist/swirl-components/p-c277b6c2.entry.js +0 -1
package/components.json
CHANGED
|
@@ -226,11 +226,17 @@ const SwirlTable = class {
|
|
|
226
226
|
this.setupDragDrop();
|
|
227
227
|
}
|
|
228
228
|
});
|
|
229
|
-
this.
|
|
229
|
+
this.startRowMutationObserver();
|
|
230
|
+
}
|
|
231
|
+
startRowMutationObserver() {
|
|
232
|
+
this.rowMutationObserver?.observe(this.bodyEl, {
|
|
230
233
|
childList: true,
|
|
231
234
|
subtree: true,
|
|
232
235
|
});
|
|
233
236
|
}
|
|
237
|
+
stopRowMutationObserver() {
|
|
238
|
+
this.rowMutationObserver?.disconnect();
|
|
239
|
+
}
|
|
234
240
|
setupDragDrop() {
|
|
235
241
|
if (this.sortable) {
|
|
236
242
|
this.sortable.destroy();
|
|
@@ -258,6 +264,9 @@ const SwirlTable = class {
|
|
|
258
264
|
handle: this.dragDropHandle,
|
|
259
265
|
fallbackOnBody: true,
|
|
260
266
|
group: `swirl-table-${Math.random().toString().substring(2)}`,
|
|
267
|
+
onStart: () => {
|
|
268
|
+
this.stopRowMutationObserver();
|
|
269
|
+
},
|
|
261
270
|
onEnd: (event) => {
|
|
262
271
|
event.stopPropagation();
|
|
263
272
|
const { to, newIndex, oldIndex, item } = event;
|
|
@@ -271,6 +280,7 @@ const SwirlTable = class {
|
|
|
271
280
|
: undefined,
|
|
272
281
|
newPrevSiblingItemId: newIndex > 0 ? to.children[newIndex - 1].id : undefined,
|
|
273
282
|
});
|
|
283
|
+
this.startRowMutationObserver();
|
|
274
284
|
},
|
|
275
285
|
});
|
|
276
286
|
}
|
|
@@ -570,7 +580,7 @@ const SwirlTable = class {
|
|
|
570
580
|
"table--show-empty-state": this.empty && !this.loading,
|
|
571
581
|
"table--keyboard-move": this.movingViaKeyboard,
|
|
572
582
|
});
|
|
573
|
-
return (index$1.h(index$1.Host, { key: '
|
|
583
|
+
return (index$1.h(index$1.Host, { key: '31cc2b99cd42ce8de24fcdca3bd25d677b2065e9' }, index$1.h("div", { key: '2b10bbe4a18214e22f2ecedb07f2806d830abb55', class: className }, this.enableDragDrop && (index$1.h("swirl-visually-hidden", { key: 'aac0580b6da061bcf6a4e57f9e3308bcd83cd9ab' }, index$1.h("span", { key: '3c2c47c530275c59c13af5ae0bf95fe865546848', "aria-live": "assertive" }, this.liveRegionText))), index$1.h("div", { key: '063f4ec7388d8a9b9cc986e24e98dab85deb81b7', class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (el) => (this.container = el), tabIndex: -1 }, index$1.h("div", { key: '44ae0cb1ac3dbedba432e5154bb890311544a361', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (index$1.h("swirl-visually-hidden", { key: '4e98279e3a5e8dd340b05f1851559cbf35b25d95' }, index$1.h("div", { key: 'ec620a55154a96b65760fdfe5857d36cabc20e03', id: "caption" }, this.caption))), index$1.h("div", { key: 'de46c8483c070f631b529ff0e53db8b6a27ec8d8', role: "rowgroup" }, index$1.h("div", { key: '18a6f22082c3fe08134f6843ac9b9722501716fa', class: "table__header", ref: (el) => (this.headerEl = el), role: "row" }, index$1.h("slot", { key: '167710dee7162c62f40c218f6f2fb98e3f7534c0', name: "columns" }))), index$1.h("div", { key: '58cd2a6ee100461b4a9e8b5da35884f4271092a2', class: "table__body", ref: (el) => (this.bodyEl = el) }, index$1.h("slot", { key: 'd258590441b67c639ba479bcbf7ae85dc840fa88', name: "rows" }), index$1.h("div", { key: '9ddfc91f1a3055363798312fb0fd1aeb2671c2db', class: "table__empty-row", role: "row" }, index$1.h("div", { key: '78c4b0fa18d31277de03507b564ec42eba10c0a3', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, index$1.h("slot", { key: 'f56688d7ff20f7ae1a3fc4f9f8241bc235b8ff5e', name: "empty" }), !hasEmptyStateSlotAssignment && (index$1.h("swirl-text", { key: 'b7cb802b3420a554459372d8813f1b7ba6571929', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
|
|
574
584
|
}
|
|
575
585
|
get el() { return index$1.getElement(this); }
|
|
576
586
|
static get watchers() { return {
|
|
@@ -56,6 +56,7 @@ const SwirlTimeInput = class {
|
|
|
56
56
|
watchValue(newValue, oldValue) {
|
|
57
57
|
if (newValue !== oldValue) {
|
|
58
58
|
this.valueChange.emit(newValue);
|
|
59
|
+
this.mask.value = newValue;
|
|
59
60
|
}
|
|
60
61
|
}
|
|
61
62
|
updateIconSize(smallIcon) {
|
|
@@ -144,7 +145,7 @@ const SwirlTimeInput = class {
|
|
|
144
145
|
const className = index$2.classnames("time-input", {
|
|
145
146
|
"time-input--inline": this.inline,
|
|
146
147
|
});
|
|
147
|
-
return (index.h(index.Host, { key: '
|
|
148
|
+
return (index.h(index.Host, { key: 'bb150e1e738e6b70dd32089de213f0ad8ce49db8' }, index.h("div", { key: '58728d57b1349781a97070a9b8d47d27123946ab', class: className }, index.h("input", { key: '84e63c31acfc49b1b54fbce93c0351ed3359da28', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), index.h("span", { key: '98ac3a262dee95ab34e94f80a7632d074b881f64', class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { key: '8266ab31d312c5d5947feb6c77dfe20b727cc601', size: this.iconSize })))));
|
|
148
149
|
}
|
|
149
150
|
get el() { return index.getElement(this); }
|
|
150
151
|
static get watchers() { return {
|
|
@@ -141,11 +141,17 @@ export class SwirlTable {
|
|
|
141
141
|
this.setupDragDrop();
|
|
142
142
|
}
|
|
143
143
|
});
|
|
144
|
-
this.
|
|
144
|
+
this.startRowMutationObserver();
|
|
145
|
+
}
|
|
146
|
+
startRowMutationObserver() {
|
|
147
|
+
this.rowMutationObserver?.observe(this.bodyEl, {
|
|
145
148
|
childList: true,
|
|
146
149
|
subtree: true,
|
|
147
150
|
});
|
|
148
151
|
}
|
|
152
|
+
stopRowMutationObserver() {
|
|
153
|
+
this.rowMutationObserver?.disconnect();
|
|
154
|
+
}
|
|
149
155
|
setupDragDrop() {
|
|
150
156
|
if (this.sortable) {
|
|
151
157
|
this.sortable.destroy();
|
|
@@ -173,6 +179,9 @@ export class SwirlTable {
|
|
|
173
179
|
handle: this.dragDropHandle,
|
|
174
180
|
fallbackOnBody: true,
|
|
175
181
|
group: `swirl-table-${Math.random().toString().substring(2)}`,
|
|
182
|
+
onStart: () => {
|
|
183
|
+
this.stopRowMutationObserver();
|
|
184
|
+
},
|
|
176
185
|
onEnd: (event) => {
|
|
177
186
|
event.stopPropagation();
|
|
178
187
|
const { to, newIndex, oldIndex, item } = event;
|
|
@@ -186,6 +195,7 @@ export class SwirlTable {
|
|
|
186
195
|
: undefined,
|
|
187
196
|
newPrevSiblingItemId: newIndex > 0 ? to.children[newIndex - 1].id : undefined,
|
|
188
197
|
});
|
|
198
|
+
this.startRowMutationObserver();
|
|
189
199
|
},
|
|
190
200
|
});
|
|
191
201
|
}
|
|
@@ -485,7 +495,7 @@ export class SwirlTable {
|
|
|
485
495
|
"table--show-empty-state": this.empty && !this.loading,
|
|
486
496
|
"table--keyboard-move": this.movingViaKeyboard,
|
|
487
497
|
});
|
|
488
|
-
return (h(Host, { key: '
|
|
498
|
+
return (h(Host, { key: '31cc2b99cd42ce8de24fcdca3bd25d677b2065e9' }, h("div", { key: '2b10bbe4a18214e22f2ecedb07f2806d830abb55', class: className }, this.enableDragDrop && (h("swirl-visually-hidden", { key: 'aac0580b6da061bcf6a4e57f9e3308bcd83cd9ab' }, h("span", { key: '3c2c47c530275c59c13af5ae0bf95fe865546848', "aria-live": "assertive" }, this.liveRegionText))), h("div", { key: '063f4ec7388d8a9b9cc986e24e98dab85deb81b7', class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (el) => (this.container = el), tabIndex: -1 }, h("div", { key: '44ae0cb1ac3dbedba432e5154bb890311544a361', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: '4e98279e3a5e8dd340b05f1851559cbf35b25d95' }, h("div", { key: 'ec620a55154a96b65760fdfe5857d36cabc20e03', id: "caption" }, this.caption))), h("div", { key: 'de46c8483c070f631b529ff0e53db8b6a27ec8d8', role: "rowgroup" }, h("div", { key: '18a6f22082c3fe08134f6843ac9b9722501716fa', class: "table__header", ref: (el) => (this.headerEl = el), role: "row" }, h("slot", { key: '167710dee7162c62f40c218f6f2fb98e3f7534c0', name: "columns" }))), h("div", { key: '58cd2a6ee100461b4a9e8b5da35884f4271092a2', class: "table__body", ref: (el) => (this.bodyEl = el) }, h("slot", { key: 'd258590441b67c639ba479bcbf7ae85dc840fa88', name: "rows" }), h("div", { key: '9ddfc91f1a3055363798312fb0fd1aeb2671c2db', class: "table__empty-row", role: "row" }, h("div", { key: '78c4b0fa18d31277de03507b564ec42eba10c0a3', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("slot", { key: 'f56688d7ff20f7ae1a3fc4f9f8241bc235b8ff5e', name: "empty" }), !hasEmptyStateSlotAssignment && (h("swirl-text", { key: 'b7cb802b3420a554459372d8813f1b7ba6571929', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
|
|
489
499
|
}
|
|
490
500
|
static get is() { return "swirl-table"; }
|
|
491
501
|
static get encapsulation() { return "scoped"; }
|
|
@@ -47,6 +47,7 @@ export class SwirlTimeInput {
|
|
|
47
47
|
watchValue(newValue, oldValue) {
|
|
48
48
|
if (newValue !== oldValue) {
|
|
49
49
|
this.valueChange.emit(newValue);
|
|
50
|
+
this.mask.value = newValue;
|
|
50
51
|
}
|
|
51
52
|
}
|
|
52
53
|
updateIconSize(smallIcon) {
|
|
@@ -135,7 +136,7 @@ export class SwirlTimeInput {
|
|
|
135
136
|
const className = classnames("time-input", {
|
|
136
137
|
"time-input--inline": this.inline,
|
|
137
138
|
});
|
|
138
|
-
return (h(Host, { key: '
|
|
139
|
+
return (h(Host, { key: 'bb150e1e738e6b70dd32089de213f0ad8ce49db8' }, h("div", { key: '58728d57b1349781a97070a9b8d47d27123946ab', class: className }, h("input", { key: '84e63c31acfc49b1b54fbce93c0351ed3359da28', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), h("span", { key: '98ac3a262dee95ab34e94f80a7632d074b881f64', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '8266ab31d312c5d5947feb6c77dfe20b727cc601', size: this.iconSize })))));
|
|
139
140
|
}
|
|
140
141
|
static get is() { return "swirl-time-input"; }
|
|
141
142
|
static get encapsulation() { return "scoped"; }
|