@getflip/swirl-components 0.477.0 → 0.478.0

package/dist/components/swirl-popover-trigger2.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,h as i,Host as s,transformTag as r}from"@stencil/core/internal/client";const o=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.hidePopoverWhenInvisible=!0,this.setAriaAttributes=!0,this.triggerOnClick=!0,this.triggerOnHover=!1,this.componentLoaded=!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 t=this.getPopoverEl(),e=this.getTriggerEl();t.open(e,!0,"hover"),t.addEventListener("popoverOpen",(()=>{this.updateTriggerElAriaAttributes(!0)}),{once:!0}),t.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 t=this.getPopoverEl(),e=this.getTriggerEl();t.toggle(e,"click"),t.addEventListener("popoverOpen",(()=>{this.updateTriggerElAriaAttributes(!0)}),{once:!0}),t.addEventListener("popoverClose",(()=>{this.updateTriggerElAriaAttributes(!1)}),{once:!0})},this.updateTriggerElAriaAttributes=t=>{if(!this.setAriaAttributes)return;const e=this.getTriggerEl();if(!Boolean(e))return;const i=this.getPopoverEl()?.id;e.tagName.startsWith("SWIRL-")?(this.triggerOnHover?(e.removeAttribute("swirl-aria-controls"),e.removeAttribute("swirl-aria-expanded")):(e.setAttribute("swirl-aria-controls",i),e.setAttribute("swirl-aria-expanded",String(t||"false"))),e.setAttribute("swirl-aria-haspopup","dialog")):(this.triggerOnHover?(e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded")):(e.setAttribute("aria-controls",i),e.setAttribute("aria-expanded",String(t||"false"))),e.setAttribute("aria-haspopup","dialog"))}}connectedCallback(){this.componentLoaded&&(this.setupHoverListeners(),this.setupIntersectionObserver())}componentDidLoad(){this.updateTriggerElAriaAttributes(),this.setupHoverListeners(),this.setupIntersectionObserver(),this.componentLoaded=!0}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.removeHoverListeners(),clearTimeout(this.hoverDelayReference),clearTimeout(this.hoverLingerReference)}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]}setupIntersectionObserver(){if(this.intersectionObserver?.disconnect(),this.hidePopoverWhenInvisible){this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{root:this.parentScrollContainer,threshold:1});const t=this.el.querySelector("*");if(!Boolean(t))return;this.intersectionObserver.observe(t)}}onVisibilityChange(t){!t[0].isIntersecting&&this.isPopoverOpen()&&this.getPopoverEl()?.close()}setupHoverListeners(){this.popoverElRef=this.getPopoverEl(),Boolean(this.popoverElRef)&&(this.popoverElRef.addEventListener("mouseenter",this.popoverMouseEnter),this.popoverElRef.addEventListener("mouseleave",this.popoverMouseLeave))}removeHoverListeners(){Boolean(this.popoverElRef)&&(this.popoverElRef.removeEventListener("mouseenter",this.popoverMouseEnter),this.popoverElRef.removeEventListener("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 t=this.getPopoverEl(),e=t?.shadowRoot.firstChild?.classList.contains("popover--active");return e}render(){return i(s,{key:"3ea08cc79c2fef4828d2e6c366c5a40e8d6d3970",onClick:this.onClick,onMouseenter:this.onMouseenter,onMouseleave:this.onMouseleave},i("slot",{key:"284636f8e6232f2e5517a02cd71450c99b5ec0c3"}))}get el(){return this}static get watchers(){return{swirlPopover:[{watchPopover:0}],triggerOnHover:[{watchHover:0}]}}static get style(){return".sc-swirl-popover-trigger-h{display:contents}"}},[262,"swirl-popover-trigger",{hidePopoverWhenInvisible:[4,"hide-popover-when-invisible"],parentScrollContainer:[16],setAriaAttributes:[4,"set-aria-attributes"],swirlPopover:[1,"swirl-popover"],triggerOnClick:[4,"trigger-on-click"],triggerOnHover:[4,"trigger-on-hover"],hoverLingerDuration:[2,"hover-linger-duration"],hoverDelay:[2,"hover-delay"]},void 0,{swirlPopover:[{watchPopover:0}],triggerOnHover:[{watchHover:0}]}]);function h(){"undefined"!=typeof customElements&&["swirl-popover-trigger"].forEach((t=>{"swirl-popover-trigger"===t&&(customElements.get(r(t))||customElements.define(r(t),o))}))}export{o as S,h as d}
+import{proxyCustomElement as t,HTMLElement as e,h as i,Host as s,transformTag as r}from"@stencil/core/internal/client";const o=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.hidePopoverWhenInvisible=!0,this.setAriaAttributes=!0,this.triggerOnClick=!0,this.triggerOnHover=!1,this.componentLoaded=!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 t=this.getPopoverEl(),e=this.getTriggerEl();t.open(e,!0,"hover"),t.addEventListener("popoverOpen",(()=>{this.updateTriggerElAriaAttributes(!0)}),{once:!0}),t.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 t=this.getPopoverEl(),e=this.getTriggerEl();t.toggle(e,"click"),t.addEventListener("popoverOpen",(()=>{this.updateTriggerElAriaAttributes(!0)}),{once:!0}),t.addEventListener("popoverClose",(()=>{this.updateTriggerElAriaAttributes(!1)}),{once:!0})},this.updateTriggerElAriaAttributes=t=>{if(!this.setAriaAttributes)return;const e=this.getTriggerEl();if(!Boolean(e))return;const i=this.getPopoverEl()?.id;e.tagName.startsWith("SWIRL-")?(this.triggerOnHover?(e.removeAttribute("swirl-aria-controls"),e.removeAttribute("swirl-aria-expanded")):(e.setAttribute("swirl-aria-controls",i),e.setAttribute("swirl-aria-expanded",String(t||"false"))),e.setAttribute("swirl-aria-haspopup","dialog")):(this.triggerOnHover?(e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded")):(e.setAttribute("aria-controls",i),e.setAttribute("aria-expanded",String(t||"false"))),e.setAttribute("aria-haspopup","dialog"))}}connectedCallback(){this.componentLoaded&&(this.setupHoverListeners(),this.setupIntersectionObserver())}componentDidLoad(){this.updateTriggerElAriaAttributes(),this.setupHoverListeners(),this.setupIntersectionObserver(),this.componentLoaded=!0}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.removeHoverListeners(),clearTimeout(this.hoverDelayReference),clearTimeout(this.hoverLingerReference)}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]}setupIntersectionObserver(){if(this.intersectionObserver?.disconnect(),this.hidePopoverWhenInvisible){this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{root:this.parentScrollContainer,threshold:1});const t=this.el.querySelector("*");if(!Boolean(t))return;this.intersectionObserver.observe(t)}}onVisibilityChange(t){!t[0].isIntersecting&&this.isPopoverOpen()&&this.getPopoverEl()?.close()}setupHoverListeners(){this.popoverElRef=this.getPopoverEl(),Boolean(this.popoverElRef)&&(this.popoverElRef.addEventListener("mouseenter",this.popoverMouseEnter),this.popoverElRef.addEventListener("mouseleave",this.popoverMouseLeave))}removeHoverListeners(){Boolean(this.popoverElRef)&&(this.popoverElRef.removeEventListener("mouseenter",this.popoverMouseEnter),this.popoverElRef.removeEventListener("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 t=this.getPopoverEl(),e=t?.shadowRoot.firstChild?.classList.contains("popover--active");return e}render(){return i(s,{key:"34305db8f07d6fc98e12fcb21f324914cab93f42",onClick:this.onClick,onMouseenter:this.onMouseenter,onMouseleave:this.onMouseleave},i("slot",{key:"d5fd1a6e40d85473acf7f4d0d301d424184eb78f"}))}get el(){return this}static get watchers(){return{swirlPopover:[{watchPopover:0}],triggerOnHover:[{watchHover:0}]}}static get style(){return".sc-swirl-popover-trigger-h{display:contents}"}},[262,"swirl-popover-trigger",{hidePopoverWhenInvisible:[4,"hide-popover-when-invisible"],parentScrollContainer:[16],setAriaAttributes:[4,"set-aria-attributes"],swirlPopover:[1,"swirl-popover"],triggerOnClick:[4,"trigger-on-click"],triggerOnHover:[4,"trigger-on-hover"],hoverLingerDuration:[2,"hover-linger-duration"],hoverDelay:[2,"hover-delay"]},void 0,{swirlPopover:[{watchPopover:0}],triggerOnHover:[{watchHover:0}]}]);function h(){"undefined"!=typeof customElements&&["swirl-popover-trigger"].forEach((t=>{"swirl-popover-trigger"===t&&(customElements.get(r(t))||customElements.define(r(t),o))}))}export{o as S,h as d}

package/dist/components/swirl-popover2.js

@@ -1 +1 @@
-import{proxyCustomElement as o,HTMLElement as e,createEvent as t,h as i,Host as r,transformTag as n}from"@stencil/core/internal/client";import{c as s,a as p,s as a,o as d,f as c}from"./floating-ui.dom.js";import{d as l,e as h}from"./bodyScrollLock.esm.js";import{c as v}from"./index2.js";import{t as m}from"./index.esm.js";import{i as f,t as u,k as b,q as _}from"./utils.js";const g=["xs","sm","base","l","xl"],w=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.popoverClose=t(this,"popoverClose",7),this.popoverOpen=t(this,"popoverOpen",7),this.animation="scale-in-xy",this.enableFlip=!0,this.fallbackAxisSideDirection="none",this.maxHeight="22rem",this.offset=8,this.padded=!0,this.placement="bottom-start",this.returnFocusToTrigger=!0,this.translucent=!0,this.borderRadius="base",this.active=!1,this.closing=!1,this.componentLoaded=!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=f();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=u("--s-space-16"),i=a({padding:{left:t,right:t}}),r=this.enableFlip?[d(e),c({fallbackAxisSideDirection:this.fallbackAxisSideDirection}),i]:[d(e),i];this.position=await s(this.triggerEl,this.contentContainer,{middleware:r,placement:this.placement,strategy:"fixed"})},this.onCloseButtonClick=()=>{this.close()}}connectedCallback(){this.componentLoaded&&this.connectTrigger()}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'),this.componentLoaded=!0}disconnectedCallback(){this.unlockBodyScroll(),this.disableAutoUpdate?.(),this.disableAutoUpdate=void 0,this.triggerEl?.removeEventListener("click",this.togglePopover)}onWindowFocusIn(o){if(!this.active)return;const e=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),t="webkit"in window,i=e||t,r=o.target,n=o.relatedTarget,s=b(),p=!this.el.contains(r)&&!this.el.contains(s),a=r!==this.triggerEl&&!this.triggerEl?.contains(r),d=i&&!this.el.contains(n||r)&&n!==this.el;["SWIRL-TAB"].includes(r.tagName)||!p||!a||i&&!d||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))),r=e===this.triggerEl||this.triggerEl.contains(e)||o.composedPath().includes(this.triggerEl);t||i||r||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.position=void 0,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.position=void 0,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=p(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?_(this.triggerContainer||document.body,`#${this.trigger}`)[0]:this.trigger,Boolean(this.triggerEl)&&this.triggerEl.addEventListener("click",this.togglePopover)):this.triggerEl=void 0}getNativeTriggerElement(){return m(this.triggerEl,{includeContainer:!0,getShadowRoot:!0}).at(0)}updateTriggerAttributes(o){if(!Boolean(this.triggerEl))return;const e=this.getNativeTriggerElement();Boolean(e)&&("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 _(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(){f()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&l(this.scrollContainer)}unlockBodyScroll(){f()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&h(this.scrollContainer)}render(){const o=!window.matchMedia("(min-width: 768px)").matches,e=g.includes(this.borderRadius)?`var(--s-border-radius-${this.borderRadius})`:this.borderRadius,t=v("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--translucent":this.translucent&&!this.transparent,"popover--transparent":this.transparent,"popover--padded":this.padded});return i(r,{key:"689e23e4e69c67f9af6d18f4d866b74123986288"},i("div",{key:"df8b86a05008b954b235cfc86c0e204297a95d7b",popover:"manual",class:t,onKeyDown:this.onKeydown,ref:o=>this.popoverEl=o},i("div",{key:"20e1b2176375ed74295cf160f9a1cf8cfa44ceac","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`:"",opacity:!this.active||this.position||o?void 0:"0","--swirl-popover-border-radius":e},tabindex:"-1"},i("span",{key:"476b68e3bfed68d1b56d5b889126d450c8459f1d",class:"popover__handle"}),i("div",{key:"a900de1329dba957ead0af858f4c42d1ddbcac68",class:"popover__scroll-container",part:"popover__scroll-container",ref:o=>this.scrollContainer=o,style:{maxHeight:!o&&Boolean(this.maxHeight)?this.maxHeight:void 0}},i("slot",{key:"3d83616e4ad6307a7bf4cd18d3ba427f87a8355d"}))),this.active&&i("div",{key:"65041389b759aec6f21bed01f31436593ec83974",class:"popover__backdrop",onClick:this.onCloseButtonClick})))}get el(){return this}static get style(){return':host{position:relative;z-index:var(--s-z-40);display:contents}:host *{box-sizing:border-box}.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{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--placement-bottom .popover__content,.popover--placement-bottom-start .popover__content,.popover--placement-right .popover__content,.popover--placement-right-start .popover__content{transform-origin:top left}}@media (min-width: 768px){.popover--placement-bottom-end .popover__content,.popover--placement-left .popover__content,.popover--placement-left-start .popover__content{transform-origin:top right}}@media (min-width: 768px){.popover--placement-top .popover__content,.popover--placement-top-start .popover__content,.popover--placement-right-end .popover__content{transform-origin:bottom left}}@media (min-width: 768px){.popover--placement-top-end .popover__content,.popover--placement-left-end .popover__content{transform-origin:bottom right}}@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--translucent .popover__content{background-color:transparent;outline:var(--s-border-width-default) solid       var(--s-border-translucent-outline)}.popover--translucent .popover__content:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));border-radius:inherit}.popover--translucent .popover__handle{background-color:var(--s-border-on-translucent)}.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;border-radius:var(       --swirl-popover-border-radius,       var(--s-border-radius-base)     );max-width:22.5rem;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}}'}},[257,"swirl-popover",{animation:[1],disableScrollLock:[4,"disable-scroll-lock"],enableFlip:[4,"enable-flip"],fallbackAxisSideDirection:[1,"fallback-axis-side-direction"],fullscreenBottomSheet:[4,"fullscreen-bottom-sheet"],label:[1],maxHeight:[1,"max-height"],offset:[2],padded:[4],popoverId:[1,"popover-id"],placement:[1],returnFocusToTrigger:[4,"return-focus-to-trigger"],translucent:[4],transparent:[4],trigger:[1],triggerContainer:[16],useContainerWidth:[8,"use-container-width"],borderRadius:[1,"border-radius"],active:[32],closing:[32],position:[32],close:[64],open:[64],isOpen:[64],toggle:[64]},[[8,"focusin","onWindowFocusIn"],[8,"blur","onWindowBlur"],[8,"click","onWindowClick"]]]);function x(){"undefined"!=typeof customElements&&["swirl-popover"].forEach((o=>{"swirl-popover"===o&&(customElements.get(n(o))||customElements.define(n(o),w))}))}export{w as S,x as d}
+import{proxyCustomElement as o,HTMLElement as e,createEvent as t,h as i,Host as r,transformTag as n}from"@stencil/core/internal/client";import{c as s,a as p,s as a,o as d,f as c}from"./floating-ui.dom.js";import{d as l,e as h}from"./bodyScrollLock.esm.js";import{c as v}from"./index2.js";import{t as m}from"./index.esm.js";import{i as f,t as u,k as b,q as _}from"./utils.js";const g=["xs","sm","base","l","xl"],w=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.popoverClose=t(this,"popoverClose",7),this.popoverOpen=t(this,"popoverOpen",7),this.animation="scale-in-xy",this.enableFlip=!0,this.fallbackAxisSideDirection="none",this.maxHeight="22rem",this.offset=8,this.padded=!0,this.placement="bottom-start",this.returnFocusToTrigger=!0,this.translucent=!0,this.borderRadius="base",this.active=!1,this.closing=!1,this.componentLoaded=!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=f();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=u("--s-space-16"),i=a({padding:{left:t,right:t}}),r=this.enableFlip?[d(e),c({fallbackAxisSideDirection:this.fallbackAxisSideDirection}),i]:[d(e),i];this.position=await s(this.triggerEl,this.contentContainer,{middleware:r,placement:this.placement,strategy:"fixed"})},this.onCloseButtonClick=()=>{this.close()}}connectedCallback(){this.componentLoaded&&this.connectTrigger()}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'),this.componentLoaded=!0}disconnectedCallback(){this.unlockBodyScroll(),this.disableAutoUpdate?.(),this.disableAutoUpdate=void 0,this.triggerEl?.removeEventListener("click",this.togglePopover)}onWindowFocusIn(o){if(!this.active)return;const e=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),t="webkit"in window,i=e||t,r=o.target,n=o.relatedTarget,s=b(),p=!this.el.contains(r)&&!this.el.contains(s),a=r!==this.triggerEl&&!this.triggerEl?.contains(r),d=i&&!this.el.contains(n||r)&&n!==this.el;["SWIRL-TAB"].includes(r.tagName)||!p||!a||i&&!d||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))),r=e===this.triggerEl||this.triggerEl.contains(e)||o.composedPath().includes(this.triggerEl);t||i||r||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.position=void 0,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.position=void 0,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=p(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?_(this.triggerContainer||document.body,`#${this.trigger}`)[0]:this.trigger,Boolean(this.triggerEl)&&this.triggerEl.addEventListener("click",this.togglePopover)):this.triggerEl=void 0}getNativeTriggerElement(){return m(this.triggerEl,{includeContainer:!0,getShadowRoot:!0}).at(0)}updateTriggerAttributes(o){if(!Boolean(this.triggerEl))return;const e=this.getNativeTriggerElement();Boolean(e)&&("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 _(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(){f()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&l(this.scrollContainer)}unlockBodyScroll(){f()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&h(this.scrollContainer)}render(){const o=!window.matchMedia("(min-width: 768px)").matches,e=g.includes(this.borderRadius)?`var(--s-border-radius-${this.borderRadius})`:this.borderRadius,t=v("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--translucent":this.translucent&&!this.transparent,"popover--transparent":this.transparent,"popover--padded":this.padded});return i(r,{key:"e86660b1d954b74b590ec8975654b84bdfa8253e"},i("div",{key:"cb454da1552d7f348f5ff3ed7a09d1f0b5fc49ac",popover:"manual",class:t,onKeyDown:this.onKeydown,ref:o=>this.popoverEl=o},i("div",{key:"354370c9c4bfaad3d8a0e4793ad04cf623da47dd","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`:"",opacity:!this.active||this.position||o?void 0:"0","--swirl-popover-border-radius":e},tabindex:"-1"},i("span",{key:"4197a0265d62275e6bcd3cc490297c06a962f29d",class:"popover__handle"}),i("div",{key:"4090dc4fa478c21b621be37c4f780a2126802edc",class:"popover__scroll-container",part:"popover__scroll-container",ref:o=>this.scrollContainer=o,style:{maxHeight:!o&&Boolean(this.maxHeight)?this.maxHeight:void 0}},i("slot",{key:"16ba8a242e8b38e4f0a8aa82c34b02956b79a07a"}))),this.active&&i("div",{key:"217d3c3a8a21592c71011deae0c54a532e1445d3",class:"popover__backdrop",onClick:this.onCloseButtonClick})))}get el(){return this}static get style(){return':host{position:relative;z-index:var(--s-z-40);display:contents}:host *{box-sizing:border-box}.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{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--placement-bottom .popover__content,.popover--placement-bottom-start .popover__content,.popover--placement-right .popover__content,.popover--placement-right-start .popover__content{transform-origin:top left}}@media (min-width: 768px){.popover--placement-bottom-end .popover__content,.popover--placement-left .popover__content,.popover--placement-left-start .popover__content{transform-origin:top right}}@media (min-width: 768px){.popover--placement-top .popover__content,.popover--placement-top-start .popover__content,.popover--placement-right-end .popover__content{transform-origin:bottom left}}@media (min-width: 768px){.popover--placement-top-end .popover__content,.popover--placement-left-end .popover__content{transform-origin:bottom right}}@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--translucent .popover__content{background-color:transparent;outline:var(--s-border-width-default) solid       var(--s-border-translucent-outline)}.popover--translucent .popover__content:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));border-radius:inherit}.popover--translucent .popover__handle{background-color:var(--s-border-on-translucent)}.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;border-radius:var(       --swirl-popover-border-radius,       var(--s-border-radius-base)     );max-width:22.5rem;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}}'}},[257,"swirl-popover",{animation:[1],disableScrollLock:[4,"disable-scroll-lock"],enableFlip:[4,"enable-flip"],fallbackAxisSideDirection:[1,"fallback-axis-side-direction"],fullscreenBottomSheet:[4,"fullscreen-bottom-sheet"],label:[1],maxHeight:[1,"max-height"],offset:[2],padded:[4],popoverId:[1,"popover-id"],placement:[1],returnFocusToTrigger:[4,"return-focus-to-trigger"],translucent:[4],transparent:[4],trigger:[1],triggerContainer:[16],useContainerWidth:[8,"use-container-width"],borderRadius:[1,"border-radius"],active:[32],closing:[32],position:[32],close:[64],open:[64],isOpen:[64],toggle:[64]},[[8,"focusin","onWindowFocusIn"],[8,"blur","onWindowBlur"],[8,"click","onWindowClick"]]]);function x(){"undefined"!=typeof customElements&&["swirl-popover"].forEach((o=>{"swirl-popover"===o&&(customElements.get(n(o))||customElements.define(n(o),w))}))}export{w as S,x as d}

