@getflip/swirl-components 0.432.0 → 0.433.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/components.json +1 -1
  2. package/dist/cjs/floating-ui.dom-C8bqk2dV.js +1624 -0
  3. package/dist/cjs/swirl-autocomplete.cjs.entry.js +4 -4
  4. package/dist/cjs/swirl-menu.cjs.entry.js +4 -4
  5. package/dist/cjs/swirl-popover_2.cjs.entry.js +6 -6
  6. package/dist/cjs/swirl-skeleton-box.cjs.entry.js +1 -1
  7. package/dist/cjs/swirl-tooltip.cjs.entry.js +10 -10
  8. package/dist/collection/components/swirl-skeleton-box/swirl-skeleton-box.css +1 -2
  9. package/dist/collection/components/swirl-tooltip/swirl-tooltip.js +3 -3
  10. package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
  11. package/dist/components/floating-ui.dom.js +1617 -0
  12. package/dist/components/swirl-autocomplete.js +4 -4
  13. package/dist/components/swirl-menu.js +4 -4
  14. package/dist/components/swirl-popover2.js +6 -6
  15. package/dist/components/swirl-skeleton-box2.js +1 -1
  16. package/dist/components/swirl-tooltip2.js +10 -10
  17. package/dist/esm/floating-ui.dom-CLsTbQHn.js +1617 -0
  18. package/dist/esm/swirl-autocomplete.entry.js +4 -4
  19. package/dist/esm/swirl-menu.entry.js +4 -4
  20. package/dist/esm/swirl-popover_2.entry.js +6 -6
  21. package/dist/esm/swirl-skeleton-box.entry.js +1 -1
  22. package/dist/esm/swirl-tooltip.entry.js +10 -10
  23. package/dist/swirl-components/p-13d33aa2.entry.js +1 -0
  24. package/dist/swirl-components/{p-f53180cb.entry.js → p-322f18d4.entry.js} +1 -1
  25. package/dist/swirl-components/p-52737e44.entry.js +1 -0
  26. package/dist/swirl-components/{p-35461505.entry.js → p-8d0be9c3.entry.js} +1 -1
  27. package/dist/swirl-components/p-CLsTbQHn.js +1 -0
  28. package/dist/swirl-components/{p-85371da0.entry.js → p-c8c1b0b2.entry.js} +1 -1
  29. package/dist/swirl-components/swirl-components.esm.js +1 -1
  30. package/package.json +2 -2
  31. package/dist/cjs/floating-ui.dom.browser.min-PA1q-Uql.js +0 -12
  32. package/dist/components/floating-ui.dom.browser.min.js +0 -5
  33. package/dist/esm/floating-ui.dom.browser.min-BtsCuEVE.js +0 -5
  34. package/dist/swirl-components/p-5c638e8c.entry.js +0 -1
  35. package/dist/swirl-components/p-BtsCuEVE.js +0 -1
  36. package/dist/swirl-components/p-de985b44.entry.js +0 -1
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-Dj_4Fda9.js';
2
- import { N, P, D } from './floating-ui.dom.browser.min-BtsCuEVE.js';
2
+ import { a as autoUpdate, c as computePosition, o as offset } from './floating-ui.dom-CLsTbQHn.js';
3
3
  import { c as classnames } from './index-orsBiyT_.js';
4
4
  import { d as debounce } from './utils-Dn2SWlGn.js';
5
5
 
@@ -149,7 +149,7 @@ const SwirlAutocomplete = class {
149
149
  if (this.disableAutoUpdate) {
150
150
  this.disableAutoUpdate();
151
151
  }
152
- this.disableAutoUpdate = N(this.inputEl, this.listboxContainerEl, this.reposition.bind(this), { animationFrame: true });
152
+ this.disableAutoUpdate = autoUpdate(this.inputEl, this.listboxContainerEl, this.reposition.bind(this), { animationFrame: true });
153
153
  this.listboxContainerEl.scrollTop = 0;
154
154
  this.updateSuggestions(this.inputEl.querySelector("input").value);
155
155
  });
