npm - @getflip/swirl-components - Versions diffs - 0.483.0 → 0.485.0 - Mend

@getflip/swirl-components 0.483.0 → 0.485.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2552) hide show

package/dist/components/swirl-app-layout.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as a,HTMLElement as t,createEvent as o,h as i,Host as e,transformTag as n}from"@stencil/core/internal/client";import{c as p}from"./index2.js";import{D as l}from"./media-query.service.js";import{d as s,i as r,p as d}from"./utils.js";import{d as y}from"./swirl-button2.js";import{d as u}from"./swirl-heading2.js";const b=a(class extends t{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.ctaClick=o(this,"ctaClick",7),this.mobileViewChange=o(this,"mobileViewChange",7),this.navigationBackButtonClick=o(this,"navigationBackButtonClick",7),this.navigationExpansionStateChange=o(this,"navigationExpansionStateChange",7),this.sidebarToggle=o(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=s((()=>{this.updateContentScrollState()}),16),this.onNavScroll=s((()=>{this.updateNavScrollState()}),16),this.onSidebarScroll=s((()=>{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=l.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;this.sidebarOpeningTimeout&&clearTimeout(this.sidebarOpeningTimeout),this.sidebarOpening=!0;const a=r()\|\|d()?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;this.sidebarClosingTimeout&&clearTimeout(this.sidebarClosingTimeout),this.sidebarClosing=!0;const a=r()\|\|d()?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(!r()\|\|!t)return this.mobileView=a,void this.mobileViewChange.emit(this.mobileView);this.transitionTimeout&&clearTimeout(this.transitionTimeout),this.transitioningFrom=this.mobileView,this.transitioningTo=a;const o=d();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=!!this.el.querySelector('[slot="bottom-banner"]')}updateBottomBarStatus(){this.hasBottomBar=!!this.el.querySelector('[slot="bottom-bar"]')}updateNavigationStatus(){this.hasNavigation=!!this.el.querySelector('[slot="navigation"]')}updateCustomAppBarBackButtonStatus(){this.hasCustomAppBarBackButton=!!this.el.querySelector('[slot="custom-app-bar-back-button"]')}updateSidebarStatus(){this.hasSidebar=!!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);a&&this.setCollapsibleNavigationState(a)}render(){const a=("body"===this.mobileView\|\|this.transitioningTo)&&this.hasNavigation&&!this.hasCustomAppBarBackButton,t=!!this.el.querySelector('[slot="app-bar-controls"]'),o=!!this.el.querySelector('[slot="app-bar-mobile-menu-button"]'),n=!!this.el.querySelector('[slot="custom-sidebar-header"]'),l=!!this.el.querySelector('[slot="floating-action-button"]')\|\|!!this.ctaLabel,s=this.hasNavigation&&(!this.collapsibleNavigation\|\|"collapsed"!==this.navExpansionState\|\|!this.isDesktop),r=p("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":o,"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 i(e,{key:"e8fa3517c20be50f23651a6618d0a654360dd8bb"},i("section",{key:"29bae81c9047360e9a41d1e1b5b4478f18e65900","aria-labelledby":"app-name",class:r},i("div",{key:"8399a6c2d5885a8abaa3da3183282d6838026bc9",class:"app-layout__grid"},i("header",{key:"7139743470378cd46bc6b01b3d3628d9e4e2fd4d",class:"app-layout__header",ref:a=>this.headerEl=a},i("span",{key:"79057b7fc1b7f969a72e3a5bf2f6f19abd5c1d58",class:"app-layout__navigation-mobile-menu-button"},i("slot",{key:"48113ac7f2a57bee6cf7ea639d8f62a9192582cd",name:"navigation-mobile-menu-button"})),this.collapsibleNavigation&&i("span",{key:"7414f2ec88b8369728d76d419b169cb3d936b6f5",class:"app-layout__nav-overlay-toggle"},i("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&&i("span",{key:"e1a586370b0b04dc4d100fcb895e2ba371dae64e",class:"app-layout__navigation-back-button"},i("swirl-button",{key:"0b77ac2c49a9db06cc3f7792d06dd269945c58da",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.navigationBackButtonLabel,onClick:this.onNavigationBackButtonClick})),i("swirl-heading",{key:"d2e7989615352c42dce6005da07dbaed0c6d99ee",as:"h1",class:"app-layout__app-name",headingId:"app-name",level:3,text:this.appName}),s&&i("span",{key:"d6655e944086aa11f95c4cab4da3ea9ef827cc76",class:"app-layout__navigation-controls"},i("slot",{key:"6c7d9dbf8b2707cdcb01bffaff8ce9f6059389b4",name:"navigation-controls"}))),i("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},i("slot",{key:"580dd1a0a999a77195279c7cc887585857080276",name:"navigation"})),i("section",{key:"f77cb25f6be2b64d7213ff7f917b5f6869880b9f","aria-labelledby":"app-name",class:"app-layout__body"},!this.hideAppBar&&i("header",{key:"06467a7005a8bccfa66bd662a28e9aea4771d27a",class:"app-layout__app-bar"},i("span",{key:"a2f2d531d1b7f304d9f3fa5159dbea8f78b45553",class:"app-layout__app-bar-mobile-menu-button"},i("slot",{key:"4e83761fc85b17c739abc1d8c7158d5cd362706f",name:"app-bar-mobile-menu-button"})),a&&i("span",{key:"1c257404a9cfd84debbd0486f8f17b2d7916839c",class:"app-layout__back-to-navigation-button"},i("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&&i("span",{key:"39d626d775997e9bab9e9ae3946084d73d715583",class:"app-layout__nav-expansion-toggle"},i("swirl-button",{key:"7e967c7d6314707a913b461271e4908ca80d70a7",hideLabel:!0,icon:"<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>",label:this.navigationOverlayLabel,onClick:this.overlayNavigation})),i("span",{key:"76e4be74a94b18c027c33140736c36c98e7024e3",class:"app-layout__custom-app-bar-back-button"},i("slot",{key:"81df9b04bc26d1fb85f8160c55cc2df72aafedfa",name:"custom-app-bar-back-button"})),i("div",{key:"955ccd31ee748b0f9bf03e573f920884a402b7f4",class:"app-layout__app-bar-content"},i("slot",{key:"16deec03db91173bf75664f2fbc1ceac7a30004f",name:"app-bar"})),i("div",{key:"bce238fc1df86c571e663419d8f3faeeffa36982",class:"app-layout__app-bar-controls"},i("slot",{key:"540b1410a2cf45d6b04b1ae7ebd8c1f92b9edeaa",name:"app-bar-controls"}))),i("div",{key:"110496d5b1001a4cfd1510c5b01e6ba108d5de17",class:"app-layout__banner"},i("slot",{key:"d899e047a077a3ea4638311913623cc6ef8d3112",name:"banner"})),i("div",{key:"137484f06a5e4fea74ab0f5febc30b327c500710",class:"app-layout__content",onScroll:this.onContentScroll,ref:a=>this.contentEl=a},i("div",{key:"3854ac4b1108ec4083c05b6d989b899e5b4bd999",class:"app-layout__content-inner"},i("slot",{key:"68d9a207834dcf01164545df8d813d817b1fcad0",name:"content"})),i("div",{key:"e7c2fd5cc7802e3d4cfa83fc54e1b58587fc05b7",class:"app-layout__bottom-banner"},i("slot",{key:"655ad74d80da4bde2d8e1c5f76e5276f8debbf67",name:"bottom-banner"}))),i("div",{key:"6fa13e005398621057950af22593851bc5bb40bb",class:"app-layout__bottom-bar"},i("slot",{key:"7f3c36cb64f027d9db9ed6f6343242fdccffc313",name:"bottom-bar"}))),i("aside",{key:"7269ec313d3bcc3cd1dec5abe8cf81b440987e8f",class:"app-layout__sidebar"},i("header",{key:"63ba307a1ee8755ed86cfdf73eda6cfe38b4b8ac",class:"app-layout__custom-sidebar-header"},i("slot",{key:"4027a4f20d4b2703422547bbbdd81221b8816c85",name:"custom-sidebar-header"})),i("header",{key:"f853e2f2fc57e27a9d14265bb4abb948c198e8ea",class:"app-layout__sidebar-header"},i("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}),i("swirl-heading",{key:"797791edbae180dd39835a407479f56b824f2733",as:"h3",class:"app-layout__sidebar-heading",headingId:"sidebar-heading",level:3,text:this.sidebarHeading})),i("div",{key:"1d1a0a76937293430f572b6c5930e010d70102fd",class:"app-layout__sidebar-content",onScroll:this.onSidebarScroll,ref:a=>this.sidebarEl=a},i("slot",{key:"dc8ff45e81cbd1be539e851d2da00042b6d3ce26",name:"sidebar"}))),i("span",{key:"e11c29160fcf21b6212d28e55a8092cc8bb36931",class:"app-layout__floating-action-button"},this.ctaLabel&&i("swirl-button",{key:"15eb5b55036b38780182689b7d11f084c9425038",hideLabel:!!this.ctaIcon,icon:this.ctaIcon,intent:"primary",label:this.ctaLabel,onClick:this.onCtaClick,variant:"floating"}),i("slot",{key:"50383a0c6b5cb438fd606f2bba6ad0184eb2a953",name:"floating-action-button"})))))}get el(){return this}static get watchers(){return{mobileView:[{watchMobileView:0}]}}static get style(){return':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}}'}},[257,"swirl-app-layout",{appName:[1,"app-name"],backToNavigationViewButtonLabel:[1,"back-to-navigation-view-button-label"],collapsibleNavigation:[4,"collapsible-navigation"],ctaIcon:[1,"cta-icon"],ctaLabel:[1,"cta-label"],hasNavigation:[1028,"has-navigation"],hideAppBar:[4,"hide-app-bar"],initialMobileView:[1,"initial-mobile-view"],navigationBackButtonLabel:[1,"navigation-back-button-label"],navigationExpansionStateStorageKey:[1,"navigation-expansion-state-storage-key"],navigationToggleLabel:[1,"navigation-toggle-label"],navigationOverlayLabel:[1,"navigation-overlay-label"],navigationLabel:[1,"navigation-label"],preventContentOverflow:[4,"prevent-content-overflow"],roundedCorners:[4,"rounded-corners"],showNavigationBackButton:[4,"show-navigation-back-button"],sidebarPositioning:[1,"sidebar-positioning"],sidebarCloseButtonLabel:[1,"sidebar-close-button-label"],sidebarHeading:[1,"sidebar-heading"],transitionStyle:[1,"transition-style"],contentScrollState:[32],hasBottomBanner:[32],hasBottomBar:[32],hasCustomAppBarBackButton:[32],hasSidebar:[32],isDesktop:[32],mobileView:[32],navScrollState:[32],navExpansionState:[32],sidebarActive:[32],sidebarClosing:[32],sidebarOpening:[32],sidebarScrollState:[32],transitioningFrom:[32],transitioningTo:[32],showSidebar:[64],hideSidebar:[64],toggleSidebar:[64],getCollapsibleNavigationState:[64],setCollapsibleNavigationState:[64],getScrollContainer:[64],changeMobileView:[64]},[[4,"click","onDocumentClick"],[0,"keydown","onKeyDown"]],{mobileView:[{watchMobileView:0}]}]),m=b,g=function(){"undefined"!=typeof customElements&&["swirl-app-layout","swirl-button","swirl-heading"].forEach((a=>{switch(a){case"swirl-app-layout":customElements.get(n(a))\|\|customElements.define(n(a),b);break;case"swirl-button":customElements.get(n(a))\|\|y();break;case"swirl-heading":customElements.get(n(a))\|\|u()}}))};export{m as SwirlAppLayout,g as defineCustomElement}
1	+ import{proxyCustomElement as a,HTMLElement as t,createEvent as o,h as i,Host as e,transformTag as p}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{D as l}from"./media-query.service.js";import{d as s,i as r,p as d}from"./utils.js";import{d as y}from"./swirl-button2.js";import{d as u}from"./swirl-heading2.js";const b=a(class extends t{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.ctaClick=o(this,"ctaClick",7),this.mobileViewChange=o(this,"mobileViewChange",7),this.navigationBackButtonClick=o(this,"navigationBackButtonClick",7),this.navigationExpansionStateChange=o(this,"navigationExpansionStateChange",7),this.sidebarToggle=o(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=s((()=>{this.updateContentScrollState()}),16),this.onNavScroll=s((()=>{this.updateNavScrollState()}),16),this.onSidebarScroll=s((()=>{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=l.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;this.sidebarOpeningTimeout&&clearTimeout(this.sidebarOpeningTimeout),this.sidebarOpening=!0;const a=r()\|\|d()?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;this.sidebarClosingTimeout&&clearTimeout(this.sidebarClosingTimeout),this.sidebarClosing=!0;const a=r()\|\|d()?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(!r()\|\|!t)return this.mobileView=a,void this.mobileViewChange.emit(this.mobileView);this.transitionTimeout&&clearTimeout(this.transitionTimeout),this.transitioningFrom=this.mobileView,this.transitioningTo=a;const o=d();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=!!this.el.querySelector('[slot="bottom-banner"]')}updateBottomBarStatus(){this.hasBottomBar=!!this.el.querySelector('[slot="bottom-bar"]')}updateNavigationStatus(){this.hasNavigation=!!this.el.querySelector('[slot="navigation"]')}updateCustomAppBarBackButtonStatus(){this.hasCustomAppBarBackButton=!!this.el.querySelector('[slot="custom-app-bar-back-button"]')}updateSidebarStatus(){this.hasSidebar=!!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);a&&this.setCollapsibleNavigationState(a)}render(){const a=("body"===this.mobileView\|\|this.transitioningTo)&&this.hasNavigation&&!this.hasCustomAppBarBackButton,t=!!this.el.querySelector('[slot="app-bar-controls"]'),o=!!this.el.querySelector('[slot="app-bar-mobile-menu-button"]'),p=!!this.el.querySelector('[slot="custom-sidebar-header"]'),l=!!this.el.querySelector('[slot="floating-action-button"]')\|\|!!this.ctaLabel,s=this.hasNavigation&&(!this.collapsibleNavigation\|\|"collapsed"!==this.navExpansionState\|\|!this.isDesktop),r=n("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":o,"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":p,"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-custom-width":!!this.sidebarWidth,"app-layout--sidebar-inline":this.hasSidebar&&!this.hasNavigation&&"overlay"!==this.sidebarPositioning,"app-layout--sidebar-opening":this.sidebarOpening,"app-layout--sidebar-scrollable":this.sidebarScrollState.scrollable,"app-layout--sidebar-scrolled-to-top":this.sidebarScrollState.scrolledToTop});return i(e,{key:"ea5e9984dfa86c576366d2ec73e8649152c14928",style:{"--swirl-app-layout-sidebar-width":this.sidebarWidth}},i("section",{key:"8480c594adca8240e1f54b80e38b1fbb7e987276","aria-labelledby":"app-name",class:r},i("div",{key:"85ad1344215084054ffa8703d68bb1de1a4cabef",class:"app-layout__grid"},i("header",{key:"d47c99f2762bcd6be5a327dbeb10a43fb4568557",class:"app-layout__header",ref:a=>this.headerEl=a},i("span",{key:"3561308f08c40d1450fba3d76d8a4ca9801b42ef",class:"app-layout__navigation-mobile-menu-button"},i("slot",{key:"7161e03c5a97a5610b71c1a84396a582c5372d3e",name:"navigation-mobile-menu-button"})),this.collapsibleNavigation&&i("span",{key:"815e76032a56f68a3a29c7209c2f00b84c4266f0",class:"app-layout__nav-overlay-toggle"},i("swirl-button",{key:"c84849add9c4f76a2f226a5c050bb0540f7df07b",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&&i("span",{key:"4f1931413fb83b0667d07e75f700abf06335230e",class:"app-layout__navigation-back-button"},i("swirl-button",{key:"8188874ac49378f4de9c49ee84f70a9b6e111e37",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.navigationBackButtonLabel,onClick:this.onNavigationBackButtonClick})),i("swirl-heading",{key:"889b1fcacbf88a72710cd36af7c54a7728df089f",as:"h1",class:"app-layout__app-name",headingId:"app-name",level:3,text:this.appName}),s&&i("span",{key:"d0d371a1e080e10dcda1d29204a117798730eee8",class:"app-layout__navigation-controls"},i("slot",{key:"3bca7780bb2bfe59471467de001f849b9b232662",name:"navigation-controls"}))),i("nav",{key:"e612f7874dc250d88f4c554c1200eb07c7f97f41","aria-label":this.navigationLabel,class:"app-layout__navigation",onScroll:this.onNavScroll,ref:a=>this.navEl=a,inert:this.isDesktop&&this.collapsibleNavigation&&"collapsed"===this.navExpansionState},i("slot",{key:"913cb8b7bc4cbc05d7fe30e5651937a5d8ac7258",name:"navigation"})),i("section",{key:"ae73f4764e10c73b404601a765f735fb0c2b3c51","aria-labelledby":"app-name",class:"app-layout__body"},!this.hideAppBar&&i("header",{key:"0179719859439f3d433486d36ad5eb87cff76e93",class:"app-layout__app-bar"},i("span",{key:"c3f902620abf9db0369184ee9dba7e61bbde8ecb",class:"app-layout__app-bar-mobile-menu-button"},i("slot",{key:"520cbff25beeacac88c63ef52f1169fc1cd82bac",name:"app-bar-mobile-menu-button"})),a&&i("span",{key:"2c237ec3f04ce5da7d571ed4aa3e69c42eeb19b2",class:"app-layout__back-to-navigation-button"},i("swirl-button",{key:"ab1cc889450248c3a2555a46558d8a8d1d3e6e69",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&&i("span",{key:"39640ad1337b38b65cb04e209298964217dc5b97",class:"app-layout__nav-expansion-toggle"},i("swirl-button",{key:"63be47f8bdefdc5335e975b8288f4252e388676a",hideLabel:!0,icon:"<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>",label:this.navigationOverlayLabel,onClick:this.overlayNavigation})),i("span",{key:"a73ca0324d442a9fd2f76f28fe422070ebfd3392",class:"app-layout__custom-app-bar-back-button"},i("slot",{key:"6b168560d179661b6ccbbaf84fde150f9445c33a",name:"custom-app-bar-back-button"})),i("div",{key:"ff9df5292be7e45fa73a6aa3fad3d160946c16e8",class:"app-layout__app-bar-content"},i("slot",{key:"f0d622141406b628d83722090b0b2a30e1210ac5",name:"app-bar"})),i("div",{key:"ae0d9fa3eeb8acad36e2fa2890a39debaf7858c1",class:"app-layout__app-bar-controls"},i("slot",{key:"7a645cda89b0e3224bed75a33b4a11949e2ccdf7",name:"app-bar-controls"}))),i("div",{key:"2ec277c97e569e907f95c5719fed9103fa2f69f2",class:"app-layout__banner"},i("slot",{key:"7c3fa21988e8c6aa5a5ce19461a9c493e22520a0",name:"banner"})),i("div",{key:"2d818bf92b9f02f6339bf04e9305b543a724fc6a",class:"app-layout__content",onScroll:this.onContentScroll,ref:a=>this.contentEl=a},i("div",{key:"42fa90a807337bdffeaea454f1d1abc0e8f26c01",class:"app-layout__content-inner"},i("slot",{key:"a4561df256b12e7893e3ee3832b75dfa15b06d5b",name:"content"})),i("div",{key:"d20801097b89fa70739fed10c35b8960fc93ff95",class:"app-layout__bottom-banner"},i("slot",{key:"99b0849ace8d3d1c128b744f96bbd4587d77fd52",name:"bottom-banner"}))),i("div",{key:"dfca52dba0807f59010d6820a18b45ad4ed43359",class:"app-layout__bottom-bar"},i("slot",{key:"1cbf5067eba3dd9cedd53debbf0c9613f2d95af1",name:"bottom-bar"}))),i("aside",{key:"b9a3cb541c078c17f55935ac703f2bd5a63d26f1",class:"app-layout__sidebar"},i("header",{key:"658023fbfd242bcfb41ca7fb1b1702f91eecc273",class:"app-layout__custom-sidebar-header"},i("slot",{key:"d1b4f31b3a65f6906737c4e5cb8d623967ff3756",name:"custom-sidebar-header"})),i("header",{key:"a0613856d435c7ab946838da48bea242f54b9076",class:"app-layout__sidebar-header"},i("swirl-button",{key:"f097dddd068842235cf9d59f6f367419b5d1fb90",class:"app-layout__sidebar-close-button",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),i("swirl-heading",{key:"582ddba3782037f96a6b76b661348e5357a5579f",as:"h3",class:"app-layout__sidebar-heading",headingId:"sidebar-heading",level:3,text:this.sidebarHeading})),i("div",{key:"fd66588b9c671f934e7a49e16c60e5c707fd38eb",class:"app-layout__sidebar-content",onScroll:this.onSidebarScroll,ref:a=>this.sidebarEl=a},i("slot",{key:"9b6f8493ce6d38cf25ff0446b90c4feba5de166c",name:"sidebar"}))),i("span",{key:"19c8eb89279ef4932cc44c60228301f20d0e1457",class:"app-layout__floating-action-button"},this.ctaLabel&&i("swirl-button",{key:"44ff78e3f1de73f50e64565e78edec285c75aab7",hideLabel:!!this.ctaIcon,icon:this.ctaIcon,intent:"primary",label:this.ctaLabel,onClick:this.onCtaClick,variant:"floating"}),i("slot",{key:"03c26b21b33b29619055763717d6c7fb3d4ac288",name:"floating-action-button"})))))}get el(){return this}static get watchers(){return{mobileView:[{watchMobileView:0}]}}static get style(){return':host{--header-height:3.5625rem;--swirl-app-layout-sidebar-width:25rem;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%, var(--swirl-app-layout-sidebar-width) );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: 768px){.app-layout--sidebar-inline.app-layout--sidebar-custom-width.app-layout--sidebar-active .app-layout__grid,.app-layout--sidebar-inline.app-layout--sidebar-custom-width.app-layout--sidebar-opening .app-layout__grid{grid-template-columns:1fr var(--swirl-app-layout-sidebar-width)}}@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:var(--swirl-app-layout-sidebar-width);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 var(--swirl-app-layout-sidebar-width);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%, var(--swirl-app-layout-sidebar-width))}.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 (min-width: 768px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-custom-width .app-layout__sidebar{width:var(--swirl-app-layout-sidebar-width)}}@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%, var(--swirl-app-layout-sidebar-width));border-left:var(--s-border-width-default) solid var(--s-border-default);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 768px){.app-layout--sidebar-positioning-overlay:not(.app-layout--has-navigation).app-layout--has-sidebar.app-layout--sidebar-custom-width .app-layout__sidebar{width:var(--swirl-app-layout-sidebar-width)}}@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 var(--swirl-app-layout-sidebar-width)}}@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 var(--swirl-app-layout-sidebar-width)}}@keyframes app-layout-sidebar-slide-out{from{overflow:hidden;grid-template-columns:25rem 1fr var(--swirl-app-layout-sidebar-width)}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 var(--swirl-app-layout-sidebar-width)}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 var(--swirl-app-layout-sidebar-width)}}@keyframes app-layout-no-nav-sidebar-slide-out{from{overflow:hidden;grid-template-columns:1fr var(--swirl-app-layout-sidebar-width)}to{overflow:hidden;grid-template-columns:1fr 0}}'}},[257,"swirl-app-layout",{appName:[1,"app-name"],backToNavigationViewButtonLabel:[1,"back-to-navigation-view-button-label"],collapsibleNavigation:[4,"collapsible-navigation"],ctaIcon:[1,"cta-icon"],ctaLabel:[1,"cta-label"],hasNavigation:[1028,"has-navigation"],hideAppBar:[4,"hide-app-bar"],initialMobileView:[1,"initial-mobile-view"],navigationBackButtonLabel:[1,"navigation-back-button-label"],navigationExpansionStateStorageKey:[1,"navigation-expansion-state-storage-key"],navigationToggleLabel:[1,"navigation-toggle-label"],navigationOverlayLabel:[1,"navigation-overlay-label"],navigationLabel:[1,"navigation-label"],preventContentOverflow:[4,"prevent-content-overflow"],roundedCorners:[4,"rounded-corners"],showNavigationBackButton:[4,"show-navigation-back-button"],sidebarPositioning:[1,"sidebar-positioning"],sidebarCloseButtonLabel:[1,"sidebar-close-button-label"],sidebarHeading:[1,"sidebar-heading"],sidebarWidth:[1,"sidebar-width"],transitionStyle:[1,"transition-style"],contentScrollState:[32],hasBottomBanner:[32],hasBottomBar:[32],hasCustomAppBarBackButton:[32],hasSidebar:[32],isDesktop:[32],mobileView:[32],navScrollState:[32],navExpansionState:[32],sidebarActive:[32],sidebarClosing:[32],sidebarOpening:[32],sidebarScrollState:[32],transitioningFrom:[32],transitioningTo:[32],showSidebar:[64],hideSidebar:[64],toggleSidebar:[64],getCollapsibleNavigationState:[64],setCollapsibleNavigationState:[64],getScrollContainer:[64],changeMobileView:[64]},[[4,"click","onDocumentClick"],[0,"keydown","onKeyDown"]],{mobileView:[{watchMobileView:0}]}]),h=b,m=function(){"undefined"!=typeof customElements&&["swirl-app-layout","swirl-button","swirl-heading"].forEach((a=>{switch(a){case"swirl-app-layout":customElements.get(p(a))\|\|customElements.define(p(a),b);break;case"swirl-button":customElements.get(p(a))\|\|y();break;case"swirl-heading":customElements.get(p(a))\|\|u()}}))};export{h as SwirlAppLayout,m as defineCustomElement}

package/dist/components/swirl-button2.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as t,HTMLElement as o,h as n,Host as i,transformTag as r}from"@stencil/core/internal/client";import{c as a}from"./index2.js";import{D as s}from"./media-query.service.js";const e=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.cursor="pointer",this.iconPosition="start",this.intent="default",this.size="m",this.textAlign="center",this.type="button",this.variant="ghost",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.updateFormAttribute(),this.mediaQueryUnsubscribe=s.subscribe((t=>{this.isDesktop=t,this.forceIconProps()}))}componentDidRender(){this.updateFormAttribute(),this.forceIconProps()}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(){if(!Boolean(this.iconEl))return;const t=this.iconEl.children[0];(t?.tagName.startsWith("SWIRL-ICON")\|\|t?.tagName.startsWith("SWIRL-EMOJI")\|\|t?.tagName.startsWith("SWIRL-SYMBOL"))&&t?.setAttribute("size",this.isDesktop?"20":"24")}getAriaLabel(t){return Boolean(this.swirlAriaLabel)?this.swirlAriaLabel:t?this.label:void 0}updateFormAttribute(){Boolean(this.href)\|\|!Boolean(this.form)?this.buttonEl?.removeAttribute("form"):this.buttonEl?.setAttribute("form",this.form)}render(){const t=this.hideLabel&&Boolean(this.icon)\|\|"floating"===this.variant&&"default"===this.intent,o=Boolean(this.href),r=this.getAriaLabel(t),s=this.icon\|\|Boolean(this.el.querySelector("[slot='icon']")),e=Boolean(this.el.querySelector("[slot='tag']")),l=Boolean(this.el.querySelector("[slot='trailing']")),b=a("button",`button--icon-position-${this.iconPosition}`,`button--intent-${this.intent}`,`button--size-${this.size}`,`button--text-align-${this.textAlign}`,`button--variant-${this.variant}`,{"button--elevated":this.elevated,"button--disabled":this.disabled,"button--has-icon":s,"button--icon-only":t,"button--pill":this.pill,"button--pressed":this.pressed});return n(i,{key:"ba6372237afb1a000b5cb0805e12e1d998ba608e",style:{pointerEvents:this.disabled?"none":""}},n(o?"a":"button",{key:"c22f997d83b7bcb16e176addf039c6e583f88343","aria-controls":this.swirlAriaControls,"aria-current":this.swirlAriaCurrent,"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled&&!o?"true":void 0,"aria-expanded":this.swirlAriaExpanded,"aria-haspopup":this.swirlAriaHaspopup,"aria-label":r,"aria-pressed":this.pressed?"true":void 0,class:b,disabled:o?void 0:this.disabled,download:o?void 0:this.download,form:o?void 0:this.form,href:this.href,name:o?void 0:this.name,ref:t=>this.buttonEl=t,target:o?this.target:void 0,type:o?void 0:this.type,value:o?void 0:this.value,style:{cursor:this.disabled\|\|"pointer"===this.cursor?void 0:this.cursor,fontSize:this.inheritFontSize?"inherit":void 0,lineHeight:this.inheritFontSize?"inherit":void 0}},Boolean(this.icon)&&n("span",{key:"eacadeb82d465ef4ed35ed57cbb332e6d36e21cb",class:"button__icon",innerHTML:this.icon,ref:t=>this.iconEl=t}),!Boolean(this.icon)&&n("span",{key:"affe93319cadf0fbc9438f1dd6f4df19a592d9e4",class:"button__icon",ref:t=>this.iconEl=t},n("slot",{key:"2251909072a2c524cb15016a0c63848c4e0640cf",name:"icon"})),!t&&n("span",{key:"fbfd536b6a466286e138385e6374e4553543f5a2",class:"button__label"},this.label),e&&n("span",{key:"707dc78718fdc32cb802992f1705d25e72ba4162",class:"button__tag"},n("slot",{key:"bd3d1c54238decfcdb54c28859759efae62df996",name:"tag"})),l&&n("div",{key:"aea035d7b953e7e5e471859cf0a7e73e26f0a2ad",class:"button__trailing-slot"},n("slot",{key:"9c4278315c6f0d0ac166da345ccadd56d4b77ecc",name:"trailing"}))))}get el(){return this}static get style(){return".sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h .sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8);transition:box-shadow 0.3s}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered);--swirl-tag-background-default:var(--s-state-pressed)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button--elevated.sc-swirl-button{box-shadow:var(--s-shadow-level-2)}.button.sc-swirl-button:disabled,.button.button--disabled.sc-swirl-button{color:var(--s-text-disabled);cursor:default}.button.sc-swirl-button:disabled:where(:not(.button--variant-ghost)),.button.button--disabled.sc-swirl-button:where(:not(.button--variant-ghost)){background-color:var(--swirl-ghost-button-background-disabled)}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--swirl-flat-button-background-default);--swirl-tag-background-default:var(--s-state-pressed)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled,.button--variant-flat.button--disabled.sc-swirl-button{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-status)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-flat.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-flat.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button{color:var(--s-text-subdued);outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) -1)}.button--variant-outline.sc-swirl-button:disabled,.button--variant-outline.button--disabled.sc-swirl-button{outline-color:var(--s-border-default)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical);outline-color:var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)),.button--variant-outline.button--pressed.sc-swirl-button{color:var(--s-text-highlight);outline-color:var(--s-border-highlight)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button,.button--variant-outline.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-outline.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-outline.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-default)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--swirl-plain-button-text-color-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-hovered);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-hovered)}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-pressed);background-color:transparent}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-pressed)}.button--variant-plain.sc-swirl-button:disabled,.button--variant-plain.button--disabled.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled)}.button--variant-plain.button--icon-only.sc-swirl-button{padding:0}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.button--intent-primary.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-swirl-button .button__icon.sc-swirl-button{margin-left:0;color:var(--swirl-plain-button-text-color-default)}.button--variant-plain.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-plain.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.6)}.button--variant-on-image.sc-swirl-button:hover{background:rgba(0, 0, 0, 0.5)}.button--variant-on-image.sc-swirl-button:active{background:rgba(0, 0, 0, 0.4)}.button--variant-on-image.sc-swirl-button:disabled,.button--variant-on-image.button--disabled.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-on-image.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-on-image.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default)}.button--variant-floating.sc-swirl-button:not(.button--elevated){box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-swirl-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-state-hovered)}.button--variant-floating.sc-swirl-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-state-pressed)}.button--variant-floating.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid var(--s-border-translucent-outline);outline-offset:calc(var(--s-border-width-default) * -1);background:var(--s-translucent-medium-default);box-shadow:var(--s-shadow-level-2);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.button--variant-translucent.sc-swirl-button:hover{background:var(--s-translucent-medium-hovered)}.button--variant-translucent.sc-swirl-button:active{background:var(--s-translucent-medium-pressed)}.button--variant-translucent.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button:disabled,.button--variant-translucent.button--disabled.sc-swirl-button{color:var(--s-text-subdued);background:var(--s-translucent-medium-default)}.button--variant-translucent.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-translucent.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-default)}.button--icon-position-end.sc-swirl-button .button__icon.sc-swirl-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--pill.sc-swirl-button{border-radius:1.25rem}.button--pill.button--size-l.sc-swirl-button{border-radius:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.button--size-l.sc-swirl-button{border-radius:1.375rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.sc-swirl-button{border-radius:1.125rem}}.button--icon-only.sc-swirl-button{padding:var(--s-space-8)}.button--icon-only.button--pill.sc-swirl-button{border-top-left-radius:var(--swirl-icon-button-border-top-left-radius);border-top-right-radius:var(--swirl-icon-button-border-top-right-radius);border-bottom-right-radius:var( --swirl-icon-button-border-bottom-right-radius );border-bottom-left-radius:var( --swirl-icon-button-border-bottom-left-radius )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__tag.sc-swirl-button{padding-left:var(--s-space-8);order:3}.button__trailing-slot.sc-swirl-button{order:4}.button__icon.sc-swirl-button{display:none;width:1.5rem;height:1.5rem;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}"}},[262,"swirl-button",{cursor:[1],disabled:[4],download:[1],elevated:[4],form:[1],hideLabel:[4,"hide-label"],href:[1],icon:[1],iconPosition:[1,"icon-position"],intent:[1],inheritFontSize:[4,"inherit-font-size"],label:[1],name:[1],pill:[4],pressed:[4],size:[1],swirlAriaControls:[1,"swirl-aria-controls"],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaDescribedby:[1,"swirl-aria-describedby"],swirlAriaExpanded:[1,"swirl-aria-expanded"],swirlAriaHaspopup:[1,"swirl-aria-haspopup"],swirlAriaLabel:[1,"swirl-aria-label"],target:[1],textAlign:[1,"text-align"],type:[1],value:[1],variant:[1]}]);function l(){"undefined"!=typeof customElements&&["swirl-button"].forEach((t=>{"swirl-button"===t&&(customElements.get(r(t))\|\|customElements.define(r(t),e))}))}export{e as S,l as d}
1	+ import{proxyCustomElement as t,HTMLElement as o,h as n,Host as i,transformTag as r}from"@stencil/core/internal/client";import{c as a}from"./index2.js";import{D as s}from"./media-query.service.js";const e=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.cursor="pointer",this.iconPosition="start",this.intent="default",this.size="m",this.textAlign="center",this.type="button",this.variant="ghost",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.updateFormAttribute(),this.mediaQueryUnsubscribe=s.subscribe((t=>{this.isDesktop=t,this.forceIconProps()}))}componentDidRender(){this.updateFormAttribute(),this.forceIconProps()}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(){if(!Boolean(this.iconEl))return;const t=this.iconEl.children[0];(t?.tagName.startsWith("SWIRL-ICON")\|\|t?.tagName.startsWith("SWIRL-EMOJI")\|\|t?.tagName.startsWith("SWIRL-SYMBOL"))&&t?.setAttribute("size",this.isDesktop?"20":"24")}getAriaLabel(t){return Boolean(this.swirlAriaLabel)?this.swirlAriaLabel:t?this.label:void 0}updateFormAttribute(){Boolean(this.href)\|\|!Boolean(this.form)?this.buttonEl?.removeAttribute("form"):this.buttonEl?.setAttribute("form",this.form)}render(){const t=this.hideLabel&&Boolean(this.icon)\|\|"floating"===this.variant&&"default"===this.intent,o=Boolean(this.href),r=this.getAriaLabel(t),s=this.icon\|\|Boolean(this.el.querySelector("[slot='icon']")),e=Boolean(this.el.querySelector("[slot='tag']")),b=Boolean(this.el.querySelector("[slot='trailing']")),l=a("button",`button--icon-position-${this.iconPosition}`,`button--intent-${this.intent}`,`button--size-${this.size}`,`button--text-align-${this.textAlign}`,`button--variant-${this.variant}`,{"button--elevated":this.elevated,"button--disabled":this.disabled,"button--has-icon":s,"button--icon-only":t,"button--pill":this.pill,"button--pressed":this.pressed});return n(i,{key:"23af0e8e19b77a5029052dc40dccf50ebb65333f",style:{pointerEvents:this.disabled?"none":""}},n(o?"a":"button",{key:"d0b2fb060f9bfc94405c2975cacbcea51ca36a3d","aria-controls":this.swirlAriaControls,"aria-current":this.swirlAriaCurrent,"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled&&!o?"true":void 0,"aria-expanded":this.swirlAriaExpanded,"aria-haspopup":this.swirlAriaHaspopup,"aria-label":r,"aria-pressed":this.pressed?"true":void 0,class:l,disabled:o?void 0:this.disabled,download:o?void 0:this.download,form:o?void 0:this.form,href:this.href,name:o?void 0:this.name,ref:t=>this.buttonEl=t,target:o?this.target:void 0,type:o?void 0:this.type,value:o?void 0:this.value,style:{cursor:this.disabled\|\|"pointer"===this.cursor?void 0:this.cursor,fontSize:this.inheritFontSize?"inherit":void 0,lineHeight:this.inheritFontSize?"inherit":void 0}},Boolean(this.icon)&&n("span",{key:"a4196f5355f8e0f69c13cae46968ef4a1bb163e3",class:"button__icon",innerHTML:this.icon,ref:t=>this.iconEl=t}),!Boolean(this.icon)&&n("span",{key:"2aed20db5403a6443399b4d9fea887f6f5871b05",class:"button__icon",ref:t=>this.iconEl=t},n("slot",{key:"899c93e098532d74c7c8a9a3137cdc6a949d20e9",name:"icon"})),!t&&n("span",{key:"9d65045a5cdee4a2e68bfde5c22b6baab468bd89",class:"button__label"},this.label),e&&n("span",{key:"cf77726d3c75a76380db368070d5f77f05327cf3",class:"button__tag"},n("slot",{key:"5d86b0fecca7e9215fd59a13e37f636d6d030ba6",name:"tag"})),b&&n("div",{key:"6cc13ae1748655189f7e9d968171e65f59df5a0a",class:"button__trailing-slot"},n("slot",{key:"705986f1edb1fd0b7aeb8ec0e83b2d2c77c33bf0",name:"trailing"}))))}get el(){return this}static get style(){return".sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h .sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8);transition:box-shadow 0.3s}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered);--swirl-tag-background-default:var(--s-state-pressed)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button--elevated.sc-swirl-button{box-shadow:var(--s-shadow-level-2)}.button.sc-swirl-button:disabled,.button.button--disabled.sc-swirl-button{color:var(--s-text-disabled);cursor:default}.button.sc-swirl-button:disabled:where(:not(.button--variant-ghost)),.button.button--disabled.sc-swirl-button:where(:not(.button--variant-ghost)){background-color:var(--swirl-ghost-button-background-disabled)}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--swirl-flat-button-background-default);--swirl-tag-background-default:var(--s-state-pressed)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled,.button--variant-flat.button--disabled.sc-swirl-button{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-status)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-flat.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-flat.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button{color:var(--s-text-subdued);outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) -1)}.button--variant-outline.sc-swirl-button:disabled,.button--variant-outline.button--disabled.sc-swirl-button{outline-color:var(--s-border-default)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical);outline-color:var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)),.button--variant-outline.button--pressed.sc-swirl-button{color:var(--s-text-highlight);outline-color:var(--s-border-highlight)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button,.button--variant-outline.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-outline.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-outline.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-default)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--swirl-plain-button-text-color-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-hovered);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-hovered)}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-pressed);background-color:transparent}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-pressed)}.button--variant-plain.sc-swirl-button:disabled,.button--variant-plain.button--disabled.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled)}.button--variant-plain.button--icon-only.sc-swirl-button{padding:0}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.button--intent-primary.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-swirl-button .button__icon.sc-swirl-button{margin-left:0;color:var(--swirl-plain-button-text-color-default)}.button--variant-plain.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-plain.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.6)}.button--variant-on-image.sc-swirl-button:hover{background:rgba(0, 0, 0, 0.5)}.button--variant-on-image.sc-swirl-button:active{background:rgba(0, 0, 0, 0.4)}.button--variant-on-image.sc-swirl-button:disabled,.button--variant-on-image.button--disabled.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-on-image.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-on-image.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default)}.button--variant-floating.sc-swirl-button:not(.button--elevated){box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-swirl-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-state-hovered)}.button--variant-floating.sc-swirl-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-state-pressed)}.button--variant-floating.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid var(--s-border-translucent-outline);outline-offset:calc(var(--s-border-width-default) * -1);background:var(--s-translucent-medium-default);box-shadow:var(--s-shadow-level-2);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.button--variant-translucent.sc-swirl-button:hover{background:var(--s-translucent-medium-hovered)}.button--variant-translucent.sc-swirl-button:active{background:var(--s-translucent-medium-pressed)}.button--variant-translucent.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button:disabled,.button--variant-translucent.button--disabled.sc-swirl-button{color:var(--s-text-subdued);background:var(--s-translucent-medium-default)}.button--variant-translucent.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-translucent.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-default)}.button--icon-position-end.sc-swirl-button .button__icon.sc-swirl-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--pill.sc-swirl-button{border-radius:1.25rem}.button--pill.button--size-l.sc-swirl-button{border-radius:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.button--size-l.sc-swirl-button{border-radius:1.375rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.sc-swirl-button{border-radius:1.125rem}}.button--icon-only.sc-swirl-button{padding:var(--s-space-8)}.button--icon-only.button--pill.sc-swirl-button{border-top-left-radius:var(--swirl-icon-button-border-top-left-radius);border-top-right-radius:var(--swirl-icon-button-border-top-right-radius);border-bottom-right-radius:var( --swirl-icon-button-border-bottom-right-radius );border-bottom-left-radius:var( --swirl-icon-button-border-bottom-left-radius )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__tag.sc-swirl-button{padding-left:var(--s-space-8);order:3}.button__trailing-slot.sc-swirl-button{order:4}.button__icon.sc-swirl-button{display:none;width:1.5rem;height:1.5rem;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}"}},[262,"swirl-button",{cursor:[1],disabled:[4],download:[1],elevated:[4],form:[1],hideLabel:[4,"hide-label"],href:[1],icon:[1],iconPosition:[1,"icon-position"],intent:[1],inheritFontSize:[4,"inherit-font-size"],label:[1],name:[1],pill:[4],pressed:[4],size:[1],swirlAriaControls:[1,"swirl-aria-controls"],swirlAriaCurrent:[1,"swirl-aria-current"],swirlAriaDescribedby:[1,"swirl-aria-describedby"],swirlAriaExpanded:[1,"swirl-aria-expanded"],swirlAriaHaspopup:[1,"swirl-aria-haspopup"],swirlAriaLabel:[1,"swirl-aria-label"],target:[1],textAlign:[1,"text-align"],type:[1],value:[1],variant:[1]}]);function b(){"undefined"!=typeof customElements&&["swirl-button"].forEach((t=>{"swirl-button"===t&&(customElements.get(r(t))\|\|customElements.define(r(t),e))}))}export{e as S,b as d}

package/dist/components/swirl-carousel-slide.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as s,h as t,Host as i,transformTag as o}from"@stencil/core/internal/client";import{c as l}from"./index2.js";const a=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.width="15.5rem"}render(){const e=l("carousel-slide",{"carousel-slide--has-min-height":!!this.minHeight});return t(i,{key:"~~75b679b553d593388edbc6329be661d567992297~~","aria-roledescription":"slide","aria-label":this.label,class:e,role:"group",style:{aspectRatio:this.aspectRatio,flexBasis:this.width,minHeight:this.minHeight},tabIndex:0},t("slot",{key:"~~aabaaae69d01ceb3a7a9e929f77c3a7de2d63d0e~~"}))}static get style(){return":host{display:block;min-width:0}:host(.carousel-slide--has-min-height) ::slotted(){height:100%}:host {box-sizing:border-box}:host ::slotted(*){width:100%;min-height:100%}"}},[257,"swirl-carousel-slide",{aspectRatio:[1,"aspect-ratio"],label:[1],minHeight:[1,"min-height"],width:[1]}]),r=a,c=function(){"undefined"!=typeof customElements&&["swirl-carousel-slide"].forEach((e=>{"swirl-carousel-slide"===e&&(customElements.get(o(e))\|\|customElements.define(o(e),a))}))};export{r as SwirlCarouselSlide,c as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as s,h as t,Host as i,transformTag as o}from"@stencil/core/internal/client";import{c as l}from"./index2.js";const a=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.width="15.5rem"}render(){const e=l("carousel-slide",{"carousel-slide--has-min-height":!!this.minHeight});return t(i,{key:"3dee76aae503080b212ab304b1b2d4bc11c3fc0c","aria-roledescription":"slide","aria-label":this.label,class:e,role:"group",style:{aspectRatio:this.aspectRatio,flexBasis:this.width,minHeight:this.minHeight},tabIndex:0},t("slot",{key:"18395f1c057a4b8adfea8f96599fccdaeade58ab"}))}static get style(){return":host{display:block;min-width:0}:host(.carousel-slide--has-min-height) ::slotted(){height:100%}:host {box-sizing:border-box}:host ::slotted(*){width:100%;min-height:100%}"}},[257,"swirl-carousel-slide",{aspectRatio:[1,"aspect-ratio"],label:[1],minHeight:[1,"min-height"],width:[1]}]),r=a,c=function(){"undefined"!=typeof customElements&&["swirl-carousel-slide"].forEach((e=>{"swirl-carousel-slide"===e&&(customElements.get(o(e))\|\|customElements.define(o(e),a))}))};export{r as SwirlCarouselSlide,c as defineCustomElement}