package/dist/components/swirl-progress-indicator2.js

@@ -1 +1 @@
-import{proxyCustomElement as r,HTMLElement as e,h as i,Host as s,transformTag as a}from"@stencil/core/internal/client";import{c as o}from"./index2.js";const t=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.size="m",this.value=0,this.variant="bar"}render(){const r=o("progress-indicator",`progress-indicator--size-${this.size}`,`progress-indicator--variant-${this.variant}`),e="m"===this.size?4:2,a="m"===this.size?20:10,t=Math.round(2*a*Math.PI),n=Math.round(t*((100-this.value)/100));return i(s,{key:"145af7f98c9a802df6b2d200259698038a21b8f0",class:this.variant},"bar"===this.variant&&i("progress",{key:"87d9ff0d045c00243130990a2f4c4bb9acf148ea","aria-label":this.label,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":this.value,class:r,max:100,value:this.value}),"circle"===this.variant&&i("span",{key:"b7d41758466e3ce6ff106097fe3f906a1ceb299a",role:"progressbar","aria-label":this.label,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":this.value,class:r},i("svg",{key:"cfae59747e8009dff51208ca319e882ca6b8ba38",class:"progress-indicator__circle",focusable:"false",viewBox:`0 0 ${2*(a+e)} ${2*(a+e)}`},i("circle",{key:"3ea99ecc73cd6031d17303dac25cc1d8e51891a5",class:"progress-indicator__circle-background",cx:a+e,cy:a+e,r:a,fill:"none","stroke-width":e}),i("circle",{key:"25b24dfc50827137fb7f8250bb4cdb30743b3d4d",class:"progress-indicator__circle-value",cx:a+e,cy:a+e,r:a,fill:"none","stroke-width":e,"stroke-dasharray":t,"stroke-dashoffset":n}))))}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-raised-default)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-border-default);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}"}},[1,"swirl-progress-indicator",{label:[1],size:[1],value:[2],variant:[1]}]);function n(){"undefined"!=typeof customElements&&["swirl-progress-indicator"].forEach((r=>{"swirl-progress-indicator"===r&&(customElements.get(a(r))||customElements.define(a(r),t))}))}export{t as S,n as d}
+import{proxyCustomElement as r,HTMLElement as i,h as e,Host as s,transformTag as a}from"@stencil/core/internal/client";import{c as o}from"./index2.js";const t=r(class extends i{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.size="m",this.value=0,this.variant="bar"}render(){const r=o("progress-indicator",`progress-indicator--size-${this.size}`,`progress-indicator--variant-${this.variant}`),i="m"===this.size?4:2,a="m"===this.size?20:10,t=Math.round(2*a*Math.PI),n=Math.round(t*((100-this.value)/100));return e(s,{key:"3332f87c930010a520a6b758021ba9366b9154f7",class:this.variant},"bar"===this.variant&&e("progress",{key:"c9208f5a3446062416beca92a37f21f0ccc85997","aria-label":this.label,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":this.value,class:r,max:100,value:this.value}),"circle"===this.variant&&e("span",{key:"cb226c356163fd6923d0a32e28964d4a5c34da84",role:"progressbar","aria-label":this.label,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":this.value,class:r},e("svg",{key:"da13ed312ec39c28d7042a012805d0cec1a0f5d4",class:"progress-indicator__circle",focusable:"false",viewBox:`0 0 ${2*(a+i)} ${2*(a+i)}`},e("circle",{key:"56c9850941cb429989b560ebcbbb428bd3728acb",class:"progress-indicator__circle-background",cx:a+i,cy:a+i,r:a,fill:"none","stroke-width":i}),e("circle",{key:"86de0d4d73b89bd21477009642aafc2b0204d2a0",class:"progress-indicator__circle-value",cx:a+i,cy:a+i,r:a,fill:"none","stroke-width":i,"stroke-dasharray":t,"stroke-dashoffset":n}))))}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-raised-default)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-border-default);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}"}},[1,"swirl-progress-indicator",{label:[1],size:[1],value:[2],variant:[1]}]);function n(){"undefined"!=typeof customElements&&["swirl-progress-indicator"].forEach((r=>{"swirl-progress-indicator"===r&&(customElements.get(a(r))||customElements.define(a(r),t))}))}export{t as S,n as d}

package/dist/components/swirl-radio-group.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as e,createEvent as s,h as r,Host as t,transformTag as a}from"@stencil/core/internal/client";const o=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.valueChange=s(this,"valueChange",7),this.componentLoaded=!1,this.onRadioValueChange=i=>{i.stopPropagation();const e=i.target;!0!==e.checked&&"true"!==e.checked||(this.value=e.value,this.valueChange.emit(e.value),this.radioButtons.forEach((i=>{i!==e&&(i.checked=!1)})))}}connectedCallback(){this.componentLoaded&&this.addValueChangeListeners()}componentDidLoad(){this.radioButtons=Array.from(this.el.querySelectorAll("swirl-radio")),this.initValue(),this.addValueChangeListeners(),this.componentLoaded=!0}disconnectedCallback(){this.removeValueChangeListeners()}initValue(){if(void 0===this.value)return;const i=this.radioButtons.find((i=>i.value===this.value));i&&(i.checked=!0)}addValueChangeListeners(){this.radioButtons.forEach((i=>{i.addEventListener("valueChange",this.onRadioValueChange)}))}removeValueChangeListeners(){this.radioButtons?.forEach((i=>{i.removeEventListener("valueChange",this.onRadioValueChange)}))}render(){return r(t,{key:"6c74a305d8ab637a82b606607c0effc58b0ccad5","aria-describedby":this.swirlAriaDescribedby,role:"radiogroup"},r("div",{key:"cfa7f35c9186bd72381125c6f666f60946edfd6b",class:"radio-group"},r("slot",{key:"ec74086e8e3393c6de0d4510deb0285f0c0994a2"})))}get el(){return this}static get style(){return".sc-swirl-radio-group-h{display:block}.sc-swirl-radio-group-h *.sc-swirl-radio-group{box-sizing:border-box}.radio-group.sc-swirl-radio-group{display:flex;flex-direction:column;gap:var(--s-space-12)}"}},[262,"swirl-radio-group",{swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1537]}]),c=o,d=function(){"undefined"!=typeof customElements&&["swirl-radio-group"].forEach((i=>{"swirl-radio-group"===i&&(customElements.get(a(i))||customElements.define(a(i),o))}))};export{c as SwirlRadioGroup,d as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as i,createEvent as s,h as r,Host as t,transformTag as a}from"@stencil/core/internal/client";const o=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.valueChange=s(this,"valueChange",7),this.componentLoaded=!1,this.onRadioValueChange=e=>{e.stopPropagation();const i=e.target;!0!==i.checked&&"true"!==i.checked||(this.value=i.value,this.valueChange.emit(i.value),this.radioButtons.forEach((e=>{e!==i&&(e.checked=!1)})))}}connectedCallback(){this.componentLoaded&&this.addValueChangeListeners()}componentDidLoad(){this.radioButtons=Array.from(this.el.querySelectorAll("swirl-radio")),this.initValue(),this.addValueChangeListeners(),this.componentLoaded=!0}disconnectedCallback(){this.removeValueChangeListeners()}initValue(){if(void 0===this.value)return;const e=this.radioButtons.find((e=>e.value===this.value));e&&(e.checked=!0)}addValueChangeListeners(){this.radioButtons.forEach((e=>{e.addEventListener("valueChange",this.onRadioValueChange)}))}removeValueChangeListeners(){this.radioButtons?.forEach((e=>{e.removeEventListener("valueChange",this.onRadioValueChange)}))}render(){return r(t,{key:"66b84ff7c900dd00ed77e0af2cc35a268d589ad0","aria-describedby":this.swirlAriaDescribedby,role:"radiogroup"},r("div",{key:"c8c9aa702433e20781478c981ed56b47e3ceb5e4",class:"radio-group"},r("slot",{key:"319669a0d74d23f8598104de48c805032e0e3197"})))}get el(){return this}static get style(){return".sc-swirl-radio-group-h{display:block}.sc-swirl-radio-group-h *.sc-swirl-radio-group{box-sizing:border-box}.radio-group.sc-swirl-radio-group{display:flex;flex-direction:column;gap:var(--s-space-12)}"}},[262,"swirl-radio-group",{swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1537]}]),d=o,c=function(){"undefined"!=typeof customElements&&["swirl-radio-group"].forEach((e=>{"swirl-radio-group"===e&&(customElements.get(a(e))||customElements.define(a(e),o))}))};export{d as SwirlRadioGroup,c as defineCustomElement}

