@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-app-icon.js

@@ -1,64 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-
-const swirlAppIconCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.app-icon{position:relative;overflow:hidden;width:var(--swirl-app-icon-size);height:var(--swirl-app-icon-size);border-radius:var(--s-border-radius-sm)}.app-icon>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.app-icon__icon{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center}";
-
-const SwirlAppIcon$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppIcon extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.setImageAvailable = () => {
-            this.imageAvailable = true;
-        };
-        this.setImageUnavailable = () => {
-            this.imageAvailable = false;
-        };
-        this.onImageElementUpdate = (el) => {
-            this.imgEl?.removeEventListener("load", this.setImageAvailable);
-            this.imgEl?.removeEventListener("error", this.setImageUnavailable);
-            this.imgEl = el;
-            if (this.imgEl) {
-                this.imgEl.addEventListener("load", this.setImageAvailable);
-                this.imgEl.addEventListener("error", this.setImageUnavailable);
-            }
-        };
-    }
-    disconnectedCallback() {
-        this.imgEl?.removeEventListener("load", this.setImageAvailable);
-        this.imgEl?.removeEventListener("error", this.setImageUnavailable);
-    }
-    render() {
-        const showImage = Boolean(this.src) &&
-            (this.imageAvailable || this.imageAvailable === undefined);
-        const showIcon = !showImage && Boolean(this.icon);
-        const showFallbackIcon = !showImage && !showIcon;
-        const className = classNames("app-icon", {
-            "app-icon--has-icon": showIcon || showFallbackIcon,
-        });
-        return (h(Host, { key: 'ab8397613faf92e7bd56601e2ad84eedb742dc7a' }, h("span", { key: '518c69f11b7206663037775198573e97a17086ea', class: className }, showImage && (h("img", { key: '08de1d2e7ff432842bbc4fa35fd7758a41e71b24', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (h("span", { key: '76b4a209381c29ed208ae9a56b16080ff4a0ffb2', class: "app-icon__icon", innerHTML: this.icon })))));
-    }
-    static get style() { return swirlAppIconCss; }
-}, [1, "swirl-app-icon", {
-        "icon": [1],
-        "src": [1],
-        "imageAvailable": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-app-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-app-icon":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlAppIcon$1);
-            }
-            break;
-    } });
-}
-
-const SwirlAppIcon = SwirlAppIcon$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlAppIcon, defineCustomElement };
+import{proxyCustomElement as i,HTMLElement as t,h as e,Host as s,transformTag as o}from"@stencil/core/internal/client";import{c as n}from"./index2.js";const r=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.setImageAvailable=()=>{this.imageAvailable=!0},this.setImageUnavailable=()=>{this.imageAvailable=!1},this.onImageElementUpdate=i=>{this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable),this.imgEl=i,this.imgEl&&(this.imgEl.addEventListener("load",this.setImageAvailable),this.imgEl.addEventListener("error",this.setImageUnavailable))}}disconnectedCallback(){this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable)}render(){const i=!!this.src&&(this.imageAvailable||void 0===this.imageAvailable),t=!i&&!!this.icon,o=n("app-icon",{"app-icon--has-icon":t||!i&&!t});return e(s,{key:"ab8397613faf92e7bd56601e2ad84eedb742dc7a"},e("span",{key:"518c69f11b7206663037775198573e97a17086ea",class:o},i&&e("img",{key:"08de1d2e7ff432842bbc4fa35fd7758a41e71b24",alt:"",height:"256",ref:this.onImageElementUpdate,src:this.src,width:"256"}),t&&e("span",{key:"76b4a209381c29ed208ae9a56b16080ff4a0ffb2",class:"app-icon__icon",innerHTML:this.icon})))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.app-icon{position:relative;overflow:hidden;width:var(--swirl-app-icon-size);height:var(--swirl-app-icon-size);border-radius:var(--s-border-radius-sm)}.app-icon>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.app-icon__icon{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center}"}},[1,"swirl-app-icon",{icon:[1],src:[1],imageAvailable:[32]}]),a=r,c=function(){"undefined"!=typeof customElements&&["swirl-app-icon"].forEach((i=>{"swirl-app-icon"===i&&(customElements.get(o(i))||customElements.define(o(i),r))}))};export{a as SwirlAppIcon,c as defineCustomElement}

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

@@ -1,6 +1 @@
-import { S as SwirlAppLayout$1, d as defineCustomElement$1 } from './swirl-app-layout2.js';
-
-const SwirlAppLayout = SwirlAppLayout$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlAppLayout, defineCustomElement };
+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.updateCustomAppBarBackButtonStatus(),this.updateNavigationStatus(),this.updateSidebarStatus()})),this.mutationObserver.observe(this.el,{childList:!0}),queueMicrotask((()=>{this.updateBottomBarStatus(),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 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())}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-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--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:"808d09845b3c44c91b2bebb06b423b8e30f31f24"},i("section",{key:"19afd6f9bb6759ef88be52a7ffa541fcb0f3042e","aria-labelledby":"app-name",class:r},i("div",{key:"d7b732bccc7fa1db84efdc99682a659d4f6d9db1",class:"app-layout__grid"},i("header",{key:"e5e168ec7492fbfa1d86f9f53d7f8bf112ba01c3",class:"app-layout__header",ref:a=>this.headerEl=a},i("span",{key:"f1cfb95b8ab7198b16f4ae80f0e5c87cdf23e4db",class:"app-layout__navigation-mobile-menu-button"},i("slot",{key:"e4424dbbda5dae4e0199419a2bb7126eac521ae3",name:"navigation-mobile-menu-button"})),this.collapsibleNavigation&&i("span",{key:"3a80b9b86b9f1d3b6e82dcac15042f767716d7b6",class:"app-layout__nav-overlay-toggle"},i("swirl-button",{key:"d959eca663eb67bbd367d6fecbe81ebd33f7ec89",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:"0077c515fa75ea162f9f6f08a815f7f10a55c4f0",class:"app-layout__navigation-back-button"},i("swirl-button",{key:"26c55f61f7714f6c469ed0b571636b731a1c8342",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.navigationBackButtonLabel,onClick:this.onNavigationBackButtonClick})),i("swirl-heading",{key:"0183674f244809bf68b68f847da8a1bd24ce5e71",as:"h1",class:"app-layout__app-name",headingId:"app-name",level:3,text:this.appName}),s&&i("span",{key:"9fb9fdd1a19239ccb7429a95678c1afb19646b1c",class:"app-layout__navigation-controls"},i("slot",{key:"b48147f3805285e1ba52560983808c16f3460b7f",name:"navigation-controls"}))),i("nav",{key:"0b974457471f128fef9851d2d6a92c58d349ce0f","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:"9f874431aa6c283c13282928dfe2d04e4fb95fe0",name:"navigation"})),i("section",{key:"9a9ed49fe755f527876e03b799f341451dcb087c","aria-labelledby":"app-name",class:"app-layout__body"},!this.hideAppBar&&i("header",{key:"600f437a4eaebc4d1f5caa2b09a22fba0e21f67b",class:"app-layout__app-bar"},i("span",{key:"e2194a2a054dd85e963d809230fadab1f8144a8e",class:"app-layout__app-bar-mobile-menu-button"},i("slot",{key:"f175b780599094ed2917217ea3a3d6b78d092ea1",name:"app-bar-mobile-menu-button"})),a&&i("span",{key:"fa12e03dfeb61432c43d4d2e14ebc5eca5ec9e44",class:"app-layout__back-to-navigation-button"},i("swirl-button",{key:"82ddf16354ec01f1bcb91f911cee259bda955070",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:"372fef147bd244c3e0320e52af84912b59c5073c",class:"app-layout__nav-expansion-toggle"},i("swirl-button",{key:"56a500351b687017249144c18331555be6cc937b",hideLabel:!0,icon:"<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>",label:this.navigationOverlayLabel,onClick:this.overlayNavigation})),i("span",{key:"ae652ddba7cc0f574ddcad3b1c4214c2cf6a5095",class:"app-layout__custom-app-bar-back-button"},i("slot",{key:"9e17301a1384c6253ec8beee4400d8bcd1f9da7f",name:"custom-app-bar-back-button"})),i("div",{key:"9327e4113bf8eb330579466acccf6a2d7e6f66ba",class:"app-layout__app-bar-content"},i("slot",{key:"62ad3d444303b7371046b9c5d52db7d875eb06c1",name:"app-bar"})),i("div",{key:"4127ab114335ecbba4d8f76be4c98a82aa066e05",class:"app-layout__app-bar-controls"},i("slot",{key:"82d77a853dfa54213340b8a4e90f23de01153c43",name:"app-bar-controls"}))),i("div",{key:"c59559aef7438797830980392ce998e83f5c2541",class:"app-layout__banner"},i("slot",{key:"94d57b7ebd365f555930a897676421bfbbca7287",name:"banner"})),i("div",{key:"ec87aa773bd192a472a479657456b10a83d1a617",class:"app-layout__content",onScroll:this.onContentScroll,ref:a=>this.contentEl=a},i("slot",{key:"72f56537058220c726d7ca90149154110d0eb9e4",name:"content"})),i("div",{key:"4ebb3c3a7438fb4dcc52e5be7ad9ce382e053af4",class:"app-layout__bottom-bar"},i("slot",{key:"6fd8d76dee4e9ed6173a238b61eaaba099d256dd",name:"bottom-bar"}))),i("aside",{key:"1f67a682e0a2153f687528ceba93f4cfe76b5204",class:"app-layout__sidebar"},i("header",{key:"57a7ec8c4305c764f4bc3a511a153097b9cc325e",class:"app-layout__custom-sidebar-header"},i("slot",{key:"ab6051fe7fcca4bfb0282e70de31ec91546f5854",name:"custom-sidebar-header"})),i("header",{key:"3669b924fea46580d7c9f812b5fe4606595eb47a",class:"app-layout__sidebar-header"},i("swirl-button",{key:"5ffd08f20950310ae8839911e2ba52d2e7437572",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:"6aaf4cae1080fbd64c0ae30ea5236f968a49c47a",as:"h3",class:"app-layout__sidebar-heading",headingId:"sidebar-heading",level:3,text:this.sidebarHeading})),i("div",{key:"6c7f53cb51266912abd97b2f2f6951eab618ceef",class:"app-layout__sidebar-content",onScroll:this.onSidebarScroll,ref:a=>this.sidebarEl=a},i("slot",{key:"900e1764202169042c096d740649724db80813a2",name:"sidebar"}))),i("span",{key:"0308414943fa5cd12f77656e16e32b5be832a5ff",class:"app-layout__floating-action-button"},this.ctaLabel&&i("swirl-button",{key:"d4a14733ccbd537c6cbd7c18ec8dbc4af599a1bf",hideLabel:!!this.ctaIcon,icon:this.ctaIcon,intent:"primary",label:this.ctaLabel,onClick:this.onCtaClick,variant:"floating"}),i("slot",{key:"6485bbd34a61cc9a0846554658bb5fbbdcd51ee9",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;width:25rem;z-index:auto;box-shadow:none;animation:none}}@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;top:0;right:0;bottom:0;width:min(40%, 25rem);z-index:3}.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-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) .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__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%;grid-area:body;grid-template-rows:minmax(var(--header-height), auto) auto 1fr;grid-template-areas:"app-bar"     "banner"     "content";background-color:var(--s-background-default)}.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}.app-layout__sidebar{display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);grid-area:sidebar;grid-template-rows:var(--header-height) 1fr;grid-template-areas:"sidebar-header"     "sidebar-content";background-color:var(--s-background-default)}@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}@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{border-radius:var(--s-border-radius-l);overflow:hidden}.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)}}@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;top:0;right:0;bottom:0;width:min(50%, 25rem);z-index:3;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 (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"],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],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],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(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{m as SwirlAppLayout,g as defineCustomElement}

package/dist/components/swirl-autocomplete.js

@@ -1,352 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as autoUpdate, c as computePosition, o as offset } from './floating-ui.dom.js';
-import { c as classNames } from './index2.js';
-import { d as debounce } from './utils.js';
-import { d as defineCustomElement$h } from './swirl-icon-cancel2.js';
-import { d as defineCustomElement$g } from './swirl-icon-check-small2.js';
-import { d as defineCustomElement$f } from './swirl-icon-check-strong2.js';
-import { d as defineCustomElement$e } from './swirl-icon-close2.js';
-import { d as defineCustomElement$d } from './swirl-icon-drag-handle2.js';
-import { d as defineCustomElement$c } from './swirl-icon-expand-less2.js';
-import { d as defineCustomElement$b } from './swirl-icon-expand-more2.js';
-import { d as defineCustomElement$a } from './swirl-icon-visibility2.js';
-import { d as defineCustomElement$9 } from './swirl-icon-visibility-off2.js';
-import { d as defineCustomElement$8 } from './swirl-option-list2.js';
-import { d as defineCustomElement$7 } from './swirl-option-list-item2.js';
-import { d as defineCustomElement$6 } from './swirl-spinner2.js';
-import { d as defineCustomElement$5 } from './swirl-stack2.js';
-import { d as defineCustomElement$4 } from './swirl-tag2.js';
-import { d as defineCustomElement$3 } from './swirl-text-input2.js';
-import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
-
-const swirlAutocompleteCss = ".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;max-height:18rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);animation:autocomplete-enter 0.1s;box-shadow:var(--s-shadow-level-1)}.autocomplete__listbox-container.sc-swirl-autocomplete:empty{display:none}.autocomplete__spinner.sc-swirl-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}.autocomplete__multi-select-tags.sc-swirl-autocomplete{margin-top:var(--swirl-autocomplete-tags-margin-top);margin-bottom:var(--s-space-4)}@keyframes autocomplete-enter{from{opacity:0}to{opacity:1}}";
-
-const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomplete extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.valueChange = createEvent(this, "valueChange", 7);
-        this.clearable = true;
-        this.clearButtonLabel = "Clear input";
-        this.generateSuggestions = async () => [];
-        this.menuLabel = "Suggestions";
-        this.active = false;
-        this.loading = false;
-        this.suggestions = [];
-        this.onChange = (event) => {
-            event.stopPropagation();
-            this.updateTerm(event);
-        };
-        this.updateTerm = debounce(async (event) => {
-            this.updateSuggestions(event.detail);
-            this.open();
-            if (this.multiSelect) {
-                return;
-            }
-            if (!Boolean(event.detail) || event.detail === "") {
-                this.value = undefined;
-                this.valueChange.emit(this.value);
-            }
-        }, 250, false);
-        this.onSelect = async (event) => {
-            event.stopPropagation();
-            if (this.multiSelect) {
-                const selectedItemIds = event.detail;
-                const unselectedItemIds = this.suggestions
-                    .filter((suggestion) => !selectedItemIds.includes(suggestion.id))
-                    .map((suggestion) => suggestion.id);
-                this.value = [
-                    ...this.value.filter((item) => !unselectedItemIds.includes(item.id)),
-                    ...this.suggestions.filter((suggestion) => selectedItemIds.includes(suggestion.id) &&
-                        !this.value.some((item) => item.id === suggestion.id)),
-                ];
-                this.valueChange.emit(this.value);
-                this.inputEl.value = "";
-                const input = this.inputEl.querySelector("input");
-                if (Boolean(input)) {
-                    input.value = "";
-                    queueMicrotask(() => {
-                        input.focus();
-                        this.close();
-                    });
-                    this.updateSuggestions(input.value);
-                }
-            }
-            else {
-                if (Boolean(event.detail[0])) {
-                    const itemId = event.detail[0];
-                    const suggestion = this.suggestions.find((suggestion) => suggestion.id === itemId);
-                    if (!Boolean(suggestion)) {
-                        return;
-                    }
-                    this.value = suggestion;
-                    this.valueChange.emit(this.value);
-                    queueMicrotask(() => {
-                        this.inputEl.querySelector("input")?.focus();
-                        this.close();
-                    });
-                }
-            }
-        };
-        this.onRemoveValue = (value) => {
-            if (!Array.isArray(this.value)) {
-                return;
-            }
-            this.value = this.value.filter((item) => item.id !== value);
-            this.valueChange.emit(this.value);
-        };
-        this.onFocusOut = (event) => {
-            const relatedTarget = event.relatedTarget;
-            if (Boolean(relatedTarget) && !this.el.contains(relatedTarget)) {
-                this.close();
-            }
-        };
-        this.onFocus = () => {
-            this.updateSuggestions();
-            this.open();
-        };
-        this.onKeyDown = (event) => {
-            if (event.code === "Escape") {
-                event.preventDefault();
-                event.stopPropagation();
-                this.inputEl.querySelector("input").focus();
-                this.close();
-            }
-        };
-        this.onInputKeyDown = (event) => {
-            if (event.code === "ArrowDown") {
-                event.preventDefault();
-                this.listboxEl
-                    .querySelector('[role="listbox"]')
-                    ?.querySelector('[tabIndex="0"]')
-                    ?.focus();
-            }
-        };
-    }
-    componentWillLoad() {
-        const index = document.querySelectorAll("swirl-datepicker").length;
-        this.id = `autocomplete-${index}`;
-        this.handleInitialValue();
-    }
-    onWindowClick(event) {
-        const target = event.target;
-        if (!this.el.contains(target)) {
-            this.close();
-        }
-    }
-    watchMultiSelect() {
-        this.handleInitialValue();
-    }
-    async close() {
-        if (!this.active) {
-            return;
-        }
-        if (this.disableAutoUpdate) {
-            this.disableAutoUpdate();
-        }
-        const inputEl = this.inputEl.querySelector("input");
-        if (Boolean(inputEl)) {
-            if (this.multiSelect) {
-                inputEl.value = "";
-            }
-            else {
-                inputEl.value =
-                    this.value?.label || "";
-            }
-        }
-        this.active = false;
-    }
-    async open() {
-        if (this.active) {
-            return;
-        }
-        this.active = true;
-        requestAnimationFrame(async () => {
-            await this.reposition();
-            if (this.disableAutoUpdate) {
-                this.disableAutoUpdate();
-            }
-            this.disableAutoUpdate = autoUpdate(this.inputEl, this.listboxContainerEl, this.reposition.bind(this), { animationFrame: true });
-            this.listboxContainerEl.scrollTop = 0;
-            this.updateSuggestions(this.inputEl.querySelector("input").value);
-        });
-    }
-    async reposition() {
-        if (!Boolean(this.listboxContainerEl)) {
-            return;
-        }
-        this.position = await computePosition(this.inputEl, this.listboxContainerEl, {
-            middleware: [offset({ crossAxis: -16, mainAxis: 16 })],
-            placement: "bottom-start",
-            strategy: "fixed",
-        });
-    }
-    async updateSuggestions(term) {
-        this.loading = true;
-        this.suggestions = [];
-        this.suggestions = await this.generateSuggestions(term);
-        this.loading = false;
-    }
-    handleInitialValue() {
-        if (this.multiSelect && !Array.isArray(this.value)) {
-            this.value = [];
-        }
-        if (!this.multiSelect && Array.isArray(this.value)) {
-            this.value = undefined;
-        }
-    }
-    render() {
-        const suggestionsMenuId = `${this.id}-suggestions`;
-        const clearable = this.clearable && !this.multiSelect;
-        const optionListValue = this.multiSelect
-            ? this.value.map((item) => item.id)
-            : Boolean(this.value)
-                ? [this.value.id]
-                : [];
-        const valueLabel = this.multiSelect
-            ? undefined
-            : this.value?.label || "";
-        const className = classNames("autocomplete", {
-            "autocomplete--inactive": !this.active,
-        });
-        return (h(Host, { key: '36f37cea5fdd7151673aa5c8ad30f652a1769609' }, h("div", { key: 'f1457ce0ea13ea7a769cd1de3eb3bf4cf2b9549b', class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&
-            Array.isArray(this.value) &&
-            this.value.length > 0 && (h("div", { key: '7b5b831a06dd7270386f857d198178a92e118580', class: "autocomplete__multi-select-tags" }, h("swirl-stack", { key: 'c5bf0b5bf1252f9bd8368917a27d9927e3b2c7c0', orientation: "horizontal", spacing: "8", wrap: true }, this.value.map((item) => {
-            return (h("swirl-tag", { key: item.id, label: item.label,
-                // eslint-disable-next-line react/jsx-no-bind
-                onRemove: () => this.onRemoveValue(item.id), removable: !this.disabled }));
-        })))), h("swirl-text-input", { key: 'f41ec2b57444ff45d75e039dad609d7b2ebf6d17', autoSelect: this.autoSelect, class: "autocomplete__input", clearable: clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: true, id: this.id, inline: this.inline, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellCheck: this.spellCheck, swirlAriaAutocomplete: "list", swirlAriaControls: suggestionsMenuId, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", value: valueLabel }), h("div", { key: 'a940d9511351d965da89de983885eb0d8819f977', class: "autocomplete__listbox-container", onFocusout: this.onFocusOut, ref: (el) => (this.listboxContainerEl = el), style: {
-                top: Boolean(this.position) ? `${this.position?.y}px` : "",
-                left: Boolean(this.position) ? `${this.position?.x}px` : "",
-                width: `${this.inputEl?.getBoundingClientRect().width + 32}px`,
-            } }, this.loading && (h("div", { key: 'bdcc2ec3441fa97915ac8d1ed4348a0c59101708', class: "autocomplete__spinner" }, h("swirl-spinner", { key: '08a8eeb925fcc515f76ae0d7edae2c5fc01f409f' }))), this.suggestions.length > 0 && (h("swirl-option-list", { key: '79b71e2f6aaabef56558d95229dc24ee26cb4056', allowDeselect: this.multiSelect === true, label: this.menuLabel, multiSelect: this.multiSelect, onValueChange: this.onSelect, optionListId: suggestionsMenuId, ref: (el) => (this.listboxEl = el), value: optionListValue }, this.suggestions.map((suggestion) => (h("swirl-option-list-item", { selected: Array.isArray(this.value)
-                ? this.value.some((item) => item.id === suggestion.id)
-                : this.value?.id === suggestion.id, key: suggestion.id, disabled: suggestion.disabled, label: suggestion.label, value: suggestion.id })))))))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "multiSelect": ["watchMultiSelect"]
-    }; }
-    static get style() { return swirlAutocompleteCss; }
-}, [2, "swirl-autocomplete", {
-        "autoSelect": [4, "auto-select"],
-        "clearable": [4],
-        "clearButtonLabel": [1, "clear-button-label"],
-        "disabled": [4],
-        "generateSuggestions": [1040, "generate-suggestions"],
-        "inline": [4],
-        "invalid": [4],
-        "maxLength": [2, "max-length"],
-        "menuLabel": [1, "menu-label"],
-        "mode": [1],
-        "multiSelect": [4, "multi-select"],
-        "placeholder": [1],
-        "required": [4],
-        "spellCheck": [4, "spell-check"],
-        "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
-        "value": [1040],
-        "active": [32],
-        "loading": [32],
-        "position": [32],
-        "suggestions": [32]
-    }, [[8, "click", "onWindowClick"]], {
-        "multiSelect": ["watchMultiSelect"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-autocomplete", "swirl-icon-cancel", "swirl-icon-check-small", "swirl-icon-check-strong", "swirl-icon-close", "swirl-icon-drag-handle", "swirl-icon-expand-less", "swirl-icon-expand-more", "swirl-icon-visibility", "swirl-icon-visibility-off", "swirl-option-list", "swirl-option-list-item", "swirl-spinner", "swirl-stack", "swirl-tag", "swirl-text-input", "swirl-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-autocomplete":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlAutocomplete$1);
-            }
-            break;
-        case "swirl-icon-cancel":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$h();
-            }
-            break;
-        case "swirl-icon-check-small":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$g();
-            }
-            break;
-        case "swirl-icon-check-strong":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$f();
-            }
-            break;
-        case "swirl-icon-close":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$e();
-            }
-            break;
-        case "swirl-icon-drag-handle":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$d();
-            }
-            break;
-        case "swirl-icon-expand-less":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "swirl-icon-expand-more":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "swirl-icon-visibility":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "swirl-icon-visibility-off":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "swirl-option-list":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "swirl-option-list-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "swirl-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "swirl-stack":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "swirl-tag":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "swirl-text-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlAutocomplete = SwirlAutocomplete$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlAutocomplete, defineCustomElement };
+import{proxyCustomElement as s,HTMLElement as i,createEvent as t,h as e,Host as o,transformTag as a}from"@stencil/core/internal/client";import{a as l,c as r,o as c}from"./floating-ui.dom.js";import{c as n}from"./index2.js";import{d as h}from"./utils.js";import{d as m}from"./swirl-icon-cancel2.js";import{d}from"./swirl-icon-check-small2.js";import{d as u}from"./swirl-icon-check-strong2.js";import{d as p}from"./swirl-icon-close2.js";import{d as w}from"./swirl-icon-drag-handle2.js";import{d as b}from"./swirl-icon-expand-less2.js";import{d as f}from"./swirl-icon-expand-more2.js";import{d as y}from"./swirl-icon-visibility2.js";import{d as k}from"./swirl-icon-visibility-off2.js";import{d as g}from"./swirl-option-list2.js";import{d as v}from"./swirl-option-list-item2.js";import{d as x}from"./swirl-spinner2.js";import{d as E}from"./swirl-stack2.js";import{d as j}from"./swirl-tag2.js";import{d as _}from"./swirl-text-input2.js";import{d as A}from"./swirl-visually-hidden2.js";const S=s(class extends i{constructor(s){super(),!1!==s&&this.__registerHost(),this.valueChange=t(this,"valueChange",7),this.clearable=!0,this.clearButtonLabel="Clear input",this.generateSuggestions=async()=>[],this.menuLabel="Suggestions",this.active=!1,this.loading=!1,this.suggestions=[],this.onChange=s=>{s.stopPropagation(),this.updateTerm(s)},this.updateTerm=h((async s=>{this.updateSuggestions(s.detail),this.open(),this.multiSelect||s.detail&&""!==s.detail||(this.value=void 0,this.valueChange.emit(this.value))}),250,!1),this.onSelect=async s=>{if(s.stopPropagation(),this.multiSelect){const i=s.detail,t=this.suggestions.filter((s=>!i.includes(s.id))).map((s=>s.id));this.value=[...this.value.filter((s=>!t.includes(s.id))),...this.suggestions.filter((s=>i.includes(s.id)&&!this.value.some((i=>i.id===s.id))))],this.valueChange.emit(this.value),this.inputEl.value="";const e=this.inputEl.querySelector("input");e&&(e.value="",queueMicrotask((()=>{e.focus(),this.close()})),this.updateSuggestions(e.value))}else if(s.detail[0]){const i=s.detail[0],t=this.suggestions.find((s=>s.id===i));if(!t)return;this.value=t,this.valueChange.emit(this.value),queueMicrotask((()=>{this.inputEl.querySelector("input")?.focus(),this.close()}))}},this.onRemoveValue=s=>{Array.isArray(this.value)&&(this.value=this.value.filter((i=>i.id!==s)),this.valueChange.emit(this.value))},this.onFocusOut=s=>{const i=s.relatedTarget;i&&!this.el.contains(i)&&this.close()},this.onFocus=()=>{this.updateSuggestions(),this.open()},this.onKeyDown=s=>{"Escape"===s.code&&(s.preventDefault(),s.stopPropagation(),this.inputEl.querySelector("input").focus(),this.close())},this.onInputKeyDown=s=>{"ArrowDown"===s.code&&(s.preventDefault(),this.listboxEl.querySelector('[role="listbox"]')?.querySelector('[tabIndex="0"]')?.focus())}}componentWillLoad(){const s=document.querySelectorAll("swirl-datepicker").length;this.id="autocomplete-"+s,this.handleInitialValue()}onWindowClick(s){this.el.contains(s.target)||this.close()}watchMultiSelect(){this.handleInitialValue()}async close(){if(!this.active)return;this.disableAutoUpdate&&this.disableAutoUpdate();const s=this.inputEl.querySelector("input");s&&(s.value=this.multiSelect?"":this.value?.label||""),this.active=!1}async open(){this.active||(this.active=!0,requestAnimationFrame((async()=>{await this.reposition(),this.disableAutoUpdate&&this.disableAutoUpdate(),this.disableAutoUpdate=l(this.inputEl,this.listboxContainerEl,this.reposition.bind(this),{animationFrame:!0}),this.listboxContainerEl.scrollTop=0,this.updateSuggestions(this.inputEl.querySelector("input").value)})))}async reposition(){this.listboxContainerEl&&(this.position=await r(this.inputEl,this.listboxContainerEl,{middleware:[c({crossAxis:-16,mainAxis:16})],placement:"bottom-start",strategy:"fixed"}))}async updateSuggestions(s){this.loading=!0,this.suggestions=[],this.suggestions=await this.generateSuggestions(s),this.loading=!1}handleInitialValue(){this.multiSelect&&!Array.isArray(this.value)&&(this.value=[]),!this.multiSelect&&Array.isArray(this.value)&&(this.value=void 0)}render(){const s=this.id+"-suggestions",i=this.clearable&&!this.multiSelect,t=this.multiSelect?this.value.map((s=>s.id)):this.value?[this.value.id]:[],a=this.multiSelect?void 0:this.value?.label||"",l=n("autocomplete",{"autocomplete--inactive":!this.active});return e(o,{key:"36f37cea5fdd7151673aa5c8ad30f652a1769609"},e("div",{key:"f1457ce0ea13ea7a769cd1de3eb3bf4cf2b9549b",class:l,onKeyDown:this.onKeyDown},this.multiSelect&&Array.isArray(this.value)&&this.value.length>0&&e("div",{key:"7b5b831a06dd7270386f857d198178a92e118580",class:"autocomplete__multi-select-tags"},e("swirl-stack",{key:"c5bf0b5bf1252f9bd8368917a27d9927e3b2c7c0",orientation:"horizontal",spacing:"8",wrap:!0},this.value.map((s=>e("swirl-tag",{key:s.id,label:s.label,onRemove:()=>this.onRemoveValue(s.id),removable:!this.disabled}))))),e("swirl-text-input",{key:"f41ec2b57444ff45d75e039dad609d7b2ebf6d17",autoSelect:this.autoSelect,class:"autocomplete__input",clearable:i,clearButtonLabel:this.clearButtonLabel,disabled:this.disabled,disableDynamicWidth:!0,id:this.id,inline:this.inline,invalid:this.invalid,onInputFocus:this.onFocus,onKeyDown:this.onInputKeyDown,onValueChange:this.onChange,maxLength:this.maxLength,mode:this.mode,placeholder:this.placeholder,ref:s=>this.inputEl=s,required:this.required,spellCheck:this.spellCheck,swirlAriaAutocomplete:"list",swirlAriaControls:s,swirlAriaDescribedby:this.swirlAriaDescribedby,swirlAriaExpanded:this.active+"",swirlRole:"combobox",value:a}),e("div",{key:"a940d9511351d965da89de983885eb0d8819f977",class:"autocomplete__listbox-container",onFocusout:this.onFocusOut,ref:s=>this.listboxContainerEl=s,style:{top:this.position?this.position?.y+"px":"",left:this.position?this.position?.x+"px":"",width:this.inputEl?.getBoundingClientRect().width+32+"px"}},this.loading&&e("div",{key:"bdcc2ec3441fa97915ac8d1ed4348a0c59101708",class:"autocomplete__spinner"},e("swirl-spinner",{key:"08a8eeb925fcc515f76ae0d7edae2c5fc01f409f"})),this.suggestions.length>0&&e("swirl-option-list",{key:"79b71e2f6aaabef56558d95229dc24ee26cb4056",allowDeselect:!0===this.multiSelect,label:this.menuLabel,multiSelect:this.multiSelect,onValueChange:this.onSelect,optionListId:s,ref:s=>this.listboxEl=s,value:t},this.suggestions.map((s=>e("swirl-option-list-item",{selected:Array.isArray(this.value)?this.value.some((i=>i.id===s.id)):this.value?.id===s.id,key:s.id,disabled:s.disabled,label:s.label,value:s.id})))))))}get el(){return this}static get watchers(){return{multiSelect:[{watchMultiSelect:0}]}}static get style(){return".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;max-height:18rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);animation:autocomplete-enter 0.1s;box-shadow:var(--s-shadow-level-1)}.autocomplete__listbox-container.sc-swirl-autocomplete:empty{display:none}.autocomplete__spinner.sc-swirl-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}.autocomplete__multi-select-tags.sc-swirl-autocomplete{margin-top:var(--swirl-autocomplete-tags-margin-top);margin-bottom:var(--s-space-4)}@keyframes autocomplete-enter{from{opacity:0}to{opacity:1}}"}},[2,"swirl-autocomplete",{autoSelect:[4,"auto-select"],clearable:[4],clearButtonLabel:[1,"clear-button-label"],disabled:[4],generateSuggestions:[1040],inline:[4],invalid:[4],maxLength:[2,"max-length"],menuLabel:[1,"menu-label"],mode:[1],multiSelect:[4,"multi-select"],placeholder:[1],required:[4],spellCheck:[4,"spell-check"],swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1040],active:[32],loading:[32],position:[32],suggestions:[32]},[[8,"click","onWindowClick"]],{multiSelect:[{watchMultiSelect:0}]}]),C=S,D=function(){"undefined"!=typeof customElements&&["swirl-autocomplete","swirl-icon-cancel","swirl-icon-check-small","swirl-icon-check-strong","swirl-icon-close","swirl-icon-drag-handle","swirl-icon-expand-less","swirl-icon-expand-more","swirl-icon-visibility","swirl-icon-visibility-off","swirl-option-list","swirl-option-list-item","swirl-spinner","swirl-stack","swirl-tag","swirl-text-input","swirl-visually-hidden"].forEach((s=>{switch(s){case"swirl-autocomplete":customElements.get(a(s))||customElements.define(a(s),S);break;case"swirl-icon-cancel":customElements.get(a(s))||m();break;case"swirl-icon-check-small":customElements.get(a(s))||d();break;case"swirl-icon-check-strong":customElements.get(a(s))||u();break;case"swirl-icon-close":customElements.get(a(s))||p();break;case"swirl-icon-drag-handle":customElements.get(a(s))||w();break;case"swirl-icon-expand-less":customElements.get(a(s))||b();break;case"swirl-icon-expand-more":customElements.get(a(s))||f();break;case"swirl-icon-visibility":customElements.get(a(s))||y();break;case"swirl-icon-visibility-off":customElements.get(a(s))||k();break;case"swirl-option-list":customElements.get(a(s))||g();break;case"swirl-option-list-item":customElements.get(a(s))||v();break;case"swirl-spinner":customElements.get(a(s))||x();break;case"swirl-stack":customElements.get(a(s))||E();break;case"swirl-tag":customElements.get(a(s))||j();break;case"swirl-text-input":customElements.get(a(s))||_();break;case"swirl-visually-hidden":customElements.get(a(s))||A()}}))};export{C as SwirlAutocomplete,D as defineCustomElement}