@getflip/swirl-components 0.478.0 → 0.479.0

package/dist/components/swirl-menu.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,Host as n,transformTag as o}from"@stencil/core/internal/client";import{c as a,a as h,o as l,s as r,f as m}from"./floating-ui.dom.js";import{c as u}from"./index2.js";import{q as c,l as d,m as b,i as f,k as p}from"./utils.js";import{d as w}from"./swirl-button2.js";import{d as v}from"./swirl-heading2.js";const y=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.done=i(this,"done",7),this.valueChange=i(this,"valueChange",7),this.active=!0,this.level=0,this.mobileBackButtonLabel="Back",this.mobileCloseMenuButtonLabel="Close menu",this.placement="right-start",this.mobileDoneButtonLabel="Done",this.variant="action",this.activeLevel=0,this.mobileMediaQuery=window.matchMedia("(min-width: 768px)"),this.mediaQueryHandler=()=>{this.updateMobileState()},this.resetMenu=()=>{this.items.forEach((t=>{t.tabIndex=-1})),this.level>0||setTimeout((()=>{this.activeLevel=0,c(this.el,"swirl-menu").forEach((t=>{t.active=!1,t.parentElement.expanded=!1}))}),this.mobile?200:60)},this.closeMenu=()=>{this.disableAutoUpdate&&this.disableAutoUpdate(),this.swirlPopover.close(),this.resetMenu()},this.reposition=async()=>{if(this.mobile||0===this.level)return void(this.position=void 0);const t=this.el.parentElement;t&&this.menuContainer&&requestAnimationFrame((async()=>{this.position=await a(t,this.menuContainer,{placement:this.placement,strategy:"fixed",middleware:[l({mainAxis:-10,crossAxis:0}),r(),m()]})}))},this.onKeyDown=t=>{if("ArrowDown"===t.code)t.preventDefault(),t.stopPropagation(),this.focusNextItem();else if("ArrowUp"===t.code)t.preventDefault(),t.stopPropagation(),this.focusPreviousItem();else if("ArrowLeft"===t.code)t.preventDefault(),t.stopPropagation(),this.rootMenu.goBack();else if("ArrowRight"===t.code){t.preventDefault();const e=d(this.items[this.getActiveItemIndex()],"swirl-menu-item");if(!e)return;this.rootMenu.activateMenuItem(e)}},this.onClose=()=>{this.closeMenu()},this.onDone=()=>{this.closeMenu(),this.done.emit()},this.onGoBack=()=>{this.rootMenu.goBack()}}componentWillLoad(){this.updateMobileState(),this.updateLevel(),this.observeSlotChanges()}componentDidLoad(){this.mobileMediaQuery.addEventListener("change",this.mediaQueryHandler),this.parentMenu=d(this.el.parentElement,"swirl-menu"),this.swirlPopover=d(this.el,"swirl-popover"),this.rootMenu=b(this.el,"swirl-menu").pop(),this.parentMenu&&queueMicrotask((()=>{this.active=!1})),this.swirlPopover.addEventListener("popoverClose",this.resetMenu),this.updateItems()}disconnectedCallback(){this.swirlPopover?.removeEventListener("popoverClose",this.resetMenu),this.mobileMediaQuery.removeEventListener?.("change",this.mediaQueryHandler),this.observer?.disconnect()}watchActive(){this.position=void 0,this.reposition(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=h(this.el.parentElement,this.menuContainer,this.reposition)}watchValue(){this.updateActiveItem()}async activateMenuItem(t){if(this.parentMenu)return;const e=await t.getParentMenu(),i=c(this.el,"swirl-menu").filter((t=>t.level>=e.level&&t!==e));i.forEach((t=>{t.active=!1,t.parentElement.expanded=!1}));const s=await t.getSubMenu();s&&(t.expanded=!0,s.active=!0,this.activeLevel=s.level,setTimeout((()=>{s.focusFirstItem()}),this.mobile?200:60))}async close(){this.closeMenu()}async goBack(){if(this.parentMenu||0===this.activeLevel)return;const t=(c(this.el,"swirl-menu").find((t=>t.level===this.activeLevel&&t.active))||this.rootMenu).parentElement;t.expanded=!1,this.activeLevel=Math.max(this.activeLevel-1,0),c(this.el,"swirl-menu").filter((t=>t.level>this.activeLevel)).forEach((t=>{t.active=!1})),(c(this.el,"swirl-menu").find((t=>t.level===this.activeLevel&&t.active))||this.rootMenu).focusItemAtIndex(Array.from(t.parentElement.children).indexOf(t))}async focusFirstItem(){this.focusItem(this.items[0])}async focusItemAtIndex(t){this.focusItem(this.items[t])}async updateSelection(t){this.valueChange.emit(t.value)}async updateActiveItem(){c(this.el,"swirl-menu-item").filter((t=>d(t,"swirl-menu")===this.el)).forEach((t=>{t.updateValue()})),this.parentMenu&&"action"===this.parentMenu.variant&&this.parentMenu.updateActiveItem()}observeSlotChanges(){this.observer=new MutationObserver((()=>{requestAnimationFrame((()=>{this.updateItems()}))})),this.observer.observe(this.el,{childList:!0})}updateMobileState(){const t=f();t!==this.mobile&&(this.mobile=t)}updateItems(){this.items=[...c(this.el,'[role="menuitem"]'),...c(this.el,'[role="menuitemradio"]')].filter((t=>d(t,"swirl-menu")===this.el))}updateLevel(){const t=b(this.el.parentNode,"swirl-menu");this.level=t.length}focusItem(t){[...c(this.rootMenu,'[role="menuitem"]'),...c(this.rootMenu,'[role="menuitemradio"]')].forEach((t=>{t.tabIndex=-1})),t&&(t.tabIndex=0,t.focus())}focusNextItem(){const t=this.getActiveItemIndex();this.focusItem(this.items[(t+1)%this.items.length])}focusPreviousItem(){const t=this.getActiveItemIndex();this.focusItem(this.items[0===t?this.items.length-1:t-1])}getActiveItemIndex(){const t=p();return this.items.findIndex((e=>e===t||e===t?.querySelector('[role="menuitem"]')||e===t?.querySelector('[role="menuitemradio"]')))}render(){const t=!this.parentMenu,e=t&&this.mobile?void 0:this.label,i=t&&this.mobile?"menu-title":void 0,o=t?"menubar":"menu",a=u("menu","menu--level-"+this.level,{"menu--active":this.active,"menu--mobile":this.mobile,"menu--root":t});return s(n,{key:"44cee0223b2700826c14b1f920686c8f01cbb0e8"},s("div",{key:"bde3e96347f67bad06c6b57874ecf2dafd79721b",class:a},this.mobile&&t&&s("div",{key:"f88ef433430d72a02bbe1f3e0d41c38e64fd7a2a",class:"menu__mobile-header"},0===this.activeLevel&&s("swirl-button",{key:"78958d3a3f2bf9e1edd1c83d4c454e71183e1d33",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.mobileCloseMenuButtonLabel,onClick:this.onClose,variant:"plain"}),this.activeLevel>0&&s("swirl-button",{key:"60397c59f46973add1161d6a0b687ec2ce5c6772",hideLabel:!0,icon:"<swirl-icon-chevron-left></swirl-icon-chevron-left>",label:this.mobileBackButtonLabel,onClick:this.onGoBack,variant:"plain"}),s("span",{key:"d56bf02124513b8bf10ea84ea848436fafe951a6",class:"menu__title",id:"menu-title"},s("swirl-heading",{key:"9e42e32c7682d33b0f3806ece6fdc19e61159b4d",align:"center",as:"span",level:4,text:this.label,truncate:!0})),s("swirl-button",{key:"2ea12326a31303de0753cd41cafc8d451897d646",class:"menu__done-button",intent:"primary",label:this.mobileDoneButtonLabel,onClick:this.onDone})),s("div",{key:"3762373e43593f8d31eabd9398d7799acf1db6e4","aria-label":e,"aria-labelledby":i,"aria-orientation":"vertical",class:"menu__menu",onKeyDown:this.onKeyDown,ref:t=>this.menuContainer=t,role:o,style:!this.mobile&&this.level>0?{top:this.position?this.position?.y+"px":"",left:this.position?this.position?.x+"px":"",opacity:this.position?void 0:"0"}:this.mobile?{left:t?`calc(-100% * ${this.activeLevel})`:"100%"}:void 0},s("slot",{key:"fc9f41d92a361bcf14db78c98fda6b36b8964144"}))))}get el(){return this}static get watchers(){return{active:[{watchActive:0}],value:[{watchValue:0}]}}static get style(){return':host{display:block}:host *{box-sizing:border-box}.menu{width:100%}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile):not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-1);padding:var(--s-space-4);outline:var(--s-border-width-default) solid var(--s-border-translucent-outline)}:not(.menu--mobile):not(.menu--root) .menu__menu:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l))}:not(.menu--mobile).menu--active .menu__menu{display:block}:not(.menu--mobile) .menu__menu{position:fixed;display:none}.menu__mobile-header{display:flex;height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-8)}.menu__mobile-header>*{display:inline-flex;flex-shrink:0}.menu__title{min-width:0;flex-grow:1;flex-shrink:1}.menu__title swirl-heading{min-width:0}.menu__done-button{margin-right:calc(-1 * var(--s-space-8))}'}},[257,"swirl-menu",{active:[1028],label:[1],level:[1026],mobileBackButtonLabel:[1,"mobile-back-button-label"],mobileCloseMenuButtonLabel:[1,"mobile-close-menu-button-label"],placement:[1],mobileDoneButtonLabel:[1,"mobile-done-button-label"],value:[1],variant:[1],activeLevel:[32],mobile:[32],position:[32],activateMenuItem:[64],close:[64],goBack:[64],focusFirstItem:[64],focusItemAtIndex:[64],updateSelection:[64],updateActiveItem:[64]},void 0,{active:[{watchActive:0}],value:[{watchValue:0}]}]),g=y,_=function(){"undefined"!=typeof customElements&&["swirl-menu","swirl-button","swirl-heading"].forEach((t=>{switch(t){case"swirl-menu":customElements.get(o(t))||customElements.define(o(t),y);break;case"swirl-button":customElements.get(o(t))||w();break;case"swirl-heading":customElements.get(o(t))||v()}}))};export{g as SwirlMenu,_ as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,Host as n,transformTag as o}from"@stencil/core/internal/client";import{c as a,a as h,o as l,s as r,f as m}from"./floating-ui.dom.js";import{c}from"./index2.js";import{q as u,l as d,m as b,i as f,k as p}from"./utils.js";import{d as w}from"./swirl-button2.js";import{d as v}from"./swirl-heading2.js";const y=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.done=i(this,"done",7),this.valueChange=i(this,"valueChange",7),this.active=!0,this.level=0,this.mobileBackButtonLabel="Back",this.mobileCloseMenuButtonLabel="Close menu",this.placement="right-start",this.mobileDoneButtonLabel="Done",this.variant="action",this.activeLevel=0,this.mobileMediaQuery=window.matchMedia("(min-width: 768px)"),this.mediaQueryHandler=()=>{this.updateMobileState()},this.resetMenu=()=>{this.items.forEach((t=>{t.tabIndex=-1})),this.level>0||setTimeout((()=>{this.activeLevel=0,u(this.el,"swirl-menu").forEach((t=>{t.active=!1,t.parentElement.expanded=!1}))}),this.mobile?200:60)},this.closeMenu=()=>{this.disableAutoUpdate&&this.disableAutoUpdate(),this.swirlPopover.close(),this.resetMenu()},this.reposition=async()=>{if(this.mobile||0===this.level)return void(this.position=void 0);const t=this.el.parentElement;t&&this.menuContainer&&requestAnimationFrame((async()=>{this.position=await a(t,this.menuContainer,{placement:this.placement,strategy:"fixed",middleware:[l({mainAxis:-10,crossAxis:0}),r(),m()]})}))},this.onKeyDown=t=>{if("ArrowDown"===t.code)t.preventDefault(),t.stopPropagation(),this.focusNextItem();else if("ArrowUp"===t.code)t.preventDefault(),t.stopPropagation(),this.focusPreviousItem();else if("ArrowLeft"===t.code)t.preventDefault(),t.stopPropagation(),this.rootMenu.goBack();else if("ArrowRight"===t.code){t.preventDefault();const e=d(this.items[this.getActiveItemIndex()],"swirl-menu-item");if(!e)return;this.rootMenu.activateMenuItem(e)}},this.onClose=()=>{this.closeMenu()},this.onDone=()=>{this.closeMenu(),this.done.emit()},this.onGoBack=()=>{this.rootMenu.goBack()}}componentWillLoad(){this.updateMobileState(),this.updateLevel(),this.observeSlotChanges()}componentDidLoad(){this.mobileMediaQuery.addEventListener("change",this.mediaQueryHandler),this.parentMenu=d(this.el.parentElement,"swirl-menu"),this.swirlPopover=d(this.el,"swirl-popover"),this.rootMenu=b(this.el,"swirl-menu").pop(),this.parentMenu&&queueMicrotask((()=>{this.active=!1})),this.swirlPopover.addEventListener("popoverClose",this.resetMenu),this.updateItems()}disconnectedCallback(){this.swirlPopover?.removeEventListener("popoverClose",this.resetMenu),this.mobileMediaQuery.removeEventListener?.("change",this.mediaQueryHandler),this.observer?.disconnect()}watchActive(){this.position=void 0,this.reposition(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=h(this.el.parentElement,this.menuContainer,this.reposition)}watchValue(){this.updateActiveItem()}async activateMenuItem(t){if(this.parentMenu)return;const e=await t.getParentMenu(),i=u(this.el,"swirl-menu").filter((t=>t.level>=e.level&&t!==e));i.forEach((t=>{t.active=!1,t.parentElement.expanded=!1}));const s=await t.getSubMenu();s&&(t.expanded=!0,s.active=!0,this.activeLevel=s.level,setTimeout((()=>{s.focusFirstItem()}),this.mobile?200:60))}async close(){this.closeMenu()}async goBack(){if(this.parentMenu||0===this.activeLevel)return;const t=(u(this.el,"swirl-menu").find((t=>t.level===this.activeLevel&&t.active))||this.rootMenu).parentElement;t.expanded=!1,this.activeLevel=Math.max(this.activeLevel-1,0),u(this.el,"swirl-menu").filter((t=>t.level>this.activeLevel)).forEach((t=>{t.active=!1})),(u(this.el,"swirl-menu").find((t=>t.level===this.activeLevel&&t.active))||this.rootMenu).focusItemAtIndex(Array.from(t.parentElement.children).indexOf(t))}async focusFirstItem(){this.focusItem(this.items[0])}async focusItemAtIndex(t){this.focusItem(this.items[t])}async updateSelection(t){this.valueChange.emit(t.value)}async updateActiveItem(){u(this.el,"swirl-menu-item").filter((t=>d(t,"swirl-menu")===this.el)).forEach((t=>{t.updateValue()})),this.parentMenu&&"action"===this.parentMenu.variant&&this.parentMenu.updateActiveItem()}observeSlotChanges(){this.observer=new MutationObserver((()=>{requestAnimationFrame((()=>{this.updateItems()}))})),this.observer.observe(this.el,{childList:!0})}updateMobileState(){const t=f();t!==this.mobile&&(this.mobile=t)}updateItems(){this.items=[...u(this.el,'[role="menuitem"]'),...u(this.el,'[role="menuitemradio"]')].filter((t=>d(t,"swirl-menu")===this.el))}updateLevel(){const t=b(this.el.parentNode,"swirl-menu");this.level=t.length}focusItem(t){[...u(this.rootMenu,'[role="menuitem"]'),...u(this.rootMenu,'[role="menuitemradio"]')].forEach((t=>{t.tabIndex=-1})),t&&(t.tabIndex=0,t.focus())}focusNextItem(){const t=this.getActiveItemIndex();this.focusItem(this.items[(t+1)%this.items.length])}focusPreviousItem(){const t=this.getActiveItemIndex();this.focusItem(this.items[0===t?this.items.length-1:t-1])}getActiveItemIndex(){const t=p();return this.items.findIndex((e=>e===t||e===t?.querySelector('[role="menuitem"]')||e===t?.querySelector('[role="menuitemradio"]')))}render(){const t=!this.parentMenu,e=t&&this.mobile?void 0:this.label,i=t&&this.mobile?"menu-title":void 0,o=t?"menubar":"menu",a=c("menu","menu--level-"+this.level,{"menu--active":this.active,"menu--mobile":this.mobile,"menu--root":t});return s(n,{key:"90649ed93738daac024fb46d5b0096439f72d04d"},s("div",{key:"19197c74b8088d5e95c38167b964eb98c2060dcc",class:a},this.mobile&&t&&s("div",{key:"3e83380d07ca1fb260b9f0fc1c5d135ae4460f02",class:"menu__mobile-header"},0===this.activeLevel&&s("swirl-button",{key:"ddb263add38ceee511899f23f3f0401af642bb66",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.mobileCloseMenuButtonLabel,onClick:this.onClose,variant:"plain"}),this.activeLevel>0&&s("swirl-button",{key:"bf7f50ea6cdf84c5522ffc14346ad816067004e4",hideLabel:!0,icon:"<swirl-icon-chevron-left></swirl-icon-chevron-left>",label:this.mobileBackButtonLabel,onClick:this.onGoBack,variant:"plain"}),s("span",{key:"fbcae6f2a3a5f52edf267d129f90384a2c6aaeb5",class:"menu__title",id:"menu-title"},s("swirl-heading",{key:"5f47dbd00900ca4652c48d9e8433cae7e1cd98d4",align:"center",as:"span",level:4,text:this.label,truncate:!0})),s("swirl-button",{key:"75e3348b5a732a5c4d2010beff9f21973bdffda2",class:"menu__done-button",intent:"primary",label:this.mobileDoneButtonLabel,onClick:this.onDone})),s("div",{key:"59ff09a67ba9c64402762ddc2d90f136c423cb99","aria-label":e,"aria-labelledby":i,"aria-orientation":"vertical",class:"menu__menu",onKeyDown:this.onKeyDown,ref:t=>this.menuContainer=t,role:o,style:!this.mobile&&this.level>0?{top:this.position?this.position?.y+"px":"",left:this.position?this.position?.x+"px":"",opacity:this.position?void 0:"0"}:this.mobile?{left:t?`calc(-100% * ${this.activeLevel})`:"100%"}:void 0},s("slot",{key:"b0434b4a52901a62b2d47e343c233309bdfcbc58"}))))}get el(){return this}static get watchers(){return{active:[{watchActive:0}],value:[{watchValue:0}]}}static get style(){return':host{display:block}:host *{box-sizing:border-box}.menu{width:100%}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile):not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-1);padding:var(--s-space-4);outline:var(--s-border-width-default) solid var(--s-border-translucent-outline)}:not(.menu--mobile):not(.menu--root) .menu__menu:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l))}:not(.menu--mobile).menu--active .menu__menu{display:block}:not(.menu--mobile) .menu__menu{position:fixed;display:none}.menu__mobile-header{display:flex;height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-8)}.menu__mobile-header>*{display:inline-flex;flex-shrink:0}.menu__title{min-width:0;flex-grow:1;flex-shrink:1}.menu__title swirl-heading{min-width:0}.menu__done-button{margin-right:calc(-1 * var(--s-space-8))}'}},[257,"swirl-menu",{active:[1028],label:[1],level:[1026],mobileBackButtonLabel:[1,"mobile-back-button-label"],mobileCloseMenuButtonLabel:[1,"mobile-close-menu-button-label"],placement:[1],mobileDoneButtonLabel:[1,"mobile-done-button-label"],value:[1],variant:[1],activeLevel:[32],mobile:[32],position:[32],activateMenuItem:[64],close:[64],goBack:[64],focusFirstItem:[64],focusItemAtIndex:[64],updateSelection:[64],updateActiveItem:[64]},void 0,{active:[{watchActive:0}],value:[{watchValue:0}]}]),g=y,_=function(){"undefined"!=typeof customElements&&["swirl-menu","swirl-button","swirl-heading"].forEach((t=>{switch(t){case"swirl-menu":customElements.get(o(t))||customElements.define(o(t),y);break;case"swirl-button":customElements.get(o(t))||w();break;case"swirl-heading":customElements.get(o(t))||v()}}))};export{g as SwirlMenu,_ as defineCustomElement}

package/dist/components/swirl-modal-shell.js