package/dist/components/swirl-radio.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as r,createEvent as a,h as o,Host as d,transformTag as s}from"@stencil/core/internal/client";import{c as e}from"./index2.js";import{d as l}from"./swirl-icon-help2.js";import{d as c}from"./swirl-tooltip2.js";import{d as t}from"./swirl-visually-hidden2.js";const n=i(class extends r{constructor(i){super(),!1!==i&&this.__registerHost(),this.valueChange=a(this,"valueChange",7),this.checked=!1,this.disabled=!1,this.variant="default",this.onChange=()=>{this.checked=!0,this.valueChange.emit(this.value)}}getAriaCheckedLabel(i,r){return i?"true":r?"false":"mixed"}render(){const i=!1===this.checked||"false"===this.checked,r=!0===this.checked||"true"===this.checked,a=this.getAriaCheckedLabel(r,i),s=this.invalid,l=e("radio","radio--variant-"+this.variant,{"radio--checked":r,"radio--disabled":this.disabled,"radio--invalid":this.invalid,"radio--unchecked":i});return o(d,{key:"6ae2ed2df56b3c1d7cb34e86e4fa2a62563ab95d",style:{width:"card"===this.variant?"100%":void 0}},o("label",{key:"4e27fba290d056a9654c0c14e4e3b3506324756f",class:l,htmlFor:this.inputId},o("span",{key:"2deafc430b2b40dfafb863a017d01acd6d6b77ab",class:"radio__control"},o("swirl-visually-hidden",{key:"32e6d78b1723fb17b98e882e1d49c8994e0b63d0"},o("input",{key:"21b7fff70e84dbd228f88305924b8b29b5e58089","aria-checked":a,"aria-invalid":s,checked:r,class:"radio__input",disabled:this.disabled,id:this.inputId,name:this.inputName,onChange:this.onChange,type:"radio",value:this.value})),o("span",{key:"e1f9252ef9c7460bf9d0689b7db2b6eb3359583a","aria-hidden":"true",class:"radio__box"})),o("span",{key:"7323db066e679a7cb6d1c0e3518fbf94afff5170",class:"radio__label-container"},this.label&&o("span",{key:"c7539cbc3ffcd027a3481c0fd4679774b78f79c7",class:"radio__label"},this.label,this.tooltip&&o("swirl-tooltip",{key:"c3621889d24d7b37edfe41493be5d4b84f2790e6",content:this.tooltip,position:"top"},o("swirl-icon-help",{key:"3528944b98e966a4b2fb0053605d7bafcc49c697",color:"default",size:20,tabIndex:0}))),this.description&&o("span",{key:"9557a2966076d4bb33235a1ff6080d8ecf37b51d",class:"radio__description",innerHTML:this.description}))))}static get style(){return'.sc-swirl-radio-h{display:inline-flex}.sc-swirl-radio-h *.sc-swirl-radio{box-sizing:border-box}.radio.sc-swirl-radio{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer;align-items:center}.radio.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),       0 0 0 0.1875rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio{width:100%;padding:var(--s-space-16);border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface)}.radio--variant-card.sc-swirl-radio:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default),       0 0 0 0.25rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:none}.radio--variant-card.sc-swirl-radio:hover:not(.radio--disabled){background-color:var(--s-state-hovered)}.radio--variant-card.sc-swirl-radio:active:not(.radio--disabled){background-color:var(--s-state-pressed)}.radio--variant-card.radio--checked.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-highlight)}.radio--variant-card.radio--invalid.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-critical)}.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:"";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio,.radio--invalid.radio--indeterminate.sc-swirl-radio .radio__box.sc-swirl-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-swirl-radio{cursor:default}.radio--disabled.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:transparent}.radio--disabled.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__description.sc-swirl-radio,.radio--disabled.sc-swirl-radio .radio__label.sc-swirl-radio{color:var(--s-text-disabled)}.radio__control.sc-swirl-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__control.sc-swirl-radio{width:1.375rem;height:1.375rem}}.radio__box.sc-swirl-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-swirl-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-swirl-radio{display:flex;align-items:center;font-weight:var(--s-font-weight-medium);gap:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__label.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.radio__description.sc-swirl-radio{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__description.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}'}},[2,"swirl-radio",{checked:[1032],description:[1],disabled:[4],inputId:[1,"input-id"],inputName:[1,"input-name"],invalid:[4],label:[1],tooltip:[1],value:[1],variant:[1]}]),b=n,h=function(){"undefined"!=typeof customElements&&["swirl-radio","swirl-icon-help","swirl-tooltip","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-radio":customElements.get(s(i))||customElements.define(s(i),n);break;case"swirl-icon-help":customElements.get(s(i))||l();break;case"swirl-tooltip":customElements.get(s(i))||c();break;case"swirl-visually-hidden":customElements.get(s(i))||t()}}))};export{b as SwirlRadio,h as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as r,createEvent as a,h as o,Host as d,transformTag as s}from"@stencil/core/internal/client";import{c as e}from"./index2.js";import{d as c}from"./swirl-icon-help2.js";import{d as l}from"./swirl-tooltip2.js";import{d as t}from"./swirl-visually-hidden2.js";const n=i(class extends r{constructor(i){super(),!1!==i&&this.__registerHost(),this.valueChange=a(this,"valueChange",7),this.checked=!1,this.disabled=!1,this.variant="default",this.onChange=()=>{this.checked=!0,this.valueChange.emit(this.value)}}getAriaCheckedLabel(i,r){return i?"true":r?"false":"mixed"}render(){const i=!1===this.checked||"false"===this.checked,r=!0===this.checked||"true"===this.checked,a=this.getAriaCheckedLabel(r,i),s=this.invalid,c=e("radio","radio--variant-"+this.variant,{"radio--checked":r,"radio--disabled":this.disabled,"radio--invalid":this.invalid,"radio--unchecked":i});return o(d,{key:"9e9eb7b8234659816e3c8a2e596efc9624f5ee73",style:{width:"card"===this.variant?"100%":void 0}},o("label",{key:"50c82d86f0a5ce41e0b514a38d4c9e1cbd659ef0",class:c,htmlFor:this.inputId},o("span",{key:"d34f60ff60795bdfa2b030a4c7238f0d9dd3798f",class:"radio__control"},o("swirl-visually-hidden",{key:"b5138af01fb967c48398b825aa1d373e53b700ca"},o("input",{key:"187b2fc0bee95842f1926dce352fce6ec7200b33","aria-checked":a,"aria-invalid":s,checked:r,class:"radio__input",disabled:this.disabled,id:this.inputId,name:this.inputName,onChange:this.onChange,type:"radio",value:this.value})),o("span",{key:"6e51b1e57978d2944f9ae62d4bc2dcd847b8a173","aria-hidden":"true",class:"radio__box"})),o("span",{key:"35cf1a4200d4b520800dc0019fb1925acf1407c1",class:"radio__label-container"},this.label&&o("span",{key:"15cde4799d5df91a16c1625caccb8226c6776d84",class:"radio__label"},this.label,this.tooltip&&o("swirl-tooltip",{key:"5b444945561044fb812b285fbbe614189e598660",content:this.tooltip,position:"top"},o("swirl-icon-help",{key:"3bc3282bd16c730cc7a7eb145cfbd0c6ff4eb367",color:"default",size:20,tabIndex:0}))),this.description&&o("span",{key:"b8b66eddc317029e9e14d8dfccc9d4fcdb18d9ab",class:"radio__description",innerHTML:this.description}))))}static get style(){return'.sc-swirl-radio-h{display:inline-flex}.sc-swirl-radio-h *.sc-swirl-radio{box-sizing:border-box}.radio.sc-swirl-radio{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer;align-items:center}.radio.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),       0 0 0 0.1875rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio{width:100%;padding:var(--s-space-16);border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface)}.radio--variant-card.sc-swirl-radio:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default),       0 0 0 0.25rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:none}.radio--variant-card.sc-swirl-radio:hover:not(.radio--disabled){background-color:var(--s-state-hovered)}.radio--variant-card.sc-swirl-radio:active:not(.radio--disabled){background-color:var(--s-state-pressed)}.radio--variant-card.radio--checked.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-highlight)}.radio--variant-card.radio--invalid.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-critical)}.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:"";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio,.radio--invalid.radio--indeterminate.sc-swirl-radio .radio__box.sc-swirl-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-swirl-radio{cursor:default}.radio--disabled.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:transparent}.radio--disabled.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__description.sc-swirl-radio,.radio--disabled.sc-swirl-radio .radio__label.sc-swirl-radio{color:var(--s-text-disabled)}.radio__control.sc-swirl-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__control.sc-swirl-radio{width:1.375rem;height:1.375rem}}.radio__box.sc-swirl-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-swirl-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-swirl-radio{display:flex;align-items:center;font-weight:var(--s-font-weight-medium);gap:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__label.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.radio__description.sc-swirl-radio{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__description.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}'}},[2,"swirl-radio",{checked:[1032],description:[1],disabled:[4],inputId:[1,"input-id"],inputName:[1,"input-name"],invalid:[4],label:[1],tooltip:[1],value:[1],variant:[1]}]),h=n,b=function(){"undefined"!=typeof customElements&&["swirl-radio","swirl-icon-help","swirl-tooltip","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-radio":customElements.get(s(i))||customElements.define(s(i),n);break;case"swirl-icon-help":customElements.get(s(i))||c();break;case"swirl-tooltip":customElements.get(s(i))||l();break;case"swirl-visually-hidden":customElements.get(s(i))||t()}}))};export{h as SwirlRadio,b as defineCustomElement}

package/dist/components/swirl-resource-list-file-item.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as i,createEvent as s,h as r,Host as t,transformTag as l}from"@stencil/core/internal/client";import{c as o}from"./index2.js";import{D as c}from"./media-query.service.js";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-error2.js";import{d as m}from"./swirl-inline-error2.js";import{d as f}from"./swirl-spinner2.js";import{d}from"./swirl-visually-hidden2.js";const u=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.remove=s(this,"remove",7),this.icon="<swirl-icon-file></swirl-icon-file>",this.removeButtonLabel="Remove file",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=c.subscribe((e=>{this.forceIconProps(e)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(e){if(!this.iconEl)return;const i=this.iconEl.children[0];i?.setAttribute("size",e?"20":"24")}render(){const e=!!this.errorMessage,i=!e&&!!this.description,s=!e&&this.loading,l=this.removable&&!s,c=this.el.closest('[role="grid"]')?"row":"listitem",a="row"===c?"gridcell":void 0,n=o("resource-list-file-item",{"resource-list-file-item--has-control":s||l});return r(t,{key:"e2a3b8bb9fa4d440682d94058a81c5a198a2582b",role:c},r("div",{key:"d056d791a53b15f9cd6cc4c90488b656763ea3f3",class:n,part:"resource-list-file-item",role:a},r("span",{key:"92843cf17ff32187247e26f758fde864002a1c98",class:"resource-list-file-item__icon",innerHTML:this.icon,ref:e=>this.iconEl=e}),r("span",{key:"0e9ffdfe1bbd4a699a85578a2e19051632af615c",class:"resource-list-file-item__label-container"},r("span",{key:"ed70e7578691e7a4274f6a3608f02516405bc99b",class:"resource-list-file-item__label",id:"label"},this.label),i&&r("span",{key:"f824a6a08dbb4051486f0e1c460dbad290bb98be",class:"resource-list-file-item__description"},this.description),e&&r("span",{key:"d17b52fc07e94ab3aa44944b9f969bd5c3a47c13","aria-live":"polite",class:"resource-list-file-item__error-message"},r("swirl-inline-error",{key:"251e031e359f914c8dea99d5f4f6b836a56fae2f",message:this.errorMessage,size:"s"}))),s&&r("span",{key:"1b5e82d02a1d8a7052ebf6d1ca7e857dcb872c91",class:"resource-list-file-item__spinner"},r("swirl-spinner",{key:"e62ad13cff422453a372f0e20fc5cb1246f5d6ee",size:"s"})),l&&r("span",{key:"0c8ba23a8aa8b26a13a389a560d8bcf70b1fb61a",class:"resource-list-file-item__remove-button"},r("swirl-button",{key:"cb03f4e1050562d5068a6982d7a13b2b023b3b27",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.removeButtonLabel,onClick:this.remove.emit}))))}get el(){return this}static get style(){return'.sc-swirl-resource-list-file-item-h{display:block;width:100%}.sc-swirl-resource-list-file-item-h *.sc-swirl-resource-list-file-item{box-sizing:border-box}.resource-list-file-item.sc-swirl-resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item.sc-swirl-resource-list-file-item:focus{outline:none}.resource-list-file-item.sc-swirl-resource-list-file-item:focus-visible{background-color:var(--s-background-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item.sc-swirl-resource-list-file-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-file-item--has-control.sc-swirl-resource-list-file-item .resource-list-file-item__label-container.sc-swirl-resource-list-file-item{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon.sc-swirl-resource-list-file-item{width:1.5rem;height:1.5rem;color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item__icon.sc-swirl-resource-list-file-item{width:1.25rem;height:1.25rem}}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-file-item__label.sc-swirl-resource-list-file-item{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description.sc-swirl-resource-list-file-item{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message.sc-swirl-resource-list-file-item{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}'}},[2,"swirl-resource-list-file-item",{description:[1],errorMessage:[1,"error-message"],icon:[1],label:[1],loading:[4],removable:[4],removeButtonLabel:[1,"remove-button-label"]}]),h=u,b=function(){"undefined"!=typeof customElements&&["swirl-resource-list-file-item","swirl-button","swirl-icon-error","swirl-inline-error","swirl-spinner","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-resource-list-file-item":customElements.get(l(e))||customElements.define(l(e),u);break;case"swirl-button":customElements.get(l(e))||a();break;case"swirl-icon-error":customElements.get(l(e))||n();break;case"swirl-inline-error":customElements.get(l(e))||m();break;case"swirl-spinner":customElements.get(l(e))||f();break;case"swirl-visually-hidden":customElements.get(l(e))||d()}}))};export{h as SwirlResourceListFileItem,b as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as i,createEvent as s,h as r,Host as t,transformTag as l}from"@stencil/core/internal/client";import{c as o}from"./index2.js";import{D as c}from"./media-query.service.js";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-error2.js";import{d as m}from"./swirl-inline-error2.js";import{d as f}from"./swirl-spinner2.js";import{d}from"./swirl-visually-hidden2.js";const u=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.remove=s(this,"remove",7),this.icon="<swirl-icon-file></swirl-icon-file>",this.removeButtonLabel="Remove file",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=c.subscribe((e=>{this.forceIconProps(e)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(e){if(!this.iconEl)return;const i=this.iconEl.children[0];i?.setAttribute("size",e?"20":"24")}render(){const e=!!this.errorMessage,i=!e&&!!this.description,s=!e&&this.loading,l=this.removable&&!s,c=this.el.closest('[role="grid"]')?"row":"listitem",a="row"===c?"gridcell":void 0,n=o("resource-list-file-item",{"resource-list-file-item--has-control":s||l});return r(t,{key:"26bc9201d9e63e2a4774a0f78d1f66ae75069604",role:c},r("div",{key:"7f5380289720aff7a8778edf82a88bc4448c3153",class:n,part:"resource-list-file-item",role:a},r("span",{key:"90543ab330b1d502c90c79e740f3c4213544ba40",class:"resource-list-file-item__icon",innerHTML:this.icon,ref:e=>this.iconEl=e}),r("span",{key:"e34294a022acf92452472a2069954d2e09a41a33",class:"resource-list-file-item__label-container"},r("span",{key:"7383826d1b00e2306f6ccffd8dfb19cb8cfdf617",class:"resource-list-file-item__label",id:"label"},this.label),i&&r("span",{key:"7c931f1f384dd930182349cc2da87ba9c7403524",class:"resource-list-file-item__description"},this.description),e&&r("span",{key:"9e36ea9426fb50ec640c94ada0b9c137f07887eb","aria-live":"polite",class:"resource-list-file-item__error-message"},r("swirl-inline-error",{key:"e72147153ddb68b0fa774d70014b7f64dfc350d5",message:this.errorMessage,size:"s"}))),s&&r("span",{key:"43984c82ef92d9733d0765469093339935c6d916",class:"resource-list-file-item__spinner"},r("swirl-spinner",{key:"780e2c810e7987a93a5a172f37c3b873ee6a0f7d",size:"s"})),l&&r("span",{key:"d739448ab4ace92d89132bdc60a09ca1a0f13272",class:"resource-list-file-item__remove-button"},r("swirl-button",{key:"2b4e3a4dac606f89032fea837451c63fd5d0ee01",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.removeButtonLabel,onClick:this.remove.emit}))))}get el(){return this}static get style(){return'.sc-swirl-resource-list-file-item-h{display:block;width:100%}.sc-swirl-resource-list-file-item-h *.sc-swirl-resource-list-file-item{box-sizing:border-box}.resource-list-file-item.sc-swirl-resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item.sc-swirl-resource-list-file-item:focus{outline:none}.resource-list-file-item.sc-swirl-resource-list-file-item:focus-visible{background-color:var(--s-background-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item.sc-swirl-resource-list-file-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-file-item--has-control.sc-swirl-resource-list-file-item .resource-list-file-item__label-container.sc-swirl-resource-list-file-item{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon.sc-swirl-resource-list-file-item{width:1.5rem;height:1.5rem;color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item__icon.sc-swirl-resource-list-file-item{width:1.25rem;height:1.25rem}}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-file-item__label.sc-swirl-resource-list-file-item{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description.sc-swirl-resource-list-file-item{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message.sc-swirl-resource-list-file-item{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}'}},[2,"swirl-resource-list-file-item",{description:[1],errorMessage:[1,"error-message"],icon:[1],label:[1],loading:[4],removable:[4],removeButtonLabel:[1,"remove-button-label"]}]),h=u,p=function(){"undefined"!=typeof customElements&&["swirl-resource-list-file-item","swirl-button","swirl-icon-error","swirl-inline-error","swirl-spinner","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-resource-list-file-item":customElements.get(l(e))||customElements.define(l(e),u);break;case"swirl-button":customElements.get(l(e))||a();break;case"swirl-icon-error":customElements.get(l(e))||n();break;case"swirl-inline-error":customElements.get(l(e))||m();break;case"swirl-spinner":customElements.get(l(e))||f();break;case"swirl-visually-hidden":customElements.get(l(e))||d()}}))};export{h as SwirlResourceListFileItem,p as defineCustomElement}

