@getflip/swirl-components 0.531.3 → 0.532.0

package/dist/components/swirl-modal.js

@@ -1 +1 @@
-import{proxyCustomElement as a,HTMLElement as o,createEvent as e,h as d,Host as t,transformTag as s}from"@stencil/core/internal/client";import{c as i}from"./index2.js";import{t as r}from"./index.esm.js";import{k as l}from"./utils.js";import{d as n,e as m}from"./body-scroll-lock.js";import{d as c}from"./swirl-button2.js";import{d as h}from"./swirl-button-group2.js";import{d as b}from"./swirl-heading2.js";import{d as f}from"./swirl-stack2.js";const p=a(class extends o{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.toggleFullscreen=e(this,"toggleFullscreen",3),this.modalClose=e(this,"modalClose",3),this.modalOpen=e(this,"modalOpen",3),this.primaryAction=e(this,"primaryAction",3),this.requestModalClose=e(this,"requestModalClose",3),this.secondaryAction=e(this,"secondaryAction",3),this.sidebarClose=e(this,"sidebarClose",3),this.toggleDialog=e(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 o={newState:a.newState,dialog:this.modalEl};this.el.isConnected?this.toggleDialog.emit(o):document.dispatchEvent(new CustomEvent("toggleDialog",{bubbles:!0,composed:!0,detail:o}))},this.onBackdropClick=()=>{this.disableBackdropClose||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.updateCustomFooterStatus=()=>{this.hasCustomFooter=!!this.el.querySelector(':scope > [slot="custom-footer"]')},this.updateCustomHeaderStatus=()=>{this.hasCustomHeader=!!this.el.querySelector(':scope > [slot="custom-header"]')},this.updateHeaderToolsStatus=()=>{this.hasHeaderTools=!!this.el.querySelector(':scope > [slot="header-tools"]')},this.updateSecondaryContentStatus=()=>{this.hasSecondaryContent=!!this.el.querySelector(':scope > [slot="secondary-content"]')},this.updateSidebarContentStatus=()=>{this.hasSidebarContent=!!this.el.querySelector(':scope > [slot="sidebar-content"]')},this.updateSidebarFooterStatus=()=>{this.hasSidebarFooter=!!this.el.querySelector(':scope > [slot="sidebar-footer"]')},this.determineScrollStatus=()=>{this.determineMainScrollStatus(),this.determineSidebarScrollStatus()},this.determineMainScrollStatus=()=>{const a=this.scrollContainer?.scrollTop>0,o=Math.ceil(this.scrollContainer?.scrollTop+this.scrollContainer?.offsetHeight)>=this.scrollContainer?.scrollHeight,e=this.scrollContainer?.scrollHeight>this.scrollContainer?.offsetHeight;a!==this.scrolled&&(this.scrolled=a),o!==this.scrolledDown&&(this.scrolledDown=o),e!==this.scrollable&&(this.scrollable=e)},this.determineSidebarScrollStatus=()=>{const a=this.sidebarScrollContainer?.scrollTop>0,o=Math.ceil(this.sidebarScrollContainer?.scrollTop+this.sidebarScrollContainer?.offsetHeight)>=this.sidebarScrollContainer?.scrollHeight,e=this.sidebarScrollContainer?.scrollHeight>this.sidebarScrollContainer?.offsetHeight;a!==this.sidebarScrolled&&(this.sidebarScrolled=a),o!==this.sidebarScrolledDown&&(this.sidebarScrolledDown=o),e!==this.sidebarScrollable&&(this.sidebarScrollable=e)}}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}handleAutoFocus(){const a=this.el.querySelector("input[autofocus]");a&&(this.focusIsInsideContent()&&document.activeElement!==a||a.focus())}focusIsInsideContent(){const a=document.activeElement;if(a&&a!==this.el&&this.el.contains(a))return!0;const o=l();return!!o&&this.el.contains(o)}lockBodyScroll(){n(this.scrollContainer),n(this.sidebarScrollContainer)}setupMutationObserver(){this.mutationObserver=new MutationObserver((()=>{this.modalEl?.open&&document.activeElement===document.body&&r(this.modalEl).at(0)?.focus()}))}unlockBodyScroll(){this.scrollContainer&&m(this.scrollContainer),this.sidebarScrollContainer&&m(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 o="string"==typeof a?document.querySelector(a):a,e=r(o,{includeContainer:!0,getShadowRoot:!0});e.length>0&&e[0].focus(),this.temporaryReturnFocusTo=void 0}render(){const a=!!this.primaryActionLabel||!!this.secondaryActionLabel,o=i("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,"modal--show-backdrop":!0===this.showBackdrop,"modal--hide-backdrop":!1===this.showBackdrop});return d(t,{key:"a4a86ec07c44c8bdf083b896526c3e8d3693bc8d"},d("dialog",{key:"e06e60af5b6c01152756af0eb143125924fda737","aria-label":this.label,class:o,onClose:this.onClose,onKeyDown:this.onKeyDown,onToggle:this.onToggle,ref:a=>this.modalEl=a},d("div",{key:"dc7fc803d1fed43daafe1c6068a70d306ba26741",class:"modal__backdrop",onClick:this.onBackdropClick}),d("div",{key:"5af6a906a4c258805ca6f2a19f9411d7ade1768c",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:"d81b74fbf405ecaa2fc6d55c63c94455fe969990",class:"modal__sidebar"},this.sidebarLabel&&d("header",{key:"0d50caffb53a40009ba18d975bbd10547d387096",class:i("modal__sidebar-header",{"modal__sidebar-header--has-close-button":this.hasSidebarCloseButton})},this.hasSidebarCloseButton&&d("swirl-button",{key:"ee3f807a5966c16c0e526c0b18e1431582e54056",hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),d("swirl-heading",{key:"6742901788dfb273b471f693fa350a1fb9b81768",as:"h3",class:"modal__sidebar-heading",level:5,text:this.sidebarLabel})),d("div",{key:"ab956419c46fc310e87372b2694f4a2a9bb07548",class:"modal__sidebar-content",onScroll:this.determineSidebarScrollStatus,ref:a=>this.sidebarScrollContainer=a},d("slot",{key:"8cbdb8c776b0d14d0642080fb9f0bb2bd7674b5f",name:"sidebar-content",onSlotchange:this.updateSidebarContentStatus})),d("div",{key:"e85a449242a54494130dc90d345f94025ab482d4",class:"modal__sidebar-footer",part:"modal__sidebar-footer"},d("slot",{key:"860ba1b7cbcbb5ff550a6d4361745e20ee4d3f85",name:"sidebar-footer",onSlotchange:this.updateSidebarFooterStatus}))),d("div",{key:"023a19a5a523cee719ce893f3ca59ee6cb4ab2d0",class:"modal__main-content"},d("header",{key:"6d1299be352a436ae46b05bb39971dc9ff7f8420",class:"modal__custom-header",part:"modal__custom-header"},d("slot",{key:"bb2fded089e747367b720bf42ba171cf04a0b8c7",name:"custom-header",onSlotchange:this.updateCustomHeaderStatus})),(!this.hideLabel||!this.hideCloseButton)&&d("header",{key:"3f59e23fefc8ee3501e2b8b5f909ad551fa6d6fc",class:"modal__header"},d("div",{key:"233a8f13834898444809d9f8433193daa251c16a",class:"modal__header-bar"},!this.hideCloseButton&&d("swirl-button",{key:"7eadd7dd005250a8d8e63f4ba6d9a6f8a1b3ca08",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:"64ee96733baeec6b8522399f35c47c74be0f8102",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:"d9ac5da08638bb7018dac8d1d318c2b4e0736542",as:"h2",class:"modal__heading",level:3,text:this.label}))),d("div",{key:"406b3a855b05e74f1ee4acc1517d67341506fa22",class:"modal__content-container",style:{gap:this.contentGap?`var(--s-space-${this.contentGap})`:void 0}},d("div",{key:"e83c26591a0a2ca9d023eec8dba294cef18fdf89",class:"modal__primary-content",style:{maxWidth:this.primaryContentMaxWidth,flex:this.primaryContentFlex}},d("div",{key:"a47ef165e6614053ea2b6b010c981af59f9987d1",class:"modal__header-tools",part:"modal__header-tools"},d("slot",{key:"15fb393a0674401622c485b3d9aaced96b97ad4a",name:"header-tools",onSlotchange:this.updateHeaderToolsStatus})),d("div",{key:"6a4a0a3b00760a6876295cfbc890aaab922d514c",class:"modal__content",onScroll:this.determineMainScrollStatus,part:"modal__content",ref:a=>this.scrollContainer=a},d("slot",{key:"4a32656a4710b04e1e7c1caf6dd6605946fda893"}))),d("div",{key:"0596be67b7b2d6b9d0aa428a821040a2aac2e135",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:"e111ac8ad27295494a2d88fc85ea41b70e055fe8",name:"secondary-content",onSlotchange:this.updateSecondaryContentStatus}))),d("div",{key:"ad15d1be8af76010ccfc5d4ef8b6e3b5cebcc4a3",class:"modal__custom-footer"},d("slot",{key:"e1d48aea84c02cef82bb25fbf6c57a6c2baedb0d",name:"custom-footer",onSlotchange:this.updateCustomFooterStatus})),a&&d("footer",{key:"2826ebb52ae505ce1777e69662af0e30bd79f252",class:"modal__controls"},d("swirl-button-group",{key:"596093bffabb09ba0fc41452369a60de6438580c",wrap:!0},this.secondaryActionLabel&&d("swirl-button",{key:"37dccfc2ba11660bbc745a13f5b4bb3784c96562",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&d("swirl-button",{key:"f5032c93221904642c8247f278f92963f11fc9ae",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 .modal__body{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing .modal__body{animation:none}}.modal--variant-drawer.modal--closing .modal__backdrop{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing .modal__backdrop{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.modal--show-backdrop .modal__backdrop{background-color:rgba(0, 0, 0, 0.2)}.modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop{animation:none}}.modal.modal--hide-backdrop .modal__backdrop{background-color:transparent;animation:none}.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);padding-top:env(safe-area-inset-top, 0);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"],disableBackdropClose:[4,"disable-backdrop-close"],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"],showBackdrop:[4,"show-backdrop"],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,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),p);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))||b();break;case"swirl-stack":customElements.get(s(a))||f()}}))};export{_ as SwirlModal,u as defineCustomElement}
+import{proxyCustomElement as a,HTMLElement as o,createEvent as e,h as d,Host as t,transformTag as s}from"@stencil/core/internal/client";import{c as i}from"./index2.js";import{t as r}from"./index.esm.js";import{k as l}from"./utils.js";import{d as n,e as m}from"./body-scroll-lock.js";import{d as h}from"./swirl-button2.js";import{d as c}from"./swirl-button-group2.js";import{d as b}from"./swirl-heading2.js";import{d as f}from"./swirl-stack2.js";const p=a(class extends o{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.toggleFullscreen=e(this,"toggleFullscreen",3),this.modalClose=e(this,"modalClose",3),this.modalOpen=e(this,"modalOpen",3),this.primaryAction=e(this,"primaryAction",3),this.requestModalClose=e(this,"requestModalClose",3),this.secondaryAction=e(this,"secondaryAction",3),this.sidebarClose=e(this,"sidebarClose",3),this.toggleDialog=e(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 o={newState:a.newState,dialog:this.modalEl};this.el.isConnected?this.toggleDialog.emit(o):document.dispatchEvent(new CustomEvent("toggleDialog",{bubbles:!0,composed:!0,detail:o}))},this.onBackdropClick=()=>{this.disableBackdropClose||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.updateCustomFooterStatus=()=>{this.hasCustomFooter=!!this.el.querySelector(':scope > [slot="custom-footer"]')},this.updateCustomHeaderStatus=()=>{this.hasCustomHeader=!!this.el.querySelector(':scope > [slot="custom-header"]')},this.updateHeaderToolsStatus=()=>{this.hasHeaderTools=!!this.el.querySelector(':scope > [slot="header-tools"]')},this.updateSecondaryContentStatus=()=>{this.hasSecondaryContent=!!this.el.querySelector(':scope > [slot="secondary-content"]')},this.updateSidebarContentStatus=()=>{this.hasSidebarContent=!!this.el.querySelector(':scope > [slot="sidebar-content"]')},this.updateSidebarFooterStatus=()=>{this.hasSidebarFooter=!!this.el.querySelector(':scope > [slot="sidebar-footer"]')},this.determineScrollStatus=()=>{this.determineMainScrollStatus(),this.determineSidebarScrollStatus()},this.determineMainScrollStatus=()=>{const a=this.scrollContainer?.scrollTop>0,o=Math.ceil(this.scrollContainer?.scrollTop+this.scrollContainer?.offsetHeight)>=this.scrollContainer?.scrollHeight,e=this.scrollContainer?.scrollHeight>this.scrollContainer?.offsetHeight;a!==this.scrolled&&(this.scrolled=a),o!==this.scrolledDown&&(this.scrolledDown=o),e!==this.scrollable&&(this.scrollable=e)},this.determineSidebarScrollStatus=()=>{const a=this.sidebarScrollContainer?.scrollTop>0,o=Math.ceil(this.sidebarScrollContainer?.scrollTop+this.sidebarScrollContainer?.offsetHeight)>=this.sidebarScrollContainer?.scrollHeight,e=this.sidebarScrollContainer?.scrollHeight>this.sidebarScrollContainer?.offsetHeight;a!==this.sidebarScrolled&&(this.sidebarScrolled=a),o!==this.sidebarScrolledDown&&(this.sidebarScrolledDown=o),e!==this.sidebarScrollable&&(this.sidebarScrollable=e)}}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}handleAutoFocus(){const a=this.el.querySelector("input[autofocus]");a&&(this.focusIsInsideContent()&&document.activeElement!==a||a.focus())}focusIsInsideContent(){const a=document.activeElement;if(a&&a!==this.el&&this.el.contains(a))return!0;const o=l();return!!o&&this.el.contains(o)}lockBodyScroll(){n(this.scrollContainer),n(this.sidebarScrollContainer)}setupMutationObserver(){this.mutationObserver=new MutationObserver((()=>{this.modalEl?.open&&document.activeElement===document.body&&r(this.modalEl).at(0)?.focus()}))}unlockBodyScroll(){this.scrollContainer&&m(this.scrollContainer),this.sidebarScrollContainer&&m(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 o="string"==typeof a?document.querySelector(a):a,e=r(o,{includeContainer:!0,getShadowRoot:!0});e.length>0&&e[0].focus(),this.temporaryReturnFocusTo=void 0}render(){const a=!!this.primaryActionLabel||!!this.secondaryActionLabel,o=i("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,"modal--show-backdrop":!0===this.showBackdrop,"modal--hide-backdrop":!1===this.showBackdrop});return d(t,{key:"bb3ee9e0e41689609fb2ce6c758fdfa196224317"},d("dialog",{key:"23edbfbd0e375d320dcbd92f48f7574ec19db3d7","aria-label":this.label,class:o,onClose:this.onClose,onKeyDown:this.onKeyDown,onToggle:this.onToggle,ref:a=>this.modalEl=a},d("div",{key:"483fb8fff488d26051958dafc7bf862a0d08bc06",class:"modal__backdrop",onClick:this.onBackdropClick}),d("div",{key:"4c930e03493ba4a2b145b525051a861b37a37d63",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:"84f4a98782ed78d099cbd1e858070a18d511354d",class:"modal__sidebar"},this.sidebarLabel&&d("header",{key:"abb115208c9b4dc84df877b109403a6891b1e41c",class:i("modal__sidebar-header",{"modal__sidebar-header--has-close-button":this.hasSidebarCloseButton})},this.hasSidebarCloseButton&&d("swirl-button",{key:"63907879a0bca6293e97554af6562dca86b4c9bf",hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),d("swirl-heading",{key:"ff21fff218771d5c248ed629e5ed42669c680f1a",as:"h3",class:"modal__sidebar-heading",level:5,text:this.sidebarLabel})),d("div",{key:"2c8057f8cdeba8327d3bb6a4d52df218cf798c60",class:"modal__sidebar-content",onScroll:this.determineSidebarScrollStatus,ref:a=>this.sidebarScrollContainer=a},d("slot",{key:"f113b74d31d967d39a29ac3873052f61e252283d",name:"sidebar-content",onSlotchange:this.updateSidebarContentStatus})),d("div",{key:"af9e00996904782f9ad2fa7430aa9362b7534f2d",class:"modal__sidebar-footer",part:"modal__sidebar-footer"},d("slot",{key:"6238471a909e09c48e12f07c842c16f693c29b2b",name:"sidebar-footer",onSlotchange:this.updateSidebarFooterStatus}))),d("div",{key:"095eb359887bc20989888c7b7885aee740410a23",class:"modal__main-content"},d("header",{key:"571d6451532f28f5650ef3b2abe69031e66749bd",class:"modal__custom-header",part:"modal__custom-header"},d("slot",{key:"e7a6ae8769b00a273e5e0e8d8ffb90054c5cad01",name:"custom-header",onSlotchange:this.updateCustomHeaderStatus})),(!this.hideLabel||!this.hideCloseButton)&&d("header",{key:"772cfbd82e04d4158b14db2cb67b1782ab83dbc4",class:"modal__header"},d("div",{key:"4082b15e240f44c38955783b1c348b2e2ca86b2f",class:"modal__header-bar"},!this.hideCloseButton&&d("swirl-button",{key:"9e41a9a1ec74e34719386fb44454157f0be8e8bf",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:"907ba56e13dd790486b9f2b21a8f74992d656426",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:"64bcf211cb5cac977eb593933bc352d56d40bf11",as:"h2",class:"modal__heading",level:3,text:this.label}))),d("div",{key:"1b549e4273fea8232ccb25048b44ceeb05c6e85a",class:"modal__content-container",style:{gap:this.contentGap?`var(--s-space-${this.contentGap})`:void 0}},d("div",{key:"79397f7c83404d0a175caf5d0f8cac64fe275657",class:"modal__primary-content",style:{maxWidth:this.primaryContentMaxWidth,flex:this.primaryContentFlex}},d("div",{key:"8bbffd128ea7ee5536062d1ae1db391546f2032b",class:"modal__header-tools",part:"modal__header-tools"},d("slot",{key:"5d252a13f3ab709f229c51c601748833690d0cdc",name:"header-tools",onSlotchange:this.updateHeaderToolsStatus})),d("div",{key:"3c0a6c207a0fa5b3ce3a7ad9dcc0ea2e2eb4d5a3",class:"modal__content",onScroll:this.determineMainScrollStatus,part:"modal__content",ref:a=>this.scrollContainer=a},d("slot",{key:"33c768842d52bcb617ccf03daff9a8ffa7434425"}))),d("div",{key:"2f5620a5f7d7b4eb59918d3df7ba9b5f3cba179d",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:"292a3f6ef5b6ea07145f797a29a06b9abf520d08",name:"secondary-content",onSlotchange:this.updateSecondaryContentStatus}))),d("div",{key:"441d039da038acd9f24d9133256b2ab6b5e06e40",class:"modal__custom-footer"},d("slot",{key:"e1374f6d253c3be37dcbab2eeb0d7c1a75789afb",name:"custom-footer",onSlotchange:this.updateCustomFooterStatus})),a&&d("footer",{key:"235891c784e2854a36f8b0285feee9f9189cea3a",class:"modal__controls"},d("swirl-button-group",{key:"d8819718eba5d1dfac5a65f2b2ddbc6cd62f819d",wrap:!0},this.secondaryActionLabel&&d("swirl-button",{key:"973c64021869489945e14dbd09eb01c60423696b",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&d("swirl-button",{key:"a3f366dc8fe792356f09768b5f1b8d5a84b58cb9",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 .modal__body{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing .modal__body{animation:none}}.modal--variant-drawer.modal--closing .modal__backdrop{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing .modal__backdrop{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.modal--show-backdrop .modal__backdrop{background-color:rgba(0, 0, 0, 0.2)}.modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop{animation:none}}.modal.modal--hide-backdrop .modal__backdrop{background-color:transparent;animation:none}.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);padding-top:env(safe-area-inset-top, 0);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"],disableBackdropClose:[4,"disable-backdrop-close"],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"],showBackdrop:[4,"show-backdrop"],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,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),p);break;case"swirl-button":customElements.get(s(a))||h();break;case"swirl-button-group":customElements.get(s(a))||c();break;case"swirl-heading":customElements.get(s(a))||b();break;case"swirl-stack":customElements.get(s(a))||f()}}))};export{_ 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";const p=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.minWidth="15rem",this.selected=!1,this.indeterminate=!1,this.swirlAriaRole="option",this.truncateLabel=!0,this.iconSize=24,this.elementId=crypto.randomUUID(),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:"65b596f344240e20c4ec0017e1d6392e1558c22d"},s("div",{key:"884fe9a8aee2ded06e8de7b18a3600ca36b50210","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,style:{minWidth:this.minWidth}},l&&s("span",{key:"415dff8918dcdef48e1d4259944c12f2632609f0",class:"option-list-item__icon",innerHTML:this.icon,ref:i=>this.iconEl=i},r&&s("span",{key:"9e53d370663d88367986c0b1c6de480c1adca67e",class:"option-list-item__icon-badge",innerHTML:this.iconBadge})),e&&s("span",{key:"7a05cb4c797f9437ca7c4423f84cc40de3e84c62",class:"option-list-item__checkbox"},s("span",{key:"5a4bc05692c7145f46e15b73e0b19954eb2bae5c",class:"option-list-item__checkbox-box"},this.selected&&s("swirl-icon-check-strong",{key:"d055acf67a67ad0c9132f7275be2f35d8809e53f",class:"option-list-item__checkbox-icon",size:16}),!this.selected&&this.indeterminate&&s("span",{key:"4ea96bd0f579a56092862d52d66ef2cd18ec2a55",class:"option-list-item__checkbox-indeterminate-icon"}))),s("span",{key:"da85e5088d4bd6906e1d82a40d57def8ec01b540",class:"option-list-item__avatar"},s("slot",{key:"f1e5deca07de4decfb78f6321c4c07d32bd773bd",name:"avatar"})),s("span",{key:"ecd5755a7a32093b0d8a31eb1db44ea4a1f4610e",class:"option-list-item__label-container"},s("span",{key:"a55b7aafdeae686ef48d94cbaf1b2a31f95ad429",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:"15413719b08d094a7ea78a976e37a3a2e2232a41",class:"option-list-item__description",id:`option-list-item-${this.elementId}-description`},this.description)),c&&s("span",{key:"452c6597248118a1209dfcddcca54e880b976508",class:"option-list-item__selection-icon"},s("swirl-icon-check-small",{key:"f7f15b3492d9ddf5d54b46487c4d0f58fc494ef3",size:this.iconSize}))),this.allowDrag&&s("button",{key:"6e826e283b12385c03f8cfc46bb264bbcc47f4f8","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:"d470bde1b9ee0a8ee3829eec92342dfed45e813c",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-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],minWidth:[1,"min-width"],selected:[1028],indeterminate:[4],swirlAriaRole:[1,"swirl-aria-role"],truncateLabel:[4,"truncate-label"],value:[1],iconSize:[32],focused:[32]}]);function m(){"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),p);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{p as S,m 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 a}from"./media-query.service.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";const p=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.minWidth="15rem",this.selected=!1,this.indeterminate=!1,this.swirlAriaRole="option",this.truncateLabel=!0,this.iconSize=24,this.elementId=crypto.randomUUID(),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=a.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,a=Boolean(this.iconBadge),r=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":r});return s(o,{key:"b5aaf4ae7ea6e5ceaff70bab71b30c20c7dffbfe"},s("div",{key:"77e3f55f107cc8627ef0187d5c4cc7b568ebfcd9","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,style:{minWidth:this.minWidth}},l&&s("span",{key:"e8555f8d07ef4cf7c3e119bfc99ec1fede75f458",class:"option-list-item__icon",innerHTML:this.icon,ref:i=>this.iconEl=i},a&&s("span",{key:"33842d55954af945ef60447d87820b0d6a6a11cf",class:"option-list-item__icon-badge",innerHTML:this.iconBadge})),e&&s("span",{key:"10e72dcd704c7804599de7384b754518c3c221a5",class:"option-list-item__checkbox"},s("span",{key:"17c0aa731d77c84f975faf7d3eb68848ceee4462",class:"option-list-item__checkbox-box"},this.selected&&s("swirl-icon-check-strong",{key:"d91ee0e66e6a5a6e1087d6076d91e79deea99a58",class:"option-list-item__checkbox-icon",size:16}),!this.selected&&this.indeterminate&&s("span",{key:"a127a21b0ebcc112ade9879bfcfb059523666f15",class:"option-list-item__checkbox-indeterminate-icon"}))),s("span",{key:"c981b6aacb6d6e94a7d2762f5de6686e7e0c2dc5",class:"option-list-item__avatar"},s("slot",{key:"f48b8ef345eba64cb969acc667afbe589170ee22",name:"avatar"})),s("span",{key:"e8fc56506a32ff29a0bb02ed1d7cac87f7e70782",class:"option-list-item__label-container"},s("span",{key:"a684bf7b22a53b77a7e1433376102722dc1692a0",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:"04bacf1ff34692826138c659ff9caa51a48660a6",class:"option-list-item__description",id:`option-list-item-${this.elementId}-description`},this.description)),c&&s("span",{key:"ffadb4f479b671a1d977c7db9908c5762aa067a1",class:"option-list-item__selection-icon"},s("swirl-icon-check-small",{key:"dd7bef36511d1f7d95fdea5308cf4d9d8235fc73",size:this.iconSize}))),this.allowDrag&&s("button",{key:"34dc6653fc91019a3f8a096b7786988735b19d2f","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:"e2609764cc9758d4d084d4e7062c3828fa9e2709",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-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],minWidth:[1,"min-width"],selected:[1028],indeterminate:[4],swirlAriaRole:[1,"swirl-aria-role"],truncateLabel:[4,"truncate-label"],value:[1],iconSize:[32],focused:[32]}]);function m(){"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),p);break;case"swirl-icon-check-small":customElements.get(l(i))||r();break;case"swirl-icon-check-strong":customElements.get(l(i))||c();break;case"swirl-icon-drag-handle":customElements.get(l(i))||d()}}))}export{p as S,m as d}

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

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as s,h as t,Host as i,transformTag as a}from"@stencil/core/internal/client";import{d as o}from"./swirl-separator2.js";import{d as r}from"./swirl-stack2.js";const l=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){return t(i,{key:"52e0bb7bfe1a1c188a9130f4e990c1a1464a79f0"},this.hasSeparator&&t("swirl-separator",{key:"20183ac39f217c559e01db1e126ec489ed366607",spacing:this.separatorSpacing}),t("div",{key:"5b00e1e93d35de37f99efde4e34c4fdea5661799","aria-labelledby":"label",class:"option-list-section",role:"group"},t("span",{key:"26cab1e3bda1a909443d34c88f5259efe33fe815",class:"option-list-section__label",id:"label",part:"option-list-section__label"},this.label),t("swirl-stack",{key:"4f7e073d308cf5616412becc355a7ea0c61b7050",spacing:this.spacing,align:"stretch"},t("slot",{key:"4193295e0eef10535a16aaad3ecffff400dc56d0"}))))}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((e=>{switch(e){case"swirl-option-list-section":customElements.get(a(e))||customElements.define(a(e),l);break;case"swirl-separator":customElements.get(a(e))||o();break;case"swirl-stack":customElements.get(a(e))||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 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(i,{key:"6a1b336ac07dfa9691bf1d2da55d5b6185b20f42"},this.hasSeparator&&t("swirl-separator",{key:"8afebcda96a0ce52a116abf47b6fd5020f54d030",spacing:this.separatorSpacing}),t("div",{key:"91d04ce2fdede9ed58835e9eb20d53b28a0739ce","aria-labelledby":"label",class:"option-list-section",role:"group"},t("span",{key:"88e90d4995305f88a9bfe591bbc0683fb501e467",class:"option-list-section__label",id:"label",part:"option-list-section__label"},this.label),t("swirl-stack",{key:"a23086254cf7692312073b8d3a60bdc147645f70",spacing:this.spacing,align:"stretch"},t("slot",{key:"af30cac91b16db3be3ccd985d58473f212bbf2fb"}))))}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"]}]),n=l,c=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),l);break;case"swirl-separator":customElements.get(a(s))||o();break;case"swirl-stack":customElements.get(a(s))||r()}}))};export{n as SwirlOptionListSection,c 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";const w=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=crypto.randomUUID(),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:"bfe649f71cdebee2413b48a310601cfd23b7b010"},e("swirl-visually-hidden",{key:"3fa40ea3271cedcfc4c2b0658646aa218577f088",role:"alert"},this.assistiveText),e("div",{key:"72bba3bea57539decc4043c05a9828b330bb50bd","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:"844a6ccb53f7738c82f3d452ed869160dff48192",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:"4c4c88b1939369558f20cf9b2694d0fcd38cb1ed",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),w);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{w 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";const w=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=crypto.randomUUID(),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:"7ac065f48e21732a0e7f4cec3289a6a25e17cdf6"},e("swirl-visually-hidden",{key:"ac44e536dc90da7063a36936b48b97704fa4d819",role:"alert"},this.assistiveText),e("div",{key:"324c9042003c223e1326a0e4b49de9f242bae8d6","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:"c4dd5ad5c49688ea47a10abb2de54a4712d1ff5b",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:"03d4ac06b57415713cf7b79c2a5ab605e3e1ae44",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 p(){"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),w);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{w as S,p 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:"b9d5521b3b1e6f8eeb43f5fbee8ae07a491d3a19"},a("nav",{key:"76db31bfce09044b7f76132e5bbf705a1b1e9086","aria-label":this.label,class:n},a("ul",{key:"4d97f16bf0db33327737372e3a915313fe49298b",class:"pagination__list",part:"pagination__list"},this.showPageSizeSelect&&a("li",{key:"c156a0d4e949d1558a953fe3fb7057af923ac992",class:"pagination__list-item"},a("label",{key:"29a86d9a9664eb9fcb69a10007cf792276ea0e80",class:"pagination__page-size-selection"},a("swirl-text",{key:"7b40dc198746e40ffc144a83d9f7c431190afe0e",whiteSpace:"inherit"},this.pageSizeSelectLabel),a("swirl-stack",{key:"4dfb746397a08ad034a48b9dd12541150e648b6a",align:"center",class:"pagination__page-size-select-container",orientation:"horizontal"},a("select",{key:"2f3fb1d3a0c64fc099e80e4f32fb5fdd4efd3c1d",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:"b9c641d24b71b8e122949fa9751c11bff4c295cf","aria-hidden":"true",class:"pagination__page-size-select-icon",size:16})))),a("li",{key:"616f9f17c566b8c04905a2209bc829d547e60d44",class:"pagination__list-item"},a("swirl-button",{key:"57a71dc9821130dc81d3363f458a28a6a5c43b04",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:"cf04b3b58e820355f1664147d87ee54b398c732f",class:"pagination__list-item"},a("swirl-button",{key:"6c7863b0e14e0309289c82ebaed36668fa587fcd",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:"36bb830ae8f90cdd89540b178c8151eb4cf700d0",class:"pagination__list-item"},a("swirl-button",{key:"6a1508c2d5ee020b896f816d5fae200ef12dae1a",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:"80bf0ec83012aa1c1430172afc6162e088f197ba",class:"pagination__list-item"},a("swirl-button",{key:"441358cdd1dbc516b10edefa8ba1d16048634929",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:-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 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:"0c3002d635d17cf9bbdbfa8a21c86d3a0030fb61"},a("nav",{key:"4c232714ee4cb389c2090d538701181a14df586a","aria-label":this.label,class:n},a("ul",{key:"2d368471fc24b430fc97708fac6d4b7d7e6de287",class:"pagination__list",part:"pagination__list"},this.showPageSizeSelect&&a("li",{key:"04e4aa82282b1418f44f1ae4441488f4cecebda2",class:"pagination__list-item"},a("label",{key:"b4acd800643fa2e7d7c2027f799e0d8e19e42955",class:"pagination__page-size-selection"},a("swirl-text",{key:"48252e9ceb835ce2014b8eccfd972447c9cd8f87",whiteSpace:"inherit"},this.pageSizeSelectLabel),a("swirl-stack",{key:"03099ed65b13c8f6fda910258b1508bef1a4ccf1",align:"center",class:"pagination__page-size-select-container",orientation:"horizontal"},a("select",{key:"d74235ef14e3986a2571efcf34015fb45d97b262",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:"3199a1adb6012b3a7e31aa317778175e043c5dac","aria-hidden":"true",class:"pagination__page-size-select-icon",size:16})))),a("li",{key:"0915873217895f40efa5565bd4e18fc6cfb4643c",class:"pagination__list-item"},a("swirl-button",{key:"e6eecd0dca69c54fad82a603f80b974c2834bf3e",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:"f52e9585b2d5d0dc53125b38cf0ee1cc53bca10a",class:"pagination__list-item"},a("swirl-button",{key:"8c0cf80e969db835a2f2c7400022651b8a9b7417",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:"ac48fb28ab06210a676e97ffaf8e43715b118e7d",class:"pagination__list-item"},a("swirl-button",{key:"e4a0a2a86926f7fcc25077e92cecd5834cfcaa6d",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:"dcab3b2f676ed4606a49a62bd8591cdb5bf5b011",class:"pagination__list-item"},a("swirl-button",{key:"fb4631e81cb452d1318f9e4088873a791e763b22",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:-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{c as o}from"./index2.js";import{q as l,i as d}from"./utils.js";import{d as n,e as c}from"./body-scroll-lock.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 v}from"./swirl-file-viewer-image2.js";import{d as _}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 B}from"./swirl-popover-trigger2.js";import{d as S}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",3),this.modalOpen=s(this,"modalOpen",3),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=l(this.el,`[data-page-number="${e+1}"]`)?.[0];i?.scrollIntoView()}}componentWillLoad(){this.updateZoomSteps(),this.zoom=d()?"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=d()?"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&&n(e)}unlockBodyScroll(){const e=this.pdfViewer?.shadowRoot.querySelector(".file-viewer-pdf__pages");e&&c(e)}async generateThumbnails(){this.thumbnails=await this.pdfViewer.getThumbnails()}updateZoomSteps(){this.zoomSteps=d()?this.mobileZoomSteps:this.desktopZoomSteps}render(){const e=!!this.el.querySelector("[slot='menu-items']")||this.printButtonEnabled||this.downloadButtonEnabled,i=o("pdf-reader",{"pdf-reader--closing":this.closing,"pdf-reader--hide-menu":!e,"pdf-reader--show-thumbnails":this.showThumbnails});return a(t,{key:"1006cf013e2d4ea0d4039759427ec9bf10676df9"},a("dialog",{key:"2f974b2edf927568ad017dcf6481c97630e8bb06","aria-label":this.label,class:i,id:"pdf-reader",onClose:this.onClose,onKeyDown:this.onKeyDown,ref:e=>this.modalEl=e},a("div",{key:"fc19608ff71abb538741726510122241e5ce89b5",class:"pdf-reader__body",role:"document"},a("header",{key:"448bd7fe2e2e740ff120537f644f4c571fdfe768",class:"pdf-reader__header"},a("span",{key:"7b375193185d974bbd30a887216c9aabf61dd9dd",class:"pdf-reader__header-left"},a("swirl-button",{key:"f739b6312de673b4a48446b1bec7b7c09fe3db09",class:"pdf-reader__close-button",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.closeButtonLabel,onClick:this.onCloseButtonClick}),a("span",{key:"ff39941114f27cb130cd807821ea4188ba0a8666",class:"pdf-reader__label"},this.label)),a("span",{key:"b583e2e83aed3e24d7926e053cd9f60471731bde",class:"pdf-reader__header-center"},a("span",{key:"eec4c412e09fede06c80f51bf4a290342e552a19",class:"pdf-reader__zoom-button-container"},a("swirl-button",{key:"a6fb91dc2f92be2c43eedee74a1a0a2031626b43",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:"2b509952ebb7e116eba38ce6e3ce62febab2dd38",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:"270d99e8eae2cc6d09fbf4bbd0ae327b09b03498",class:"pdf-reader__zoom-select-container"},a("select",{key:"e17b921b9fb21d98bc22b4fcc7595912e4273088","aria-label":this.zoomSelectLabel,class:"pdf-reader__zoom-select",name:"zoom-select",id:"zoom-select",onChange:this.onZoomChange},a("option",{key:"9d4ea4f0988c9356facf8c7290e3a9c26ed55bf0",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:"61cca8c066b33c91efbdbbfe1b07d369c628e104",class:"pdf-reader__zoom-select-icon"}))),a("span",{key:"c2c4ed52895ed70746c39cda257870f3517dab96",class:"pdf-reader__header-right"},a("swirl-popover-trigger",{key:"0610f7e7ccdc93eb6819a01804538a96b9fe9568",swirlPopover:this.menu},a("swirl-button",{key:"e9fce0f1e6d6b72322b937e06e43d8054c038b5e",class:"pdf-reader__menu-button",hideLabel:!0,icon:"<swirl-icon-more-vertikal></swirl-icon-more-vertikal>",label:this.menuTriggerLabel}))),a("span",{key:"8016dd44bdfb34e290c7d9c09945f96814e844a1",class:"pdf-reader__floating-tools"},a("button",{key:"07d29479f07234c3581dc28a267c121d760af369","aria-label":this.sideBySideButtonLabel,class:"pdf-reader__floating-tool-button",onClick:this.toggleViewMode,type:"button"},a("swirl-icon-menu-book",{key:"f6c20782d1ad10dddfcc35c54826f93feb8cae1d"})),a("button",{key:"592e6c80ad9fe25e44f3d13e485e9b91e863940c","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:"66ceb450e978b743e7ecd50485fb58a4f2a6ac95"})))),a("div",{key:"ef0bcbcd10e61367d3f10e4c0c54d3a680f5262b",class:"pdf-reader__content"},a("nav",{key:"3b439496d8d2c4d2e081c9214e0151f4c56311f2","aria-label":this.thumbnailsLabel,class:"pdf-reader__thumbnails",id:"thumbnails"},this.loadingThumbnails&&a("swirl-spinner",{key:"5451c141691c773666d77c356c76a7a19fcf36c9"}),!this.loadingThumbnails&&this.thumbnails.map(((e,i)=>{const s=o("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:"66535291146aa772a541f3940957bea9a7ae86ff",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:"b6d626c05b68d7c313ae497d0de253999b83dcbe",class:"pdf-reader__mobile-zoom-controls"},a("button",{key:"95ba19b5f85655ba1347f8763e4bed773bc2c6fd","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:"adb71904d16624aecb16b7407cdcecff6da47f97","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:"fdede4558ac8b817faa03ca1da91269b6191d3ff"})),a("button",{key:"26b37f80c2b95831009146c4a668ceb831a7337e","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:"92c7b9028dbccf022c1d67ef71404cddaea1868e"}))))),a("swirl-popover",{key:"0ea60a378df42b172f325bb95227f2fdc144af3c",animation:"scale-in-y",disableScrollLock:!0,id:"menu",label:this.menuLabel,placement:"bottom-end",ref:e=>this.menu=e},a("swirl-stack",{key:"3aaa4d0b54e8fdc567cc78d10174d10e0ef5b4fe"},a("div",{key:"0f9c71cef2600350e9061bd49b3634e396fa476a",class:"pdf-reader__meta"},a("div",{key:"9eabab28117f2f896f5f3864d09444829fadd8de",class:"pdf-reader__file-icon"},a("svg",{key:"e83129465659b5d984f9d8a61497f74aa6337353",fill:"none",height:"36",viewBox:"0 0 24 36",width:"24"},a("path",{key:"bd5bd8d5cf62aa3a2fec396976b2074fa7300ad4",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:"1081f059bad7868b83faf26dba3b0ab6fecfca84",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:"1eb59f58297b80c98e061242744f1c3e9e4c00a6",d:"M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z",fill:"white"}),a("path",{key:"885999ec5b575d64a47e1538fadd37cb3f0cbbab",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:"a93aa4e0e10c1d0b7398d2ef04df8075f8b708ab",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:"985fc4b8aac8910c1c7b094af0edff8f279b9ac9",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:"1df79fede333427403e30c12a6ca79fba836514e",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:"5a39a161e7c4412f92f467f2fd9ec690faff9413",d:"M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z",fill:"white"}))),a("div",{key:"2f5f4334e77c4567dd520a7f09e8ea41f35f83cf",class:"pdf-reader__file-info"},a("swirl-text",{key:"8449679b098dfe447857007efb066d28c7f71353",truncate:!0,weight:"semibold"},this.label),a("swirl-text",{key:"00a9d2c1177e9e5fca45b8076f4be41b5eba866f",color:"subdued",size:"sm",truncate:!0},this.fileTypeLabel))),e&&a("swirl-separator",{key:"22fb40b7ab65544159fa8ee1f1946fcb303e058b"}),a("swirl-action-list",{key:"d401e8a70da461db822df8d59d58d8820d0f200f",class:"pdf-reader__menu"},this.printButtonEnabled&&a("swirl-action-list-item",{key:"eadc5dfe58b655f0ce24af9444c5f0b13eb9f7f6",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:"0bf20d0697871767e42b0955484a539c9fa9b6d8",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:"111b290104d56c2aec6d508fba63a104885ebfb7",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:calc(4rem + env(safe-area-inset-top, 0));padding-top:env(safe-area-inset-top, 0);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))||v();break;case"swirl-file-viewer-pdf":customElements.get(r(e))||_();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))||B();break;case"swirl-separator":customElements.get(r(e))||S();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{c as o}from"./index2.js";import{q as l,i as d}from"./utils.js";import{d as n,e as c}from"./body-scroll-lock.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 v}from"./swirl-file-viewer-image2.js";import{d as _}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 B}from"./swirl-popover-trigger2.js";import{d as S}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",3),this.modalOpen=a(this,"modalOpen",3),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=l(this.el,`[data-page-number="${e+1}"]`)?.[0];i?.scrollIntoView()}}componentWillLoad(){this.updateZoomSteps(),this.zoom=d()?"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=d()?"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&&n(e)}unlockBodyScroll(){const e=this.pdfViewer?.shadowRoot.querySelector(".file-viewer-pdf__pages");e&&c(e)}async generateThumbnails(){this.thumbnails=await this.pdfViewer.getThumbnails()}updateZoomSteps(){this.zoomSteps=d()?this.mobileZoomSteps:this.desktopZoomSteps}render(){const e=!!this.el.querySelector("[slot='menu-items']")||this.printButtonEnabled||this.downloadButtonEnabled,i=o("pdf-reader",{"pdf-reader--closing":this.closing,"pdf-reader--hide-menu":!e,"pdf-reader--show-thumbnails":this.showThumbnails});return s(t,{key:"f6c2b38278ff0d172c2c27803e84ef9c57129658"},s("dialog",{key:"94bd38f49b5dc9c5bd14ed70c00381137c1e054c","aria-label":this.label,class:i,id:"pdf-reader",onClose:this.onClose,onKeyDown:this.onKeyDown,ref:e=>this.modalEl=e},s("div",{key:"f80912e56ecb9a234894fc54eb54d3d4520d92d2",class:"pdf-reader__body",role:"document"},s("header",{key:"abeed39bdfe89b2a5b8dbb634068ec40c4134765",class:"pdf-reader__header"},s("span",{key:"198bc186a8e9a4f87bf493cf54f5e898803682a8",class:"pdf-reader__header-left"},s("swirl-button",{key:"793e78d2088afdc73677e1a23a8ae737b9d1fd32",class:"pdf-reader__close-button",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.closeButtonLabel,onClick:this.onCloseButtonClick}),s("span",{key:"13bae74c9447ca791a70365dbf2275cefe09ac5a",class:"pdf-reader__label"},this.label)),s("span",{key:"094398c562e564d5a55b762887349cdcdf7dab57",class:"pdf-reader__header-center"},s("span",{key:"0f86f696c81de4eb49a1bc7aa2037735751deb0a",class:"pdf-reader__zoom-button-container"},s("swirl-button",{key:"6648aa19d29d5b7cb6cc8e59e8c466ba6601b25b",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:"d227f41c6e2661951504d53a2af7ea8b9aef8548",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:"1f38152975e6948b8d58419dd173bfac4f68f30b",class:"pdf-reader__zoom-select-container"},s("select",{key:"10d60a7fd8b76699230b075fb9387bd5c261b99e","aria-label":this.zoomSelectLabel,class:"pdf-reader__zoom-select",name:"zoom-select",id:"zoom-select",onChange:this.onZoomChange},s("option",{key:"269afb9051a976bcc2282a6a75a286ade2781c99",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:"f276558e53a9087acf65cc034103122ae9abe77a",class:"pdf-reader__zoom-select-icon"}))),s("span",{key:"0f5c1560e990ae3d2a5e16fe0c65540099f7eec1",class:"pdf-reader__header-right"},s("swirl-popover-trigger",{key:"1cb8b18694fd6766ff3a74d694e1fcfa09a5da0e",swirlPopover:this.menu},s("swirl-button",{key:"e998eadfb31b243462468fa072c363669dee8960",class:"pdf-reader__menu-button",hideLabel:!0,icon:"<swirl-icon-more-vertikal></swirl-icon-more-vertikal>",label:this.menuTriggerLabel}))),s("span",{key:"3a0e97e8734a0cc9c2c2b352aa43abfd0b807e24",class:"pdf-reader__floating-tools"},s("button",{key:"e73c0e23989739700ee98bec1fb28094c239c5ff","aria-label":this.sideBySideButtonLabel,class:"pdf-reader__floating-tool-button",onClick:this.toggleViewMode,type:"button"},s("swirl-icon-menu-book",{key:"842236b12252bc6cc91729183f8ac44bfd6b62d4"})),s("button",{key:"e9ee8a33cc314b1f454f1d08f4258ca156cd02cf","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:"b9af6036f6d126d6db97d44423019f8462f3b8e2"})))),s("div",{key:"067d1abac5177d5f21dc6ce4918100f5d7a8f521",class:"pdf-reader__content"},s("nav",{key:"f32b1b76c30733a6f6edf889ddaab2d1e6624d15","aria-label":this.thumbnailsLabel,class:"pdf-reader__thumbnails",id:"thumbnails"},this.loadingThumbnails&&s("swirl-spinner",{key:"5fd71ea935eab41dec2b91b76a47fc3e5da55011"}),!this.loadingThumbnails&&this.thumbnails.map(((e,i)=>{const a=o("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:"b7cc37989f63846b8e1b559d815b4444a2c54cb5",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:"9227781c7c4e4fcd11f3a9336550648da4b62003",class:"pdf-reader__mobile-zoom-controls"},s("button",{key:"076effcc39e2dde28a8c51e7c484cc15d303c142","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:"475d26a81c25fc015b97a6135e6b01852b1c3927","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:"255acd7cc8120c2be7582527f7871fd5674b3818"})),s("button",{key:"b53bd61cdfbcc7d46ea77df0f9ff54f4e2f30191","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:"efa09a7ba19acb21bc415bc35af69fd2e724f646"}))))),s("swirl-popover",{key:"c6b117817b3012e1acf87db475524cc2e4adcb77",animation:"scale-in-y",disableScrollLock:!0,id:"menu",label:this.menuLabel,placement:"bottom-end",ref:e=>this.menu=e},s("swirl-stack",{key:"965a025c34a93c296a5df15e8f0ab723dd7cd11f"},s("div",{key:"8c0e09f7ea9f8f76dab7574f15757ef12f9f22b9",class:"pdf-reader__meta"},s("div",{key:"0d913d69b83bc04671839542d886a4f736ce604c",class:"pdf-reader__file-icon"},s("svg",{key:"c6d919a24da83837e388b496a9e1bb6021456d18",fill:"none",height:"36",viewBox:"0 0 24 36",width:"24"},s("path",{key:"0ba81659dd8b7baf12ea0773ab308adff34be0a0",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:"33305e8778a3110f7c3f47e878c4bbd33bc151b8",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:"90a3b0f225d009cc1953c0fe960d7525ae67c4ae",d:"M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z",fill:"white"}),s("path",{key:"0e90bce30832c589effc2a97cd08ca9719d9ed0b",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:"e5ce4e315f44a585b403a0778c54799532b9922e",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:"1b2ce874a419d478040e318ff260b870ccd519ea",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:"5ba2f3deebda592f8732659e60d09409df341593",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:"a6e808514b6d03466b89a4e52f24840c6250b636",d:"M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z",fill:"white"}))),s("div",{key:"1d81955f1ec32b1356847bc3f0cf9f97c8180562",class:"pdf-reader__file-info"},s("swirl-text",{key:"a042ec561eca7cead9ae25f5f468456a451678ed",truncate:!0,weight:"semibold"},this.label),s("swirl-text",{key:"fa8e3df210b3f9ed50f10f5b650a9dfeccc7a986",color:"subdued",size:"sm",truncate:!0},this.fileTypeLabel))),e&&s("swirl-separator",{key:"1f54a17cc56ae9a093b95597fdd0f2d9db49285d"}),s("swirl-action-list",{key:"d7c9a1928310b0c60af5491b41429cda9838242e",class:"pdf-reader__menu"},this.printButtonEnabled&&s("swirl-action-list-item",{key:"96a1526444cfd011fcc8bcdea45a5207a2dd24f4",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:"3402cf16a4fead8f90a30f07b77956d19fa56aca",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:"10a5408e10c929d9704e38512811b1270e2da9e7",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:calc(4rem + env(safe-area-inset-top, 0));padding-top:env(safe-area-inset-top, 0);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))||v();break;case"swirl-file-viewer-pdf":customElements.get(r(e))||_();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))||B();break;case"swirl-separator":customElements.get(r(e))||S();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}

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

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,h as i,Host as s,transformTag as r}from"@stencil/core/internal/client";import{k as o,j as h}from"./utils.js";const n=["click","hover","focus"],a=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.hidePopoverWhenInvisible=!0,this.setAriaAttributes=!0,this.triggerOnClick=!0,this.triggerOnHover=!1,this.componentLoaded=!1,this.triggerIsActive=!1,this.triggerMethods=[],this.popoverMouseEnter=()=>{this.stopHoverLingerTimer()},this.popoverMouseLeave=()=>{this.triggerIsActive&&this.mouseleaveHandler()},this.onMouseenter=()=>{this.triggerMethods.includes("hover")&&(this.stopHoverLingerTimer(),this.triggerIsActive=!0,this.hoverDelayReference=setTimeout((()=>{this.hoverDelayReference=void 0,this.triggerMethods.includes("hover")&&this.openPopover("hover",!0)}),this.hoverDelay))},this.onMouseleave=()=>{clearTimeout(this.hoverDelayReference),this.mouseleaveHandler()},this.mouseleaveHandler=()=>{this.triggerMethods.includes("hover")&&this.startHoverLingerTimer()},this.onClick=()=>{if(!this.triggerMethods.includes("click"))return;const t=this.getPopoverEl(),e=this.getTriggerEl();Boolean(t)&&(this.syncAriaOnNextTransition(t),t.toggle(e,"click"))},this.onFocusin=()=>{this.triggerMethods.includes("focus")&&(this.triggerMethods.includes("click")&&!this.triggerMethods.includes("hover")||this.openPopover("focus",!0))},this.onFocusout=t=>{this.triggerMethods.includes("focus")&&(this.focusStaysWithin(t.relatedTarget)||this.closePopover(!0))},this.onKeyDown=t=>{"Escape"===t.code&&this.isPopoverOpen()&&(t.stopPropagation(),this.closePopover(!0))},this.ariaOpenHandler=()=>{this.updateTriggerElAriaAttributes(!0)},this.ariaCloseHandler=()=>{this.updateTriggerElAriaAttributes(!1)},this.updateTriggerElAriaAttributes=t=>{if(!this.setAriaAttributes)return;const e=this.getTriggerEl();if(!Boolean(e))return;const i=this.getPopoverEl()?.id;e.tagName.startsWith("SWIRL-")?(this.opensWithoutActivation?(e.removeAttribute("swirl-aria-controls"),e.removeAttribute("swirl-aria-expanded")):(e.setAttribute("swirl-aria-controls",i),e.setAttribute("swirl-aria-expanded",String(t||"false"))),e.setAttribute("swirl-aria-haspopup","dialog")):(this.opensWithoutActivation?(e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded")):(e.setAttribute("aria-controls",i),e.setAttribute("aria-expanded",String(t||"false"))),e.setAttribute("aria-haspopup","dialog"))}}connectedCallback(){this.componentLoaded&&(this.setupHoverListeners(),this.setupIntersectionObserver())}componentWillLoad(){this.warnAboutDeprecatedProps(),this.resolveTriggerMethods()}componentDidLoad(){this.updateTriggerElAriaAttributes(),this.setupHoverListeners(),this.setupIntersectionObserver(),this.componentLoaded=!0}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.removeHoverListeners(),this.removeAriaSyncListeners(),clearTimeout(this.hoverDelayReference),clearTimeout(this.hoverLingerReference)}watchPopover(){this.updateTriggerElAriaAttributes()}watchTrigger(){this.resolveTriggerMethods(),this.componentLoaded&&this.updateTriggerElAriaAttributes(),clearTimeout(this.hoverDelayReference),clearTimeout(this.hoverLingerReference)}warnAboutDeprecatedProps(){!0===this.triggerOnHover&&console.warn('[Swirl] The "triggerOnHover" prop of swirl-popover-trigger is deprecated and will be removed with the next major release. Please use the "trigger" prop instead, e.g. trigger="hover focus".'),!1===this.triggerOnClick&&console.warn('[Swirl] The "triggerOnClick" prop of swirl-popover-trigger is deprecated and will be removed with the next major release. Please use the "trigger" prop instead, e.g. trigger="hover focus".'),!Boolean(this.trigger)||!0!==this.triggerOnHover&&!1!==this.triggerOnClick||console.warn('[Swirl] swirl-popover-trigger: the "trigger" prop takes precedence over "triggerOnClick"/"triggerOnHover", which are ignored.')}resolveTriggerMethods(){if(Boolean(this.trigger)){const t=(Array.isArray(this.trigger)?this.trigger:String(this.trigger).split(/[\s,]+/)).map((t=>String(t).trim().toLowerCase())).filter((t=>t.length>0)),e=t.filter((t=>!n.includes(t)));return e.length>0&&console.warn(`[Swirl] Unsupported "trigger" value(s) for swirl-popover-trigger: ${e.join(", ")}. Supported values: ${n.join(", ")}.`),void(this.triggerMethods=t.filter((t=>n.includes(t))))}const t=[];this.triggerOnClick&&t.push("click"),this.triggerOnHover&&t.push("hover","focus"),this.triggerMethods=t}getPopoverEl(){return"string"==typeof this.swirlPopover?document.querySelector(`#${this.swirlPopover}`):this.swirlPopover?.el??this.swirlPopover}getTriggerEl(){return 1!==this.el.children.length&&console.warn('[Swirl] The "swirl-popover-trigger" component expects exactly one child element.'),this.el.children[0]}setupIntersectionObserver(){if(this.intersectionObserver?.disconnect(),this.hidePopoverWhenInvisible){this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{root:this.parentScrollContainer,threshold:0});const t=this.el.querySelector("*");if(!Boolean(t))return;this.intersectionObserver.observe(t)}}onVisibilityChange(t){!t[0].isIntersecting&&this.isPopoverOpen()&&this.getPopoverEl()?.close()}setupHoverListeners(){this.popoverElRef=this.getPopoverEl(),Boolean(this.popoverElRef)&&(this.popoverElRef.addEventListener("mouseenter",this.popoverMouseEnter),this.popoverElRef.addEventListener("mouseleave",this.popoverMouseLeave))}removeHoverListeners(){Boolean(this.popoverElRef)&&(this.popoverElRef.removeEventListener("mouseenter",this.popoverMouseEnter),this.popoverElRef.removeEventListener("mouseleave",this.popoverMouseLeave))}startHoverLingerTimer(){clearTimeout(this.hoverLingerReference),this.hoverLingerReference=setTimeout((()=>{this.triggerIsActive&&this.isPopoverOpen()&&!this.focusStaysWithin(o())&&this.closePopover(!0),this.triggerIsActive=!1}),this.hoverLingerDuration)}stopHoverLingerTimer(){clearTimeout(this.hoverLingerReference)}focusStaysWithin(t){if(!Boolean(t))return!1;const e=this.getPopoverEl();return h(t,this.el)||Boolean(e)&&h(t,e)}removeAriaSyncListeners(){const t=this.getPopoverEl();t?.removeEventListener("popoverOpen",this.ariaOpenHandler),t?.removeEventListener("popoverClose",this.ariaCloseHandler)}syncAriaOnNextTransition(t){this.removeAriaSyncListeners(),t.addEventListener("popoverOpen",this.ariaOpenHandler,{once:!0}),t.addEventListener("popoverClose",this.ariaCloseHandler,{once:!0})}openPopover(t,e){const i=this.getPopoverEl(),s=this.getTriggerEl();Boolean(i)&&(this.syncAriaOnNextTransition(i),i.open(s,e,t))}closePopover(t){const e=this.getPopoverEl();Boolean(e)&&(this.syncAriaOnNextTransition(e),e.close(t))}get opensWithoutActivation(){return this.triggerMethods.includes("hover")||this.triggerMethods.includes("focus")}isPopoverOpen(){const t=this.getPopoverEl(),e=t?.shadowRoot?.firstElementChild?.classList.contains("popover--active"),i=t?.shadowRoot?.firstElementChild?.classList.contains("popover--closing");return Boolean(e)&&!i}render(){return i(s,{key:"41d9dbdc7a68af0b94561323006b53c96242622d",onClick:this.onClick,onFocusin:this.onFocusin,onFocusout:this.onFocusout,onKeyDown:this.onKeyDown,onMouseenter:this.onMouseenter,onMouseleave:this.onMouseleave},i("slot",{key:"4dd8f675b36af944ac83f22e087c3c5f6c572157"}))}get el(){return this}static get watchers(){return{swirlPopover:[{watchPopover:0}],trigger:[{watchTrigger:0}],triggerOnClick:[{watchTrigger:0}],triggerOnHover:[{watchTrigger:0}]}}static get style(){return".sc-swirl-popover-trigger-h{display:contents}"}},[262,"swirl-popover-trigger",{hidePopoverWhenInvisible:[4,"hide-popover-when-invisible"],parentScrollContainer:[16],setAriaAttributes:[4,"set-aria-attributes"],swirlPopover:[1,"swirl-popover"],trigger:[1],triggerOnClick:[4,"trigger-on-click"],triggerOnHover:[4,"trigger-on-hover"],hoverLingerDuration:[2,"hover-linger-duration"],hoverDelay:[2,"hover-delay"]},void 0,{swirlPopover:[{watchPopover:0}],trigger:[{watchTrigger:0}],triggerOnClick:[{watchTrigger:0}],triggerOnHover:[{watchTrigger:0}]}]);function c(){"undefined"!=typeof customElements&&["swirl-popover-trigger"].forEach((t=>{"swirl-popover-trigger"===t&&(customElements.get(r(t))||customElements.define(r(t),a))}))}export{a as S,c as d}
+import{proxyCustomElement as t,HTMLElement as e,h as i,Host as s,transformTag as r}from"@stencil/core/internal/client";import{k as o,j as h}from"./utils.js";const n=["click","hover","focus"],a=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.hidePopoverWhenInvisible=!0,this.setAriaAttributes=!0,this.triggerOnClick=!0,this.triggerOnHover=!1,this.componentLoaded=!1,this.triggerIsActive=!1,this.triggerMethods=[],this.popoverMouseEnter=()=>{this.stopHoverLingerTimer()},this.popoverMouseLeave=()=>{this.triggerIsActive&&this.mouseleaveHandler()},this.onMouseenter=()=>{this.triggerMethods.includes("hover")&&(this.stopHoverLingerTimer(),this.triggerIsActive=!0,this.hoverDelayReference=setTimeout((()=>{this.hoverDelayReference=void 0,this.triggerMethods.includes("hover")&&this.openPopover("hover",!0)}),this.hoverDelay))},this.onMouseleave=()=>{clearTimeout(this.hoverDelayReference),this.mouseleaveHandler()},this.mouseleaveHandler=()=>{this.triggerMethods.includes("hover")&&this.startHoverLingerTimer()},this.onClick=()=>{if(!this.triggerMethods.includes("click"))return;const t=this.getPopoverEl(),e=this.getTriggerEl();Boolean(t)&&(this.syncAriaOnNextTransition(t),t.toggle(e,"click"))},this.onFocusin=()=>{this.triggerMethods.includes("focus")&&(this.triggerMethods.includes("click")&&!this.triggerMethods.includes("hover")||this.openPopover("focus",!0))},this.onFocusout=t=>{this.triggerMethods.includes("focus")&&(this.focusStaysWithin(t.relatedTarget)||this.closePopover(!0))},this.onKeyDown=t=>{"Escape"===t.code&&this.isPopoverOpen()&&(t.stopPropagation(),this.closePopover(!0))},this.ariaOpenHandler=()=>{this.updateTriggerElAriaAttributes(!0)},this.ariaCloseHandler=()=>{this.updateTriggerElAriaAttributes(!1)},this.updateTriggerElAriaAttributes=t=>{if(!this.setAriaAttributes)return;const e=this.getTriggerEl();if(!Boolean(e))return;const i=this.getPopoverEl()?.id;e.tagName.startsWith("SWIRL-")?(this.opensWithoutActivation?(e.removeAttribute("swirl-aria-controls"),e.removeAttribute("swirl-aria-expanded")):(e.setAttribute("swirl-aria-controls",i),e.setAttribute("swirl-aria-expanded",String(t||"false"))),e.setAttribute("swirl-aria-haspopup","dialog")):(this.opensWithoutActivation?(e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded")):(e.setAttribute("aria-controls",i),e.setAttribute("aria-expanded",String(t||"false"))),e.setAttribute("aria-haspopup","dialog"))}}connectedCallback(){this.componentLoaded&&(this.setupHoverListeners(),this.setupIntersectionObserver())}componentWillLoad(){this.warnAboutDeprecatedProps(),this.resolveTriggerMethods()}componentDidLoad(){this.updateTriggerElAriaAttributes(),this.setupHoverListeners(),this.setupIntersectionObserver(),this.componentLoaded=!0}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.removeHoverListeners(),this.removeAriaSyncListeners(),clearTimeout(this.hoverDelayReference),clearTimeout(this.hoverLingerReference)}watchPopover(){this.updateTriggerElAriaAttributes()}watchTrigger(){this.resolveTriggerMethods(),this.componentLoaded&&this.updateTriggerElAriaAttributes(),clearTimeout(this.hoverDelayReference),clearTimeout(this.hoverLingerReference)}warnAboutDeprecatedProps(){!0===this.triggerOnHover&&console.warn('[Swirl] The "triggerOnHover" prop of swirl-popover-trigger is deprecated and will be removed with the next major release. Please use the "trigger" prop instead, e.g. trigger="hover focus".'),!1===this.triggerOnClick&&console.warn('[Swirl] The "triggerOnClick" prop of swirl-popover-trigger is deprecated and will be removed with the next major release. Please use the "trigger" prop instead, e.g. trigger="hover focus".'),!Boolean(this.trigger)||!0!==this.triggerOnHover&&!1!==this.triggerOnClick||console.warn('[Swirl] swirl-popover-trigger: the "trigger" prop takes precedence over "triggerOnClick"/"triggerOnHover", which are ignored.')}resolveTriggerMethods(){if(Boolean(this.trigger)){const t=(Array.isArray(this.trigger)?this.trigger:String(this.trigger).split(/[\s,]+/)).map((t=>String(t).trim().toLowerCase())).filter((t=>t.length>0)),e=t.filter((t=>!n.includes(t)));return e.length>0&&console.warn(`[Swirl] Unsupported "trigger" value(s) for swirl-popover-trigger: ${e.join(", ")}. Supported values: ${n.join(", ")}.`),void(this.triggerMethods=t.filter((t=>n.includes(t))))}const t=[];this.triggerOnClick&&t.push("click"),this.triggerOnHover&&t.push("hover","focus"),this.triggerMethods=t}getPopoverEl(){return"string"==typeof this.swirlPopover?document.querySelector(`#${this.swirlPopover}`):this.swirlPopover?.el??this.swirlPopover}getTriggerEl(){return 1!==this.el.children.length&&console.warn('[Swirl] The "swirl-popover-trigger" component expects exactly one child element.'),this.el.children[0]}setupIntersectionObserver(){if(this.intersectionObserver?.disconnect(),this.hidePopoverWhenInvisible){this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{root:this.parentScrollContainer,threshold:0});const t=this.el.querySelector("*");if(!Boolean(t))return;this.intersectionObserver.observe(t)}}onVisibilityChange(t){!t[0].isIntersecting&&this.isPopoverOpen()&&this.getPopoverEl()?.close()}setupHoverListeners(){this.popoverElRef=this.getPopoverEl(),Boolean(this.popoverElRef)&&(this.popoverElRef.addEventListener("mouseenter",this.popoverMouseEnter),this.popoverElRef.addEventListener("mouseleave",this.popoverMouseLeave))}removeHoverListeners(){Boolean(this.popoverElRef)&&(this.popoverElRef.removeEventListener("mouseenter",this.popoverMouseEnter),this.popoverElRef.removeEventListener("mouseleave",this.popoverMouseLeave))}startHoverLingerTimer(){clearTimeout(this.hoverLingerReference),this.hoverLingerReference=setTimeout((()=>{this.triggerIsActive&&this.isPopoverOpen()&&!this.focusStaysWithin(o())&&this.closePopover(!0),this.triggerIsActive=!1}),this.hoverLingerDuration)}stopHoverLingerTimer(){clearTimeout(this.hoverLingerReference)}focusStaysWithin(t){if(!Boolean(t))return!1;const e=this.getPopoverEl();return h(t,this.el)||Boolean(e)&&h(t,e)}removeAriaSyncListeners(){const t=this.getPopoverEl();t?.removeEventListener("popoverOpen",this.ariaOpenHandler),t?.removeEventListener("popoverClose",this.ariaCloseHandler)}syncAriaOnNextTransition(t){this.removeAriaSyncListeners(),t.addEventListener("popoverOpen",this.ariaOpenHandler,{once:!0}),t.addEventListener("popoverClose",this.ariaCloseHandler,{once:!0})}openPopover(t,e){const i=this.getPopoverEl(),s=this.getTriggerEl();Boolean(i)&&(this.syncAriaOnNextTransition(i),i.open(s,e,t))}closePopover(t){const e=this.getPopoverEl();Boolean(e)&&(this.syncAriaOnNextTransition(e),e.close(t))}get opensWithoutActivation(){return this.triggerMethods.includes("hover")||this.triggerMethods.includes("focus")}isPopoverOpen(){const t=this.getPopoverEl(),e=t?.shadowRoot?.firstElementChild?.classList.contains("popover--active"),i=t?.shadowRoot?.firstElementChild?.classList.contains("popover--closing");return Boolean(e)&&!i}render(){return i(s,{key:"02450c2a004a334be994ae49aadf3754c9bb7997",onClick:this.onClick,onFocusin:this.onFocusin,onFocusout:this.onFocusout,onKeyDown:this.onKeyDown,onMouseenter:this.onMouseenter,onMouseleave:this.onMouseleave},i("slot",{key:"c1f347b0d7250ddfd267193aecf42a06d5a834cc"}))}get el(){return this}static get watchers(){return{swirlPopover:[{watchPopover:0}],trigger:[{watchTrigger:0}],triggerOnClick:[{watchTrigger:0}],triggerOnHover:[{watchTrigger:0}]}}static get style(){return".sc-swirl-popover-trigger-h{display:contents}"}},[262,"swirl-popover-trigger",{hidePopoverWhenInvisible:[4,"hide-popover-when-invisible"],parentScrollContainer:[16],setAriaAttributes:[4,"set-aria-attributes"],swirlPopover:[1,"swirl-popover"],trigger:[1],triggerOnClick:[4,"trigger-on-click"],triggerOnHover:[4,"trigger-on-hover"],hoverLingerDuration:[2,"hover-linger-duration"],hoverDelay:[2,"hover-delay"]},void 0,{swirlPopover:[{watchPopover:0}],trigger:[{watchTrigger:0}],triggerOnClick:[{watchTrigger:0}],triggerOnHover:[{watchTrigger:0}]}]);function c(){"undefined"!=typeof customElements&&["swirl-popover-trigger"].forEach((t=>{"swirl-popover-trigger"===t&&(customElements.get(r(t))||customElements.define(r(t),a))}))}export{a as S,c as d}