@@ -1 +1 @@
-import{proxyCustomElement as s,HTMLElement as l,createEvent as e,h as o,Host as t,transformTag as i}from"@stencil/core/internal/client";import{d as a,e as c}from"./bodyScrollLock.esm.js";import{c as r}from"./index2.js";import{d as n}from"./swirl-button2.js";const d=s(class extends l{constructor(s){super(),!1!==s&&this.__registerHost(),this.closeModal=e(this,"closeModal",7),this.isClosing=!0,this.onDialogClose=()=>{this.closeModal.emit()},this.onKeyDown=s=>{"Escape"===s.code&&(s.stopImmediatePropagation(),s.preventDefault(),this.close())},this.onContentClick=s=>{s.stopPropagation()},this.onClose=()=>{this.close()}}componentDidLoad(){this.setDialogCustomProps(),requestAnimationFrame((()=>{this.modalEl.showModal(),a(this.scrollContainerEl),this.isClosing=!1}))}disconnectedCallback(){this.modalEl?.open&&this.modalEl.close(),c(this.scrollContainerEl)}async close(){this.isClosing=!0,setTimeout((()=>{this.modalEl.close()}),300)}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}render(){const s=r("modal-shell",{"modal-shell--closing":this.isClosing});return o(t,{key:"39394033a5231ee05b32fcb4924c4f275ca81b44"},o("dialog",{key:"971e25d146bb0940de5478025bb0f2daefc51907","aria-label":this.label,class:s,onClose:this.onDialogClose,onKeyDown:this.onKeyDown,ref:s=>this.modalEl=s},o("div",{key:"9ddda98b72aa173f0ca302e4d92f212cb91c7610",class:"modal-shell__backdrop"}),o("div",{key:"b1a0edd906c0aa8cdce5d168688bcbb4433580c3",class:"modal-shell__scroll-container",onClick:this.onClose,ref:s=>this.scrollContainerEl=s},o("div",{key:"eea94a4948df43d10d154b5722b648b0f9bdc184",class:"modal-shell__scroll-container__content",onClick:this.onContentClick},o("slot",{key:"341a4ca6338ecc9182adfb4390e89b3b46234061"}))),o("swirl-button",{key:"b7e0ef831a89f1edfcf665dd5a8a0be5efb46144",class:"modal-shell__close-button",icon:"<swirl-icon-close color='strong'></swirl-icon-close>",label:this.closeButtonLabel,hideLabel:!0,variant:"translucent",onClick:this.onClose})))}static get style(){return".sc-swirl-modal-shell-h{display:block}.sc-swirl-modal-shell-h *.sc-swirl-modal-shell{box-sizing:border-box}.modal-shell.sc-swirl-modal-shell{position:fixed;inset:0;z-index:var(--s-z-40);border:none;padding:0;width:100%;height:100%;max-width:none;max-height:none;overflow:visible;background:transparent}.modal-shell.sc-swirl-modal-shell::backdrop{display:none}.modal-shell__backdrop.sc-swirl-modal-shell{position:fixed;inset:0;z-index:1;background-color:var(--s-translucent-medium-default);opacity:1;-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));transition:opacity 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out;transition:opacity 0.3s ease-out, backdrop-filter 0.3s ease-out;transition:opacity 0.3s ease-out, backdrop-filter 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out}.modal-shell__scroll-container.sc-swirl-modal-shell{overflow-y:auto;position:fixed;inset:0;z-index:2;display:grid;padding:var(--s-space-24);justify-content:center;align-items:center}.modal-shell__scroll-container__content.sc-swirl-modal-shell{opacity:1;transform:scale(1);transition:opacity 0.2s ease-out,     transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1)}.modal-shell__close-button.sc-swirl-modal-shell{position:fixed;top:var(--s-space-16);right:var(--s-space-16);z-index:3;opacity:1;transform:scale(1);transition:opacity 0.2s ease-out,     transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1)}.modal-shell--closing.sc-swirl-modal-shell .modal-shell__backdrop.sc-swirl-modal-shell{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}.modal-shell--closing.sc-swirl-modal-shell .modal-shell__scroll-container__content.sc-swirl-modal-shell,.modal-shell--closing.sc-swirl-modal-shell .modal-shell__close-button.sc-swirl-modal-shell{opacity:0;transform:scale(1.1)}"}},[262,"swirl-modal-shell",{label:[1],closeButtonLabel:[1,"close-button-label"],isClosing:[32],close:[64]}]),h=d,b=function(){"undefined"!=typeof customElements&&["swirl-modal-shell","swirl-button"].forEach((s=>{switch(s){case"swirl-modal-shell":customElements.get(i(s))||customElements.define(i(s),d);break;case"swirl-button":customElements.get(i(s))||n()}}))};export{h as SwirlModalShell,b as defineCustomElement}
+import{proxyCustomElement as s,HTMLElement as l,createEvent as e,h as o,Host as t,transformTag as i}from"@stencil/core/internal/client";import{d as a,e as c}from"./bodyScrollLock.esm.js";import{c as r}from"./index2.js";import{d as n}from"./swirl-button2.js";const d=s(class extends l{constructor(s){super(),!1!==s&&this.__registerHost(),this.closeModal=e(this,"closeModal",7),this.isClosing=!0,this.onDialogClose=()=>{this.closeModal.emit()},this.onKeyDown=s=>{"Escape"===s.code&&(s.stopImmediatePropagation(),s.preventDefault(),this.close())},this.onContentClick=s=>{s.stopPropagation()},this.onClose=()=>{this.close()}}componentDidLoad(){this.setDialogCustomProps(),requestAnimationFrame((()=>{this.modalEl.showModal(),a(this.scrollContainerEl),this.isClosing=!1}))}disconnectedCallback(){this.modalEl?.open&&this.modalEl.close(),c(this.scrollContainerEl)}async close(){this.isClosing=!0,setTimeout((()=>{this.modalEl.close()}),300)}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}render(){const s=r("modal-shell",{"modal-shell--closing":this.isClosing});return o(t,{key:"4051280da8bcc61bad483d7276e217234b3df02f"},o("dialog",{key:"aa9c4a81b73ae40c8c63ae255bf920508976de72","aria-label":this.label,class:s,onClose:this.onDialogClose,onKeyDown:this.onKeyDown,ref:s=>this.modalEl=s},o("div",{key:"b9aef02ddb4de9105fa7818c23858c5d46a53f2e",class:"modal-shell__backdrop"}),o("div",{key:"0a054404e81239212293dac22c19170753a06173",class:"modal-shell__scroll-container",onClick:this.onClose,ref:s=>this.scrollContainerEl=s},o("div",{key:"212d7890ef2364fe998c954f6e92e5ebaec40c87",class:"modal-shell__scroll-container__content",onClick:this.onContentClick},o("slot",{key:"bf794b1fbfb8647d725132aa3107be82e904ae59"}))),o("swirl-button",{key:"4319295c901bd830368d812e42db7a6bbd123437",class:"modal-shell__close-button",icon:"<swirl-icon-close color='strong'></swirl-icon-close>",label:this.closeButtonLabel,hideLabel:!0,variant:"translucent",onClick:this.onClose})))}static get style(){return".sc-swirl-modal-shell-h{display:block}.sc-swirl-modal-shell-h *.sc-swirl-modal-shell{box-sizing:border-box}.modal-shell.sc-swirl-modal-shell{position:fixed;inset:0;z-index:var(--s-z-40);border:none;padding:0;width:100%;height:100%;max-width:none;max-height:none;overflow:visible;background:transparent}.modal-shell.sc-swirl-modal-shell::backdrop{display:none}.modal-shell__backdrop.sc-swirl-modal-shell{position:fixed;inset:0;z-index:1;background-color:var(--s-translucent-medium-default);opacity:1;-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));transition:opacity 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out;transition:opacity 0.3s ease-out, backdrop-filter 0.3s ease-out;transition:opacity 0.3s ease-out, backdrop-filter 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out}.modal-shell__scroll-container.sc-swirl-modal-shell{overflow-y:auto;position:fixed;inset:0;z-index:2;display:grid;padding:var(--s-space-24);justify-content:center;align-items:center}.modal-shell__scroll-container__content.sc-swirl-modal-shell{opacity:1;transform:scale(1);transition:opacity 0.2s ease-out,     transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1)}.modal-shell__close-button.sc-swirl-modal-shell{position:fixed;top:var(--s-space-16);right:var(--s-space-16);z-index:3;opacity:1;transform:scale(1);transition:opacity 0.2s ease-out,     transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1)}.modal-shell--closing.sc-swirl-modal-shell .modal-shell__backdrop.sc-swirl-modal-shell{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}.modal-shell--closing.sc-swirl-modal-shell .modal-shell__scroll-container__content.sc-swirl-modal-shell,.modal-shell--closing.sc-swirl-modal-shell .modal-shell__close-button.sc-swirl-modal-shell{opacity:0;transform:scale(1.1)}"}},[262,"swirl-modal-shell",{label:[1],closeButtonLabel:[1,"close-button-label"],isClosing:[32],close:[64]}]),h=d,b=function(){"undefined"!=typeof customElements&&["swirl-modal-shell","swirl-button"].forEach((s=>{switch(s){case"swirl-modal-shell":customElements.get(i(s))||customElements.define(i(s),d);break;case"swirl-button":customElements.get(i(s))||n()}}))};export{h as SwirlModalShell,b as defineCustomElement}

package/dist/components/swirl-modal.js

