@getflip/swirl-components-react 0.184.3 → 0.185.1

package/dist/swirl-shell-layout.entry.65046f3a.js

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