@getflip/swirl-components 0.118.3 → 0.118.5

package/dist/swirl-components/p-3795fbb4.entry.js

@@ -1 +0,0 @@
-import{r as l,c as s,h as a,H as e}from"./p-3fca9a05.js";import{c as o}from"./p-b7898321.js";import{c as i}from"./p-c2e1dfdb.js";const t="SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE",r="SWIRL_SHELL_SIDEBAR_STATE",h=class{constructor(a){l(this,a),this.sidebarToggleClick=s(this,"sidebarToggleClick",7),this.skipLinkClick=s(this,"skipLinkClick",7),this.onBrowserBackClick=()=>{history.back()},this.onBrowserForwardClick=()=>{history.forward()},this.onNavigationToggleClick=()=>{this.navigationCollapsed=!this.navigationCollapsed},this.onNavigationClick=()=>{this.hideMobileNavigation()},this.brandedHeader=void 0,this.browserBackButtonLabel="Navigate back",this.browserForwardButtonLabel="Navigate forward",this.hideMobileNavigationButtonLabel="Close navigation",this.navigationLabel="Main",this.navigationToggleLabel="Toggle navigation",this.sidebarActive=void 0,this.sidebarToggleBadge=void 0,this.sidebarToggleBadgeAriaLabel=void 0,this.sidebarToggleIcon="notifications",this.sidebarToggleLabel="Toggle sidebar",this.skipLinkLabel="Skip to main content",this.mobileNavigationActive=void 0,this.navigationCollapsed=void 0}componentWillLoad(){const l="true"===localStorage.getItem(r);this.sidebarActive=void 0===this.sidebarActive?l:this.sidebarActive;const s="true"===localStorage.getItem(t);this.navigationCollapsed=s}componentDidLoad(){this.focusTrap=i(this.navElement,{allowOutsideClick:!0,tabbableOptions:{getShadowRoot:l=>l.shadowRoot}})}componentDidRender(){this.focusTrap?.updateContainerElements(this.navElement)}disconnectedCallback(){this.focusTrap?.deactivate()}onWindowKeyDown(l){"Escape"===l.key&&this.mobileNavigationActive&&this.hideMobileNavigation()}watchMobileNavigationState(){this.mobileNavigationActive?setTimeout((()=>{this.focusTrap.activate()}),200):this.focusTrap.deactivate()}watchNavigationCollapsed(){localStorage.setItem(t,String(this.navigationCollapsed))}watchSidebarActive(){localStorage.setItem(r,String(this.sidebarActive))}async showMobileNavigation(){this.mobileNavigationActive=!0}async hideMobileNavigation(){this.mobileNavigationActive=!1}render(){const l=o("shell-layout",{"shell-layout--branded-header":this.brandedHeader,"shell-layout--mobile-navigation-active":this.mobileNavigationActive,"shell-layout--navigation-collapsed":this.navigationCollapsed,"shell-layout--sidebar-active":this.sidebarActive});return a(e,null,a("div",{class:l},a("header",{class:"shell-layout__header","data-tauri-drag-region":"true"},a("button",{class:"shell-layout__skip-link",onClick:this.skipLinkClick.emit,type:"button"},this.skipLinkLabel),a("div",{class:"shell-layout__header-left"},a("button",{class:"shell-layout__header-tool shell-layout__navigation-toggle",onClick:this.onNavigationToggleClick,type:"button"},a("swirl-icon-menu",{size:20}),a("swirl-icon-double-arrow-left",{size:20}),a("swirl-icon-double-arrow-right",{size:20}),a("swirl-visually-hidden",null,this.navigationToggleLabel)),a("button",{class:"shell-layout__header-tool",onClick:this.onBrowserBackClick,type:"button"},a("swirl-icon-arrow-back",{size:20}),a("swirl-visually-hidden",null,this.browserBackButtonLabel)),a("button",{class:"shell-layout__header-tool",onClick:this.onBrowserForwardClick,type:"button"},a("swirl-icon-arrow-forward",{size:20}),a("swirl-visually-hidden",null,this.browserForwardButtonLabel))),a("div",{class:"shell-layout__logo"},a("slot",{name:"logo"})),a("div",{class:"shell-layout__header-right"},a("button",{class:"shell-layout__header-tool shell-layout__sidebar-toggle",onClick:this.sidebarToggleClick.emit,type:"button"},a("swirl-icon",{glyph:this.sidebarToggleIcon,size:20}),a("swirl-visually-hidden",null,this.sidebarToggleLabel),this.sidebarToggleBadge&&a("swirl-badge",{"aria-label":this.sidebarToggleBadgeAriaLabel,label:this.sidebarToggleBadge,size:"xs"})),a("slot",{name:"header-tools"}))),a("div",{class:"shell-layout__mobile-nav-backdrop",onClick:this.onNavigationClick}),a("nav",{"aria-labelledby":"main-navigation-label",class:"shell-layout__nav",onClick:this.onNavigationClick,ref:l=>this.navElement=l},a("div",{class:"shell-layout__mobile-header"},a("slot",{name:"mobile-logo"}),a("div",{class:"shell-layout__mobile-header-tools"},a("slot",{name:"mobile-header-tools"}),a("button",{class:"shell-layout__header-tool",type:"button"},a("swirl-icon-double-arrow-left",{size:20}),a("swirl-visually-hidden",null,this.hideMobileNavigationButtonLabel)))),a("div",{class:"shell-layout__nav-body"},a("swirl-visually-hidden",null,a("span",{id:"main-navigation-label"},this.navigationLabel)),a("slot",{name:"nav"}))),a("main",{class:"shell-layout__main",id:"main-content"},a("slot",null)),a("aside",{class:"shell-layout__sidebar"},a("div",{class:"shell-layout__sidebar-body"},a("div",{class:"shell-layout__sidebar-app-bar"},a("slot",{name:"sidebar-app-bar"})),a("div",{class:"shell-layout__sidebar-content"},a("slot",{name:"sidebar"}))))))}static get watchers(){return{mobileNavigationActive:["watchMobileNavigationState"],navigationCollapsed:["watchNavigationCollapsed"],sidebarActive:["watchSidebarActive"]}}};h.style='.sc-swirl-shell-layout-h{--swirl-shell-background:var(--s-surface-sunken-default);--swirl-shell-text-color:var(--s-text-default);--swirl-shell-header-height:3.25rem;--swirl-shell-collapsed-nav-width:3.75rem;--swirl-shell-extended-nav-width:14rem;--swirl-shell-sidebar-width:21rem;display:flex;width:100%;height:100%}.sc-swirl-shell-layout-h *.sc-swirl-shell-layout{box-sizing:border-box}.shell-layout.sc-swirl-shell-layout{display:grid;width:100%;min-height:100%;background-color:var(--swirl-shell-background);transition:grid-template-columns 0.2s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:"nav main"}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);gap:var(--s-space-8);grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr 0;grid-template-rows:var(--swirl-shell-header-height) 1fr;grid-template-areas:"header header header"\n      "nav main sidebar"}}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout{border-bottom:none;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-action-primary-hovered)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-action-primary-pressed)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-action-primary-default)}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__navigation-toggle.sc-swirl-shell-layout:hover swirl-icon-double-arrow-left.sc-swirl-shell-layout{display:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__navigation-toggle.sc-swirl-shell-layout:hover swirl-icon-double-arrow-right.sc-swirl-shell-layout{display:inline-flex}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr 0}}@media (min-width: 1440px){.shell-layout--sidebar-active.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr var(\n          --swirl-shell-sidebar-width\n        )}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__main.sc-swirl-shell-layout{width:100%}}@media (min-width: 992px){.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar-body.sc-swirl-shell-layout{border:0.0625rem solid var(--s-border-default);transform:translate3d(0, 0, 0)}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr var(\n        --swirl-shell-sidebar-width\n      )}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:translate3d(0, 0, 0);box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:none;box-shadow:none}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:block}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:none}}.shell-layout__header.sc-swirl-shell-layout{position:relative;display:none;width:calc(100% + var(--s-space-8));padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:0.0625rem solid var(--s-border-default);color:var(--swirl-shell-text-color);grid-area:header}@media (min-width: 992px){.shell-layout__header.sc-swirl-shell-layout{display:flex}}.shell-layout__skip-link.sc-swirl-shell-layout{position:absolute;z-index:9;top:0;left:0;padding:var(--s-space-4);border:none;color:var(--swirl-shell-text-color);background-color:var(--swirl-shell-background);font:inherit;cursor:pointer}.shell-layout__skip-link.sc-swirl-shell-layout:not(:focus):not(:active){position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%)}.shell-layout__header-left.sc-swirl-shell-layout{display:flex;flex-basis:8rem;flex-shrink:0;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{display:flex;flex-basis:8rem;flex-shrink:0;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__logo.sc-swirl-shell-layout{display:flex;flex-grow:1;justify-content:center;align-items:center}.shell-layout__logo.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__header-tool.sc-swirl-shell-layout{position:relative;width:2.25rem;height:2.25rem;padding:var(--s-space-8);border:none;border-radius:var(--s-border-radius-sm);color:var(--swirl-shell-text-color);background-color:var(--s-surface-sunken-default);font:inherit;cursor:pointer}.shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-sunken-hovered)}.shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-sunken-pressed)}.shell-layout__header-tool.sc-swirl-shell-layout:focus{outline:none}.shell-layout__header-tool.sc-swirl-shell-layout:focus-visible{box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-surface-sunken-default);position:absolute;right:0;bottom:0;transform:translate3d(0.1875rem, 0, 0)}.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:none}@media (min-width: 992px){.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:block}}.shell-layout__navigation-toggle.sc-swirl-shell-layout:hover swirl-icon-menu.sc-swirl-shell-layout{display:none}.shell-layout__navigation-toggle.sc-swirl-shell-layout:hover swirl-icon-double-arrow-left.sc-swirl-shell-layout{display:inline-flex}.shell-layout__navigation-toggle.sc-swirl-shell-layout swirl-icon-double-arrow-right.sc-swirl-shell-layout,.shell-layout__navigation-toggle.sc-swirl-shell-layout swirl-icon-double-arrow-left.sc-swirl-shell-layout{display:none}.shell-layout__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.2s, box-shadow 0.2s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:static;max-width:none;padding-top:0;padding-right:var(--s-space-4);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);background-color:var(--swirl-shell-background);transform:none;box-shadow:none;inset:auto}}.shell-layout__mobile-header.sc-swirl-shell-layout{display:flex;min-height:3.5rem;margin-bottom:var(--s-space-8);padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:0.0625rem solid var(--s-border-default)}.shell-layout__mobile-header.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{background-color:var(--s-surface-overlay-default)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-overlay-hovered)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-overlay-pressed)}@media (min-width: 992px){.shell-layout__mobile-header.sc-swirl-shell-layout{display:none}}.shell-layout__mobile-header-tools.sc-swirl-shell-layout{display:flex;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout{padding:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout-s ul{margin:0;padding:0;list-style:none}.shell-layout__nav-body.sc-swirl-shell-layout-s li{display:flex}@media (min-width: 992px){.shell-layout__nav-body.sc-swirl-shell-layout{padding:0}}.shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{position:fixed;z-index:8;display:none;background-color:rgba(0, 0, 0, 0.25);animation:shell-layout-backdrop-fade-in 0.2s;inset:0}.shell-layout__main.sc-swirl-shell-layout{overflow:hidden;grid-area:main}@media (min-width: 992px){.shell-layout__main.sc-swirl-shell-layout{width:calc(100% + var(--s-space-8));border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm)}}.shell-layout__sidebar.sc-swirl-shell-layout{position:relative;display:none;grid-area:sidebar}@media (min-width: 992px){.shell-layout__sidebar.sc-swirl-shell-layout{display:block}}@media (min-width: 1440px){.shell-layout__sidebar.sc-swirl-shell-layout{overflow:hidden}}.shell-layout__sidebar-body.sc-swirl-shell-layout{z-index:1;display:flex;width:var(--swirl-shell-sidebar-width);height:100%;border-radius:var(--s-border-radius-sm);background-color:var(--s-background-default);flex-direction:column}@media (min-width: 992px){.shell-layout__sidebar-body.sc-swirl-shell-layout{position:absolute;top:0;right:0;bottom:0;transition:transform 0.2s;transform:translate3d(calc(100% + var(--s-space-24)), 0, 0);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 1440px){.shell-layout__sidebar-body.sc-swirl-shell-layout{position:relative;transform:none;box-shadow:none;inset:auto}}.shell-layout__sidebar-app-bar.sc-swirl-shell-layout{flex-grow:0;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.shell-layout__sidebar-content.sc-swirl-shell-layout{overflow:auto;flex-grow:1}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}';export{h as swirl_shell_layout}