@@ -1 +1 @@
-import{proxyCustomElement as a,HTMLElement as e,createEvent as o,h as d,Host as t,transformTag as s}from"@stencil/core/internal/client";import{d as i,e as r}from"./bodyScrollLock.esm.js";import{c as l}from"./index2.js";import{t as n}from"./index.esm.js";import{d as c}from"./swirl-button2.js";import{d as h}from"./swirl-button-group2.js";import{d as m}from"./swirl-heading2.js";import{d as b}from"./swirl-stack2.js";const f=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.toggleFullscreen=o(this,"toggleFullscreen",3),this.modalClose=o(this,"modalClose",3),this.modalOpen=o(this,"modalOpen",3),this.primaryAction=o(this,"primaryAction",3),this.requestModalClose=o(this,"requestModalClose",3),this.secondaryAction=o(this,"secondaryAction",3),this.sidebarClose=o(this,"sidebarClose",3),this.toggleDialog=o(this,"toggleDialog",7),this.closable=!0,this.closeButtonLabel="Close modal",this.fullscreenEnableButtonLabel="Full screen",this.fullscreenDisableButtonLabel="Exit full screen",this.padded=!0,this.variant="default",this.sidebarPadded=!0,this.sidebarFooterPadded=!0,this.sidebarCloseButtonLabel="Close sidebar",this.opening=!1,this.isFullscreen=!1,this.isFullscreenTransitioning=!1,this.closing=!1,this.scrollable=!1,this.scrolled=!1,this.scrolledDown=!1,this.sidebarScrolled=!1,this.sidebarScrolledDown=!1,this.sidebarScrollable=!1,this.onKeyDown=a=>{"Escape"===a.code&&(a.stopImmediatePropagation(),a.preventDefault(),this.close())},this.onClose=()=>{this.closing=!1,this.unlockBodyScroll(),this.modalClose.emit()},this.onToggle=a=>{const e={newState:a.newState,dialog:this.modalEl};this.el.isConnected?this.toggleDialog.emit(e):document.dispatchEvent(new CustomEvent("toggleDialog",{bubbles:!0,composed:!0,detail:e}))},this.onBackdropClick=()=>{this.close()},this.onCloseButtonClick=()=>{this.close()},this.onFullscreenButtonClick=()=>{this.setFullscreen(!this.isFullscreen)},this.onSidebarCloseButtonClick=()=>{this.hideSidebarContent=!0,this.sidebarClose.emit()},this.onPrimaryAction=a=>{this.primaryAction.emit(a)},this.onSecondaryAction=a=>{this.secondaryAction.emit(a)},this.determineScrollStatus=()=>{this.determineMainScrollStatus(),this.determineSidebarScrollStatus()},this.determineMainScrollStatus=()=>{const a=this.scrollContainer?.scrollTop>0,e=Math.ceil(this.scrollContainer?.scrollTop+this.scrollContainer?.offsetHeight)>=this.scrollContainer?.scrollHeight,o=this.scrollContainer?.scrollHeight>this.scrollContainer?.offsetHeight;a!==this.scrolled&&(this.scrolled=a),e!==this.scrolledDown&&(this.scrolledDown=e),o!==this.scrollable&&(this.scrollable=o)},this.determineSidebarScrollStatus=()=>{const a=this.sidebarScrollContainer?.scrollTop>0,e=Math.ceil(this.sidebarScrollContainer?.scrollTop+this.sidebarScrollContainer?.offsetHeight)>=this.sidebarScrollContainer?.scrollHeight,o=this.sidebarScrollContainer?.scrollHeight>this.sidebarScrollContainer?.offsetHeight;a!==this.sidebarScrolled&&(this.sidebarScrolled=a),e!==this.sidebarScrolledDown&&(this.sidebarScrolledDown=e),o!==this.sidebarScrollable&&(this.sidebarScrollable=o)}}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps(),this.determineScrollStatus(),this.updateCustomFooterStatus(),this.updateCustomHeaderStatus(),this.updateHeaderToolsStatus(),this.updateSecondaryContentStatus(),this.updateSidebarContentStatus(),this.updateSidebarFooterStatus()}disconnectedCallback(){this.mutationObserver?.disconnect(),this.modalEl?.open&&this.modalEl.close(),this.unlockBodyScroll()}onWindowResize(){this.determineScrollStatus()}async open(a){this.opening=!0,this.temporaryReturnFocusTo=a,this.modalEl&&(this.setupMutationObserver(),this.modalEl.showModal(),this.modalOpen.emit(),this.mutationObserver.observe(this.modalEl,{subtree:!0,childList:!0}),this.lockBodyScroll(),this.determineScrollStatus(),setTimeout((()=>{this.handleAutoFocus()}),200))}async close(a){this.closing||(a||this.requestModalClose.emit(),(this.closable||a)&&(this.closing=!0,this.unlockBodyScroll(),setTimeout((()=>{this.mutationObserver?.disconnect(),this.modalEl.close(),this.customFocusReturn()}),150)))}async setFullscreen(a){this.isFullscreen!==a&&(this.isFullscreenTransitioning=!0,this.isFullscreen=a,this.toggleFullscreen.emit(this.isFullscreen),setTimeout((()=>this.isFullscreenTransitioning=!1),150))}async getScrollContainer(){return this.scrollContainer}updateCustomFooterStatus(){this.hasCustomFooter=!!this.el.querySelector(':scope > [slot="custom-footer"]')}updateCustomHeaderStatus(){this.hasCustomHeader=!!this.el.querySelector(':scope > [slot="custom-header"]')}updateHeaderToolsStatus(){this.hasHeaderTools=!!this.el.querySelector(':scope > [slot="header-tools"]')}updateSecondaryContentStatus(){this.hasSecondaryContent=!!this.el.querySelector(':scope > [slot="secondary-content"]')}updateSidebarContentStatus(){this.hasSidebarContent=!!this.el.querySelector(':scope > [slot="sidebar-content"]')}updateSidebarFooterStatus(){this.hasSidebarFooter=!!this.el.querySelector(':scope > [slot="sidebar-footer"]')}handleAutoFocus(){this.el.querySelector("input[autofocus]")?.focus()}lockBodyScroll(){i(this.scrollContainer),i(this.sidebarScrollContainer)}setupMutationObserver(){this.mutationObserver=new MutationObserver((()=>{this.modalEl?.open&&document.activeElement===document.body&&n(this.modalEl).at(0)?.focus()}))}unlockBodyScroll(){this.scrollContainer&&r(this.scrollContainer),this.sidebarScrollContainer&&r(this.sidebarScrollContainer)}ensureOpening(){this.opening&&!this.modalEl?.open&&this.open()}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}customFocusReturn(){const a=this.temporaryReturnFocusTo??this.returnFocusTo;if(!a)return;const e="string"==typeof a?document.querySelector(a):a,o=n(e,{includeContainer:!0,getShadowRoot:!0});o.length>0&&o[0].focus(),this.temporaryReturnFocusTo=void 0}render(){const a=!!this.primaryActionLabel||!!this.secondaryActionLabel,e=l("modal","modal--variant-"+this.variant,{"modal--closing":this.closing,"modal--fullscreen":this.isFullscreen,"modal--fullscreen-transitioning":this.isFullscreenTransitioning,"modal--has-custom-footer":this.hasCustomFooter,"modal--has-custom-header":this.hasCustomHeader,"modal--has-header-tools":this.hasHeaderTools,"modal--has-secondary-content":this.hasSecondaryContent&&!this.hideSecondaryContent,"modal--hide-label":this.hideLabel,"modal--padded":this.padded,"modal--scrollable":this.scrollable,"modal--scrolled":this.scrolled,"modal--hide-scrolled-header-border":this.hideScrolledHeaderBorder,"modal--scrolled-down":this.scrolledDown,"modal--hide-secondary-content-borders":this.hideSecondaryContentBorders,"modal--has-sidebar-content":this.hasSidebarContent&&!this.hideSidebarContent,"modal--sidebar-padded":this.sidebarPadded,"modal--has-sidebar-footer":this.hasSidebarFooter&&this.hasSidebarContent&&!this.hideSidebarContent,"modal--sidebar-footer-padded":this.sidebarFooterPadded,"modal--sidebar-scrolled":this.sidebarScrolled,"modal--sidebar-scrolled-down":this.sidebarScrolledDown,"modal--sidebar-scrollable":this.sidebarScrollable});return d(t,{key:"3bab965c2708bf255b956b240e56555b1b443277"},d("dialog",{key:"48dcd180510baec19ea53d3abafb028ad4962b3b","aria-label":this.label,class:e,onClose:this.onClose,onKeyDown:this.onKeyDown,onToggle:this.onToggle,ref:a=>this.modalEl=a},d("div",{key:"1341b744ec323a672bf2512d63f884c7420a83a4",class:"modal__backdrop",onClick:this.onBackdropClick}),d("div",{key:"d17efa56a1bb7423f057d2f08a65c2754fce5c9c",class:"modal__body",part:"modal__body",style:this.isFullscreen?{}:{"--swirl-modal-max-height":this.maxHeight,"--swirl-modal-height":this.height,minHeight:this.minHeight,maxWidth:this.maxWidth}},d("aside",{key:"bc65376ab51ed2096a7a944a4ddb683326653846",class:"modal__sidebar"},this.sidebarLabel&&d("header",{key:"ad831eb4a52b33eb5c08a4fabba1b295a30f4390",class:l("modal__sidebar-header",{"modal__sidebar-header--has-close-button":this.hasSidebarCloseButton})},this.hasSidebarCloseButton&&d("swirl-button",{key:"5573557bac8ce5bd007192f8502ca744fb8e707c",hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),d("swirl-heading",{key:"320fba10818ff129b6e61fe74c7b6b33fa713c22",as:"h3",class:"modal__sidebar-heading",level:5,text:this.sidebarLabel})),d("div",{key:"c595d8994946543b5b1e9b384e5a39cc98e9f690",class:"modal__sidebar-content",onScroll:this.determineSidebarScrollStatus,ref:a=>this.sidebarScrollContainer=a},d("slot",{key:"2148ae23f35a133a1ccb15a249a8fa9e8dea6507",name:"sidebar-content"})),d("div",{key:"da7402919cf52287a2a24f1358e809eae916f321",class:"modal__sidebar-footer",part:"modal__sidebar-footer"},d("slot",{key:"140d9cf5e929f580ee8b49f61b17a0cbeb9148be",name:"sidebar-footer"}))),d("div",{key:"6c43ffc3a3dbab48d38e3c38be1d3ca797c0357a",class:"modal__main-content"},d("header",{key:"e99187094de64c62e1a8269fc37db469907a9074",class:"modal__custom-header",part:"modal__custom-header"},d("slot",{key:"49505aeb98933c5e9c68cb76b07aab5b9d353a6b",name:"custom-header"})),(!this.hideLabel||!this.hideCloseButton)&&d("header",{key:"00ff155aca9e69a30bf3fafdf0dcc5bdb6c3923b",class:"modal__header"},d("div",{key:"195a927f8a2bf9052e4bb4e373cbe33ee519d21b",class:"modal__header-bar"},!this.hideCloseButton&&d("swirl-button",{key:"73cfe9392cdf24da57cbcfe3904841eb58eeb1d8",class:"modal__close-button",hideLabel:!0,icon:"default"===this.variant?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.closeButtonLabel,onClick:this.onCloseButtonClick}),this.showFullscreenButton&&d("swirl-button",{key:"547254ca65f8ac11f3ec7dd65848494dfa4a2090",class:"modal__fullscreen-button",hideLabel:!0,icon:this.isFullscreen?"<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>":"<swirl-icon-open-in-full></swirl-icon-open-in-full>",label:this.isFullscreen?this.fullscreenDisableButtonLabel:this.fullscreenEnableButtonLabel,onClick:this.onFullscreenButtonClick}),!this.hideLabel&&d("swirl-heading",{key:"fa82af01217e6984203c7eb2fa00ccc63236f1e1",as:"h2",class:"modal__heading",level:3,text:this.label}))),d("div",{key:"edb394854ca6a0e7bc0659e6980bc2b2400dd622",class:"modal__content-container",style:{gap:this.contentGap?`var(--s-space-${this.contentGap})`:void 0}},d("div",{key:"fda826c51dd7739ec1ad577d793de5eccf5d1dc3",class:"modal__primary-content",style:{maxWidth:this.primaryContentMaxWidth,flex:this.primaryContentFlex}},d("div",{key:"631f275a56c4f8829f4bb8c934b4b6b5a5d05239",class:"modal__header-tools",part:"modal__header-tools"},d("slot",{key:"30f443e6d10d320355681e4c1359218ae4ecd261",name:"header-tools"})),d("div",{key:"9f08c047103c98787c3ddeee7479f7fac8ab913b",class:"modal__content",onScroll:this.determineMainScrollStatus,part:"modal__content",ref:a=>this.scrollContainer=a},d("slot",{key:"c8f247b7d13d5fa3482d2f141d0b14c7001b5709"}))),d("div",{key:"80e4be1fc084dcb1b894a457ffb77c0f257664e2",class:"modal__secondary-content",style:{maxWidth:this.secondaryContentMaxWidth,flex:this.secondaryContentFlex,padding:this.secondaryContentPadding?`var(--s-space-${this.secondaryContentPadding})`:void 0,paddingBlockEnd:this.secondaryContentPaddingBlockEnd?`var(--s-space-${this.secondaryContentPaddingBlockEnd})`:void 0,paddingBlockStart:this.secondaryContentPaddingBlockStart?`var(--s-space-${this.secondaryContentPaddingBlockStart})`:void 0,paddingInlineEnd:this.secondaryContentPaddingInlineEnd?`var(--s-space-${this.secondaryContentPaddingInlineEnd})`:void 0,paddingInlineStart:this.secondaryContentPaddingInlineStart?`var(--s-space-${this.secondaryContentPaddingInlineStart})`:void 0}},d("slot",{key:"59d6a5a871181f90c71a3a5ff55d2147f7e0cfe9",name:"secondary-content"}))),d("div",{key:"cb6bd37d37e52aeaf56e4cdcaa3e926bdc7f1f62",class:"modal__custom-footer"},d("slot",{key:"411df946d91ce1726cada07f8ce5c2e4a57acece",name:"custom-footer"})),a&&d("footer",{key:"1d37cfa5368d5d8969a3cf54c5af0623b60b2c00",class:"modal__controls"},d("swirl-button-group",{key:"2f755010175b1e7cb30c5724729888dff2a1edf7",wrap:!0},this.secondaryActionLabel&&d("swirl-button",{key:"fd53df1371b40ca2b88a8cd99aec53bcde90eeba",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&d("swirl-button",{key:"391edb43124f9d1e712438da87e40b0310cbc27f",intent:"primary",label:this.primaryActionLabel,onClick:this.onPrimaryAction,variant:"flat"})))))))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)     max(env(safe-area-inset-bottom), var(--s-space-12)) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)     max(env(safe-area-inset-bottom), var(--s-space-16)) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.modal::backdrop{display:none}.modal:not([open]){display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}.modal--variant-drawer .modal__header-bar .modal__fullscreen-button{display:none}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal--has-secondary-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) +         var(--swirl-modal-max-secondary-content-width)     )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal.modal--has-sidebar-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal.modal--has-sidebar-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)     )}@media (min-width: 768px){.modal.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--hide-scrolled-header-border):not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border).modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border) .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out,     max-height 0.15s ease-out, min-height 0.15s ease-out}@media (min-width: 768px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);min-height:0;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse}}.modal__fullscreen-button{display:none}@media (min-width: 768px){.modal__fullscreen-button{display:block}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;min-width:0;flex-basis:100%;flex-grow:1;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;min-width:0;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0;padding-bottom:env(safe-area-inset-bottom)}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +         var(--swirl-modal-max-secondary-content-width)     )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}"}},[257,"swirl-modal",{closable:[4],closeButtonLabel:[1,"close-button-label"],fullscreenEnableButtonLabel:[1,"fullscreen-enable-button-label"],fullscreenDisableButtonLabel:[1,"fullscreen-disable-button-label"],height:[1],hideCloseButton:[4,"hide-close-button"],hideLabel:[4,"hide-label"],label:[1],maxHeight:[1,"max-height"],minHeight:[1,"min-height"],maxWidth:[1,"max-width"],padded:[4],primaryActionLabel:[1,"primary-action-label"],secondaryActionLabel:[1,"secondary-action-label"],variant:[1],contentGap:[1,"content-gap"],hideSecondaryContent:[4,"hide-secondary-content"],primaryContentMaxWidth:[1,"primary-content-max-width"],secondaryContentMaxWidth:[1,"secondary-content-max-width"],primaryContentFlex:[1,"primary-content-flex"],secondaryContentFlex:[1,"secondary-content-flex"],hideSecondaryContentBorders:[4,"hide-secondary-content-borders"],returnFocusTo:[1,"return-focus-to"],secondaryContentPadding:[1,"secondary-content-padding"],secondaryContentPaddingBlockEnd:[1,"secondary-content-padding-block-end"],secondaryContentPaddingBlockStart:[1,"secondary-content-padding-block-start"],secondaryContentPaddingInlineEnd:[1,"secondary-content-padding-inline-end"],secondaryContentPaddingInlineStart:[1,"secondary-content-padding-inline-start"],showFullscreenButton:[4,"show-fullscreen-button"],sidebarLabel:[1,"sidebar-label"],sidebarPadded:[4,"sidebar-padded"],sidebarFooterPadded:[4,"sidebar-footer-padded"],hideSidebarContent:[1028,"hide-sidebar-content"],hasSidebarCloseButton:[4,"has-sidebar-close-button"],sidebarCloseButtonLabel:[1,"sidebar-close-button-label"],hideScrolledHeaderBorder:[4,"hide-scrolled-header-border"],opening:[32],isFullscreen:[32],isFullscreenTransitioning:[32],closing:[32],hasCustomHeader:[32],hasCustomFooter:[32],hasHeaderTools:[32],hasSecondaryContent:[32],scrollable:[32],scrolled:[32],scrolledDown:[32],hasSidebarContent:[32],hasSidebarFooter:[32],sidebarScrolled:[32],sidebarScrolledDown:[32],sidebarScrollable:[32],open:[64],close:[64],setFullscreen:[64],getScrollContainer:[64]},[[9,"resize","onWindowResize"]]]),p=f,u=function(){"undefined"!=typeof customElements&&["swirl-modal","swirl-button","swirl-button-group","swirl-heading","swirl-stack"].forEach((a=>{switch(a){case"swirl-modal":customElements.get(s(a))||customElements.define(s(a),f);break;case"swirl-button":customElements.get(s(a))||c();break;case"swirl-button-group":customElements.get(s(a))||h();break;case"swirl-heading":customElements.get(s(a))||m();break;case"swirl-stack":customElements.get(s(a))||b()}}))};export{p as SwirlModal,u as defineCustomElement}
+import{proxyCustomElement as a,HTMLElement as e,createEvent as o,h as d,Host as t,transformTag as s}from"@stencil/core/internal/client";import{d as i,e as r}from"./bodyScrollLock.esm.js";import{c as l}from"./index2.js";import{t as n}from"./index.esm.js";import{d as c}from"./swirl-button2.js";import{d as h}from"./swirl-button-group2.js";import{d as m}from"./swirl-heading2.js";import{d as b}from"./swirl-stack2.js";const f=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.toggleFullscreen=o(this,"toggleFullscreen",3),this.modalClose=o(this,"modalClose",3),this.modalOpen=o(this,"modalOpen",3),this.primaryAction=o(this,"primaryAction",3),this.requestModalClose=o(this,"requestModalClose",3),this.secondaryAction=o(this,"secondaryAction",3),this.sidebarClose=o(this,"sidebarClose",3),this.toggleDialog=o(this,"toggleDialog",7),this.closable=!0,this.closeButtonLabel="Close modal",this.fullscreenEnableButtonLabel="Full screen",this.fullscreenDisableButtonLabel="Exit full screen",this.padded=!0,this.variant="default",this.sidebarPadded=!0,this.sidebarFooterPadded=!0,this.sidebarCloseButtonLabel="Close sidebar",this.opening=!1,this.isFullscreen=!1,this.isFullscreenTransitioning=!1,this.closing=!1,this.scrollable=!1,this.scrolled=!1,this.scrolledDown=!1,this.sidebarScrolled=!1,this.sidebarScrolledDown=!1,this.sidebarScrollable=!1,this.onKeyDown=a=>{"Escape"===a.code&&(a.stopImmediatePropagation(),a.preventDefault(),this.close())},this.onClose=()=>{this.closing=!1,this.unlockBodyScroll(),this.modalClose.emit()},this.onToggle=a=>{const e={newState:a.newState,dialog:this.modalEl};this.el.isConnected?this.toggleDialog.emit(e):document.dispatchEvent(new CustomEvent("toggleDialog",{bubbles:!0,composed:!0,detail:e}))},this.onBackdropClick=()=>{this.close()},this.onCloseButtonClick=()=>{this.close()},this.onFullscreenButtonClick=()=>{this.setFullscreen(!this.isFullscreen)},this.onSidebarCloseButtonClick=()=>{this.hideSidebarContent=!0,this.sidebarClose.emit()},this.onPrimaryAction=a=>{this.primaryAction.emit(a)},this.onSecondaryAction=a=>{this.secondaryAction.emit(a)},this.determineScrollStatus=()=>{this.determineMainScrollStatus(),this.determineSidebarScrollStatus()},this.determineMainScrollStatus=()=>{const a=this.scrollContainer?.scrollTop>0,e=Math.ceil(this.scrollContainer?.scrollTop+this.scrollContainer?.offsetHeight)>=this.scrollContainer?.scrollHeight,o=this.scrollContainer?.scrollHeight>this.scrollContainer?.offsetHeight;a!==this.scrolled&&(this.scrolled=a),e!==this.scrolledDown&&(this.scrolledDown=e),o!==this.scrollable&&(this.scrollable=o)},this.determineSidebarScrollStatus=()=>{const a=this.sidebarScrollContainer?.scrollTop>0,e=Math.ceil(this.sidebarScrollContainer?.scrollTop+this.sidebarScrollContainer?.offsetHeight)>=this.sidebarScrollContainer?.scrollHeight,o=this.sidebarScrollContainer?.scrollHeight>this.sidebarScrollContainer?.offsetHeight;a!==this.sidebarScrolled&&(this.sidebarScrolled=a),e!==this.sidebarScrolledDown&&(this.sidebarScrolledDown=e),o!==this.sidebarScrollable&&(this.sidebarScrollable=o)}}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps(),this.determineScrollStatus(),this.updateCustomFooterStatus(),this.updateCustomHeaderStatus(),this.updateHeaderToolsStatus(),this.updateSecondaryContentStatus(),this.updateSidebarContentStatus(),this.updateSidebarFooterStatus()}disconnectedCallback(){this.mutationObserver?.disconnect(),this.modalEl?.open&&this.modalEl.close(),this.unlockBodyScroll()}onWindowResize(){this.determineScrollStatus()}async open(a){this.opening=!0,this.temporaryReturnFocusTo=a,this.modalEl&&(this.setupMutationObserver(),this.modalEl.showModal(),this.modalOpen.emit(),this.mutationObserver.observe(this.modalEl,{subtree:!0,childList:!0}),this.lockBodyScroll(),this.determineScrollStatus(),setTimeout((()=>{this.handleAutoFocus()}),200))}async close(a){this.closing||(a||this.requestModalClose.emit(),(this.closable||a)&&(this.closing=!0,this.unlockBodyScroll(),setTimeout((()=>{this.mutationObserver?.disconnect(),this.modalEl.close(),this.customFocusReturn()}),150)))}async setFullscreen(a){this.isFullscreen!==a&&(this.isFullscreenTransitioning=!0,this.isFullscreen=a,this.toggleFullscreen.emit(this.isFullscreen),setTimeout((()=>this.isFullscreenTransitioning=!1),150))}async getScrollContainer(){return this.scrollContainer}updateCustomFooterStatus(){this.hasCustomFooter=!!this.el.querySelector(':scope > [slot="custom-footer"]')}updateCustomHeaderStatus(){this.hasCustomHeader=!!this.el.querySelector(':scope > [slot="custom-header"]')}updateHeaderToolsStatus(){this.hasHeaderTools=!!this.el.querySelector(':scope > [slot="header-tools"]')}updateSecondaryContentStatus(){this.hasSecondaryContent=!!this.el.querySelector(':scope > [slot="secondary-content"]')}updateSidebarContentStatus(){this.hasSidebarContent=!!this.el.querySelector(':scope > [slot="sidebar-content"]')}updateSidebarFooterStatus(){this.hasSidebarFooter=!!this.el.querySelector(':scope > [slot="sidebar-footer"]')}handleAutoFocus(){this.el.querySelector("input[autofocus]")?.focus()}lockBodyScroll(){i(this.scrollContainer),i(this.sidebarScrollContainer)}setupMutationObserver(){this.mutationObserver=new MutationObserver((()=>{this.modalEl?.open&&document.activeElement===document.body&&n(this.modalEl).at(0)?.focus()}))}unlockBodyScroll(){this.scrollContainer&&r(this.scrollContainer),this.sidebarScrollContainer&&r(this.sidebarScrollContainer)}ensureOpening(){this.opening&&!this.modalEl?.open&&this.open()}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}customFocusReturn(){const a=this.temporaryReturnFocusTo??this.returnFocusTo;if(!a)return;const e="string"==typeof a?document.querySelector(a):a,o=n(e,{includeContainer:!0,getShadowRoot:!0});o.length>0&&o[0].focus(),this.temporaryReturnFocusTo=void 0}render(){const a=!!this.primaryActionLabel||!!this.secondaryActionLabel,e=l("modal","modal--variant-"+this.variant,{"modal--closing":this.closing,"modal--fullscreen":this.isFullscreen,"modal--fullscreen-transitioning":this.isFullscreenTransitioning,"modal--has-custom-footer":this.hasCustomFooter,"modal--has-custom-header":this.hasCustomHeader,"modal--has-header-tools":this.hasHeaderTools,"modal--has-secondary-content":this.hasSecondaryContent&&!this.hideSecondaryContent,"modal--hide-label":this.hideLabel,"modal--padded":this.padded,"modal--scrollable":this.scrollable,"modal--scrolled":this.scrolled,"modal--hide-scrolled-header-border":this.hideScrolledHeaderBorder,"modal--scrolled-down":this.scrolledDown,"modal--hide-secondary-content-borders":this.hideSecondaryContentBorders,"modal--has-sidebar-content":this.hasSidebarContent&&!this.hideSidebarContent,"modal--sidebar-padded":this.sidebarPadded,"modal--has-sidebar-footer":this.hasSidebarFooter&&this.hasSidebarContent&&!this.hideSidebarContent,"modal--sidebar-footer-padded":this.sidebarFooterPadded,"modal--sidebar-scrolled":this.sidebarScrolled,"modal--sidebar-scrolled-down":this.sidebarScrolledDown,"modal--sidebar-scrollable":this.sidebarScrollable});return d(t,{key:"d7b463120cce49324fd02b74ea455fe6d7e26f68"},d("dialog",{key:"afd707e26604aa27aa74896d2c7c3e872ff997d6","aria-label":this.label,class:e,onClose:this.onClose,onKeyDown:this.onKeyDown,onToggle:this.onToggle,ref:a=>this.modalEl=a},d("div",{key:"7e19c82a999edf050d1b1acdb65697cf886c34d4",class:"modal__backdrop",onClick:this.onBackdropClick}),d("div",{key:"421609fd39a0b1bca98beb71eb44012d35e8a3f2",class:"modal__body",part:"modal__body",style:this.isFullscreen?{}:{"--swirl-modal-max-height":this.maxHeight,"--swirl-modal-height":this.height,minHeight:this.minHeight,maxWidth:this.maxWidth}},d("aside",{key:"e1904a15f51ae48682e9763c49f1a864ef63858a",class:"modal__sidebar"},this.sidebarLabel&&d("header",{key:"e5631b66d00002b1c86ccc15d5574a3f75eb1276",class:l("modal__sidebar-header",{"modal__sidebar-header--has-close-button":this.hasSidebarCloseButton})},this.hasSidebarCloseButton&&d("swirl-button",{key:"43c1d4ed935c152b8e1803008ed92285be458476",hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),d("swirl-heading",{key:"72e24fdc81cd0e10aa231de534fab519a069a9c5",as:"h3",class:"modal__sidebar-heading",level:5,text:this.sidebarLabel})),d("div",{key:"4373873f7ac32d44af1c1668f4f9246f86d997aa",class:"modal__sidebar-content",onScroll:this.determineSidebarScrollStatus,ref:a=>this.sidebarScrollContainer=a},d("slot",{key:"df2447e780b37abec413617b9a4966516bd5c336",name:"sidebar-content"})),d("div",{key:"667820d352b882fd22b5da1daa621b4185c7bfe3",class:"modal__sidebar-footer",part:"modal__sidebar-footer"},d("slot",{key:"9f7cc5f2cd9b1bf3aafc5c45f7cce12974ccdd20",name:"sidebar-footer"}))),d("div",{key:"7f57ca915e13bf961deca99e60a78abed1de1232",class:"modal__main-content"},d("header",{key:"ca6ee60bb771eecc8fc0ad6ff1bc4910d3525e6d",class:"modal__custom-header",part:"modal__custom-header"},d("slot",{key:"8e99cd4cd3a6932b73a7a4521a4da40334609c29",name:"custom-header"})),(!this.hideLabel||!this.hideCloseButton)&&d("header",{key:"114dab353118c62f727929e8c212387dbba4068d",class:"modal__header"},d("div",{key:"8a61edf1141c65948847abc50ec445788c9f915c",class:"modal__header-bar"},!this.hideCloseButton&&d("swirl-button",{key:"9918feb9c915ec04d537c9a7e72527f715285497",class:"modal__close-button",hideLabel:!0,icon:"default"===this.variant?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.closeButtonLabel,onClick:this.onCloseButtonClick}),this.showFullscreenButton&&d("swirl-button",{key:"1b5bba4ded02dc46328d4014c1f7ba960f13f000",class:"modal__fullscreen-button",hideLabel:!0,icon:this.isFullscreen?"<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>":"<swirl-icon-open-in-full></swirl-icon-open-in-full>",label:this.isFullscreen?this.fullscreenDisableButtonLabel:this.fullscreenEnableButtonLabel,onClick:this.onFullscreenButtonClick}),!this.hideLabel&&d("swirl-heading",{key:"409165669e31a0a520eb00f6b93b4423d1b43655",as:"h2",class:"modal__heading",level:3,text:this.label}))),d("div",{key:"c38c50e7a72853f1944b9d63a014356d20fcfdf9",class:"modal__content-container",style:{gap:this.contentGap?`var(--s-space-${this.contentGap})`:void 0}},d("div",{key:"f1298046865f16fbc5ae71466f8bcd9d0e08f31d",class:"modal__primary-content",style:{maxWidth:this.primaryContentMaxWidth,flex:this.primaryContentFlex}},d("div",{key:"fe6cdaf7550a032df17643447e2ffa0cf0bc4c96",class:"modal__header-tools",part:"modal__header-tools"},d("slot",{key:"c729a8a458f1e78b19a7ee721b691385154eb686",name:"header-tools"})),d("div",{key:"1f33b79800c345cc0d8c0526e980f9ec2dbee7b5",class:"modal__content",onScroll:this.determineMainScrollStatus,part:"modal__content",ref:a=>this.scrollContainer=a},d("slot",{key:"89788fc78e51879c1583590505f220ad41ad4985"}))),d("div",{key:"266e88b3164ffa1d39271a8df986e82a1ef3fc99",class:"modal__secondary-content",style:{maxWidth:this.secondaryContentMaxWidth,flex:this.secondaryContentFlex,padding:this.secondaryContentPadding?`var(--s-space-${this.secondaryContentPadding})`:void 0,paddingBlockEnd:this.secondaryContentPaddingBlockEnd?`var(--s-space-${this.secondaryContentPaddingBlockEnd})`:void 0,paddingBlockStart:this.secondaryContentPaddingBlockStart?`var(--s-space-${this.secondaryContentPaddingBlockStart})`:void 0,paddingInlineEnd:this.secondaryContentPaddingInlineEnd?`var(--s-space-${this.secondaryContentPaddingInlineEnd})`:void 0,paddingInlineStart:this.secondaryContentPaddingInlineStart?`var(--s-space-${this.secondaryContentPaddingInlineStart})`:void 0}},d("slot",{key:"4d9c947b55bfd7c14c405c3a23c19f9eee424519",name:"secondary-content"}))),d("div",{key:"d771f35af03691ebb00c520fbc97a85f3122524f",class:"modal__custom-footer"},d("slot",{key:"d78d5e4427be8bd111e934d666013de01a2163ca",name:"custom-footer"})),a&&d("footer",{key:"d56e2a8c865b28575f65b491dd9fcc26f697d5c4",class:"modal__controls"},d("swirl-button-group",{key:"f12f79d96db116421008d413f50615617f2c8148",wrap:!0},this.secondaryActionLabel&&d("swirl-button",{key:"c3d2902b07383e65ca16a2255f4a4b3a80dfc0a0",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&d("swirl-button",{key:"e9fe1b3159291658763536db5cb09eead6ffc73e",intent:"primary",label:this.primaryActionLabel,onClick:this.onPrimaryAction,variant:"flat"})))))))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)     max(env(safe-area-inset-bottom), var(--s-space-12)) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)     max(env(safe-area-inset-bottom), var(--s-space-16)) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.modal::backdrop{display:none}.modal:not([open]){display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}.modal--variant-drawer .modal__header-bar .modal__fullscreen-button{display:none}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal--has-secondary-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) +         var(--swirl-modal-max-secondary-content-width)     )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal.modal--has-sidebar-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal.modal--has-sidebar-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)     )}@media (min-width: 768px){.modal.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--hide-scrolled-header-border):not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border).modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border) .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out,     max-height 0.15s ease-out, min-height 0.15s ease-out}@media (min-width: 768px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);min-height:0;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse}}.modal__fullscreen-button{display:none}@media (min-width: 768px){.modal__fullscreen-button{display:block}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;min-width:0;flex-basis:100%;flex-grow:1;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;min-width:0;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0;padding-bottom:env(safe-area-inset-bottom)}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +         var(--swirl-modal-max-secondary-content-width)     )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}"}},[257,"swirl-modal",{closable:[4],closeButtonLabel:[1,"close-button-label"],fullscreenEnableButtonLabel:[1,"fullscreen-enable-button-label"],fullscreenDisableButtonLabel:[1,"fullscreen-disable-button-label"],height:[1],hideCloseButton:[4,"hide-close-button"],hideLabel:[4,"hide-label"],label:[1],maxHeight:[1,"max-height"],minHeight:[1,"min-height"],maxWidth:[1,"max-width"],padded:[4],primaryActionLabel:[1,"primary-action-label"],secondaryActionLabel:[1,"secondary-action-label"],variant:[1],contentGap:[1,"content-gap"],hideSecondaryContent:[4,"hide-secondary-content"],primaryContentMaxWidth:[1,"primary-content-max-width"],secondaryContentMaxWidth:[1,"secondary-content-max-width"],primaryContentFlex:[1,"primary-content-flex"],secondaryContentFlex:[1,"secondary-content-flex"],hideSecondaryContentBorders:[4,"hide-secondary-content-borders"],returnFocusTo:[1,"return-focus-to"],secondaryContentPadding:[1,"secondary-content-padding"],secondaryContentPaddingBlockEnd:[1,"secondary-content-padding-block-end"],secondaryContentPaddingBlockStart:[1,"secondary-content-padding-block-start"],secondaryContentPaddingInlineEnd:[1,"secondary-content-padding-inline-end"],secondaryContentPaddingInlineStart:[1,"secondary-content-padding-inline-start"],showFullscreenButton:[4,"show-fullscreen-button"],sidebarLabel:[1,"sidebar-label"],sidebarPadded:[4,"sidebar-padded"],sidebarFooterPadded:[4,"sidebar-footer-padded"],hideSidebarContent:[1028,"hide-sidebar-content"],hasSidebarCloseButton:[4,"has-sidebar-close-button"],sidebarCloseButtonLabel:[1,"sidebar-close-button-label"],hideScrolledHeaderBorder:[4,"hide-scrolled-header-border"],opening:[32],isFullscreen:[32],isFullscreenTransitioning:[32],closing:[32],hasCustomHeader:[32],hasCustomFooter:[32],hasHeaderTools:[32],hasSecondaryContent:[32],scrollable:[32],scrolled:[32],scrolledDown:[32],hasSidebarContent:[32],hasSidebarFooter:[32],sidebarScrolled:[32],sidebarScrolledDown:[32],sidebarScrollable:[32],open:[64],close:[64],setFullscreen:[64],getScrollContainer:[64]},[[9,"resize","onWindowResize"]]]),p=f,u=function(){"undefined"!=typeof customElements&&["swirl-modal","swirl-button","swirl-button-group","swirl-heading","swirl-stack"].forEach((a=>{switch(a){case"swirl-modal":customElements.get(s(a))||customElements.define(s(a),f);break;case"swirl-button":customElements.get(s(a))||c();break;case"swirl-button-group":customElements.get(s(a))||h();break;case"swirl-heading":customElements.get(s(a))||m();break;case"swirl-stack":customElements.get(s(a))||b()}}))};export{p as SwirlModal,u as defineCustomElement}