package/dist/components/swirl-color-input.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as t,HTMLElement as e,createEvent as r,h as s,Host as i,transformTag as o}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{d as a}from"./swirl-box2.js";import{d as l}from"./swirl-popover2.js";import{d as c}from"./swirl-popover-trigger2.js";import{v as h}from"./v4.js";const d=(t,e=0,r=1)=>t>r?r:t<e?e:t,u=(t,e=0,r=Math.pow(10,e))=>Math.round(rt)/r,p=t=>("#"===t[0]&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?u(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:8===t.length?u(parseInt(t.substring(6,8),16)/255,2):1}),b=t=>{const{h:e,s:r,l:s}=(({h:t,s:e,v:r,a:s})=>{const i=(200-e)r/100;return{h:u(t),s:u(i>0&&i<200?er/100/(i<=100?i:200-i)100:0),l:u(i/2),a:u(s,2)}})(t);return`hsl(${e}, ${r}%, ${s}%)`},m=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},f=(t,e)=>{if(t===e)return!0;for(const r in t)if(t[r]!==e[r])return!1;return!0},g={},v=t=>{let e=g[t];return e\|\|(e=document.createElement("template"),e.innerHTML=t,g[t]=e),e},w=(t,e,r)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:r}))};let x=!1;const k=t=>"touches"in t,y=(t,e)=>{const r=k(e)?e.touches[0]:e,s=t.el.getBoundingClientRect();w(t.el,"move",t.getMove({x:d((r.pageX-(s.left+window.pageXOffset))/s.width),y:d((r.pageY-(s.top+window.pageYOffset))/s.height)}))};class _{constructor(t,e,r,s){const i=v(`<div role="slider" tabindex="0" part="${e}" ${r}><div part="${e}-pointer"></div></div>`);t.appendChild(i.content.cloneNode(!0));const o=t.querySelector(`[part=${e}]`);o.addEventListener("mousedown",this),o.addEventListener("touchstart",this),o.addEventListener("keydown",this),this.el=o,this.xy=s,this.nodes=[o.firstChild,o]}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(x?"touchmove":"mousemove",this),e(x?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(x&&!k(t)\|\|(x\|\|(x=k(t)),0)))(t)\|\|!x&&0!=t.button)return;this.el.focus(),y(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),y(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const r=e.keyCode;r>40\|\|t.xy&&r<37\|\|r<33\|\|(e.preventDefault(),w(t.el,"move",t.getMove({x:39===r?.01:37===r?-.01:34===r?.05:33===r?-.05:35===r?1:36===r?-1:0,y:40===r?.01:38===r?-.01:0},!0)))})(this,t)}}style(t){t.forEach(((t,e)=>{for(const r in t)this.nodes[e].style.setProperty(r,t[r])}))}}class E extends _{constructor(t){super(t,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:t}){this.h=t,this.style([{left:t/360100+"%",color:b({h:t,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",""+u(t))}getMove(t,e){return{h:e?d(this.h+360t.x,0,360):360t.x}}}class $ extends _{constructor(t){super(t,"saturation",'aria-label="Color"',!0)}update(t){this.hsva=t,this.style([{top:100-t.v+"%",left:t.s+"%",color:b(t)},{"background-color":b({h:t.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${u(t.s)}%, Brightness ${u(t.v)}%`)}getMove(t,e){return{s:e?d(this.hsva.s+100t.x,0,100):100t.x,v:e?d(this.hsva.v-100t.y,0,100):Math.round(100-100t.y)}}}const I=Symbol("same"),S=Symbol("color"),C=Symbol("hsva"),M=Symbol("update"),z=Symbol("parts"),B=Symbol("css"),L=Symbol("sliders");class j extends HTMLElement{static get observedAttributes(){return["color"]}get[B](){return[':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',"[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}","[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}"]}get[L](){return[$,E]}get color(){return this[S]}set color(t){if(!this[I](t)){const e=this.colorModel.toHsva(t);this[M](e),this[S]=t}}constructor(){super();const t=v(`<style>${this[B].join("")}</style>`),e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),e.addEventListener("move",this),this[z]=this[L].map((t=>new t(e)))}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color\|\|(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,r){const s=this.colorModel.fromAttr(r);this[I](s)\|\|(this.color=s)}handleEvent(t){const e=this[C],r={...e,...t.detail};let s;this[M](r),f(r,e)\|\|this[I](s=this.colorModel.fromHsva(r))\|\|(this[S]=s,w(this,"color-changed",{value:s}))}[I](t){return this.color&&this.colorModel.equal(t,this.color)}[M](t){this[C]=t,this[z].forEach((e=>e.update(t)))}}const H={defaultColor:"#000",toHsva:t=>(({r:t,g:e,b:r,a:s})=>{const i=Math.max(t,e,r),o=i-Math.min(t,e,r),n=o?i===t?(e-r)/o:i===e?2+(r-t)/o:4+(t-e)/o:0;return{h:u(60(n<0?n+6:n)),s:u(i?o/i100:0),v:u(i/255100),a:s}})(p(t)),fromHsva:({h:t,s:e,v:r})=>(t=>(({r:t,g:e,b:r,a:s})=>{const i=s<1?m(u(255s)):"";return"#"+m(t)+m(e)+m(r)+i})((({h:t,s:e,v:r,a:s})=>{e/=100,r/=100;const i=Math.floor(t=t/3606),o=r(1-e),n=r(1-(t-i)e),a=r(1-(1-t+i)e),l=i%6;return{r:u(255[r,n,o,o,a,r][l]),g:u(255[a,r,r,n,o,o][l]),b:u(255[o,o,a,r,r,n][l]),a:u(s,2)}})(t)))({h:t,s:e,v:r,a:1}),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()\|\|f(p(t),p(e)),fromAttr:t=>t};class A extends j{get colorModel(){return H}}customElements.define("hex-color-picker",class extends A{});const F=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.inputBlur=r(this,"inputBlur",7),this.inputFocus=r(this,"inputFocus",7),this.valueChange=r(this,"valueChange",7),this.pickerButtonLabel="Open color picker",this.pickerLabel="Color picker",this.pickerId="color-picker-"+h(),this.onPickerChange=t=>{this.value=t.detail.value},this.onChange=t=>{this.value=t.target.value},this.onBlur=t=>{this.inputBlur.emit(t)},this.onFocus=t=>{this.inputFocus.emit(t),this.handleAutoSelect(t)},this.onInput=t=>{this.onChange(t)}}componentDidLoad(){this.autoFocus&&setTimeout((()=>{this.inputEl.focus()})),this.picker.addEventListener("color-changed",this.onPickerChange)}disconnectedCallback(){this.picker?.removeEventListener("color-changed",this.onPickerChange)}watchValue(t,e){t!==e&&this.valueChange.emit(t)}handleAutoSelect(t){this.autoSelect&&t.target.select()}render(){const t=!0===this.invalid\|\|!1===this.invalid?this.invalid+"":void 0,e=n("color-input",{"color-input--inline":this.inline});return s(i,{key:"7fb72a7d241b4371a727c8028a3e55325f133732"},s("div",{key:"77b6807ed3d48dc017aea25e6fd33b88f8d58e20",class:e},s("input",{key:"e0f4baaaaf1399b7b8d9a02f7f7fa6f37d9b0427","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"color-input__input",disabled:this.disabled,maxLength:7,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,spellcheck:"false",type:"text",value:this.value,readonly:this.readonly}),s("swirl-popover-trigger",{key:"51b7b183c7d2e5dbd07ef0810b3d94b474e51fa9",swirlPopover:this.pickerId},s("button",{key:"3a15ab5f469b4498e56596195849a7101eaaa4d1",disabled:this.readonly,"aria-label":this.pickerButtonLabel,class:"color-input__preview-button",style:{backgroundColor:this.disabled?"var(--s-border-subdued)":this.value},type:"button"})),s("swirl-popover",{key:"fed520dfbe8789e62136bee0914c99c697201239",animation:"scale-in-y",id:this.pickerId,label:this.pickerLabel,placement:"bottom-end"},s("swirl-box",{key:"a77e5a8205fdfd16b1f5e7792e35d49fd5a6987d",centerInline:!0,paddingBlockEnd:"8",paddingBlockStart:"8",paddingInlineEnd:"16",paddingInlineStart:"16"},s("hex-color-picker",{key:"23b7426ee1d4a9bccf311ca46621c09d779eeee4",color:this.value,ref:t=>this.picker=t})))))}static get watchers(){return{value:[{watchValue:0}]}}static get style(){return".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-input-h *.sc-swirl-color-input{box-sizing:border-box}.color-input.sc-swirl-color-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.color-input--inline.sc-swirl-color-input .color-input__preview-button.sc-swirl-color-input{width:1.5rem;height:1.5rem;margin-top:-0.125rem;margin-right:-0.25rem;margin-bottom:-0.125rem}.color-input__input.sc-swirl-color-input{display:inline-flex;width:100%;margin:0;padding:0;flex-grow:1;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.color-input__input.sc-swirl-color-input:focus{outline:none}.color-input__input.sc-swirl-color-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.color-input__input.sc-swirl-color-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.color-input__preview-button.sc-swirl-color-input{width:2.75rem;height:2.75rem;margin-top:-1.25rem;flex-shrink:0;border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-s);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}"}},[2,"swirl-color-input",{autoFocus:[4,"auto-focus"],autoSelect:[4,"auto-select"],disabled:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],inline:[4],invalid:[4],pickerButtonLabel:[1,"picker-button-label"],pickerLabel:[1,"picker-label"],placeholder:[1],required:[4],value:[1537],readonly:[4]},void 0,{value:[{watchValue:0}]}]),q=F,T=function(){"undefined"!=typeof customElements&&["swirl-color-input","swirl-box","swirl-popover","swirl-popover-trigger"].forEach((t=>{switch(t){case"swirl-color-input":customElements.get(o(t))\|\|customElements.define(o(t),F);break;case"swirl-box":customElements.get(o(t))\|\|a();break;case"swirl-popover":customElements.get(o(t))\|\|l();break;case"swirl-popover-trigger":customElements.get(o(t))\|\|c()}}))};export{q as SwirlColorInput,T as defineCustomElement}
1	+ import{proxyCustomElement as t,HTMLElement as e,createEvent as r,h as s,Host as i,transformTag as o}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{d as a}from"./swirl-box2.js";import{d as l}from"./swirl-popover2.js";import{d as c}from"./swirl-popover-trigger2.js";import{v as h}from"./v4.js";const d=(t,e=0,r=1)=>t>r?r:t<e?e:t,u=(t,e=0,r=Math.pow(10,e))=>Math.round(rt)/r,p=t=>("#"===t[0]&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?u(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:8===t.length?u(parseInt(t.substring(6,8),16)/255,2):1}),b=t=>{const{h:e,s:r,l:s}=(({h:t,s:e,v:r,a:s})=>{const i=(200-e)r/100;return{h:u(t),s:u(i>0&&i<200?er/100/(i<=100?i:200-i)100:0),l:u(i/2),a:u(s,2)}})(t);return`hsl(${e}, ${r}%, ${s}%)`},m=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},f=(t,e)=>{if(t===e)return!0;for(const r in t)if(t[r]!==e[r])return!1;return!0},g={},v=t=>{let e=g[t];return e\|\|(e=document.createElement("template"),e.innerHTML=t,g[t]=e),e},w=(t,e,r)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:r}))};let x=!1;const k=t=>"touches"in t,y=(t,e)=>{const r=k(e)?e.touches[0]:e,s=t.el.getBoundingClientRect();w(t.el,"move",t.getMove({x:d((r.pageX-(s.left+window.pageXOffset))/s.width),y:d((r.pageY-(s.top+window.pageYOffset))/s.height)}))};class _{constructor(t,e,r,s){const i=v(`<div role="slider" tabindex="0" part="${e}" ${r}><div part="${e}-pointer"></div></div>`);t.appendChild(i.content.cloneNode(!0));const o=t.querySelector(`[part=${e}]`);o.addEventListener("mousedown",this),o.addEventListener("touchstart",this),o.addEventListener("keydown",this),this.el=o,this.xy=s,this.nodes=[o.firstChild,o]}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(x?"touchmove":"mousemove",this),e(x?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(x&&!k(t)\|\|(x\|\|(x=k(t)),0)))(t)\|\|!x&&0!=t.button)return;this.el.focus(),y(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),y(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const r=e.keyCode;r>40\|\|t.xy&&r<37\|\|r<33\|\|(e.preventDefault(),w(t.el,"move",t.getMove({x:39===r?.01:37===r?-.01:34===r?.05:33===r?-.05:35===r?1:36===r?-1:0,y:40===r?.01:38===r?-.01:0},!0)))})(this,t)}}style(t){t.forEach(((t,e)=>{for(const r in t)this.nodes[e].style.setProperty(r,t[r])}))}}class E extends _{constructor(t){super(t,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:t}){this.h=t,this.style([{left:t/360100+"%",color:b({h:t,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",""+u(t))}getMove(t,e){return{h:e?d(this.h+360t.x,0,360):360t.x}}}class $ extends _{constructor(t){super(t,"saturation",'aria-label="Color"',!0)}update(t){this.hsva=t,this.style([{top:100-t.v+"%",left:t.s+"%",color:b(t)},{"background-color":b({h:t.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${u(t.s)}%, Brightness ${u(t.v)}%`)}getMove(t,e){return{s:e?d(this.hsva.s+100t.x,0,100):100t.x,v:e?d(this.hsva.v-100t.y,0,100):Math.round(100-100t.y)}}}const I=Symbol("same"),S=Symbol("color"),C=Symbol("hsva"),M=Symbol("update"),z=Symbol("parts"),B=Symbol("css"),L=Symbol("sliders");class j extends HTMLElement{static get observedAttributes(){return["color"]}get[B](){return[':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',"[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}","[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}"]}get[L](){return[$,E]}get color(){return this[S]}set color(t){if(!this[I](t)){const e=this.colorModel.toHsva(t);this[M](e),this[S]=t}}constructor(){super();const t=v(`<style>${this[B].join("")}</style>`),e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),e.addEventListener("move",this),this[z]=this[L].map((t=>new t(e)))}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color\|\|(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,r){const s=this.colorModel.fromAttr(r);this[I](s)\|\|(this.color=s)}handleEvent(t){const e=this[C],r={...e,...t.detail};let s;this[M](r),f(r,e)\|\|this[I](s=this.colorModel.fromHsva(r))\|\|(this[S]=s,w(this,"color-changed",{value:s}))}[I](t){return this.color&&this.colorModel.equal(t,this.color)}[M](t){this[C]=t,this[z].forEach((e=>e.update(t)))}}const H={defaultColor:"#000",toHsva:t=>(({r:t,g:e,b:r,a:s})=>{const i=Math.max(t,e,r),o=i-Math.min(t,e,r),n=o?i===t?(e-r)/o:i===e?2+(r-t)/o:4+(t-e)/o:0;return{h:u(60(n<0?n+6:n)),s:u(i?o/i100:0),v:u(i/255100),a:s}})(p(t)),fromHsva:({h:t,s:e,v:r})=>(t=>(({r:t,g:e,b:r,a:s})=>{const i=s<1?m(u(255s)):"";return"#"+m(t)+m(e)+m(r)+i})((({h:t,s:e,v:r,a:s})=>{e/=100,r/=100;const i=Math.floor(t=t/3606),o=r(1-e),n=r(1-(t-i)e),a=r(1-(1-t+i)e),l=i%6;return{r:u(255[r,n,o,o,a,r][l]),g:u(255[a,r,r,n,o,o][l]),b:u(255[o,o,a,r,r,n][l]),a:u(s,2)}})(t)))({h:t,s:e,v:r,a:1}),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()\|\|f(p(t),p(e)),fromAttr:t=>t};class A extends j{get colorModel(){return H}}customElements.define("hex-color-picker",class extends A{});const F=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.inputBlur=r(this,"inputBlur",7),this.inputFocus=r(this,"inputFocus",7),this.valueChange=r(this,"valueChange",7),this.pickerButtonLabel="Open color picker",this.pickerLabel="Color picker",this.pickerId="color-picker-"+h(),this.onPickerChange=t=>{this.value=t.detail.value},this.onChange=t=>{this.value=t.target.value},this.onBlur=t=>{this.inputBlur.emit(t)},this.onFocus=t=>{this.inputFocus.emit(t),this.handleAutoSelect(t)},this.onInput=t=>{this.onChange(t)}}componentDidLoad(){this.autoFocus&&setTimeout((()=>{this.inputEl.focus()})),this.picker.addEventListener("color-changed",this.onPickerChange)}disconnectedCallback(){this.picker?.removeEventListener("color-changed",this.onPickerChange)}watchValue(t,e){t!==e&&this.valueChange.emit(t)}handleAutoSelect(t){this.autoSelect&&t.target.select()}render(){const t=!0===this.invalid\|\|!1===this.invalid?this.invalid+"":void 0,e=n("color-input",{"color-input--inline":this.inline});return s(i,{key:"8faa0ba1fdf6d55cd5e9ff8d1cb42738d586a0eb"},s("div",{key:"fbc9200a7318669ace362f25510124ced61b418b",class:e},s("input",{key:"7837f8b509251caf79d46a6341cb0e43772a246b","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"color-input__input",disabled:this.disabled,maxLength:7,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,spellcheck:"false",type:"text",value:this.value,readonly:this.readonly}),s("swirl-popover-trigger",{key:"256e94f88ee8b0ce91d3c22bd5236ab7aa2be07e",swirlPopover:this.pickerId},s("button",{key:"1b0b3b76331731d3c1af0d73ccb6dde06326184b",disabled:this.readonly,"aria-label":this.pickerButtonLabel,class:"color-input__preview-button",style:{backgroundColor:this.disabled?"var(--s-border-subdued)":this.value},type:"button"})),s("swirl-popover",{key:"d93b43a8b6d680d7d52743dde653a8333d67d514",animation:"scale-in-y",id:this.pickerId,label:this.pickerLabel,placement:"bottom-end"},s("swirl-box",{key:"3189ed30ad815e64b265e1f3c3b4464e5799b7ca",centerInline:!0,paddingBlockEnd:"8",paddingBlockStart:"8",paddingInlineEnd:"16",paddingInlineStart:"16"},s("hex-color-picker",{key:"e2cd1e63d998d906b824c5d0c8e4a6eaedfe23f3",color:this.value,ref:t=>this.picker=t})))))}static get watchers(){return{value:[{watchValue:0}]}}static get style(){return".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-input-h *.sc-swirl-color-input{box-sizing:border-box}.color-input.sc-swirl-color-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.color-input--inline.sc-swirl-color-input .color-input__preview-button.sc-swirl-color-input{width:1.5rem;height:1.5rem;margin-top:-0.125rem;margin-right:-0.25rem;margin-bottom:-0.125rem}.color-input__input.sc-swirl-color-input{display:inline-flex;width:100%;margin:0;padding:0;flex-grow:1;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.color-input__input.sc-swirl-color-input:focus{outline:none}.color-input__input.sc-swirl-color-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.color-input__input.sc-swirl-color-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.color-input__preview-button.sc-swirl-color-input{width:2.75rem;height:2.75rem;margin-top:-1.25rem;flex-shrink:0;border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-s);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}"}},[2,"swirl-color-input",{autoFocus:[4,"auto-focus"],autoSelect:[4,"auto-select"],disabled:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],inline:[4],invalid:[4],pickerButtonLabel:[1,"picker-button-label"],pickerLabel:[1,"picker-label"],placeholder:[1],required:[4],value:[1537],readonly:[4]},void 0,{value:[{watchValue:0}]}]),q=F,T=function(){"undefined"!=typeof customElements&&["swirl-color-input","swirl-box","swirl-popover","swirl-popover-trigger"].forEach((t=>{switch(t){case"swirl-color-input":customElements.get(o(t))\|\|customElements.define(o(t),F);break;case"swirl-box":customElements.get(o(t))\|\|a();break;case"swirl-popover":customElements.get(o(t))\|\|l();break;case"swirl-popover-trigger":customElements.get(o(t))\|\|c()}}))};export{q as SwirlColorInput,T as defineCustomElement}

package/dist/components/swirl-console-layout.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as o,createEvent as a,h as t,Host as s,transformTag as i}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{d as n,i as r}from"./utils.js";import{d}from"./swirl-button2.js";import{d as c}from"./swirl-heading2.js";import{d as h}from"./swirl-text2.js";const b=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.backButtonClick=a(this,"backButtonClick",7),this.helpButtonClick=a(this,"helpButtonClick",7),this.backButonLabel="Back",this.helpButonLabel="Help",this.hideNavigationButtonLabel="Hide main navigation",this.logoText="Admin",this.navigationLabel="Main",this.showNavigationButtonLabel="Show main navigation",this.contentScrollState={scrollable:!1,scrolledToTop:!1,scrolledToBottom:!1},this.updateCustomAppBarStatus=()=>{this.hasCustomAppBar=!!this.el.querySelector('[slot="app-bar"]')},this.updateFooterStatus=()=>{this.hasFooter=!!this.el.querySelector('[slot="footer"]')},this.onMainScroll=n((()=>{this.updateContentScrollState()}),16),this.onBackButtonClick=e=>{this.backButtonClick.emit(e)},this.onHelpButtonClick=e=>{this.helpButtonClick.emit(e)},this.onMobileNavigationToggleClick=()=>{this.toggleSidebar()},this.onClick=e=>{const o=e.target,a=!!o.closest(".console-layout__mobile-navigation-button"),t="overlays"===o.closest("[slot]")?.slot;e.composedPath().includes(this.sidebarEl)\|\|a\|\|t\|\|!this.sidebarActive\|\|this.deactivateSidebar()},this.onKeyDown=e=>{"Escape"===e.code&&this.sidebarActive&&this.deactivateSidebar()}}componentDidLoad(){queueMicrotask((()=>{r()?this.deactivateSidebar():this.activateSidebar(),this.updateContentScrollState(),this.updateCustomAppBarStatus(),this.updateFooterStatus()}))}updateContentScrollState(){if(!this.contentEl)return;const e={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(e).some((o=>e[o]!==this.contentScrollState[o]))&&(this.contentScrollState=e)}onWindowResize(){const e=r();e\|\|this.sidebarActive?e&&this.deactivateSidebar():this.activateSidebar()}async toggleSidebar(){this.sidebarActive?this.deactivateSidebar():this.activateSidebar()}async showSidebar(){this.sidebarActive\|\|this.activateSidebar()}async hideSidebar(){this.sidebarActive&&this.deactivateSidebar()}activateSidebar(){this.sidebarActive=!0,this.sidebarEl.removeAttribute("inert"),r()&&this.el.querySelector("swirl-tree-navigation-item")?.focus()}deactivateSidebar(){this.sidebarActive=!1,r()&&this.sidebarEl.setAttribute("inert","")}render(){const e=this.maxContentWidth?{maxWidth:this.maxContentWidth,justifySelf:"center",width:"100%"}:void 0;this.updateCustomAppBarStatus(),this.updateFooterStatus();const o=l("console-layout",{"console-layout--sidebar-active":this.sidebarActive,"console-layout--empty-app-bar":!this.appName&&!this.showHelpButton&&!this.hasCustomAppBar,"console-layout--has-footer":this.hasFooter,"console-layout--has-custom-app-bar":this.hasCustomAppBar,"console-layout--main-scrollable":this.contentScrollState.scrollable,"console-layout--main-scrolled-to-top":this.contentScrollState.scrolledToTop,"console-layout--main-scrolled-to-bottom":this.contentScrollState.scrolledToBottom,"console-layout--hide-content-header":this.hideContentHeader});return t(s,{key:"877a99276f633b0c211ea753e8900a286c715c25"},t("div",{key:"5586571f3fdf9e53038e519895691d4bc7f02ec4",class:o,onClick:this.onClick,onKeyDown:this.onKeyDown},t("header",{key:"12a85311d8068aeed8399d9070d0785d66824bfa","aria-hidden":!this.sidebarActive+"",class:"console-layout__sidebar",ref:e=>this.sidebarEl=e},t("div",{key:"21d40c363f181148ae6719ba5dac8dd81ccfbee7",class:"console-layout__header"},t("div",{key:"fcf090e6ecde0cc590ee3562d129c133f6ba3736",class:"console-layout__logo"},t("svg",{key:"64ee96bab28665e62c021ab6bcf00ca232602ef6",class:"console-layout__logo-mark",fill:"none",height:"26",viewBox:"0 0 301 460",width:"16",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"32d2efa245e5bf92f79c16a41ef3961e1289ca18","fill-rule":"evenodd","clip-rule":"evenodd",d:"M2.52486 276.36C5.57709 289.149 11.02 301.094 18.2296 311.628L258.719 138.748C269.874 131.507 278.35 121.993 285.395 110.766C291.904 100.212 296.922 87.3014 298.875 74.6738C300.769 61.4277 300.809 48.353 297.757 35.5639C294.705 22.7748 289.262 10.8302 282.052 0.296051L41.5626 173.176C30.4077 180.417 21.9314 189.931 14.8867 201.158C8.37746 211.712 3.35926 224.623 1.40724 237.25C-0.544773 249.878 0.0338964 262.896 2.52486 276.36ZM80.3121 424.184C83.3644 436.973 88.8073 448.918 96.0169 459.452L229.113 363.743C240.268 356.502 248.744 346.988 255.789 335.761C262.298 325.207 267.317 312.296 269.269 299.668C271.164 286.422 271.203 273.348 268.151 260.559C265.099 247.769 259.656 235.825 252.446 225.291L119.35 320.999C108.195 328.24 99.7187 337.755 92.674 348.982C86.1647 359.535 81.1465 372.446 79.1945 385.074C77.2996 398.32 77.2599 411.395 80.3121 424.184Z",fill:"#2151F5"})),t("swirl-text",{key:"66d01881ffa7eed51ac23707e2803df840c626a9",class:"console-layout__logo-text",weight:"medium"},this.logoText))),t("nav",{key:"fd9a4fe72a628827f936576d189c21232bd0cc1c","aria-label":this.navigationLabel,class:"console-layout__navigation"},t("slot",{key:"d4f3a64b04a40c26c3ffb37d7162e715e36fe9d7",name:"navigation"})),t("div",{key:"c9d20af26bd0f73b65e2695df9d45691f1d3e370",class:"console-layout__user"},t("slot",{key:"eb4c972928244f44fb228e850ae5292853258f8b",name:"user"}))),t("main",{key:"0b4fedd1556dd5a03b2a2abc1907872b3e68d81b","aria-labelledby":this.appName?"app-name":void 0,class:"console-layout__main"},t("header",{key:"ec865f602abb7389d54c7d724c5b3e8e061f399a",class:"console-layout__app-bar console-layout__app-bar--custom"},t("slot",{key:"e43fdcee425d18854fa5a2562d0ceb4bf2d9270e",name:"app-bar",onSlotchange:this.updateCustomAppBarStatus})),t("header",{key:"c17c47a0083729471c38b5b39cb1321ccd5b500d",class:"console-layout__app-bar"},t("span",{key:"056f5cb385c2e1d23e61160f95e856e49172f69f",class:"console-layout__mobile-navigation-button"},t("swirl-button",{key:"d6d7501b4e06a909ebe26b74db6a964d654e4f44",swirlAriaExpanded:this.sidebarActive+"",hideLabel:!0,icon:this.sidebarActive?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-menu></swirl-icon-menu>",label:this.sidebarActive?this.hideNavigationButtonLabel:this.showNavigationButtonLabel,onClick:this.onMobileNavigationToggleClick})),t("div",{key:"354b92ed6af2aa0051cfbb0161613dc32cbe2b26",class:"console-layout__app-name"},this.appName&&t("swirl-heading",{key:"346895b42e20c227c22d4f065b952bdd436c467b",as:"h1",headingId:"app-name",level:4,text:this.appName})),this.showHelpButton&&t("swirl-button",{key:"21ba3ef3b8549fcf5d6c7e761551c9aa520b64d8",class:"console-layout__help-button",hideLabel:!0,icon:"<swirl-icon-help></swirl-icon-help>",label:this.helpButonLabel,onClick:this.onHelpButtonClick})),t("section",{key:"fec0e51550ebc7e65904a26cc6a78bfa5dd773ba","aria-labelledby":"heading",class:"console-layout__content",onScroll:this.onMainScroll,ref:e=>this.contentEl=e},t("div",{key:"a330cb8873383a6600414701ba0ea125aac15a99",class:"console-layout__content-container"},!this.hideContentHeader&&t("header",{key:"f48c576eccaa12004dae489601f662700f11ac76",class:"console-layout__content-header",style:e},this.showBackButton&&t("swirl-button",{key:"59ec11a9ff739c49797c6374fab5afc7df7f4514",class:"console-layout__back-button",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.backButonLabel,onClick:this.onBackButtonClick}),!!this.heading&&t("div",{key:"0d029d7ebf84628808ac2501f863609948cc5d2d",class:"console-layout__heading-container"},t("swirl-heading",{key:"3cbabeb0a8a841dab374bed6ef50a29d685b5551",as:this.appName?"h2":"h1",class:"console-layout__heading",headingId:"heading",level:1,text:this.heading}),this.subheading&&t("swirl-text",{key:"097a88d77cb6242e39861037ef0bcf78e915c4dd",class:"console-layout__subheading",color:"subdued"},this.subheading)),!this.heading&&t("div",{key:"74c47854623acd241d3a7201fed507334323c888",class:"console-layout__heading-container"},t("slot",{key:"518687f5c9f81198013a85a81e0a1d932cc8fda8",name:"heading"})),t("div",{key:"cd4d077c51e8ab5ba94c344b9ca055450700233f",class:"console-layout__content-header-tools"},t("slot",{key:"f89f06be1d237273cce2f9cfe26cea171d71758f",name:"content-header-tools"}))),t("div",{key:"2542615930e0927c9ea8185e4827f3c063b21044",class:"console-layout__integration",style:e},t("slot",{key:"d68be43006c3e7eb82d52f8f6563d4ae679264cb",name:"content"})))),t("footer",{key:"157ca488101270e296a0265761193b64db44f3c3",class:"console-layout__footer"},t("slot",{key:"87fd0b86404d9e3bc5ccbd44f3fdca4a1ef01138",name:"footer",onSlotchange:this.updateFooterStatus})),t("div",{key:"17d923022d523704af1d1916637d2af4a5a5504e",class:"console-layout__overlays"},t("slot",{key:"7a436c4622b62db07cba9935f4930e8e06800971",name:"overlays"})))))}get el(){return this}static get style(){return':host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem;--console-sidebar-width:18.5rem}:host {box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:"main"}@media (min-width: 768px){.console-layout{grid-template-columns:var(--console-sidebar-width) 1fr;grid-template-areas:"sidebar main"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:"content";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:"content" "footer";grid-template-rows:1fr -webkit-min-content;grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr -webkit-min-content;grid-template-rows:auto 1fr min-content;grid-template-areas:"header" "navigation" "user"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow:hidden;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:"app-bar" "content"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr -webkit-min-content;grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:"app-bar" "content" "footer"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width: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-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;display:flex;min-width:0;padding:0 var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:0 2.5rem}}.console-layout__content-container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%}.console-layout__integration{flex-grow:1;padding-bottom:var(--s-space-16)}@media (min-width: 768px){.console-layout__integration{padding-bottom:2.5rem}}.console-layout__integration{width:100%}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.console-layout__content-header{padding-top:2.5rem}}.console-layout__content-header{width:100%}.console-layout--has-custom-app-bar .console-layout__content-header{padding-top:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}.console-layout--hide-content-header .console-layout__content{padding:0;overflow:hidden;scrollbar-gutter:auto}.console-layout--hide-content-header .console-layout__integration{padding-bottom:0}'}},[257,"swirl-console-layout",{appName:[1,"app-name"],backButonLabel:[1,"back-buton-label"],heading:[1],helpButonLabel:[1,"help-buton-label"],hideNavigationButtonLabel:[1,"hide-navigation-button-label"],logoText:[1,"logo-text"],navigationLabel:[1,"navigation-label"],maxContentWidth:[1,"max-content-width"],showBackButton:[4,"show-back-button"],showHelpButton:[4,"show-help-button"],showNavigationButtonLabel:[1,"show-navigation-button-label"],subheading:[1],hideContentHeader:[4,"hide-content-header"],sidebarActive:[32],contentScrollState:[32],hasCustomAppBar:[32],hasFooter:[32],toggleSidebar:[64],showSidebar:[64],hideSidebar:[64]},[[9,"resize","onWindowResize"]]]),u=b,p=function(){"undefined"!=typeof customElements&&["swirl-console-layout","swirl-button","swirl-heading","swirl-text"].forEach((e=>{switch(e){case"swirl-console-layout":customElements.get(i(e))\|\|customElements.define(i(e),b);break;case"swirl-button":customElements.get(i(e))\|\|d();break;case"swirl-heading":customElements.get(i(e))\|\|c();break;case"swirl-text":customElements.get(i(e))\|\|h()}}))};export{u as SwirlConsoleLayout,p as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as o,createEvent as a,h as t,Host as s,transformTag as i}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{d as n,i as r}from"./utils.js";import{d}from"./swirl-button2.js";import{d as c}from"./swirl-heading2.js";import{d as h}from"./swirl-text2.js";const b=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.backButtonClick=a(this,"backButtonClick",7),this.helpButtonClick=a(this,"helpButtonClick",7),this.backButonLabel="Back",this.helpButonLabel="Help",this.hideNavigationButtonLabel="Hide main navigation",this.logoText="Admin",this.navigationLabel="Main",this.showNavigationButtonLabel="Show main navigation",this.contentScrollState={scrollable:!1,scrolledToTop:!1,scrolledToBottom:!1},this.updateCustomAppBarStatus=()=>{this.hasCustomAppBar=!!this.el.querySelector('[slot="app-bar"]')},this.updateFooterStatus=()=>{this.hasFooter=!!this.el.querySelector('[slot="footer"]')},this.onMainScroll=n((()=>{this.updateContentScrollState()}),16),this.onBackButtonClick=e=>{this.backButtonClick.emit(e)},this.onHelpButtonClick=e=>{this.helpButtonClick.emit(e)},this.onMobileNavigationToggleClick=()=>{this.toggleSidebar()},this.onClick=e=>{const o=e.target,a=!!o.closest(".console-layout__mobile-navigation-button"),t="overlays"===o.closest("[slot]")?.slot;e.composedPath().includes(this.sidebarEl)\|\|a\|\|t\|\|!this.sidebarActive\|\|this.deactivateSidebar()},this.onKeyDown=e=>{"Escape"===e.code&&this.sidebarActive&&this.deactivateSidebar()}}componentDidLoad(){queueMicrotask((()=>{r()?this.deactivateSidebar():this.activateSidebar(),this.updateContentScrollState(),this.updateCustomAppBarStatus(),this.updateFooterStatus()}))}updateContentScrollState(){if(!this.contentEl)return;const e={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(e).some((o=>e[o]!==this.contentScrollState[o]))&&(this.contentScrollState=e)}onWindowResize(){const e=r();e\|\|this.sidebarActive?e&&this.deactivateSidebar():this.activateSidebar()}async toggleSidebar(){this.sidebarActive?this.deactivateSidebar():this.activateSidebar()}async showSidebar(){this.sidebarActive\|\|this.activateSidebar()}async hideSidebar(){this.sidebarActive&&this.deactivateSidebar()}activateSidebar(){this.sidebarActive=!0,this.sidebarEl.removeAttribute("inert"),r()&&this.el.querySelector("swirl-tree-navigation-item")?.focus()}deactivateSidebar(){this.sidebarActive=!1,r()&&this.sidebarEl.setAttribute("inert","")}render(){const e=this.maxContentWidth?{maxWidth:this.maxContentWidth,justifySelf:"center",width:"100%"}:void 0;this.updateCustomAppBarStatus(),this.updateFooterStatus();const o=l("console-layout",{"console-layout--sidebar-active":this.sidebarActive,"console-layout--empty-app-bar":!this.appName&&!this.showHelpButton&&!this.hasCustomAppBar,"console-layout--has-footer":this.hasFooter,"console-layout--has-custom-app-bar":this.hasCustomAppBar,"console-layout--main-scrollable":this.contentScrollState.scrollable,"console-layout--main-scrolled-to-top":this.contentScrollState.scrolledToTop,"console-layout--main-scrolled-to-bottom":this.contentScrollState.scrolledToBottom,"console-layout--hide-content-header":this.hideContentHeader});return t(s,{key:"6d3d76b3bbe059e36b83d71bef04189d9bf52697"},t("div",{key:"8be9369affb1e769fa088af15c278d5bcef3239c",class:o,onClick:this.onClick,onKeyDown:this.onKeyDown},t("header",{key:"18f96ffe0cd4531fa1c1432571e9865c81419519","aria-hidden":!this.sidebarActive+"",class:"console-layout__sidebar",ref:e=>this.sidebarEl=e},t("div",{key:"a6ca9595440e044f01e9eeb99a02669006651377",class:"console-layout__header"},t("div",{key:"eedf50754624ba62d2dee201caaa4c722472e867",class:"console-layout__logo"},t("svg",{key:"126b0b43f34bb3b4b17ce55f443a28a9ab920bf1",class:"console-layout__logo-mark",fill:"none",height:"26",viewBox:"0 0 301 460",width:"16",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"5816b1cf9245a21f410b78d4df44be804f1f8653","fill-rule":"evenodd","clip-rule":"evenodd",d:"M2.52486 276.36C5.57709 289.149 11.02 301.094 18.2296 311.628L258.719 138.748C269.874 131.507 278.35 121.993 285.395 110.766C291.904 100.212 296.922 87.3014 298.875 74.6738C300.769 61.4277 300.809 48.353 297.757 35.5639C294.705 22.7748 289.262 10.8302 282.052 0.296051L41.5626 173.176C30.4077 180.417 21.9314 189.931 14.8867 201.158C8.37746 211.712 3.35926 224.623 1.40724 237.25C-0.544773 249.878 0.0338964 262.896 2.52486 276.36ZM80.3121 424.184C83.3644 436.973 88.8073 448.918 96.0169 459.452L229.113 363.743C240.268 356.502 248.744 346.988 255.789 335.761C262.298 325.207 267.317 312.296 269.269 299.668C271.164 286.422 271.203 273.348 268.151 260.559C265.099 247.769 259.656 235.825 252.446 225.291L119.35 320.999C108.195 328.24 99.7187 337.755 92.674 348.982C86.1647 359.535 81.1465 372.446 79.1945 385.074C77.2996 398.32 77.2599 411.395 80.3121 424.184Z",fill:"#2151F5"})),t("swirl-text",{key:"94260711560885dd241e2c982d41a6a445ab500e",class:"console-layout__logo-text",weight:"medium"},this.logoText))),t("nav",{key:"02f8498f9cc229c3f2264e47df1a524033bcdc3b","aria-label":this.navigationLabel,class:"console-layout__navigation"},t("slot",{key:"ba5909d095b6287796877cd96d795f93dc440512",name:"navigation"})),t("div",{key:"df6cf86f2df40b1311d7e8272b0aead808001358",class:"console-layout__user"},t("slot",{key:"71d379979ed62b36ab090e2ee7275f84b2348738",name:"user"}))),t("main",{key:"79b024113f1ff98be044b1ff439b060ec427ba2e","aria-labelledby":this.appName?"app-name":void 0,class:"console-layout__main"},t("header",{key:"11c0da8a1ceb9f1114b31fb2f253ef2cedb6e841",class:"console-layout__app-bar console-layout__app-bar--custom"},t("slot",{key:"945c13dc3f1a137f67dc4dd23372abd59303dad1",name:"app-bar",onSlotchange:this.updateCustomAppBarStatus})),t("header",{key:"ade2fdb3b97bca5b11d3f51960130554102eaf93",class:"console-layout__app-bar"},t("span",{key:"3763982c2893f0e9f4051858cc13348b9ad87464",class:"console-layout__mobile-navigation-button"},t("swirl-button",{key:"adb4797947a8164a439920cf46b78c01ba71ee6a",swirlAriaExpanded:this.sidebarActive+"",hideLabel:!0,icon:this.sidebarActive?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-menu></swirl-icon-menu>",label:this.sidebarActive?this.hideNavigationButtonLabel:this.showNavigationButtonLabel,onClick:this.onMobileNavigationToggleClick})),t("div",{key:"888442817c242245c8a4254b1fcbdac131e9664b",class:"console-layout__app-name"},this.appName&&t("swirl-heading",{key:"9a42899542bf5a8f3015e4a9830adf7e82b16602",as:"h1",headingId:"app-name",level:4,text:this.appName})),this.showHelpButton&&t("swirl-button",{key:"368709207382507b0f3acc7eff553af7fd21ca12",class:"console-layout__help-button",hideLabel:!0,icon:"<swirl-icon-help></swirl-icon-help>",label:this.helpButonLabel,onClick:this.onHelpButtonClick})),t("section",{key:"1b818fdd0857179d2571b2c3636e4ea253670c71","aria-labelledby":"heading",class:"console-layout__content",onScroll:this.onMainScroll,ref:e=>this.contentEl=e},t("div",{key:"997508980962020a361281a61acbda609dd02f5f",class:"console-layout__content-container"},!this.hideContentHeader&&t("header",{key:"597ee6188a39738b85cfe5b8ee1cff5e81fc470b",class:"console-layout__content-header",style:e},this.showBackButton&&t("swirl-button",{key:"9dbf4f8f04e1e32eac104d324448d9678122e141",class:"console-layout__back-button",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.backButonLabel,onClick:this.onBackButtonClick}),!!this.heading&&t("div",{key:"017cca3478dabf0347de9c906da9639dfd55a186",class:"console-layout__heading-container"},t("swirl-heading",{key:"d2799b47248282463d9e53f81870d3a644c48778",as:this.appName?"h2":"h1",class:"console-layout__heading",headingId:"heading",level:1,text:this.heading}),this.subheading&&t("swirl-text",{key:"758441b1390f2e7014b25123d978f0b3f37dd09d",class:"console-layout__subheading",color:"subdued"},this.subheading)),!this.heading&&t("div",{key:"c1da0ed02c4391cd1134e29380df6999432ed390",class:"console-layout__heading-container"},t("slot",{key:"20b72fc9bebfe7fa55272d3743448b75cdbec86c",name:"heading"})),t("div",{key:"631804252b9d02e7e77c447736f82c72b86c5b12",class:"console-layout__content-header-tools"},t("slot",{key:"d8111f725736d6269e617cf6f69bf1c2a4082058",name:"content-header-tools"}))),t("div",{key:"bc36dc116663e54fba88653175ea494b9746503d",class:"console-layout__integration",style:e},t("slot",{key:"563651e53020e12c2d936ab8c0585a9939ea2dc2",name:"content"})))),t("footer",{key:"1fbabaa24e0a457835e0e173542c29387d834666",class:"console-layout__footer"},t("slot",{key:"e7444b9ee022f3a1bb816fe4b7c32e25c9e07d9b",name:"footer",onSlotchange:this.updateFooterStatus})),t("div",{key:"0ab722bb6bc57e4b3bc2fe11e771f6f796c7fd0e",class:"console-layout__overlays"},t("slot",{key:"86312704fefb36b2b9f8d5a24a191c588acf23f1",name:"overlays"})))))}get el(){return this}static get style(){return':host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem;--console-sidebar-width:18.5rem}:host {box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:"main"}@media (min-width: 768px){.console-layout{grid-template-columns:var(--console-sidebar-width) 1fr;grid-template-areas:"sidebar main"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:"content";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:"content" "footer";grid-template-rows:1fr -webkit-min-content;grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr -webkit-min-content;grid-template-rows:auto 1fr min-content;grid-template-areas:"header" "navigation" "user"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow:hidden;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:"app-bar" "content"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr -webkit-min-content;grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:"app-bar" "content" "footer"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width: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-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;display:flex;min-width:0;padding:0 var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:0 2.5rem}}.console-layout__content-container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%}.console-layout__integration{flex-grow:1;padding-bottom:var(--s-space-16)}@media (min-width: 768px){.console-layout__integration{padding-bottom:2.5rem}}.console-layout__integration{width:100%}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.console-layout__content-header{padding-top:2.5rem}}.console-layout__content-header{width:100%}.console-layout--has-custom-app-bar .console-layout__content-header{padding-top:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}.console-layout--hide-content-header .console-layout__content{padding:0;overflow:hidden;scrollbar-gutter:auto}.console-layout--hide-content-header .console-layout__integration{padding-bottom:0}'}},[257,"swirl-console-layout",{appName:[1,"app-name"],backButonLabel:[1,"back-buton-label"],heading:[1],helpButonLabel:[1,"help-buton-label"],hideNavigationButtonLabel:[1,"hide-navigation-button-label"],logoText:[1,"logo-text"],navigationLabel:[1,"navigation-label"],maxContentWidth:[1,"max-content-width"],showBackButton:[4,"show-back-button"],showHelpButton:[4,"show-help-button"],showNavigationButtonLabel:[1,"show-navigation-button-label"],subheading:[1],hideContentHeader:[4,"hide-content-header"],sidebarActive:[32],contentScrollState:[32],hasCustomAppBar:[32],hasFooter:[32],toggleSidebar:[64],showSidebar:[64],hideSidebar:[64]},[[9,"resize","onWindowResize"]]]),u=b,p=function(){"undefined"!=typeof customElements&&["swirl-console-layout","swirl-button","swirl-heading","swirl-text"].forEach((e=>{switch(e){case"swirl-console-layout":customElements.get(i(e))\|\|customElements.define(i(e),b);break;case"swirl-button":customElements.get(i(e))\|\|d();break;case"swirl-heading":customElements.get(i(e))\|\|c();break;case"swirl-text":customElements.get(i(e))\|\|h()}}))};export{u as SwirlConsoleLayout,p as defineCustomElement}

package/dist/components/swirl-data-cell-stack.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as a,HTMLElement as e,h as t,Host as s,transformTag as l}from"@stencil/core/internal/client";import{c}from"./index2.js";import{v as d}from"./v4.js";const r=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.hideLabel=!1,this.headerId="data-cell-stack-header-"+d(),this.onSlotChange=a=>{a.target.assignedElements().filter((a=>"SWIRL-DATA-CELL"!==a.tagName)).length>0&&console.warn("[SwirlDataCellStack] Only swirl-data-cell elements are allowed as direct children.")}}render(){const a=!!this.el.querySelector('[slot="cta"]'),e=!!this.label&&!this.hideLabel,l=c("data-cell-stack",{"data-cell-stack--has-cta":a}),d=e?this.headerId+"-label":void 0,r=this.description?this.headerId+"-description":void 0;return t(s,{key:"~~c5a7f1db47518a1159922596dca273835ad8e273~~"},t("div",{key:"~~5a9155ba4874b1a2aefa9ac66376843ed330c17e~~",class:l,part:"data-cell-stack",role:"group"},(e\|\|this.description\|\|a)&&t("header",{key:"~~f96be02e2672c703fc0f036cea4b8a46ca600ae5~~",class:"data-cell-stack__header",id:this.headerId},t("div",{key:"~~69d283e694e896bd4a8d06941400668873cdfdfc~~",class:"data-cell-stack__header-content"},e&&t("h3",{key:"~~45aeece6c12e55eb617d9e3d0ca5b704e0aeae4e~~",class:"data-cell-stack__label",id:d},this.label),this.description&&t("p",{key:"~~768d7a8fd7b8b47dc3ce97b23e8488c7c6c663bc~~",class:"data-cell-stack__description",id:r},this.description)),a&&t("div",{key:"~~fe3829a57d9e5357c58f6fca5d4236a611c0b553~~",class:"data-cell-stack__cta"},t("slot",{key:"~~7a7ff7b1e33321685e3bb552154cfcebbd094463~~",name:"cta"}))),t("div",{key:"~~8ba716b5991d67d0edfbd6139f821a3eace709d7~~",class:"data-cell-stack__cells",role:"list","aria-labelledby":d\|\|void 0,"aria-describedby":r\|\|void 0},t("slot",{key:"~~f3c3f72c0c551a3bc730e4d83b13cccb0d632bfd~~",onSlotchange:this.onSlotChange}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell-stack{display:flex;flex-direction:column;width:100%;gap:var(--s-space-16)}.data-cell-stack__header{display:flex;align-items:flex-start;gap:var(--s-space-8);width:100%;justify-content:space-between}.data-cell-stack__header-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell-stack__label{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);margin:0}.data-cell-stack__description{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);margin:0}.data-cell-stack__cells{display:flex;flex-direction:column;gap:var(--s-space-2)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-l) var(--s-border-radius-l) var(--s-border-radius-s) var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:last-of-type:not(:first-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s) var(--s-border-radius-s) var(--s-border-radius-l) var(--s-border-radius-l)}.data-cell-stack__cells ::slotted(swirl-data-cell:not(:first-of-type):not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:last-of-type){--swirl-data-cell-border-radius:var(--s-border-radius-l)}.data-cell-stack__cta{display:flex;align-items:center;flex-shrink:0}"}},[257,"swirl-data-cell-stack",{description:[1],hideLabel:[4,"hide-label"],label:[1]}]),i=r,o=function(){"undefined"!=typeof customElements&&["swirl-data-cell-stack"].forEach((a=>{"swirl-data-cell-stack"===a&&(customElements.get(l(a))\|\|customElements.define(l(a),r))}))};export{i as SwirlDataCellStack,o as defineCustomElement}
1	+ import{proxyCustomElement as a,HTMLElement as e,h as t,Host as s,transformTag as l}from"@stencil/core/internal/client";import{c as d}from"./index2.js";import{v as c}from"./v4.js";const r=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.hideLabel=!1,this.headerId="data-cell-stack-header-"+c(),this.onSlotChange=a=>{a.target.assignedElements().filter((a=>"SWIRL-DATA-CELL"!==a.tagName)).length>0&&console.warn("[SwirlDataCellStack] Only swirl-data-cell elements are allowed as direct children.")}}render(){const a=!!this.el.querySelector('[slot="cta"]'),e=!!this.label&&!this.hideLabel,l=d("data-cell-stack",{"data-cell-stack--has-cta":a}),c=e?this.headerId+"-label":void 0,r=this.description?this.headerId+"-description":void 0;return t(s,{key:"9816cd9a28f4771294e607d37f7eafa7bbeec397"},t("div",{key:"a4f70e0edf996c0502f17bdc7cad8de297431e76",class:l,part:"data-cell-stack",role:"group"},(e\|\|this.description\|\|a)&&t("header",{key:"66ea79f97995eb38d609ac76681b60c8d2986aee",class:"data-cell-stack__header",id:this.headerId},t("div",{key:"170fa4424c37ede46d21c98fe9a0a3e30e7dc6ad",class:"data-cell-stack__header-content"},e&&t("h3",{key:"8b533a3efc877d00f2b883b4bd97f5ce3ff0d82e",class:"data-cell-stack__label",id:c},this.label),this.description&&t("p",{key:"09b7ab8c1916e3eee5dc319a82b2cdf2261f0507",class:"data-cell-stack__description",id:r},this.description)),a&&t("div",{key:"2d543e439b20b707cac55899382b4da1db83e867",class:"data-cell-stack__cta"},t("slot",{key:"f425a418b60908285450b4714f941272e541ad9a",name:"cta"}))),t("div",{key:"14ba4e4c794c2d6bd27ff4dffaf7241139a1d694",class:"data-cell-stack__cells",role:"list","aria-labelledby":c\|\|void 0,"aria-describedby":r\|\|void 0},t("slot",{key:"aa91bc50a03d16f0ca0ff7026f41074200480053",onSlotchange:this.onSlotChange}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell-stack{display:flex;flex-direction:column;width:100%;gap:var(--s-space-16)}.data-cell-stack__header{display:flex;align-items:flex-start;gap:var(--s-space-8);width:100%;justify-content:space-between}.data-cell-stack__header-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell-stack__label{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);margin:0}.data-cell-stack__description{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);margin:0}.data-cell-stack__cells{display:flex;flex-direction:column;gap:var(--s-space-2)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-l) var(--s-border-radius-l) var(--s-border-radius-s) var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:last-of-type:not(:first-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s) var(--s-border-radius-s) var(--s-border-radius-l) var(--s-border-radius-l)}.data-cell-stack__cells ::slotted(swirl-data-cell:not(:first-of-type):not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:last-of-type){--swirl-data-cell-border-radius:var(--s-border-radius-l)}.data-cell-stack__cta{display:flex;align-items:center;flex-shrink:0}"}},[257,"swirl-data-cell-stack",{description:[1],hideLabel:[4,"hide-label"],label:[1]}]),i=r,o=function(){"undefined"!=typeof customElements&&["swirl-data-cell-stack"].forEach((a=>{"swirl-data-cell-stack"===a&&(customElements.get(l(a))\|\|customElements.define(l(a),r))}))};export{i as SwirlDataCellStack,o as defineCustomElement}

package/dist/components/swirl-date-input.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as a,transformTag as r}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{f as o,I as d,p as c,i as h}from"./index3.js";import{D as l}from"./media-query.service.js";import{i as p}from"./utils.js";import{d as u}from"./swirl-date-picker2.js";import{d as m}from"./swirl-icon-today2.js";import{d as f}from"./swirl-popover2.js";import{d as w}from"./swirl-popover-trigger2.js";import{d as b}from"./wc-datepicker2.js";const y="yyyy-MM-dd",k=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.invalidInput=e(this,"invalidInput",7),this.valueChange=e(this,"valueChange",7),this.datePickerDisableDate=()=>!1,this.datePickerLabel="Date picker",this.datePickerTriggerLabel="Open date picker",this.firstDayOfWeek=0,this.format="yyyy-MM-dd",this.locale="en-US",this.placeholder="yyyy-mm-dd",this.preferredInputMode="input",this.iconSize=24,this.isInPickOnlyMode=!1,this.mediaQueryUnsubscribe=()=>{},this.onClick=t=>{t.preventDefault(),this.readonly\|\|"pick"===this.preferredInputMode&&(this.pickerPopover.open(this.el),p()\|\|this.focus())},this.onMouseDown=()=>{this.readonly\|\|"pick"===this.preferredInputMode&&this.pickerPopover.close()},this.onFocus=t=>{this.handleAutoSelect(t)},this.onBlur=t=>{if(this.readonly)return;const i=this.pickerPopover.contains(t.relatedTarget);this.setIsInPickOnlyMode(!i)},this.onPickDate=t=>{const i=t.detail,e=o(i,y);this.value=e,this.inputEl.value=o(i,this.pattern),this.mask.updateValue(),this.setIsInPickOnlyMode(!0),this.pickerPopover.close()}}componentWillLoad(){const t=Array.from(document.querySelectorAll("swirl-date-input")).indexOf(this.el);this.id="swirl-date-input-"+t,this.setIsInPickOnlyMode(!0)}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=l.subscribe((t=>{this.updateIconSize(t)})),this.autoFocus&&this.focus()}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(t,i){t!==i&&this.updateValue()}async openPicker(){this.pickerPopover.open(this.el)}focus(){setTimeout((()=>{this.inputEl.focus()}))}updateIconSize(t){this.iconSize=t?20:24}handleAutoSelect(t){this.autoSelect?t.target&&t.target instanceof HTMLInputElement&&t.target.select():setTimeout((()=>{t.target&&t.target instanceof HTMLInputElement&&t.target.setSelectionRange&&t.target.setSelectionRange(0,0)}))}setIsInPickOnlyMode(t){this.isInPickOnlyMode=!("pick"!==this.preferredInputMode\|\|!p())&&t}setupMask(){this.mask?.destroy(),this.pattern=this.format.replace(/(?<!d)d(?!d)/g,"dd").replace(/(?<!M)M(?!M)/g,"MM").replace(/(?<!y)y(?!y)/g,"yyyy").replace(/(?<!y)yyy(?!y)/g,"yyyy"),this.pattern\|\|(this.pattern=y),this.mask=d(this.inputEl,{mask:Date,pattern:this.pattern.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",blocks:{dd:{mask:d.MaskedRange,from:1,to:31,maxLength:2},MM:{mask:d.MaskedRange,from:1,to:12,maxLength:2},yy:{mask:d.MaskedRange,from:0,to:99,maxLength:2},yyyy:{mask:d.MaskedRange,from:1e3,to:9999,maxLength:4}},format:t=>{const i=o(t,this.pattern);return h(t)?(this.value=o(t,y),i):(this.invalidInput.emit(""+t),"")},parse:t=>c(t,this.pattern,new Date)}),this.mask.on("accept",(()=>{""===this.mask.value&&(this.value="",this.valueChange.emit(""))})),this.updateValue()}updateValue(){if(this.value){const t=c(this.value,y,new Date);if(h(t)){const i=o(t,this.pattern);this.mask.value=i,this.valueChange.emit(this.value)}else this.invalidInput.emit(this.value)}}render(){const t=!0===this.invalid\|\|!1===this.invalid?this.invalid+"":void 0,i=this.value?c(this.value,y,new Date):void 0,e=h(i)?i:void 0,r=n("date-input",{"date-input--inline":this.inline});return s(a,{key:"~~2ec594d964122a487dfe11366be4fcc7b569d8e2~~"},s("div",{key:"~~68865174eaed718b1b9a01cc30da844092419404~~",class:r},s("input",{key:"~~5d19ca6467fe106aa847d7c2190ee8383f8fdd03~~","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"date-input__input",disabled:this.disabled,readonly:this.isInPickOnlyMode\|\|this.readonly,id:this.id,inputmode:"numeric",onClick:this.onClick,onMouseDown:this.onMouseDown,onFocus:this.onFocus,onBlur:this.onBlur,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,type:"text"}),!this.readonly&&s("swirl-popover-trigger",{key:"~~934f9a34104e23208fc82f5517129199610bcd6a~~",swirlPopover:"popover-"+this.id},s("button",{key:"~~b0f758fec8fa2305ebf5e0266a03fa60dfca9c1f~~","aria-label":this.datePickerTriggerLabel,class:"date-input__date-picker-button",disabled:this.disabled,type:"button"},s("swirl-icon-today",{key:"~~01348f120dd398170b2c5e28c81397a621175cb8~~",size:this.iconSize})))),!(this.disabled\|\|this.readonly)&&s("swirl-popover",{key:"~~86c33819d1169ed69eb2f07db7e4e644ec6cbd5c~~",animation:"scale-in-y",class:"date-input__date-picker-popover",id:"popover-"+this.id,label:this.datePickerLabel,placement:"bottom-end",ref:t=>this.pickerPopover=t},s("swirl-date-picker",{key:"~~75e98326b305696e9a35f218f25dd96eab152f67~~",disableDate:this.datePickerDisableDate,firstDayOfWeek:this.firstDayOfWeek,labels:this.labels,locale:this.locale,onValueChange:this.onPickDate,value:e,startDate:e})))}get el(){return this}static get watchers(){return{format:[{watchFormat:0}],value:[{watchValue:0}]}}static get style(){return".sc-swirl-date-input-h{display:flex;width:100%}.sc-swirl-date-input-h .sc-swirl-date-input{box-sizing:border-box}.date-input.sc-swirl-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:0}}.date-input__input.sc-swirl-date-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.date-input__input.sc-swirl-date-input:focus{outline:none}.date-input__input.sc-swirl-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__input.sc-swirl-date-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-input__date-picker-button.sc-swirl-date-input{position:absolute;top:calc(-1 var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.date-input__date-picker-button.sc-swirl-date-input:focus:not(:focus-visible){outline:none}.date-input__date-picker-button.sc-swirl-date-input:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-input__date-picker-button.sc-swirl-date-input:disabled{color:var(--s-icon-disabled);cursor:default}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__date-picker-button.sc-swirl-date-input{top:-0.625rem}}@media (max-width: 767px){.date-input__date-picker-popover.sc-swirl-date-input{position:fixed}}"}},[2,"swirl-date-input",{autoFocus:[4,"auto-focus"],autoSelect:[4,"auto-select"],datePickerDisableDate:[16],datePickerLabel:[1,"date-picker-label"],datePickerTriggerLabel:[1,"date-picker-trigger-label"],disabled:[4],firstDayOfWeek:[2,"first-day-of-week"],format:[1],inline:[4],invalid:[4],labels:[16],locale:[1],placeholder:[1],preferredInputMode:[1,"preferred-input-mode"],required:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1537],readonly:[4],iconSize:[32],isInPickOnlyMode:[32],openPicker:[64]},void 0,{format:[{watchFormat:0}],value:[{watchValue:0}]}]),v=k,g=function(){"undefined"!=typeof customElements&&["swirl-date-input","swirl-date-picker","swirl-icon-today","swirl-popover","swirl-popover-trigger","wc-datepicker"].forEach((t=>{switch(t){case"swirl-date-input":customElements.get(r(t))\|\|customElements.define(r(t),k);break;case"swirl-date-picker":customElements.get(r(t))\|\|u();break;case"swirl-icon-today":customElements.get(r(t))\|\|m();break;case"swirl-popover":customElements.get(r(t))\|\|f();break;case"swirl-popover-trigger":customElements.get(r(t))\|\|w();break;case"wc-datepicker":customElements.get(r(t))\|\|b()}}))};export{v as SwirlDateInput,g as defineCustomElement}
1	+ import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as a,transformTag as r}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{f as o,I as d,p as c,i as h}from"./index3.js";import{D as l}from"./media-query.service.js";import{i as p}from"./utils.js";import{d as u}from"./swirl-date-picker2.js";import{d as m}from"./swirl-icon-today2.js";import{d as f}from"./swirl-popover2.js";import{d as b}from"./swirl-popover-trigger2.js";import{d as w}from"./wc-datepicker2.js";const y="yyyy-MM-dd",k=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.invalidInput=e(this,"invalidInput",7),this.valueChange=e(this,"valueChange",7),this.datePickerDisableDate=()=>!1,this.datePickerLabel="Date picker",this.datePickerTriggerLabel="Open date picker",this.firstDayOfWeek=0,this.format="yyyy-MM-dd",this.locale="en-US",this.placeholder="yyyy-mm-dd",this.preferredInputMode="input",this.iconSize=24,this.isInPickOnlyMode=!1,this.mediaQueryUnsubscribe=()=>{},this.onClick=t=>{t.preventDefault(),this.readonly\|\|"pick"===this.preferredInputMode&&(this.pickerPopover.open(this.el),p()\|\|this.focus())},this.onMouseDown=()=>{this.readonly\|\|"pick"===this.preferredInputMode&&this.pickerPopover.close()},this.onFocus=t=>{this.handleAutoSelect(t)},this.onBlur=t=>{if(this.readonly)return;const i=this.pickerPopover.contains(t.relatedTarget);this.setIsInPickOnlyMode(!i)},this.onPickDate=t=>{const i=t.detail,e=o(i,y);this.value=e,this.inputEl.value=o(i,this.pattern),this.mask.updateValue(),this.setIsInPickOnlyMode(!0),this.pickerPopover.close()}}componentWillLoad(){const t=Array.from(document.querySelectorAll("swirl-date-input")).indexOf(this.el);this.id="swirl-date-input-"+t,this.setIsInPickOnlyMode(!0)}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=l.subscribe((t=>{this.updateIconSize(t)})),this.autoFocus&&this.focus()}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(t,i){t!==i&&this.updateValue()}async openPicker(){this.pickerPopover.open(this.el)}focus(){setTimeout((()=>{this.inputEl.focus()}))}updateIconSize(t){this.iconSize=t?20:24}handleAutoSelect(t){this.autoSelect?t.target&&t.target instanceof HTMLInputElement&&t.target.select():setTimeout((()=>{t.target&&t.target instanceof HTMLInputElement&&t.target.setSelectionRange&&t.target.setSelectionRange(0,0)}))}setIsInPickOnlyMode(t){this.isInPickOnlyMode=!("pick"!==this.preferredInputMode\|\|!p())&&t}setupMask(){this.mask?.destroy(),this.pattern=this.format.replace(/(?<!d)d(?!d)/g,"dd").replace(/(?<!M)M(?!M)/g,"MM").replace(/(?<!y)y(?!y)/g,"yyyy").replace(/(?<!y)yyy(?!y)/g,"yyyy"),this.pattern\|\|(this.pattern=y),this.mask=d(this.inputEl,{mask:Date,pattern:this.pattern.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",blocks:{dd:{mask:d.MaskedRange,from:1,to:31,maxLength:2},MM:{mask:d.MaskedRange,from:1,to:12,maxLength:2},yy:{mask:d.MaskedRange,from:0,to:99,maxLength:2},yyyy:{mask:d.MaskedRange,from:1e3,to:9999,maxLength:4}},format:t=>{const i=o(t,this.pattern);return h(t)?(this.value=o(t,y),i):(this.invalidInput.emit(""+t),"")},parse:t=>c(t,this.pattern,new Date)}),this.mask.on("accept",(()=>{""===this.mask.value&&(this.value="",this.valueChange.emit(""))})),this.updateValue()}updateValue(){if(this.value){const t=c(this.value,y,new Date);if(h(t)){const i=o(t,this.pattern);this.mask.value=i,this.valueChange.emit(this.value)}else this.invalidInput.emit(this.value)}}render(){const t=!0===this.invalid\|\|!1===this.invalid?this.invalid+"":void 0,i=this.value?c(this.value,y,new Date):void 0,e=h(i)?i:void 0,r=n("date-input",{"date-input--inline":this.inline});return s(a,{key:"f166999a20fff05802989608ed1329a585564547"},s("div",{key:"11f437da98a042c658724fe906e0f921a99e97af",class:r},s("input",{key:"3763a00b384f7be10e36101411bf28e8298dfb2e","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"date-input__input",disabled:this.disabled,readonly:this.isInPickOnlyMode\|\|this.readonly,id:this.id,inputmode:"numeric",onClick:this.onClick,onMouseDown:this.onMouseDown,onFocus:this.onFocus,onBlur:this.onBlur,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,type:"text"}),!this.readonly&&s("swirl-popover-trigger",{key:"8d588fae83751487fdacceb53d09f6030fdab74b",swirlPopover:"popover-"+this.id},s("button",{key:"0b5a831ca17bb7a24616625ea59c5a4ce330df8f","aria-label":this.datePickerTriggerLabel,class:"date-input__date-picker-button",disabled:this.disabled,type:"button"},s("swirl-icon-today",{key:"d961c2eb0baf5d7b643b5d50619c36ae4a864443",size:this.iconSize})))),!(this.disabled\|\|this.readonly)&&s("swirl-popover",{key:"3fd0b3eaa50b893873d48bb3f0976b862ff4e839",animation:"scale-in-y",class:"date-input__date-picker-popover",id:"popover-"+this.id,label:this.datePickerLabel,placement:"bottom-end",ref:t=>this.pickerPopover=t},s("swirl-date-picker",{key:"539b2e3b63d02c53acb4449d65ae9c502d2d9f22",disableDate:this.datePickerDisableDate,firstDayOfWeek:this.firstDayOfWeek,labels:this.labels,locale:this.locale,onValueChange:this.onPickDate,value:e,startDate:e})))}get el(){return this}static get watchers(){return{format:[{watchFormat:0}],value:[{watchValue:0}]}}static get style(){return".sc-swirl-date-input-h{display:flex;width:100%}.sc-swirl-date-input-h .sc-swirl-date-input{box-sizing:border-box}.date-input.sc-swirl-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:0}}.date-input__input.sc-swirl-date-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.date-input__input.sc-swirl-date-input:focus{outline:none}.date-input__input.sc-swirl-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__input.sc-swirl-date-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-input__date-picker-button.sc-swirl-date-input{position:absolute;top:calc(-1 var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.date-input__date-picker-button.sc-swirl-date-input:focus:not(:focus-visible){outline:none}.date-input__date-picker-button.sc-swirl-date-input:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-input__date-picker-button.sc-swirl-date-input:disabled{color:var(--s-icon-disabled);cursor:default}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__date-picker-button.sc-swirl-date-input{top:-0.625rem}}@media (max-width: 767px){.date-input__date-picker-popover.sc-swirl-date-input{position:fixed}}"}},[2,"swirl-date-input",{autoFocus:[4,"auto-focus"],autoSelect:[4,"auto-select"],datePickerDisableDate:[16],datePickerLabel:[1,"date-picker-label"],datePickerTriggerLabel:[1,"date-picker-trigger-label"],disabled:[4],firstDayOfWeek:[2,"first-day-of-week"],format:[1],inline:[4],invalid:[4],labels:[16],locale:[1],placeholder:[1],preferredInputMode:[1,"preferred-input-mode"],required:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1537],readonly:[4],iconSize:[32],isInPickOnlyMode:[32],openPicker:[64]},void 0,{format:[{watchFormat:0}],value:[{watchValue:0}]}]),v=k,g=function(){"undefined"!=typeof customElements&&["swirl-date-input","swirl-date-picker","swirl-icon-today","swirl-popover","swirl-popover-trigger","wc-datepicker"].forEach((t=>{switch(t){case"swirl-date-input":customElements.get(r(t))\|\|customElements.define(r(t),k);break;case"swirl-date-picker":customElements.get(r(t))\|\|u();break;case"swirl-icon-today":customElements.get(r(t))\|\|m();break;case"swirl-popover":customElements.get(r(t))\|\|f();break;case"swirl-popover-trigger":customElements.get(r(t))\|\|b();break;case"wc-datepicker":customElements.get(r(t))\|\|w()}}))};export{v as SwirlDateInput,g as defineCustomElement}