@getflip/swirl-components 0.426.0 → 0.426.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.
Files changed (19) hide show
  1. package/components.json +40 -5
  2. package/dist/cjs/swirl-popover_2.cjs.entry.js +39 -18
  3. package/dist/cjs/swirl-table.cjs.entry.js +1 -1
  4. package/dist/collection/components/swirl-popover/swirl-popover.js +39 -13
  5. package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.js +20 -7
  6. package/dist/collection/components/swirl-table/swirl-table.css +11 -4
  7. package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
  8. package/dist/components/swirl-popover-trigger2.js +20 -7
  9. package/dist/components/swirl-popover2.js +19 -11
  10. package/dist/components/swirl-table.js +1 -1
  11. package/dist/esm/swirl-popover_2.entry.js +39 -18
  12. package/dist/esm/swirl-table.entry.js +1 -1
  13. package/dist/swirl-components/p-0f84622e.entry.js +1 -0
  14. package/dist/swirl-components/{p-8c4c52c4.entry.js → p-54d0e3eb.entry.js} +1 -1
  15. package/dist/swirl-components/swirl-components.esm.js +1 -1
  16. package/dist/types/components/swirl-popover/swirl-popover.d.ts +4 -2
  17. package/dist/types/components.d.ts +4 -4
  18. package/package.json +1 -1
  19. package/dist/swirl-components/p-8949aeeb.entry.js +0 -1
package/dist/components/swirl-popover-trigger2.js CHANGED
@@ -34,7 +34,7 @@ const SwirlPopoverTrigger = /*@__PURE__*/ proxyCustomElement(class SwirlPopoverT
34
34
  this.mouseenterHandler = () => {
35
35
  const popoverEl = this.getPopoverEl();
36
36
  const triggerEl = this.getTriggerEl();
37
- popoverEl.open(triggerEl, true);
37
+ popoverEl.open(triggerEl, true, "hover");
38
38
  popoverEl.addEventListener("popoverOpen", () => {
39
39
  this.updateTriggerElAriaAttributes(true);
40
40
  }, { once: true });
@@ -56,7 +56,7 @@ const SwirlPopoverTrigger = /*@__PURE__*/ proxyCustomElement(class SwirlPopoverT
56
56
  return;
57
57
  const popoverEl = this.getPopoverEl();
58
58
  const triggerEl = this.getTriggerEl();
59
- popoverEl.toggle(triggerEl);
59
+ popoverEl.toggle(triggerEl, "click");
60
60
  popoverEl.addEventListener("popoverOpen", () => {
61
61
  this.updateTriggerElAriaAttributes(true);
62
62
  }, { once: true });
@@ -74,13 +74,25 @@ const SwirlPopoverTrigger = /*@__PURE__*/ proxyCustomElement(class SwirlPopoverT
74
74
  }
75
75
  const popoverId = this.getPopoverEl()?.id;
76
76
  if (triggerEl.tagName.startsWith("SWIRL-")) {
77
- triggerEl.setAttribute("swirl-aria-controls", popoverId);
78
- triggerEl.setAttribute("swirl-aria-expanded", String(open || "false"));
77
+ if (!this.triggerOnHover) {
78
+ triggerEl.setAttribute("swirl-aria-controls", popoverId);
79
+ triggerEl.setAttribute("swirl-aria-expanded", String(open || "false"));
80
+ }
81
+ else {
82
+ triggerEl.removeAttribute("swirl-aria-controls");
83
+ triggerEl.removeAttribute("swirl-aria-expanded");
84
+ }
79
85
  triggerEl.setAttribute("swirl-aria-haspopup", "dialog");
80
86
  }
81
87
  else {
82
- triggerEl.setAttribute("aria-controls", popoverId);
83
- triggerEl.setAttribute("aria-expanded", String(open || "false"));
88
+ if (!this.triggerOnHover) {
89
+ triggerEl.setAttribute("aria-controls", popoverId);
90
+ triggerEl.setAttribute("aria-expanded", String(open || "false"));
91
+ }
92
+ else {
93
+ triggerEl.removeAttribute("aria-controls");
94
+ triggerEl.removeAttribute("aria-expanded");
95
+ }
84
96
  triggerEl.setAttribute("aria-haspopup", "dialog");
85
97
  }
86
98
  };
@@ -112,6 +124,7 @@ const SwirlPopoverTrigger = /*@__PURE__*/ proxyCustomElement(class SwirlPopoverT
112
124
  this.updateTriggerElAriaAttributes();
113
125
  }
114
126
  watchHover() {
127
+ this.updateTriggerElAriaAttributes();
115
128
  clearTimeout(this.hoverDelayReference);
116
129
  clearTimeout(this.hoverLingerReference);
117
130
  }
@@ -158,7 +171,7 @@ const SwirlPopoverTrigger = /*@__PURE__*/ proxyCustomElement(class SwirlPopoverT
158
171
  return isActive;
159
172
  }
160
173
  render() {
161
- return (h(Host, { key: 'b3b848a07767f29be55ebfc23b5ca7248b69743b', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '8c1aa0828cddda7c7355799a4fea2edc279700a0' })));
174
+ return (h(Host, { key: 'f47fa501d4706eb541c6d11cc93962339b1d3c59', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: 'e170ef35998bf793fd053dc0c5788c906a4e464b' })));
162
175
  }
163
176
  get el() { return this; }