package/dist/components/swirl-option-list-item2.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Host as o,transformTag as l}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{D as r}from"./media-query.service.js";import{d as a}from"./swirl-icon-check-small2.js";import{d as c}from"./swirl-icon-check-strong2.js";import{d}from"./swirl-icon-drag-handle2.js";import{v as p}from"./v4.js";const m=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.toggleDrag=e(this,"toggleDrag",7),this.context="single-select",this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move option",this.selected=!1,this.indeterminate=!1,this.swirlAriaRole="option",this.truncateLabel=!0,this.iconSize=24,this.elementId=p(),this.mediaQueryUnsubscribe=()=>{},this.onDragHandleKeyDown=i=>{"Space"!==i.code&&"Enter"!==i.code||(i.preventDefault(),this.toggleDrag.emit(this.el))},this.onBlur=()=>{this.focused=!1},this.onFocus=()=>{this.focused=!0}}componentDidLoad(){this.mediaQueryUnsubscribe=r.subscribe((i=>{this.forceIconProps(i),this.updateIconSize(i)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(i){const t=this.iconEl?.children[0];t?.setAttribute("size",i?"20":"24")}updateIconSize(i){this.iconSize=i?20:24}render(){const i=this.disabled?"true":void 0,t=this.indeterminate?void 0:String(this.selected),e="multi-select"===this.context,l=Boolean(this.icon)&&"single-select"===this.context,r=Boolean(this.iconBadge),a=this.el.querySelector('[slot="avatar"]'),c=this.selected&&"single-select"===this.context,d=n("option-list-item",`option-list-item--context-${this.context}`,{"option-list-item--disabled":this.disabled,"option-list-item--draggable":this.allowDrag,"option-list-item--dragging":this.dragging,"option-list-item--selected":this.selected,"option-list-item--indeterminate":this.indeterminate&&!this.selected,"option-list-item--show-avatar":a});return s(o,{key:"52a1d24e235b20d741b77abaacfb6b4663128b6d"},s("div",{key:"38d03b62e009649916b51f32d39efd87fea67956","aria-checked":"menuitemradio"===this.swirlAriaRole?t:void 0,"aria-describedby":Boolean(this.description)?`option-list-item-${this.elementId}-description`:void 0,"aria-disabled":i,"aria-labelledby":`option-list-item-${this.elementId}-label`,"aria-selected":"option"===this.swirlAriaRole?t:void 0,class:d,id:`option-list-item-${this.elementId}`,onBlur:this.onBlur,onFocus:this.onFocus,part:"option-list-item",role:this.swirlAriaRole},l&&s("span",{key:"2bd2424233527896dd89e42fa113eaf32b4d4b77",class:"option-list-item__icon",innerHTML:this.icon,ref:i=>this.iconEl=i},r&&s("span",{key:"b47ca1e52e0dca2c83e95e335e1d55e57f0bf2c0",class:"option-list-item__icon-badge",innerHTML:this.iconBadge})),e&&s("span",{key:"1171ed3b5aea415c544b267b24490d70d00a39bb",class:"option-list-item__checkbox"},s("span",{key:"09c0cc4641f5bbc0484ab87d0ec2424eb140e098",class:"option-list-item__checkbox-box"},this.selected&&s("swirl-icon-check-strong",{key:"af5e8097c613b5b28d938d26ba13bdb0d28d557d",class:"option-list-item__checkbox-icon",size:16}),!this.selected&&this.indeterminate&&s("span",{key:"b5efee17eb4c9092e949ebbe1eb8d725d51230cf",class:"option-list-item__checkbox-indeterminate-icon"}))),s("span",{key:"590abf3450cd53c3dcb77f75dffe6729113a48d9",class:"option-list-item__avatar"},s("slot",{key:"31851a4c86c629f944dfd802dd1e6aabfa8c17df",name:"avatar"})),s("span",{key:"aaae4c12eab0494a86dbdf8e58662c9ea8e140a0",class:"option-list-item__label-container"},s("span",{key:"4d9c12065a5209a9b8cb0de65eb030113340e22f",class:"option-list-item__label",style:{whiteSpace:this.truncateLabel?"nowrap":"normal"},id:`option-list-item-${this.elementId}-label`,part:"option-list-item__label"},this.label),this.description&&s("span",{key:"15c6b005c2e25f3f7fd5646082c376f5240e487d",class:"option-list-item__description",id:`option-list-item-${this.elementId}-description`},this.description)),c&&s("span",{key:"9c54ebb298f8acf77ec49178c79cfacb0611de38",class:"option-list-item__selection-icon"},s("swirl-icon-check-small",{key:"18fa1156970f02703b64ddc0eef54205668acc22",size:this.iconSize}))),this.allowDrag&&s("button",{key:"02fed3521178f0b136c283e148af38c4debcf100","aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"option-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,tabIndex:this.focused?0:-1,type:"button"},s("swirl-icon-drag-handle",{key:"62af0737f74f62c8a446ae0b9266ce878a8ccc29",size:this.iconSize})))}get el(){return this}static get style(){return'.sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item--drag.sc-swirl-option-list-item-h{border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-medium-pressed)}.option-list-item.sc-swirl-option-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--s-border-radius-sm);align-items:center;background-color:transparent;cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-state-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-translucent-low-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-state-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-low-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),     0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-translucent-low-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item,.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item--disabled.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);color:var(--s-text-on-status);background-color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{filter:grayscale(100%)}.option-list-item--show-avatar.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{display:inline-flex}.option-list-item__label-container.sc-swirl-option-list-item{display:flex;flex-grow:1;flex-direction:column;overflow:hidden}.option-list-item__label-container.sc-swirl-option-list-item>*.sc-swirl-option-list-item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-subdued);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__description.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__avatar.sc-swirl-option-list-item{display:none;flex-shrink:0}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__icon.sc-swirl-option-list-item{width:1.25rem;height:1.25rem}}.option-list-item__icon-badge.sc-swirl-option-list-item{position:absolute;display:grid;bottom:0;right:0}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item{position:relative;width:100%;height:100%}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:"";transform:translate3d(-50%, -50%, 0)}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}'}},[262,"swirl-option-list-item",{allowDrag:[4,"allow-drag"],context:[1025],description:[1],disabled:[4],dragging:[4],dragHandleDescription:[1,"drag-handle-description"],dragHandleLabel:[1,"drag-handle-label"],icon:[1],iconBadge:[1,"icon-badge"],label:[1],selected:[1028],indeterminate:[4],swirlAriaRole:[1,"swirl-aria-role"],value:[1],truncateLabel:[4,"truncate-label"],iconSize:[32],focused:[32]}]);function h(){"undefined"!=typeof customElements&&["swirl-option-list-item","swirl-icon-check-small","swirl-icon-check-strong","swirl-icon-drag-handle"].forEach((i=>{switch(i){case"swirl-option-list-item":customElements.get(l(i))||customElements.define(l(i),m);break;case"swirl-icon-check-small":customElements.get(l(i))||a();break;case"swirl-icon-check-strong":customElements.get(l(i))||c();break;case"swirl-icon-drag-handle":customElements.get(l(i))||d()}}))}export{m as S,h as d}
+import{proxyCustomElement as i,HTMLElement as t,createEvent as e,h as s,Host as o,transformTag as l}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{D as r}from"./media-query.service.js";import{d as a}from"./swirl-icon-check-small2.js";import{d as c}from"./swirl-icon-check-strong2.js";import{d}from"./swirl-icon-drag-handle2.js";import{v as p}from"./v4.js";const m=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.toggleDrag=e(this,"toggleDrag",7),this.context="single-select",this.dragHandleDescription="Press spacebar to toggle grab",this.dragHandleLabel="Move option",this.selected=!1,this.indeterminate=!1,this.swirlAriaRole="option",this.truncateLabel=!0,this.iconSize=24,this.elementId=p(),this.mediaQueryUnsubscribe=()=>{},this.onDragHandleKeyDown=i=>{"Space"!==i.code&&"Enter"!==i.code||(i.preventDefault(),this.toggleDrag.emit(this.el))},this.onBlur=()=>{this.focused=!1},this.onFocus=()=>{this.focused=!0}}componentDidLoad(){this.mediaQueryUnsubscribe=r.subscribe((i=>{this.forceIconProps(i),this.updateIconSize(i)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(i){const t=this.iconEl?.children[0];t?.setAttribute("size",i?"20":"24")}updateIconSize(i){this.iconSize=i?20:24}render(){const i=this.disabled?"true":void 0,t=this.indeterminate?void 0:String(this.selected),e="multi-select"===this.context,l=Boolean(this.icon)&&"single-select"===this.context,r=Boolean(this.iconBadge),a=this.el.querySelector('[slot="avatar"]'),c=this.selected&&"single-select"===this.context,d=n("option-list-item",`option-list-item--context-${this.context}`,{"option-list-item--disabled":this.disabled,"option-list-item--draggable":this.allowDrag,"option-list-item--dragging":this.dragging,"option-list-item--selected":this.selected,"option-list-item--indeterminate":this.indeterminate&&!this.selected,"option-list-item--show-avatar":a});return s(o,{key:"7b7130db6b825e8b608e2b4ba29f78789e832d8e"},s("div",{key:"5b4b06ad99f5a3525b0821a43a19a1e07320b4d0","aria-checked":"menuitemradio"===this.swirlAriaRole?t:void 0,"aria-describedby":Boolean(this.description)?`option-list-item-${this.elementId}-description`:void 0,"aria-disabled":i,"aria-labelledby":`option-list-item-${this.elementId}-label`,"aria-selected":"option"===this.swirlAriaRole?t:void 0,class:d,id:`option-list-item-${this.elementId}`,onBlur:this.onBlur,onFocus:this.onFocus,part:"option-list-item",role:this.swirlAriaRole},l&&s("span",{key:"b54cac526dbb68e86f9a95b262d433ca4a69832e",class:"option-list-item__icon",innerHTML:this.icon,ref:i=>this.iconEl=i},r&&s("span",{key:"7194f36649bf9a8ec0f2b52a26e84577e9de9b65",class:"option-list-item__icon-badge",innerHTML:this.iconBadge})),e&&s("span",{key:"1c5989e694dfd41ae0d801bd5d6115d078ecacf9",class:"option-list-item__checkbox"},s("span",{key:"aaed6e8cdb21d999d23b4c0625330820661eb530",class:"option-list-item__checkbox-box"},this.selected&&s("swirl-icon-check-strong",{key:"1f9f0f67030ed686d7d7a0ba5692b2ea1c42b8bd",class:"option-list-item__checkbox-icon",size:16}),!this.selected&&this.indeterminate&&s("span",{key:"9bd4ae1d5ca18ff1aa753a6ee8d7585cb80f44d0",class:"option-list-item__checkbox-indeterminate-icon"}))),s("span",{key:"f7f9597ef2ecf28ccf679843a3ed1e4a0cc7a6ee",class:"option-list-item__avatar"},s("slot",{key:"29b8249ac00683f208cdb5880d4db3f1817eb661",name:"avatar"})),s("span",{key:"16a9f76136724412aad5ae9ebf70a5876eb5340a",class:"option-list-item__label-container"},s("span",{key:"60765c63f30d920d0ee6269e45f1b7aed2db4f20",class:"option-list-item__label",style:{whiteSpace:this.truncateLabel?"nowrap":"normal"},id:`option-list-item-${this.elementId}-label`,part:"option-list-item__label"},this.label),this.description&&s("span",{key:"fe43e9e863a3cd8563506b63b826812302ddc3e7",class:"option-list-item__description",id:`option-list-item-${this.elementId}-description`},this.description)),c&&s("span",{key:"e66cc07c150fd6909b1159e6eac954e14d045f9d",class:"option-list-item__selection-icon"},s("swirl-icon-check-small",{key:"58f1878c2369ee3679d8ab899ec6959ab3e610b4",size:this.iconSize}))),this.allowDrag&&s("button",{key:"d381c0be3d0246e1ed2d553cab9225de5428b20f","aria-describedby":this.dragHandleDescription,"aria-label":`${this.dragHandleLabel} "${this.label}"`,class:"option-list-item__drag-handle",onKeyDown:this.onDragHandleKeyDown,tabIndex:this.focused?0:-1,type:"button"},s("swirl-icon-drag-handle",{key:"ccc746574c30bb87cccc0b371a31b896bcdb70d2",size:this.iconSize})))}get el(){return this}static get style(){return'.sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item--drag.sc-swirl-option-list-item-h{border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-medium-pressed)}.option-list-item.sc-swirl-option-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--s-border-radius-sm);align-items:center;background-color:transparent;cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-state-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-translucent-low-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-state-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-low-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),     0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-translucent-low-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item,.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item--disabled.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);color:var(--s-text-on-status);background-color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{filter:grayscale(100%)}.option-list-item--show-avatar.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{display:inline-flex}.option-list-item__label-container.sc-swirl-option-list-item{display:flex;flex-grow:1;flex-direction:column;overflow:hidden}.option-list-item__label-container.sc-swirl-option-list-item>*.sc-swirl-option-list-item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-subdued);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__description.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__avatar.sc-swirl-option-list-item{display:none;flex-shrink:0}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__icon.sc-swirl-option-list-item{width:1.25rem;height:1.25rem}}.option-list-item__icon-badge.sc-swirl-option-list-item{position:absolute;display:grid;bottom:0;right:0}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item{position:relative;width:100%;height:100%}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:"";transform:translate3d(-50%, -50%, 0)}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}'}},[262,"swirl-option-list-item",{allowDrag:[4,"allow-drag"],context:[1025],description:[1],disabled:[4],dragging:[4],dragHandleDescription:[1,"drag-handle-description"],dragHandleLabel:[1,"drag-handle-label"],icon:[1],iconBadge:[1,"icon-badge"],label:[1],selected:[1028],indeterminate:[4],swirlAriaRole:[1,"swirl-aria-role"],value:[1],truncateLabel:[4,"truncate-label"],iconSize:[32],focused:[32]}]);function h(){"undefined"!=typeof customElements&&["swirl-option-list-item","swirl-icon-check-small","swirl-icon-check-strong","swirl-icon-drag-handle"].forEach((i=>{switch(i){case"swirl-option-list-item":customElements.get(l(i))||customElements.define(l(i),m);break;case"swirl-icon-check-small":customElements.get(l(i))||a();break;case"swirl-icon-check-strong":customElements.get(l(i))||c();break;case"swirl-icon-drag-handle":customElements.get(l(i))||d()}}))}export{m as S,h as d}

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

@@ -1 +1 @@
-import{proxyCustomElement as s,HTMLElement as e,h as t,Host as a,transformTag as i}from"@stencil/core/internal/client";import{d as o}from"./swirl-separator2.js";import{d as r}from"./swirl-stack2.js";const l=s(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){return t(a,{key:"d4e0081758f4ea62fd58165494d032963c61f5d6"},this.hasSeparator&&t("swirl-separator",{key:"00ab78ac8f0d69f16ff92d1c7e909fa002f20d04",spacing:this.separatorSpacing}),t("div",{key:"ded4ba310ad750fc45fbcab74c9f518ebb580a46","aria-labelledby":"label",class:"option-list-section",role:"group"},t("span",{key:"9d3066393bf92846e9e989af7fd1af41324ec865",class:"option-list-section__label",id:"label",part:"option-list-section__label"},this.label),t("swirl-stack",{key:"2c69b8d3d47fce5acf8c8b33d729acb34f7f4b2d",spacing:this.spacing,align:"stretch"},t("slot",{key:"7bcfc6dd90f4a4ff458e4e13a33e596af0a785b2"}))))}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.option-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-section__label{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}"}},[257,"swirl-option-list-section",{label:[1],separatorSpacing:[1,"separator-spacing"],spacing:[1],hasSeparator:[4,"has-separator"]}]),c=l,n=function(){"undefined"!=typeof customElements&&["swirl-option-list-section","swirl-separator","swirl-stack"].forEach((s=>{switch(s){case"swirl-option-list-section":customElements.get(i(s))||customElements.define(i(s),l);break;case"swirl-separator":customElements.get(i(s))||o();break;case"swirl-stack":customElements.get(i(s))||r()}}))};export{c as SwirlOptionListSection,n as defineCustomElement}
+import{proxyCustomElement as s,HTMLElement as e,h as t,Host as i,transformTag as a}from"@stencil/core/internal/client";import{d as o}from"./swirl-separator2.js";import{d as r}from"./swirl-stack2.js";const c=s(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){return t(i,{key:"c3d6a00c7826696125a52c94407343e465f61457"},this.hasSeparator&&t("swirl-separator",{key:"1a7a5676260c8b4969c627a0dd91788f3be2aa36",spacing:this.separatorSpacing}),t("div",{key:"85f1bb5fa8e5c830be06c55fe56932bf6c52cc9e","aria-labelledby":"label",class:"option-list-section",role:"group"},t("span",{key:"4605ffb4d7883e889e29cc34e9bc94888e6186ae",class:"option-list-section__label",id:"label",part:"option-list-section__label"},this.label),t("swirl-stack",{key:"618ba2f1a4753862f7ae914a2f2b286bc7e3b630",spacing:this.spacing,align:"stretch"},t("slot",{key:"76c45be8e73e97e3b664c6b9bc85bac3795d2bb6"}))))}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.option-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-section__label{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}"}},[257,"swirl-option-list-section",{label:[1],separatorSpacing:[1,"separator-spacing"],spacing:[1],hasSeparator:[4,"has-separator"]}]),l=c,n=function(){"undefined"!=typeof customElements&&["swirl-option-list-section","swirl-separator","swirl-stack"].forEach((s=>{switch(s){case"swirl-option-list-section":customElements.get(a(s))||customElements.define(a(s),c);break;case"swirl-separator":customElements.get(a(s))||o();break;case"swirl-stack":customElements.get(a(s))||r()}}))};export{l as SwirlOptionListSection,n as defineCustomElement}

package/dist/components/swirl-option-list2.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as e,Host as o,transformTag as h}from"@stencil/core/internal/client";import{S as l}from"./sortable.esm.js";import{l as a,q as n}from"./utils.js";import{d as r}from"./swirl-icon-check-small2.js";import{d as c}from"./swirl-icon-check-strong2.js";import{d}from"./swirl-icon-drag-handle2.js";import{d as m}from"./swirl-option-list-item2.js";import{d as u}from"./swirl-visually-hidden2.js";import{v as w}from"./v4.js";const p=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.itemDrop=i(this,"itemDrop",7),this.valueChange=i(this,"valueChange",7),this.allowDeselect=!0,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.selectAllLabel="Select all",this.value=[],this.selectAllState=!1,this.componentLoaded=!1,this.selectAllValue=w(),this.onClick=t=>{t.preventDefault();const s=t.target,i=s?.closest("swirl-option-list-item"),e=t.composedPath()[0],o=Boolean(a(e,'[role="option"]'));if(Boolean(i)&&o)if(i.value===this.selectAllValue)this.selectAllChanged();else{const t=this.items.findIndex((t=>t.value===i.value));this.focusItem(t),this.selectItem(t)}else t.preventDefault()},this.onKeyDown=t=>{if("ArrowDown"===t.code)t.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemDown():this.focusNextItem();else if("ArrowUp"===t.code)t.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemUp():this.focusPreviousItem();else if("Space"===t.code||"Enter"===t.code){if(!t.target.classList.contains("option-list-item__drag-handle")&&Boolean(this.dragging))return t.preventDefault(),void this.stopDrag(this.dragging);const s=t.composedPath()[0],i=Boolean(a(s,'[role="option"]')),e=s?.closest("swirl-option-list-item")?.value===this.selectAllValue;if(!i&&!e)return;t.preventDefault(),Boolean(this.dragging)?this.stopDrag(this.dragging):e?this.selectAllChanged():this.selectFocusedItem()}else"Home"===t.code?(t.preventDefault(),this.showSelectAll?this.focusSelectAll():this.focusItem(0)):"End"===t.code?(t.preventDefault(),this.focusItem(this.items.length-1)):"KeyA"===t.code&&(t.metaKey||t.ctrlKey)&&this.multiSelect?(t.preventDefault(),this.selectAllItems()):"Tab"===t.code&&Boolean(this.dragging)&&t.preventDefault()},this.resetTabIndex=()=>{this.removeItemsTabIndex(),this.focusedItem=void 0;const t=this.items[0]?.querySelector('[role="option"]'),s=this.selectAllEl?.querySelector('[role="option"]');(s||t)?.setAttribute("tabIndex","0")},this.selectAllChanged=()=>{if(this.disabled)return;const t=this.items?.length||0;this.updateValue((this.value?.length||0)===t?[]:this.items.map((t=>t.value)))},this.toggleDrag=t=>{const s=t.detail;Boolean(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.focusItem(s),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=t=>{this.dragging=void 0,t.removeAttribute("dragging");const s=this.getActiveItemIndex();this.assistiveText=`${this.assistiveTextItemMoved} ${s+1}`,this.itemDrop.emit({item:t,oldIndex:this.draggingStartIndex,newIndex:s}),this.draggingStartIndex=void 0,this.focusItem(s)}}connectedCallback(){this.componentLoaded&&(this.observeSlotChanges(),this.subscribeToSwirlPopover(),this.setItemAllowDragState())}componentDidLoad(){this.updateItems(),this.observeSlotChanges(),this.setItemAllowDragState(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue(),this.setupDragDrop(),this.setSectionSeparator(),this.setSelectAllState(),this.subscribeToSwirlPopover(),this.componentLoaded=!0}componentDidRender(){this.setupDragDrop()}disconnectedCallback(){this.unsubscribeFromSwirlPopover(),this.observer?.disconnect(),this.sortable?.destroy(),this.removeToggleDragListeners()}removeToggleDragListeners(){this.items?.forEach((t=>{t.removeEventListener("toggleDrag",this.toggleDrag)}))}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}watchDisabled(){this.setItemDisabledState()}watchMultiSelect(){this.setItemContext()}watchValue(){this.syncItemsWithValue(),this.setSelectAllState()}async focusItemWithValue(t){const s=this.items.findIndex((s=>s.value===t));s>=0&&this.focusItem(s)}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateItems(),this.setItemAllowDragState(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue(),this.setSelectAllState()})),this.observer.observe(this.listboxEl,{childList:!0,subtree:!0})}setSelectAllState(){const t=this.items?.length||0,s=this.value?.length||0;this.selectAllState=0!==t&&0!==s&&(s===t||"indeterminate")}updateItems(){this.removeToggleDragListeners(),this.items=n(this.el,"swirl-option-list-item").filter((t=>t.value!==this.selectAllValue)),this.selectAllEl?.querySelector('[tabindex="0"]')||this.items.some((t=>t.querySelector('[tabindex="0"]')))||this.resetTabIndex()}removeItemsTabIndex(){this.selectAllEl?.querySelector('[role="option"]')?.removeAttribute("tabIndex"),this.items.forEach((t=>t.querySelector('[role="option"]')?.removeAttribute("tabIndex")))}setItemDisabledState(){this.disabled&&this.items.forEach((t=>t.disabled=!0))}setItemContext(){this.multiSelect?this.items.forEach((t=>t.context="multi-select")):(this.items.forEach((t=>t.context="single-select")),this.value.length>1&&this.updateValue([this.value[0]]))}setupDragDrop(){Boolean(this.sortable)&&this.sortable.destroy(),this.allowDrag&&(this.sortable=l.create(this.listboxEl,{animation:150,draggable:'swirl-option-list-item[allow-drag="true"]',dragClass:"option-list-item--drag",handle:".option-list-item__drag-handle",onEnd:t=>{this.itemDrop.emit({item:t.item,oldIndex:t.oldIndex,newIndex:t.newIndex})}}))}setItemAllowDragState(){if(this.allowDrag&&!this.multiSelect)return void console.error("[SwirlOptionList] Drag can only be allowed for multi select lists.");const t=n(this.el,"swirl-option-list-section");this.allowDrag&&t.length>0?console.error("[SwirlOptionList] Drag can only be allowed for lists without sections."):this.items.forEach(this.allowDrag?t=>{t.setAttribute("allow-drag","true"),t.addEventListener("toggleDrag",this.toggleDrag)}:t=>{t.removeAttribute("allow-drag"),t.removeEventListener("toggleDrag",this.toggleDrag)})}selectItem(t){if(this.disabled)return;const s=this.items[t];if(s.disabled)return;const i=this.value.includes(s.value);i&&!this.allowDeselect||(this.multiSelect||(this.value=[]),this.updateValue(i?this.value.filter((t=>t!==s.value)):[...this.value,s.value]))}updateValue(t){this.value=t,this.valueChange.emit(this.value)}selectFocusedItem(){this.disabled||-1===this.getActiveItemIndex()||this.selectItem(this.getActiveItemIndex())}selectAllItems(){if(this.disabled)return;const t=this.items.every((t=>this.value.includes(t.value)));this.updateValue(t?[]:this.items.map((t=>t.value)))}syncItemsWithValue(){this.items?.forEach((t=>t.selected=this.value.includes(t.value)))}focusItem(t){if(this.disabled)return;this.removeItemsTabIndex();const s=this.items[t]?.querySelector('[role="option"]');Boolean(s)&&(s.setAttribute("tabIndex","0"),s.focus(),this.focusedItem=s)}focusNextItem(){if(this.disabled)return;const t=this.getActiveItemIndex(),s=Math.min(t+1,this.items.length-1);this.focusItem(s)}focusPreviousItem(){const t=this.getActiveItemIndex();if(t<=0&&this.showSelectAll)this.focusSelectAll();else{const s=Math.max(t-1,0);this.focusItem(s)}}focusSelectAll(){const t=this.selectAllEl?.querySelector('[role="option"]');t&&(this.removeItemsTabIndex(),t.setAttribute("tabIndex","0"),t.focus(),this.focusedItem=void 0)}getActiveItemIndex(){return Boolean(this.focusedItem)?this.items.map((t=>t.querySelector('[role="option"]'))).findIndex((t=>t===this.focusedItem)):Boolean(this.selectAllEl)?-1:0}getItemIndex(t){return this.items.map((t=>t)).findIndex((s=>s===t))}moveDraggedItemDown(){const t=this.dragging.nextElementSibling;Boolean(t)&&(t.after(this.dragging),this.updateItems(),this.listboxEl.focus(),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getActiveItemIndex()+1}`)}moveDraggedItemUp(){const t=this.dragging.previousElementSibling;Boolean(t)&&t!==this.selectAllEl&&(t.before(this.dragging),this.updateItems(),this.listboxEl.focus(),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}setSectionSeparator(){this.el&&Array.from(this.el.querySelectorAll("swirl-option-list-section")).filter((t=>t.isConnected)).forEach(((t,s)=>{0===s&&"SWIRL-OPTION-LIST-ITEM"!==t.previousElementSibling?.tagName&&(t.hasSeparator=!1)}))}subscribeToSwirlPopover(){this.swirlPopover=a(this.el,"swirl-popover"),this.swirlPopover?.addEventListener("popoverClose",this.resetTabIndex)}unsubscribeFromSwirlPopover(){this.swirlPopover?.removeEventListener("popoverClose",this.resetTabIndex)}render(){const t=this.multiSelect?"true":void 0,s=Boolean(this.dragging)?0:void 0,i=this.multiSelect&&this.showSelectAll;return e(o,{key:"c0ee571f80f3167ce977064d6994507713f53715"},e("swirl-visually-hidden",{key:"8f4bd148ecf0a76a4cfe990fddc1e56e6ebf066f",role:"alert"},this.assistiveText),e("div",{key:"5c8f07609176edb49df66eb3581a3b51876dd767","aria-label":this.label,"aria-multiselectable":t,class:"option-list",id:this.optionListId,onClick:this.onClick,onKeyDown:this.onKeyDown,ref:t=>this.listboxEl=t,role:"listbox",tabIndex:s},i&&e("swirl-option-list-item",{key:"681bcb83cde7df0bf8c7112ceb0f5c6c3289cb09",ref:t=>this.selectAllEl=t,label:this.selectAllLabel,disabled:this.disabled,context:"multi-select",selected:!0===this.selectAllState,indeterminate:"indeterminate"===this.selectAllState,value:this.selectAllValue}),e("slot",{key:"c026acc67fea2ed5adf4dda76c588cfa658bddd5",onSlotchange:this.setSectionSeparator})))}get el(){return this}static get watchers(){return{allowDrag:[{watchAllowDrag:0}],disabled:[{watchDisabled:0}],multiSelect:[{watchMultiSelect:0}],value:[{watchValue:0}]}}static get style(){return".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}"}},[262,"swirl-option-list",{allowDeselect:[4,"allow-deselect"],allowDrag:[4,"allow-drag"],assistiveTextItemGrabbed:[1,"assistive-text-item-grabbed"],assistiveTextItemMoving:[1,"assistive-text-item-moving"],assistiveTextItemMoved:[1,"assistive-text-item-moved"],disabled:[4],label:[1],optionListId:[1,"option-list-id"],multiSelect:[4,"multi-select"],showSelectAll:[4,"show-select-all"],selectAllLabel:[1,"select-all-label"],value:[1040],assistiveText:[32],selectAllState:[32],focusItemWithValue:[64]},void 0,{allowDrag:[{watchAllowDrag:0}],disabled:[{watchDisabled:0}],multiSelect:[{watchMultiSelect:0}],value:[{watchValue:0}]}]);function b(){"undefined"!=typeof customElements&&["swirl-option-list","swirl-icon-check-small","swirl-icon-check-strong","swirl-icon-drag-handle","swirl-option-list-item","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-option-list":customElements.get(h(t))||customElements.define(h(t),p);break;case"swirl-icon-check-small":customElements.get(h(t))||r();break;case"swirl-icon-check-strong":customElements.get(h(t))||c();break;case"swirl-icon-drag-handle":customElements.get(h(t))||d();break;case"swirl-option-list-item":customElements.get(h(t))||m();break;case"swirl-visually-hidden":customElements.get(h(t))||u()}}))}export{p as S,b as d}
+import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as e,Host as o,transformTag as h}from"@stencil/core/internal/client";import{S as l}from"./sortable.esm.js";import{l as a,q as n}from"./utils.js";import{d as r}from"./swirl-icon-check-small2.js";import{d as c}from"./swirl-icon-check-strong2.js";import{d}from"./swirl-icon-drag-handle2.js";import{d as m}from"./swirl-option-list-item2.js";import{d as u}from"./swirl-visually-hidden2.js";import{v as w}from"./v4.js";const p=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.itemDrop=i(this,"itemDrop",7),this.valueChange=i(this,"valueChange",7),this.allowDeselect=!0,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.selectAllLabel="Select all",this.value=[],this.selectAllState=!1,this.componentLoaded=!1,this.selectAllValue=w(),this.onClick=t=>{t.preventDefault();const s=t.target,i=s?.closest("swirl-option-list-item"),e=t.composedPath()[0],o=Boolean(a(e,'[role="option"]'));if(Boolean(i)&&o)if(i.value===this.selectAllValue)this.selectAllChanged();else{const t=this.items.findIndex((t=>t.value===i.value));this.focusItem(t),this.selectItem(t)}else t.preventDefault()},this.onKeyDown=t=>{if("ArrowDown"===t.code)t.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemDown():this.focusNextItem();else if("ArrowUp"===t.code)t.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemUp():this.focusPreviousItem();else if("Space"===t.code||"Enter"===t.code){if(!t.target.classList.contains("option-list-item__drag-handle")&&Boolean(this.dragging))return t.preventDefault(),void this.stopDrag(this.dragging);const s=t.composedPath()[0],i=Boolean(a(s,'[role="option"]')),e=s?.closest("swirl-option-list-item")?.value===this.selectAllValue;if(!i&&!e)return;t.preventDefault(),Boolean(this.dragging)?this.stopDrag(this.dragging):e?this.selectAllChanged():this.selectFocusedItem()}else"Home"===t.code?(t.preventDefault(),this.showSelectAll?this.focusSelectAll():this.focusItem(0)):"End"===t.code?(t.preventDefault(),this.focusItem(this.items.length-1)):"KeyA"===t.code&&(t.metaKey||t.ctrlKey)&&this.multiSelect?(t.preventDefault(),this.selectAllItems()):"Tab"===t.code&&Boolean(this.dragging)&&t.preventDefault()},this.resetTabIndex=()=>{this.removeItemsTabIndex(),this.focusedItem=void 0;const t=this.items[0]?.querySelector('[role="option"]'),s=this.selectAllEl?.querySelector('[role="option"]');(s||t)?.setAttribute("tabIndex","0")},this.selectAllChanged=()=>{if(this.disabled)return;const t=this.items?.length||0;this.updateValue((this.value?.length||0)===t?[]:this.items.map((t=>t.value)))},this.toggleDrag=t=>{const s=t.detail;Boolean(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.focusItem(s),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=t=>{this.dragging=void 0,t.removeAttribute("dragging");const s=this.getActiveItemIndex();this.assistiveText=`${this.assistiveTextItemMoved} ${s+1}`,this.itemDrop.emit({item:t,oldIndex:this.draggingStartIndex,newIndex:s}),this.draggingStartIndex=void 0,this.focusItem(s)}}connectedCallback(){this.componentLoaded&&(this.observeSlotChanges(),this.subscribeToSwirlPopover(),this.setItemAllowDragState())}componentDidLoad(){this.updateItems(),this.observeSlotChanges(),this.setItemAllowDragState(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue(),this.setupDragDrop(),this.setSectionSeparator(),this.setSelectAllState(),this.subscribeToSwirlPopover(),this.componentLoaded=!0}componentDidRender(){this.setupDragDrop()}disconnectedCallback(){this.unsubscribeFromSwirlPopover(),this.observer?.disconnect(),this.sortable?.destroy(),this.removeToggleDragListeners()}removeToggleDragListeners(){this.items?.forEach((t=>{t.removeEventListener("toggleDrag",this.toggleDrag)}))}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}watchDisabled(){this.setItemDisabledState()}watchMultiSelect(){this.setItemContext()}watchValue(){this.syncItemsWithValue(),this.setSelectAllState()}async focusItemWithValue(t){const s=this.items.findIndex((s=>s.value===t));s>=0&&this.focusItem(s)}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateItems(),this.setItemAllowDragState(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue(),this.setSelectAllState()})),this.observer.observe(this.listboxEl,{childList:!0,subtree:!0})}setSelectAllState(){const t=this.items?.length||0,s=this.value?.length||0;this.selectAllState=0!==t&&0!==s&&(s===t||"indeterminate")}updateItems(){this.removeToggleDragListeners(),this.items=n(this.el,"swirl-option-list-item").filter((t=>t.value!==this.selectAllValue)),this.selectAllEl?.querySelector('[tabindex="0"]')||this.items.some((t=>t.querySelector('[tabindex="0"]')))||this.resetTabIndex()}removeItemsTabIndex(){this.selectAllEl?.querySelector('[role="option"]')?.removeAttribute("tabIndex"),this.items.forEach((t=>t.querySelector('[role="option"]')?.removeAttribute("tabIndex")))}setItemDisabledState(){this.disabled&&this.items.forEach((t=>t.disabled=!0))}setItemContext(){this.multiSelect?this.items.forEach((t=>t.context="multi-select")):(this.items.forEach((t=>t.context="single-select")),this.value.length>1&&this.updateValue([this.value[0]]))}setupDragDrop(){Boolean(this.sortable)&&this.sortable.destroy(),this.allowDrag&&(this.sortable=l.create(this.listboxEl,{animation:150,draggable:'swirl-option-list-item[allow-drag="true"]',dragClass:"option-list-item--drag",handle:".option-list-item__drag-handle",onEnd:t=>{this.itemDrop.emit({item:t.item,oldIndex:t.oldIndex,newIndex:t.newIndex})}}))}setItemAllowDragState(){if(this.allowDrag&&!this.multiSelect)return void console.error("[SwirlOptionList] Drag can only be allowed for multi select lists.");const t=n(this.el,"swirl-option-list-section");this.allowDrag&&t.length>0?console.error("[SwirlOptionList] Drag can only be allowed for lists without sections."):this.items.forEach(this.allowDrag?t=>{t.setAttribute("allow-drag","true"),t.addEventListener("toggleDrag",this.toggleDrag)}:t=>{t.removeAttribute("allow-drag"),t.removeEventListener("toggleDrag",this.toggleDrag)})}selectItem(t){if(this.disabled)return;const s=this.items[t];if(s.disabled)return;const i=this.value.includes(s.value);i&&!this.allowDeselect||(this.multiSelect||(this.value=[]),this.updateValue(i?this.value.filter((t=>t!==s.value)):[...this.value,s.value]))}updateValue(t){this.value=t,this.valueChange.emit(this.value)}selectFocusedItem(){this.disabled||-1===this.getActiveItemIndex()||this.selectItem(this.getActiveItemIndex())}selectAllItems(){if(this.disabled)return;const t=this.items.every((t=>this.value.includes(t.value)));this.updateValue(t?[]:this.items.map((t=>t.value)))}syncItemsWithValue(){this.items?.forEach((t=>t.selected=this.value.includes(t.value)))}focusItem(t){if(this.disabled)return;this.removeItemsTabIndex();const s=this.items[t]?.querySelector('[role="option"]');Boolean(s)&&(s.setAttribute("tabIndex","0"),s.focus(),this.focusedItem=s)}focusNextItem(){if(this.disabled)return;const t=this.getActiveItemIndex(),s=Math.min(t+1,this.items.length-1);this.focusItem(s)}focusPreviousItem(){const t=this.getActiveItemIndex();if(t<=0&&this.showSelectAll)this.focusSelectAll();else{const s=Math.max(t-1,0);this.focusItem(s)}}focusSelectAll(){const t=this.selectAllEl?.querySelector('[role="option"]');t&&(this.removeItemsTabIndex(),t.setAttribute("tabIndex","0"),t.focus(),this.focusedItem=void 0)}getActiveItemIndex(){return Boolean(this.focusedItem)?this.items.map((t=>t.querySelector('[role="option"]'))).findIndex((t=>t===this.focusedItem)):Boolean(this.selectAllEl)?-1:0}getItemIndex(t){return this.items.map((t=>t)).findIndex((s=>s===t))}moveDraggedItemDown(){const t=this.dragging.nextElementSibling;Boolean(t)&&(t.after(this.dragging),this.updateItems(),this.listboxEl.focus(),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getActiveItemIndex()+1}`)}moveDraggedItemUp(){const t=this.dragging.previousElementSibling;Boolean(t)&&t!==this.selectAllEl&&(t.before(this.dragging),this.updateItems(),this.listboxEl.focus(),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}setSectionSeparator(){this.el&&Array.from(this.el.querySelectorAll("swirl-option-list-section")).filter((t=>t.isConnected)).forEach(((t,s)=>{0===s&&"SWIRL-OPTION-LIST-ITEM"!==t.previousElementSibling?.tagName&&(t.hasSeparator=!1)}))}subscribeToSwirlPopover(){this.swirlPopover=a(this.el,"swirl-popover"),this.swirlPopover?.addEventListener("popoverClose",this.resetTabIndex)}unsubscribeFromSwirlPopover(){this.swirlPopover?.removeEventListener("popoverClose",this.resetTabIndex)}render(){const t=this.multiSelect?"true":void 0,s=Boolean(this.dragging)?0:void 0,i=this.multiSelect&&this.showSelectAll;return e(o,{key:"9bf10d95d87d601e2edebabafc2aa89cf7af831c"},e("swirl-visually-hidden",{key:"cfc5efe9fda6ce38e636f201675de82d425d0720",role:"alert"},this.assistiveText),e("div",{key:"00bb18b0075036063c0ebb07c4ec966b70810a91","aria-label":this.label,"aria-multiselectable":t,class:"option-list",id:this.optionListId,onClick:this.onClick,onKeyDown:this.onKeyDown,ref:t=>this.listboxEl=t,role:"listbox",tabIndex:s},i&&e("swirl-option-list-item",{key:"e2c20dfbbd757455fa2d1db5a82a483a507a896a",ref:t=>this.selectAllEl=t,label:this.selectAllLabel,disabled:this.disabled,context:"multi-select",selected:!0===this.selectAllState,indeterminate:"indeterminate"===this.selectAllState,value:this.selectAllValue}),e("slot",{key:"5bd5f5f1a79d9843bce6a4ca4ab41611846664cd",onSlotchange:this.setSectionSeparator})))}get el(){return this}static get watchers(){return{allowDrag:[{watchAllowDrag:0}],disabled:[{watchDisabled:0}],multiSelect:[{watchMultiSelect:0}],value:[{watchValue:0}]}}static get style(){return".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}"}},[262,"swirl-option-list",{allowDeselect:[4,"allow-deselect"],allowDrag:[4,"allow-drag"],assistiveTextItemGrabbed:[1,"assistive-text-item-grabbed"],assistiveTextItemMoving:[1,"assistive-text-item-moving"],assistiveTextItemMoved:[1,"assistive-text-item-moved"],disabled:[4],label:[1],optionListId:[1,"option-list-id"],multiSelect:[4,"multi-select"],showSelectAll:[4,"show-select-all"],selectAllLabel:[1,"select-all-label"],value:[1040],assistiveText:[32],selectAllState:[32],focusItemWithValue:[64]},void 0,{allowDrag:[{watchAllowDrag:0}],disabled:[{watchDisabled:0}],multiSelect:[{watchMultiSelect:0}],value:[{watchValue:0}]}]);function b(){"undefined"!=typeof customElements&&["swirl-option-list","swirl-icon-check-small","swirl-icon-check-strong","swirl-icon-drag-handle","swirl-option-list-item","swirl-visually-hidden"].forEach((t=>{switch(t){case"swirl-option-list":customElements.get(h(t))||customElements.define(h(t),p);break;case"swirl-icon-check-small":customElements.get(h(t))||r();break;case"swirl-icon-check-strong":customElements.get(h(t))||c();break;case"swirl-icon-drag-handle":customElements.get(h(t))||d();break;case"swirl-option-list-item":customElements.get(h(t))||m();break;case"swirl-visually-hidden":customElements.get(h(t))||u()}}))}export{p as S,b as d}