package/dist/components/swirl-resource-list-item.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as r,Host as t,transformTag as o}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{D as c}from"./media-query.service.js";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-check-strong2.js";import{d as m}from"./swirl-icon-drag-handle2.js";import{d as u}from"./swirl-popover-trigger2.js";import{d}from"./swirl-tooltip2.js";import{v as h}from"./v4.js";const w=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.toggleDrag=i(this,"toggleDrag",7),this.valueChange=i(this,"valueChange",7),this.checked=!1,this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move item",this.interactive=!0,this.labelWeight="medium",this.labelTooltipPosition="top",this.menuTriggerLabel="Options",this.hasMedia=!1,this.iconSize=24,this.elementId=h(),this.mediaQueryUnsubscribe=()=>{},this.onClick=()=>{this.selectable&&(this.checked=!this.checked,this.valueChange.emit(this.checked))},this.onBlur=()=>{this.makeControlUnfocusable()},this.onFocus=()=>{this.makeControlFocusable()},this.onMenuTriggerClick=e=>{this.disabled&&!this.href&&e.stopPropagation()},this.onDragHandleKeyDown=e=>{"Space"!==e.code&&"Enter"!==e.code||(e.preventDefault(),this.toggleDrag.emit(this.el))},this.onControlClick=e=>{e.preventDefault(),e.stopPropagation()}}componentWillLoad(){this.updateMediaState()}componentDidLoad(){this.parentSemantics=this.el.closest("swirl-resource-list")?.semantics,this.mediaQueryUnsubscribe=c.subscribe((e=>{this.forceIconProps(e),this.updateIconSize(e)})),this.makeControlUnfocusable(),this.menuTriggerId&&console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs')}disconnectedCallback(){this.mediaQueryUnsubscribe()}get hasBadges(){return!!this.el.querySelector("[slot='badges']")}get showMeta(){return(!!this.meta||this.hasBadges)&&!this.selectable}forceIconProps(e){const s=this.iconEl?.children[0];s?.setAttribute("size",e?"20":"24")}updateIconSize(e){this.iconSize=e?20:24}updateMediaState(){const e=!!this.el.querySelector('[slot="media"]');e!==this.hasMedia&&(this.hasMedia=e)}getControl(){return this.el.querySelector('[slot="control"] button')}makeControlFocusable(){if("grid"!==this.parentSemantics)return;const e=this.getControl();e&&(e.tabIndex=0)}makeControlUnfocusable(){if("grid"!==this.parentSemantics)return;const e=this.getControl();e&&(e.tabIndex=-1)}render(){const e=this.interactive||this.selectable?this.href&&!this.selectable?"a":"button":"div",s=this.disabled&&!this.href,i=this.hasBadges,o=this.el.querySelector("[slot='control']"),c=!!this.menuTriggerId||o,a=this.interactive&&this.href?this.href:void 0,n=o&&(!!this.meta||i),m=!!this.menuTriggerId&&!this.meta&&!this.selectable,u=this.showMeta,d=this.swirlAriaLabel?this.swirlAriaLabel:this.label,h=this.selectable?this.checked+"":void 0,w=this.interactive&&this.selectable?"checkbox":void 0,b=this.el.closest('[role="grid"]')?"row":"listitem",p="row"===b?"gridcell":void 0,g={minHeight:this.labelMinHeight??void 0},v=()=>r("span",{key:"c396afdaa49551b5e5023ea3dc1e638b5aba7873",class:"resource-list-item__label",id:this.elementId,innerHTML:this.allowHtml?this.label:void 0,style:{"-webkit-line-clamp":this.labelWrapMaxLines?this.labelWrapMaxLines+"":void 0}},!this.allowHtml&&this.label),f=l("resource-list-item","resource-list-item--label-weight-"+this.labelWeight,{"resource-list-item--active":this.active,"resource-list-item--checked":this.checked,"resource-list-item--compact":this.compact,"resource-list-item--disabled":this.disabled,"resource-list-item--draggable":this.allowDrag,"resource-list-item--dragging":this.dragging,"resource-list-item--has-control":o,"resource-list-item--has-menu":c,"resource-list-item--hide-divider":this.hideDivider,"resource-list-item--interactive":this.interactive||this.selectable,"resource-list-item--selectable":this.selectable,"resource-list-item--show-control-on-focus":n,"resource-list-item--show-meta":u,"resource-list-item--wrap-description":this.descriptionWrap,"resource-list-item--wrap-label":this.labelWrap,"resource-list-item--wrap-label-max-lines":this.labelWrapMaxLines});return r(t,{key:"ec264aca3043fe1569a50a8ecfcf7a7739acef30",role:b},r("div",{key:"3751bb7e69507e219d8543ca180153d2d21b2941",class:f,role:p,onClick:this.onClick},r(e,{key:"41f7ddb0de62ed56897f1a43387bf3a6f65d497c","aria-checked":h,"aria-current":this.swirlAriaCurrent,"aria-disabled":s?"true":void 0,"aria-label":d,"aria-labelledby":this.swirlAriaLabel?void 0:this.elementId,class:"resource-list-item__content",style:{alignItems:this.alignItems},href:a,disabled:s,onBlur:this.onBlur,onFocus:this.onFocus,part:"resource-list-item__content",role:w,tabIndex:0,type:"button"===e?"button":void 0},this.hasMedia&&r("span",{key:"e33312af2a4977c7e222daba839bb20a00c60343",class:"resource-list-item__media"},r("slot",{key:"a060f2fe141337a4c9bdd032a006556fad0bbfbc",name:"media"})),r("span",{key:"ba50de62fc050b9389fe366fa98cc5e38b84e72c",class:"resource-list-item__label-container",style:g},this.labelTooltip?r("swirl-tooltip",{content:this.labelTooltip,position:this.labelTooltipPosition},v()):v(),this.description&&r("span",{key:"24f0943d7e15e528e9b882c2bc5c2bd302fc2193",class:"resource-list-item__description",innerHTML:this.allowHtml?this.description:void 0},!this.allowHtml&&this.description))),this.selectable&&r("span",{key:"cfad1f6a4ca7765dae692f2875fc5c54558c4d02","aria-hidden":"true",class:"resource-list-item__checkbox"},r("span",{key:"9a0680f6c03b61245a8787baecd2a24e4320cc32",class:"resource-list-item__checkbox-icon"},this.checked&&r("swirl-icon-check-strong",{key:"dabd22f0885cc94139f6657a6f70f28089f70353"}))),u&&r("span",{key:"19d4338f565d950b2a9abb94c45e8c0dff2b64dc",class:"resource-list-item__meta"},this.meta&&r("span",{key:"b355e780629fbb4736b3b26226569630d8437162",class:"resource-list-item__meta-text"},this.meta),r("span",{key:"598a330e15f538376960c18b1ddad5577d693d04",class:"resource-list-item__badges"},r("slot",{key:"da5cd4f025c25e364afbf01fcc9b604abea25a71",name:"badges"}))),r("span",{key:"edec2245d3cb0a92b3095addd5b6648d78a74238",class:"resource-list-item__control",onClick:this.onControlClick},r("slot",{key:"7786f1c6b3ba5dc221879e634a880a93521ee70e",name:"control"})),m&&r("swirl-popover-trigger",{key:"9e3eb66dd185f0fa189652dd9768efec3893b360",swirlPopover:this.menuTriggerId},r("swirl-button",{key:"39ed08f301e291147ac2a3d3567a90ef10c9d97c","aria-disabled":s?"true":void 0,class:"resource-list-item__menu-trigger",disabled:s,hideLabel:!0,icon:"<swirl-icon-more-horizontal></swirl-icon-more-horizontal>",intent:"primary",label:this.menuTriggerLabel,onClick:this.onMenuTriggerClick}))),this.allowDrag&&r("button",{key:"370aacd197f9e0f2b79844cae49aca28ca115ea4","aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"resource-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,type:"button"},r("swirl-icon-drag-handle",{key:"96b04c74a41e95c59f5ebbc7acede90b46788a82",size:this.iconSize})))}get el(){return this}static get style(){return'.sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.swirl-resource-list-item--drag.sc-swirl-resource-list-item-h{border-radius:var(--s-border-radius-sm);background-color:var(--s-translucent-medium-pressed)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;padding:var(--s-space-12) var(--s-space-8);gap:var(--s-space-12);border-radius:var(--s-border-radius-sm);background-color:var(--swirl-resource-list-item-background-default);--swirl-badge-border-color:transparent}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--swirl-resource-list-item-background-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.resource-list-item.sc-swirl-resource-list-item:not(.resource-list-item--has-control) .resource-list-item__control.sc-swirl-resource-list-item{display:none}.resource-list-item--interactive.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.resource-list-item--disabled.sc-swirl-resource-list-item{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled),.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item{--swirl-badge-border-color:var(     --swirl-resource-list-item-background-hovered   );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2rem}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--label-weight-semibold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item--label-weight-bold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-bold)}@media (hover: hover){.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1;position:static;transform:none;margin:calc(-1 * var(--s-space-4)) 0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:0;padding-right:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:calc(-1 * var(--s-space-16));padding-right:var(--s-space-16);transition:margin 0.1s}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0;position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%);transition:opacity 0.1s}}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-state-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),     0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-state-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label-max-lines.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:transparent;display:flex;width:100%;min-width:0;margin:0;padding:0;align-items:flex-start;border:none;color:var(--s-text-default);background:none;font:inherit;line-height:var(--s-line-height-sm);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus,.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;height:100%;min-width:0;min-height:3rem;padding-right:var(--s-space-16);justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{align-self:center}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox.sc-swirl-resource-list-item{right:auto;left:calc(var(--s-space-16) - var(--s-space-2))}}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item::part(icon),.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item [part~="icon"]{width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start;gap:var(--s-space-2)}.resource-list-item__meta.sc-swirl-resource-list-item:not(:has(.resource-list-item__meta-text)){align-self:center}.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);white-space:nowrap}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-sm);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}'}},[262,"swirl-resource-list-item",{active:[4],allowDrag:[4,"allow-drag"],allowHtml:[4,"allow-html"],checked:[1028],compact:[4],description:[1],descriptionWrap:[4,"description-wrap"],disabled:[4],dragging:[4],dragHandleDescription:[1,"drag-handle-description"],dragHandleLabel:[1,"drag-handle-label"],hideDivider:[4,"hide-divider"],href:[1],interactive:[4],label:[1],labelWeight:[1,"label-weight"],labelWrap:[4,"label-wrap"],labelWrapMaxLines:[2,"label-wrap-max-lines"],labelMinHeight:[1,"label-min-height"],labelTooltip:[1,"label-tooltip"],labelTooltipPosition:[1,"label-tooltip-position"],menuTriggerId:[1,"menu-trigger-id"],menuTriggerLabel:[1,"menu-trigger-label"],meta:[1],selectable:[4],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaLabel:[1,"swirl-aria-label"],value:[1],alignItems:[1,"align-items"],hasMedia:[32],iconSize:[32]}]),b=w,p=function(){"undefined"!=typeof customElements&&["swirl-resource-list-item","swirl-button","swirl-icon-check-strong","swirl-icon-drag-handle","swirl-popover-trigger","swirl-tooltip"].forEach((e=>{switch(e){case"swirl-resource-list-item":customElements.get(o(e))||customElements.define(o(e),w);break;case"swirl-button":customElements.get(o(e))||a();break;case"swirl-icon-check-strong":customElements.get(o(e))||n();break;case"swirl-icon-drag-handle":customElements.get(o(e))||m();break;case"swirl-popover-trigger":customElements.get(o(e))||u();break;case"swirl-tooltip":customElements.get(o(e))||d()}}))};export{b as SwirlResourceListItem,p as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as r,Host as t,transformTag as o}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{D as c}from"./media-query.service.js";import{d as a}from"./swirl-button2.js";import{d as n}from"./swirl-icon-check-strong2.js";import{d as m}from"./swirl-icon-drag-handle2.js";import{d as u}from"./swirl-popover-trigger2.js";import{d}from"./swirl-tooltip2.js";import{v as h}from"./v4.js";const b=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.toggleDrag=i(this,"toggleDrag",7),this.valueChange=i(this,"valueChange",7),this.checked=!1,this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move item",this.interactive=!0,this.labelWeight="medium",this.labelTooltipPosition="top",this.menuTriggerLabel="Options",this.hasMedia=!1,this.iconSize=24,this.elementId=h(),this.mediaQueryUnsubscribe=()=>{},this.onClick=()=>{this.selectable&&(this.checked=!this.checked,this.valueChange.emit(this.checked))},this.onBlur=()=>{this.makeControlUnfocusable()},this.onFocus=()=>{this.makeControlFocusable()},this.onMenuTriggerClick=e=>{this.disabled&&!this.href&&e.stopPropagation()},this.onDragHandleKeyDown=e=>{"Space"!==e.code&&"Enter"!==e.code||(e.preventDefault(),this.toggleDrag.emit(this.el))},this.onControlClick=e=>{e.preventDefault(),e.stopPropagation()}}componentWillLoad(){this.updateMediaState()}componentDidLoad(){this.parentSemantics=this.el.closest("swirl-resource-list")?.semantics,this.mediaQueryUnsubscribe=c.subscribe((e=>{this.forceIconProps(e),this.updateIconSize(e)})),this.makeControlUnfocusable(),this.menuTriggerId&&console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs')}disconnectedCallback(){this.mediaQueryUnsubscribe()}get hasBadges(){return!!this.el.querySelector("[slot='badges']")}get showMeta(){return(!!this.meta||this.hasBadges)&&!this.selectable}forceIconProps(e){const s=this.iconEl?.children[0];s?.setAttribute("size",e?"20":"24")}updateIconSize(e){this.iconSize=e?20:24}updateMediaState(){const e=!!this.el.querySelector('[slot="media"]');e!==this.hasMedia&&(this.hasMedia=e)}getControl(){return this.el.querySelector('[slot="control"] button')}makeControlFocusable(){if("grid"!==this.parentSemantics)return;const e=this.getControl();e&&(e.tabIndex=0)}makeControlUnfocusable(){if("grid"!==this.parentSemantics)return;const e=this.getControl();e&&(e.tabIndex=-1)}render(){const e=this.interactive||this.selectable?this.href&&!this.selectable?"a":"button":"div",s=this.disabled&&!this.href,i=this.hasBadges,o=this.el.querySelector("[slot='control']"),c=!!this.menuTriggerId||o,a=this.interactive&&this.href?this.href:void 0,n=o&&(!!this.meta||i),m=!!this.menuTriggerId&&!this.meta&&!this.selectable,u=this.showMeta,d=this.swirlAriaLabel?this.swirlAriaLabel:this.label,h=this.selectable?this.checked+"":void 0,b=this.interactive&&this.selectable?"checkbox":void 0,w=this.el.closest('[role="grid"]')?"row":"listitem",p="row"===w?"gridcell":void 0,g={minHeight:this.labelMinHeight??void 0},v=()=>r("span",{key:"d76b50b18e7e918aedf6f12af04365bb8ebf9eab",class:"resource-list-item__label",id:this.elementId,innerHTML:this.allowHtml?this.label:void 0,style:{"-webkit-line-clamp":this.labelWrapMaxLines?this.labelWrapMaxLines+"":void 0}},!this.allowHtml&&this.label),f=l("resource-list-item","resource-list-item--label-weight-"+this.labelWeight,{"resource-list-item--active":this.active,"resource-list-item--checked":this.checked,"resource-list-item--compact":this.compact,"resource-list-item--disabled":this.disabled,"resource-list-item--draggable":this.allowDrag,"resource-list-item--dragging":this.dragging,"resource-list-item--has-control":o,"resource-list-item--has-menu":c,"resource-list-item--hide-divider":this.hideDivider,"resource-list-item--interactive":this.interactive||this.selectable,"resource-list-item--selectable":this.selectable,"resource-list-item--show-control-on-focus":n,"resource-list-item--show-meta":u,"resource-list-item--wrap-description":this.descriptionWrap,"resource-list-item--wrap-label":this.labelWrap,"resource-list-item--wrap-label-max-lines":this.labelWrapMaxLines});return r(t,{key:"10ce3e5ffbb39308322358e8bbab0501f7d3a10e",role:w},r("div",{key:"f8165b117f476bebfdcd2690b32ed3a361a9c3e7",class:f,role:p,onClick:this.onClick},r(e,{key:"78f1d012aa6421c98216be2c829e790c0937d737","aria-checked":h,"aria-current":this.swirlAriaCurrent,"aria-disabled":s?"true":void 0,"aria-label":d,"aria-labelledby":this.swirlAriaLabel?void 0:this.elementId,class:"resource-list-item__content",style:{alignItems:this.alignItems},href:a,disabled:s,onBlur:this.onBlur,onFocus:this.onFocus,part:"resource-list-item__content",role:b,tabIndex:0,type:"button"===e?"button":void 0},this.hasMedia&&r("span",{key:"977c89c197892bf25a5c34e3791f211ee44be189",class:"resource-list-item__media"},r("slot",{key:"6701eae11641657f9727ed21a806dc85b59fdaec",name:"media"})),r("span",{key:"37f0c1abccdbfb9f82fbfe8d0064f7ecb5011e32",class:"resource-list-item__label-container",style:g},this.labelTooltip?r("swirl-tooltip",{content:this.labelTooltip,position:this.labelTooltipPosition},v()):v(),this.description&&r("span",{key:"52f01bd56e2ebf78931da2aca54c67f7953117aa",class:"resource-list-item__description",innerHTML:this.allowHtml?this.description:void 0},!this.allowHtml&&this.description))),this.selectable&&r("span",{key:"0a353244883ac3fbc677dff68f1a74fa1a6b4447","aria-hidden":"true",class:"resource-list-item__checkbox"},r("span",{key:"8bcef7f9cc0bfa7ad46091658a51bcaccaa6d6a0",class:"resource-list-item__checkbox-icon"},this.checked&&r("swirl-icon-check-strong",{key:"6320b036f118ee3a815365e704f9b141223322e8"}))),u&&r("span",{key:"23c295504aa882d681a280403ea5195ffd6d3f23",class:"resource-list-item__meta"},this.meta&&r("span",{key:"5e8ab4563eb9b9b2915dbb5effda4ece407dcbfd",class:"resource-list-item__meta-text"},this.meta),r("span",{key:"2297088e84c55aa38204c8cc2be3be9146f35996",class:"resource-list-item__badges"},r("slot",{key:"b4b7015b3adcd2f861cdadccf7e11d5e57365fb7",name:"badges"}))),r("span",{key:"95998fcce89260e3bb16b0ce772b8b375b27b9f3",class:"resource-list-item__control",onClick:this.onControlClick},r("slot",{key:"e87615de7b21a7a8c83b73e11651a396b0cfee87",name:"control"})),m&&r("swirl-popover-trigger",{key:"f4c13463f43744ce2ba9ee21976aec525865ac48",swirlPopover:this.menuTriggerId},r("swirl-button",{key:"a866ecd11a0561e12e9d7fcd529a412b11681191","aria-disabled":s?"true":void 0,class:"resource-list-item__menu-trigger",disabled:s,hideLabel:!0,icon:"<swirl-icon-more-horizontal></swirl-icon-more-horizontal>",intent:"primary",label:this.menuTriggerLabel,onClick:this.onMenuTriggerClick}))),this.allowDrag&&r("button",{key:"a08e6538986130b10f815699e98bfdc936cc7e36","aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"resource-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,type:"button"},r("swirl-icon-drag-handle",{key:"a040b75c6794f7ee58d3073e6232e93590b33f7f",size:this.iconSize})))}get el(){return this}static get style(){return'.sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected="true"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.swirl-resource-list-item--drag.sc-swirl-resource-list-item-h{border-radius:var(--s-border-radius-sm);background-color:var(--s-translucent-medium-pressed)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;padding:var(--s-space-12) var(--s-space-8);gap:var(--s-space-12);border-radius:var(--s-border-radius-sm);background-color:var(--swirl-resource-list-item-background-default);--swirl-badge-border-color:transparent}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--swirl-resource-list-item-background-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.resource-list-item.sc-swirl-resource-list-item:not(.resource-list-item--has-control) .resource-list-item__control.sc-swirl-resource-list-item{display:none}.resource-list-item--interactive.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.resource-list-item--disabled.sc-swirl-resource-list-item{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled),.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus-visible:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item{--swirl-badge-border-color:var(     --swirl-resource-list-item-background-hovered   );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2rem}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--label-weight-semibold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item--label-weight-bold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-bold)}@media (hover: hover){.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1;position:static;transform:none;margin:calc(-1 * var(--s-space-4)) 0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:0;padding-right:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:calc(-1 * var(--s-space-16));padding-right:var(--s-space-16);transition:margin 0.1s}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0;position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%);transition:opacity 0.1s}}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-state-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),     0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-state-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label-max-lines.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:transparent;display:flex;width:100%;min-width:0;margin:0;padding:0;align-items:flex-start;border:none;color:var(--s-text-default);background:none;font:inherit;line-height:var(--s-line-height-sm);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus,.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;height:100%;min-width:0;min-height:3rem;padding-right:var(--s-space-16);justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{align-self:center}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox.sc-swirl-resource-list-item{right:auto;left:calc(var(--s-space-16) - var(--s-space-2))}}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item::part(icon),.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item [part~="icon"]{width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start;gap:var(--s-space-2)}.resource-list-item__meta.sc-swirl-resource-list-item:not(:has(.resource-list-item__meta-text)){align-self:center}.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);white-space:nowrap}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-sm);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}'}},[262,"swirl-resource-list-item",{active:[4],allowDrag:[4,"allow-drag"],allowHtml:[4,"allow-html"],checked:[1028],compact:[4],description:[1],descriptionWrap:[4,"description-wrap"],disabled:[4],dragging:[4],dragHandleDescription:[1,"drag-handle-description"],dragHandleLabel:[1,"drag-handle-label"],hideDivider:[4,"hide-divider"],href:[1],interactive:[4],label:[1],labelWeight:[1,"label-weight"],labelWrap:[4,"label-wrap"],labelWrapMaxLines:[2,"label-wrap-max-lines"],labelMinHeight:[1,"label-min-height"],labelTooltip:[1,"label-tooltip"],labelTooltipPosition:[1,"label-tooltip-position"],menuTriggerId:[1,"menu-trigger-id"],menuTriggerLabel:[1,"menu-trigger-label"],meta:[1],selectable:[4],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaLabel:[1,"swirl-aria-label"],value:[1],alignItems:[1,"align-items"],hasMedia:[32],iconSize:[32]}]),w=b,p=function(){"undefined"!=typeof customElements&&["swirl-resource-list-item","swirl-button","swirl-icon-check-strong","swirl-icon-drag-handle","swirl-popover-trigger","swirl-tooltip"].forEach((e=>{switch(e){case"swirl-resource-list-item":customElements.get(o(e))||customElements.define(o(e),b);break;case"swirl-button":customElements.get(o(e))||a();break;case"swirl-icon-check-strong":customElements.get(o(e))||n();break;case"swirl-icon-drag-handle":customElements.get(o(e))||m();break;case"swirl-popover-trigger":customElements.get(o(e))||u();break;case"swirl-tooltip":customElements.get(o(e))||d()}}))};export{w as SwirlResourceListItem,p as defineCustomElement}

