@getflip/swirl-components 0.471.0 → 0.472.0

package/dist/swirl-components/p-014870c5.entry.js

@@ -0,0 +1 @@
+import{r as o,c as t,h as e,a as i,d as s}from"./p-N0O_JBVJ.js";import{c as r,a as n,s as p,o as a,f as h}from"./p-CLsTbQHn.js";import{d as c,e as d}from"./p-B0kNlhKL.js";import{c as l}from"./p-orsBiyT_.js";import{t as v}from"./p-DBTxpXCn.js";import{i as m,o as f,k as u,q as _}from"./p-CCck-DTo.js";const b=["xs","sm","base","l","xl"],g=class{constructor(e){o(this,e),this.popoverClose=t(this,"popoverClose",7),this.popoverOpen=t(this,"popoverOpen",7),this.animation="scale-in-xy",this.enableFlip=!0,this.fallbackAxisSideDirection="none",this.maxHeight="22rem",this.offset=8,this.padded=!0,this.placement="bottom-start",this.returnFocusToTrigger=!0,this.translucent=!0,this.borderRadius="base",this.active=!1,this.closing=!1,this.componentLoaded=!1,this.togglePopover=o=>{o.stopPropagation(),this.active?this.close():this.open()},this.onKeydown=o=>{"Escape"===o.code&&this.active&&(o.stopImmediatePropagation(),o.stopPropagation(),this.close())},this.reposition=async()=>{const o=m();if(!Boolean(this.triggerEl)||!Boolean(this.contentContainer))return;if(o)return void(this.position=void 0);const t="number"==typeof this.offset?{mainAxis:this.offset,crossAxis:0}:{mainAxis:this.offset[0],crossAxis:this.offset[1]},e=f("--s-space-16"),i=p({padding:{left:e,right:e}}),s=this.enableFlip?[a(t),h({fallbackAxisSideDirection:this.fallbackAxisSideDirection}),i]:[a(t),i];this.position=await r(this.triggerEl,this.contentContainer,{middleware:s,placement:this.placement,strategy:"fixed"})},this.onCloseButtonClick=()=>{this.close()}}connectedCallback(){this.componentLoaded&&this.connectTrigger()}componentDidLoad(){this.connectTrigger(),this.updateTriggerAttributes(),Boolean(this.trigger)&&console.warn('[Swirl] The "trigger" prop of swirl-popover is deprecated and will be removed with the next major release. Please use the swirl-popover-trigger component instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlpopovertrigger--docs'),this.componentLoaded=!0}disconnectedCallback(){this.unlockBodyScroll(),this.disableAutoUpdate?.(),this.disableAutoUpdate=void 0,this.triggerEl?.removeEventListener("click",this.togglePopover)}onWindowFocusIn(o){if(!this.active)return;const t=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),e="webkit"in window,i=t||e,s=o.target,r=o.relatedTarget,n=u(),p=!this.el.contains(s)&&!this.el.contains(n),a=s!==this.triggerEl&&!this.triggerEl?.contains(s),h=i&&!this.el.contains(r||s)&&r!==this.el;["SWIRL-TAB"].includes(s.tagName)||!p||!a||i&&!h||this.close()}onWindowBlur(){if(!this.active||this.closing)return;const o=document.activeElement;o&&["IFRAME"].includes(o.tagName)&&this.close()}onWindowClick(o){if(!this.active||this.closing)return;const t=o.target,e=this.el.contains(t),i=o.composedPath().some((o=>!!(Boolean(o)&&o instanceof Node)&&this.el.contains(o))),s=t===this.triggerEl||this.triggerEl.contains(t)||o.composedPath().includes(this.triggerEl);e||i||s||this.close()}async close(o){!this.closing&&this.active&&(this.popoverClose.emit(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.closing=!0,setTimeout((()=>{this.popoverEl?.hidePopover(),this.active=!1,this.closing=!1,this.position=void 0,this.updateTriggerAttributes(this.openedVia),this.openedVia=void 0}),150),this.unlockBodyScroll(),this.returnFocusToTrigger&&!o&&this.getNativeTriggerElement()?.focus())}async open(o,t,e){if(this.triggerEl=o||this.triggerEl,this.active||!Boolean(this.triggerEl))return;this.adjustWidth(),this.position=void 0,this.active=!0,this.openedVia=e,this.updateTriggerAttributes(e);const i=this.getFocusableChildren();requestAnimationFrame((async()=>{this.popoverEl?.showPopover(),await this.reposition(),this.popoverOpen.emit({position:this.position}),i.length>0&&!t?i[0].focus():t||this.contentContainer.focus(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=n(this.triggerEl,this.contentContainer,(()=>this.reposition())),this.scrollContainer.scrollTop=0,this.lockBodyScroll()}))}async isOpen(){return this.active&&!this.closing}async toggle(o,t){this.active?this.close():this.open(o,void 0,t)}connectTrigger(){Boolean(this.trigger)?(this.triggerEl="string"==typeof this.trigger?_(this.triggerContainer||document.body,`#${this.trigger}`)[0]:this.trigger,Boolean(this.triggerEl)&&this.triggerEl.addEventListener("click",this.togglePopover)):this.triggerEl=void 0}getNativeTriggerElement(){return v(this.triggerEl,{includeContainer:!0,getShadowRoot:!0}).at(0)}updateTriggerAttributes(o){if(!Boolean(this.triggerEl))return;const t=this.getNativeTriggerElement();Boolean(t)&&("hover"!==o?(t.setAttribute("aria-controls",this.el.id),t.setAttribute("aria-expanded",String(this.active))):(t.removeAttribute("aria-controls"),t.removeAttribute("aria-expanded")),t.setAttribute("aria-haspopup","dialog"))}getFocusableChildren(){return _(this.el,'[role="menuitem"], [role="menuitemradio"], [role="option"]')}adjustWidth(){let o=this.useContainerWidth;[!0,"true"].includes(this.useContainerWidth)?o=!0:[!1,"false"].includes(this.useContainerWidth)&&(o=!1);const t=!window.matchMedia("(min-width: 768px)").matches;if(Boolean(o)&&!t){const t="string"==typeof o&&this.el.closest(o)||this.el.parentElement;this.contentContainer.style.maxWidth="none",this.contentContainer.style.width=t.getBoundingClientRect().width+"px"}else this.contentContainer.style.maxWidth="",this.contentContainer.style.width=""}lockBodyScroll(){m()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&c(this.scrollContainer)}unlockBodyScroll(){m()&&!this.disableScrollLock&&Boolean(this.scrollContainer)&&d(this.scrollContainer)}render(){const o=!window.matchMedia("(min-width: 768px)").matches,t=b.includes(this.borderRadius)?`var(--s-border-radius-${this.borderRadius})`:this.borderRadius,s=l("popover",`popover--animation-${this.animation}`,`popover--placement-${this.position?.placement}`,{"popover--active":this.active,"popover--closing":this.closing,"popover--fullscreen-bottom-sheet":this.fullscreenBottomSheet,"popover--inactive":!this.active,"popover--translucent":this.translucent&&!this.transparent,"popover--transparent":this.transparent,"popover--padded":this.padded});return e(i,{key:"689e23e4e69c67f9af6d18f4d866b74123986288"},e("div",{key:"df8b86a05008b954b235cfc86c0e204297a95d7b",popover:"manual",class:s,onKeyDown:this.onKeydown,ref:o=>this.popoverEl=o},e("div",{key:"20e1b2176375ed74295cf160f9a1cf8cfa44ceac","aria-hidden":this.active?"false":"true","aria-label":this.label,class:"popover__content",id:this.popoverId,part:"popover__content",role:"dialog",ref:o=>this.contentContainer=o,style:{top:Boolean(this.position)?`${this.position?.y}px`:"",left:Boolean(this.position)?`${this.position?.x}px`:"",opacity:!this.active||this.position||o?void 0:"0","--swirl-popover-border-radius":t},tabindex:"-1"},e("span",{key:"476b68e3bfed68d1b56d5b889126d450c8459f1d",class:"popover__handle"}),e("div",{key:"a900de1329dba957ead0af858f4c42d1ddbcac68",class:"popover__scroll-container",part:"popover__scroll-container",ref:o=>this.scrollContainer=o,style:{maxHeight:!o&&Boolean(this.maxHeight)?this.maxHeight:void 0}},e("slot",{key:"3d83616e4ad6307a7bf4cd18d3ba427f87a8355d"}))),this.active&&e("div",{key:"65041389b759aec6f21bed01f31436593ec83974",class:"popover__backdrop",onClick:this.onCloseButtonClick})))}get el(){return s(this)}};g.style=':host{position:relative;z-index:var(--s-z-40);display:contents}:host *{box-sizing:border-box}.popover{border:none;padding:0;margin:0}.popover::backdrop{display:none}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--placement-bottom .popover__content,.popover--placement-bottom-start .popover__content,.popover--placement-right .popover__content,.popover--placement-right-start .popover__content{transform-origin:top left}}@media (min-width: 768px){.popover--placement-bottom-end .popover__content,.popover--placement-left .popover__content,.popover--placement-left-start .popover__content{transform-origin:top right}}@media (min-width: 768px){.popover--placement-top .popover__content,.popover--placement-top-start .popover__content,.popover--placement-right-end .popover__content{transform-origin:bottom left}}@media (min-width: 768px){.popover--placement-top-end .popover__content,.popover--placement-left-end .popover__content{transform-origin:bottom right}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover--translucent .popover__content{background-color:transparent;outline:var(--s-border-width-default) solid       var(--s-border-translucent-outline)}.popover--translucent .popover__content:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));border-radius:inherit}.popover--translucent .popover__handle{background-color:var(--s-border-on-translucent)}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;border-radius:var(       --swirl-popover-border-radius,       var(--s-border-radius-base)     );max-width:22.5rem;animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}';const w=class{constructor(t){o(this,t),this.hidePopoverWhenInvisible=!0,this.setAriaAttributes=!0,this.triggerOnClick=!0,this.triggerOnHover=!1,this.componentLoaded=!1,this.triggerIsActive=!1,this.popoverMouseEnter=()=>{this.stopHoverLingerTimer()},this.popoverMouseLeave=()=>{this.triggerIsActive&&this.mouseleaveHandler()},this.onMouseenter=()=>{this.triggerOnHover&&(this.stopHoverLingerTimer(),this.triggerIsActive=!0,this.hoverDelayReference=setTimeout((()=>{this.hoverDelayReference=void 0,this.triggerOnHover&&this.mouseenterHandler()}),this.hoverDelay))},this.mouseenterHandler=()=>{const o=this.getPopoverEl(),t=this.getTriggerEl();o.open(t,!0,"hover"),o.addEventListener("popoverOpen",(()=>{this.updateTriggerElAriaAttributes(!0)}),{once:!0}),o.addEventListener("popoverClose",(()=>{this.updateTriggerElAriaAttributes(!1)}),{once:!0})},this.onMouseleave=()=>{clearTimeout(this.hoverDelayReference),this.mouseleaveHandler()},this.mouseleaveHandler=()=>{this.triggerOnHover&&this.startHoverLingerTimer()},this.onClick=()=>{if(!this.triggerOnClick)return;const o=this.getPopoverEl(),t=this.getTriggerEl();o.toggle(t,"click"),o.addEventListener("popoverOpen",(()=>{this.updateTriggerElAriaAttributes(!0)}),{once:!0}),o.addEventListener("popoverClose",(()=>{this.updateTriggerElAriaAttributes(!1)}),{once:!0})},this.updateTriggerElAriaAttributes=o=>{if(!this.setAriaAttributes)return;const t=this.getTriggerEl();if(!Boolean(t))return;const e=this.getPopoverEl()?.id;t.tagName.startsWith("SWIRL-")?(this.triggerOnHover?(t.removeAttribute("swirl-aria-controls"),t.removeAttribute("swirl-aria-expanded")):(t.setAttribute("swirl-aria-controls",e),t.setAttribute("swirl-aria-expanded",String(o||"false"))),t.setAttribute("swirl-aria-haspopup","dialog")):(this.triggerOnHover?(t.removeAttribute("aria-controls"),t.removeAttribute("aria-expanded")):(t.setAttribute("aria-controls",e),t.setAttribute("aria-expanded",String(o||"false"))),t.setAttribute("aria-haspopup","dialog"))}}connectedCallback(){this.componentLoaded&&(this.setupHoverListeners(),this.setupIntersectionObserver())}componentDidLoad(){this.updateTriggerElAriaAttributes(),this.setupHoverListeners(),this.setupIntersectionObserver(),this.componentLoaded=!0}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.removeHoverListeners(),clearTimeout(this.hoverDelayReference),clearTimeout(this.hoverLingerReference)}watchPopover(){this.updateTriggerElAriaAttributes()}watchHover(){this.updateTriggerElAriaAttributes(),clearTimeout(this.hoverDelayReference),clearTimeout(this.hoverLingerReference)}getPopoverEl(){return"string"==typeof this.swirlPopover?document.querySelector(`#${this.swirlPopover}`):this.swirlPopover?.el??this.swirlPopover}getTriggerEl(){return 1!==this.el.children.length&&console.warn('[Swirl] The "swirl-popover-trigger" component expects exactly one child element.'),this.el.children[0]}setupIntersectionObserver(){if(this.intersectionObserver?.disconnect(),this.hidePopoverWhenInvisible){this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{root:this.parentScrollContainer,threshold:1});const o=this.el.querySelector("*");if(!Boolean(o))return;this.intersectionObserver.observe(o)}}onVisibilityChange(o){!o[0].isIntersecting&&this.isPopoverOpen()&&this.getPopoverEl()?.close()}setupHoverListeners(){this.popoverElRef=this.getPopoverEl(),Boolean(this.popoverElRef)&&(this.popoverElRef.addEventListener("mouseenter",this.popoverMouseEnter),this.popoverElRef.addEventListener("mouseleave",this.popoverMouseLeave))}removeHoverListeners(){Boolean(this.popoverElRef)&&(this.popoverElRef.removeEventListener("mouseenter",this.popoverMouseEnter),this.popoverElRef.removeEventListener("mouseleave",this.popoverMouseLeave))}startHoverLingerTimer(){clearTimeout(this.hoverLingerReference),this.hoverLingerReference=setTimeout((()=>{this.triggerIsActive&&this.isPopoverOpen()&&this.getPopoverEl().close(!0),this.triggerIsActive=!1}),this.hoverLingerDuration)}stopHoverLingerTimer(){clearTimeout(this.hoverLingerReference)}isPopoverOpen(){const o=this.getPopoverEl(),t=o?.shadowRoot.firstChild?.classList.contains("popover--active");return t}render(){return e(i,{key:"3ea08cc79c2fef4828d2e6c366c5a40e8d6d3970",onClick:this.onClick,onMouseenter:this.onMouseenter,onMouseleave:this.onMouseleave},e("slot",{key:"284636f8e6232f2e5517a02cd71450c99b5ec0c3"}))}get el(){return s(this)}static get watchers(){return{swirlPopover:[{watchPopover:0}],triggerOnHover:[{watchHover:0}]}}};w.style=".sc-swirl-popover-trigger-h{display:contents}";export{g as swirl_popover,w as swirl_popover_trigger}