164
177
  static get watchers() { return {
package/dist/components/swirl-popover2.js CHANGED
@@ -150,7 +150,8 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
150
150
  setTimeout(() => {
151
151
  this.active = false;
152
152
  this.closing = false;
153
- this.updateTriggerAttributes();
153
+ this.updateTriggerAttributes(this.openedVia);
154
+ this.openedVia = undefined;
154
155
  }, 150);
155
156
  this.unlockBodyScroll();
156
157
  if (this.returnFocusToTrigger && !disableFocus) {
@@ -161,14 +162,15 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
161
162
  * Open the popover.
162
163
  * @returns
163
164
  */
164
- async open(triggerEl, disableFocus) {
165
+ async open(triggerEl, disableFocus, via) {
165
166
  this.triggerEl = triggerEl || this.triggerEl;
166
167
  if (this.active || !Boolean(this.triggerEl)) {
167
168
  return;
168
169
  }
169
170
  this.adjustWidth();
170
171
  this.active = true;
171
- this.updateTriggerAttributes();
172
+ this.openedVia = via;
173
+ this.updateTriggerAttributes(via);
172
174
  const focusableChildren = this.getFocusableChildren();
173
175
  requestAnimationFrame(async () => {
174
176
  await this.reposition();
@@ -197,12 +199,12 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
197
199
  /**
198
200
  * Toggles the popover.
199
201
  */
200
- async toggle(triggerEl) {
202
+ async toggle(triggerEl, via) {
201
203
  if (this.active) {
202
204
  this.close();
203
205
  }
204
206
  else {
205
- this.open(triggerEl);
207
+ this.open(triggerEl, undefined, via);
206
208
  }
207
209
  }
208
210
  connectTrigger() {
@@ -228,13 +230,19 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
228
230
  this.triggerEl)
229
231
  : this.triggerEl;
230
232
  }
231
- updateTriggerAttributes() {
233
+ updateTriggerAttributes(controlledVia) {
232
234
  if (!Boolean(this.triggerEl)) {
233
235
  return;
234
236
  }
235
237
  const nativeTriggerEl = this.getNativeTriggerElement();
236
- nativeTriggerEl.setAttribute("aria-controls", this.el.id);
237
- nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
238
+ if (controlledVia !== "hover") {
239
+ nativeTriggerEl.setAttribute("aria-controls", this.el.id);
240
+ nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
241
+ }
242
+ else {
243
+ nativeTriggerEl.removeAttribute("aria-controls");
244
+ nativeTriggerEl.removeAttribute("aria-expanded");
245
+ }
238
246
  nativeTriggerEl.setAttribute("aria-haspopup", "dialog");
239
247
  }
240
248
  getFocusableChildren() {
@@ -286,14 +294,14 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
286
294
  "popover--transparent": this.transparent,
287
295
  "popover--padded": this.padded,
288
296
  });
289
- return (h(Host, { key: '20930a84eeb5cf30530117d809323e552b53f2b5', style: { display: this.active ? "inline-flex" : "none" } }, h("div", { key: '390101c87f025ef7eb61b880b70b0577c183e62f', class: className, onKeyDown: this.onKeydown }, h("div", { key: 'c3feb1eb33a7fc3ca59306b72fceadf6d0e89f25', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
297
+ return (h(Host, { key: 'cf85cdb6e5d6bd0948b4c80ebc611f5502f37d25', style: { display: this.active ? "inline-flex" : "none" } }, h("div", { key: '154ff782097a8e1d90f2a61faaca14bb4871ace5', class: className, onKeyDown: this.onKeydown }, h("div", { key: '235a9fca7951e844c8f0a32a02b7235d919574a5', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
290
298
  top: Boolean(this.position) ? `${this.position?.y}px` : "",
291
299
  left: Boolean(this.position) ? `${this.position?.x}px` : "",
292
- }, tabindex: "-1" }, h("span", { key: '47ef833faab1dcae48d5369a9caf4a9272d8733c', class: "popover__handle" }), h("div", { key: '02c79e428646f063b18c2fff68a826e004f0c4b1', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
300
+ }, tabindex: "-1" }, h("span", { key: 'd6a84c0e650dea3e490271d7de11eead532602eb', class: "popover__handle" }), h("div", { key: '1213a63d107de526f5a91b0a116935f61bba0994', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
293
301
  maxHeight: !mobile && Boolean(this.maxHeight)
294
302
  ? this.maxHeight
295
303
  : undefined,
296
- } }, h("slot", { key: 'c06749f1f530d2d9639849232b1ba84775c434c8' }))), this.active && (h("div", { key: '644eb0090c7244cfa3f16b26bfce5a2d04687c77', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
304
+ } }, h("slot", { key: 'c031de0a703d9dff7346cd8cbe40f825c8665f13' }))), this.active && (h("div", { key: 'd591f05e7183721ec08188507d8c0a5bb61947dc', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
297
305
  }
298
306
  get el() { return this; }
299
307
  static get style() { return swirlPopoverCss; }
package/dist/components/swirl-table.js CHANGED
@@ -89,7 +89,7 @@ function requireDist () {
89
89
  var distExports = requireDist();
90
90
  var debouncePromise = /*@__PURE__*/getDefaultExportFromCjs(distExports);
91
91
 
92
- const swirlTableCss = ".sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid\n var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--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.sc-swirl-table: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.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:none}.table__empty-row-cell.sc-swirl-table{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.sc-swirl-table>*.sc-swirl-table{flex-grow:1}";
92
+ const swirlTableCss = ".sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(23, 23, 23, 0.2);position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}html.theme-dark.sc-swirl-table-h,html.theme-dark .sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(0, 0, 0, 0.2)}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid\n var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px var(--swirl-table-shadow-rgba),\n 2px 0 4px -2px var(--swirl-table-shadow-rgba)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px\n var(--swirl-table-shadow-rgba),\n 0px 1px 4px 0px var(--swirl-table-shadow-rgba)}.table__table.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:none}.table__empty-row-cell.sc-swirl-table{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.sc-swirl-table>*.sc-swirl-table{flex-grow:1}";
93
93
 
94
94
  const defaultDragDropInstructions = {
95
95
  end: "Dropped. Final position in table: {position} of {rowCount}.",
package/dist/esm/swirl-popover_2.entry.js CHANGED
@@ -148,7 +148,8 @@ const SwirlPopover = class {
148
148
  setTimeout(() => {
149
149
  this.active = false;
150
150
  this.closing = false;
151
- this.updateTriggerAttributes();
151
+ this.updateTriggerAttributes(this.openedVia);
152
+ this.openedVia = undefined;
152
153
  }, 150);
153
154
  this.unlockBodyScroll();
154
155
  if (this.returnFocusToTrigger && !disableFocus) {
@@ -159,14 +160,15 @@ const SwirlPopover = class {
159
160
  * Open the popover.
160
161
  * @returns
161
162
  */
162
- async open(triggerEl, disableFocus) {
163
+ async open(triggerEl, disableFocus, via) {
163
164
  this.triggerEl = triggerEl || this.triggerEl;
164
165
  if (this.active || !Boolean(this.triggerEl)) {
165
166
  return;
166
167
  }
167
168
  this.adjustWidth();
168
169
  this.active = true;
169
- this.updateTriggerAttributes();
170
+ this.openedVia = via;
171
+ this.updateTriggerAttributes(via);
170
172
  const focusableChildren = this.getFocusableChildren();
171
173
  requestAnimationFrame(async () => {
172
174
  await this.reposition();
@@ -195,12 +197,12 @@ const SwirlPopover = class {
195
197
  /**
196
198
  * Toggles the popover.
197
199
  */
198
- async toggle(triggerEl) {
200
+ async toggle(triggerEl, via) {
199
201
  if (this.active) {
200
202
  this.close();
201
203
  }
202
204
  else {
203
- this.open(triggerEl);
205
+ this.open(triggerEl, undefined, via);
204
206
  }
205
207
  }
206
208
  connectTrigger() {
@@ -226,13 +228,19 @@ const SwirlPopover = class {
226
228
  this.triggerEl)
227
229
  : this.triggerEl;
228
230
  }
229
- updateTriggerAttributes() {
231
+ updateTriggerAttributes(controlledVia) {
230
232
  if (!Boolean(this.triggerEl)) {
231
233
  return;
232
234
  }
233
235
  const nativeTriggerEl = this.getNativeTriggerElement();
234
- nativeTriggerEl.setAttribute("aria-controls", this.el.id);
235
- nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
236
+ if (controlledVia !== "hover") {
237
+ nativeTriggerEl.setAttribute("aria-controls", this.el.id);
238
+ nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
239
+ }
240
+ else {
241
+ nativeTriggerEl.removeAttribute("aria-controls");
242
+ nativeTriggerEl.removeAttribute("aria-expanded");
243
+ }
236
244
  nativeTriggerEl.setAttribute("aria-haspopup", "dialog");
237
245
  }
238
246
  getFocusableChildren() {
@@ -284,14 +292,14 @@ const SwirlPopover = class {
284
292
  "popover--transparent": this.transparent,
285
293
  "popover--padded": this.padded,
286
294
  });
287
- return (h(Host, { key: '20930a84eeb5cf30530117d809323e552b53f2b5', style: { display: this.active ? "inline-flex" : "none" } }, h("div", { key: '390101c87f025ef7eb61b880b70b0577c183e62f', class: className, onKeyDown: this.onKeydown }, h("div", { key: 'c3feb1eb33a7fc3ca59306b72fceadf6d0e89f25', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
295
+ return (h(Host, { key: 'cf85cdb6e5d6bd0948b4c80ebc611f5502f37d25', style: { display: this.active ? "inline-flex" : "none" } }, h("div", { key: '154ff782097a8e1d90f2a61faaca14bb4871ace5', class: className, onKeyDown: this.onKeydown }, h("div", { key: '235a9fca7951e844c8f0a32a02b7235d919574a5', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
288
296
  top: Boolean(this.position) ? `${this.position?.y}px` : "",
289
297
  left: Boolean(this.position) ? `${this.position?.x}px` : "",
290
- }, tabindex: "-1" }, h("span", { key: '47ef833faab1dcae48d5369a9caf4a9272d8733c', class: "popover__handle" }), h("div", { key: '02c79e428646f063b18c2fff68a826e004f0c4b1', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
298
+ }, tabindex: "-1" }, h("span", { key: 'd6a84c0e650dea3e490271d7de11eead532602eb', class: "popover__handle" }), h("div", { key: '1213a63d107de526f5a91b0a116935f61bba0994', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
291
299
  maxHeight: !mobile && Boolean(this.maxHeight)
292
300
  ? this.maxHeight
293
301
  : undefined,
294
- } }, h("slot", { key: 'c06749f1f530d2d9639849232b1ba84775c434c8' }))), this.active && (h("div", { key: '644eb0090c7244cfa3f16b26bfce5a2d04687c77', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
302
+ } }, h("slot", { key: 'c031de0a703d9dff7346cd8cbe40f825c8665f13' }))), this.active && (h("div", { key: 'd591f05e7183721ec08188507d8c0a5bb61947dc', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
295
303
  }
296
304
  get el() { return getElement(this); }
297
305
  };
@@ -330,7 +338,7 @@ const SwirlPopoverTrigger = class {
330
338
  this.mouseenterHandler = () => {
331
339
  const popoverEl = this.getPopoverEl();
332
340
  const triggerEl = this.getTriggerEl();
333
- popoverEl.open(triggerEl, true);
341
+ popoverEl.open(triggerEl, true, "hover");
334
342
  popoverEl.addEventListener("popoverOpen", () => {
335
343
  this.updateTriggerElAriaAttributes(true);
336
344
  }, { once: true });
@@ -352,7 +360,7 @@ const SwirlPopoverTrigger = class {
352
360
  return;
353
361
  const popoverEl = this.getPopoverEl();
354
362
  const triggerEl = this.getTriggerEl();
355
- popoverEl.toggle(triggerEl);
363
+ popoverEl.toggle(triggerEl, "click");
356
364
  popoverEl.addEventListener("popoverOpen", () => {
357
365
  this.updateTriggerElAriaAttributes(true);
358
366
  }, { once: true });
@@ -370,13 +378,25 @@ const SwirlPopoverTrigger = class {
370
378
  }
371
379
  const popoverId = this.getPopoverEl()?.id;
372
380
  if (triggerEl.tagName.startsWith("SWIRL-")) {
373
- triggerEl.setAttribute("swirl-aria-controls", popoverId);
374
- triggerEl.setAttribute("swirl-aria-expanded", String(open || "false"));
381
+ if (!this.triggerOnHover) {
382
+ triggerEl.setAttribute("swirl-aria-controls", popoverId);
383
+ triggerEl.setAttribute("swirl-aria-expanded", String(open || "false"));
384
+ }
385
+ else {
386
+ triggerEl.removeAttribute("swirl-aria-controls");
387
+ triggerEl.removeAttribute("swirl-aria-expanded");
388
+ }
375
389
  triggerEl.setAttribute("swirl-aria-haspopup", "dialog");
376
390
  }
377
391
  else {
378
- triggerEl.setAttribute("aria-controls", popoverId);
379
- triggerEl.setAttribute("aria-expanded", String(open || "false"));
392
+ if (!this.triggerOnHover) {
393
+ triggerEl.setAttribute("aria-controls", popoverId);
394
+ triggerEl.setAttribute("aria-expanded", String(open || "false"));
395
+ }
396
+ else {
397
+ triggerEl.removeAttribute("aria-controls");
398
+ triggerEl.removeAttribute("aria-expanded");
399
+ }
380
400
  triggerEl.setAttribute("aria-haspopup", "dialog");
381
401
  }
382
402
  };
@@ -408,6 +428,7 @@ const SwirlPopoverTrigger = class {
408
428
  this.updateTriggerElAriaAttributes();
409
429
  }
410
430
  watchHover() {
431
+ this.updateTriggerElAriaAttributes();
411
432
  clearTimeout(this.hoverDelayReference);
412
433
  clearTimeout(this.hoverLingerReference);
413
434
  }
@@ -454,7 +475,7 @@ const SwirlPopoverTrigger = class {
454
475
  return isActive;
455
476
  }
456
477
  render() {
457
- return (h(Host, { key: 'b3b848a07767f29be55ebfc23b5ca7248b69743b', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '8c1aa0828cddda7c7355799a4fea2edc279700a0' })));
478
+ return (h(Host, { key: 'f47fa501d4706eb541c6d11cc93962339b1d3c59', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: 'e170ef35998bf793fd053dc0c5788c906a4e464b' })));
458
479
  }
459
480
  get el() { return getElement(this); }
460
481
  static get watchers() { return {
package/dist/esm/swirl-table.entry.js CHANGED
@@ -87,7 +87,7 @@ function requireDist () {
87
87
  var distExports = requireDist();
88
88
  var debouncePromise = /*@__PURE__*/getDefaultExportFromCjs(distExports);
89
89
 
90
- const swirlTableCss = ".sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid\n var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--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.sc-swirl-table: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.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:none}.table__empty-row-cell.sc-swirl-table{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.sc-swirl-table>*.sc-swirl-table{flex-grow:1}";
90
+ const swirlTableCss = ".sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(23, 23, 23, 0.2);position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}html.theme-dark.sc-swirl-table-h,html.theme-dark .sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(0, 0, 0, 0.2)}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid\n var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px var(--swirl-table-shadow-rgba),\n 2px 0 4px -2px var(--swirl-table-shadow-rgba)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px\n var(--swirl-table-shadow-rgba),\n 0px 1px 4px 0px var(--swirl-table-shadow-rgba)}.table__table.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:none}.table__empty-row-cell.sc-swirl-table{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.sc-swirl-table>*.sc-swirl-table{flex-grow:1}";
91
91
 
92
92
  const defaultDragDropInstructions = {
93
93
  end: "Dropped. Final position in table: {position} of {rowCount}.",
package/dist/swirl-components/p-0f84622e.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as o,c as e,h as t,H as i,d as s}from"./p-Dj_4Fda9.js";import{P as r,N as n,k as a,D as p,b as h}from"./p-BtsCuEVE.js";import{d as c,e as d}from"./p-B0kNlhKL.js";import{c as l}from"./p-orsBiyT_.js";import{i as v,o as m,k as f,q as u}from"./p-wi_3Z3FQ.js";const g=class{constructor(t){o(this,t),this.popoverClose=e(this,"popoverClose",7),this.popoverOpen=e(this,"popoverOpen",7),this.animation="scale-in-xy",this.enableFlip=!0,this.maxHeight="22rem",this.offset=8,this.padded=!0,this.placement="bottom-start",this.returnFocusToTrigger=!0,this.active=!1,this.closing=!1,this.togglePopover=o=>{o.stopPropagation(),this.active?this.close():this.open()},this.onKeydown=o=>{"Escape"===o.code&&this.active&&(o.stopImmediatePropagation(),o.stopPropagation(),this.close())},this.reposition=async()=>{const o=v();if(!Boolean(this.triggerEl)||!Boolean(this.contentContainer))return;if(o)return void(this.position=void 0);const e="number"==typeof this.offset?{mainAxis:this.offset,crossAxis:0}:{mainAxis:this.offset[0],crossAxis:this.offset[1]},t=m("--s-space-16"),i=a({padding:{left:t,right:t}}),s=this.enableFlip?[p(e),i,h()]:[p(e),i];this.position=await r(this.triggerEl,this.contentContainer,{middleware:s,placement:this.placement,strategy:"fixed"})},this.onCloseButtonClick=()=>{this.close()}}componentDidLoad(){this.connectTrigger(),this.updateTriggerAttributes(),Boolean(this.trigger)&&console.warn('[Swirl] The "trigger" prop of swirl-popover is deprecated and will be removed with the next major release. Please use the swirl-popover-trigger component instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlpopovertrigger--docs')}disconnectedCallback(){this.unlockBodyScroll()}onWindowFocusIn(o){if(!this.active)return;const e=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),t="webkit"in window,i=e||t,s=o.target,r=o.relatedTarget,n=f(),a=!this.el.contains(s)&&!this.el.contains(n),p=s!==this.triggerEl&&!this.triggerEl?.contains(s),h=i&&!this.el.contains(r||s)&&r!==this.el;["SWIRL-TAB"].includes(s.tagName)||!a||!p||i&&!h||this.close()}onWindowBlur(){if(!this.active||this.closing)return;const o=document.activeElement;o&&["IFRAME"].includes(o.tagName)&&this.close()}onWindowClick(o){if(!this.active||this.closing)return;const e=o.target,t=this.el.contains(e),i=o.composedPath().some((o=>!!(Boolean(o)&&o instanceof Node)&&this.el.contains(o))),s=e===this.triggerEl||this.triggerEl.contains(e)||o.composedPath().includes(this.triggerEl);t||i||s||this.close()}async close(o){!this.closing&&this.active&&(this.popoverClose.emit(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.closing=!0,setTimeout((()=>{this.active=!1,this.closing=!1,this.updateTriggerAttributes(this.openedVia),this.openedVia=void 0}),150),this.unlockBodyScroll(),this.returnFocusToTrigger&&!o&&this.getNativeTriggerElement()?.focus())}async open(o,e,t){if(this.triggerEl=o||this.triggerEl,this.active||!Boolean(this.triggerEl))return;this.adjustWidth(),this.active=!0,this.openedVia=t,this.updateTriggerAttributes(t);const i=this.getFocusableChildren();requestAnimationFrame((async()=>{await this.reposition(),this.popoverOpen.emit({position:this.position}),i.length>0&&!e?i[0].focus():e||this.contentContainer.focus(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=n(this.triggerEl,this.contentContainer,(()=>this.reposition())),this.scrollContainer.scrollTop=0,this.lockBodyScroll()}))}async isOpen(){return this.active&&!this.closing}async toggle(o,e){this.active?this.close():this.open(o,void 0,e)}connectTrigger(){Boolean(this.trigger)?(this.triggerEl="string"==typeof this.trigger?u(this.triggerContainer||document.body,`#${this.trigger}`)[0]:this.trigger,Boolean(this.triggerEl)&&this.triggerEl.addEventListener("click",(o=>{this.togglePopover(o)}))):this.triggerEl=void 0}getNativeTriggerElement(){return this.triggerEl?.tagName.startsWith("SWIRL-")&&(this.triggerEl?.children[0]||this.triggerEl?.shadowRoot?.children[0])||this.triggerEl}updateTriggerAttributes(o){if(!Boolean(this.triggerEl))return;const e=this.getNativeTriggerElement();"hover"!==o?(e.setAttribute("aria-controls",this.el.id),e.setAttribute("aria-expanded",String(this.active))):(e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded")),e.setAttribute("aria-haspopup","dialog")}getFocusableChildren(){return u(this.el,'[role="menuitem"], [role="menuitemradio"], [role="option"]')}adjustWidth(){let o=this.useContainerWidth;[!0,"true"].includes(this.useContainerWidth)?o=!0:[!1,"false"].includes(this.useContainerWidth)&&(o=!1);const e=!window.matchMedia("(min-width: 768px)").matches;if(Boolean(o)&&!e){const e="string"==typeof o&&this.el.closest(o)||this.el.parentElement;this.contentContainer.style.maxWidth="none",this.contentContainer.style.width=e.getBoundingClientRect().width+"px"}else this.contentContainer.style.maxWidth="",this.contentContainer.style.width=""}lockBodyScroll(){v()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&c(this.scrollContainer)}unlockBodyScroll(){v()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&d(this.scrollContainer)}render(){const o=!window.matchMedia("(min-width: 768px)").matches,e=l("popover",`popover--animation-${this.animation}`,`popover--placement-${this.position?.placement}`,{"popover--active":this.active,"popover--closing":this.closing,"popover--fullscreen-bottom-sheet":this.fullscreenBottomSheet,"popover--inactive":!this.active,"popover--transparent":this.transparent,"popover--padded":this.padded});return t(i,{key:"cf85cdb6e5d6bd0948b4c80ebc611f5502f37d25",style:{display:this.active?"inline-flex":"none"}},t("div",{key:"154ff782097a8e1d90f2a61faaca14bb4871ace5",class:e,onKeyDown:this.onKeydown},t("div",{key:"235a9fca7951e844c8f0a32a02b7235d919574a5","aria-hidden":this.active?"false":"true","aria-label":this.label,class:"popover__content",id:this.popoverId,part:"popover__content",role:"dialog",ref:o=>this.contentContainer=o,style:{top:Boolean(this.position)?`${this.position?.y}px`:"",left:Boolean(this.position)?`${this.position?.x}px`:""},tabindex:"-1"},t("span",{key:"d6a84c0e650dea3e490271d7de11eead532602eb",class:"popover__handle"}),t("div",{key:"1213a63d107de526f5a91b0a116935f61bba0994",class:"popover__scroll-container",part:"popover__scroll-container",ref:o=>this.scrollContainer=o,style:{maxHeight:!o&&Boolean(this.maxHeight)?this.maxHeight:void 0}},t("slot",{key:"c031de0a703d9dff7346cd8cbe40f825c8665f13"}))),this.active&&t("div",{key:"d591f05e7183721ec08188507d8c0a5bb61947dc",class:"popover__backdrop",onClick:this.onCloseButtonClick})))}get el(){return s(this)}};g.style=":host{position:relative;z-index:var(--s-z-40)}:host *{box-sizing:border-box}:host{--swirl-resource-list-item-background-default:var(\n --s-surface-overlay-default\n );--swirl-resource-list-item-background-hovered:var(\n --s-surface-overlay-hovered\n );--swirl-resource-list-item-background-pressed:var(\n --s-surface-overlay-pressed\n )}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-base);animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}";const _=class{constructor(e){o(this,e),this.hidePopoverWhenInvisible=!0,this.setAriaAttributes=!0,this.triggerOnClick=!0,this.triggerOnHover=!1,this.triggerIsActive=!1,this.popoverMouseEnter=()=>{this.stopHoverLingerTimer()},this.popoverMouseLeave=()=>{this.triggerIsActive&&this.mouseleaveHandler()},this.onMouseenter=()=>{this.triggerOnHover&&(this.stopHoverLingerTimer(),this.triggerIsActive=!0,this.hoverDelayReference=setTimeout((()=>{this.hoverDelayReference=void 0,this.triggerOnHover&&this.mouseenterHandler()}),this.hoverDelay))},this.mouseenterHandler=()=>{const o=this.getPopoverEl(),e=this.getTriggerEl();o.open(e,!0,"hover"),o.addEventListener("popoverOpen",(()=>{this.updateTriggerElAriaAttributes(!0)}),{once:!0}),o.addEventListener("popoverClose",(()=>{this.updateTriggerElAriaAttributes(!1)}),{once:!0})},this.onMouseleave=()=>{clearTimeout(this.hoverDelayReference),this.mouseleaveHandler()},this.mouseleaveHandler=()=>{this.triggerOnHover&&this.startHoverLingerTimer()},this.onClick=()=>{if(!this.triggerOnClick)return;const o=this.getPopoverEl(),e=this.getTriggerEl();o.toggle(e,"click"),o.addEventListener("popoverOpen",(()=>{this.updateTriggerElAriaAttributes(!0)}),{once:!0}),o.addEventListener("popoverClose",(()=>{this.updateTriggerElAriaAttributes(!1)}),{once:!0})},this.updateTriggerElAriaAttributes=o=>{if(!this.setAriaAttributes)return;const e=this.getTriggerEl();if(!Boolean(e))return;const t=this.getPopoverEl()?.id;e.tagName.startsWith("SWIRL-")?(this.triggerOnHover?(e.removeAttribute("swirl-aria-controls"),e.removeAttribute("swirl-aria-expanded")):(e.setAttribute("swirl-aria-controls",t),e.setAttribute("swirl-aria-expanded",String(o||"false"))),e.setAttribute("swirl-aria-haspopup","dialog")):(this.triggerOnHover?(e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded")):(e.setAttribute("aria-controls",t),e.setAttribute("aria-expanded",String(o||"false"))),e.setAttribute("aria-haspopup","dialog"))}}componentDidLoad(){if(this.updateTriggerElAriaAttributes(),this.setupHoverListeners(),this.hidePopoverWhenInvisible){this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{root:this.parentScrollContainer,threshold:1});const o=this.el.querySelector("*");if(!Boolean(o))return;this.intersectionObserver.observe(o)}}disconnectedCallback(){this.intersectionObserver?.disconnect();const o=this.getPopoverEl();Boolean(o)&&(o.removeEventListener("mouseenter",this.popoverMouseEnter),o.removeEventListener("mouseleave",this.popoverMouseLeave))}watchPopover(){this.updateTriggerElAriaAttributes()}watchHover(){this.updateTriggerElAriaAttributes(),clearTimeout(this.hoverDelayReference),clearTimeout(this.hoverLingerReference)}getPopoverEl(){return"string"==typeof this.swirlPopover?document.querySelector(`#${this.swirlPopover}`):this.swirlPopover?.el??this.swirlPopover}getTriggerEl(){return 1!==this.el.children.length&&console.warn('[Swirl] The "swirl-popover-trigger" component expects exactly one child element.'),this.el.children[0]}onVisibilityChange(o){!o[0].isIntersecting&&this.isPopoverOpen()&&this.getPopoverEl()?.close()}setupHoverListeners(){const o=this.getPopoverEl();Boolean(o)&&(o.addEventListener("mouseenter",this.popoverMouseEnter),o.addEventListener("mouseleave",this.popoverMouseLeave))}startHoverLingerTimer(){clearTimeout(this.hoverLingerReference),this.hoverLingerReference=setTimeout((()=>{this.triggerIsActive&&this.isPopoverOpen()&&this.getPopoverEl().close(!0),this.triggerIsActive=!1}),this.hoverLingerDuration)}stopHoverLingerTimer(){clearTimeout(this.hoverLingerReference)}isPopoverOpen(){const o=this.getPopoverEl(),e=o?.shadowRoot.firstChild?.classList.contains("popover--active");return e}render(){return t(i,{key:"f47fa501d4706eb541c6d11cc93962339b1d3c59",onClick:this.onClick,onMouseenter:this.onMouseenter,onMouseleave:this.onMouseleave},t("slot",{key:"e170ef35998bf793fd053dc0c5788c906a4e464b"}))}get el(){return s(this)}static get watchers(){return{swirlPopover:["watchPopover"],triggerOnHover:["watchHover"]}}};_.style=".sc-swirl-popover-trigger-h{display:contents}";export{g as swirl_popover,_ as swirl_popover_trigger}
package/dist/swirl-components/{p-8c4c52c4.entry.js → p-54d0e3eb.entry.js} RENAMED
@@ -1 +1 @@
1
- import{r as t,c as e,h as s,H as i,d as o}from"./p-Dj_4Fda9.js";import{g as a,c as r}from"./p-orsBiyT_.js";import{S as l}from"./p-CMrz6687.js";import{d as n,i as h,q as c}from"./p-wi_3Z3FQ.js";var d,b,w=a((b||(b=1,d=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=void 0,o=void 0,a=void 0,r=[];return function(){var n=function(t){return"function"==typeof t?t():t}(e),h=(new Date).getTime(),c=!i||h-i>n;i=h;for(var d=arguments.length,b=Array(d),w=0;w<d;w++)b[w]=arguments[w];if(c&&s.leading)return s.accumulate?Promise.resolve(t.call(this,[b])).then((function(t){return t[0]})):Promise.resolve(t.call.apply(t,[this].concat(b)));if(o?clearTimeout(a):o=function(){var t={};return t.promise=new Promise((function(e,s){t.resolve=e,t.reject=s})),t}(),r.push(b),a=setTimeout(l.bind(this),n),s.accumulate){var u=r.length-1;return o.promise.then((function(t){return t[u]}))}return o.promise};function l(){var e=o;clearTimeout(a),Promise.resolve(s.accumulate?t.call(this,r):t.apply(this,r[r.length-1])).then(e.resolve,e.reject),r=[],o=null}}),d));const u={end:"Dropped. Final position in table: {position} of {rowCount}.",initial:"Press space to move the row.",moved:"Current position in table: {position} of {rowCount}.",start:"Row grabbed. Current position in table: {position} of {rowCount}. Press up and down arrow keys to change position, Space to drop."},p=class{constructor(s){t(this,s),this.dropRow=e(this,"dropRow",7),this.dragDropInstructions=u,this.emptyStateLabel="No results found.",this.liveRegionText="",this.triggerRerender=n((async()=>{await this.updateLayout(),this.updateEmptyState()}),0,!0),this.updateLayout=w((async()=>{this.resetCellStyles(),this.resetColumnStyles(),this.resetEmptyRowStyles(),this.resetRowGroupStyles(),this.layoutEmptyRow(),this.layoutRowGroups(),this.layOutCellsAndColumns(),this.updateScrolledState()}),16,{leading:!0}),this.onScroll=()=>{this.updateScrolledState()},this.onFocus=t=>{if(this.movingViaKeyboard){const t=this.el.querySelector(".table-row--moving");t&&this.focusDragHandleOfRow(t)}const e=!!t.target?.closest(this.dragDropHandle);""===this.liveRegionText&&e&&this.updateLiveRegionText("initial")},this.onBlur=t=>{const e=t.relatedTarget,s=!!e?.closest(this.dragDropHandle);this.el.contains(e)&&s||""!==this.liveRegionText&&this.updateLiveRegionText()},this.onKeyDown=t=>{if(!this.enableDragDrop)return;const e=t.target?.closest("swirl-table-row");t.target?.closest(this.dragDropHandle)&&("Space"===t.code?(t.preventDefault(),t.stopPropagation(),this.toggleKeyboardMove(e)):"ArrowUp"===t.code?(t.preventDefault(),t.stopPropagation(),this.moveRow(e,"up")):"ArrowDown"===t.code?(t.preventDefault(),t.stopPropagation(),this.moveRow(e,"down")):"Escape"===t.code&&(t.preventDefault(),t.stopPropagation(),this.cancelKeyboardMove()))}}async componentDidLoad(){this.setupIntersectionObserver(),this.setupMutationObservers(),queueMicrotask((()=>{this.setupDragDrop()}))}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.columnMutationObserver?.disconnect(),this.rowMutationObserver?.disconnect(),this.sortable?.destroy()}handleEnableDragDropChange(){queueMicrotask((()=>{this.setupDragDrop()}))}setupIntersectionObserver(){this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{threshold:0}),this.intersectionObserver.observe(this.container)}setupMutationObservers(){this.columnMutationObserver=new MutationObserver((t=>{t.some((t=>t.addedNodes.length||t.removedNodes.length))&&this.updateLayout()})),this.columnMutationObserver.observe(this.headerEl,{childList:!0,subtree:!0}),this.rowMutationObserver=new MutationObserver((t=>{t.some((t=>t.addedNodes.length||t.removedNodes.length))&&(this.updateEmptyState(),this.setupDragDrop())})),this.startRowMutationObserver()}startRowMutationObserver(){this.rowMutationObserver?.observe(this.bodyEl,{childList:!0,subtree:!0})}stopRowMutationObserver(){this.rowMutationObserver?.disconnect()}setupDragDrop(){if(this.sortable&&(this.sortable.destroy(),this.sortable=void 0),this.enableDragDrop){if(this.el.querySelector("swirl-table-row-group"))return void console.warn('[Swirl] Drag & drop is not yet supported for swirl-tables using the "swirl-table-row-group" component.');if(!this.dragDropHandle)return void console.warn('[Swirl] swirl-table required the "dragDropHandle" prop to be set when drag & drop is enabled.');const t=this.el.querySelector('[slot="rows"]');this.dragDropContainer="SWIRL-TABLE-ROW"!==t?.tagName?t??this.bodyEl:this.bodyEl,this.sortable=new l(this.dragDropContainer,{animation:100,direction:"vertical",handle:this.dragDropHandle,fallbackOnBody:!0,group:`swirl-table-${Math.random().toString().substring(2)}`,onStart:()=>{this.stopRowMutationObserver()},onEnd:t=>{t.stopPropagation();const{to:e,newIndex:s,oldIndex:i,item:o}=t;this.dropRow.emit({newIndex:s,oldIndex:i,item:o,itemId:o.id??o.querySelector(":scope > swirl-table-row").id,newNextSiblingItemId:s<e.children.length-1?e.children[s+1].id:void 0,newPrevSiblingItemId:s>0?e.children[s-1].id:void 0}),this.startRowMutationObserver()}})}}async onVisibilityChange(t){t.some((t=>t.isIntersecting))&&setTimeout((async()=>{await this.updateLayout()}),100)}async componentDidRender(){await this.updateLayout(),this.updateEmptyState()}async onWindowResize(){await this.updateLayout()}async rerender(){this.triggerRerender()}resetEmptyRowStyles(){const t=this.el.querySelector(".table__empty-row");Boolean(t)&&(t.style.width="")}resetRowGroupStyles(){Array.from(this.el.querySelectorAll("swirl-table-row-group")).forEach((t=>{const e=t.shadowRoot.querySelector(".table-row-group__header-row");Boolean(e)&&(t.shadowRoot.querySelector(".table-row-group__header-row").style.width="")}))}resetColumnStyles(){this.getColumns().forEach((t=>{t.classList.remove("table-column--has-shadow","table-column--is-sticky","table-column--is-sticky-right"),t.style.right="",t.style.left="",t.style.position="",t.style.zIndex=""}))}resetCellStyles(){this.getCells().forEach((t=>{t.classList.remove("table-cell--has-shadow","table-cell--is-sticky","table-cell--is-sticky-right"),t.style.flex="",t.style.left="",t.style.right="",t.style.position="",t.style.zIndex=""}))}updateScrolledState(){const t=h();if(void 0===this.container)return;const e=this.container.scrollWidth>this.container.clientWidth,s=this.container.scrollLeft>0,i=Math.ceil(this.container.clientWidth+this.container.scrollLeft)>=Math.floor(this.container.scrollWidth);e!==this.scrollable&&(e&&!t?this.container.classList.add("table__container--scrollable"):this.container.classList.remove("table__container--scrollable")),s!==this.scrolled&&(s&&!t?this.container.classList.add("table__container--scrolled"):this.container.classList.remove("table__container--scrolled")),i!==this.scrolledToEnd&&(i&&!t?this.container.classList.add("table__container--scrolled-to-end"):this.container.classList.remove("table__container--scrolled-to-end"))}getColumns(){return Array.from(this.el.querySelectorAll("swirl-table-column"))}getCells(){return Array.from(this.el.querySelectorAll("swirl-table-cell"))}layoutEmptyRow(){const t=this.el.querySelector(".table__empty-row");if(!Boolean(t))return;const e=`${this.el.querySelector(".table__container").scrollWidth}px`;t.style.width=e}layoutRowGroups(){const t=Array.from(this.el.querySelectorAll("swirl-table-row-group")),e=`${this.el.querySelector(".table__container")?.scrollWidth}px`;t.forEach((t=>{const s=t.shadowRoot.querySelector(".table-row-group__header-row");Boolean(s)&&(t.shadowRoot.querySelector(".table-row-group__header-row").style.width=e)}))}layOutCellsAndColumns(){const t=this.getColumns(),e=this.getCells();t.forEach(((s,i)=>{const o=this.getCellsForColumn(e,t,i),a=this.calculateColumnProperties(s,t,i);o.forEach((t=>this.applyCellStyles(t,s,a))),this.applyColumnStyles(s,a)}))}getCellsForColumn(t,e,s){return t.filter(((t,i)=>(s-i)%e.length==0))}calculateColumnProperties(t,e,s){return{leftOffsetForStickyColumn:t.sticky?this.getLeftOffsetForStickyColumn(e,s):0,columnWidth:`${t.getBoundingClientRect().width}px`,isLastColumnSticky:t.sticky&&e.length===s+1,hasShadowRight:t.sticky&&!this.hasStickyColumnsToRight(e,s)}}applyCellStyles(t,e,s){const{leftOffsetForStickyColumn:i,columnWidth:o,isLastColumnSticky:a,hasShadowRight:r}=s;t.style.flex=Boolean(o)?`0 0 ${o}`:"",h()||(e.sticky&&!a&&(t.classList.add("table-cell--is-sticky"),t.style.left=i+"px",r&&t.classList.add("table-cell--has-shadow-right")),a&&t.classList.add("table-cell--is-sticky-right","table-cell--has-shadow-left"))}applyColumnStyles(t,e){if(h())return;const{leftOffsetForStickyColumn:s,isLastColumnSticky:i,hasShadowRight:o}=e;t.sticky&&!i&&(t.classList.add("table-column--is-sticky"),t.style.left=s+"px",o&&t.classList.add("table-column--has-shadow-right")),i&&t.classList.add("table-column--is-sticky-right","table-column--has-shadow-left")}getLeftOffsetForStickyColumn(t,e){return t.slice(0,e).reduce(((t,e)=>{if(e.sticky)return t+e.getBoundingClientRect().width}),0)}hasStickyColumnsToRight(t,e){return t.slice(e+1,t.length-1).some((t=>t.sticky))}updateEmptyState(){const t=this.el.querySelector('[slot="rows"]');this.empty=!Boolean(t)||0===t.children.length}updateLiveRegionText(t,e={}){let s=t?this.dragDropInstructions[t]:"";for(const[t,i]of Object.entries(e??{}))s=s.replaceAll(`{${t}}`,String(i));s!==this.liveRegionText&&(this.liveRegionText=s)}toggleKeyboardMove(t){this.movingViaKeyboard?this.endKeyboardMove(t):this.startKeyboardMove(t)}startKeyboardMove(t){this.movingViaKeyboard=!0,this.positionBeforeKeyboardMove=Array.from(this.dragDropContainer.children).indexOf(t),t.classList.add("table-row--moving"),this.updateLiveRegionText("start",{position:Array.from(this.dragDropContainer.children).indexOf(t)+1,rowCount:this.dragDropContainer.children.length})}endKeyboardMove(t){this.movingViaKeyboard=!1,t.classList.remove("table-row--moving"),this.updateLiveRegionText("end",{position:Array.from(this.dragDropContainer.children).indexOf(t)+1,rowCount:this.dragDropContainer.children.length}),this.dropRow.emit({item:t,newIndex:Array.from(this.dragDropContainer.children).indexOf(t),oldIndex:this.positionBeforeKeyboardMove,itemId:t.id,newNextSiblingItemId:Array.from(this.dragDropContainer.children).indexOf(t)<this.dragDropContainer.children.length-1?this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(t)+1].id:void 0,newPrevSiblingItemId:Array.from(this.dragDropContainer.children).indexOf(t)>0?this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(t)-1].id:void 0}),this.positionBeforeKeyboardMove=void 0}cancelKeyboardMove(){if(!this.movingViaKeyboard)return;const t=this.el.querySelector(".table-row--moving");t&&(t.classList.remove("table-row--moving"),this.movingViaKeyboard=!1,void 0!==this.positionBeforeKeyboardMove&&this.dragDropContainer.insertBefore(t,this.dragDropContainer.children[this.positionBeforeKeyboardMove]))}moveRow(t,e){if(!this.movingViaKeyboard)return;let s;if("up"===e){const e=Array.from(this.dragDropContainer.children).indexOf(t);s=Math.max(0,e-1),this.dragDropContainer.insertBefore(t,this.dragDropContainer.children[s])}else{const e=Array.from(this.dragDropContainer.children).indexOf(t);s=Math.min(this.dragDropContainer.children.length-1,e+1),this.dragDropContainer.insertBefore(t,this.dragDropContainer.children[s+1])}this.updateLiveRegionText("moved",{position:s+1,rowCount:this.dragDropContainer.children.length}),this.focusDragHandleOfRow(t)}focusDragHandleOfRow(t){const e=c(t,this.dragDropHandle)?.[0];"BUTTON"===e.tagName?e.focus():e.querySelector("button")?.focus()}render(){const t=Boolean(this.el.querySelector('[slot="empty"]')),e=r("table",{"table--show-empty-state":this.empty&&!this.loading,"table--keyboard-move":this.movingViaKeyboard});return s(i,{key:"58cb39e970718c947af8fb05e49327f69ce52406"},s("div",{key:"ccc4d4c35f16a0250bca6473848ec928a20d69f1",class:e},this.enableDragDrop&&s("swirl-visually-hidden",{key:"984ee69c68a1f7ede7c68d11e08ab87677c75d8c"},s("span",{key:"7a27389724c8c0d877c79af23589b637e44d5669","aria-live":"assertive"},this.liveRegionText)),s("div",{key:"d17f542eac55c6da592fc2ab12d838e30ef318e6",class:"table__container",onFocusin:this.onFocus,onFocusout:this.onBlur,onKeyDown:this.onKeyDown,onScroll:this.onScroll,ref:t=>this.container=t,tabIndex:-1},s("div",{key:"dd983c262ce853828b3040c9f97c510c769662e3","aria-describedby":Boolean(this.caption)?"caption":void 0,"aria-label":this.label,role:"table",class:"table__table"},this.caption&&s("swirl-visually-hidden",{key:"031594755193d7ca2e0f8624afd79ec38ac0dec7"},s("div",{key:"7b76523681ef767eb7a5805cc45da2259d6b9ce5",id:"caption"},this.caption)),s("div",{key:"ac6f9ffa3703cbadb12b7384e8f897c5af9d0bc1",role:"rowgroup"},s("div",{key:"5263be7e317340491ee5890a1a2e5d25fcba06d5",class:"table__header",ref:t=>this.headerEl=t,role:"row"},s("slot",{key:"3171ffdd4027b3f32d2d2b110f55209c8bdc5e7e",name:"columns"}))),s("div",{key:"32c054e3e9f63439efb8f9cf9633f5b628a789e0",class:"table__body",ref:t=>this.bodyEl=t},s("slot",{key:"2f5b748c60f91dbe4df98d0f18b367f8292100d0",name:"rows"}),s("div",{key:"b51e7e34b4d4e1c4044f9480a0a115393064d221",class:"table__empty-row",role:"row"},s("div",{key:"1cb8061bef8a30965ea023b31dd0fcfac0276f26","aria-colspan":this.getColumns().length,class:"table__empty-row-cell",role:"cell"},s("slot",{key:"e512da95e312bb19dca9b36e0092a0001810eda7",name:"empty"}),!t&&s("swirl-text",{key:"ab17ca80ff8a609d5eaa4addee7d3358791bc11d",align:"center",size:"sm"},this.emptyStateLabel))))))))}get el(){return o(this)}static get watchers(){return{enableDragDrop:["handleEnableDragDropChange"]}}};p.style=".sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid\n var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--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.sc-swirl-table: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.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:none}.table__empty-row-cell.sc-swirl-table{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.sc-swirl-table>*.sc-swirl-table{flex-grow:1}";export{p as swirl_table}
1
+ import{r as t,c as e,h as s,H as i,d as a}from"./p-Dj_4Fda9.js";import{g as o,c as r}from"./p-orsBiyT_.js";import{S as l}from"./p-CMrz6687.js";import{d as n,i as h,q as c}from"./p-wi_3Z3FQ.js";var d,b,w=o((b||(b=1,d=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=void 0,a=void 0,o=void 0,r=[];return function(){var n=function(t){return"function"==typeof t?t():t}(e),h=(new Date).getTime(),c=!i||h-i>n;i=h;for(var d=arguments.length,b=Array(d),w=0;w<d;w++)b[w]=arguments[w];if(c&&s.leading)return s.accumulate?Promise.resolve(t.call(this,[b])).then((function(t){return t[0]})):Promise.resolve(t.call.apply(t,[this].concat(b)));if(a?clearTimeout(o):a=function(){var t={};return t.promise=new Promise((function(e,s){t.resolve=e,t.reject=s})),t}(),r.push(b),o=setTimeout(l.bind(this),n),s.accumulate){var u=r.length-1;return a.promise.then((function(t){return t[u]}))}return a.promise};function l(){var e=a;clearTimeout(o),Promise.resolve(s.accumulate?t.call(this,r):t.apply(this,r[r.length-1])).then(e.resolve,e.reject),r=[],a=null}}),d));const u={end:"Dropped. Final position in table: {position} of {rowCount}.",initial:"Press space to move the row.",moved:"Current position in table: {position} of {rowCount}.",start:"Row grabbed. Current position in table: {position} of {rowCount}. Press up and down arrow keys to change position, Space to drop."},p=class{constructor(s){t(this,s),this.dropRow=e(this,"dropRow",7),this.dragDropInstructions=u,this.emptyStateLabel="No results found.",this.liveRegionText="",this.triggerRerender=n((async()=>{await this.updateLayout(),this.updateEmptyState()}),0,!0),this.updateLayout=w((async()=>{this.resetCellStyles(),this.resetColumnStyles(),this.resetEmptyRowStyles(),this.resetRowGroupStyles(),this.layoutEmptyRow(),this.layoutRowGroups(),this.layOutCellsAndColumns(),this.updateScrolledState()}),16,{leading:!0}),this.onScroll=()=>{this.updateScrolledState()},this.onFocus=t=>{if(this.movingViaKeyboard){const t=this.el.querySelector(".table-row--moving");t&&this.focusDragHandleOfRow(t)}const e=!!t.target?.closest(this.dragDropHandle);""===this.liveRegionText&&e&&this.updateLiveRegionText("initial")},this.onBlur=t=>{const e=t.relatedTarget,s=!!e?.closest(this.dragDropHandle);this.el.contains(e)&&s||""!==this.liveRegionText&&this.updateLiveRegionText()},this.onKeyDown=t=>{if(!this.enableDragDrop)return;const e=t.target?.closest("swirl-table-row");t.target?.closest(this.dragDropHandle)&&("Space"===t.code?(t.preventDefault(),t.stopPropagation(),this.toggleKeyboardMove(e)):"ArrowUp"===t.code?(t.preventDefault(),t.stopPropagation(),this.moveRow(e,"up")):"ArrowDown"===t.code?(t.preventDefault(),t.stopPropagation(),this.moveRow(e,"down")):"Escape"===t.code&&(t.preventDefault(),t.stopPropagation(),this.cancelKeyboardMove()))}}async componentDidLoad(){this.setupIntersectionObserver(),this.setupMutationObservers(),queueMicrotask((()=>{this.setupDragDrop()}))}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.columnMutationObserver?.disconnect(),this.rowMutationObserver?.disconnect(),this.sortable?.destroy()}handleEnableDragDropChange(){queueMicrotask((()=>{this.setupDragDrop()}))}setupIntersectionObserver(){this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{threshold:0}),this.intersectionObserver.observe(this.container)}setupMutationObservers(){this.columnMutationObserver=new MutationObserver((t=>{t.some((t=>t.addedNodes.length||t.removedNodes.length))&&this.updateLayout()})),this.columnMutationObserver.observe(this.headerEl,{childList:!0,subtree:!0}),this.rowMutationObserver=new MutationObserver((t=>{t.some((t=>t.addedNodes.length||t.removedNodes.length))&&(this.updateEmptyState(),this.setupDragDrop())})),this.startRowMutationObserver()}startRowMutationObserver(){this.rowMutationObserver?.observe(this.bodyEl,{childList:!0,subtree:!0})}stopRowMutationObserver(){this.rowMutationObserver?.disconnect()}setupDragDrop(){if(this.sortable&&(this.sortable.destroy(),this.sortable=void 0),this.enableDragDrop){if(this.el.querySelector("swirl-table-row-group"))return void console.warn('[Swirl] Drag & drop is not yet supported for swirl-tables using the "swirl-table-row-group" component.');if(!this.dragDropHandle)return void console.warn('[Swirl] swirl-table required the "dragDropHandle" prop to be set when drag & drop is enabled.');const t=this.el.querySelector('[slot="rows"]');this.dragDropContainer="SWIRL-TABLE-ROW"!==t?.tagName?t??this.bodyEl:this.bodyEl,this.sortable=new l(this.dragDropContainer,{animation:100,direction:"vertical",handle:this.dragDropHandle,fallbackOnBody:!0,group:`swirl-table-${Math.random().toString().substring(2)}`,onStart:()=>{this.stopRowMutationObserver()},onEnd:t=>{t.stopPropagation();const{to:e,newIndex:s,oldIndex:i,item:a}=t;this.dropRow.emit({newIndex:s,oldIndex:i,item:a,itemId:a.id??a.querySelector(":scope > swirl-table-row").id,newNextSiblingItemId:s<e.children.length-1?e.children[s+1].id:void 0,newPrevSiblingItemId:s>0?e.children[s-1].id:void 0}),this.startRowMutationObserver()}})}}async onVisibilityChange(t){t.some((t=>t.isIntersecting))&&setTimeout((async()=>{await this.updateLayout()}),100)}async componentDidRender(){await this.updateLayout(),this.updateEmptyState()}async onWindowResize(){await this.updateLayout()}async rerender(){this.triggerRerender()}resetEmptyRowStyles(){const t=this.el.querySelector(".table__empty-row");Boolean(t)&&(t.style.width="")}resetRowGroupStyles(){Array.from(this.el.querySelectorAll("swirl-table-row-group")).forEach((t=>{const e=t.shadowRoot.querySelector(".table-row-group__header-row");Boolean(e)&&(t.shadowRoot.querySelector(".table-row-group__header-row").style.width="")}))}resetColumnStyles(){this.getColumns().forEach((t=>{t.classList.remove("table-column--has-shadow","table-column--is-sticky","table-column--is-sticky-right"),t.style.right="",t.style.left="",t.style.position="",t.style.zIndex=""}))}resetCellStyles(){this.getCells().forEach((t=>{t.classList.remove("table-cell--has-shadow","table-cell--is-sticky","table-cell--is-sticky-right"),t.style.flex="",t.style.left="",t.style.right="",t.style.position="",t.style.zIndex=""}))}updateScrolledState(){const t=h();if(void 0===this.container)return;const e=this.container.scrollWidth>this.container.clientWidth,s=this.container.scrollLeft>0,i=Math.ceil(this.container.clientWidth+this.container.scrollLeft)>=Math.floor(this.container.scrollWidth);e!==this.scrollable&&(e&&!t?this.container.classList.add("table__container--scrollable"):this.container.classList.remove("table__container--scrollable")),s!==this.scrolled&&(s&&!t?this.container.classList.add("table__container--scrolled"):this.container.classList.remove("table__container--scrolled")),i!==this.scrolledToEnd&&(i&&!t?this.container.classList.add("table__container--scrolled-to-end"):this.container.classList.remove("table__container--scrolled-to-end"))}getColumns(){return Array.from(this.el.querySelectorAll("swirl-table-column"))}getCells(){return Array.from(this.el.querySelectorAll("swirl-table-cell"))}layoutEmptyRow(){const t=this.el.querySelector(".table__empty-row");if(!Boolean(t))return;const e=`${this.el.querySelector(".table__container").scrollWidth}px`;t.style.width=e}layoutRowGroups(){const t=Array.from(this.el.querySelectorAll("swirl-table-row-group")),e=`${this.el.querySelector(".table__container")?.scrollWidth}px`;t.forEach((t=>{const s=t.shadowRoot.querySelector(".table-row-group__header-row");Boolean(s)&&(t.shadowRoot.querySelector(".table-row-group__header-row").style.width=e)}))}layOutCellsAndColumns(){const t=this.getColumns(),e=this.getCells();t.forEach(((s,i)=>{const a=this.getCellsForColumn(e,t,i),o=this.calculateColumnProperties(s,t,i);a.forEach((t=>this.applyCellStyles(t,s,o))),this.applyColumnStyles(s,o)}))}getCellsForColumn(t,e,s){return t.filter(((t,i)=>(s-i)%e.length==0))}calculateColumnProperties(t,e,s){return{leftOffsetForStickyColumn:t.sticky?this.getLeftOffsetForStickyColumn(e,s):0,columnWidth:`${t.getBoundingClientRect().width}px`,isLastColumnSticky:t.sticky&&e.length===s+1,hasShadowRight:t.sticky&&!this.hasStickyColumnsToRight(e,s)}}applyCellStyles(t,e,s){const{leftOffsetForStickyColumn:i,columnWidth:a,isLastColumnSticky:o,hasShadowRight:r}=s;t.style.flex=Boolean(a)?`0 0 ${a}`:"",h()||(e.sticky&&!o&&(t.classList.add("table-cell--is-sticky"),t.style.left=i+"px",r&&t.classList.add("table-cell--has-shadow-right")),o&&t.classList.add("table-cell--is-sticky-right","table-cell--has-shadow-left"))}applyColumnStyles(t,e){if(h())return;const{leftOffsetForStickyColumn:s,isLastColumnSticky:i,hasShadowRight:a}=e;t.sticky&&!i&&(t.classList.add("table-column--is-sticky"),t.style.left=s+"px",a&&t.classList.add("table-column--has-shadow-right")),i&&t.classList.add("table-column--is-sticky-right","table-column--has-shadow-left")}getLeftOffsetForStickyColumn(t,e){return t.slice(0,e).reduce(((t,e)=>{if(e.sticky)return t+e.getBoundingClientRect().width}),0)}hasStickyColumnsToRight(t,e){return t.slice(e+1,t.length-1).some((t=>t.sticky))}updateEmptyState(){const t=this.el.querySelector('[slot="rows"]');this.empty=!Boolean(t)||0===t.children.length}updateLiveRegionText(t,e={}){let s=t?this.dragDropInstructions[t]:"";for(const[t,i]of Object.entries(e??{}))s=s.replaceAll(`{${t}}`,String(i));s!==this.liveRegionText&&(this.liveRegionText=s)}toggleKeyboardMove(t){this.movingViaKeyboard?this.endKeyboardMove(t):this.startKeyboardMove(t)}startKeyboardMove(t){this.movingViaKeyboard=!0,this.positionBeforeKeyboardMove=Array.from(this.dragDropContainer.children).indexOf(t),t.classList.add("table-row--moving"),this.updateLiveRegionText("start",{position:Array.from(this.dragDropContainer.children).indexOf(t)+1,rowCount:this.dragDropContainer.children.length})}endKeyboardMove(t){this.movingViaKeyboard=!1,t.classList.remove("table-row--moving"),this.updateLiveRegionText("end",{position:Array.from(this.dragDropContainer.children).indexOf(t)+1,rowCount:this.dragDropContainer.children.length}),this.dropRow.emit({item:t,newIndex:Array.from(this.dragDropContainer.children).indexOf(t),oldIndex:this.positionBeforeKeyboardMove,itemId:t.id,newNextSiblingItemId:Array.from(this.dragDropContainer.children).indexOf(t)<this.dragDropContainer.children.length-1?this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(t)+1].id:void 0,newPrevSiblingItemId:Array.from(this.dragDropContainer.children).indexOf(t)>0?this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(t)-1].id:void 0}),this.positionBeforeKeyboardMove=void 0}cancelKeyboardMove(){if(!this.movingViaKeyboard)return;const t=this.el.querySelector(".table-row--moving");t&&(t.classList.remove("table-row--moving"),this.movingViaKeyboard=!1,void 0!==this.positionBeforeKeyboardMove&&this.dragDropContainer.insertBefore(t,this.dragDropContainer.children[this.positionBeforeKeyboardMove]))}moveRow(t,e){if(!this.movingViaKeyboard)return;let s;if("up"===e){const e=Array.from(this.dragDropContainer.children).indexOf(t);s=Math.max(0,e-1),this.dragDropContainer.insertBefore(t,this.dragDropContainer.children[s])}else{const e=Array.from(this.dragDropContainer.children).indexOf(t);s=Math.min(this.dragDropContainer.children.length-1,e+1),this.dragDropContainer.insertBefore(t,this.dragDropContainer.children[s+1])}this.updateLiveRegionText("moved",{position:s+1,rowCount:this.dragDropContainer.children.length}),this.focusDragHandleOfRow(t)}focusDragHandleOfRow(t){const e=c(t,this.dragDropHandle)?.[0];"BUTTON"===e.tagName?e.focus():e.querySelector("button")?.focus()}render(){const t=Boolean(this.el.querySelector('[slot="empty"]')),e=r("table",{"table--show-empty-state":this.empty&&!this.loading,"table--keyboard-move":this.movingViaKeyboard});return s(i,{key:"58cb39e970718c947af8fb05e49327f69ce52406"},s("div",{key:"ccc4d4c35f16a0250bca6473848ec928a20d69f1",class:e},this.enableDragDrop&&s("swirl-visually-hidden",{key:"984ee69c68a1f7ede7c68d11e08ab87677c75d8c"},s("span",{key:"7a27389724c8c0d877c79af23589b637e44d5669","aria-live":"assertive"},this.liveRegionText)),s("div",{key:"d17f542eac55c6da592fc2ab12d838e30ef318e6",class:"table__container",onFocusin:this.onFocus,onFocusout:this.onBlur,onKeyDown:this.onKeyDown,onScroll:this.onScroll,ref:t=>this.container=t,tabIndex:-1},s("div",{key:"dd983c262ce853828b3040c9f97c510c769662e3","aria-describedby":Boolean(this.caption)?"caption":void 0,"aria-label":this.label,role:"table",class:"table__table"},this.caption&&s("swirl-visually-hidden",{key:"031594755193d7ca2e0f8624afd79ec38ac0dec7"},s("div",{key:"7b76523681ef767eb7a5805cc45da2259d6b9ce5",id:"caption"},this.caption)),s("div",{key:"ac6f9ffa3703cbadb12b7384e8f897c5af9d0bc1",role:"rowgroup"},s("div",{key:"5263be7e317340491ee5890a1a2e5d25fcba06d5",class:"table__header",ref:t=>this.headerEl=t,role:"row"},s("slot",{key:"3171ffdd4027b3f32d2d2b110f55209c8bdc5e7e",name:"columns"}))),s("div",{key:"32c054e3e9f63439efb8f9cf9633f5b628a789e0",class:"table__body",ref:t=>this.bodyEl=t},s("slot",{key:"2f5b748c60f91dbe4df98d0f18b367f8292100d0",name:"rows"}),s("div",{key:"b51e7e34b4d4e1c4044f9480a0a115393064d221",class:"table__empty-row",role:"row"},s("div",{key:"1cb8061bef8a30965ea023b31dd0fcfac0276f26","aria-colspan":this.getColumns().length,class:"table__empty-row-cell",role:"cell"},s("slot",{key:"e512da95e312bb19dca9b36e0092a0001810eda7",name:"empty"}),!t&&s("swirl-text",{key:"ab17ca80ff8a609d5eaa4addee7d3358791bc11d",align:"center",size:"sm"},this.emptyStateLabel))))))))}get el(){return a(this)}static get watchers(){return{enableDragDrop:["handleEnableDragDropChange"]}}};p.style=".sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(23, 23, 23, 0.2);position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}html.theme-dark.sc-swirl-table-h,html.theme-dark .sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(0, 0, 0, 0.2)}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid\n var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px var(--swirl-table-shadow-rgba),\n 2px 0 4px -2px var(--swirl-table-shadow-rgba)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px\n var(--swirl-table-shadow-rgba),\n 0px 1px 4px 0px var(--swirl-table-shadow-rgba)}.table__table.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:none}.table__empty-row-cell.sc-swirl-table{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.sc-swirl-table>*.sc-swirl-table{flex-grow:1}";export{p as swirl_table}