package/dist/components/swirl-resource-list-section.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as s,h as t,Host as i,transformTag as a}from"@stencil/core/internal/client";import{d as r}from"./swirl-separator2.js";import{d as l}from"./swirl-stack2.js";const o=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){const e=this.el.closest('[role="grid"]')?"rowgroup":"listitem",s="listitem"===e?"list":void 0;return t(i,{key:"4fd1a4880d259316ab9bace9d856c9302ceffbda"},this.hasSeparator&&t("swirl-separator",{key:"9dce900acd475b54ad39e391f819f03486272d24",spacing:this.separatorSpacing,semantics:"none"}),t("div",{key:"47757afbe004e58cf623682ee7036c2696c945a1","aria-labelledby":"label",role:e},t("span",{key:"76c06c7fb5a963e34fa2bd594c1e3fa3308f0be4",id:"label",class:"resource-list-section-label",part:"resource-list-section-label"},this.label),t("swirl-stack",{key:"e8a93f4d167792e150ac06d1a7c34b2f405ff3b4",spacing:this.spacing,swirlAriaRole:s},t("slot",{key:"a8c2cadbe124f9de4e4f1a7d9e7320a61521b15d"}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-section-label{display:flex;padding:var(--s-space-8);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);font-size:var(--s-font-size-base);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-section-label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}"}},[257,"swirl-resource-list-section",{label:[1],separatorSpacing:[1,"separator-spacing"],spacing:[1],hasSeparator:[4,"has-separator"]}]),c=o,n=function(){"undefined"!=typeof customElements&&["swirl-resource-list-section","swirl-separator","swirl-stack"].forEach((e=>{switch(e){case"swirl-resource-list-section":customElements.get(a(e))||customElements.define(a(e),o);break;case"swirl-separator":customElements.get(a(e))||r();break;case"swirl-stack":customElements.get(a(e))||l()}}))};export{c as SwirlResourceListSection,n as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as s,h as t,Host as i,transformTag as r}from"@stencil/core/internal/client";import{d as a}from"./swirl-separator2.js";import{d as l}from"./swirl-stack2.js";const o=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){const e=this.el.closest('[role="grid"]')?"rowgroup":"listitem",s="listitem"===e?"list":void 0;return t(i,{key:"75022092a93008a832dd5679f025dc7105300fa4"},this.hasSeparator&&t("swirl-separator",{key:"27bf5de4af7d691950231076855729d94d228549",spacing:this.separatorSpacing,semantics:"none"}),t("div",{key:"83f57a763a31c199b16aa7940ae5350dca6c9c12","aria-labelledby":"label",role:e},t("span",{key:"a2e74243c4e04554ca2caf77286be93d82f70685",id:"label",class:"resource-list-section-label",part:"resource-list-section-label"},this.label),t("swirl-stack",{key:"5550dbe645619c9f0fd5c29d1e9d58bf405b8a87",spacing:this.spacing,swirlAriaRole:s},t("slot",{key:"beb9be113c6e550868e8b8887eef0c78a3d89728"}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-section-label{display:flex;padding:var(--s-space-8);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);font-size:var(--s-font-size-base);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-section-label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}"}},[257,"swirl-resource-list-section",{label:[1],separatorSpacing:[1,"separator-spacing"],spacing:[1],hasSeparator:[4,"has-separator"]}]),c=o,n=function(){"undefined"!=typeof customElements&&["swirl-resource-list-section","swirl-separator","swirl-stack"].forEach((e=>{switch(e){case"swirl-resource-list-section":customElements.get(r(e))||customElements.define(r(e),o);break;case"swirl-separator":customElements.get(r(e))||a();break;case"swirl-stack":customElements.get(r(e))||l()}}))};export{c as SwirlResourceListSection,n as defineCustomElement}

package/dist/components/swirl-resource-list.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as e,Host as r,transformTag as h}from"@stencil/core/internal/client";import{S as a}from"./sortable.esm.js";import{d as o}from"./swirl-box2.js";import{d as l}from"./swirl-stack2.js";import{d as n}from"./swirl-visually-hidden2.js";import{v as c}from"./v4.js";const d=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.itemDrop=i(this,"itemDrop",7),this.assistiveTextItemGrabbed="Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.",this.assistiveTextItemMoving="Current position:",this.assistiveTextItemMoved="Item moved. New position:",this.semantics="grid",this.spacing="0",this.listId=c(),this.focusedIndex=0,this.componentLoaded=!1,this.toggleDrag=t=>{const s=t.detail;this.dragging?this.stopDrag(s):this.startDrag(s)},this.startDrag=t=>{this.dragging=t,this.draggingStartIndex=this.getItemIndex(this.dragging),t.setAttribute("dragging","true");const s=this.getItemIndex(this.dragging);this.focusItemAtIndex(s),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=t=>{const s=this.getItemIndex(this.dragging);this.dragging=void 0,t.removeAttribute("dragging"),this.assistiveText=`${this.assistiveTextItemMoved} ${s+1}`,this.itemDrop.emit({item:t,oldIndex:this.draggingStartIndex,newIndex:s}),this.draggingStartIndex=void 0},this.onKeyDown=t=>{if("grid"===this.semantics&&!this.dragging)if("ArrowDown"===t.code)t.preventDefault(),this.focusItemAtIndex((this.focusedIndex+1)%this.items.length);else if("ArrowUp"===t.code)t.preventDefault(),this.focusItemAtIndex(0===this.focusedIndex?this.items.length-1:this.focusedIndex-1);else if("Enter"===t.code&&this.controllingElement){const s=this.items[this.focusedIndex];if(!s||!s.isConnected)return;t.stopPropagation(),t.preventDefault(),s.click()}else"Home"===t.code?(t.preventDefault(),this.focusItemAtIndex(0)):"End"===t.code&&(t.preventDefault(),this.focusItemAtIndex(this.items.length-1));if(this.dragging)if("ArrowDown"===t.code)t.preventDefault(),this.moveDraggedItemDown();else if("ArrowUp"===t.code)t.preventDefault(),this.moveDraggedItemUp();else if("Space"===t.code||"Enter"===t.code){const s=t.composedPath()[0];s?.classList.contains("resource-list-item__drag-handle")||(t.preventDefault(),this.stopDrag(this.dragging))}}}connectedCallback(){this.componentLoaded&&(this.observeSlotChanges(),this.collectItems(),this.setupControllingElement(),this.setItemAllowDragState())}componentDidLoad(){this.observeSlotChanges(),this.collectItems(),this.setupControllingElement(),this.setItemAllowDragState(),this.setupDragDrop(),this.setSectionSpacingAndSeparator(),this.componentLoaded=!0}componentDidRender(){this.setupDragDrop()}disconnectedCallback(){this.sortable?.destroy(),this.observer?.disconnect(),this.controllingElement?.removeEventListener("keydown",this.onKeyDown),this.removeToggleDragListeners()}observeSlotChanges(){this.observer?.disconnect(),this.observer=new MutationObserver((()=>{this.collectItems(),this.setItemAllowDragState(),this.setSectionSpacingAndSeparator()})),this.observer.observe(this.el,{childList:!0,characterData:!0,subtree:!0})}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}async resetFocus(){this.focusedIndex=0,this.removeItemsFromTabOrder(),this.enableItemFocus(this.items[0]),this.controllingElement&&this.items[0]?.setAttribute("aria-selected","true")}collectItems(){this.removeToggleDragListeners(),this.items=Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item, [data-resource-list-item]")).filter((t=>t.isConnected)),this.sections=Array.from(this.el.querySelectorAll("swirl-resource-list-section")).filter((t=>t.isConnected)),this.removeItemsFromTabOrder(),this.enableItemFocus(this.items[this.focusedIndex]),this.controllingElement&&this.items[0]?.setAttribute("aria-selected","true")}setupControllingElement(){this.controllingElement&&(this.controllingElement.setAttribute("aria-controls",this.listId),this.controllingElement.setAttribute("role","combobox"),this.controllingElement.setAttribute("aria-autocomplete","list"),this.controllingElement.addEventListener("keydown",this.onKeyDown))}getItemIndex(t){return this.items.map((t=>t)).findIndex((s=>s===t))}removeItemsFromTabOrder(){"grid"===this.semantics&&this.items.forEach((t=>{const s=t?.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"),i=t?.querySelector(".resource-list-item__drag-handle");this.controllingElement&&t.setAttribute("aria-selected","false"),s?.setAttribute("tabIndex","-1"),i?.setAttribute("tabIndex","-1")}))}removeToggleDragListeners(){this.items?.forEach((t=>{t.removeEventListener("toggleDrag",this.toggleDrag)}))}setItemAllowDragState(){this.allowDrag?this.items.filter((t=>this.sections.every((s=>!s.contains(t))))).forEach((t=>{t.setAttribute("allow-drag","true"),t.addEventListener("toggleDrag",this.toggleDrag)})):this.items.forEach((t=>{t.removeAttribute("allow-drag"),t.removeEventListener("toggleDrag",this.toggleDrag)}))}setupDragDrop(){this.sortable&&this.sortable.destroy(),this.allowDrag&&(this.sortable=a.create(this.gridEl,{animation:150,draggable:"swirl-resource-list-item",dragClass:"swirl-resource-list-item--drag",handle:".resource-list-item__drag-handle",onEnd:t=>{this.itemDrop.emit({item:t.item,oldIndex:t.oldDraggableIndex,newIndex:t.newDraggableIndex})}}))}enableItemFocus(t,s){if(!t||this.controllingElement)return;const i=t.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"),e=t.querySelector(".resource-list-item__drag-handle");e&&e.setAttribute("tabIndex","0"),i&&(i.setAttribute("tabIndex","0"),s&&!this.controllingElement&&i.focus())}focusItemAtIndex(t){this.removeItemsFromTabOrder();const s=this.items[t];s&&s.isConnected&&(this.enableItemFocus(s,!this.controllingElement),this.controllingElement&&(s.setAttribute("aria-selected","true"),s.scrollIntoView({block:"nearest"})),this.focusedIndex=t)}moveDraggedItemDown(){const t=this.dragging.nextElementSibling;t&&(t.after(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}moveDraggedItemUp(){const t=this.dragging.previousElementSibling;t&&(t.before(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}setSectionSpacingAndSeparator(){this.sections.forEach(((t,s)=>{0===s&&"SWIRL-RESOURCE-LIST-ITEM"!==t.previousElementSibling?.tagName&&(t.hasSeparator=!1),t.spacing=this.spacing}))}render(){return e(r,{key:"cfe29e9445d922b69f2716643cbcade00fab8204",onKeyDown:this.onKeyDown},e("swirl-visually-hidden",{key:"114a7ea84cc2fa760ed5c3cd966896ae1a567f2c",role:"alert"},this.assistiveText),e("swirl-box",{key:"9472159c74cf552f9de9b33f4e03f3cd7cff5262",paddingBlockEnd:this.paddingBlockEnd??this.padding,paddingBlockStart:this.paddingBlockStart??this.padding,paddingInlineEnd:this.paddingInlineEnd??this.padding??"8",paddingInlineStart:this.paddingInlineStart??this.padding??"8"},e("swirl-stack",{key:"6c8e8bc9c753b20be4ecb3fa87b2bd8fe73cbeb6","aria-label":this.label,class:"resource-list",id:this.listId,ref:t=>this.gridEl=t,role:this.semantics,spacing:this.spacing},e("slot",{key:"6036dd9cfe944f9290084d634b45172ae4e9b23f"}))))}get el(){return this}static get watchers(){return{allowDrag:[{watchAllowDrag:0}]}}static get style(){return".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}"}},[262,"swirl-resource-list",{allowDrag:[4,"allow-drag"],assistiveTextItemGrabbed:[1,"assistive-text-item-grabbed"],assistiveTextItemMoving:[1,"assistive-text-item-moving"],assistiveTextItemMoved:[1,"assistive-text-item-moved"],controllingElement:[16],label:[1],padding:[1],paddingBlockEnd:[1,"padding-block-end"],paddingBlockStart:[1,"padding-block-start"],paddingInlineEnd:[1,"padding-inline-end"],paddingInlineStart:[1,"padding-inline-start"],semantics:[1],spacing:[1],assistiveText:[32],listId:[32],resetFocus:[64]},void 0,{allowDrag:[{watchAllowDrag:0}]}]),m=d,g=function(){"undefined"!=typeof customElements&&["swirl-resource-list","swirl-box","swirl-stack","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-resource-list":customElements.get(h(t))||customElements.define(h(t),d);break;case"swirl-box":customElements.get(h(t))||o();break;case"swirl-stack":customElements.get(h(t))||l();break;case"swirl-visually-hidden":customElements.get(h(t))||n()}}))};export{m as SwirlResourceList,g as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as e,Host as r,transformTag as h}from"@stencil/core/internal/client";import{S as a}from"./sortable.esm.js";import{d as o}from"./swirl-box2.js";import{d as l}from"./swirl-stack2.js";import{d as n}from"./swirl-visually-hidden2.js";import{v as d}from"./v4.js";const c=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.itemDrop=i(this,"itemDrop",7),this.assistiveTextItemGrabbed="Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.",this.assistiveTextItemMoving="Current position:",this.assistiveTextItemMoved="Item moved. New position:",this.semantics="grid",this.spacing="0",this.listId=d(),this.focusedIndex=0,this.componentLoaded=!1,this.toggleDrag=t=>{const s=t.detail;this.dragging?this.stopDrag(s):this.startDrag(s)},this.startDrag=t=>{this.dragging=t,this.draggingStartIndex=this.getItemIndex(this.dragging),t.setAttribute("dragging","true");const s=this.getItemIndex(this.dragging);this.focusItemAtIndex(s),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=t=>{const s=this.getItemIndex(this.dragging);this.dragging=void 0,t.removeAttribute("dragging"),this.assistiveText=`${this.assistiveTextItemMoved} ${s+1}`,this.itemDrop.emit({item:t,oldIndex:this.draggingStartIndex,newIndex:s}),this.draggingStartIndex=void 0},this.onKeyDown=t=>{if("grid"===this.semantics&&!this.dragging)if("ArrowDown"===t.code)t.preventDefault(),this.focusItemAtIndex((this.focusedIndex+1)%this.items.length);else if("ArrowUp"===t.code)t.preventDefault(),this.focusItemAtIndex(0===this.focusedIndex?this.items.length-1:this.focusedIndex-1);else if("Enter"===t.code&&this.controllingElement){const s=this.items[this.focusedIndex];if(!s||!s.isConnected)return;t.stopPropagation(),t.preventDefault(),s.click()}else"Home"===t.code?(t.preventDefault(),this.focusItemAtIndex(0)):"End"===t.code&&(t.preventDefault(),this.focusItemAtIndex(this.items.length-1));if(this.dragging)if("ArrowDown"===t.code)t.preventDefault(),this.moveDraggedItemDown();else if("ArrowUp"===t.code)t.preventDefault(),this.moveDraggedItemUp();else if("Space"===t.code||"Enter"===t.code){const s=t.composedPath()[0];s?.classList.contains("resource-list-item__drag-handle")||(t.preventDefault(),this.stopDrag(this.dragging))}}}connectedCallback(){this.componentLoaded&&(this.observeSlotChanges(),this.collectItems(),this.setupControllingElement(),this.setItemAllowDragState())}componentDidLoad(){this.observeSlotChanges(),this.collectItems(),this.setupControllingElement(),this.setItemAllowDragState(),this.setupDragDrop(),this.setSectionSpacingAndSeparator(),this.componentLoaded=!0}componentDidRender(){this.setupDragDrop()}disconnectedCallback(){this.sortable?.destroy(),this.observer?.disconnect(),this.controllingElement?.removeEventListener("keydown",this.onKeyDown),this.removeToggleDragListeners()}observeSlotChanges(){this.observer?.disconnect(),this.observer=new MutationObserver((()=>{this.collectItems(),this.setItemAllowDragState(),this.setSectionSpacingAndSeparator()})),this.observer.observe(this.el,{childList:!0,characterData:!0,subtree:!0})}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}async resetFocus(){this.focusedIndex=0,this.removeItemsFromTabOrder(),this.enableItemFocus(this.items[0]),this.controllingElement&&this.items[0]?.setAttribute("aria-selected","true")}collectItems(){this.removeToggleDragListeners(),this.items=Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item, [data-resource-list-item]")).filter((t=>t.isConnected)),this.sections=Array.from(this.el.querySelectorAll("swirl-resource-list-section")).filter((t=>t.isConnected)),this.removeItemsFromTabOrder(),this.enableItemFocus(this.items[this.focusedIndex]),this.controllingElement&&this.items[0]?.setAttribute("aria-selected","true")}setupControllingElement(){this.controllingElement&&(this.controllingElement.setAttribute("aria-controls",this.listId),this.controllingElement.setAttribute("role","combobox"),this.controllingElement.setAttribute("aria-autocomplete","list"),this.controllingElement.addEventListener("keydown",this.onKeyDown))}getItemIndex(t){return this.items.map((t=>t)).findIndex((s=>s===t))}removeItemsFromTabOrder(){"grid"===this.semantics&&this.items.forEach((t=>{const s=t?.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"),i=t?.querySelector(".resource-list-item__drag-handle");this.controllingElement&&t.setAttribute("aria-selected","false"),s?.setAttribute("tabIndex","-1"),i?.setAttribute("tabIndex","-1")}))}removeToggleDragListeners(){this.items?.forEach((t=>{t.removeEventListener("toggleDrag",this.toggleDrag)}))}setItemAllowDragState(){this.allowDrag?this.items.filter((t=>this.sections.every((s=>!s.contains(t))))).forEach((t=>{t.setAttribute("allow-drag","true"),t.addEventListener("toggleDrag",this.toggleDrag)})):this.items.forEach((t=>{t.removeAttribute("allow-drag"),t.removeEventListener("toggleDrag",this.toggleDrag)}))}setupDragDrop(){this.sortable&&this.sortable.destroy(),this.allowDrag&&(this.sortable=a.create(this.gridEl,{animation:150,draggable:"swirl-resource-list-item",dragClass:"swirl-resource-list-item--drag",handle:".resource-list-item__drag-handle",onEnd:t=>{this.itemDrop.emit({item:t.item,oldIndex:t.oldDraggableIndex,newIndex:t.newDraggableIndex})}}))}enableItemFocus(t,s){if(!t||this.controllingElement)return;const i=t.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]"),e=t.querySelector(".resource-list-item__drag-handle");e&&e.setAttribute("tabIndex","0"),i&&(i.setAttribute("tabIndex","0"),s&&!this.controllingElement&&i.focus())}focusItemAtIndex(t){this.removeItemsFromTabOrder();const s=this.items[t];s&&s.isConnected&&(this.enableItemFocus(s,!this.controllingElement),this.controllingElement&&(s.setAttribute("aria-selected","true"),s.scrollIntoView({block:"nearest"})),this.focusedIndex=t)}moveDraggedItemDown(){const t=this.dragging.nextElementSibling;t&&(t.after(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}moveDraggedItemUp(){const t=this.dragging.previousElementSibling;t&&(t.before(this.dragging),this.collectItems(),this.focusItemAtIndex(this.getItemIndex(this.dragging)),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}setSectionSpacingAndSeparator(){this.sections.forEach(((t,s)=>{0===s&&"SWIRL-RESOURCE-LIST-ITEM"!==t.previousElementSibling?.tagName&&(t.hasSeparator=!1),t.spacing=this.spacing}))}render(){return e(r,{key:"473826d3b1fca7cbf18c5ab20ebc5064e0a15f40",onKeyDown:this.onKeyDown},e("swirl-visually-hidden",{key:"a5939effe817f82750cb38556593c53eca1a84d7",role:"alert"},this.assistiveText),e("swirl-box",{key:"52a67d9f54aca12edb7401e544493431a68b22e4",paddingBlockEnd:this.paddingBlockEnd??this.padding,paddingBlockStart:this.paddingBlockStart??this.padding,paddingInlineEnd:this.paddingInlineEnd??this.padding??"8",paddingInlineStart:this.paddingInlineStart??this.padding??"8"},e("swirl-stack",{key:"aff283072e951660ffe2a462f6f9699e9ff1078f","aria-label":this.label,class:"resource-list",id:this.listId,ref:t=>this.gridEl=t,role:this.semantics,spacing:this.spacing},e("slot",{key:"721c3158ebaf7d6b171a57db1b8c6392fa6fbbec"}))))}get el(){return this}static get watchers(){return{allowDrag:[{watchAllowDrag:0}]}}static get style(){return".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}"}},[262,"swirl-resource-list",{allowDrag:[4,"allow-drag"],assistiveTextItemGrabbed:[1,"assistive-text-item-grabbed"],assistiveTextItemMoving:[1,"assistive-text-item-moving"],assistiveTextItemMoved:[1,"assistive-text-item-moved"],controllingElement:[16],label:[1],padding:[1],paddingBlockEnd:[1,"padding-block-end"],paddingBlockStart:[1,"padding-block-start"],paddingInlineEnd:[1,"padding-inline-end"],paddingInlineStart:[1,"padding-inline-start"],semantics:[1],spacing:[1],assistiveText:[32],listId:[32],resetFocus:[64]},void 0,{allowDrag:[{watchAllowDrag:0}]}]),m=c,g=function(){"undefined"!=typeof customElements&&["swirl-resource-list","swirl-box","swirl-stack","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-resource-list":customElements.get(h(t))||customElements.define(h(t),c);break;case"swirl-box":customElements.get(h(t))||o();break;case"swirl-stack":customElements.get(h(t))||l();break;case"swirl-visually-hidden":customElements.get(h(t))||n()}}))};export{m as SwirlResourceList,g as defineCustomElement}