@@ -158,8 +158,8 @@ const SwirlAutocomplete = class {
158
158
  if (!Boolean(this.listboxContainerEl)) {
159
159
  return;
160
160
  }
161
- this.position = await P(this.inputEl, this.listboxContainerEl, {
162
- middleware: [D({ crossAxis: -16, mainAxis: 16 })],
161
+ this.position = await computePosition(this.inputEl, this.listboxContainerEl, {
162
+ middleware: [offset({ crossAxis: -16, mainAxis: 16 })],
163
163
  placement: "bottom-start",
164
164
  strategy: "fixed",
165
165
  });
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-Dj_4Fda9.js';
2
- import { P, N, D, k, b } from './floating-ui.dom.browser.min-BtsCuEVE.js';
2
+ import { c as computePosition, a as autoUpdate, o as offset, s as shift, f as flip } from './floating-ui.dom-CLsTbQHn.js';
3
3
  import { c as classnames } from './index-orsBiyT_.js';
4
4
  import { q as querySelectorAllDeep, l as closestPassShadow, p as parentsPassShadow, i as isMobileViewport, k as getActiveElement } from './utils-Dn2SWlGn.js';
5
5
 
@@ -56,10 +56,10 @@ const SwirlMenu = class {
56
56
  return;
57
57
  }
58
58
  requestAnimationFrame(async () => {
59
- this.position = await P(trigger, this.menuContainer, {
59
+ this.position = await computePosition(trigger, this.menuContainer, {
60
60
  placement: "right-start",
61
61
  strategy: "fixed",
62
- middleware: [D({ mainAxis: -10, crossAxis: 0 }), k(), b()],
62
+ middleware: [offset({ mainAxis: -10, crossAxis: 0 }), shift(), flip()],
63
63
  });
64
64
  });
65
65
  };
@@ -127,7 +127,7 @@ const SwirlMenu = class {
127
127
  if (this.disableAutoUpdate) {
128
128
  this.disableAutoUpdate();
129
129
  }
130
- this.disableAutoUpdate = N(this.el.parentElement, this.menuContainer, this.reposition);
130
+ this.disableAutoUpdate = autoUpdate(this.el.parentElement, this.menuContainer, this.reposition);
131
131
  }
132
132
  watchValue() {
133
133
  this.updateActiveItem();
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-Dj_4Fda9.js';
2
- import { P, N, k, D, b } from './floating-ui.dom.browser.min-BtsCuEVE.js';
2
+ import { c as computePosition, a as autoUpdate, s as shift, o as offset, f as flip } from './floating-ui.dom-CLsTbQHn.js';
3
3
  import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm-B0kNlhKL.js';
4
4
  import { c as classnames } from './index-orsBiyT_.js';
5
5
  import { i as isMobileViewport, n as getPixelsFromRemToken, k as getActiveElement, q as querySelectorAllDeep } from './utils-Dn2SWlGn.js';
@@ -49,16 +49,16 @@ const SwirlPopover = class {
49
49
  ? { mainAxis: this.offset, crossAxis: 0 }
50
50
  : { mainAxis: this.offset[0], crossAxis: this.offset[1] };
51
51
  const shiftPaddingX = getPixelsFromRemToken("--s-space-16");
52
- const shiftWithPadding = k({
52
+ const shiftWithPadding = shift({
53
53
  padding: {
54
54
  left: shiftPaddingX,
55
55
  right: shiftPaddingX,
56
56
  },
57
57
  });
58
58
  const middleware = this.enableFlip
59
- ? [D(offsetOptions), shiftWithPadding, b()]
60
- : [D(offsetOptions), shiftWithPadding];
61
- this.position = await P(this.triggerEl, this.contentContainer, {
59
+ ? [offset(offsetOptions), shiftWithPadding, flip()]
60
+ : [offset(offsetOptions), shiftWithPadding];
61
+ this.position = await computePosition(this.triggerEl, this.contentContainer, {
62
62
  middleware,
63
63
  placement: this.placement,
64
64
  strategy: "fixed",
@@ -184,7 +184,7 @@ const SwirlPopover = class {
184
184
  if (this.disableAutoUpdate) {
185
185
  this.disableAutoUpdate();
186
186
  }
187
- this.disableAutoUpdate = N(this.triggerEl, this.contentContainer, () => this.reposition());
187
+ this.disableAutoUpdate = autoUpdate(this.triggerEl, this.contentContainer, () => this.reposition());
188
188
  this.scrollContainer.scrollTop = 0;
189
189
  this.lockBodyScroll();
190
190
  });
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, h, H as Host } from './index-Dj_4Fda9.js';
2
2
  import { c as classnames } from './index-orsBiyT_.js';
3
3
 
4
- const swirlSkeletonBoxCss = ":host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:before{position:relative;z-index:1;display:block;width:100%;height:100%;background-image:linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 0,\n rgba(255, 255, 255, 0) 12%,\n var(--s-surface-raised-default) 50%,\n rgba(255, 255, 255, 0) 88%,\n rgba(255, 255, 255, 0) 100%\n );content:\"\";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}.skeleton-box--border-radius-none{border-radius:0}";
4
+ const swirlSkeletonBoxCss = ":host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:after{position:relative;display:block;width:100%;height:100%;background-image:linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 0,\n rgba(255, 255, 255, 0) 12%,\n var(--s-surface-raised-default) 50%,\n rgba(255, 255, 255, 0) 88%,\n rgba(255, 255, 255, 0) 100%\n );content:\"\";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}.skeleton-box--border-radius-none{border-radius:0}";
5
5
 
6
6
  const SwirlSkeletonBox = class {
7
7
  constructor(hostRef) {
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance, h, H as Host, d as getElement } from './index-Dj_4Fda9.js';
2
- import { u, P, D, k, b, N } from './floating-ui.dom.browser.min-BtsCuEVE.js';
2
+ import { b as arrow, c as computePosition, o as offset, s as shift, f as flip, a as autoUpdate } from './floating-ui.dom-CLsTbQHn.js';
3
3
  import { c as classnames } from './index-orsBiyT_.js';
4
4
  import { n as getPixelsFromRemToken } from './utils-Dn2SWlGn.js';
5
5
 
@@ -37,10 +37,10 @@ const SwirlTooltip = class {
37
37
  return;
38
38
  }
39
39
  const middleware = [
40
- ...this.options.middleware.filter((middleware) => middleware.name !== "arrow"),
41
- u({ element: this.arrowElement, padding: 12 }),
40
+ ...this.options.middleware.filter((middleware) => middleware && middleware.name !== "arrow"),
41
+ arrow({ element: this.arrowElement, padding: 12 }),
42
42
  ];
43
- this.actualPosition = await P(referenceElement, this.popperEl, { ...this.options, middleware });
43
+ this.actualPosition = await computePosition(referenceElement, this.popperEl, { ...this.options, middleware });
44
44
  const arrowX = this.actualPosition.middlewareData.arrow?.x;
45
45
  const arrowY = this.actualPosition.middlewareData.arrow?.y;
46
46
  this.arrowStyles = {
@@ -66,8 +66,8 @@ const SwirlTooltip = class {
66
66
  const shiftPaddingX = getPixelsFromRemToken("--s-space-16");
67
67
  this.options = {
68
68
  middleware: [
69
- D(margin),
70
- k({
69
+ offset(margin),
70
+ shift({
71
71
  padding: {
72
72
  top: shiftPaddingY,
73
73
  bottom: shiftPaddingY,
@@ -75,7 +75,7 @@ const SwirlTooltip = class {
75
75
  right: shiftPaddingX,
76
76
  },
77
77
  }),
78
- b(),
78
+ flip(),
79
79
  ],
80
80
  placement: this.position,
81
81
  strategy: this.positioning,
@@ -124,7 +124,7 @@ const SwirlTooltip = class {
124
124
  return;
125
125
  }
126
126
  this.reposition();
127
- this.disableAutoUpdate = N(referenceElement, this.popperEl, this.reposition.bind(this));
127
+ this.disableAutoUpdate = autoUpdate(referenceElement, this.popperEl, this.reposition.bind(this));
128
128
  });
129
129
  }
130
130
  async hide() {
@@ -140,7 +140,7 @@ const SwirlTooltip = class {
140
140
  "tooltip--active": this.active,
141
141
  "tooltip--visible": this.visible,
142
142
  });
143
- return (h(Host, { key: '62242ca0238a1cb072fc0253b57732bb6fe8ba1d', onKeydown: this.onKeydown }, h("span", { key: '4613ceba81107da0ad513184b72628cef5e889c8', class: className }, h("span", { key: 'ed854da20f19bc50077926a2fd28297113dcc359', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, h("slot", { key: '1302b8ce283daf7e2f1357b2f595bf9cc3038d5c' })), h("span", { key: 'a1105e62cb7154e9818c7d9db5cd1625d2519833', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
143
+ return (h(Host, { key: 'e5a7884c4f3f45294efc913baa4767a937afd07d', onKeydown: this.onKeydown }, h("span", { key: '9952c41dc93f61aa103e87f4384e17c271c9a600', class: className }, h("span", { key: '7fcef15d2b640e8cb685fae4275321c0776c0f20', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, h("slot", { key: '7b975f73546287509b4b04b6c14e304c976e291b' })), h("span", { key: 'a385f4ab99e66b5164b1151fffed552a61718da9', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
144
144
  top: Boolean(this.actualPosition)
145
145
  ? `${this.actualPosition?.y}px`
146
146
  : "",
@@ -149,7 +149,7 @@ const SwirlTooltip = class {
149
149
  : "",
150
150
  position: this.positioning,
151
151
  maxWidth: this.maxWidth,
152
- } }, this.visible && (h("span", { key: 'b039c561fac0504934448f157417c8dca033b0e1', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'ef6ab50e99dd78d3152a1cb2068ac3a3b6081798', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '087f97b8b1a01cf85f841089ff5d2d2e7bff6746', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
152
+ } }, this.visible && (h("span", { key: '7792c9acbe8745684b460789492aafc71e9e75c7', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'd4c6edd15ff7a8bb22932fccc9a2d555ccde11c0', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '117ba01694bfb6a78db345392a7de85977d2ba03', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
153
153
  ...this.arrowStyles,
154
154
  visibility: this.visible ? "visible" : "hidden",
155
155
  } })))));
@@ -0,0 +1 @@
1
+ import{r as t,h as o,H as i,d as s}from"./p-Dj_4Fda9.js";import{b as e,c as a,o as r,s as l,f as n,a as h}from"./p-CLsTbQHn.js";import{c as p}from"./p-orsBiyT_.js";import{n as c}from"./p-Dn2SWlGn.js";const d=class{constructor(o){t(this,o),this.active=!0,this.delay=200,this.intent="default",this.maxWidth="17.5rem",this.position="top",this.positioning="absolute",this.trigger=["focus","hover"],this.visible=!1,this.onKeydown=t=>{"Escape"===t.code&&this.hide()},this.onFocusIn=()=>{this.trigger.includes("focus")&&this.show()},this.onFocusOut=()=>{this.trigger.includes("focus")&&this.hide()},this.reposition=async()=>{const t=this.el.children[0];if(!Boolean(t)||!Boolean(this.popperEl))return;const o=[...this.options.middleware.filter((t=>t&&"arrow"!==t.name)),e({element:this.arrowElement,padding:12})];this.actualPosition=await a(t,this.popperEl,{...this.options,middleware:o});const i=this.actualPosition.middlewareData.arrow?.x,s=this.actualPosition.middlewareData.arrow?.y;this.arrowStyles={left:Boolean(i)?i+"px":void 0,top:Boolean(s)?s+"px":void 0}},this.showWithDelay=()=>{this.active&&(Boolean(this.showTimeout)&&(clearTimeout(this.showTimeout),this.showTimeout=void 0),this.showTimeout=setTimeout((()=>{this.show()}),this.delay))},this.updateOptions=()=>{const t=c("--s-space-12"),o=c("--s-space-8"),i=c("--s-space-16");this.options={middleware:[r(t),l({padding:{top:o,bottom:o,left:i,right:i}}),n()],placement:this.position,strategy:this.positioning}}}watchPosition(){this.updateOptions()}onMouseEnter(){this.trigger.includes("hover")&&this.showWithDelay()}onMouseLeave(){this.trigger.includes("hover")&&this.hide()}onWindowResize(){this.active&&this.reposition()}onWindowScroll(){this.active&&this.visible&&this.reposition()}componentWillLoad(){this.reposition()}componentDidLoad(){this.updateOptions()}async show(){this.active&&(this.visible=!0,requestAnimationFrame((()=>{const t=this.el.children[0];Boolean(t)&&(this.reposition(),this.disableAutoUpdate=h(t,this.popperEl,this.reposition.bind(this)))})))}async hide(){Boolean(this.showTimeout)&&(clearTimeout(this.showTimeout),this.showTimeout=void 0),this.visible=!1,this.disableAutoUpdate?.()}render(){const t=p("tooltip",`tooltip--actual-placement-${this.actualPosition?.placement}`,`tooltip--intent-${this.intent}`,{"tooltip--active":this.active,"tooltip--visible":this.visible});return o(i,{key:"e5a7884c4f3f45294efc913baa4767a937afd07d",onKeydown:this.onKeydown},o("span",{key:"9952c41dc93f61aa103e87f4384e17c271c9a600",class:t},o("span",{key:"7fcef15d2b640e8cb685fae4275321c0776c0f20",class:"tooltip__reference","aria-describedby":"tooltip",onFocusout:this.onFocusOut,onClick:this.hide,onFocusin:this.onFocusIn},o("slot",{key:"7b975f73546287509b4b04b6c14e304c976e291b"})),o("span",{key:"a385f4ab99e66b5164b1151fffed552a61718da9",class:"tooltip__popper",ref:t=>this.popperEl=t,style:{top:Boolean(this.actualPosition)?`${this.actualPosition?.y}px`:"",left:Boolean(this.actualPosition)?`${this.actualPosition?.x}px`:"",position:this.positioning,maxWidth:this.maxWidth}},this.visible&&o("span",{key:"7792c9acbe8745684b460789492aafc71e9e75c7",class:"tooltip__bubble",id:"tooltip",part:"tooltip__bubble",role:"tooltip"},o("span",{key:"d4c6edd15ff7a8bb22932fccc9a2d555ccde11c0",class:"tooltip__content",innerHTML:this.content})),o("span",{key:"117ba01694bfb6a78db345392a7de85977d2ba03",class:"tooltip__arrow",ref:t=>this.arrowElement=t,style:{...this.arrowStyles,visibility:this.visible?"visible":"hidden"}}))))}get el(){return s(this)}static get watchers(){return{position:["watchPosition"]}}};d.style=":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--active .tooltip__popper{display:block}.tooltip--visible .tooltip__popper{animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:absolute;z-index:var(--s-z-40);display:none;opacity:0}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);text-align:start;box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}.tooltip--intent-info .tooltip__bubble,.tooltip--intent-info .tooltip__arrow{background-color:var(--s-surface-info-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";export{d as swirl_tooltip}
@@ -1 +1 @@
1
- import{r as t,c as e,h as i,H as s,d as n}from"./p-Dj_4Fda9.js";import{P as o,N as a,D as h,k as r,b as l}from"./p-BtsCuEVE.js";import{c}from"./p-orsBiyT_.js";import{q as m,l as u,p as d,i as b,k as p}from"./p-Dn2SWlGn.js";const f=class{constructor(i){t(this,i),this.done=e(this,"done",7),this.valueChange=e(this,"valueChange",7),this.active=!0,this.level=0,this.mobileBackButtonLabel="Back",this.mobileCloseMenuButtonLabel="Close menu",this.mobileDoneButtonLabel="Done",this.variant="action",this.activeLevel=0,this.mobileMediaQuery=window.matchMedia("(min-width: 768px)"),this.mediaQueryHandler=()=>{this.updateMobileState()},this.resetMenu=()=>{this.items.forEach((t=>{t.tabIndex=-1})),this.level>0||setTimeout((()=>{this.activeLevel=0,m(this.el,"swirl-menu").forEach((t=>{t.active=!1,t.parentElement.expanded=!1}))}),this.mobile?200:60)},this.closeMenu=()=>{this.disableAutoUpdate&&this.disableAutoUpdate(),this.swirlPopover.close(),this.resetMenu()},this.reposition=async()=>{if(this.mobile||0===this.level)return void(this.position=void 0);const t=this.el.parentElement;Boolean(t)&&Boolean(this.menuContainer)&&requestAnimationFrame((async()=>{this.position=await o(t,this.menuContainer,{placement:"right-start",strategy:"fixed",middleware:[h({mainAxis:-10,crossAxis:0}),r(),l()]})}))},this.onKeyDown=t=>{if("ArrowDown"===t.code)t.preventDefault(),t.stopPropagation(),this.focusNextItem();else if("ArrowUp"===t.code)t.preventDefault(),t.stopPropagation(),this.focusPreviousItem();else if("ArrowLeft"===t.code)t.preventDefault(),t.stopPropagation(),this.rootMenu.goBack();else if("ArrowRight"===t.code){t.preventDefault();const e=u(this.items[this.getActiveItemIndex()],"swirl-menu-item");if(!Boolean(e))return;this.rootMenu.activateMenuItem(e)}},this.onClose=()=>{this.closeMenu()},this.onDone=()=>{this.closeMenu(),this.done.emit()},this.onGoBack=()=>{this.rootMenu.goBack()}}componentWillLoad(){this.updateMobileState(),this.updateLevel(),this.observeSlotChanges()}componentDidLoad(){this.mobileMediaQuery.addEventListener("change",this.mediaQueryHandler),this.parentMenu=u(this.el.parentElement,"swirl-menu"),this.swirlPopover=u(this.el,"swirl-popover"),this.rootMenu=d(this.el,"swirl-menu").pop(),Boolean(this.parentMenu)&&queueMicrotask((()=>{this.active=!1})),this.swirlPopover.addEventListener("popoverClose",this.resetMenu),this.updateItems()}disconnectedCallback(){this.swirlPopover?.removeEventListener("popoverClose",this.resetMenu),this.mobileMediaQuery.removeEventListener?.("change",this.mediaQueryHandler),this.observer?.disconnect()}watchActive(){this.reposition(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=a(this.el.parentElement,this.menuContainer,this.reposition)}watchValue(){this.updateActiveItem()}async activateMenuItem(t){if(Boolean(this.parentMenu))return;const e=await t.getParentMenu(),i=m(this.el,"swirl-menu").filter((t=>t.level>=e.level&&t!==e));i.forEach((t=>{t.active=!1,t.parentElement.expanded=!1}));const s=await t.getSubMenu();Boolean(s)&&(t.expanded=!0,s.active=!0,this.activeLevel=s.level,setTimeout((()=>{s.focusFirstItem()}),this.mobile?200:60))}async close(){this.closeMenu()}async goBack(){if(Boolean(this.parentMenu)||0===this.activeLevel)return;const t=(m(this.el,"swirl-menu").find((t=>t.level===this.activeLevel&&t.active))||this.rootMenu).parentElement;t.expanded=!1,this.activeLevel=Math.max(this.activeLevel-1,0),m(this.el,"swirl-menu").filter((t=>t.level>this.activeLevel)).forEach((t=>{t.active=!1})),(m(this.el,"swirl-menu").find((t=>t.level===this.activeLevel&&t.active))||this.rootMenu).focusItemAtIndex(Array.from(t.parentElement.children).indexOf(t))}async focusFirstItem(){this.focusItem(this.items[0])}async focusItemAtIndex(t){this.focusItem(this.items[t])}async updateSelection(t){this.valueChange.emit(t.value)}async updateActiveItem(){m(this.el,"swirl-menu-item").filter((t=>u(t,"swirl-menu")===this.el)).forEach((t=>{t.updateValue()})),this.parentMenu&&"action"===this.parentMenu.variant&&this.parentMenu.updateActiveItem()}observeSlotChanges(){this.observer=new MutationObserver((()=>{requestAnimationFrame((()=>{this.updateItems()}))})),this.observer.observe(this.el,{childList:!0})}updateMobileState(){const t=b();t!==this.mobile&&(this.mobile=t)}updateItems(){this.items=[...m(this.el,'[role="menuitem"]'),...m(this.el,'[role="menuitemradio"]')].filter((t=>u(t,"swirl-menu")===this.el))}updateLevel(){const t=d(this.el.parentNode,"swirl-menu");this.level=t.length}focusItem(t){[...m(this.rootMenu,'[role="menuitem"]'),...m(this.rootMenu,'[role="menuitemradio"]')].forEach((t=>{t.tabIndex=-1})),Boolean(t)&&(t.tabIndex=0,t.focus())}focusNextItem(){const t=this.getActiveItemIndex();this.focusItem(this.items[(t+1)%this.items.length])}focusPreviousItem(){const t=this.getActiveItemIndex();this.focusItem(this.items[0===t?this.items.length-1:t-1])}getActiveItemIndex(){const t=p();return this.items.findIndex((e=>e===t||e===t?.querySelector('[role="menuitem"]')||e===t?.querySelector('[role="menuitemradio"]')))}render(){const t=!Boolean(this.parentMenu),e=t&&this.mobile?void 0:this.label,n=t&&this.mobile?"menu-title":void 0,o=t?"menubar":"menu",a=c("menu",`menu--level-${this.level}`,{"menu--active":this.active,"menu--mobile":this.mobile,"menu--root":t});return i(s,{key:"0ea5a1671a201ff7b5255d9d58994ac9a96a22ac"},i("div",{key:"7304a4456d57b0e49519348a3ec0a4b3a6076242",class:a},this.mobile&&t&&i("div",{key:"6505d75217e7389c75fb2cf62c875a0d9e8d935f",class:"menu__mobile-header"},0===this.activeLevel&&i("swirl-button",{key:"7586440d7264816bbe7453ad75f369d4292e986f",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.mobileCloseMenuButtonLabel,onClick:this.onClose,variant:"plain"}),this.activeLevel>0&&i("swirl-button",{key:"ac016060748e138638098e7e356cbac33995668f",hideLabel:!0,icon:"<swirl-icon-chevron-left></swirl-icon-chevron-left>",label:this.mobileBackButtonLabel,onClick:this.onGoBack,variant:"plain"}),i("span",{key:"926f4868c930d9e24e7d4f33920df53fef88cbd0",class:"menu__title",id:"menu-title"},i("swirl-heading",{key:"ead796375d7165dee7b3ecc006fc3e54ba352aad",align:"center",as:"span",level:4,text:this.label,truncate:!0})),i("swirl-button",{key:"4af38ac7c9a1788fb6ba8c480e812eb0d850728c",class:"menu__done-button",intent:"primary",label:this.mobileDoneButtonLabel,onClick:this.onDone})),i("div",{key:"d357b7078a37c5ea37ac24862bfb218c4bf895a5","aria-label":e,"aria-labelledby":n,"aria-orientation":"vertical",class:"menu__menu",onKeyDown:this.onKeyDown,ref:t=>this.menuContainer=t,role:o,style:!this.mobile&&this.level>0?{top:Boolean(this.position)?`${this.position?.y}px`:"",left:Boolean(this.position)?`${this.position?.x}px`:""}:this.mobile?{left:t?`calc(-100% * ${this.activeLevel})`:"100%"}:void 0},i("slot",{key:"8c701593ad02c6481813c2e0d3e1d1c4d22cf962"}))))}get el(){return n(this)}static get watchers(){return{active:["watchActive"],value:["watchValue"]}}};f.style=":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed)}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile):not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-1);padding:var(--s-space-4)}:not(.menu--mobile).menu--active .menu__menu{display:block}:not(.menu--mobile) .menu__menu{position:fixed;display:none}.menu__mobile-header{display:flex;height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-8)}.menu__mobile-header>*{display:inline-flex;flex-shrink:0}.menu__title{min-width:0;flex-grow:1;flex-shrink:1}.menu__title swirl-heading{min-width:0}.menu__done-button{margin-right:calc(-1 * var(--s-space-8))}.menu__menu{background-color:var(--s-surface-overlay-default);}";export{f as swirl_menu}
1
+ import{r as t,c as e,h as i,H as s,d as a}from"./p-Dj_4Fda9.js";import{c as n,a as o,o as h,s as r,f as l}from"./p-CLsTbQHn.js";import{c}from"./p-orsBiyT_.js";import{q as m,l as u,p as d,i as b,k as f}from"./p-Dn2SWlGn.js";const p=class{constructor(i){t(this,i),this.done=e(this,"done",7),this.valueChange=e(this,"valueChange",7),this.active=!0,this.level=0,this.mobileBackButtonLabel="Back",this.mobileCloseMenuButtonLabel="Close menu",this.mobileDoneButtonLabel="Done",this.variant="action",this.activeLevel=0,this.mobileMediaQuery=window.matchMedia("(min-width: 768px)"),this.mediaQueryHandler=()=>{this.updateMobileState()},this.resetMenu=()=>{this.items.forEach((t=>{t.tabIndex=-1})),this.level>0||setTimeout((()=>{this.activeLevel=0,m(this.el,"swirl-menu").forEach((t=>{t.active=!1,t.parentElement.expanded=!1}))}),this.mobile?200:60)},this.closeMenu=()=>{this.disableAutoUpdate&&this.disableAutoUpdate(),this.swirlPopover.close(),this.resetMenu()},this.reposition=async()=>{if(this.mobile||0===this.level)return void(this.position=void 0);const t=this.el.parentElement;Boolean(t)&&Boolean(this.menuContainer)&&requestAnimationFrame((async()=>{this.position=await n(t,this.menuContainer,{placement:"right-start",strategy:"fixed",middleware:[h({mainAxis:-10,crossAxis:0}),r(),l()]})}))},this.onKeyDown=t=>{if("ArrowDown"===t.code)t.preventDefault(),t.stopPropagation(),this.focusNextItem();else if("ArrowUp"===t.code)t.preventDefault(),t.stopPropagation(),this.focusPreviousItem();else if("ArrowLeft"===t.code)t.preventDefault(),t.stopPropagation(),this.rootMenu.goBack();else if("ArrowRight"===t.code){t.preventDefault();const e=u(this.items[this.getActiveItemIndex()],"swirl-menu-item");if(!Boolean(e))return;this.rootMenu.activateMenuItem(e)}},this.onClose=()=>{this.closeMenu()},this.onDone=()=>{this.closeMenu(),this.done.emit()},this.onGoBack=()=>{this.rootMenu.goBack()}}componentWillLoad(){this.updateMobileState(),this.updateLevel(),this.observeSlotChanges()}componentDidLoad(){this.mobileMediaQuery.addEventListener("change",this.mediaQueryHandler),this.parentMenu=u(this.el.parentElement,"swirl-menu"),this.swirlPopover=u(this.el,"swirl-popover"),this.rootMenu=d(this.el,"swirl-menu").pop(),Boolean(this.parentMenu)&&queueMicrotask((()=>{this.active=!1})),this.swirlPopover.addEventListener("popoverClose",this.resetMenu),this.updateItems()}disconnectedCallback(){this.swirlPopover?.removeEventListener("popoverClose",this.resetMenu),this.mobileMediaQuery.removeEventListener?.("change",this.mediaQueryHandler),this.observer?.disconnect()}watchActive(){this.reposition(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=o(this.el.parentElement,this.menuContainer,this.reposition)}watchValue(){this.updateActiveItem()}async activateMenuItem(t){if(Boolean(this.parentMenu))return;const e=await t.getParentMenu(),i=m(this.el,"swirl-menu").filter((t=>t.level>=e.level&&t!==e));i.forEach((t=>{t.active=!1,t.parentElement.expanded=!1}));const s=await t.getSubMenu();Boolean(s)&&(t.expanded=!0,s.active=!0,this.activeLevel=s.level,setTimeout((()=>{s.focusFirstItem()}),this.mobile?200:60))}async close(){this.closeMenu()}async goBack(){if(Boolean(this.parentMenu)||0===this.activeLevel)return;const t=(m(this.el,"swirl-menu").find((t=>t.level===this.activeLevel&&t.active))||this.rootMenu).parentElement;t.expanded=!1,this.activeLevel=Math.max(this.activeLevel-1,0),m(this.el,"swirl-menu").filter((t=>t.level>this.activeLevel)).forEach((t=>{t.active=!1})),(m(this.el,"swirl-menu").find((t=>t.level===this.activeLevel&&t.active))||this.rootMenu).focusItemAtIndex(Array.from(t.parentElement.children).indexOf(t))}async focusFirstItem(){this.focusItem(this.items[0])}async focusItemAtIndex(t){this.focusItem(this.items[t])}async updateSelection(t){this.valueChange.emit(t.value)}async updateActiveItem(){m(this.el,"swirl-menu-item").filter((t=>u(t,"swirl-menu")===this.el)).forEach((t=>{t.updateValue()})),this.parentMenu&&"action"===this.parentMenu.variant&&this.parentMenu.updateActiveItem()}observeSlotChanges(){this.observer=new MutationObserver((()=>{requestAnimationFrame((()=>{this.updateItems()}))})),this.observer.observe(this.el,{childList:!0})}updateMobileState(){const t=b();t!==this.mobile&&(this.mobile=t)}updateItems(){this.items=[...m(this.el,'[role="menuitem"]'),...m(this.el,'[role="menuitemradio"]')].filter((t=>u(t,"swirl-menu")===this.el))}updateLevel(){const t=d(this.el.parentNode,"swirl-menu");this.level=t.length}focusItem(t){[...m(this.rootMenu,'[role="menuitem"]'),...m(this.rootMenu,'[role="menuitemradio"]')].forEach((t=>{t.tabIndex=-1})),Boolean(t)&&(t.tabIndex=0,t.focus())}focusNextItem(){const t=this.getActiveItemIndex();this.focusItem(this.items[(t+1)%this.items.length])}focusPreviousItem(){const t=this.getActiveItemIndex();this.focusItem(this.items[0===t?this.items.length-1:t-1])}getActiveItemIndex(){const t=f();return this.items.findIndex((e=>e===t||e===t?.querySelector('[role="menuitem"]')||e===t?.querySelector('[role="menuitemradio"]')))}render(){const t=!Boolean(this.parentMenu),e=t&&this.mobile?void 0:this.label,a=t&&this.mobile?"menu-title":void 0,n=t?"menubar":"menu",o=c("menu",`menu--level-${this.level}`,{"menu--active":this.active,"menu--mobile":this.mobile,"menu--root":t});return i(s,{key:"0ea5a1671a201ff7b5255d9d58994ac9a96a22ac"},i("div",{key:"7304a4456d57b0e49519348a3ec0a4b3a6076242",class:o},this.mobile&&t&&i("div",{key:"6505d75217e7389c75fb2cf62c875a0d9e8d935f",class:"menu__mobile-header"},0===this.activeLevel&&i("swirl-button",{key:"7586440d7264816bbe7453ad75f369d4292e986f",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.mobileCloseMenuButtonLabel,onClick:this.onClose,variant:"plain"}),this.activeLevel>0&&i("swirl-button",{key:"ac016060748e138638098e7e356cbac33995668f",hideLabel:!0,icon:"<swirl-icon-chevron-left></swirl-icon-chevron-left>",label:this.mobileBackButtonLabel,onClick:this.onGoBack,variant:"plain"}),i("span",{key:"926f4868c930d9e24e7d4f33920df53fef88cbd0",class:"menu__title",id:"menu-title"},i("swirl-heading",{key:"ead796375d7165dee7b3ecc006fc3e54ba352aad",align:"center",as:"span",level:4,text:this.label,truncate:!0})),i("swirl-button",{key:"4af38ac7c9a1788fb6ba8c480e812eb0d850728c",class:"menu__done-button",intent:"primary",label:this.mobileDoneButtonLabel,onClick:this.onDone})),i("div",{key:"d357b7078a37c5ea37ac24862bfb218c4bf895a5","aria-label":e,"aria-labelledby":a,"aria-orientation":"vertical",class:"menu__menu",onKeyDown:this.onKeyDown,ref:t=>this.menuContainer=t,role:n,style:!this.mobile&&this.level>0?{top:Boolean(this.position)?`${this.position?.y}px`:"",left:Boolean(this.position)?`${this.position?.x}px`:""}:this.mobile?{left:t?`calc(-100% * ${this.activeLevel})`:"100%"}:void 0},i("slot",{key:"8c701593ad02c6481813c2e0d3e1d1c4d22cf962"}))))}get el(){return a(this)}static get watchers(){return{active:["watchActive"],value:["watchValue"]}}};p.style=":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed)}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile):not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-1);padding:var(--s-space-4)}:not(.menu--mobile).menu--active .menu__menu{display:block}:not(.menu--mobile) .menu__menu{position:fixed;display:none}.menu__mobile-header{display:flex;height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-8)}.menu__mobile-header>*{display:inline-flex;flex-shrink:0}.menu__title{min-width:0;flex-grow:1;flex-shrink:1}.menu__title swirl-heading{min-width:0}.menu__done-button{margin-right:calc(-1 * var(--s-space-8))}.menu__menu{background-color:var(--s-surface-overlay-default);}";export{p as swirl_menu}
@@ -0,0 +1 @@
1
+ import{r as e,h as s,H as o}from"./p-Dj_4Fda9.js";import{c as r}from"./p-orsBiyT_.js";const t=class{constructor(s){e(this,s),this.animated=!0,this.borderRadius="base"}render(){const e=r("skeleton-box",`skeleton-box--border-radius-${this.borderRadius}`,{"skeleton-box--static":!this.animated});return s(o,{key:"b7d0def70588e3c02bf9256c5ecc6fa67bd7da21",style:{width:Boolean(this.width)||Boolean(this.aspectRatio)?void 0:"100%"}},s("div",{key:"90743565eeb02ab7384466699284c3ad9cca7e83",class:e,style:{aspectRatio:this.aspectRatio,borderRadius:"pill"!==this.borderRadius&&"none"!==this.borderRadius?`var(--s-border-radius-${this.borderRadius})`:void 0,height:this.height,width:this.width}}))}};t.style=':host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:after{position:relative;display:block;width:100%;height:100%;background-image:linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 0,\n rgba(255, 255, 255, 0) 12%,\n var(--s-surface-raised-default) 50%,\n rgba(255, 255, 255, 0) 88%,\n rgba(255, 255, 255, 0) 100%\n );content:"";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}.skeleton-box--border-radius-none{border-radius:0}';export{t as swirl_skeleton_box}
@@ -1 +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,n as m,k as f,q as u}from"./p-Dn2SWlGn.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.popoverEl?.hidePopover(),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()=>{this.popoverEl?.showPopover(),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:"7654d1a2886c5c5481a782312dc60c7f8e036894"},t("div",{key:"448a25b583a109afe38ace3de5783203fa961232",popover:"manual",class:e,onKeyDown:this.onKeydown,ref:o=>this.popoverEl=o},t("div",{key:"89746549fa049d67b6ce755cc38ce930009671a5","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:"281d681b5baa5be2073b52ccbf639fda15bfa2fc",class:"popover__handle"}),t("div",{key:"ed831050a94dbb81d98574030cb30e468614b589",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:"0b60a437530bdff54fa0661328398163db6e28ad"}))),this.active&&t("div",{key:"99762170f88d3267dac61ded288657cc4e7886a8",class:"popover__backdrop",onClick:this.onCloseButtonClick})))}get el(){return s(this)}};g.style=":host{position:relative;z-index:var(--s-z-40);display:contents}: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{border:none;padding:0;margin:0}.popover::backdrop{display:none}.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:"c770678c1bc7592fe8d317b4e3e669a64e2aa49e",onClick:this.onClick,onMouseenter:this.onMouseenter,onMouseleave:this.onMouseleave},t("slot",{key:"d957ea9c0f6c3eecfff235a34b0428cf1a0547b1"}))}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}
1
+ import{r as o,c as e,h as t,H as i,d as s}from"./p-Dj_4Fda9.js";import{c as r,a as n,s as a,o as p,f as h}from"./p-CLsTbQHn.js";import{d as c,e as d}from"./p-B0kNlhKL.js";import{c as l}from"./p-orsBiyT_.js";import{i as v,n as m,k as f,q as u}from"./p-Dn2SWlGn.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.popoverEl?.hidePopover(),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()=>{this.popoverEl?.showPopover(),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:"7654d1a2886c5c5481a782312dc60c7f8e036894"},t("div",{key:"448a25b583a109afe38ace3de5783203fa961232",popover:"manual",class:e,onKeyDown:this.onKeydown,ref:o=>this.popoverEl=o},t("div",{key:"89746549fa049d67b6ce755cc38ce930009671a5","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:"281d681b5baa5be2073b52ccbf639fda15bfa2fc",class:"popover__handle"}),t("div",{key:"ed831050a94dbb81d98574030cb30e468614b589",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:"0b60a437530bdff54fa0661328398163db6e28ad"}))),this.active&&t("div",{key:"99762170f88d3267dac61ded288657cc4e7886a8",class:"popover__backdrop",onClick:this.onCloseButtonClick})))}get el(){return s(this)}};g.style=":host{position:relative;z-index:var(--s-z-40);display:contents}: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{border:none;padding:0;margin:0}.popover::backdrop{display:none}.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:"c770678c1bc7592fe8d317b4e3e669a64e2aa49e",onClick:this.onClick,onMouseenter:this.onMouseenter,onMouseleave:this.onMouseleave},t("slot",{key:"d957ea9c0f6c3eecfff235a34b0428cf1a0547b1"}))}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}
@@ -0,0 +1 @@
1
+ const t=Math.min,n=Math.max,e=Math.round,o=Math.floor,r=t=>({x:t,y:t}),i={left:"right",right:"left",bottom:"top",top:"bottom"},l={start:"end",end:"start"};function c(e,o,r){return n(e,t(o,r))}function a(t,n){return"function"==typeof t?t(n):t}function s(t){return t.split("-")[0]}function u(t){return t.split("-")[1]}function f(t){return"x"===t?"y":"x"}function d(t){return"y"===t?"height":"width"}const m=new Set(["top","bottom"]);function y(t){return m.has(s(t))?"y":"x"}function p(t){return f(y(t))}function h(t){return t.replace(/start|end/g,(t=>l[t]))}const w=["left","right"],g=["right","left"],x=["top","bottom"],v=["bottom","top"];function b(t){return t.replace(/left|right|bottom|top/g,(t=>i[t]))}function A(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}function S(t){const{x:n,y:e,width:o,height:r}=t;return{width:o,height:r,top:e,left:n,right:n+o,bottom:e+r,x:n,y:e}}function R(t,n,e){let{reference:o,floating:r}=t;const i=y(n),l=p(n),c=d(l),a=s(n),f="y"===i,m=o.x+o.width/2-r.width/2,h=o.y+o.height/2-r.height/2,w=o[c]/2-r[c]/2;let g;switch(a){case"top":g={x:m,y:o.y-r.height};break;case"bottom":g={x:m,y:o.y+o.height};break;case"right":g={x:o.x+o.width,y:h};break;case"left":g={x:o.x-r.width,y:h};break;default:g={x:o.x,y:o.y}}switch(u(n)){case"start":g[l]-=w*(e&&f?-1:1);break;case"end":g[l]+=w*(e&&f?-1:1)}return g}async function F(t,n){var e;void 0===n&&(n={});const{x:o,y:r,platform:i,rects:l,elements:c,strategy:s}=t,{boundary:u="clippingAncestors",rootBoundary:f="viewport",elementContext:d="floating",altBoundary:m=!1,padding:y=0}=a(n,t),p=A(y),h=c[m?"floating"===d?"reference":"floating":d],w=S(await i.getClippingRect({element:null==(e=await(null==i.isElement?void 0:i.isElement(h)))||e?h:h.contextElement||await(null==i.getDocumentElement?void 0:i.getDocumentElement(c.floating)),boundary:u,rootBoundary:f,strategy:s})),g="floating"===d?{x:o,y:r,width:l.floating.width,height:l.floating.height}:l.reference,x=await(null==i.getOffsetParent?void 0:i.getOffsetParent(c.floating)),v=await(null==i.isElement?void 0:i.isElement(x))&&await(null==i.getScale?void 0:i.getScale(x))||{x:1,y:1},b=S(i.convertOffsetParentRelativeRectToViewportRelativeRect?await i.convertOffsetParentRelativeRectToViewportRelativeRect({elements:c,rect:g,offsetParent:x,strategy:s}):g);return{top:(w.top-b.top+p.top)/v.y,bottom:(b.bottom-w.bottom+p.bottom)/v.y,left:(w.left-b.left+p.left)/v.x,right:(b.right-w.right+p.right)/v.x}}const k=new Set(["left","top"]);function O(){return"undefined"!=typeof window}function C(t){return M(t)?(t.nodeName||"").toLowerCase():"#document"}function T(t){var n;return(null==t||null==(n=t.ownerDocument)?void 0:n.defaultView)||window}function D(t){var n;return null==(n=(M(t)?t.ownerDocument:t.document)||window.document)?void 0:n.documentElement}function M(t){return!!O()&&(t instanceof Node||t instanceof T(t).Node)}function P(t){return!!O()&&(t instanceof Element||t instanceof T(t).Element)}function z(t){return!!O()&&(t instanceof HTMLElement||t instanceof T(t).HTMLElement)}function L(t){return!(!O()||"undefined"==typeof ShadowRoot)&&(t instanceof ShadowRoot||t instanceof T(t).ShadowRoot)}const B=new Set(["inline","contents"]);function E(t){const{overflow:n,overflowX:e,overflowY:o,display:r}=G(t);return/auto|scroll|overlay|hidden|clip/.test(n+o+e)&&!B.has(r)}const I=new Set(["table","td","th"]);function N(t){return I.has(C(t))}const j=[":popover-open",":modal"];function q(t){return j.some((n=>{try{return t.matches(n)}catch(t){return!1}}))}const H=["transform","translate","scale","rotate","perspective"],$=["transform","translate","scale","rotate","perspective","filter"],V=["paint","layout","strict","content"];function W(t){const n=X(),e=P(t)?G(t):t;return H.some((t=>!!e[t]&&"none"!==e[t]))||!!e.containerType&&"normal"!==e.containerType||!n&&!!e.backdropFilter&&"none"!==e.backdropFilter||!n&&!!e.filter&&"none"!==e.filter||$.some((t=>(e.willChange||"").includes(t)))||V.some((t=>(e.contain||"").includes(t)))}function X(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}const Y=new Set(["html","body","#document"]);function _(t){return Y.has(C(t))}function G(t){return T(t).getComputedStyle(t)}function J(t){return P(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.scrollX,scrollTop:t.scrollY}}function K(t){if("html"===C(t))return t;const n=t.assignedSlot||t.parentNode||L(t)&&t.host||D(t);return L(n)?n.host:n}function Q(t){const n=K(t);return _(n)?t.ownerDocument?t.ownerDocument.body:t.body:z(n)&&E(n)?n:Q(n)}function U(t,n,e){var o;void 0===n&&(n=[]),void 0===e&&(e=!0);const r=Q(t),i=r===(null==(o=t.ownerDocument)?void 0:o.body),l=T(r);if(i){const t=Z(l);return n.concat(l,l.visualViewport||[],E(r)?r:[],t&&e?U(t):[])}return n.concat(r,U(r,[],e))}function Z(t){return t.parent&&Object.getPrototypeOf(t.parent)?t.frameElement:null}function tt(t){const n=G(t);let o=parseFloat(n.width)||0,r=parseFloat(n.height)||0;const i=z(t),l=i?t.offsetWidth:o,c=i?t.offsetHeight:r,a=e(o)!==l||e(r)!==c;return a&&(o=l,r=c),{width:o,height:r,$:a}}function nt(t){return P(t)?t:t.contextElement}function et(t){const n=nt(t);if(!z(n))return r(1);const o=n.getBoundingClientRect(),{width:i,height:l,$:c}=tt(n);let a=(c?e(o.width):o.width)/i,s=(c?e(o.height):o.height)/l;return a&&Number.isFinite(a)||(a=1),s&&Number.isFinite(s)||(s=1),{x:a,y:s}}const ot=r(0);function rt(t){const n=T(t);return X()&&n.visualViewport?{x:n.visualViewport.offsetLeft,y:n.visualViewport.offsetTop}:ot}function it(t,n,e,o){void 0===n&&(n=!1),void 0===e&&(e=!1);const i=t.getBoundingClientRect(),l=nt(t);let c=r(1);n&&(o?P(o)&&(c=et(o)):c=et(t));const a=function(t,n,e){return void 0===n&&(n=!1),!(!e||n&&e!==T(t))&&n}(l,e,o)?rt(l):r(0);let s=(i.left+a.x)/c.x,u=(i.top+a.y)/c.y,f=i.width/c.x,d=i.height/c.y;if(l){const t=T(l),n=o&&P(o)?T(o):o;let e=t,r=Z(e);for(;r&&o&&n!==e;){const t=et(r),n=r.getBoundingClientRect(),o=G(r),i=n.left+(r.clientLeft+parseFloat(o.paddingLeft))*t.x,l=n.top+(r.clientTop+parseFloat(o.paddingTop))*t.y;s*=t.x,u*=t.y,f*=t.x,d*=t.y,s+=i,u+=l,e=T(r),r=Z(e)}}return S({width:f,height:d,x:s,y:u})}function lt(t,n){const e=J(t).scrollLeft;return n?n.left+e:it(D(t)).left+e}function ct(t,n){const e=t.getBoundingClientRect();return{x:e.left+n.scrollLeft-lt(t,e),y:e.top+n.scrollTop}}const at=new Set(["absolute","fixed"]);function st(t,e,o){let i;if("viewport"===e)i=function(t,n){const e=T(t),o=D(t),r=e.visualViewport;let i=o.clientWidth,l=o.clientHeight,c=0,a=0;if(r){i=r.width,l=r.height;const t=X();(!t||t&&"fixed"===n)&&(c=r.offsetLeft,a=r.offsetTop)}const s=lt(o);if(s<=0){const t=o.ownerDocument,n=t.body,e=getComputedStyle(n),r="CSS1Compat"===t.compatMode&&parseFloat(e.marginLeft)+parseFloat(e.marginRight)||0,l=Math.abs(o.clientWidth-n.clientWidth-r);l<=25&&(i-=l)}else s<=25&&(i+=s);return{width:i,height:l,x:c,y:a}}(t,o);else if("document"===e)i=function(t){const e=D(t),o=J(t),r=t.ownerDocument.body,i=n(e.scrollWidth,e.clientWidth,r.scrollWidth,r.clientWidth),l=n(e.scrollHeight,e.clientHeight,r.scrollHeight,r.clientHeight);let c=-o.scrollLeft+lt(t);const a=-o.scrollTop;return"rtl"===G(r).direction&&(c+=n(e.clientWidth,r.clientWidth)-i),{width:i,height:l,x:c,y:a}}(D(t));else if(P(e))i=function(t,n){const e=it(t,!0,"fixed"===n),o=e.top+t.clientTop,i=e.left+t.clientLeft,l=z(t)?et(t):r(1);return{width:t.clientWidth*l.x,height:t.clientHeight*l.y,x:i*l.x,y:o*l.y}}(e,o);else{const n=rt(t);i={x:e.x-n.x,y:e.y-n.y,width:e.width,height:e.height}}return S(i)}function ut(t,n){const e=K(t);return!(e===n||!P(e)||_(e))&&("fixed"===G(e).position||ut(e,n))}function ft(t,n,e){const o=z(n),i=D(n),l="fixed"===e,c=it(t,!0,l,n);let a={scrollLeft:0,scrollTop:0};const s=r(0);function u(){s.x=lt(i)}if(o||!o&&!l)if(("body"!==C(n)||E(i))&&(a=J(n)),o){const t=it(n,!0,l,n);s.x=t.x+n.clientLeft,s.y=t.y+n.clientTop}else i&&u();l&&!o&&i&&u();const f=!i||o||l?r(0):ct(i,a);return{x:c.left+a.scrollLeft-s.x-f.x,y:c.top+a.scrollTop-s.y-f.y,width:c.width,height:c.height}}function dt(t){return"static"===G(t).position}function mt(t,n){if(!z(t)||"fixed"===G(t).position)return null;if(n)return n(t);let e=t.offsetParent;return D(t)===e&&(e=e.ownerDocument.body),e}function yt(t,n){const e=T(t);if(q(t))return e;if(!z(t)){let n=K(t);for(;n&&!_(n);){if(P(n)&&!dt(n))return n;n=K(n)}return e}let o=mt(t,n);for(;o&&N(o)&&dt(o);)o=mt(o,n);return o&&_(o)&&dt(o)&&!W(o)?e:o||function(t){let n=K(t);for(;z(n)&&!_(n);){if(W(n))return n;if(q(n))return null;n=K(n)}return null}(t)||e}const pt={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:n,rect:e,offsetParent:o,strategy:i}=t;const l="fixed"===i,c=D(o),a=!!n&&q(n.floating);if(o===c||a&&l)return e;let s={scrollLeft:0,scrollTop:0},u=r(1);const f=r(0),d=z(o);if((d||!d&&!l)&&(("body"!==C(o)||E(c))&&(s=J(o)),z(o))){const t=it(o);u=et(o),f.x=t.x+o.clientLeft,f.y=t.y+o.clientTop}const m=!c||d||l?r(0):ct(c,s);return{width:e.width*u.x,height:e.height*u.y,x:e.x*u.x-s.scrollLeft*u.x+f.x+m.x,y:e.y*u.y-s.scrollTop*u.y+f.y+m.y}},getDocumentElement:D,getClippingRect:function(e){let{element:o,boundary:r,rootBoundary:i,strategy:l}=e;const c=[..."clippingAncestors"===r?q(o)?[]:function(t,n){const e=n.get(t);if(e)return e;let o=U(t,[],!1).filter((t=>P(t)&&"body"!==C(t))),r=null;const i="fixed"===G(t).position;let l=i?K(t):t;for(;P(l)&&!_(l);){const n=G(l),e=W(l);e||"fixed"!==n.position||(r=null),(i?!e&&!r:!e&&"static"===n.position&&r&&at.has(r.position)||E(l)&&!e&&ut(t,l))?o=o.filter((t=>t!==l)):r=n,l=K(l)}return n.set(t,o),o}(o,this._c):[].concat(r),i],a=c.reduce(((e,r)=>{const i=st(o,r,l);return e.top=n(i.top,e.top),e.right=t(i.right,e.right),e.bottom=t(i.bottom,e.bottom),e.left=n(i.left,e.left),e}),st(o,c[0],l));return{width:a.right-a.left,height:a.bottom-a.top,x:a.left,y:a.top}},getOffsetParent:yt,getElementRects:async function(t){const n=this.getOffsetParent||yt,e=this.getDimensions,o=await e(t.floating);return{reference:ft(t.reference,await n(t.floating),t.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:n,height:e}=tt(t);return{width:n,height:e}},getScale:et,isElement:P,isRTL:function(t){return"rtl"===G(t).direction}};function ht(t,n){return t.x===n.x&&t.y===n.y&&t.width===n.width&&t.height===n.height}function wt(e,r,i,l){void 0===l&&(l={});const{ancestorScroll:c=!0,ancestorResize:a=!0,elementResize:s="function"==typeof ResizeObserver,layoutShift:u="function"==typeof IntersectionObserver,animationFrame:f=!1}=l,d=nt(e),m=c||a?[...d?U(d):[],...U(r)]:[];m.forEach((t=>{c&&t.addEventListener("scroll",i,{passive:!0}),a&&t.addEventListener("resize",i)}));const y=d&&u?function(e,r){let i,l=null;const c=D(e);function a(){var t;clearTimeout(i),null==(t=l)||t.disconnect(),l=null}return function s(u,f){void 0===u&&(u=!1),void 0===f&&(f=1),a();const d=e.getBoundingClientRect(),{left:m,top:y,width:p,height:h}=d;if(u||r(),!p||!h)return;const w={rootMargin:-o(y)+"px "+-o(c.clientWidth-(m+p))+"px "+-o(c.clientHeight-(y+h))+"px "+-o(m)+"px",threshold:n(0,t(1,f))||1};let g=!0;function x(t){const n=t[0].intersectionRatio;if(n!==f){if(!g)return s();n?s(!1,n):i=setTimeout((()=>{s(!1,1e-7)}),1e3)}1!==n||ht(d,e.getBoundingClientRect())||s(),g=!1}try{l=new IntersectionObserver(x,{...w,root:c.ownerDocument})}catch(t){l=new IntersectionObserver(x,w)}l.observe(e)}(!0),a}(d,i):null;let p,h=-1,w=null;s&&(w=new ResizeObserver((t=>{let[n]=t;n&&n.target===d&&w&&(w.unobserve(r),cancelAnimationFrame(h),h=requestAnimationFrame((()=>{var t;null==(t=w)||t.observe(r)}))),i()})),d&&!f&&w.observe(d),w.observe(r));let g=f?it(e):null;return f&&function t(){const n=it(e);g&&!ht(g,n)&&i(),g=n,p=requestAnimationFrame(t)}(),i(),()=>{var t;m.forEach((t=>{c&&t.removeEventListener("scroll",i),a&&t.removeEventListener("resize",i)})),null==y||y(),null==(t=w)||t.disconnect(),w=null,f&&cancelAnimationFrame(p)}}const gt=function(t){return void 0===t&&(t=0),{name:"offset",options:t,async fn(n){var e,o;const{x:r,y:i,placement:l,middlewareData:c}=n,f=await async function(t,n){const{placement:e,platform:o,elements:r}=t,i=await(null==o.isRTL?void 0:o.isRTL(r.floating)),l=s(e),c=u(e),f="y"===y(e),d=k.has(l)?-1:1,m=i&&f?-1:1,p=a(n,t);let{mainAxis:h,crossAxis:w,alignmentAxis:g}="number"==typeof p?{mainAxis:p,crossAxis:0,alignmentAxis:null}:{mainAxis:p.mainAxis||0,crossAxis:p.crossAxis||0,alignmentAxis:p.alignmentAxis};return c&&"number"==typeof g&&(w="end"===c?-1*g:g),f?{x:w*m,y:h*d}:{x:h*d,y:w*m}}(n,t);return l===(null==(e=c.offset)?void 0:e.placement)&&null!=(o=c.arrow)&&o.alignmentOffset?{}:{x:r+f.x,y:i+f.y,data:{...f,placement:l}}}}},xt=function(t){return void 0===t&&(t={}),{name:"shift",options:t,async fn(n){const{x:e,y:o,placement:r,platform:i}=n,{mainAxis:l=!0,crossAxis:u=!1,limiter:d={fn:t=>{let{x:n,y:e}=t;return{x:n,y:e}}},...m}=a(t,n),p={x:e,y:o},h=await i.detectOverflow(n,m),w=y(s(r)),g=f(w);let x=p[g],v=p[w];l&&(x=c(x+h["y"===g?"top":"left"],x,x-h["y"===g?"bottom":"right"])),u&&(v=c(v+h["y"===w?"top":"left"],v,v-h["y"===w?"bottom":"right"]));const b=d.fn({...n,[g]:x,[w]:v});return{...b,data:{x:b.x-e,y:b.y-o,enabled:{[g]:l,[w]:u}}}}}},vt=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(n){var e,o;const{placement:r,middlewareData:i,rects:l,initialPlacement:c,platform:f,elements:m}=n,{mainAxis:A=!0,crossAxis:S=!0,fallbackPlacements:R,fallbackStrategy:F="bestFit",fallbackAxisSideDirection:k="none",flipAlignment:O=!0,...C}=a(t,n);if(null!=(e=i.arrow)&&e.alignmentOffset)return{};const T=s(r),D=y(c),M=s(c)===c,P=await(null==f.isRTL?void 0:f.isRTL(m.floating)),z=R||(M||!O?[b(c)]:function(t){const n=b(t);return[h(t),n,h(n)]}(c)),L="none"!==k;!R&&L&&z.push(...function(t,n,e,o){const r=u(t);let i=function(t,n,e){switch(t){case"top":case"bottom":return e?n?g:w:n?w:g;case"left":case"right":return n?x:v;default:return[]}}(s(t),"start"===e,o);return r&&(i=i.map((t=>t+"-"+r)),n&&(i=i.concat(i.map(h)))),i}(c,O,k,P));const B=[c,...z],E=await f.detectOverflow(n,C),I=[];let N=(null==(o=i.flip)?void 0:o.overflows)||[];if(A&&I.push(E[T]),S){const t=function(t,n,e){void 0===e&&(e=!1);const o=u(t),r=p(t),i=d(r);let l="x"===r?o===(e?"end":"start")?"right":"left":"start"===o?"bottom":"top";return n.reference[i]>n.floating[i]&&(l=b(l)),[l,b(l)]}(r,l,P);I.push(E[t[0]],E[t[1]])}if(N=[...N,{placement:r,overflows:I}],!I.every((t=>t<=0))){var j,q;const t=((null==(j=i.flip)?void 0:j.index)||0)+1,n=B[t];if(n&&("alignment"!==S||D===y(n)||N.every((t=>y(t.placement)!==D||t.overflows[0]>0))))return{data:{index:t,overflows:N},reset:{placement:n}};let e=null==(q=N.filter((t=>t.overflows[0]<=0)).sort(((t,n)=>t.overflows[1]-n.overflows[1]))[0])?void 0:q.placement;if(!e)switch(F){case"bestFit":{var H;const t=null==(H=N.filter((t=>{if(L){const n=y(t.placement);return n===D||"y"===n}return!0})).map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,n)=>t+n),0)])).sort(((t,n)=>t[1]-n[1]))[0])?void 0:H[0];t&&(e=t);break}case"initialPlacement":e=c}if(r!==e)return{reset:{placement:e}}}return{}}}},bt=n=>({name:"arrow",options:n,async fn(e){const{x:o,y:r,placement:i,rects:l,platform:s,elements:f,middlewareData:m}=e,{element:y,padding:h=0}=a(n,e)||{};if(null==y)return{};const w=A(h),g={x:o,y:r},x=p(i),v=d(x),b=await s.getDimensions(y),S="y"===x,R=S?"top":"left",F=S?"bottom":"right",k=S?"clientHeight":"clientWidth",O=l.reference[v]+l.reference[x]-g[x]-l.floating[v],C=g[x]-l.reference[x],T=await(null==s.getOffsetParent?void 0:s.getOffsetParent(y));let D=T?T[k]:0;D&&await(null==s.isElement?void 0:s.isElement(T))||(D=f.floating[k]||l.floating[v]);const M=O/2-C/2,P=D/2-b[v]/2-1,z=t(w[R],P),L=t(w[F],P),B=z,E=D-b[v]-L,I=D/2-b[v]/2+M,N=c(B,I,E),j=!m.arrow&&null!=u(i)&&I!==N&&l.reference[v]/2-(I<B?z:L)-b[v]/2<0,q=j?I<B?I-B:I-E:0;return{[x]:g[x]+q,data:{[x]:N,centerOffset:I-N-q,...j&&{alignmentOffset:q}},reset:j}}}),At=(t,n,e)=>{const o=new Map,r={platform:pt,...e},i={...r.platform,_c:o};return(async(t,n,e)=>{const{placement:o="bottom",strategy:r="absolute",middleware:i=[],platform:l}=e,c=i.filter(Boolean),a=await(null==l.isRTL?void 0:l.isRTL(n));let s=await l.getElementRects({reference:t,floating:n,strategy:r}),{x:u,y:f}=R(s,o,a),d=o,m={},y=0;for(let e=0;e<c.length;e++){var p;const{name:i,fn:h}=c[e],{x:w,y:g,data:x,reset:v}=await h({x:u,y:f,initialPlacement:o,placement:d,strategy:r,middlewareData:m,rects:s,platform:{...l,detectOverflow:null!=(p=l.detectOverflow)?p:F},elements:{reference:t,floating:n}});u=null!=w?w:u,f=null!=g?g:f,m={...m,[i]:{...m[i],...x}},v&&y<=50&&(y++,"object"==typeof v&&(v.placement&&(d=v.placement),v.rects&&(s=!0===v.rects?await l.getElementRects({reference:t,floating:n,strategy:r}):v.rects),({x:u,y:f}=R(s,d,a))),e=-1)}return{x:u,y:f,placement:d,strategy:r,middlewareData:m}})(t,n,{...r,platform:i})};export{wt as a,bt as b,At as c,vt as f,gt as o,xt as s}
@@ -1 +1 @@
1
- import{r as t,c as s,h as i,H as e,d as a}from"./p-Dj_4Fda9.js";import{N as o,P as h,D as l}from"./p-BtsCuEVE.js";import{c}from"./p-orsBiyT_.js";import{d as r}from"./p-Dn2SWlGn.js";const n=class{constructor(i){t(this,i),this.valueChange=s(this,"valueChange",7),this.clearable=!0,this.clearButtonLabel="Clear input",this.generateSuggestions=async()=>[],this.menuLabel="Suggestions",this.active=!1,this.loading=!1,this.suggestions=[],this.onChange=t=>{t.stopPropagation(),this.updateTerm(t)},this.updateTerm=r((async t=>{this.updateSuggestions(t.detail),this.open(),this.multiSelect||Boolean(t.detail)&&""!==t.detail||(this.value=void 0,this.valueChange.emit(this.value))}),250,!1),this.onSelect=async t=>{if(t.stopPropagation(),this.multiSelect){const s=t.detail,i=this.suggestions.filter((t=>!s.includes(t.id))).map((t=>t.id));this.value=[...this.value.filter((t=>!i.includes(t.id))),...this.suggestions.filter((t=>s.includes(t.id)&&!this.value.some((s=>s.id===t.id))))],this.valueChange.emit(this.value),this.inputEl.value="";const e=this.inputEl.querySelector("input");Boolean(e)&&(e.value="",queueMicrotask((()=>{e.focus(),this.close()})),this.updateSuggestions(e.value))}else if(Boolean(t.detail[0])){const s=t.detail[0],i=this.suggestions.find((t=>t.id===s));if(!Boolean(i))return;this.value=i,this.valueChange.emit(this.value),queueMicrotask((()=>{this.inputEl.querySelector("input")?.focus(),this.close()}))}},this.onRemoveValue=t=>{Array.isArray(this.value)&&(this.value=this.value.filter((s=>s.id!==t)),this.valueChange.emit(this.value))},this.onFocusOut=t=>{const s=t.relatedTarget;Boolean(s)&&!this.el.contains(s)&&this.close()},this.onFocus=()=>{this.updateSuggestions(),this.open()},this.onKeyDown=t=>{"Escape"===t.code&&(t.preventDefault(),t.stopPropagation(),this.inputEl.querySelector("input").focus(),this.close())},this.onInputKeyDown=t=>{"ArrowDown"===t.code&&(t.preventDefault(),this.listboxEl.querySelector('[role="listbox"]')?.querySelector('[tabIndex="0"]')?.focus())}}componentWillLoad(){const t=document.querySelectorAll("swirl-datepicker").length;this.id=`autocomplete-${t}`,this.handleInitialValue()}onWindowClick(t){this.el.contains(t.target)||this.close()}watchMultiSelect(){this.handleInitialValue()}async close(){if(!this.active)return;this.disableAutoUpdate&&this.disableAutoUpdate();const t=this.inputEl.querySelector("input");Boolean(t)&&(t.value=this.multiSelect?"":this.value?.label||""),this.active=!1}async open(){this.active||(this.active=!0,requestAnimationFrame((async()=>{await this.reposition(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=o(this.inputEl,this.listboxContainerEl,this.reposition.bind(this),{animationFrame:!0}),this.listboxContainerEl.scrollTop=0,this.updateSuggestions(this.inputEl.querySelector("input").value)})))}async reposition(){Boolean(this.listboxContainerEl)&&(this.position=await h(this.inputEl,this.listboxContainerEl,{middleware:[l({crossAxis:-16,mainAxis:16})],placement:"bottom-start",strategy:"fixed"}))}async updateSuggestions(t){this.loading=!0,this.suggestions=[],this.suggestions=await this.generateSuggestions(t),this.loading=!1}handleInitialValue(){this.multiSelect&&!Array.isArray(this.value)&&(this.value=[]),!this.multiSelect&&Array.isArray(this.value)&&(this.value=void 0)}render(){const t=`${this.id}-suggestions`,s=this.clearable&&!this.multiSelect,a=this.multiSelect?this.value.map((t=>t.id)):Boolean(this.value)?[this.value.id]:[],o=this.multiSelect?void 0:this.value?.label||"",h=c("autocomplete",{"autocomplete--inactive":!this.active});return i(e,{key:"36f37cea5fdd7151673aa5c8ad30f652a1769609"},i("div",{key:"f1457ce0ea13ea7a769cd1de3eb3bf4cf2b9549b",class:h,onKeyDown:this.onKeyDown},this.multiSelect&&Array.isArray(this.value)&&this.value.length>0&&i("div",{key:"7b5b831a06dd7270386f857d198178a92e118580",class:"autocomplete__multi-select-tags"},i("swirl-stack",{key:"c5bf0b5bf1252f9bd8368917a27d9927e3b2c7c0",orientation:"horizontal",spacing:"8",wrap:!0},this.value.map((t=>i("swirl-tag",{key:t.id,label:t.label,onRemove:()=>this.onRemoveValue(t.id),removable:!this.disabled}))))),i("swirl-text-input",{key:"f41ec2b57444ff45d75e039dad609d7b2ebf6d17",autoSelect:this.autoSelect,class:"autocomplete__input",clearable:s,clearButtonLabel:this.clearButtonLabel,disabled:this.disabled,disableDynamicWidth:!0,id:this.id,inline:this.inline,invalid:this.invalid,onInputFocus:this.onFocus,onKeyDown:this.onInputKeyDown,onValueChange:this.onChange,maxLength:this.maxLength,mode:this.mode,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,spellCheck:this.spellCheck,swirlAriaAutocomplete:"list",swirlAriaControls:t,swirlAriaDescribedby:this.swirlAriaDescribedby,swirlAriaExpanded:String(this.active),swirlRole:"combobox",value:o}),i("div",{key:"a940d9511351d965da89de983885eb0d8819f977",class:"autocomplete__listbox-container",onFocusout:this.onFocusOut,ref:t=>this.listboxContainerEl=t,style:{top:Boolean(this.position)?`${this.position?.y}px`:"",left:Boolean(this.position)?`${this.position?.x}px`:"",width:`${this.inputEl?.getBoundingClientRect().width+32}px`}},this.loading&&i("div",{key:"bdcc2ec3441fa97915ac8d1ed4348a0c59101708",class:"autocomplete__spinner"},i("swirl-spinner",{key:"08a8eeb925fcc515f76ae0d7edae2c5fc01f409f"})),this.suggestions.length>0&&i("swirl-option-list",{key:"79b71e2f6aaabef56558d95229dc24ee26cb4056",allowDeselect:!0===this.multiSelect,label:this.menuLabel,multiSelect:this.multiSelect,onValueChange:this.onSelect,optionListId:t,ref:t=>this.listboxEl=t,value:a},this.suggestions.map((t=>i("swirl-option-list-item",{selected:Array.isArray(this.value)?this.value.some((s=>s.id===t.id)):this.value?.id===t.id,key:t.id,disabled:t.disabled,label:t.label,value:t.id})))))))}get el(){return a(this)}static get watchers(){return{multiSelect:["watchMultiSelect"]}}};n.style=".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;max-height:18rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);animation:autocomplete-enter 0.1s;box-shadow:var(--s-shadow-level-1)}.autocomplete__listbox-container.sc-swirl-autocomplete:empty{display:none}.autocomplete__spinner.sc-swirl-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}.autocomplete__multi-select-tags.sc-swirl-autocomplete{margin-top:var(--swirl-autocomplete-tags-margin-top);margin-bottom:var(--s-space-4)}@keyframes autocomplete-enter{from{opacity:0}to{opacity:1}}";export{n as swirl_autocomplete}
1
+ import{r as t,c as s,h as i,H as e,d as a}from"./p-Dj_4Fda9.js";import{a as o,c as h,o as l}from"./p-CLsTbQHn.js";import{c}from"./p-orsBiyT_.js";import{d as n}from"./p-Dn2SWlGn.js";const r=class{constructor(i){t(this,i),this.valueChange=s(this,"valueChange",7),this.clearable=!0,this.clearButtonLabel="Clear input",this.generateSuggestions=async()=>[],this.menuLabel="Suggestions",this.active=!1,this.loading=!1,this.suggestions=[],this.onChange=t=>{t.stopPropagation(),this.updateTerm(t)},this.updateTerm=n((async t=>{this.updateSuggestions(t.detail),this.open(),this.multiSelect||Boolean(t.detail)&&""!==t.detail||(this.value=void 0,this.valueChange.emit(this.value))}),250,!1),this.onSelect=async t=>{if(t.stopPropagation(),this.multiSelect){const s=t.detail,i=this.suggestions.filter((t=>!s.includes(t.id))).map((t=>t.id));this.value=[...this.value.filter((t=>!i.includes(t.id))),...this.suggestions.filter((t=>s.includes(t.id)&&!this.value.some((s=>s.id===t.id))))],this.valueChange.emit(this.value),this.inputEl.value="";const e=this.inputEl.querySelector("input");Boolean(e)&&(e.value="",queueMicrotask((()=>{e.focus(),this.close()})),this.updateSuggestions(e.value))}else if(Boolean(t.detail[0])){const s=t.detail[0],i=this.suggestions.find((t=>t.id===s));if(!Boolean(i))return;this.value=i,this.valueChange.emit(this.value),queueMicrotask((()=>{this.inputEl.querySelector("input")?.focus(),this.close()}))}},this.onRemoveValue=t=>{Array.isArray(this.value)&&(this.value=this.value.filter((s=>s.id!==t)),this.valueChange.emit(this.value))},this.onFocusOut=t=>{const s=t.relatedTarget;Boolean(s)&&!this.el.contains(s)&&this.close()},this.onFocus=()=>{this.updateSuggestions(),this.open()},this.onKeyDown=t=>{"Escape"===t.code&&(t.preventDefault(),t.stopPropagation(),this.inputEl.querySelector("input").focus(),this.close())},this.onInputKeyDown=t=>{"ArrowDown"===t.code&&(t.preventDefault(),this.listboxEl.querySelector('[role="listbox"]')?.querySelector('[tabIndex="0"]')?.focus())}}componentWillLoad(){const t=document.querySelectorAll("swirl-datepicker").length;this.id=`autocomplete-${t}`,this.handleInitialValue()}onWindowClick(t){this.el.contains(t.target)||this.close()}watchMultiSelect(){this.handleInitialValue()}async close(){if(!this.active)return;this.disableAutoUpdate&&this.disableAutoUpdate();const t=this.inputEl.querySelector("input");Boolean(t)&&(t.value=this.multiSelect?"":this.value?.label||""),this.active=!1}async open(){this.active||(this.active=!0,requestAnimationFrame((async()=>{await this.reposition(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=o(this.inputEl,this.listboxContainerEl,this.reposition.bind(this),{animationFrame:!0}),this.listboxContainerEl.scrollTop=0,this.updateSuggestions(this.inputEl.querySelector("input").value)})))}async reposition(){Boolean(this.listboxContainerEl)&&(this.position=await h(this.inputEl,this.listboxContainerEl,{middleware:[l({crossAxis:-16,mainAxis:16})],placement:"bottom-start",strategy:"fixed"}))}async updateSuggestions(t){this.loading=!0,this.suggestions=[],this.suggestions=await this.generateSuggestions(t),this.loading=!1}handleInitialValue(){this.multiSelect&&!Array.isArray(this.value)&&(this.value=[]),!this.multiSelect&&Array.isArray(this.value)&&(this.value=void 0)}render(){const t=`${this.id}-suggestions`,s=this.clearable&&!this.multiSelect,a=this.multiSelect?this.value.map((t=>t.id)):Boolean(this.value)?[this.value.id]:[],o=this.multiSelect?void 0:this.value?.label||"",h=c("autocomplete",{"autocomplete--inactive":!this.active});return i(e,{key:"36f37cea5fdd7151673aa5c8ad30f652a1769609"},i("div",{key:"f1457ce0ea13ea7a769cd1de3eb3bf4cf2b9549b",class:h,onKeyDown:this.onKeyDown},this.multiSelect&&Array.isArray(this.value)&&this.value.length>0&&i("div",{key:"7b5b831a06dd7270386f857d198178a92e118580",class:"autocomplete__multi-select-tags"},i("swirl-stack",{key:"c5bf0b5bf1252f9bd8368917a27d9927e3b2c7c0",orientation:"horizontal",spacing:"8",wrap:!0},this.value.map((t=>i("swirl-tag",{key:t.id,label:t.label,onRemove:()=>this.onRemoveValue(t.id),removable:!this.disabled}))))),i("swirl-text-input",{key:"f41ec2b57444ff45d75e039dad609d7b2ebf6d17",autoSelect:this.autoSelect,class:"autocomplete__input",clearable:s,clearButtonLabel:this.clearButtonLabel,disabled:this.disabled,disableDynamicWidth:!0,id:this.id,inline:this.inline,invalid:this.invalid,onInputFocus:this.onFocus,onKeyDown:this.onInputKeyDown,onValueChange:this.onChange,maxLength:this.maxLength,mode:this.mode,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,spellCheck:this.spellCheck,swirlAriaAutocomplete:"list",swirlAriaControls:t,swirlAriaDescribedby:this.swirlAriaDescribedby,swirlAriaExpanded:String(this.active),swirlRole:"combobox",value:o}),i("div",{key:"a940d9511351d965da89de983885eb0d8819f977",class:"autocomplete__listbox-container",onFocusout:this.onFocusOut,ref:t=>this.listboxContainerEl=t,style:{top:Boolean(this.position)?`${this.position?.y}px`:"",left:Boolean(this.position)?`${this.position?.x}px`:"",width:`${this.inputEl?.getBoundingClientRect().width+32}px`}},this.loading&&i("div",{key:"bdcc2ec3441fa97915ac8d1ed4348a0c59101708",class:"autocomplete__spinner"},i("swirl-spinner",{key:"08a8eeb925fcc515f76ae0d7edae2c5fc01f409f"})),this.suggestions.length>0&&i("swirl-option-list",{key:"79b71e2f6aaabef56558d95229dc24ee26cb4056",allowDeselect:!0===this.multiSelect,label:this.menuLabel,multiSelect:this.multiSelect,onValueChange:this.onSelect,optionListId:t,ref:t=>this.listboxEl=t,value:a},this.suggestions.map((t=>i("swirl-option-list-item",{selected:Array.isArray(this.value)?this.value.some((s=>s.id===t.id)):this.value?.id===t.id,key:t.id,disabled:t.disabled,label:t.label,value:t.id})))))))}get el(){return a(this)}static get watchers(){return{multiSelect:["watchMultiSelect"]}}};r.style=".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;max-height:18rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);animation:autocomplete-enter 0.1s;box-shadow:var(--s-shadow-level-1)}.autocomplete__listbox-container.sc-swirl-autocomplete:empty{display:none}.autocomplete__spinner.sc-swirl-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}.autocomplete__multi-select-tags.sc-swirl-autocomplete{margin-top:var(--swirl-autocomplete-tags-margin-top);margin-bottom:var(--s-space-4)}@keyframes autocomplete-enter{from{opacity:0}to{opacity:1}}";export{r as swirl_autocomplete}