package/dist/components/swirl-pagination.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as e,createEvent as t,h as a,Host as s,transformTag as n}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{d as o}from"./utils.js";import{d as r}from"./swirl-button2.js";import{d as c}from"./swirl-icon-expand-more2.js";import{d as p}from"./swirl-stack2.js";import{d as h}from"./swirl-text2.js";import{d}from"./swirl-visually-hidden2.js";const g=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.setPage=t(this,"setPage",7),this.setPageSize=t(this,"setPageSize",7),this.firstPageButtonLabel="First page",this.lastPageButtonLabel="Last page",this.nextButtonLabel="Next page",this.pageLabel="out of",this.pageSelectLabel="Select a page",this.pageSize=10,this.pageSizeOptions=[10,25,50],this.pageSizeSelectLabel="Items per page:",this.prevButtonLabel="Previous page",this.variant="default",this.onFocusPageInput=i=>{i.target.select()},this.onFirstPageButtonClick=()=>{1!==this.page&&this.setPage.emit(1)},this.onLastPageButtonClick=()=>{this.page!==this.pages&&this.setPage.emit(this.pages)},this.onPrevButtonClick=()=>{const i=Math.max(this.page-1,1);this.page!==i&&this.setPage.emit(i)},this.onNextButtonClick=()=>{const i=Math.min(this.page+1,this.pages);this.page!==i&&this.setPage.emit(i)},this.onPageInput=()=>{let i=+this.pageInput.value;isNaN(i)?(i=this.page,this.pageInput.value=i+""):i>this.pages?(i=this.pages,this.pageInput.value=i+""):i<1&&(i=1,this.pageInput.value=i+""),this.page!==i&&this.onPageUpdate(i)},this.onPageUpdate=o((i=>{this.setPage.emit(i)}),500),this.onPageSizeSelect=i=>{const e=+i.target.value;this.pageSize!==e&&this.setPageSize.emit(e)}}render(){const i="simple"!==this.variant,e="advanced"===this.variant,t=`${this.page.toLocaleString()} ${this.pageLabel} ${this.pages.toLocaleString()}`,n=l("pagination","pagination--variant-"+this.variant);return a(s,{key:"1abdd296854f71e56644e2ce2d0743f957bd69ae"},a("nav",{key:"80f99fa1fe1e2c43a76ce0fb33bc8ea878e350da","aria-label":this.label,class:n},a("ul",{key:"07459fa1f5e3cfe81bd45071b984c9b947a48958",class:"pagination__list",part:"pagination__list"},this.showPageSizeSelect&&a("li",{key:"d9e24458aee604f2f489eeaf7788352d78f02695",class:"pagination__list-item"},a("label",{key:"720b52acd50723bb07252706e00d6c1d7d10bf69",class:"pagination__page-size-selection"},a("swirl-text",{key:"7813ad3f1a9f970cbce8fb287d43ff2b6802e39a",whiteSpace:"inherit"},this.pageSizeSelectLabel),a("swirl-stack",{key:"53363e8c04d36091f27a53fd876f6ffb7dd62e68",align:"center",class:"pagination__page-size-select-container",orientation:"horizontal"},a("select",{key:"dc16d7d481897e50065c5d5315e9b66ca13198e0",class:"pagination__page-size-select",onChange:this.onPageSizeSelect},this.pageSizeOptions.map((i=>a("option",{key:i,selected:i===this.pageSize,value:i},i)))),a("swirl-icon-expand-more",{key:"dea38f1d7ca0569784caa44c4950759d6ce90c79","aria-hidden":"true",class:"pagination__page-size-select-icon",size:16})))),a("li",{key:"8a794401d45ad51cc0bc6649d059e9dd9bebae1c",class:"pagination__list-item"},a("swirl-button",{key:"fa01c724eb7f74400c549ef077985d5f55229be4",class:"pagination__first-page-button",disabled:this.page<=1,hideLabel:!0,icon:"<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>",intent:"primary",label:this.firstPageButtonLabel,onClick:this.onFirstPageButtonClick})),a("li",{key:"4f38910d87eacb23928b5dfad46e309742755312",class:"pagination__list-item"},a("swirl-button",{key:"b8cd596bebb5e47f5d18b275d5411912e5533a76",class:"pagination__prev-button",disabled:this.page<=1,hideLabel:!0,icon:"<swirl-icon-chevron-left></swirl-icon-chevron-left>",intent:"primary",label:this.prevButtonLabel,onClick:this.onPrevButtonClick})),i?a("li",{class:"pagination__list-item  pagination__page-label"},a("span",null,e?a("span",{"aria-current":"page",class:"pagination__advanced-label"},a("input",{"aria-label":this.pageSelectLabel,class:"pagination__page-input",onFocus:this.onFocusPageInput,onInput:this.onPageInput,ref:i=>this.pageInput=i,type:"text",value:this.page}),a("span",{"aria-hidden":"true"},this.pageLabel," ",this.pages.toLocaleString())):a("span",{"aria-current":"page"},t))):a("li",{class:"pagination__list-item"},a("swirl-visually-hidden",null,a("span",{"aria-current":"page"},t))),a("li",{key:"65100eb0a52919adfed673daea4cff8481dd7111",class:"pagination__list-item"},a("swirl-button",{key:"b4cb8190c910846b341f7fb95f2bd288227337b7",class:"pagination__next-button",disabled:this.page>=this.pages,hideLabel:!0,icon:"<swirl-icon-chevron-right></swirl-icon-chevron-right>",iconPosition:"end",intent:"primary",label:this.nextButtonLabel,onClick:this.onNextButtonClick})),a("li",{key:"b5a97dbda35b75d2c82a41adb38e8c314ae8d5bf",class:"pagination__list-item"},a("swirl-button",{key:"7996ae8661bbccdf8b3b9b5b65a2564572fd2056",class:"pagination__last-page-button",disabled:this.page>=this.pages,hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",intent:"primary",label:this.lastPageButtonLabel,onClick:this.onLastPageButtonClick})))))}static get style(){return":host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host *{box-sizing:border-box}.pagination{display:block;width:100%}.pagination--variant-simple .pagination__list{gap:0}.pagination__list{display:flex;margin:0;padding:0;justify-content:flex-start;align-items:center;line-height:var(--s-line-height-base);list-style:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.pagination__page-size-selection{display:flex;padding-right:var(--s-space-24);flex-shrink:0;align-items:center;color:var(--s-interactive-primary-default);white-space:nowrap;gap:var(--s-space-8)}.pagination__page-size-select-container{position:relative}.pagination__page-size-select{padding-right:calc(1rem + var(--s-space-4));border:none;color:var(--s-interactive-primary-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pagination__page-size-select:focus:not(:focus-visible){outline:none}.pagination__page-size-select:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__page-size-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.pagination__page-size-select-icon{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none}.pagination__page-label{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.pagination__advanced-label{display:flex;align-items:center;white-space:nowrap;gap:var(--s-space-8)}.pagination__page-input{display:inline-flex;width:3.25rem;padding-top:var(--s-space-8);padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);padding-left:var(--s-space-8);border:none;border-radius:var(--s-border-radius-sm);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:center;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.pagination__page-input:focus:not(:focus-visible){outline:none}.pagination__page-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__page-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}"}},[1,"swirl-pagination",{firstPageButtonLabel:[1,"first-page-button-label"],lastPageButtonLabel:[1,"last-page-button-label"],label:[1],nextButtonLabel:[1,"next-button-label"],page:[2],pageLabel:[1,"page-label"],pages:[2],pageSelectLabel:[1,"page-select-label"],pageSize:[2,"page-size"],pageSizeOptions:[16],pageSizeSelectLabel:[1,"page-size-select-label"],prevButtonLabel:[1,"prev-button-label"],showPageSizeSelect:[4,"show-page-size-select"],variant:[1]}]),b=g,f=function(){"undefined"!=typeof customElements&&["swirl-pagination","swirl-button","swirl-icon-expand-more","swirl-stack","swirl-text","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-pagination":customElements.get(n(i))||customElements.define(n(i),g);break;case"swirl-button":customElements.get(n(i))||r();break;case"swirl-icon-expand-more":customElements.get(n(i))||c();break;case"swirl-stack":customElements.get(n(i))||p();break;case"swirl-text":customElements.get(n(i))||h();break;case"swirl-visually-hidden":customElements.get(n(i))||d()}}))};export{b as SwirlPagination,f as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as e,createEvent as a,h as t,Host as s,transformTag as n}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{d as o}from"./utils.js";import{d as r}from"./swirl-button2.js";import{d as c}from"./swirl-icon-expand-more2.js";import{d as p}from"./swirl-stack2.js";import{d as h}from"./swirl-text2.js";import{d}from"./swirl-visually-hidden2.js";const g=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.setPage=a(this,"setPage",7),this.setPageSize=a(this,"setPageSize",7),this.firstPageButtonLabel="First page",this.lastPageButtonLabel="Last page",this.nextButtonLabel="Next page",this.pageLabel="out of",this.pageSelectLabel="Select a page",this.pageSize=10,this.pageSizeOptions=[10,25,50],this.pageSizeSelectLabel="Items per page:",this.prevButtonLabel="Previous page",this.variant="default",this.onFocusPageInput=i=>{i.target.select()},this.onFirstPageButtonClick=()=>{1!==this.page&&this.setPage.emit(1)},this.onLastPageButtonClick=()=>{this.page!==this.pages&&this.setPage.emit(this.pages)},this.onPrevButtonClick=()=>{const i=Math.max(this.page-1,1);this.page!==i&&this.setPage.emit(i)},this.onNextButtonClick=()=>{const i=Math.min(this.page+1,this.pages);this.page!==i&&this.setPage.emit(i)},this.onPageInput=()=>{let i=+this.pageInput.value;isNaN(i)?(i=this.page,this.pageInput.value=i+""):i>this.pages?(i=this.pages,this.pageInput.value=i+""):i<1&&(i=1,this.pageInput.value=i+""),this.page!==i&&this.onPageUpdate(i)},this.onPageUpdate=o((i=>{this.setPage.emit(i)}),500),this.onPageSizeSelect=i=>{const e=+i.target.value;this.pageSize!==e&&this.setPageSize.emit(e)}}render(){const i="simple"!==this.variant,e="advanced"===this.variant,a=`${this.page.toLocaleString()} ${this.pageLabel} ${this.pages.toLocaleString()}`,n=l("pagination","pagination--variant-"+this.variant);return t(s,{key:"5cda58b22f704bcb05c0f98f1fc32aa4bdf7d32d"},t("nav",{key:"1c4bd2362ab41b4d56f1b4794510b1d7a6c16bed","aria-label":this.label,class:n},t("ul",{key:"d2ab1cdae6dcc8108d3a49c1d4dd900b94aea2da",class:"pagination__list",part:"pagination__list"},this.showPageSizeSelect&&t("li",{key:"03cd3c234bc30bea1db5b1a69a1ace5575808b7e",class:"pagination__list-item"},t("label",{key:"35b26ca83eaf6c124af2a8e813d157bcf322489a",class:"pagination__page-size-selection"},t("swirl-text",{key:"0bb124c38230df2698ac657a30975ba0e85ad312",whiteSpace:"inherit"},this.pageSizeSelectLabel),t("swirl-stack",{key:"28d1fa4f87c3dfc27389eae074375c3aa3afd228",align:"center",class:"pagination__page-size-select-container",orientation:"horizontal"},t("select",{key:"a46b453a4d9adb62c05dddc9f577e1e30c627802",class:"pagination__page-size-select",onChange:this.onPageSizeSelect},this.pageSizeOptions.map((i=>t("option",{key:i,selected:i===this.pageSize,value:i},i)))),t("swirl-icon-expand-more",{key:"4d693f04efe502e5ffd42ba53a873958f28f6685","aria-hidden":"true",class:"pagination__page-size-select-icon",size:16})))),t("li",{key:"988b6feb5508fef6ad1ea40594c75bc62e794adf",class:"pagination__list-item"},t("swirl-button",{key:"28fc3fc5bfe369656fa2399d4de84f167ab5c2c5",class:"pagination__first-page-button",disabled:this.page<=1,hideLabel:!0,icon:"<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>",intent:"primary",label:this.firstPageButtonLabel,onClick:this.onFirstPageButtonClick})),t("li",{key:"760d1f740fd2f1291a49c0ef8b02d3d57c050e10",class:"pagination__list-item"},t("swirl-button",{key:"cee32b7d734ba1c187765d49bf02c4db259b8a7f",class:"pagination__prev-button",disabled:this.page<=1,hideLabel:!0,icon:"<swirl-icon-chevron-left></swirl-icon-chevron-left>",intent:"primary",label:this.prevButtonLabel,onClick:this.onPrevButtonClick})),i?t("li",{class:"pagination__list-item  pagination__page-label"},t("span",null,e?t("span",{"aria-current":"page",class:"pagination__advanced-label"},t("input",{"aria-label":this.pageSelectLabel,class:"pagination__page-input",onFocus:this.onFocusPageInput,onInput:this.onPageInput,ref:i=>this.pageInput=i,type:"text",value:this.page}),t("span",{"aria-hidden":"true"},this.pageLabel," ",this.pages.toLocaleString())):t("span",{"aria-current":"page"},a))):t("li",{class:"pagination__list-item"},t("swirl-visually-hidden",null,t("span",{"aria-current":"page"},a))),t("li",{key:"5ef5ae81ff092d361f3ac8d3115796c067747da1",class:"pagination__list-item"},t("swirl-button",{key:"144e998b66ea14c77077f4eb5855dcce6a10ba75",class:"pagination__next-button",disabled:this.page>=this.pages,hideLabel:!0,icon:"<swirl-icon-chevron-right></swirl-icon-chevron-right>",iconPosition:"end",intent:"primary",label:this.nextButtonLabel,onClick:this.onNextButtonClick})),t("li",{key:"385d446323f7b972711e74c16c567aab1e21ec99",class:"pagination__list-item"},t("swirl-button",{key:"b5ad4d8f8c5fcbe20ebf3263b2c65fc9ee93a140",class:"pagination__last-page-button",disabled:this.page>=this.pages,hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",intent:"primary",label:this.lastPageButtonLabel,onClick:this.onLastPageButtonClick})))))}static get style(){return":host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host *{box-sizing:border-box}.pagination{display:block;width:100%}.pagination--variant-simple .pagination__list{gap:0}.pagination__list{display:flex;margin:0;padding:0;justify-content:flex-start;align-items:center;line-height:var(--s-line-height-base);list-style:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.pagination__page-size-selection{display:flex;padding-right:var(--s-space-24);flex-shrink:0;align-items:center;color:var(--s-interactive-primary-default);white-space:nowrap;gap:var(--s-space-8)}.pagination__page-size-select-container{position:relative}.pagination__page-size-select{padding-right:calc(1rem + var(--s-space-4));border:none;color:var(--s-interactive-primary-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pagination__page-size-select:focus:not(:focus-visible){outline:none}.pagination__page-size-select:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__page-size-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.pagination__page-size-select-icon{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none}.pagination__page-label{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.pagination__advanced-label{display:flex;align-items:center;white-space:nowrap;gap:var(--s-space-8)}.pagination__page-input{display:inline-flex;width:3.25rem;padding-top:var(--s-space-8);padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);padding-left:var(--s-space-8);border:none;border-radius:var(--s-border-radius-sm);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:center;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.pagination__page-input:focus:not(:focus-visible){outline:none}.pagination__page-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__page-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}"}},[1,"swirl-pagination",{firstPageButtonLabel:[1,"first-page-button-label"],lastPageButtonLabel:[1,"last-page-button-label"],label:[1],nextButtonLabel:[1,"next-button-label"],page:[2],pageLabel:[1,"page-label"],pages:[2],pageSelectLabel:[1,"page-select-label"],pageSize:[2,"page-size"],pageSizeOptions:[16],pageSizeSelectLabel:[1,"page-size-select-label"],prevButtonLabel:[1,"prev-button-label"],showPageSizeSelect:[4,"show-page-size-select"],variant:[1]}]),b=g,f=function(){"undefined"!=typeof customElements&&["swirl-pagination","swirl-button","swirl-icon-expand-more","swirl-stack","swirl-text","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-pagination":customElements.get(n(i))||customElements.define(n(i),g);break;case"swirl-button":customElements.get(n(i))||r();break;case"swirl-icon-expand-more":customElements.get(n(i))||c();break;case"swirl-stack":customElements.get(n(i))||p();break;case"swirl-text":customElements.get(n(i))||h();break;case"swirl-visually-hidden":customElements.get(n(i))||d()}}))};export{b as SwirlPagination,f as defineCustomElement}