package/dist/swirl-components/p-691e6554.entry.js

@@ -0,0 +1 @@
+import{r as a,c as t,h as o,a as i,d as p}from"./p-N0O_JBVJ.js";import{c as e}from"./p-orsBiyT_.js";import{D as n}from"./p-Bfn7CHM9.js";import{d as l,i as s,p as r}from"./p-CCck-DTo.js";const d=class{constructor(o){a(this,o),this.ctaClick=t(this,"ctaClick",7),this.mobileViewChange=t(this,"mobileViewChange",7),this.navigationBackButtonClick=t(this,"navigationBackButtonClick",7),this.navigationExpansionStateChange=t(this,"navigationExpansionStateChange",7),this.sidebarToggle=t(this,"sidebarToggle",7),this.backToNavigationViewButtonLabel="Back to navigation",this.navigationBackButtonLabel="Go back",this.navigationExpansionStateStorageKey="SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE",this.navigationToggleLabel="Toggle navigation",this.navigationOverlayLabel="Show navigation",this.sidebarPositioning="auto",this.sidebarCloseButtonLabel="Close sidebar",this.transitionStyle="slides",this.contentScrollState={scrollable:!1,scrolledToTop:!1,scrolledToBottom:!1},this.mobileView="navigation",this.navScrollState={scrollable:!1,scrolledToTop:!1},this.navExpansionState="expanded",this.sidebarScrollState={scrollable:!1,scrolledToTop:!1},this.mediaQueryUnsubscribe=()=>{},this.onBackToNavigationViewButtonClick=()=>{this.changeMobileView("navigation")},this.onCtaClick=a=>{this.ctaClick.emit(a)},this.onNavigationBackButtonClick=a=>{this.navigationBackButtonClick.emit(a)},this.onSidebarCloseButtonClick=()=>{this.hideSidebar()},this.onContentScroll=l((()=>{this.updateContentScrollState()}),16),this.onNavScroll=l((()=>{this.updateNavScrollState()}),16),this.onSidebarScroll=l((()=>{this.updateSidebarScrollState()}),16),this.toggleNavigation=()=>{this.collapsibleNavigation&&this.setCollapsibleNavigationState("expanded"===this.navExpansionState?"collapsed":"expanded")},this.overlayNavigation=a=>{a.stopPropagation(),this.setCollapsibleNavigationState("overlayed")}}componentWillLoad(){this.initialMobileView&&(this.mobileView=this.initialMobileView),this.mutationObserver=new MutationObserver((()=>{this.updateBottomBarStatus(),this.updateBottomBannerStatus(),this.updateCustomAppBarBackButtonStatus(),this.updateNavigationStatus(),this.updateSidebarStatus()})),this.mutationObserver.observe(this.el,{childList:!0}),queueMicrotask((()=>{this.updateBottomBarStatus(),this.updateBottomBannerStatus(),this.updateCustomAppBarBackButtonStatus(),this.updateSidebarStatus(),this.updateNavigationStatus(),this.checkMobileView()}))}componentDidLoad(){this.mediaQueryUnsubscribe=n.subscribe((a=>{this.isDesktop=a})),queueMicrotask((()=>{this.restoreNavExpansionState(),this.updateContentScrollState(),this.updateSidebarScrollState(),this.updateNavScrollState()}))}disconnectedCallback(){this.mediaQueryUnsubscribe(),this.mutationObserver?.disconnect()}onDocumentClick(a){this.collapsibleNavigation&&"overlayed"===this.navExpansionState&&(a.composedPath().includes(this.navEl)||a.composedPath().includes(this.headerEl)||this.setCollapsibleNavigationState("collapsed"))}onKeyDown(a){"Escape"===a.key&&"overlayed"===this.navExpansionState&&this.setCollapsibleNavigationState("collapsed")}watchMobileView(){this.checkMobileView()}async showSidebar(){if(this.sidebarActive||!this.hasSidebar)return;Boolean(this.sidebarOpeningTimeout)&&clearTimeout(this.sidebarOpeningTimeout),this.sidebarOpening=!0;const a=s()||r()?0:300;this.sidebarOpeningTimeout=setTimeout((()=>{this.sidebarActive=!0,this.sidebarOpening=!1,this.changeMobileView("sidebar"),this.sidebarToggle.emit(!0)}),a)}async hideSidebar(){if(!this.sidebarActive||!this.hasSidebar)return;Boolean(this.sidebarClosingTimeout)&&clearTimeout(this.sidebarClosingTimeout),this.sidebarClosing=!0;const a=s()||r()?0:290;this.sidebarClosingTimeout=setTimeout((()=>{this.sidebarActive=!1,this.sidebarClosing=!1,this.changeMobileView("body"),this.sidebarToggle.emit(!1)}),a)}async toggleSidebar(){this.hasSidebar&&(this.sidebarActive?this.hideSidebar():this.showSidebar())}async getCollapsibleNavigationState(){return this.navExpansionState}async setCollapsibleNavigationState(a){this.collapsibleNavigation&&(this.navExpansionState=a,this.navigationExpansionStateChange.emit(this.navExpansionState),localStorage.setItem(this.navigationExpansionStateStorageKey,this.navExpansionState))}async getScrollContainer(){return this.contentEl}async changeMobileView(a,t=!0){if(this.mobileView===a||"navigation"===a&&!this.hasNavigation||"sidebar"===a&&!this.hasSidebar)return;if(!s()||!t)return this.mobileView=a,void this.mobileViewChange.emit(this.mobileView);Boolean(this.transitionTimeout)&&clearTimeout(this.transitionTimeout),this.transitioningFrom=this.mobileView,this.transitioningTo=a;const o=r();this.transitionTimeout=setTimeout((()=>{this.mobileView=a,this.transitioningFrom=void 0,this.transitioningTo=void 0,this.mobileViewChange.emit(this.mobileView)}),o?0:"slides"===this.transitionStyle?400:"dialog"===this.transitionStyle?300:0)}checkMobileView(){if("navigation"===this.mobileView&&!this.hasNavigation||"sidebar"===this.mobileView&&!this.hasSidebar)return void(this.mobileView="body");const a="sidebar"===this.mobileView||this.sidebarActive;a!==this.sidebarActive&&(a?this.showSidebar():this.hideSidebar())}updateBottomBannerStatus(){this.hasBottomBanner=Boolean(this.el.querySelector('[slot="bottom-banner"]'))}updateBottomBarStatus(){this.hasBottomBar=Boolean(this.el.querySelector('[slot="bottom-bar"]'))}updateNavigationStatus(){this.hasNavigation=Boolean(this.el.querySelector('[slot="navigation"]'))}updateCustomAppBarBackButtonStatus(){this.hasCustomAppBarBackButton=Boolean(this.el.querySelector('[slot="custom-app-bar-back-button"]'))}updateSidebarStatus(){this.hasSidebar=Boolean(this.el.querySelector('[slot="sidebar"]'))}updateContentScrollState(){const a={scrollable:this.contentEl.scrollHeight>this.contentEl.clientHeight,scrolledToTop:0===this.contentEl.scrollTop,scrolledToBottom:Math.round(this.contentEl.scrollTop+this.contentEl.clientHeight)>=this.contentEl.scrollHeight};Object.keys(a).some((t=>a[t]!==this.contentScrollState[t]))&&(this.contentScrollState=a)}updateNavScrollState(){const a={scrollable:this.navEl.scrollHeight>this.navEl.clientHeight,scrolledToTop:0===this.navEl.scrollTop};Object.keys(a).some((t=>a[t]!==this.navScrollState[t]))&&(this.navScrollState=a)}updateSidebarScrollState(){const a={scrollable:this.sidebarEl.scrollHeight>this.sidebarEl.clientHeight,scrolledToTop:0===this.sidebarEl.scrollTop};Object.keys(a).some((t=>a[t]!==this.sidebarScrollState[t]))&&(this.sidebarScrollState=a)}restoreNavExpansionState(){if(!this.collapsibleNavigation)return;const a=localStorage.getItem(this.navigationExpansionStateStorageKey);Boolean(a)&&this.setCollapsibleNavigationState(a)}render(){const a=("body"===this.mobileView||this.transitioningTo)&&this.hasNavigation&&!this.hasCustomAppBarBackButton,t=Boolean(this.el.querySelector('[slot="app-bar-controls"]')),p=Boolean(this.el.querySelector('[slot="app-bar-mobile-menu-button"]')),n=Boolean(this.el.querySelector('[slot="custom-sidebar-header"]')),l=Boolean(this.el.querySelector('[slot="floating-action-button"]'))||Boolean(this.ctaLabel),s=this.hasNavigation&&(!this.collapsibleNavigation||"collapsed"!==this.navExpansionState||!this.isDesktop),r=e("app-layout",`app-layout--mobile-view-${this.mobileView}`,`app-layout--nav-${this.isDesktop?this.navExpansionState:"expanded"}`,`app-layout--transitioning-from-${this.transitioningFrom}`,`app-layout--transitioning-to-${this.transitioningTo}`,`app-layout--transition-style-${this.transitionStyle}`,`app-layout--sidebar-positioning-${this.sidebarPositioning}`,{"app-layout--content-scrollable":this.contentScrollState.scrollable,"app-layout--content-scrolled-to-top":this.contentScrollState.scrolledToTop,"app-layout--content-scrolled-to-bottom":this.contentScrollState.scrolledToBottom,"app-layout--has-app-bar-mobile-menu-button":p,"app-layout--has-app-bar-controls":t,"app-layout--has-bottom-banner":this.hasBottomBanner,"app-layout--has-bottom-bar":this.hasBottomBar,"app-layout--has-custom-app-bar-back-button":this.hasCustomAppBarBackButton,"app-layout--has-custom-sidebar-header":n,"app-layout--has-floating-action-button":l,"app-layout--has-navigation":this.hasNavigation,"app-layout--has-sidebar":this.hasSidebar,"app-layout--hide-app-bar":this.hideAppBar,"app-layout--nav-collapsible":this.collapsibleNavigation&&this.isDesktop,"app-layout--nav-scrollable":this.navScrollState.scrollable,"app-layout--nav-scrolled-to-top":this.navScrollState.scrolledToTop,"app-layout--prevent-content-overflow":this.preventContentOverflow,"app-layout--rounded-corners":this.roundedCorners,"app-layout--sidebar-active":"sidebar"===this.mobileView||this.sidebarActive,"app-layout--sidebar-closing":this.sidebarClosing,"app-layout--sidebar-opening":this.sidebarOpening,"app-layout--sidebar-scrollable":this.sidebarScrollState.scrollable,"app-layout--sidebar-scrolled-to-top":this.sidebarScrollState.scrolledToTop});return o(i,{key:"e8fa3517c20be50f23651a6618d0a654360dd8bb"},o("section",{key:"29bae81c9047360e9a41d1e1b5b4478f18e65900","aria-labelledby":"app-name",class:r},o("div",{key:"8399a6c2d5885a8abaa3da3183282d6838026bc9",class:"app-layout__grid"},o("header",{key:"7139743470378cd46bc6b01b3d3628d9e4e2fd4d",class:"app-layout__header",ref:a=>this.headerEl=a},o("span",{key:"79057b7fc1b7f969a72e3a5bf2f6f19abd5c1d58",class:"app-layout__navigation-mobile-menu-button"},o("slot",{key:"48113ac7f2a57bee6cf7ea639d8f62a9192582cd",name:"navigation-mobile-menu-button"})),this.collapsibleNavigation&&o("span",{key:"7414f2ec88b8369728d76d419b169cb3d936b6f5",class:"app-layout__nav-overlay-toggle"},o("swirl-button",{key:"cce77f4a0de5288ab8496e2d27aa40952e9997ed",hideLabel:!0,icon:"expanded"!==this.navExpansionState?"<swirl-icon-dock-left-expand></swirl-icon-dock-left-expand>":"<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>",label:this.navigationToggleLabel,onClick:this.toggleNavigation})),this.showNavigationBackButton&&o("span",{key:"e1a586370b0b04dc4d100fcb895e2ba371dae64e",class:"app-layout__navigation-back-button"},o("swirl-button",{key:"0b77ac2c49a9db06cc3f7792d06dd269945c58da",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.navigationBackButtonLabel,onClick:this.onNavigationBackButtonClick})),o("swirl-heading",{key:"d2e7989615352c42dce6005da07dbaed0c6d99ee",as:"h1",class:"app-layout__app-name",headingId:"app-name",level:3,text:this.appName}),s&&o("span",{key:"d6655e944086aa11f95c4cab4da3ea9ef827cc76",class:"app-layout__navigation-controls"},o("slot",{key:"6c7d9dbf8b2707cdcb01bffaff8ce9f6059389b4",name:"navigation-controls"}))),o("nav",{key:"111e910171f0d799ac8e3eb5fd6fd5e7c7f832a6","aria-label":this.navigationLabel,class:"app-layout__navigation",onScroll:this.onNavScroll,ref:a=>this.navEl=a,inert:this.isDesktop&&this.collapsibleNavigation&&"collapsed"===this.navExpansionState},o("slot",{key:"580dd1a0a999a77195279c7cc887585857080276",name:"navigation"})),o("section",{key:"f77cb25f6be2b64d7213ff7f917b5f6869880b9f","aria-labelledby":"app-name",class:"app-layout__body"},!this.hideAppBar&&o("header",{key:"06467a7005a8bccfa66bd662a28e9aea4771d27a",class:"app-layout__app-bar"},o("span",{key:"a2f2d531d1b7f304d9f3fa5159dbea8f78b45553",class:"app-layout__app-bar-mobile-menu-button"},o("slot",{key:"4e83761fc85b17c739abc1d8c7158d5cd362706f",name:"app-bar-mobile-menu-button"})),a&&o("span",{key:"1c257404a9cfd84debbd0486f8f17b2d7916839c",class:"app-layout__back-to-navigation-button"},o("swirl-button",{key:"f67661832bb9ed96006e13f4cf998cb395adcce5",hideLabel:!0,icon:"dialog"===this.transitionStyle?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.backToNavigationViewButtonLabel,onClick:this.onBackToNavigationViewButtonClick})),this.collapsibleNavigation&&"expanded"!==this.navExpansionState&&o("span",{key:"39d626d775997e9bab9e9ae3946084d73d715583",class:"app-layout__nav-expansion-toggle"},o("swirl-button",{key:"7e967c7d6314707a913b461271e4908ca80d70a7",hideLabel:!0,icon:"<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>",label:this.navigationOverlayLabel,onClick:this.overlayNavigation})),o("span",{key:"76e4be74a94b18c027c33140736c36c98e7024e3",class:"app-layout__custom-app-bar-back-button"},o("slot",{key:"81df9b04bc26d1fb85f8160c55cc2df72aafedfa",name:"custom-app-bar-back-button"})),o("div",{key:"955ccd31ee748b0f9bf03e573f920884a402b7f4",class:"app-layout__app-bar-content"},o("slot",{key:"16deec03db91173bf75664f2fbc1ceac7a30004f",name:"app-bar"})),o("div",{key:"bce238fc1df86c571e663419d8f3faeeffa36982",class:"app-layout__app-bar-controls"},o("slot",{key:"540b1410a2cf45d6b04b1ae7ebd8c1f92b9edeaa",name:"app-bar-controls"}))),o("div",{key:"110496d5b1001a4cfd1510c5b01e6ba108d5de17",class:"app-layout__banner"},o("slot",{key:"d899e047a077a3ea4638311913623cc6ef8d3112",name:"banner"})),o("div",{key:"137484f06a5e4fea74ab0f5febc30b327c500710",class:"app-layout__content",onScroll:this.onContentScroll,ref:a=>this.contentEl=a},o("div",{key:"3854ac4b1108ec4083c05b6d989b899e5b4bd999",class:"app-layout__content-inner"},o("slot",{key:"68d9a207834dcf01164545df8d813d817b1fcad0",name:"content"})),o("div",{key:"e7c2fd5cc7802e3d4cfa83fc54e1b58587fc05b7",class:"app-layout__bottom-banner"},o("slot",{key:"655ad74d80da4bde2d8e1c5f76e5276f8debbf67",name:"bottom-banner"}))),o("div",{key:"6fa13e005398621057950af22593851bc5bb40bb",class:"app-layout__bottom-bar"},o("slot",{key:"7f3c36cb64f027d9db9ed6f6343242fdccffc313",name:"bottom-bar"}))),o("aside",{key:"7269ec313d3bcc3cd1dec5abe8cf81b440987e8f",class:"app-layout__sidebar"},o("header",{key:"63ba307a1ee8755ed86cfdf73eda6cfe38b4b8ac",class:"app-layout__custom-sidebar-header"},o("slot",{key:"4027a4f20d4b2703422547bbbdd81221b8816c85",name:"custom-sidebar-header"})),o("header",{key:"f853e2f2fc57e27a9d14265bb4abb948c198e8ea",class:"app-layout__sidebar-header"},o("swirl-button",{key:"a5afb72e7cf946c9078732708d02ab26eae5c955",class:"app-layout__sidebar-close-button",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),o("swirl-heading",{key:"797791edbae180dd39835a407479f56b824f2733",as:"h3",class:"app-layout__sidebar-heading",headingId:"sidebar-heading",level:3,text:this.sidebarHeading})),o("div",{key:"1d1a0a76937293430f572b6c5930e010d70102fd",class:"app-layout__sidebar-content",onScroll:this.onSidebarScroll,ref:a=>this.sidebarEl=a},o("slot",{key:"dc8ff45e81cbd1be539e851d2da00042b6d3ce26",name:"sidebar"}))),o("span",{key:"e11c29160fcf21b6212d28e55a8092cc8bb36931",class:"app-layout__floating-action-button"},this.ctaLabel&&o("swirl-button",{key:"15eb5b55036b38780182689b7d11f084c9425038",hideLabel:Boolean(this.ctaIcon),icon:this.ctaIcon,intent:"primary",label:this.ctaLabel,onClick:this.onCtaClick,variant:"floating"}),o("slot",{key:"50383a0c6b5cb438fd606f2bba6ad0184eb2a953",name:"floating-action-button"})))))}get el(){return p(this)}static get watchers(){return{mobileView:[{watchMobileView:0}]}}};d.style=':host{--header-height:3.5625rem;position:relative;z-index:1;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.app-layout{display:flex;overflow:hidden;width:100%;height:100%;margin-right:auto;margin-left:auto}.app-layout__grid{position:relative;display:grid;width:100%;height:100%;grid-template-columns:100%;grid-template-rows:var(--header-height) 1fr;grid-template-areas:"body"     "body"}.app-layout:not(.app-layout--has-navigation) .app-layout__header,.app-layout:not(.app-layout--has-navigation) .app-layout__navigation{display:none}.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar{display:none}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-body) .app-layout__body{display:none}}@media (max-width: 767px){.app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar{display:none}}.app-layout:not(.app-layout--has-app-bar-mobile-menu-button) .app-layout__app-bar-mobile-menu-button{display:none}.app-layout--has-navigation .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"       "navigation"}@media (min-width: 768px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:"header body"         "navigation body"}}@media (min-width: 1440px){.app-layout--has-navigation .app-layout__grid{grid-template-columns:min(50%, 25rem) 1fr}}@media (min-width: 768px){.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button{display:none}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{position:absolute;z-index:4;top:0;left:0;width:22.5rem;animation:app-layout-nav-overlay-slide-in-desktop 0.1s;animation-fill-mode:forwards}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header:after{position:absolute;z-index:1;top:0;left:calc(100% + var(--s-border-width-default));display:block;width:2rem;height:100vh;background-image:linear-gradient(               to right,               rgba(0, 0, 0, 0.05) 0,               rgba(0, 0, 0, 0) 80%,               rgba(0, 0, 0, 0) 100%             );content:""}.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{z-index:3;bottom:0}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,.app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation{width:25rem;animation:app-layout-nav-overlay-slide-in-large-desktop 0.1s}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:app-layout-no-nav-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-sidebar:not(.app-layout--has-navigation):not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid,.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:"body sidebar"           "body sidebar"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"       "body"}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay) .app-layout__sidebar{position:static;z-index:auto;width:25rem;animation:none;box-shadow:none;background-color:var(--s-background-default)}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-active .app-layout__grid{grid-template-columns:25rem 1fr 25rem;grid-template-areas:"header body sidebar"           "navigation body sidebar"}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:app-layout-sidebar-slide-in 0.3s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-opening.app-layout--nav-overlayed .app-layout__grid{animation:app-layout-sidebar-slide-in-with-collapsed-nav 0.3s}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:app-layout-sidebar-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing .app-layout__grid{animation:none}}.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing.app-layout--nav-collapsed .app-layout__grid,.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--sidebar-positioning-overlay).app-layout--sidebar-closing.app-layout--nav-overlayed .app-layout__grid{animation:app-layout-sidebar-slide-out-with-collapsed-nav 0.3s}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:min(50%, 22.5rem) 1fr;grid-template-areas:"header body"         "navigation body"}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:22.5rem 1fr}}@media (min-width: 1440px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid{grid-template-columns:25rem 1fr}}@media (min-width: 992px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid{grid-template-columns:0 1fr}.app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid{grid-template-columns:0 1fr}}@media (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;z-index:3;top:0;right:0;bottom:0;width:min(40%, 25rem)}.app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--rounded-corners){border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (max-width: 767px){.app-layout--mobile-view-navigation .app-layout__grid{grid-template-areas:"header"         "navigation"}.app-layout--mobile-view-navigation .app-layout__body,.app-layout--mobile-view-navigation .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-body .app-layout__grid{grid-template-areas:"body"         "body"}.app-layout--mobile-view-body .app-layout__header,.app-layout--mobile-view-body .app-layout__navigation,.app-layout--mobile-view-body .app-layout__sidebar{display:none}}@media (max-width: 767px){.app-layout--mobile-view-sidebar .app-layout__grid{grid-template-areas:"sidebar"         "sidebar"}.app-layout--mobile-view-sidebar .app-layout__header,.app-layout--mobile-view-sidebar .app-layout__navigation,.app-layout--mobile-view-sidebar .app-layout__body{display:none}}.app-layout--has-sidebar:not(.app-layout--sidebar-active):not(.app-layout--sidebar-opening) .app-layout__sidebar{display:none}@media (min-width: 768px){.app-layout--sidebar-closing .app-layout__sidebar{animation:app-layout-sidebar-overlay-slide-out 0.3s}@media (prefers-reduced-motion){.app-layout--sidebar-closing .app-layout__sidebar{animation:none}}}@media (min-width: 1800px){.app-layout--sidebar-closing:not(.app-layout--sidebar-positioning-overlay) .app-layout__sidebar{animation:none}}.app-layout--has-app-bar-controls .app-layout__app-bar-controls{display:block}.app-layout--has-bottom-bar .app-layout__body{grid-template-rows:minmax(var(--header-height), auto) auto 1fr auto;grid-template-areas:"app-bar"       "banner"       "content"       "bottom-bar"}.app-layout--has-bottom-bar .app-layout__content{border-bottom:var(--s-border-width-default) solid transparent}.app-layout--has-bottom-bar .app-layout__bottom-bar{display:block;padding-bottom:env(safe-area-inset-bottom, 0)}.app-layout--has-bottom-banner .app-layout__bottom-banner{display:block}.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button{display:block}.app-layout--has-custom-sidebar-header .app-layout__sidebar-header{display:none}.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header{display:block}.app-layout--has-floating-action-button .app-layout__floating-action-button{display:block}.app-layout--hide-app-bar .app-layout__body{grid-template-rows:auto 1fr;grid-template-areas:"banner"       "content"       "bottom-bar"}.app-layout--content-scrollable:not(.app-layout--content-scrolled-to-top) .app-layout__app-bar{border-bottom-color:var(--s-border-default)}.app-layout--content-scrollable.app-layout--has-bottom-bar:not(.app-layout--content-scrolled-to-bottom):not(.app-layout--has-bottom-banner) .app-layout__content{border-bottom-color:var(--s-border-default)}.app-layout--nav-scrollable:not(.app-layout--nav-scrolled-to-top) .app-layout__header{border-bottom-color:var(--s-border-default)}.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__sidebar-header,.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__custom-sidebar-header{border-bottom-color:var(--s-border-default)}.app-layout--prevent-content-overflow .app-layout__content{overflow:hidden}.app-layout--prevent-content-overflow .app-layout__content-inner{max-height:100%}.app-layout__header{z-index:1;display:flex;min-width:0;height:var(--header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__header{border-right:var(--s-border-width-default) solid var(--s-border-default)}}@media (min-width: 992px){.app-layout__header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__app-name{min-width:0}.app-layout__app-name .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{flex-shrink:0}@media (min-width: 992px){.app-layout__app-bar-mobile-menu-button,.app-layout__navigation-mobile-menu-button{display:none}}.app-layout__app-bar-mobile-menu-button{padding-left:var(--s-space-8)}.app-layout__navigation-back-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__floating-action-button{position:absolute;z-index:4;right:var(--s-space-16);bottom:var(--s-space-16);display:none}.app-layout__navigation-controls{flex-shrink:0}.app-layout__navigation{overflow-y:auto;border-right:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:navigation}.app-layout__nav-overlay-toggle,.app-layout__nav-expansion-toggle{display:none}@media (min-width: 992px){.app-layout__nav-overlay-toggle,.app-layout__nav-expansion-toggle{display:block}}.app-layout__nav-expansion-toggle{padding-left:var(--s-space-16)}.app-layout__body{z-index:2;display:grid;width:100%;height:100%;background-color:var(--s-background-default);grid-area:body;grid-template-rows:minmax(var(--header-height), auto) auto 1fr;grid-template-areas:"app-bar"     "banner"     "content"}.app-layout__app-bar{--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem;display:flex;min-width:0;align-items:center;border-bottom:var(--s-border-width-default) solid transparent;grid-area:app-bar;gap:var(--s-space-8)}.app-layout__bottom-bar{display:none;min-width:0;align-items:center;grid-area:bottom-bar}.app-layout__back-to-navigation-button{padding-left:var(--s-space-8)}@media (min-width: 768px){.app-layout__back-to-navigation-button{display:none}}.app-layout__banner{grid-area:banner}.app-layout__app-bar-content{min-width:0;flex-grow:1}.app-layout__custom-app-bar-back-button{display:none;padding-left:var(--s-space-8)}.app-layout__app-bar-controls{display:none;padding-right:var(--s-space-8)}@media (min-width: 768px){.app-layout__app-bar-controls{padding-right:var(--s-space-16)}}.app-layout__content{overflow:auto;grid-area:content;display:flex;flex-direction:column}.app-layout__content-inner{flex-grow:1}.app-layout__sidebar{display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:sidebar;grid-template-rows:var(--header-height) 1fr;grid-template-areas:"sidebar-header"     "sidebar-content"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout__sidebar{animation:none}}}.app-layout__custom-sidebar-header{display:none;min-width:0;border-bottom:var(--s-border-width-default) solid transparent;grid-area:sidebar-header}.app-layout__sidebar-header{display:flex;min-width:0;padding-top:var(--s-space-12);padding-right:var(--s-space-8);padding-bottom:var(--s-space-12);padding-left:var(--s-space-8);align-items:center;border-bottom:var(--s-border-width-default) solid transparent;grid-area:sidebar-header;gap:var(--s-space-8)}@media (min-width: 768px){.app-layout__sidebar-header{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}}.app-layout__sidebar-heading{min-width:0;flex-grow:1}.app-layout__sidebar-heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-layout__sidebar-close-button{margin-left:calc(-1 * var(--s-space-4))}.app-layout__sidebar-content{overflow-y:auto;grid-area:sidebar-content}.app-layout__bottom-banner{display:none;position:sticky;right:0;bottom:0;left:0;z-index:5}@media (min-width: 768px){.app-layout--rounded-corners .app-layout__grid{-moz-column-gap:var(--s-space-8);column-gap:var(--s-space-8)}.app-layout--rounded-corners .app-layout__header{border-right:none;border-radius:var(--s-border-radius-l) var(--s-border-radius-l) 0 0}.app-layout--rounded-corners .app-layout__navigation{border-right:none;border-radius:0 0 var(--s-border-radius-l) var(--s-border-radius-l)}.app-layout--rounded-corners .app-layout__body,.app-layout--rounded-corners .app-layout__sidebar{overflow:hidden;border-radius:var(--s-border-radius-l)}.app-layout--rounded-corners .app-layout__sidebar{border-left:none;box-shadow:-12px 0 32px -10px rgba(23, 23, 23, 0.12),         -8px 4px 12px -8px rgba(23, 23, 23, 0.08);background-color:var(--s-surface-overlay-default)}}@media (min-width: 768px){.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid,.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"           "body"}}@media (min-width: 768px){.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar .app-layout__sidebar{position:absolute;z-index:3;top:0;right:0;bottom:0;width:min(50%, 25rem);border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@keyframes app-layout-nav-overlay-slide-in-desktop{from{width:0}to{width:22.5rem}}@keyframes app-layout-nav-overlay-slide-in-large-desktop{from{width:0}to{width:25rem}}@media print{.app-layout__content{overflow:visible}:host,.app-layout,.app-layout__grid,.app-layout__body{height:auto;overflow:visible}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:"header"           "navigation"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{position:absolute;top:0;left:0;display:grid;width:100%;transform:translate3d(100%, 0, 0)}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{display:flex}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{display:block}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__grid{grid-template-columns:100%;grid-template-areas:"body"           "body"}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{position:absolute;top:0;left:0;display:grid;border-left:var(--s-border-width-default) solid var(--s-border-default)}}@media (max-width: 991px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{display:grid}.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{display:grid}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__navigation,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:"";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body:after,.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body:after{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:app-layout-slide-out 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__body,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-slide-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{position:absolute;top:0;right:100%;bottom:0;display:block;width:100%;background-color:rgba(0, 0, 0, 0.3);content:"";animation:app-layout-fade-in 0.4s}@media (prefers-reduced-motion){.app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar:after,.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}.app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar:after{animation-direction:reverse}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__body,.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation:none}}}@media (max-width: 767px){.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__header{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__navigation{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__body{animation-direction:reverse}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:app-layout-scale-in 0.3s}@media (prefers-reduced-motion){.app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar,.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation:none}}}@media (max-width: 991px){.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__body{animation-direction:reverse}.app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(.app-layout--mobile-view-body) .app-layout__sidebar{animation-direction:reverse}}@keyframes app-layout-sidebar-overlay-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(100%, 0, 0)}}@keyframes app-layout-slide-in{0%{transform:translate3d(100%, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes app-layout-slide-out{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-20%, 0, 0)}}@keyframes app-layout-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes app-layout-scale-in{from{transform:scale(0);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0)}to{transform:scale(1);box-shadow:0 0 0 100rem rgba(0, 0, 0, 0.25)}}@keyframes app-layout-sidebar-slide-in{from{overflow:hidden;grid-template-columns:25rem 1fr 0}to{overflow:hidden;grid-template-columns:25rem 1fr 25rem}}@keyframes app-layout-sidebar-slide-in-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 0}to{overflow:hidden;grid-template-columns:0 1fr 25rem}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 1fr 0}}@keyframes app-layout-sidebar-slide-out-with-collapsed-nav{from{overflow:hidden;grid-template-columns:0 1fr 25rem}to{overflow:hidden;grid-template-columns:0 1fr 0}}@keyframes app-layout-no-nav-sidebar-slide-in{from{overflow:hidden;grid-template-columns:1fr 0}to{overflow:hidden;grid-template-columns:1fr 25rem}}@keyframes app-layout-no-nav-sidebar-slide-out{from{overflow:hidden;grid-template-columns:1fr 25rem}to{overflow:hidden;grid-template-columns:1fr 0}}';export{d as swirl_app_layout}