package/dist/components/swirl-search.js

@@ -1 +1 @@
-import{proxyCustomElement as s,HTMLElement as e,createEvent as r,h as a,Host as i,transformTag as c}from"@stencil/core/internal/client";import{c as t}from"./index2.js";import{D as h}from"./media-query.service.js";import{d as o}from"./swirl-icon-cancel2.js";import{d as l}from"./swirl-icon-search2.js";const n=s(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.clear=r(this,"clear",7),this.inputBlur=r(this,"inputBlur",7),this.inputFocus=r(this,"inputFocus",7),this.inputInput=r(this,"inputInput",7),this.valueChange=r(this,"valueChange",7),this.clearButtonLabel="Clear search term",this.placeholder="Search …",this.variant="filled",this.clearable=!0,this.mediaQueryUnsubscribe=()=>{},this.handleClear=()=>{this.input.value="",this.input.focus(),this.valueChange.emit(""),this.clear.emit()},this.onBlur=s=>{this.inputBlur.emit(s)},this.onChange=s=>{this.valueChange.emit(s.target.value)},this.onFocus=s=>{this.inputFocus.emit(s)},this.onInput=s=>{this.inputInput.emit(s.target.value)}}componentDidLoad(){this.mediaQueryUnsubscribe=h.subscribe((s=>{this.forceIconProps(s)})),this.autoFocus&&setTimeout((()=>{this.input.focus()}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(s){if(!this.iconEl)return;const e=this.iconEl.children[0];e?.setAttribute("size",s?"20":"24")}onKeyDown(s){"KeyK"!==s.code&&"Slash"!==s.code||!s.ctrlKey&&!s.metaKey||this.input.focus()}render(){const s=t("search","search--variant-"+this.variant,{"search--disabled":this.disabled});return a(i,{key:"381e7cebfedbb7457577359d2e313f4f1aa3a5e3"},a("span",{key:"1e82a83ed7e7198036e94cd967bd9aa85f8afc90",class:s,ref:s=>this.iconEl=s},a("swirl-icon-search",{key:"b34f04e136625da4e0dedaf355ab7cc10e0f097a","aria-hidden":"true",class:"search__icon"}),a("input",{key:"fe90612f9c9d81f94cb937439b1b5cfa4c97d33c","aria-disabled":this.disabled?"true":void 0,"aria-label":this.label,autoComplete:"off",autoFocus:this.autoFocus,class:"search__input",disabled:this.disabled,id:this.inputId,inputMode:"search",name:this.inputName,onBlur:this.onBlur,onChange:this.onChange,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:s=>this.input=s,type:"search",value:this.value}),!this.disabled&&this.clearable&&a("button",{key:"bd60c7985bc69b589e7427230016a634dc93e6cd","aria-label":this.clearButtonLabel,class:"search__clear-button",onClick:this.handleClear,type:"button"},a("swirl-icon-cancel",{key:"b69342dc3a4ef43940a9abb038d2f7e1d4e8b508"}))))}static get style(){return".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--variant-ghost.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;width:1.5rem;height:1.5rem;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__icon.sc-swirl-search{width:1.25rem;height:1.25rem}}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{height:2.25rem;padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8));font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}"}},[2,"swirl-search",{autoFocus:[4,"auto-focus"],clearButtonLabel:[1,"clear-button-label"],disabled:[4],inputName:[1,"input-name"],inputId:[1,"input-id"],label:[1],placeholder:[1],value:[1025],variant:[1],clearable:[4]},[[8,"keydown","onKeyDown"]]]),d=n,u=function(){"undefined"!=typeof customElements&&["swirl-search","swirl-icon-cancel","swirl-icon-search"].forEach((s=>{switch(s){case"swirl-search":customElements.get(c(s))||customElements.define(c(s),n);break;case"swirl-icon-cancel":customElements.get(c(s))||o();break;case"swirl-icon-search":customElements.get(c(s))||l()}}))};export{d as SwirlSearch,u as defineCustomElement}
+import{proxyCustomElement as s,HTMLElement as e,createEvent as r,h as a,Host as i,transformTag as c}from"@stencil/core/internal/client";import{c as t}from"./index2.js";import{D as h}from"./media-query.service.js";import{d as o}from"./swirl-icon-cancel2.js";import{d as l}from"./swirl-icon-search2.js";const n=s(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.clear=r(this,"clear",7),this.inputBlur=r(this,"inputBlur",7),this.inputFocus=r(this,"inputFocus",7),this.inputInput=r(this,"inputInput",7),this.valueChange=r(this,"valueChange",7),this.clearButtonLabel="Clear search term",this.placeholder="Search …",this.variant="filled",this.clearable=!0,this.mediaQueryUnsubscribe=()=>{},this.handleClear=()=>{this.input.value="",this.input.focus(),this.valueChange.emit(""),this.clear.emit()},this.onBlur=s=>{this.inputBlur.emit(s)},this.onChange=s=>{this.valueChange.emit(s.target.value)},this.onFocus=s=>{this.inputFocus.emit(s)},this.onInput=s=>{this.inputInput.emit(s.target.value)}}componentDidLoad(){this.mediaQueryUnsubscribe=h.subscribe((s=>{this.forceIconProps(s)})),this.autoFocus&&setTimeout((()=>{this.input.focus()}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(s){if(!this.iconEl)return;const e=this.iconEl.children[0];e?.setAttribute("size",s?"20":"24")}onKeyDown(s){"KeyK"!==s.code&&"Slash"!==s.code||!s.ctrlKey&&!s.metaKey||this.input.focus()}render(){const s=t("search","search--variant-"+this.variant,{"search--disabled":this.disabled});return a(i,{key:"63ca6b7dc6cee161e9f79aaf9d4cca80bd6ea4b2"},a("span",{key:"43260becf7d290d07e34b8fc3e9054ce45c43bdd",class:s,ref:s=>this.iconEl=s},a("swirl-icon-search",{key:"4c6e1b36c61178b9d1e75edc614c2d4914b3eae1","aria-hidden":"true",class:"search__icon"}),a("input",{key:"46aea6b6cb7e4fd58a61ec30378bca893782f1c8","aria-disabled":this.disabled?"true":void 0,"aria-label":this.label,autoComplete:"off",autoFocus:this.autoFocus,class:"search__input",disabled:this.disabled,id:this.inputId,inputMode:"search",name:this.inputName,onBlur:this.onBlur,onChange:this.onChange,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:s=>this.input=s,type:"search",value:this.value}),!this.disabled&&this.clearable&&a("button",{key:"d9f2493b40441c25847cd172e0c5346102e7837d","aria-label":this.clearButtonLabel,class:"search__clear-button",onClick:this.handleClear,type:"button"},a("swirl-icon-cancel",{key:"b5be13b5e1d57795a95a9aa6c7c994c074dc18a9"}))))}static get style(){return".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--variant-ghost.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;width:1.5rem;height:1.5rem;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__icon.sc-swirl-search{width:1.25rem;height:1.25rem}}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{height:2.25rem;padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8));font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}"}},[2,"swirl-search",{autoFocus:[4,"auto-focus"],clearButtonLabel:[1,"clear-button-label"],disabled:[4],inputName:[1,"input-name"],inputId:[1,"input-id"],label:[1],placeholder:[1],value:[1025],variant:[1],clearable:[4]},[[8,"keydown","onKeyDown"]]]),d=n,u=function(){"undefined"!=typeof customElements&&["swirl-search","swirl-icon-cancel","swirl-icon-search"].forEach((s=>{switch(s){case"swirl-search":customElements.get(c(s))||customElements.define(c(s),n);break;case"swirl-icon-cancel":customElements.get(c(s))||o();break;case"swirl-icon-search":customElements.get(c(s))||l()}}))};export{d as SwirlSearch,u as defineCustomElement}

package/dist/components/swirl-select.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as s,createEvent as t,h as i,Host as l,transformTag as c}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{q as a}from"./utils.js";import{d as o}from"./swirl-icon-check-small2.js";import{d as n}from"./swirl-icon-check-strong2.js";import{d as h}from"./swirl-icon-close2.js";import{d}from"./swirl-icon-drag-handle2.js";import{d as p}from"./swirl-icon-expand-less2.js";import{d as w}from"./swirl-icon-expand-more2.js";import{d as m}from"./swirl-icon-search2.js";import{d as u}from"./swirl-option-list2.js";import{d as f}from"./swirl-option-list-item2.js";import{d as b}from"./swirl-popover2.js";import{d as _}from"./swirl-popover-trigger2.js";import{d as v}from"./swirl-spinner2.js";import{d as g}from"./swirl-stack2.js";import{d as k}from"./swirl-tag2.js";import{d as y}from"./swirl-text2.js";import{d as x}from"./swirl-visually-hidden2.js";const E=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.searchChange=t(this,"searchChange",7),this.valueChange=t(this,"valueChange",7),this.allowDeselect=!0,this.emptyListLabel="No results found.",this.searchInputLabel="Search options",this.selectId=""+Math.round(1e6*Math.random()),this.options=[],this.typeaheadBuffer="",this.select=e=>{e.stopPropagation(),this.value=e.detail,this.multiSelect||this.swirlPopover.close()},this.unselectOption=e=>{this.allowDeselect&&(this.value=this.value.filter((s=>s!==e)))},this.onSlotChange=()=>{this.updateOptions()},this.onOpen=e=>{this.placement=e.detail.position?.placement,this.open=!0,this.typeaheadBuffer="",clearTimeout(this.typeaheadTimeout),this.withSearch&&this.searchInput?this.searchInput.focus():this.optionList.querySelector('[tabIndex="0"]')?.focus()},this.onClose=()=>{this.searchInput&&(this.searchInput.value="",this.searchChange.emit("")),this.typeaheadBuffer="",clearTimeout(this.typeaheadTimeout),this.open=!1,this.input.focus()},this.onKeyDown=e=>{if("Space"===e.code||"Enter"===e.code){if(e.target===this.searchInput)return;e.preventDefault(),this.swirlPopover.open(this.el)}else"ArrowDown"===e.code&&e.target===this.searchInput?this.optionList.querySelector('[tabIndex="0"]')?.focus():this.isTypeaheadKey(e)&&(e.preventDefault(),e.stopPropagation(),this.handleTypeahead(e.key))},this.onSearchInput=e=>{this.searchChange.emit(e.target.value)}}componentWillLoad(){queueMicrotask((()=>{this.updateOptions(),this.observeSlotChanges()}))}disconnectedCallback(){this.observer?.disconnect(),clearTimeout(this.typeaheadTimeout)}onWindowFocusIn(e){e.target===this.el.querySelector("input")&&e.stopImmediatePropagation()}onValueChange(e,s){e?.length===s?.length&&e?.every((e=>s?.includes(e)))||this.valueChange.emit(this.value)}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateOptions()})),this.observer.observe(this.el,{childList:!0,subtree:!0})}updateOptions(){this.options=a(this.el,"swirl-option-list-item")}isTypeaheadKey(e){return e.target!==this.searchInput&&!(e.metaKey||e.ctrlKey||e.altKey)&&1===e.key.length&&" "!==e.key}handleTypeahead(e){const s=e.toLowerCase();if(clearTimeout(this.typeaheadTimeout),this.typeaheadBuffer.length>0&&[...this.typeaheadBuffer].every((e=>e===s)))this.typeaheadBuffer+=s,this.cycleTypeahead(s);else{const e=this.typeaheadBuffer.length>1&&1===new Set(this.typeaheadBuffer).size;this.typeaheadBuffer=e?s:this.typeaheadBuffer+s,this.prefixMatchTypeahead(this.typeaheadBuffer)||(this.typeaheadBuffer=s,this.prefixMatchTypeahead(this.typeaheadBuffer))}this.typeaheadTimeout=setTimeout((()=>{this.typeaheadBuffer=""}),500)}cycleTypeahead(e){const s=this.options.filter((e=>!e.disabled)).filter((s=>s.label?.toLowerCase().startsWith(e)));if(0===s.length)return;const t=this.getTypeaheadAnchorValue(),i=s.findIndex((e=>e.value===t));this.applyTypeaheadMatch(s[(i+1)%s.length])}prefixMatchTypeahead(e){const s=this.options.filter((e=>!e.disabled)).find((s=>s.label?.toLowerCase().startsWith(e)));return!!s&&(this.applyTypeaheadMatch(s),!0)}getTypeaheadAnchorValue(){if(this.open){const e=this.options.find((e=>e.querySelector('[role="option"][tabindex="0"]')));return e?.value}return this.value?.[this.value.length-1]}applyTypeaheadMatch(e){this.open&&this.optionList.focusItemWithValue(e.value)}getValueLabel(){return this.value?this.value?.map((e=>this.options.find((s=>s.value===e))?.label)).join(", "):""}render(){const e=this.getValueLabel(),s=!0===this.invalid||!1===this.invalid?this.invalid+"":void 0,t=this.el.closest("swirl-form-control"),c=this.standalone?[-8,0]:t?.inline||"outside"===t?.labelPosition?[0,-12]:[0,-16],a=r("select","select--placement-"+this.placement,{"select--disabled":this.disabled,"select--inline":this.inline,"select--multi":this.multiSelect,"select--search-loading":this.searchLoading,"select--standalone":this.standalone});return i(l,{key:"be02603a4efc2b9736c631056a7044b4efd6a806",onKeyDown:this.onKeyDown},i("div",{key:"a436b53c0d311522dc9a8f350556a91b79a2239f",class:a},i("swirl-popover-trigger",{key:"6718a223d2d3946b2728f33afe3f638a90d56b4e",swirlPopover:this.swirlPopover,setAriaAttributes:!1},i("swirl-stack",{key:"6a242c7380839307e6029700ad2d6398e920fbc6",class:"select__value-container"},this.standalone&&i("span",{key:"f2c577d56dd9cddfee94e4957d8e8f3065fe70da","aria-hidden":"true",class:"select__resize-helper"},e),i("input",{key:"a39a1099f88a3c26efc1e239898b0feccd65cfda","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":s,class:"select__input",disabled:this.disabled,readOnly:!0,ref:e=>this.input=e,type:"text",value:e}))),i("span",{key:"1bba1e385a36fe895b30f1aaabe6655aef28e494",class:"select__multi-select-values"},this.value?.map((e=>this.options.find((s=>s.value===e))))?.map((e=>i("swirl-tag",{"aria-hidden":"true",label:e?.label,onRemove:()=>this.unselectOption(e?.value),removable:!this.disabled&&this.allowDeselect&&!e?.disabled})))),i("span",{key:"8fcf42d8a27b52764739499e12d2dce55b08d6e9",class:"select__indicator"},i(this.open?"swirl-icon-expand-less":"swirl-icon-expand-more",{size:this.standalone?20:24})),i("swirl-popover",{key:"bedab7f838eae0704df2921ff3aafd3dc11a331e",animation:"scale-in-y",class:"select__popover",id:"select-options-"+this.selectId,label:this.label,offset:c,onPopoverClose:this.onClose,onPopoverOpen:this.onOpen,ref:e=>this.swirlPopover=e,useContainerWidth:!this.standalone&&"swirl-form-control"},this.withSearch&&i("div",{key:"5b72c690885b0db93bc321955150cb219a16b3fb",class:"select__search"},i("swirl-icon-search",{key:"0a45ee3710cec98d58a202020161d83a947880a5",class:"select__search-icon",size:20}),i("input",{key:"40048458945f344176419716c42b8b5c15b124be","aria-label":this.searchInputLabel,class:"select__search-input",onInput:this.onSearchInput,placeholder:this.searchPlaceholder,ref:e=>this.searchInput=e,type:"search"}),this.searchLoading&&i("swirl-spinner",{key:"20a7ca6e91f98e001cc12710baf832222d070ef5",class:"select__search-spinner",size:"s"})),i("swirl-option-list",{key:"77253343e069b98fb1d613cded7223579d53e61c",class:"select__option-list",allowDeselect:this.allowDeselect,onValueChange:this.select,multiSelect:this.multiSelect,ref:e=>this.optionList=e,value:this.value},!this.searchLoading&&i("div",{key:"43db83c880b1fcf882ad840eb33cf6b9cb205121","aria-disabled":"true",class:"select__empty-list-label",role:"option"},i("swirl-text",{key:"a8a91269842b99b36166777c8fe82920dfe5f193",color:"subdued",weight:"medium"},this.emptyListLabel)),i("slot",{key:"aadc3c5ed6f873614fdd9f941bdcaf2e9230b1d2",onSlotchange:this.onSlotChange})))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return'.sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content),.select.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content),.select--placement-top-start.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--standalone.sc-swirl-select{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.select--standalone.sc-swirl-select .select__indicator.sc-swirl-select{position:relative;top:auto;right:auto;cursor:pointer;transform:none}.select--standalone.sc-swirl-select .select__input.sc-swirl-select{padding-right:var(--s-space-8);font-weight:var(--s-font-weight-medium);cursor:pointer}.select--standalone.sc-swirl-select .select__value-container.sc-swirl-select{width:-webkit-min-content;width:-moz-min-content;width:min-content}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__resize-helper.sc-swirl-select{display:block;width:auto;height:0;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));padding-right:var(--s-space-8);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;white-space:pre;white-space:pre;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__resize-helper.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;flex-shrink:0;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag),.select__multi-select-values.sc-swirl-select .sc-swirl-select [part~="tag"]{height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default)}@media (min-width: 768px){.select__search.sc-swirl-select{position:sticky;z-index:1;top:0;padding-top:var(--s-space-8);padding-right:0.0625rem;padding-left:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);margin-top:var(--s-space-4);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__popover.sc-swirl-select::part(popover__scroll-container),.select__popover.sc-swirl-select [part~="popover__scroll-container"]{padding:0;overflow:hidden;display:flex;flex-direction:column}.select__popover.sc-swirl-select .select__search.sc-swirl-select{flex-shrink:0}.select__popover.sc-swirl-select .select__option-list.sc-swirl-select{padding:var(--s-space-4);overflow:auto;min-height:0}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}@media (min-width: 768px){.select__search-spinner.sc-swirl-select{margin-top:var(--s-space-4)}}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}'}},[262,"swirl-select",{allowDeselect:[4,"allow-deselect"],disabled:[4],emptyListLabel:[1,"empty-list-label"],inline:[4],invalid:[4],label:[1],multiSelect:[4,"multi-select"],required:[4],searchInputLabel:[1,"search-input-label"],searchLoading:[4,"search-loading"],searchPlaceholder:[1,"search-placeholder"],selectId:[1,"select-id"],standalone:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1040],withSearch:[4,"with-search"],options:[32],open:[32],placement:[32]},[[8,"focusin","onWindowFocusIn"]],{value:[{onValueChange:0}]}]),j=E,z=function(){"undefined"!=typeof customElements&&["swirl-select","swirl-icon-check-small","swirl-icon-check-strong","swirl-icon-close","swirl-icon-drag-handle","swirl-icon-expand-less","swirl-icon-expand-more","swirl-icon-search","swirl-option-list","swirl-option-list-item","swirl-popover","swirl-popover-trigger","swirl-spinner","swirl-stack","swirl-tag","swirl-text","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-select":customElements.get(c(e))||customElements.define(c(e),E);break;case"swirl-icon-check-small":customElements.get(c(e))||o();break;case"swirl-icon-check-strong":customElements.get(c(e))||n();break;case"swirl-icon-close":customElements.get(c(e))||h();break;case"swirl-icon-drag-handle":customElements.get(c(e))||d();break;case"swirl-icon-expand-less":customElements.get(c(e))||p();break;case"swirl-icon-expand-more":customElements.get(c(e))||w();break;case"swirl-icon-search":customElements.get(c(e))||m();break;case"swirl-option-list":customElements.get(c(e))||u();break;case"swirl-option-list-item":customElements.get(c(e))||f();break;case"swirl-popover":customElements.get(c(e))||b();break;case"swirl-popover-trigger":customElements.get(c(e))||_();break;case"swirl-spinner":customElements.get(c(e))||v();break;case"swirl-stack":customElements.get(c(e))||g();break;case"swirl-tag":customElements.get(c(e))||k();break;case"swirl-text":customElements.get(c(e))||y();break;case"swirl-visually-hidden":customElements.get(c(e))||x()}}))};export{j as SwirlSelect,z as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as s,createEvent as t,h as i,Host as l,transformTag as c}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{q as a}from"./utils.js";import{d as o}from"./swirl-icon-check-small2.js";import{d as n}from"./swirl-icon-check-strong2.js";import{d as h}from"./swirl-icon-close2.js";import{d}from"./swirl-icon-drag-handle2.js";import{d as p}from"./swirl-icon-expand-less2.js";import{d as w}from"./swirl-icon-expand-more2.js";import{d as m}from"./swirl-icon-search2.js";import{d as u}from"./swirl-option-list2.js";import{d as f}from"./swirl-option-list-item2.js";import{d as b}from"./swirl-popover2.js";import{d as _}from"./swirl-popover-trigger2.js";import{d as v}from"./swirl-spinner2.js";import{d as g}from"./swirl-stack2.js";import{d as k}from"./swirl-tag2.js";import{d as y}from"./swirl-text2.js";import{d as x}from"./swirl-visually-hidden2.js";const E=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.searchChange=t(this,"searchChange",7),this.valueChange=t(this,"valueChange",7),this.allowDeselect=!0,this.emptyListLabel="No results found.",this.searchInputLabel="Search options",this.selectId=""+Math.round(1e6*Math.random()),this.options=[],this.typeaheadBuffer="",this.select=e=>{e.stopPropagation(),this.value=e.detail,this.multiSelect||this.swirlPopover.close()},this.unselectOption=e=>{this.allowDeselect&&(this.value=this.value.filter((s=>s!==e)))},this.onSlotChange=()=>{this.updateOptions()},this.onOpen=e=>{this.placement=e.detail.position?.placement,this.open=!0,this.typeaheadBuffer="",clearTimeout(this.typeaheadTimeout),this.withSearch&&this.searchInput?this.searchInput.focus():this.optionList.querySelector('[tabIndex="0"]')?.focus()},this.onClose=()=>{this.searchInput&&(this.searchInput.value="",this.searchChange.emit("")),this.typeaheadBuffer="",clearTimeout(this.typeaheadTimeout),this.open=!1,this.input.focus()},this.onKeyDown=e=>{if("Space"===e.code||"Enter"===e.code){if(e.target===this.searchInput)return;e.preventDefault(),this.swirlPopover.open(this.el)}else"ArrowDown"===e.code&&e.target===this.searchInput?this.optionList.querySelector('[tabIndex="0"]')?.focus():this.isTypeaheadKey(e)&&(e.preventDefault(),e.stopPropagation(),this.handleTypeahead(e.key))},this.onSearchInput=e=>{this.searchChange.emit(e.target.value)}}componentWillLoad(){queueMicrotask((()=>{this.updateOptions(),this.observeSlotChanges()}))}disconnectedCallback(){this.observer?.disconnect(),clearTimeout(this.typeaheadTimeout)}onWindowFocusIn(e){e.target===this.el.querySelector("input")&&e.stopImmediatePropagation()}onValueChange(e,s){e?.length===s?.length&&e?.every((e=>s?.includes(e)))||this.valueChange.emit(this.value)}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateOptions()})),this.observer.observe(this.el,{childList:!0,subtree:!0})}updateOptions(){this.options=a(this.el,"swirl-option-list-item")}isTypeaheadKey(e){return e.target!==this.searchInput&&!(e.metaKey||e.ctrlKey||e.altKey)&&1===e.key.length&&" "!==e.key}handleTypeahead(e){const s=e.toLowerCase();if(clearTimeout(this.typeaheadTimeout),this.typeaheadBuffer.length>0&&[...this.typeaheadBuffer].every((e=>e===s)))this.typeaheadBuffer+=s,this.cycleTypeahead(s);else{const e=this.typeaheadBuffer.length>1&&1===new Set(this.typeaheadBuffer).size;this.typeaheadBuffer=e?s:this.typeaheadBuffer+s,this.prefixMatchTypeahead(this.typeaheadBuffer)||(this.typeaheadBuffer=s,this.prefixMatchTypeahead(this.typeaheadBuffer))}this.typeaheadTimeout=setTimeout((()=>{this.typeaheadBuffer=""}),500)}cycleTypeahead(e){const s=this.options.filter((e=>!e.disabled)).filter((s=>s.label?.toLowerCase().startsWith(e)));if(0===s.length)return;const t=this.getTypeaheadAnchorValue(),i=s.findIndex((e=>e.value===t));this.applyTypeaheadMatch(s[(i+1)%s.length])}prefixMatchTypeahead(e){const s=this.options.filter((e=>!e.disabled)).find((s=>s.label?.toLowerCase().startsWith(e)));return!!s&&(this.applyTypeaheadMatch(s),!0)}getTypeaheadAnchorValue(){if(this.open){const e=this.options.find((e=>e.querySelector('[role="option"][tabindex="0"]')));return e?.value}return this.value?.[this.value.length-1]}applyTypeaheadMatch(e){this.open&&this.optionList.focusItemWithValue(e.value)}getValueLabel(){return this.value?this.value?.map((e=>this.options.find((s=>s.value===e))?.label)).join(", "):""}render(){const e=this.getValueLabel(),s=!0===this.invalid||!1===this.invalid?this.invalid+"":void 0,t=this.el.closest("swirl-form-control"),c=this.standalone?[-8,0]:t?.inline||"outside"===t?.labelPosition?[0,-12]:[0,-16],a=r("select","select--placement-"+this.placement,{"select--disabled":this.disabled,"select--inline":this.inline,"select--multi":this.multiSelect,"select--search-loading":this.searchLoading,"select--standalone":this.standalone});return i(l,{key:"b2d804e6e75849fe751b4db7e692eb331047a35b",onKeyDown:this.onKeyDown},i("div",{key:"9e7798afcd98f48ec909fe4b3ff11c6dd045fb1b",class:a},i("swirl-popover-trigger",{key:"12e4b5f81da26c539a933eb41b720e970d08454f",swirlPopover:this.swirlPopover,setAriaAttributes:!1},i("swirl-stack",{key:"1a3f7c16898a543dfb12166e10a8293a87149d8d",class:"select__value-container"},this.standalone&&i("span",{key:"57671ce6e379a0991f604c65e725fd60944beaf3","aria-hidden":"true",class:"select__resize-helper"},e),i("input",{key:"3db7d2567d8d5685dad8f4049c8ba96d5e976f83","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":s,class:"select__input",disabled:this.disabled,readOnly:!0,ref:e=>this.input=e,type:"text",value:e}))),i("span",{key:"d7cea7c10464ebc47115b415b0c84f91dbb28833",class:"select__multi-select-values"},this.value?.map((e=>this.options.find((s=>s.value===e))))?.map((e=>i("swirl-tag",{"aria-hidden":"true",label:e?.label,onRemove:()=>this.unselectOption(e?.value),removable:!this.disabled&&this.allowDeselect&&!e?.disabled})))),i("span",{key:"dc76bd773344de262621a61a6cd0e27d4ab6f3f5",class:"select__indicator"},i(this.open?"swirl-icon-expand-less":"swirl-icon-expand-more",{size:this.standalone?20:24})),i("swirl-popover",{key:"2eb3df6ca4691f16fa402281f867f9ff505b946f",animation:"scale-in-y",class:"select__popover",id:"select-options-"+this.selectId,label:this.label,offset:c,onPopoverClose:this.onClose,onPopoverOpen:this.onOpen,ref:e=>this.swirlPopover=e,useContainerWidth:!this.standalone&&"swirl-form-control"},this.withSearch&&i("div",{key:"cd0433e0b26988218f5e56864dcee7f45350b41c",class:"select__search"},i("swirl-icon-search",{key:"7f69dd85a4d2087da957510db0331008605e7766",class:"select__search-icon",size:20}),i("input",{key:"86902eba4eb8e708fc7d747632052a48f6e58495","aria-label":this.searchInputLabel,class:"select__search-input",onInput:this.onSearchInput,placeholder:this.searchPlaceholder,ref:e=>this.searchInput=e,type:"search"}),this.searchLoading&&i("swirl-spinner",{key:"61827ddb1dbd94b3238975a3be77b1477c726e37",class:"select__search-spinner",size:"s"})),i("swirl-option-list",{key:"a8a673c80d3decd84073f67d8a54adf8b7ab1ccb",class:"select__option-list",allowDeselect:this.allowDeselect,onValueChange:this.select,multiSelect:this.multiSelect,ref:e=>this.optionList=e,value:this.value},!this.searchLoading&&i("div",{key:"7e0cf544c8b9a602eb930f0a353f64d6d824feeb","aria-disabled":"true",class:"select__empty-list-label",role:"option"},i("swirl-text",{key:"6fad49b2eac2a61b4832cb9cfefdd41f32b82470",color:"subdued",weight:"medium"},this.emptyListLabel)),i("slot",{key:"3824957bb28d7e6f50dc8f88ae41cfc99a3936fe",onSlotchange:this.onSlotChange})))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return'.sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content),.select.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content),.select--placement-top-start.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--standalone.sc-swirl-select{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.select--standalone.sc-swirl-select .select__indicator.sc-swirl-select{position:relative;top:auto;right:auto;cursor:pointer;transform:none}.select--standalone.sc-swirl-select .select__input.sc-swirl-select{padding-right:var(--s-space-8);font-weight:var(--s-font-weight-medium);cursor:pointer}.select--standalone.sc-swirl-select .select__value-container.sc-swirl-select{width:-webkit-min-content;width:-moz-min-content;width:min-content}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__resize-helper.sc-swirl-select{display:block;width:auto;height:0;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));padding-right:var(--s-space-8);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;white-space:pre;white-space:pre;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__resize-helper.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;flex-shrink:0;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag),.select__multi-select-values.sc-swirl-select .sc-swirl-select [part~="tag"]{height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default)}@media (min-width: 768px){.select__search.sc-swirl-select{position:sticky;z-index:1;top:0;padding-top:var(--s-space-8);padding-right:0.0625rem;padding-left:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);margin-top:var(--s-space-4);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__popover.sc-swirl-select::part(popover__scroll-container),.select__popover.sc-swirl-select [part~="popover__scroll-container"]{padding:0;overflow:hidden;display:flex;flex-direction:column}.select__popover.sc-swirl-select .select__search.sc-swirl-select{flex-shrink:0}.select__popover.sc-swirl-select .select__option-list.sc-swirl-select{padding:var(--s-space-4);overflow:auto;min-height:0}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}@media (min-width: 768px){.select__search-spinner.sc-swirl-select{margin-top:var(--s-space-4)}}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}'}},[262,"swirl-select",{allowDeselect:[4,"allow-deselect"],disabled:[4],emptyListLabel:[1,"empty-list-label"],inline:[4],invalid:[4],label:[1],multiSelect:[4,"multi-select"],required:[4],searchInputLabel:[1,"search-input-label"],searchLoading:[4,"search-loading"],searchPlaceholder:[1,"search-placeholder"],selectId:[1,"select-id"],standalone:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1040],withSearch:[4,"with-search"],options:[32],open:[32],placement:[32]},[[8,"focusin","onWindowFocusIn"]],{value:[{onValueChange:0}]}]),j=E,z=function(){"undefined"!=typeof customElements&&["swirl-select","swirl-icon-check-small","swirl-icon-check-strong","swirl-icon-close","swirl-icon-drag-handle","swirl-icon-expand-less","swirl-icon-expand-more","swirl-icon-search","swirl-option-list","swirl-option-list-item","swirl-popover","swirl-popover-trigger","swirl-spinner","swirl-stack","swirl-tag","swirl-text","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-select":customElements.get(c(e))||customElements.define(c(e),E);break;case"swirl-icon-check-small":customElements.get(c(e))||o();break;case"swirl-icon-check-strong":customElements.get(c(e))||n();break;case"swirl-icon-close":customElements.get(c(e))||h();break;case"swirl-icon-drag-handle":customElements.get(c(e))||d();break;case"swirl-icon-expand-less":customElements.get(c(e))||p();break;case"swirl-icon-expand-more":customElements.get(c(e))||w();break;case"swirl-icon-search":customElements.get(c(e))||m();break;case"swirl-option-list":customElements.get(c(e))||u();break;case"swirl-option-list-item":customElements.get(c(e))||f();break;case"swirl-popover":customElements.get(c(e))||b();break;case"swirl-popover-trigger":customElements.get(c(e))||_();break;case"swirl-spinner":customElements.get(c(e))||v();break;case"swirl-stack":customElements.get(c(e))||g();break;case"swirl-tag":customElements.get(c(e))||k();break;case"swirl-text":customElements.get(c(e))||y();break;case"swirl-visually-hidden":customElements.get(c(e))||x()}}))};export{j as SwirlSelect,z as defineCustomElement}