package/dist/components/swirl-pdf-reader.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as i,createEvent as s,h as a,Host as t,transformTag as r}from"@stencil/core/internal/client";import{d as o,e as l}from"./bodyScrollLock.esm.js";import{c as d}from"./index2.js";import{q as n,i as c}from"./utils.js";import{d as f}from"./swirl-action-list2.js";import{d as b}from"./swirl-action-list-item2.js";import{d as h}from"./swirl-button2.js";import{d as p}from"./swirl-file-viewer2.js";import{d as m}from"./swirl-file-viewer-audio2.js";import{d as u}from"./swirl-file-viewer-csv2.js";import{d as w}from"./swirl-file-viewer-fallback2.js";import{d as _}from"./swirl-file-viewer-image2.js";import{d as v}from"./swirl-file-viewer-pdf2.js";import{d as g}from"./swirl-file-viewer-text2.js";import{d as k}from"./swirl-file-viewer-video2.js";import{d as y}from"./swirl-icon-add2.js";import{d as x}from"./swirl-icon-error2.js";import{d as C}from"./swirl-icon-expand-more2.js";import{d as z}from"./swirl-icon-file2.js";import{d as j}from"./swirl-icon-file-copy2.js";import{d as E}from"./swirl-icon-fullscreen2.js";import{d as H}from"./swirl-icon-fullscreen-exit2.js";import{d as V}from"./swirl-icon-menu-book2.js";import{d as L}from"./swirl-icon-remove2.js";import{d as M}from"./swirl-inline-error2.js";import{d as Z}from"./swirl-popover2.js";import{d as S}from"./swirl-popover-trigger2.js";import{d as B}from"./swirl-separator2.js";import{d as T}from"./swirl-spinner2.js";import{d as D}from"./swirl-stack2.js";import{d as P}from"./swirl-text2.js";import{d as F}from"./swirl-visually-hidden2.js";const W=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.modalClose=s(this,"modalClose",7),this.modalOpen=s(this,"modalOpen",7),this.autoZoomLabel="Full width",this.closeButtonLabel="Close PDF viewer",this.downloadButtonEnabled=!0,this.downloadButtonLabel="Download PDF",this.fileTypeLabel="PDF Document",this.menuLabel="File menu",this.menuTriggerLabel="Open file menu",this.printButtonEnabled=!0,this.printButtonLabel="Print PDF",this.sideBySideButtonLabel="Toggle side by side view",this.thumbnailButtonLabel="Scroll to page",this.thumbnailsButtonLabel="Toggle thumbnails",this.thumbnailsLabel="Page thumbnails",this.zoomInButtonLabel="Zoom in",this.zoomOutButtonLabel="Zoom out",this.zoomSelectLabel="Select zoom",this.skipNativeDownload=!1,this.active=!1,this.closing=!1,this.opening=!1,this.downloading=!1,this.loadingThumbnails=!1,this.thumbnails=[],this.viewMode="single",this.visiblePages=[],this.desktopZoomSteps=[.5,.75,1,1.25,1.5,2,3,4],this.mobileZoomSteps=[.5,.75,1,1.25,1.5],this.onClose=()=>{this.closing=!1,this.active=!1,this.modalClose.emit()},this.toggleViewMode=()=>{this.viewMode="single"===this.viewMode?"side-by-side":"single"},this.toggleThumbnals=()=>{this.showThumbnails=!this.showThumbnails},this.onKeyDown=e=>{"Escape"===e.code&&(e.stopImmediatePropagation(),e.preventDefault(),this.close())},this.onActivate=async e=>{this.pdfViewer=e.detail,this.lockBodyScroll()},this.onVisiblePagesChange=async e=>{this.visiblePages=e.detail},this.onCloseButtonClick=()=>{this.close()},this.onPrintButtonClick=()=>{this.pdfViewer.print(),this.menu.close()},this.onDownloadButtonClick=async()=>{this.downloading=!0,await this.viewer.download(),this.downloading=!1,this.menu.close()},this.onZoomInButtonClick=()=>{const e=this.zoomSteps.indexOf(+this.zoom);this.zoom=-1===e?1:this.zoomSteps[Math.min(this.zoomSteps.length-1,e+1)]},this.onZoomOutButtonClick=()=>{const e=this.zoomSteps.indexOf(+this.zoom);this.zoom=-1===e?1:this.zoomSteps[Math.max(0,e-1)]},this.onZoomAutoButtonClick=()=>{this.zoom="auto"===this.zoom?1:"auto"},this.onZoomChange=e=>{const i=e.target.value;this.zoom="auto"===i?i:+i},this.onThumbnailClick=e=>()=>{const i=n(this.el,`[data-page-number="${e+1}"]`)?.[0];i?.scrollIntoView()}}componentWillLoad(){this.updateZoomSteps(),this.zoom=c()?"auto":1}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps()}disconnectedCallback(){this.unlockBodyScroll(),this.modalEl?.open&&this.modalEl.close()}ensureOpening(){this.opening&&!this.modalEl?.open&&this.open()}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}onWindowResize(){this.pdfViewer&&(this.updateZoomSteps(),this.zoom=c()?"auto":1)}watchShowThumbnails(){this.showThumbnails&&(this.loadingThumbnails=!0,queueMicrotask((async()=>{await this.generateThumbnails(),this.loadingThumbnails=!1})))}async open(){this.opening=!0,this.modalEl&&(this.modalEl.showModal(),this.active=!0,this.modalOpen.emit())}async close(){this.closing||(this.closing=!0,this.unlockBodyScroll(),setTimeout((()=>{this.modalEl.close()}),150))}lockBodyScroll(){const e=this.pdfViewer?.shadowRoot.querySelector(".file-viewer-pdf__pages");e&&o(e)}unlockBodyScroll(){const e=this.pdfViewer?.shadowRoot.querySelector(".file-viewer-pdf__pages");e&&l(e)}async generateThumbnails(){this.thumbnails=await this.pdfViewer.getThumbnails()}updateZoomSteps(){this.zoomSteps=c()?this.mobileZoomSteps:this.desktopZoomSteps}render(){const e=!!this.el.querySelector("[slot='menu-items']")||this.printButtonEnabled||this.downloadButtonEnabled,i=d("pdf-reader",{"pdf-reader--closing":this.closing,"pdf-reader--hide-menu":!e,"pdf-reader--show-thumbnails":this.showThumbnails});return a(t,{key:"b746fab880c79a2b2814ff9cb6629270d4496015"},a("dialog",{key:"8544573b3861087277b2d67a097d6ab13f7074f2","aria-label":this.label,class:i,id:"pdf-reader",onClose:this.onClose,onKeyDown:this.onKeyDown,ref:e=>this.modalEl=e},a("div",{key:"113c44b82bdbfd7c4d1ffbbce4ffcd46951f107f",class:"pdf-reader__body",role:"document"},a("header",{key:"c9f9d86ded65f566b26041e580081259c7f76c63",class:"pdf-reader__header"},a("span",{key:"b56c35ce97952a3d1660a8a7ef7c6b56f976fd86",class:"pdf-reader__header-left"},a("swirl-button",{key:"cdd6cc808c0c40feb48a4e23b755865c27316219",class:"pdf-reader__close-button",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.closeButtonLabel,onClick:this.onCloseButtonClick}),a("span",{key:"00eff8c5ad1d4f52886800a1befdbe6fd047a221",class:"pdf-reader__label"},this.label)),a("span",{key:"5e26a35e54d57bfa3182706bf59e7360c2107e89",class:"pdf-reader__header-center"},a("span",{key:"6b4283d1198130adedf9762f1ac6754413320495",class:"pdf-reader__zoom-button-container"},a("swirl-button",{key:"f358726148adb40ef01bc98ae1f51a004106ae7c",class:"pdf-reader__zoom-button",disabled:this.zoom===this.zoomSteps[0],hideLabel:!0,icon:"<swirl-icon-remove></swirl-icon-remove>",label:this.zoomOutButtonLabel,onClick:this.onZoomOutButtonClick}),a("swirl-button",{key:"0a4cea73683f8a53f11a4bc24bc73d1dc48e6f01",class:"pdf-reader__zoom-button",disabled:this.zoom===this.zoomSteps[this.zoomSteps.length-1],hideLabel:!0,icon:"<swirl-icon-add></swirl-icon-add>",label:this.zoomInButtonLabel,onClick:this.onZoomInButtonClick})),a("span",{key:"6bad310606086bb7b8966402e34cf5166a5df715",class:"pdf-reader__zoom-select-container"},a("select",{key:"049f7aca557041fe7f58bc6321fbe817b5103552","aria-label":this.zoomSelectLabel,class:"pdf-reader__zoom-select",name:"zoom-select",id:"zoom-select",onChange:this.onZoomChange},a("option",{key:"cf4238d66057bda6ad2e7f1dde8fde6da05536aa",selected:"auto"===this.zoom,value:"auto"},this.autoZoomLabel),this.zoomSteps.map((e=>a("option",{key:e,selected:this.zoom===e,value:e},100*e,"%")))),a("swirl-icon-expand-more",{key:"3e947da05c77f97400a12d68da239fe71f1db1dc",class:"pdf-reader__zoom-select-icon"}))),a("span",{key:"10658e56b75c10d63abf04695de54864631e4357",class:"pdf-reader__header-right"},a("swirl-popover-trigger",{key:"cd64f6251f356b8ca6bf5cd9d22ea51b3cdfcaf1",swirlPopover:this.menu},a("swirl-button",{key:"70b40bf02b4d5d4691978381fd4f696cef0311f5",class:"pdf-reader__menu-button",hideLabel:!0,icon:"<swirl-icon-more-vertikal></swirl-icon-more-vertikal>",label:this.menuTriggerLabel}))),a("span",{key:"300e83bd5fee9fdc75bcf77cf2dff71f7dba1422",class:"pdf-reader__floating-tools"},a("button",{key:"38f90ce0dcc873af8f4e3080373b001acd6629cc","aria-label":this.sideBySideButtonLabel,class:"pdf-reader__floating-tool-button",onClick:this.toggleViewMode,type:"button"},a("swirl-icon-menu-book",{key:"2a5eca3ef8acf85c5417d74a534d2f98a0bc9d3b"})),a("button",{key:"9dd37be7fb39a176e4fb0aa44bce0820876c75e7","aria-controls":"thumbnails","aria-expanded":!!this.showThumbnails+"","aria-label":this.thumbnailsButtonLabel,class:"pdf-reader__floating-tool-button",onClick:this.toggleThumbnals,type:"button"},a("swirl-icon-file-copy",{key:"06656f4266ca04c3cc0cd31b0b725edac3df41f5"})))),a("div",{key:"86d85ec8b0c93b818464d8c4d614e5399be8a556",class:"pdf-reader__content"},a("nav",{key:"4c7d1dff47e6f051643a4e4cd3baba8d5beabb6a","aria-label":this.thumbnailsLabel,class:"pdf-reader__thumbnails",id:"thumbnails"},this.loadingThumbnails&&a("swirl-spinner",{key:"f0c6825e7bec41dc240012554f07cad82ea27eb6"}),!this.loadingThumbnails&&this.thumbnails.map(((e,i)=>{const s=d("pdf-reader__thumbnail",{"pdf-reader__thumbnail--active":this.visiblePages[0]===i+1});return a("button",{"aria-label":`${this.thumbnailButtonLabel} ${i+1}`,class:s,onClick:this.onThumbnailClick(i),type:"button"},a("img",{src:e.toDataURL("image/png"),alt:""}))}))),a("swirl-file-viewer",{key:"42ccbfef81144c66b7a3441a70bc1293f555a32e",active:this.active,class:"pdf-reader__viewer",disablePrint:!this.printButtonEnabled,file:this.file,fileName:this.fileName,onActivate:this.onActivate,onVisiblePagesChange:this.onVisiblePagesChange,pdfWorkerSrc:this.pdfWorkerSrc,ref:e=>this.viewer=e,type:"application/pdf",viewMode:this.viewMode,zoom:this.zoom,skipNativeDownload:this.skipNativeDownload}),a("div",{key:"e4fd9b4a87351e8e61065adeca6808e9b0fd66d5",class:"pdf-reader__mobile-zoom-controls"},a("button",{key:"fbf7248c8ea712e219bc2aac1af264e82d4564b8","aria-label":this.autoZoomLabel,class:"pdf-reader__mobile-zoom-button",onClick:this.onZoomAutoButtonClick,type:"button"},a("auto"===this.zoom?"swirl-icon-fullscreen-exit":"swirl-icon-fullscreen",null)),a("button",{key:"a031e0f3c23866df574ecae5350a052557580af5","aria-label":this.zoomInButtonLabel,class:"pdf-reader__mobile-zoom-button",disabled:this.zoom===this.zoomSteps[this.zoomSteps.length-1],onClick:this.onZoomInButtonClick,type:"button"},a("swirl-icon-add",{key:"6e8fdd862163e835491f83e57ad940fad7432a7e"})),a("button",{key:"09c657fcd3aa2b6c2cab864806c708bf37cca8e8","aria-label":this.zoomOutButtonLabel,class:"pdf-reader__mobile-zoom-button",disabled:this.zoom===this.zoomSteps[0],onClick:this.onZoomOutButtonClick,type:"button"},a("swirl-icon-remove",{key:"db455e29ee64652351ba79ab5532596e6717c61e"}))))),a("swirl-popover",{key:"249c3142c49e548fde330ae2147e17c87ea7ca73",animation:"scale-in-y",disableScrollLock:!0,id:"menu",label:this.menuLabel,placement:"bottom-end",ref:e=>this.menu=e},a("swirl-stack",{key:"aba0369a00834ec1b648f853439046653e9d162b"},a("div",{key:"eaff98da63f9ebe19c3fc47fe9bcf7dbbba8de4f",class:"pdf-reader__meta"},a("div",{key:"63f07b330a3070aa952fe913375415d564a48227",class:"pdf-reader__file-icon"},a("svg",{key:"3a11a8cbf48f68a5f808578dd12fae317d7f88ca",fill:"none",height:"36",viewBox:"0 0 24 36",width:"24"},a("path",{key:"c71d7c61c3c8bf31ee5c1122f2c3f2eef84b50ad",d:"M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z",fill:"white"}),a("path",{key:"b290bd4eca742275e178e08f362c32af8756c42f",d:"M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z",fill:"white"}),a("path",{key:"c28db1ecf84d2acf2b5ba21d92cc24b8e80ea287",d:"M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z",fill:"white"}),a("path",{key:"b93279040b3b8bfdafad37334984aee88b7deca7",d:"M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z",fill:"#FF574D"}),a("path",{key:"9a3ec8c50232b11c0d30058f90fb9f4db250513a",d:"M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z",fill:"white"}),a("path",{key:"2993f50324b12a315eda43eb8357b08e576085c1",d:"M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z",fill:"white"}),a("path",{key:"888e9ef62c85dc7cdfd09cc63a68218f2bf27470",d:"M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z",fill:"white"}),a("path",{key:"b706426740d07c5ff585836080345402fdf1317d",d:"M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z",fill:"white"}))),a("div",{key:"d07da012f129481517f726839afc02108a02b097",class:"pdf-reader__file-info"},a("swirl-text",{key:"de905bdf4ff949934dcb0957aa9849fc6742eb08",truncate:!0,weight:"semibold"},this.label),a("swirl-text",{key:"3205a23f5d27163524ad774e28eaccf8d706d35a",color:"subdued",size:"sm",truncate:!0},this.fileTypeLabel))),e&&a("swirl-separator",{key:"1e2790b93d1ced4b8472d639bb7ffb40d513a664"}),a("swirl-action-list",{key:"b19b3ba85f0c975a39b6549095947f772bfd66c0",class:"pdf-reader__menu"},this.printButtonEnabled&&a("swirl-action-list-item",{key:"c843bfcffed7c1580646e01736796e045038b467",class:"pdf-reader__print-button",icon:"<swirl-icon-print></swirl-icon-print>",label:this.printButtonLabel,onClick:this.onPrintButtonClick}),this.downloadButtonEnabled&&a("swirl-action-list-item",{key:"6e3ebeefadb6444dd47403e31b9988db928b8c5e",class:"pdf-reader__download-button",disabled:this.downloading,icon:this.downloading?'<swirl-spinner size="xs"></swirl-spinner>':"<swirl-icon-download></swirl-icon-download>",label:this.downloadButtonLabel,onClick:this.onDownloadButtonClick}),a("slot",{key:"b136a2445e68ffd0670f69e9c20755e1c460e504",name:"menu-items"}))))))}get el(){return this}static get watchers(){return{showThumbnails:[{watchShowThumbnails:0}]}}static get style(){return':host{--thumbnails-width:7rem;display:block}:host *{box-sizing:border-box}.pdf-reader{position:fixed;z-index:var(--s-z-40);background-color:var(--s-surface-neutral-subdued);inset:0;touch-action:pan-x pan-y;border:none;padding:0;width:100%;height:100%;max-width:none;max-height:none;overflow:visible}.pdf-reader::backdrop{display:none}.pdf-reader:not([open]){display:none}.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{animation:0.15s pdf-reader-fade-in}@media (prefers-reduced-motion){.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{animation:none}}.pdf-reader--closing{animation:0.15s pdf-reader-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.pdf-reader--closing{animation:none}}.pdf-reader--show-thumbnails .pdf-reader__thumbnails{max-width:var(--thumbnails-width)}.pdf-reader--show-thumbnails .pdf-reader__floating-tools{left:calc(var(--s-space-16) + var(--thumbnails-width))}.pdf-reader--hide-menu .pdf-reader__menu{display:none}.pdf-reader__body{position:relative;width:100%;height:100%}.pdf-reader__header{display:flex;height:4rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-8)}.pdf-reader__header-left,.pdf-reader__header-right{display:flex;flex-grow:1;align-items:center;gap:var(--s-space-8);min-width:0}@media (min-width: 768px){.pdf-reader__header-left,.pdf-reader__header-right{flex-basis:calc(100 / 3 * 1%);flex-grow:0}}.pdf-reader__header-right{justify-content:flex-end;flex-shrink:0}.pdf-reader__header-center{display:none;flex-grow:1;justify-content:center;align-items:center;gap:var(--s-space-16)}@media (min-width: 768px){.pdf-reader__header-center{display:flex}}.pdf-reader__label{overflow:hidden;flex-grow:1;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.pdf-reader__zoom-button-container{display:flex;align-items:center;gap:var(--s-space-8)}.pdf-reader__zoom-button-container>*:not(:last-child){position:relative}.pdf-reader__zoom-button-container>*:not(:last-child):after{position:absolute;top:50%;right:calc(-1 * var(--s-space-4));width:var(--s-border-width-default);height:1.5rem;background-color:var(--s-border-default);content:"";transform:translate3d(50%, -50%, 0)}.pdf-reader__zoom-select-container{position:relative}.pdf-reader__zoom-select{display:inline-flex;height:2.5rem;padding-right:var(--s-space-12);padding-right:calc(var(--s-space-8) + 1.5rem + var(--s-space-12));padding-left:var(--s-space-12);justify-content:flex-start;align-items:center;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-sm);color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pdf-reader__zoom-select:focus:not(:focus-visible){outline:none}.pdf-reader__zoom-select:focus-visible{outline-color:var(--s-focus-default)}.pdf-reader__zoom-select-icon{position:absolute;top:50%;right:var(--s-space-8);display:inline-flex;transform:translateY(-50%);pointer-events:none}.pdf-reader__content{display:flex;width:100%;height:calc(100% - 4rem)}.pdf-reader__thumbnails{display:flex;overflow-x:hidden;overflow-y:auto;max-width:0;height:100%;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);flex-basis:var(--thumbnails-width);flex-grow:0;flex-shrink:0;align-items:center;background-color:var(--s-background-default);flex-direction:column;transition:max-width 0.2s linear;box-shadow:inset calc(-1 * var(--s-border-width-default)) 0 0 0     var(--s-border-default);gap:var(--s-space-4)}.pdf-reader__thumbnail{width:5rem;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);background-color:transparent;cursor:pointer}.pdf-reader__thumbnail>img{display:inline-flex;width:100%}.pdf-reader__thumbnail--active{border-width:0.125rem;border-color:var(--s-border-highlight)}.pdf-reader__viewer{flex-grow:1}.pdf-reader__mobile-zoom-controls{position:absolute;z-index:1;right:var(--s-space-16);bottom:var(--s-space-32);display:flex;padding-bottom:var(--s-space-4);flex-direction:column;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__mobile-zoom-controls{display:none}}.pdf-reader__mobile-zoom-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.pdf-reader__mobile-zoom-button:disabled{cursor:default}.pdf-reader__floating-tools{position:fixed;z-index:1;bottom:var(--s-space-16);left:var(--s-space-16);display:none;flex-direction:column;transition:left 0.2s linear;gap:var(--s-space-12)}@media (min-width: 768px){.pdf-reader__floating-tools{display:flex}}.pdf-reader__floating-tool-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer}.pdf-reader__meta{display:flex;padding-top:var(--s-space-4);padding-right:var(--s-space-16);padding-bottom:var(--s-space-4);padding-left:var(--s-space-8);align-items:center;gap:var(--s-space-12)}@media (min-width: 768px){.pdf-reader__meta{max-width:18rem}}.pdf-reader__file-icon{display:inline-flex;padding-left:var(--s-space-4);flex-shrink:0}.pdf-reader__file-info{display:flex;min-width:0;flex-grow:1;flex-direction:column}@keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}'}},[257,"swirl-pdf-reader",{autoZoomLabel:[1,"auto-zoom-label"],closeButtonLabel:[1,"close-button-label"],downloadButtonEnabled:[4,"download-button-enabled"],downloadButtonLabel:[1,"download-button-label"],file:[1],fileName:[1,"file-name"],fileTypeLabel:[1,"file-type-label"],label:[1],menuLabel:[1,"menu-label"],menuTriggerLabel:[1,"menu-trigger-label"],pdfWorkerSrc:[1,"pdf-worker-src"],printButtonEnabled:[4,"print-button-enabled"],printButtonLabel:[1,"print-button-label"],sideBySideButtonLabel:[1,"side-by-side-button-label"],thumbnailButtonLabel:[1,"thumbnail-button-label"],thumbnailsButtonLabel:[1,"thumbnails-button-label"],thumbnailsLabel:[1,"thumbnails-label"],zoomInButtonLabel:[1,"zoom-in-button-label"],zoomOutButtonLabel:[1,"zoom-out-button-label"],zoomSelectLabel:[1,"zoom-select-label"],skipNativeDownload:[4,"skip-native-download"],active:[32],closing:[32],opening:[32],downloading:[32],loadingThumbnails:[32],thumbnails:[32],showThumbnails:[32],viewMode:[32],visiblePages:[32],zoom:[32],zoomSteps:[32],open:[64],close:[64]},[[9,"resize","onWindowResize"]],{showThumbnails:[{watchShowThumbnails:0}]}]),N=W,O=function(){"undefined"!=typeof customElements&&["swirl-pdf-reader","swirl-action-list","swirl-action-list-item","swirl-button","swirl-file-viewer","swirl-file-viewer-audio","swirl-file-viewer-csv","swirl-file-viewer-fallback","swirl-file-viewer-image","swirl-file-viewer-pdf","swirl-file-viewer-text","swirl-file-viewer-video","swirl-icon-add","swirl-icon-error","swirl-icon-expand-more","swirl-icon-file","swirl-icon-file-copy","swirl-icon-fullscreen","swirl-icon-fullscreen-exit","swirl-icon-menu-book","swirl-icon-remove","swirl-inline-error","swirl-popover","swirl-popover-trigger","swirl-separator","swirl-spinner","swirl-stack","swirl-text","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-pdf-reader":customElements.get(r(e))||customElements.define(r(e),W);break;case"swirl-action-list":customElements.get(r(e))||f();break;case"swirl-action-list-item":customElements.get(r(e))||b();break;case"swirl-button":customElements.get(r(e))||h();break;case"swirl-file-viewer":customElements.get(r(e))||p();break;case"swirl-file-viewer-audio":customElements.get(r(e))||m();break;case"swirl-file-viewer-csv":customElements.get(r(e))||u();break;case"swirl-file-viewer-fallback":customElements.get(r(e))||w();break;case"swirl-file-viewer-image":customElements.get(r(e))||_();break;case"swirl-file-viewer-pdf":customElements.get(r(e))||v();break;case"swirl-file-viewer-text":customElements.get(r(e))||g();break;case"swirl-file-viewer-video":customElements.get(r(e))||k();break;case"swirl-icon-add":customElements.get(r(e))||y();break;case"swirl-icon-error":customElements.get(r(e))||x();break;case"swirl-icon-expand-more":customElements.get(r(e))||C();break;case"swirl-icon-file":customElements.get(r(e))||z();break;case"swirl-icon-file-copy":customElements.get(r(e))||j();break;case"swirl-icon-fullscreen":customElements.get(r(e))||E();break;case"swirl-icon-fullscreen-exit":customElements.get(r(e))||H();break;case"swirl-icon-menu-book":customElements.get(r(e))||V();break;case"swirl-icon-remove":customElements.get(r(e))||L();break;case"swirl-inline-error":customElements.get(r(e))||M();break;case"swirl-popover":customElements.get(r(e))||Z();break;case"swirl-popover-trigger":customElements.get(r(e))||S();break;case"swirl-separator":customElements.get(r(e))||B();break;case"swirl-spinner":customElements.get(r(e))||T();break;case"swirl-stack":customElements.get(r(e))||D();break;case"swirl-text":customElements.get(r(e))||P();break;case"swirl-visually-hidden":customElements.get(r(e))||F()}}))};export{N as SwirlPdfReader,O as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as i,createEvent as a,h as s,Host as t,transformTag as r}from"@stencil/core/internal/client";import{d as o,e as l}from"./bodyScrollLock.esm.js";import{c as d}from"./index2.js";import{q as n,i as c}from"./utils.js";import{d as f}from"./swirl-action-list2.js";import{d as b}from"./swirl-action-list-item2.js";import{d as h}from"./swirl-button2.js";import{d as p}from"./swirl-file-viewer2.js";import{d as m}from"./swirl-file-viewer-audio2.js";import{d as u}from"./swirl-file-viewer-csv2.js";import{d as w}from"./swirl-file-viewer-fallback2.js";import{d as _}from"./swirl-file-viewer-image2.js";import{d as v}from"./swirl-file-viewer-pdf2.js";import{d as g}from"./swirl-file-viewer-text2.js";import{d as k}from"./swirl-file-viewer-video2.js";import{d as y}from"./swirl-icon-add2.js";import{d as x}from"./swirl-icon-error2.js";import{d as C}from"./swirl-icon-expand-more2.js";import{d as z}from"./swirl-icon-file2.js";import{d as j}from"./swirl-icon-file-copy2.js";import{d as E}from"./swirl-icon-fullscreen2.js";import{d as H}from"./swirl-icon-fullscreen-exit2.js";import{d as V}from"./swirl-icon-menu-book2.js";import{d as L}from"./swirl-icon-remove2.js";import{d as M}from"./swirl-inline-error2.js";import{d as Z}from"./swirl-popover2.js";import{d as S}from"./swirl-popover-trigger2.js";import{d as B}from"./swirl-separator2.js";import{d as T}from"./swirl-spinner2.js";import{d as D}from"./swirl-stack2.js";import{d as P}from"./swirl-text2.js";import{d as F}from"./swirl-visually-hidden2.js";const W=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.modalClose=a(this,"modalClose",7),this.modalOpen=a(this,"modalOpen",7),this.autoZoomLabel="Full width",this.closeButtonLabel="Close PDF viewer",this.downloadButtonEnabled=!0,this.downloadButtonLabel="Download PDF",this.fileTypeLabel="PDF Document",this.menuLabel="File menu",this.menuTriggerLabel="Open file menu",this.printButtonEnabled=!0,this.printButtonLabel="Print PDF",this.sideBySideButtonLabel="Toggle side by side view",this.thumbnailButtonLabel="Scroll to page",this.thumbnailsButtonLabel="Toggle thumbnails",this.thumbnailsLabel="Page thumbnails",this.zoomInButtonLabel="Zoom in",this.zoomOutButtonLabel="Zoom out",this.zoomSelectLabel="Select zoom",this.skipNativeDownload=!1,this.active=!1,this.closing=!1,this.opening=!1,this.downloading=!1,this.loadingThumbnails=!1,this.thumbnails=[],this.viewMode="single",this.visiblePages=[],this.desktopZoomSteps=[.5,.75,1,1.25,1.5,2,3,4],this.mobileZoomSteps=[.5,.75,1,1.25,1.5],this.onClose=()=>{this.closing=!1,this.active=!1,this.modalClose.emit()},this.toggleViewMode=()=>{this.viewMode="single"===this.viewMode?"side-by-side":"single"},this.toggleThumbnals=()=>{this.showThumbnails=!this.showThumbnails},this.onKeyDown=e=>{"Escape"===e.code&&(e.stopImmediatePropagation(),e.preventDefault(),this.close())},this.onActivate=async e=>{this.pdfViewer=e.detail,this.lockBodyScroll()},this.onVisiblePagesChange=async e=>{this.visiblePages=e.detail},this.onCloseButtonClick=()=>{this.close()},this.onPrintButtonClick=()=>{this.pdfViewer.print(),this.menu.close()},this.onDownloadButtonClick=async()=>{this.downloading=!0,await this.viewer.download(),this.downloading=!1,this.menu.close()},this.onZoomInButtonClick=()=>{const e=this.zoomSteps.indexOf(+this.zoom);this.zoom=-1===e?1:this.zoomSteps[Math.min(this.zoomSteps.length-1,e+1)]},this.onZoomOutButtonClick=()=>{const e=this.zoomSteps.indexOf(+this.zoom);this.zoom=-1===e?1:this.zoomSteps[Math.max(0,e-1)]},this.onZoomAutoButtonClick=()=>{this.zoom="auto"===this.zoom?1:"auto"},this.onZoomChange=e=>{const i=e.target.value;this.zoom="auto"===i?i:+i},this.onThumbnailClick=e=>()=>{const i=n(this.el,`[data-page-number="${e+1}"]`)?.[0];i?.scrollIntoView()}}componentWillLoad(){this.updateZoomSteps(),this.zoom=c()?"auto":1}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps()}disconnectedCallback(){this.unlockBodyScroll(),this.modalEl?.open&&this.modalEl.close()}ensureOpening(){this.opening&&!this.modalEl?.open&&this.open()}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}onWindowResize(){this.pdfViewer&&(this.updateZoomSteps(),this.zoom=c()?"auto":1)}watchShowThumbnails(){this.showThumbnails&&(this.loadingThumbnails=!0,queueMicrotask((async()=>{await this.generateThumbnails(),this.loadingThumbnails=!1})))}async open(){this.opening=!0,this.modalEl&&(this.modalEl.showModal(),this.active=!0,this.modalOpen.emit())}async close(){this.closing||(this.closing=!0,this.unlockBodyScroll(),setTimeout((()=>{this.modalEl.close()}),150))}lockBodyScroll(){const e=this.pdfViewer?.shadowRoot.querySelector(".file-viewer-pdf__pages");e&&o(e)}unlockBodyScroll(){const e=this.pdfViewer?.shadowRoot.querySelector(".file-viewer-pdf__pages");e&&l(e)}async generateThumbnails(){this.thumbnails=await this.pdfViewer.getThumbnails()}updateZoomSteps(){this.zoomSteps=c()?this.mobileZoomSteps:this.desktopZoomSteps}render(){const e=!!this.el.querySelector("[slot='menu-items']")||this.printButtonEnabled||this.downloadButtonEnabled,i=d("pdf-reader",{"pdf-reader--closing":this.closing,"pdf-reader--hide-menu":!e,"pdf-reader--show-thumbnails":this.showThumbnails});return s(t,{key:"73cf99f14aa83199a1206bc3306ea5fb5306db3a"},s("dialog",{key:"3cbfb7a8bb396128a24cb6abe3224895c56ff75f","aria-label":this.label,class:i,id:"pdf-reader",onClose:this.onClose,onKeyDown:this.onKeyDown,ref:e=>this.modalEl=e},s("div",{key:"d2d4d24e92b3f2e386964025b0442f87bbd1d5ea",class:"pdf-reader__body",role:"document"},s("header",{key:"7bb05b45986120bbc2880a6c5bb4116f2cf15573",class:"pdf-reader__header"},s("span",{key:"9cca87aa311ee56e1af223aad51985f4d3436ada",class:"pdf-reader__header-left"},s("swirl-button",{key:"d3dd516950c5715a320a777fc893b7f6fa80133b",class:"pdf-reader__close-button",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.closeButtonLabel,onClick:this.onCloseButtonClick}),s("span",{key:"17d21aefc660463ecdb5c60fc1a1c86a3986a9e8",class:"pdf-reader__label"},this.label)),s("span",{key:"f13096352c0c10071f4fecd389edf6907292f493",class:"pdf-reader__header-center"},s("span",{key:"ca3abc00ee708ab654e778d422298704527597e0",class:"pdf-reader__zoom-button-container"},s("swirl-button",{key:"ba9b48a7875331bd35c31224b6dc03d0ee9a89bc",class:"pdf-reader__zoom-button",disabled:this.zoom===this.zoomSteps[0],hideLabel:!0,icon:"<swirl-icon-remove></swirl-icon-remove>",label:this.zoomOutButtonLabel,onClick:this.onZoomOutButtonClick}),s("swirl-button",{key:"d994e5e66d238dc1770d3aacb2f3688ce182396c",class:"pdf-reader__zoom-button",disabled:this.zoom===this.zoomSteps[this.zoomSteps.length-1],hideLabel:!0,icon:"<swirl-icon-add></swirl-icon-add>",label:this.zoomInButtonLabel,onClick:this.onZoomInButtonClick})),s("span",{key:"d625581b1fa85943b15fbfa3572cbb39a48697da",class:"pdf-reader__zoom-select-container"},s("select",{key:"11675aaa947ab1b18bbebdbb97cf77adff5cf692","aria-label":this.zoomSelectLabel,class:"pdf-reader__zoom-select",name:"zoom-select",id:"zoom-select",onChange:this.onZoomChange},s("option",{key:"21a0557bb82316d5ffa6623e5ba4e3f4bdf966a6",selected:"auto"===this.zoom,value:"auto"},this.autoZoomLabel),this.zoomSteps.map((e=>s("option",{key:e,selected:this.zoom===e,value:e},100*e,"%")))),s("swirl-icon-expand-more",{key:"9e2919b00b85ebaae0c9e8abcdad8ecc910fc535",class:"pdf-reader__zoom-select-icon"}))),s("span",{key:"f3a52ad05ee7f1a862dca00472016e630b7b4dfd",class:"pdf-reader__header-right"},s("swirl-popover-trigger",{key:"1ac682adaf6efc6b70a96cf0766527e1694a0eb6",swirlPopover:this.menu},s("swirl-button",{key:"9c89b036f6b5846e7e35997b362fc2db76009e44",class:"pdf-reader__menu-button",hideLabel:!0,icon:"<swirl-icon-more-vertikal></swirl-icon-more-vertikal>",label:this.menuTriggerLabel}))),s("span",{key:"680301c619bb96fb871150e9ec0e29a017c360a4",class:"pdf-reader__floating-tools"},s("button",{key:"d6756d351b887ff1c4c7250c9a08d89ebb7defbb","aria-label":this.sideBySideButtonLabel,class:"pdf-reader__floating-tool-button",onClick:this.toggleViewMode,type:"button"},s("swirl-icon-menu-book",{key:"34885365167c1533683f4d704f71533e2cda6e9a"})),s("button",{key:"b09a7516105825b9ebfd58b621e9400a01f92cbf","aria-controls":"thumbnails","aria-expanded":!!this.showThumbnails+"","aria-label":this.thumbnailsButtonLabel,class:"pdf-reader__floating-tool-button",onClick:this.toggleThumbnals,type:"button"},s("swirl-icon-file-copy",{key:"ad53b6906e48e5e97c160337a0afc1e15ee68a88"})))),s("div",{key:"9cb9dd89e8f8019a36b6a253816830c3c9eb2e6a",class:"pdf-reader__content"},s("nav",{key:"0e7f7bb708c03556e7d546a1a1b0ab4abb491030","aria-label":this.thumbnailsLabel,class:"pdf-reader__thumbnails",id:"thumbnails"},this.loadingThumbnails&&s("swirl-spinner",{key:"99605a278aff8e0ce05e63d6e4a97a7bc67c359c"}),!this.loadingThumbnails&&this.thumbnails.map(((e,i)=>{const a=d("pdf-reader__thumbnail",{"pdf-reader__thumbnail--active":this.visiblePages[0]===i+1});return s("button",{"aria-label":`${this.thumbnailButtonLabel} ${i+1}`,class:a,onClick:this.onThumbnailClick(i),type:"button"},s("img",{src:e.toDataURL("image/png"),alt:""}))}))),s("swirl-file-viewer",{key:"4b388ad41703870c1ba2ed3a1ac699beb86e9969",active:this.active,class:"pdf-reader__viewer",disablePrint:!this.printButtonEnabled,file:this.file,fileName:this.fileName,onActivate:this.onActivate,onVisiblePagesChange:this.onVisiblePagesChange,pdfWorkerSrc:this.pdfWorkerSrc,ref:e=>this.viewer=e,type:"application/pdf",viewMode:this.viewMode,zoom:this.zoom,skipNativeDownload:this.skipNativeDownload}),s("div",{key:"5acb89b6682c076dc4db5dbbc0b57a6ac2037549",class:"pdf-reader__mobile-zoom-controls"},s("button",{key:"a1ed5e44b71d7d09826c55756f8a18eebad2fbb6","aria-label":this.autoZoomLabel,class:"pdf-reader__mobile-zoom-button",onClick:this.onZoomAutoButtonClick,type:"button"},s("auto"===this.zoom?"swirl-icon-fullscreen-exit":"swirl-icon-fullscreen",null)),s("button",{key:"1c24dbff262f1b4a7c054beea5dfae37635c30f5","aria-label":this.zoomInButtonLabel,class:"pdf-reader__mobile-zoom-button",disabled:this.zoom===this.zoomSteps[this.zoomSteps.length-1],onClick:this.onZoomInButtonClick,type:"button"},s("swirl-icon-add",{key:"4fe3386910f0d5700f11dd25e85d7338ed0b36c5"})),s("button",{key:"4e142c456b5c61eef7807ed7cfbf620a736eaf16","aria-label":this.zoomOutButtonLabel,class:"pdf-reader__mobile-zoom-button",disabled:this.zoom===this.zoomSteps[0],onClick:this.onZoomOutButtonClick,type:"button"},s("swirl-icon-remove",{key:"a0b28c587c07b68964a31f1e13715f0988cf0c88"}))))),s("swirl-popover",{key:"b022532137d6cd112a42fddba4a951c651c2b7ac",animation:"scale-in-y",disableScrollLock:!0,id:"menu",label:this.menuLabel,placement:"bottom-end",ref:e=>this.menu=e},s("swirl-stack",{key:"c1dfcefeb984c2b9db18768083c1aac64a9e8907"},s("div",{key:"9de5a74b3c5de126bb0b3ec211c1a64a90c74eea",class:"pdf-reader__meta"},s("div",{key:"75e4e4b32c6333f4bab66925c486ca6522dbe3e0",class:"pdf-reader__file-icon"},s("svg",{key:"88e9142ecd1a3f1417f6e92c153bf326c3eca8e4",fill:"none",height:"36",viewBox:"0 0 24 36",width:"24"},s("path",{key:"9f3753465f22849be0722768044c1903c6956120",d:"M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z",fill:"white"}),s("path",{key:"86b621b77cc767d51ff034991c4386e4c7722869",d:"M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z",fill:"white"}),s("path",{key:"598b4a2f9d03ce475122eac251926c36bef9b9f0",d:"M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z",fill:"white"}),s("path",{key:"f0db885d41a3cc322de24fef2e01d376afb4fd48",d:"M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z",fill:"#FF574D"}),s("path",{key:"d8ea4f97a6b7f7d3a635a7a6e2833a7892958b91",d:"M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z",fill:"white"}),s("path",{key:"3d96a97f287f4984dd5c9d38650503432e78070d",d:"M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z",fill:"white"}),s("path",{key:"e30be770aa8900075b8d5999695432e4b32d00e9",d:"M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z",fill:"white"}),s("path",{key:"e4301fe3a0e3e71aa76f7db6605c906afda2dbd8",d:"M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z",fill:"white"}))),s("div",{key:"d11b2a517b8453d9e05baab4a7dc568d1bf166ba",class:"pdf-reader__file-info"},s("swirl-text",{key:"fa0604780095cd629db8e2362e2d14f539b07f5c",truncate:!0,weight:"semibold"},this.label),s("swirl-text",{key:"83598af89fc7cc1d6a8768260ae2a49a32f893d7",color:"subdued",size:"sm",truncate:!0},this.fileTypeLabel))),e&&s("swirl-separator",{key:"8d3a9b5db77f8a6b94b072452ebe1411221d138d"}),s("swirl-action-list",{key:"fac3b9c7823ea98a31fd968440e0edb0b2b482ad",class:"pdf-reader__menu"},this.printButtonEnabled&&s("swirl-action-list-item",{key:"795d1c16589ccb40bf160f06087e6fa6bde0fa52",class:"pdf-reader__print-button",icon:"<swirl-icon-print></swirl-icon-print>",label:this.printButtonLabel,onClick:this.onPrintButtonClick}),this.downloadButtonEnabled&&s("swirl-action-list-item",{key:"147e33d533f8977f0eddef5d654174a2253f7c65",class:"pdf-reader__download-button",disabled:this.downloading,icon:this.downloading?'<swirl-spinner size="xs"></swirl-spinner>':"<swirl-icon-download></swirl-icon-download>",label:this.downloadButtonLabel,onClick:this.onDownloadButtonClick}),s("slot",{key:"c602d6ff8e1d6d3a9e0459bff8eae31b61b9adb6",name:"menu-items"}))))))}get el(){return this}static get watchers(){return{showThumbnails:[{watchShowThumbnails:0}]}}static get style(){return':host{--thumbnails-width:7rem;display:block}:host *{box-sizing:border-box}.pdf-reader{position:fixed;z-index:var(--s-z-40);background-color:var(--s-surface-neutral-subdued);inset:0;touch-action:pan-x pan-y;border:none;padding:0;width:100%;height:100%;max-width:none;max-height:none;overflow:visible}.pdf-reader::backdrop{display:none}.pdf-reader:not([open]){display:none}.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{animation:0.15s pdf-reader-fade-in}@media (prefers-reduced-motion){.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{animation:none}}.pdf-reader--closing{animation:0.15s pdf-reader-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.pdf-reader--closing{animation:none}}.pdf-reader--show-thumbnails .pdf-reader__thumbnails{max-width:var(--thumbnails-width)}.pdf-reader--show-thumbnails .pdf-reader__floating-tools{left:calc(var(--s-space-16) + var(--thumbnails-width))}.pdf-reader--hide-menu .pdf-reader__menu{display:none}.pdf-reader__body{position:relative;width:100%;height:100%}.pdf-reader__header{display:flex;height:4rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-8)}.pdf-reader__header-left,.pdf-reader__header-right{display:flex;flex-grow:1;align-items:center;gap:var(--s-space-8);min-width:0}@media (min-width: 768px){.pdf-reader__header-left,.pdf-reader__header-right{flex-basis:calc(100 / 3 * 1%);flex-grow:0}}.pdf-reader__header-right{justify-content:flex-end;flex-shrink:0}.pdf-reader__header-center{display:none;flex-grow:1;justify-content:center;align-items:center;gap:var(--s-space-16)}@media (min-width: 768px){.pdf-reader__header-center{display:flex}}.pdf-reader__label{overflow:hidden;flex-grow:1;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.pdf-reader__zoom-button-container{display:flex;align-items:center;gap:var(--s-space-8)}.pdf-reader__zoom-button-container>*:not(:last-child){position:relative}.pdf-reader__zoom-button-container>*:not(:last-child):after{position:absolute;top:50%;right:calc(-1 * var(--s-space-4));width:var(--s-border-width-default);height:1.5rem;background-color:var(--s-border-default);content:"";transform:translate3d(50%, -50%, 0)}.pdf-reader__zoom-select-container{position:relative}.pdf-reader__zoom-select{display:inline-flex;height:2.5rem;padding-right:var(--s-space-12);padding-right:calc(var(--s-space-8) + 1.5rem + var(--s-space-12));padding-left:var(--s-space-12);justify-content:flex-start;align-items:center;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-sm);color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pdf-reader__zoom-select:focus:not(:focus-visible){outline:none}.pdf-reader__zoom-select:focus-visible{outline-color:var(--s-focus-default)}.pdf-reader__zoom-select-icon{position:absolute;top:50%;right:var(--s-space-8);display:inline-flex;transform:translateY(-50%);pointer-events:none}.pdf-reader__content{display:flex;width:100%;height:calc(100% - 4rem)}.pdf-reader__thumbnails{display:flex;overflow-x:hidden;overflow-y:auto;max-width:0;height:100%;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);flex-basis:var(--thumbnails-width);flex-grow:0;flex-shrink:0;align-items:center;background-color:var(--s-background-default);flex-direction:column;transition:max-width 0.2s linear;box-shadow:inset calc(-1 * var(--s-border-width-default)) 0 0 0     var(--s-border-default);gap:var(--s-space-4)}.pdf-reader__thumbnail{width:5rem;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);background-color:transparent;cursor:pointer}.pdf-reader__thumbnail>img{display:inline-flex;width:100%}.pdf-reader__thumbnail--active{border-width:0.125rem;border-color:var(--s-border-highlight)}.pdf-reader__viewer{flex-grow:1}.pdf-reader__mobile-zoom-controls{position:absolute;z-index:1;right:var(--s-space-16);bottom:var(--s-space-32);display:flex;padding-bottom:var(--s-space-4);flex-direction:column;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__mobile-zoom-controls{display:none}}.pdf-reader__mobile-zoom-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.pdf-reader__mobile-zoom-button:disabled{cursor:default}.pdf-reader__floating-tools{position:fixed;z-index:1;bottom:var(--s-space-16);left:var(--s-space-16);display:none;flex-direction:column;transition:left 0.2s linear;gap:var(--s-space-12)}@media (min-width: 768px){.pdf-reader__floating-tools{display:flex}}.pdf-reader__floating-tool-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer}.pdf-reader__meta{display:flex;padding-top:var(--s-space-4);padding-right:var(--s-space-16);padding-bottom:var(--s-space-4);padding-left:var(--s-space-8);align-items:center;gap:var(--s-space-12)}@media (min-width: 768px){.pdf-reader__meta{max-width:18rem}}.pdf-reader__file-icon{display:inline-flex;padding-left:var(--s-space-4);flex-shrink:0}.pdf-reader__file-info{display:flex;min-width:0;flex-grow:1;flex-direction:column}@keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}'}},[257,"swirl-pdf-reader",{autoZoomLabel:[1,"auto-zoom-label"],closeButtonLabel:[1,"close-button-label"],downloadButtonEnabled:[4,"download-button-enabled"],downloadButtonLabel:[1,"download-button-label"],file:[1],fileName:[1,"file-name"],fileTypeLabel:[1,"file-type-label"],label:[1],menuLabel:[1,"menu-label"],menuTriggerLabel:[1,"menu-trigger-label"],pdfWorkerSrc:[1,"pdf-worker-src"],printButtonEnabled:[4,"print-button-enabled"],printButtonLabel:[1,"print-button-label"],sideBySideButtonLabel:[1,"side-by-side-button-label"],thumbnailButtonLabel:[1,"thumbnail-button-label"],thumbnailsButtonLabel:[1,"thumbnails-button-label"],thumbnailsLabel:[1,"thumbnails-label"],zoomInButtonLabel:[1,"zoom-in-button-label"],zoomOutButtonLabel:[1,"zoom-out-button-label"],zoomSelectLabel:[1,"zoom-select-label"],skipNativeDownload:[4,"skip-native-download"],active:[32],closing:[32],opening:[32],downloading:[32],loadingThumbnails:[32],thumbnails:[32],showThumbnails:[32],viewMode:[32],visiblePages:[32],zoom:[32],zoomSteps:[32],open:[64],close:[64]},[[9,"resize","onWindowResize"]],{showThumbnails:[{watchShowThumbnails:0}]}]),N=W,O=function(){"undefined"!=typeof customElements&&["swirl-pdf-reader","swirl-action-list","swirl-action-list-item","swirl-button","swirl-file-viewer","swirl-file-viewer-audio","swirl-file-viewer-csv","swirl-file-viewer-fallback","swirl-file-viewer-image","swirl-file-viewer-pdf","swirl-file-viewer-text","swirl-file-viewer-video","swirl-icon-add","swirl-icon-error","swirl-icon-expand-more","swirl-icon-file","swirl-icon-file-copy","swirl-icon-fullscreen","swirl-icon-fullscreen-exit","swirl-icon-menu-book","swirl-icon-remove","swirl-inline-error","swirl-popover","swirl-popover-trigger","swirl-separator","swirl-spinner","swirl-stack","swirl-text","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-pdf-reader":customElements.get(r(e))||customElements.define(r(e),W);break;case"swirl-action-list":customElements.get(r(e))||f();break;case"swirl-action-list-item":customElements.get(r(e))||b();break;case"swirl-button":customElements.get(r(e))||h();break;case"swirl-file-viewer":customElements.get(r(e))||p();break;case"swirl-file-viewer-audio":customElements.get(r(e))||m();break;case"swirl-file-viewer-csv":customElements.get(r(e))||u();break;case"swirl-file-viewer-fallback":customElements.get(r(e))||w();break;case"swirl-file-viewer-image":customElements.get(r(e))||_();break;case"swirl-file-viewer-pdf":customElements.get(r(e))||v();break;case"swirl-file-viewer-text":customElements.get(r(e))||g();break;case"swirl-file-viewer-video":customElements.get(r(e))||k();break;case"swirl-icon-add":customElements.get(r(e))||y();break;case"swirl-icon-error":customElements.get(r(e))||x();break;case"swirl-icon-expand-more":customElements.get(r(e))||C();break;case"swirl-icon-file":customElements.get(r(e))||z();break;case"swirl-icon-file-copy":customElements.get(r(e))||j();break;case"swirl-icon-fullscreen":customElements.get(r(e))||E();break;case"swirl-icon-fullscreen-exit":customElements.get(r(e))||H();break;case"swirl-icon-menu-book":customElements.get(r(e))||V();break;case"swirl-icon-remove":customElements.get(r(e))||L();break;case"swirl-inline-error":customElements.get(r(e))||M();break;case"swirl-popover":customElements.get(r(e))||Z();break;case"swirl-popover-trigger":customElements.get(r(e))||S();break;case"swirl-separator":customElements.get(r(e))||B();break;case"swirl-spinner":customElements.get(r(e))||T();break;case"swirl-stack":customElements.get(r(e))||D();break;case"swirl-text":customElements.get(r(e))||P();break;case"swirl-visually-hidden":customElements.get(r(e))||F()}}))};export{N as SwirlPdfReader,O as defineCustomElement}