@getflip/swirl-components 0.236.0 → 0.236.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.json +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-app-layout_5.cjs.entry.js +69 -6
- package/dist/cjs/swirl-box.cjs.entry.js +32 -12
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-shell-layout.cjs.entry.js +30 -9
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-app-layout/swirl-app-layout.css +25 -69
- package/dist/collection/components/swirl-app-layout/swirl-app-layout.js +72 -6
- package/dist/collection/components/swirl-box/swirl-box.css +29 -64
- package/dist/collection/components/swirl-box/swirl-box.js +36 -11
- package/dist/collection/components/swirl-box/swirl-box.spec.js +3 -3
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.css +5 -54
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.js +32 -10
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.spec.js +1 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-app-layout2.js +73 -7
- package/dist/components/swirl-box2.js +34 -13
- package/dist/components/swirl-shell-layout.js +33 -11
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-app-layout_5.entry.js +70 -7
- package/dist/esm/swirl-box.entry.js +33 -13
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-shell-layout.entry.js +31 -10
- package/dist/swirl-components/p-18eaac73.entry.js +1 -0
- package/dist/swirl-components/p-78bcc5e4.entry.js +1 -0
- package/dist/swirl-components/p-f8c383cf.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-app-layout/swirl-app-layout.d.ts +23 -0
- package/dist/types/components/swirl-box/swirl-box.d.ts +9 -0
- package/dist/types/components/swirl-shell-layout/swirl-shell-layout.d.ts +8 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-3625bbf5.entry.js +0 -1
- package/dist/swirl-components/p-b4f192f1.entry.js +0 -1
- package/dist/swirl-components/p-e4d94c29.entry.js +0 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { c as classNames } from './index2.js';
|
|
3
|
-
import { i as isMobileViewport, f as prefersReducedMotion } from './utils.js';
|
|
3
|
+
import { d as debounce, i as isMobileViewport, f as prefersReducedMotion } from './utils.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './swirl-button2.js';
|
|
5
5
|
import { d as defineCustomElement$1 } from './swirl-heading2.js';
|
|
6
6
|
|
|
7
|
-
const swirlAppLayoutCss = ":host{--swirl-app-layout-border-visibility:hidden;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:3.5625rem 1fr;grid-template-areas:\"body\"\n \"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\"\n \"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\"\n \"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: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-active .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).app-layout--sidebar-active .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).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).app-layout--sidebar-closing .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:\"body sidebar\"\n \"body sidebar\"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n \"body\"}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{animation:app-layout-sidebar-slide-in 0.3s;grid-template-columns:25rem 1fr 25rem;grid-template-areas:\"header body sidebar\"\n \"navigation body sidebar\"}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{animation:none}}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.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.app-layout--sidebar-closing .app-layout__grid{animation:none}}}@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\"\n \"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: 768px) and (max-width: 1799px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);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\"\n \"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\"\n \"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\"\n \"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) .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 .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(3.5625rem, auto) auto 1fr auto;grid-template-areas:\"app-bar\"\n \"banner\"\n \"content\"\n \"bottom-bar\"}.app-layout--has-bottom-bar .app-layout__bottom-bar{display:block}.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button{display:block}.app-layout--has-custom-sidebar-header .app-layout__sidebar-header{display:none}.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header{display:block}.app-layout--has-floating-action-button .app-layout__floating-action-button{display:block}.app-layout--hide-app-bar .app-layout__body{grid-template-rows:auto 1fr;grid-template-areas:\"banner\"\n \"content\"}.app-layout__header{z-index:1;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;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)}@media (min-width: 768px){.app-layout__app-bar-mobile-menu-button{padding-left:0}}.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{z-index:1;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__body{z-index:2;display:grid;width:100%;height:100%;grid-area:body;grid-template-rows:minmax(3.5625rem, auto) auto 1fr;grid-template-areas:\"app-bar\"\n \"banner\"\n \"content\"}.app-layout__app-bar{--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem;display:flex;min-width:0;align-items:center;background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}.app-layout__bottom-bar{display:none;min-width:0;align-items:center;background-color:var(--s-background-default);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;background-color:var(--s-background-default);grid-area:content}.app-layout__sidebar{z-index:3;display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);grid-area:sidebar;grid-template-rows:3.5625rem 1fr;grid-template-areas:\"sidebar-header\"\n \"sidebar-content\"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout__sidebar{animation:none}}}@media (min-width: 1800px){.app-layout__sidebar{width:25rem;animation:none}}.app-layout__custom-sidebar-header{display:none;min-width:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);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;background-color:var(--s-background-default);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;background-color:var(--s-background-default);grid-area:sidebar-content}.app-layout__bordered-container-when-scrolled{animation:app-layout-detect-scroll;animation-fill-mode:none;scroll-timeline:--scroll-timeline y;animation-timeline:--scroll-timeline}.app-layout__bordered-container-when-scrolled:before,.app-layout__bordered-container-when-scrolled:after{position:sticky;z-index:1;top:0;display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default);content:\"\"}@supports (\n (scroll-timeline: --scroll-timeline y) and\n (animation-timeline: --scroll-timeline)\n ){.app-layout__bordered-container-when-scrolled:before,.app-layout__bordered-container-when-scrolled:after{visibility:var(--swirl-app-layout-border-visibility);animation-name:app-layout-border-reveal;animation-fill-mode:both;animation-range:1px 1px;animation-timeline:--scroll-timeline}}.app-layout__bordered-container-when-scrolled:after{display:none;top:auto;bottom:0}.app-layout__bordered-container-when-scrolled--with-bottom:after{display:block;animation-direction:reverse;animation-range:calc(100% - 1px) calc(100% - 1px)}@keyframes app-layout-border-reveal{0%{background-color:transparent}100%{background-color:var(--s-border-default)}}@keyframes app-layout-detect-scroll{from,to{--swirl-app-layout-border-visibility:visible}}@media (max-width: 767px){.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(.app-layout--mobile-view-body) .app-layout__grid,.app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(.app-layout--mobile-view-navigation) .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"header\"\n \"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\"\n \"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-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 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}}";
|
|
7
|
+
const swirlAppLayoutCss = ":host{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:3.5625rem 1fr;grid-template-areas:\"body\"\n \"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\"\n \"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\"\n \"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: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-active .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).app-layout--sidebar-active .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar:not(.app-layout--has-navigation).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).app-layout--sidebar-closing .app-layout__grid{animation:none}}}@media (min-width: 768px){.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{grid-template-columns:1fr min(50%, 25rem);grid-template-areas:\"body sidebar\"\n \"body sidebar\"}}.app-layout--has-sidebar .app-layout__grid{grid-template-columns:100%;grid-template-areas:\"body\"\n \"body\"}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{animation:app-layout-sidebar-slide-in 0.3s;grid-template-columns:25rem 1fr 25rem;grid-template-areas:\"header body sidebar\"\n \"navigation body sidebar\"}@media (prefers-reduced-motion){.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid{animation:none}}}@media (min-width: 1800px){.app-layout--has-navigation.app-layout--has-sidebar.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.app-layout--sidebar-closing .app-layout__grid{animation:none}}}@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\"\n \"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: 768px) and (max-width: 1799px){.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar{position:absolute;top:0;right:0;bottom:0;width:min(40%, 25rem);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\"\n \"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\"\n \"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\"\n \"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) .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 .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(3.5625rem, auto) auto 1fr auto;grid-template-areas:\"app-bar\"\n \"banner\"\n \"content\"\n \"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}.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\"\n \"content\"}.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;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)}@media (min-width: 768px){.app-layout__app-bar-mobile-menu-button{padding-left:0}}.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{z-index:1;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__body{z-index:2;display:grid;width:100%;height:100%;grid-area:body;grid-template-rows:minmax(3.5625rem, auto) auto 1fr;grid-template-areas:\"app-bar\"\n \"banner\"\n \"content\"}.app-layout__app-bar{--swirl-tab-bar-border-width:0;--swirl-tab-bar-height:3.5rem;display:flex;min-width:0;align-items:center;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);grid-area:app-bar;gap:var(--s-space-8)}.app-layout__bottom-bar{display:none;min-width:0;align-items:center;background-color:var(--s-background-default);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;background-color:var(--s-background-default);grid-area:content}.app-layout__sidebar{z-index:3;display:grid;width:100%;height:100%;border-left:var(--s-border-width-default) solid var(--s-border-default);grid-area:sidebar;grid-template-rows:3.5625rem 1fr;grid-template-areas:\"sidebar-header\"\n \"sidebar-content\"}@media (min-width: 768px){.app-layout__sidebar{animation:app-layout-slide-in 0.3s}@media (prefers-reduced-motion){.app-layout__sidebar{animation:none}}}@media (min-width: 1800px){.app-layout__sidebar{width:25rem;animation:none}}.app-layout__custom-sidebar-header{display:none;min-width:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default);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;background-color:var(--s-background-default);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;background-color:var(--s-background-default);grid-area:sidebar-content}@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\"\n \"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\"\n \"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-out{from{overflow:hidden;grid-template-columns:25rem 1fr 25rem}to{overflow:hidden;grid-template-columns:25rem 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}}";
|
|
8
8
|
const SwirlAppLayoutStyle0 = swirlAppLayoutCss;
|
|
9
9
|
|
|
10
10
|
const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout extends HTMLElement {
|
|
@@ -28,6 +28,15 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
|
|
|
28
28
|
this.onSidebarCloseButtonClick = () => {
|
|
29
29
|
this.hideSidebar();
|
|
30
30
|
};
|
|
31
|
+
this.onContentScroll = debounce(() => {
|
|
32
|
+
this.updateContentScrollState();
|
|
33
|
+
}, 16);
|
|
34
|
+
this.onNavScroll = debounce(() => {
|
|
35
|
+
this.updateNavScrollState();
|
|
36
|
+
}, 16);
|
|
37
|
+
this.onSidebarScroll = debounce(() => {
|
|
38
|
+
this.updateSidebarScrollState();
|
|
39
|
+
}, 16);
|
|
31
40
|
this.appName = undefined;
|
|
32
41
|
this.backToNavigationViewButtonLabel = "Back to navigation";
|
|
33
42
|
this.ctaIcon = undefined;
|
|
@@ -40,11 +49,24 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
|
|
|
40
49
|
this.sidebarCloseButtonLabel = "Close sidebar";
|
|
41
50
|
this.sidebarHeading = undefined;
|
|
42
51
|
this.transitionStyle = "slides";
|
|
52
|
+
this.contentScrollState = {
|
|
53
|
+
scrollable: false,
|
|
54
|
+
scrolledToTop: false,
|
|
55
|
+
scrolledToBottom: false,
|
|
56
|
+
};
|
|
43
57
|
this.hasCustomAppBarBackButton = undefined;
|
|
44
58
|
this.hasSidebar = undefined;
|
|
45
59
|
this.mobileView = "navigation";
|
|
60
|
+
this.navScrollState = {
|
|
61
|
+
scrollable: false,
|
|
62
|
+
scrolledToTop: false,
|
|
63
|
+
};
|
|
46
64
|
this.sidebarActive = undefined;
|
|
47
65
|
this.sidebarClosing = undefined;
|
|
66
|
+
this.sidebarScrollState = {
|
|
67
|
+
scrollable: false,
|
|
68
|
+
scrolledToTop: false,
|
|
69
|
+
};
|
|
48
70
|
this.transitioningFrom = undefined;
|
|
49
71
|
this.transitioningTo = undefined;
|
|
50
72
|
}
|
|
@@ -62,6 +84,13 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
|
|
|
62
84
|
this.checkMobileView();
|
|
63
85
|
});
|
|
64
86
|
}
|
|
87
|
+
componentDidLoad() {
|
|
88
|
+
queueMicrotask(() => {
|
|
89
|
+
this.updateContentScrollState();
|
|
90
|
+
this.updateSidebarScrollState();
|
|
91
|
+
this.updateNavScrollState();
|
|
92
|
+
});
|
|
93
|
+
}
|
|
65
94
|
disconnectedCallback() {
|
|
66
95
|
this.mutationObserver?.disconnect();
|
|
67
96
|
}
|
|
@@ -174,6 +203,36 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
|
|
|
174
203
|
updateSidebarStatus() {
|
|
175
204
|
this.hasSidebar = Boolean(this.el.querySelector('[slot="sidebar"]'));
|
|
176
205
|
}
|
|
206
|
+
updateContentScrollState() {
|
|
207
|
+
const newContentScrollState = {
|
|
208
|
+
scrollable: this.contentEl.scrollHeight > this.contentEl.clientHeight,
|
|
209
|
+
scrolledToTop: this.contentEl.scrollTop === 0,
|
|
210
|
+
scrolledToBottom: Math.round(this.contentEl.scrollTop + this.contentEl.clientHeight) >=
|
|
211
|
+
this.contentEl.scrollHeight,
|
|
212
|
+
};
|
|
213
|
+
if (Object.keys(newContentScrollState).some((key) => newContentScrollState[key] !== this.contentScrollState[key])) {
|
|
214
|
+
this.contentScrollState = newContentScrollState;
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
updateNavScrollState() {
|
|
218
|
+
const newNavScrollState = {
|
|
219
|
+
scrollable: this.navEl.scrollHeight > this.navEl.clientHeight,
|
|
220
|
+
scrolledToTop: this.navEl.scrollTop === 0,
|
|
221
|
+
};
|
|
222
|
+
if (Object.keys(newNavScrollState).some((key) => newNavScrollState[key] !== this.navScrollState[key])) {
|
|
223
|
+
this.navScrollState = newNavScrollState;
|
|
224
|
+
console.log(this.navScrollState);
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
updateSidebarScrollState() {
|
|
228
|
+
const newSidebarScrollState = {
|
|
229
|
+
scrollable: this.sidebarEl.scrollHeight > this.sidebarEl.clientHeight,
|
|
230
|
+
scrolledToTop: this.sidebarEl.scrollTop === 0,
|
|
231
|
+
};
|
|
232
|
+
if (Object.keys(newSidebarScrollState).some((key) => newSidebarScrollState[key] !== this.sidebarScrollState[key])) {
|
|
233
|
+
this.sidebarScrollState = newSidebarScrollState;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
177
236
|
render() {
|
|
178
237
|
const showBackToNavigationButton = (this.mobileView === "body" || this.transitioningTo) &&
|
|
179
238
|
this.hasNavigation &&
|
|
@@ -185,6 +244,9 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
|
|
|
185
244
|
const hasFloatingActionButton = Boolean(this.el.querySelector('[slot="floating-action-button"]')) ||
|
|
186
245
|
Boolean(this.ctaLabel);
|
|
187
246
|
const className = classNames("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, {
|
|
247
|
+
"app-layout--content-scrollable": this.contentScrollState.scrollable,
|
|
248
|
+
"app-layout--content-scrolled-to-top": this.contentScrollState.scrolledToTop,
|
|
249
|
+
"app-layout--content-scrolled-to-bottom": this.contentScrollState.scrolledToBottom,
|
|
188
250
|
"app-layout--has-app-bar-mobile-menu-button": hasAppBarMobileMenuButton,
|
|
189
251
|
"app-layout--has-app-bar-controls": hasAppBarControls,
|
|
190
252
|
"app-layout--has-bottom-bar": hasBottomBar,
|
|
@@ -194,15 +256,16 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
|
|
|
194
256
|
"app-layout--has-navigation": this.hasNavigation,
|
|
195
257
|
"app-layout--has-sidebar": this.hasSidebar,
|
|
196
258
|
"app-layout--hide-app-bar": this.hideAppBar,
|
|
259
|
+
"app-layout--nav-scrollable": this.navScrollState.scrollable,
|
|
260
|
+
"app-layout--nav-scrolled-to-top": this.navScrollState.scrolledToTop,
|
|
197
261
|
"app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
|
|
198
262
|
"app-layout--sidebar-closing": this.sidebarClosing,
|
|
263
|
+
"app-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
|
|
264
|
+
"app-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
|
|
199
265
|
});
|
|
200
|
-
|
|
201
|
-
"app-layout__bordered-container-when-scrolled--with-bottom": hasBottomBar,
|
|
202
|
-
});
|
|
203
|
-
return (h(Host, { key: '668d6353288ed339c914dfd5853975fb14e7eb50' }, h("section", { key: 'eb60a8b74569daaa31a3b561beceb9cb6de96649', "aria-labelledby": "app-name", class: className }, h("div", { key: '278cb332b22b52e8d477abd6e12b3e3d6e66d88c', class: "app-layout__grid" }, h("header", { key: 'c201859201a575607dd64850772b2f3fde85cd6c', class: "app-layout__header" }, h("span", { key: 'a4f07edc51b55a5b8de8d0fe5e7cae00c50971b1', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: 'c7132539b8899aa78321215debf3f8f958eabfe1', name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (h("span", { key: '0085e3f23bfc356330e7914f22d28f5121554b8f', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '8f4746e36051e3e07bb61e9dcb5cc74c15ef9615', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: 'ba764530fc0119e01a58439d7e89350dc8a7ea6c', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (h("span", { key: '562fea0575de96f9037e57d2ac6c3ba2dc4849c7', class: "app-layout__navigation-controls" }, h("slot", { key: '54a9280f257960f2a3311bb88f053788a7fac321', name: "navigation-controls" })))), h("nav", { key: 'cd5caefbcbb95dbd8e847c928bed97e96536b1ec', "aria-label": this.navigationLabel, class: "app-layout__navigation app-layout__bordered-container-when-scrolled" }, h("slot", { key: 'b73e0c0b38797fea7afb32996801cd85fae959ad', name: "navigation" })), h("section", { key: '23d2fed9e1daaf350e6b2151ee2e82cb7deef866', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: 'c41fd7da8d79d2e898bd5e685108d160eb0d1d1f', class: "app-layout__app-bar" }, h("span", { key: '1b7b24c2ce491bf9f232680963e3692215d51ccb', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: '7574d98216d1d82ab2ad44f6f2a22f82ff0aceba', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: 'aec64303b2e4537ba9205f0b781e6356cae5dbe1', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: 'c4c270bd35e21070b72f989d2ce475b7253b4223', hideLabel: true, icon: this.transitionStyle === "dialog"
|
|
266
|
+
return (h(Host, { key: 'e1c143341fd6969c1c041c8667c1b5e12fce7aa7' }, h("section", { key: 'd2f3d3a309e94232a6a52c04a179a72240f6bb21', "aria-labelledby": "app-name", class: className }, h("div", { key: '82a77b84d23df1dda86d2627e6a9457f578a89d0', class: "app-layout__grid" }, h("header", { key: 'f837eb5675d9a95ec154a09c30bfc454114a35ac', class: "app-layout__header" }, h("span", { key: 'f76efa5dd39576397f5abe701bc4d40d7c6d9af5', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: 'eb27c59a6865695a44738a1d7211f650e82888ef', name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (h("span", { key: 'c90faef21b76cc16486ebe7ffa821736ddef3b49', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: 'b16105381660b7b82b6d7953d7bf72747533439f', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: '7c21b9cd00e4bec6a22cb70a3d8753fa93dac5ba', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (h("span", { key: '2e92cfc7aacdd18234dc7d6e8433beb8ecccd0b6', class: "app-layout__navigation-controls" }, h("slot", { key: '4c30f7f89096cd55f77537d91461a693005a164f', name: "navigation-controls" })))), h("nav", { key: '42cc3847d5f7c4625d76739e421813c2de1e9c13', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el) }, h("slot", { key: '429284c750ec28528eb79f3e2939454ac8773c99', name: "navigation" })), h("section", { key: '285f41876c6c8269ab32d5efcadab18e72d72b32', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '9c9fa128d13e801866b795b0f02ae21474c8fe34', class: "app-layout__app-bar" }, h("span", { key: '098969ee820c3f266c043e24c71b23d07203b322', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: 'dde9756b11f38853fd2e933e5ebeb3cc827f3fd4', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: '9d6e8465877307289761645d9cdef16b5b0e7577', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: '1587d585995e7460b68f09df9ae09fa1c266ceab', hideLabel: true, icon: this.transitionStyle === "dialog"
|
|
204
267
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
205
|
-
: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), h("span", { key: '
|
|
268
|
+
: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), h("span", { key: 'c1c48d5e9f1216a544fbfe19d6e1541ad58c8022', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: '141fc56495d55974f45698b574ccb6aa03cb36ab', name: "custom-app-bar-back-button" })), h("div", { key: '83876ab43ab755de43fa7f0d265fd4c060553ddd', class: "app-layout__app-bar-content" }, h("slot", { key: 'd56068856254dce82abf6eacc77b19afabac1bd1', name: "app-bar" })), h("div", { key: '95aca875b629e0bdfba5ca87ed2597c331d9bbaa', class: "app-layout__app-bar-controls" }, h("slot", { key: '46461160969d62537a6f04b20bb40ca44fa5ac3e', name: "app-bar-controls" })))), h("div", { key: '388b20d9d6b51687125477c38edd601c1a1bfe0d', class: "app-layout__banner" }, h("slot", { key: '8bf5886dc50092e8b4e1d9e8b8404b27ed3f09b9', name: "banner" })), h("div", { key: 'abec882ab4905d6a372dc10e4d18ce6bb66df3b3', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, h("slot", { key: '46e9b03f9ec3a0d38635d9fe3f35435355edd4a9', name: "content" })), h("div", { key: '34a7df3ed10f150228bc01fee063bed4f746f5a3', class: "app-layout__bottom-bar" }, h("slot", { key: 'facff75f429f360dda267e1985f931d0e341d75e', name: "bottom-bar" }))), h("aside", { key: 'cac7a6b6c2096bc60a2e5c36fd22ba46c3a19eaa', class: "app-layout__sidebar" }, h("header", { key: '351c7eba83509cec13b15f0aa8e15896d0b07503', class: "app-layout__custom-sidebar-header" }, h("slot", { key: '1434eb1cf6d0bf07117b120c57a5f51a397fedba', name: "custom-sidebar-header" })), h("header", { key: 'ff40be3b889ad61df3fa960383c6dc7b34bb1a96', class: "app-layout__sidebar-header" }, h("swirl-button", { key: '57fe1abf43d7eb0becf55660672555079123d533', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { key: '1c6406d5fba477bcaabdc6a354a22a0f9a676f47', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: 'bc8a084ddf4a13ee9d08eef391a48ce4f2adb7de', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, h("slot", { key: '4b253e9ea5b8a764772fe6df923c9382bac8f8ff', name: "sidebar" }))), h("span", { key: 'bf7564a728b954ce0c7415308cfb4bbde8abb847', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: 'd1821cf6ebabb0c0aa35887aed1b3fd836956966', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: 'ee95d554c358f25cdebf4c9d348e1816d266e8be', name: "floating-action-button" }))))));
|
|
206
269
|
}
|
|
207
270
|
get el() { return this; }
|
|
208
271
|
static get watchers() { return {
|
|
@@ -222,11 +285,14 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
|
|
|
222
285
|
"sidebarCloseButtonLabel": [1, "sidebar-close-button-label"],
|
|
223
286
|
"sidebarHeading": [1, "sidebar-heading"],
|
|
224
287
|
"transitionStyle": [1, "transition-style"],
|
|
288
|
+
"contentScrollState": [32],
|
|
225
289
|
"hasCustomAppBarBackButton": [32],
|
|
226
290
|
"hasSidebar": [32],
|
|
227
291
|
"mobileView": [32],
|
|
292
|
+
"navScrollState": [32],
|
|
228
293
|
"sidebarActive": [32],
|
|
229
294
|
"sidebarClosing": [32],
|
|
295
|
+
"sidebarScrollState": [32],
|
|
230
296
|
"transitioningFrom": [32],
|
|
231
297
|
"transitioningTo": [32],
|
|
232
298
|
"showSidebar": [64],
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { c as classNames } from './index2.js';
|
|
3
3
|
|
|
4
|
-
const swirlBoxCss = ":host{--
|
|
4
|
+
const swirlBoxCss = ":host{display:block;width:100%}:host(.box--bordered){border:var(--s-border-width-default) solid var(--s-border-default)}:host(.box--border-color-default){border-color:var(--s-border-default)}:host(.box--border-color-strong){border-color:var(--s-border-strong)}:host(.box--bordered-block-end){border-block-end-width:var(--s-border-width-default);border-block-end-style:solid}:host(.box--bordered-block-start){border-block-start-width:var(--s-border-width-default);border-block-start-style:solid}:host(.box--bordered-inline-end){border-inline-end-width:var(--s-border-width-default);border-inline-end-style:solid}:host(.box--bordered-inline-start){border-inline-start-width:var(--s-border-width-default);border-inline-start-style:solid}:host(.box--bordered-block-start-when-scrolled.box--scrollable){border-block-start-width:var(--s-border-width-default);border-block-start-style:solid;border-block-start-color:transparent}:host(.box--bordered-block-start-when-scrolled.box--scrollable:not(.box--scrolled-to-top)){border-block-start-color:var(--s-border-default)}:host(.box--bordered-block-end-when-scrolled.box--scrollable){border-block-end-width:var(--s-border-width-default);border-block-end-style:solid;border-block-end-color:transparent}:host(.box--bordered-block-end-when-scrolled.box--scrollable:not(.box--scrolled-to-bottom)){border-block-end-color:var(--s-border-default)}:host(.box--cover){width:100%;height:100%}:host *{box-sizing:border-box}";
|
|
5
5
|
const SwirlBoxStyle0 = swirlBoxCss;
|
|
6
6
|
|
|
7
7
|
const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLElement {
|
|
@@ -9,6 +9,9 @@ const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLEle
|
|
|
9
9
|
super();
|
|
10
10
|
this.__registerHost();
|
|
11
11
|
this.__attachShadow();
|
|
12
|
+
this.onScroll = () => {
|
|
13
|
+
this.updateScrollState();
|
|
14
|
+
};
|
|
12
15
|
this.borderColor = "default";
|
|
13
16
|
this.bordered = undefined;
|
|
14
17
|
this.borderedBlockEnd = undefined;
|
|
@@ -41,13 +44,31 @@ const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLEle
|
|
|
41
44
|
this.top = undefined;
|
|
42
45
|
this.width = undefined;
|
|
43
46
|
this.zIndex = undefined;
|
|
47
|
+
this.scrollState = {
|
|
48
|
+
scrollable: false,
|
|
49
|
+
scrolledToBottom: false,
|
|
50
|
+
scrolledToTop: false,
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
componentDidLoad() {
|
|
54
|
+
queueMicrotask(() => {
|
|
55
|
+
this.updateScrollState();
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
updateScrollState() {
|
|
59
|
+
const newScrollState = {
|
|
60
|
+
scrollable: this.el.scrollHeight > this.el.clientHeight,
|
|
61
|
+
scrolledToTop: this.el.scrollTop === 0,
|
|
62
|
+
scrolledToBottom: Math.round(this.el.scrollTop + this.el.clientHeight) >=
|
|
63
|
+
this.el.scrollHeight,
|
|
64
|
+
};
|
|
65
|
+
if (Object.keys(newScrollState).some((key) => newScrollState[key] !== this.scrollState[key])) {
|
|
66
|
+
this.scrollState = newScrollState;
|
|
67
|
+
}
|
|
44
68
|
}
|
|
45
69
|
render() {
|
|
46
70
|
const styles = {
|
|
47
71
|
alignItems: this.centerBlock ? "center" : undefined,
|
|
48
|
-
borderColor: this.borderColor === "default"
|
|
49
|
-
? "var(--s-border-default)"
|
|
50
|
-
: "var(--s-border-strong)",
|
|
51
72
|
bottom: this.bottom,
|
|
52
73
|
display: this.centerBlock || this.centerInline ? "flex" : undefined,
|
|
53
74
|
flexBasis: this.basis,
|
|
@@ -82,23 +103,22 @@ const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLEle
|
|
|
82
103
|
width: this.cover ? "100%" : this.width,
|
|
83
104
|
zIndex: this.zIndex,
|
|
84
105
|
};
|
|
85
|
-
|
|
86
|
-
this.borderedBlockStartWhenScrolled) {
|
|
87
|
-
console.warn(`[Swirl] swirl-box does not support both borderedBlockEndWhenScrolled and borderedBlockStartWhenScrolled properties to be active at the same time. Please use only one of them.`);
|
|
88
|
-
}
|
|
89
|
-
const className = classNames("box", {
|
|
106
|
+
const className = classNames("box", `box--border-color-${this.borderColor}`, {
|
|
90
107
|
"box--bordered": this.bordered,
|
|
91
108
|
"box--bordered-block-end": this.borderedBlockEnd,
|
|
92
109
|
"box--bordered-block-end-when-scrolled": this.borderedBlockEndWhenScrolled,
|
|
93
110
|
"box--bordered-block-start": this.borderedBlockStart,
|
|
94
|
-
"box--bordered-block-start-when-scrolled": this.borderedBlockStartWhenScrolled
|
|
95
|
-
!this.borderedBlockEndWhenScrolled,
|
|
111
|
+
"box--bordered-block-start-when-scrolled": this.borderedBlockStartWhenScrolled,
|
|
96
112
|
"box--bordered-inline-end": this.borderedInlineEnd,
|
|
97
113
|
"box--bordered-inline-start": this.borderedInlineStart,
|
|
98
114
|
"box--cover": this.cover,
|
|
115
|
+
"box--scrollable": this.scrollState.scrollable,
|
|
116
|
+
"box--scrolled-to-top": this.scrollState.scrolledToTop,
|
|
117
|
+
"box--scrolled-to-bottom": this.scrollState.scrolledToBottom,
|
|
99
118
|
});
|
|
100
|
-
return (h(Host, { key: '
|
|
119
|
+
return (h(Host, { key: 'ba15fab8d8879d6fc8cb8c857dd86f506d5c7acc', class: className, onScroll: this.onScroll, style: styles }, h("slot", { key: '8d036df8e7644c4512caf9147c25033820dac55b' })));
|
|
101
120
|
}
|
|
121
|
+
get el() { return this; }
|
|
102
122
|
static get style() { return SwirlBoxStyle0; }
|
|
103
123
|
}, [1, "swirl-box", {
|
|
104
124
|
"borderColor": [1, "border-color"],
|
|
@@ -132,7 +152,8 @@ const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLEle
|
|
|
132
152
|
"grow": [1],
|
|
133
153
|
"top": [1],
|
|
134
154
|
"width": [1],
|
|
135
|
-
"zIndex": [1, "z-index"]
|
|
155
|
+
"zIndex": [1, "z-index"],
|
|
156
|
+
"scrollState": [32]
|
|
136
157
|
}]);
|
|
137
158
|
function defineCustomElement() {
|
|
138
159
|
if (typeof customElements === "undefined") {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { c as classNames } from './index2.js';
|
|
3
3
|
import { c as createFocusTrap } from './focus-trap.esm.js';
|
|
4
|
-
import { e as isDesktopViewport } from './utils.js';
|
|
4
|
+
import { d as debounce, e as isDesktopViewport } from './utils.js';
|
|
5
5
|
import { d as defineCustomElement$e } from './swirl-badge2.js';
|
|
6
6
|
import { d as defineCustomElement$d } from './swirl-box2.js';
|
|
7
7
|
import { d as defineCustomElement$c } from './swirl-button2.js';
|
|
@@ -16,7 +16,7 @@ import { d as defineCustomElement$4 } from './swirl-stack2.js';
|
|
|
16
16
|
import { d as defineCustomElement$3 } from './swirl-tooltip2.js';
|
|
17
17
|
import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
|
|
18
18
|
|
|
19
|
-
const swirlShellLayoutCss = ".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:4rem;--swirl-shell-extended-nav-width:18rem;--swirl-shell-sidebar-width:21rem;--swirl-shell-border-visibility:hidden;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;overflow:hidden;width:100%;min-height:100%;background-color:var(--swirl-shell-background);transition:grid-template-columns 0.1s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:\"nav main\"}@media (prefers-reduced-motion){.shell-layout.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);-moz-column-gap:var(--s-space-8);column-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)}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{max-width:100%;max-height:3rem;flex-basis:100%}@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%}}.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar.sc-swirl-shell-layout{overflow:initial}@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 )}}.sc-swirl-shell-layout:not(.shell-layout--sidebar-active) .shell-layout__sidebar.sc-swirl-shell-layout{animation:shell-layout-no-overflow-after-transition 0.1s;animation-fill-mode:forwards}.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--has-secondary-nav.sc-swirl-shell-layout .shell-layout__secondary-nav.sc-swirl-shell-layout{display:block}.shell-layout--secondary-nav-collapsed.sc-swirl-shell-layout .shell-layout__secondary-nav-items.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;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);clip-path:inset(50%)}.shell-layout__header-left.sc-swirl-shell-layout{display:flex;padding-left:var(--s-space-2);flex-basis:8rem;flex-shrink:0;align-items:center;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{--swirl-ghost-button-background-default:var(--s-surface-sunken-default);--swirl-ghost-button-background-hovered:var(--s-surface-sunken-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-sunken-pressed);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>a{display:flex}.shell-layout__logo.sc-swirl-shell-layout-s>a img,.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);flex-shrink:0;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;top:var(--s-space-4);right:var(--s-space-4);padding-right:var(--s-space-2);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__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow-x:hidden;overflow-y:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.1s, box-shadow 0.1s, width 0.1s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (prefers-reduced-motion){.shell-layout__nav.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:relative;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.1s;inset:0}.shell-layout__secondary-nav.sc-swirl-shell-layout{display:none}.shell-layout__secondary-nav-items.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items .sc-swirl-shell-layout-s>ul{display:flex;flex-direction:column;gap:var(--s-space-2)}.shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul{flex-wrap:wrap;flex-direction:row;gap:var(--s-space-16)}.shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{min-width:0;max-height:none;flex-basis:calc(50% - var(--s-space-8))}.shell-layout__main.sc-swirl-shell-layout{overflow:hidden;background-color:var(--s-background-default);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;min-height:0;grid-area:sidebar}@media (min-width: 992px){.shell-layout__sidebar.sc-swirl-shell-layout{display:block}}.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.1s;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}}@media (prefers-reduced-motion){.shell-layout__sidebar-body.sc-swirl-shell-layout{transition:none}}.shell-layout__sidebar-app-bar.sc-swirl-shell-layout{flex-grow:0;flex-shrink:0}.shell-layout__sidebar-content.sc-swirl-shell-layout{overflow:auto;flex-grow:1}.shell-layout__revealing-scroll-border-container.sc-swirl-shell-layout{animation:shell-layout-detect-scroll;animation-fill-mode:none;scroll-timeline:--scroll-timeline y;animation-timeline:--scroll-timeline}.shell-layout__revealing-scroll-border-container.sc-swirl-shell-layout:before{position:sticky;z-index:1;top:0;display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default);content:\"\"}@supports ( (scroll-timeline: --scroll-timeline y) and (animation-timeline: --scroll-timeline) ){.shell-layout__revealing-scroll-border-container.sc-swirl-shell-layout:before{visibility:var(--swirl-shell-layout-border-visibility);animation-name:shell-layout-border-reveal;animation-fill-mode:both;animation-range:1px 1px;animation-timeline:--scroll-timeline}}@keyframes shell-layout-border-reveal{0%{background-color:transparent}100%{background-color:var(--s-border-default)}}@keyframes shell-layout-detect-scroll{from,to{--swirl-shell-layout-border-visibility:visible}}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-no-overflow-after-transition{0%{overflow:initial}99%{overflow:initial}100%{overflow:hidden}}";
|
|
19
|
+
const swirlShellLayoutCss = ".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:4rem;--swirl-shell-extended-nav-width:18rem;--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;overflow:hidden;width:100%;min-height:100%;background-color:var(--swirl-shell-background);transition:grid-template-columns 0.1s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:\"nav main\"}@media (prefers-reduced-motion){.shell-layout.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);-moz-column-gap:var(--s-space-8);column-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)}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{max-width:100%;max-height:3rem;flex-basis:100%}@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%}}.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar.sc-swirl-shell-layout{overflow:initial}@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 )}}.sc-swirl-shell-layout:not(.shell-layout--sidebar-active) .shell-layout__sidebar.sc-swirl-shell-layout{animation:shell-layout-no-overflow-after-transition 0.1s;animation-fill-mode:forwards}.shell-layout--sidebar-scrollable.sc-swirl-shell-layout:not(.shell-layout--sidebar-scrolled-to-top) .shell-layout__sidebar-app-bar.sc-swirl-shell-layout{border-bottom-color:var(--s-border-default)}.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--has-secondary-nav.sc-swirl-shell-layout .shell-layout__secondary-nav.sc-swirl-shell-layout{display:block}.shell-layout--secondary-nav-collapsed.sc-swirl-shell-layout .shell-layout__secondary-nav-items.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;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);clip-path:inset(50%)}.shell-layout__header-left.sc-swirl-shell-layout{display:flex;padding-left:var(--s-space-2);flex-basis:8rem;flex-shrink:0;align-items:center;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{--swirl-ghost-button-background-default:var(--s-surface-sunken-default);--swirl-ghost-button-background-hovered:var(--s-surface-sunken-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-sunken-pressed);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>a{display:flex}.shell-layout__logo.sc-swirl-shell-layout-s>a img,.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);flex-shrink:0;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;top:var(--s-space-4);right:var(--s-space-4);padding-right:var(--s-space-2);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__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow-x:hidden;overflow-y:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.1s, box-shadow 0.1s, width 0.1s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (prefers-reduced-motion){.shell-layout__nav.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:relative;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.1s;inset:0}.shell-layout__secondary-nav.sc-swirl-shell-layout{display:none}.shell-layout__secondary-nav-items.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items .sc-swirl-shell-layout-s>ul{display:flex;flex-direction:column;gap:var(--s-space-2)}.shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul{flex-wrap:wrap;flex-direction:row;gap:var(--s-space-16)}.shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{min-width:0;max-height:none;flex-basis:calc(50% - var(--s-space-8))}.shell-layout__main.sc-swirl-shell-layout{overflow:hidden;background-color:var(--s-background-default);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;min-height:0;grid-area:sidebar}@media (min-width: 992px){.shell-layout__sidebar.sc-swirl-shell-layout{display:block}}.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.1s;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}}@media (prefers-reduced-motion){.shell-layout__sidebar-body.sc-swirl-shell-layout{transition:none}}.shell-layout__sidebar-app-bar.sc-swirl-shell-layout{flex-grow:0;flex-shrink:0;border-bottom:var(--s-border-width-default) solid transparent}.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}}@keyframes shell-layout-no-overflow-after-transition{0%{overflow:initial}99%{overflow:initial}100%{overflow:hidden}}";
|
|
20
20
|
const SwirlShellLayoutStyle0 = swirlShellLayoutCss;
|
|
21
21
|
|
|
22
22
|
const SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGATION_COLLAPSE_STATE";
|
|
@@ -57,6 +57,9 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
|
|
|
57
57
|
this.onNavigationClick = () => {
|
|
58
58
|
this.hideMobileNavigation();
|
|
59
59
|
};
|
|
60
|
+
this.onSidebarScroll = debounce(() => {
|
|
61
|
+
this.updateSidebarScrollState();
|
|
62
|
+
}, 16);
|
|
60
63
|
this.brandedHeader = undefined;
|
|
61
64
|
this.browserBackButtonLabel = "Navigate back";
|
|
62
65
|
this.browserForwardButtonLabel = "Navigate forward";
|
|
@@ -75,11 +78,15 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
|
|
|
75
78
|
this.sidebarToggleIcon = "notifications";
|
|
76
79
|
this.sidebarToggleLabel = "Toggle sidebar";
|
|
77
80
|
this.skipLinkLabel = "Skip to main content";
|
|
81
|
+
this.isDesktopViewport = true;
|
|
78
82
|
this.mobileNavigationActive = undefined;
|
|
79
83
|
this.navigationCollapsed = undefined;
|
|
80
84
|
this.secondaryNavCollapsed = undefined;
|
|
81
85
|
this.secondaryNavView = "list";
|
|
82
|
-
this.
|
|
86
|
+
this.sidebarScrollState = {
|
|
87
|
+
scrollable: false,
|
|
88
|
+
scrolledToTop: false,
|
|
89
|
+
};
|
|
83
90
|
}
|
|
84
91
|
componentWillLoad() {
|
|
85
92
|
this.isDesktopViewport = isDesktopViewport();
|
|
@@ -111,6 +118,9 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
|
|
|
111
118
|
childList: true,
|
|
112
119
|
subtree: true,
|
|
113
120
|
});
|
|
121
|
+
queueMicrotask(() => {
|
|
122
|
+
this.updateSidebarScrollState();
|
|
123
|
+
});
|
|
114
124
|
}
|
|
115
125
|
componentDidRender() {
|
|
116
126
|
this.focusTrap?.updateContainerElements(this.navElement);
|
|
@@ -188,6 +198,15 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
|
|
|
188
198
|
restoredSecondaryNavigationViewState;
|
|
189
199
|
}
|
|
190
200
|
}
|
|
201
|
+
updateSidebarScrollState() {
|
|
202
|
+
const newSidebarScrollState = {
|
|
203
|
+
scrollable: this.sidebarContentEl.scrollHeight > this.sidebarContentEl.clientHeight,
|
|
204
|
+
scrolledToTop: this.sidebarContentEl.scrollTop === 0,
|
|
205
|
+
};
|
|
206
|
+
if (Object.keys(newSidebarScrollState).some((key) => newSidebarScrollState[key] !== this.sidebarScrollState[key])) {
|
|
207
|
+
this.sidebarScrollState = newSidebarScrollState;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
191
210
|
render() {
|
|
192
211
|
const hasSidebarToggleBadgeWithLabel = this.sidebarToggleBadge !== true && this.sidebarToggleBadge !== "true";
|
|
193
212
|
const mainNavCollapsed = this.navigationCollapsed && this.isDesktopViewport;
|
|
@@ -199,26 +218,28 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
|
|
|
199
218
|
"shell-layout--mobile-navigation-active": this.mobileNavigationActive,
|
|
200
219
|
"shell-layout--navigation-collapsed": mainNavCollapsed,
|
|
201
220
|
"shell-layout--sidebar-active": this.sidebarActive,
|
|
221
|
+
"shell-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
|
|
222
|
+
"shell-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
|
|
202
223
|
});
|
|
203
|
-
return (h(Host, { key: '
|
|
224
|
+
return (h(Host, { key: '3b4dde369cc2ff87ec3787fd16c6d3891eee64a2' }, h("div", { key: '481d0ffb5971b469c8c3aeabbbd9664ac60b9ecc', class: className }, h("header", { key: '4a7c9b3e3ec8d94e9b57af3e3e9234a75616cb04', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '1657cf85ff234865c97b781ef43c61a6b0408787', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '6dcf45949f30e1c8a8a9f546b57bf4c301683383', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: '52aaa6168ae6ba526de7d166f2715ed308a4f14b', content: this.navigationCollapsed
|
|
204
225
|
? this.expandNavigationButtonLabel
|
|
205
|
-
: this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '
|
|
226
|
+
: this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '5794af83ada5a690d5b886b7851ebf3040eb3a6f', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (h("swirl-icon-dock-left-expand", { size: 20 })) : (h("swirl-icon-dock-left-collapse", { size: 20 })), h("swirl-visually-hidden", { key: '7377d48d26b43655fdfe6e81a707d6a22e5a8fe5' }, this.navigationCollapsed
|
|
206
227
|
? this.expandNavigationButtonLabel
|
|
207
|
-
: this.collapseNavigationButtonLabel))), h("a", { key: '
|
|
228
|
+
: this.collapseNavigationButtonLabel))), h("a", { key: 'a79fd7930d423211d0ca0612526cbc04fd9b4f75', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '5990be011ad330438b1f83db24af889031798416', size: 20 }), h("swirl-visually-hidden", { key: 'fcf6be5e10ec3025bda5955c6b2f7a398ef15d44' }, this.browserBackButtonLabel)), h("a", { key: '405400b3ef2ba463a99491a5d57db59a3f0a2b12', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: 'df9e159d79ba95988af66a4b4a458e1589737e8f', size: 20 }), h("swirl-visually-hidden", { key: 'b4d18ead34e9413e97c622185fea3bbbb32b6dcb' }, this.browserForwardButtonLabel)), h("slot", { key: '2ee9f2c2a81a91292f80772cf371f5d2ccb493db', name: "left-header-tools" })), h("div", { key: '529199ad8c9ceff25399c235e947bf7027982b20', class: "shell-layout__logo" }, h("slot", { key: '1f9fb29b9147e2b6eaad49389d17cb17aa80658a', name: "logo" })), h("div", { key: 'e2b887179b9960d8863dd24ccbf2c7e8be009602', class: "shell-layout__header-right" }, h("slot", { key: '5540a6435490d75aff8864301d93ad72a3c7c6dd', name: "right-header-tools" }), h("button", { key: '26b6176d55c5c1e079691caa36a725922392aec5', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: 'ec7b16e7412ba48981aebffd91c2d9e014efb2a5', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '4b1903a46a028e0895a101e865ab8242c92dc89c' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: 'ce74e5c85492858648ca7265e7b1365ee84ffe87', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
|
|
208
229
|
? this.sidebarToggleBadgeAriaLabel
|
|
209
|
-
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '
|
|
230
|
+
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: 'f52288a44afbeb1392193d05f0bc4501a17940dd', name: "avatar" }))), h("div", { key: '924b06cd336bf0cc0292edadc08b0b2b3e0dfb47', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: 'bed15393425dc10357b10ba7d022c853d0b9b32a', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '6c02d3de25c1812624b46d058ee943c343fc3089', class: "shell-layout__mobile-header" }, h("slot", { key: '97d21882939ac034227d2017157503d1f4f901e4', name: "mobile-logo" }), h("div", { key: 'bb5bc9344be7981ac68e57f69065fc6d482d536e', class: "shell-layout__mobile-header-tools" }, h("slot", { key: 'fc58fa45d88b04d882a10d53e44474b30cb98921', name: "mobile-header-tools" }), h("button", { key: '011c8055b176a4174cff580e96f884e2518641c9', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'f414e31f2f2c91c83a8cc4ae3ac965977549723a', size: 20 }), h("swirl-visually-hidden", { key: '4328d1f7a9bbbbc9abcfe73aeb4a2927244ace8e' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '48f594da912cd8cb3f3d88ef222c6ff4e1999e0a', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '4c5ce4e38948ac823a08b91bffccc8393e52e05f' }, h("span", { key: 'da7e77e9c3dbc8853e9bd1c00efe3c85d1f806f2', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'f2d21298b9271132636ab9cd2132ac7f1f898b85', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'aa7046795d1fcf19407a1328772f6194617edcf5', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'e985bf753c99a57180f33f5c50f4b63bde9e2c4c', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '9085eab5ed541a4a6ed1b176dcb3b8746c848f70', paddingBlockEnd: "16" }, h("swirl-stack", { key: '31f051872f887a15b53558b9ee54b2f93e3df7f1', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '4ca64948fccec45bb342069d54b71f5a7d32a48b', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
|
|
210
231
|
? "<swirl-icon-expand-more></swirl-icon-expand-more>"
|
|
211
232
|
: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
|
|
212
233
|
? this.secondaryNavExpandLabel
|
|
213
|
-
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '
|
|
234
|
+
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '001622c91db552e3f52224dd5224e0ce2175f1fe', icon: this.secondaryNavView === "grid"
|
|
214
235
|
? "<swirl-icon-menu></swirl-icon-menu>"
|
|
215
236
|
: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
|
|
216
237
|
? this.gridNavLayoutToggleLabel
|
|
217
|
-
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '
|
|
238
|
+
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '0596290b2d6cd8631db9cc138c94807570ae0552', class: {
|
|
218
239
|
"shell-layout__secondary-nav-items": true,
|
|
219
240
|
"shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
|
|
220
241
|
(this.secondaryNavView === "grid" || mainNavCollapsed),
|
|
221
|
-
} }, h("slot", { key: '
|
|
242
|
+
} }, h("slot", { key: '51e19724fca7fca2a2cab5631bec4fc6a2706332', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '100fd956e742c68697b16cd45b95cb69cac6a15e', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '71231c2168345af0a36cd8887f213db08c5a42e1' })), h("aside", { key: '9b199a1cb0fcd73aa80581231cd854e2eb0b2da3', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '30e13e5d44f8dde97286750dbbe65ca2b63a14b5', class: "shell-layout__sidebar-body" }, h("div", { key: '63d5b38abcfca252b27f8bf026646dfa2c0e9d43', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: 'f32b025048321515bfcc276947a3041aace17b90', name: "sidebar-app-bar" })), h("div", { key: 'b06bad9a0c0e58e1a6db0d8a8477dd081bd959ed', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: '3d4c21e42e72af64470b452c7357acd8e2d72fdd', name: "sidebar" })))))));
|
|
222
243
|
}
|
|
223
244
|
get el() { return this; }
|
|
224
245
|
static get watchers() { return {
|
|
@@ -247,11 +268,12 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
|
|
|
247
268
|
"sidebarToggleIcon": [1, "sidebar-toggle-icon"],
|
|
248
269
|
"sidebarToggleLabel": [1, "sidebar-toggle-label"],
|
|
249
270
|
"skipLinkLabel": [1, "skip-link-label"],
|
|
271
|
+
"isDesktopViewport": [32],
|
|
250
272
|
"mobileNavigationActive": [32],
|
|
251
273
|
"navigationCollapsed": [32],
|
|
252
274
|
"secondaryNavCollapsed": [32],
|
|
253
275
|
"secondaryNavView": [32],
|
|
254
|
-
"
|
|
276
|
+
"sidebarScrollState": [32],
|
|
255
277
|
"showMobileNavigation": [64],
|
|
256
278
|
"hideMobileNavigation": [64]
|
|
257
279
|
}, [[8, "keydown", "onWindowKeyDown"], [9, "resize", "onWindowResize"]], {
|