@getflip/swirl-components-react 0.23.1 → 0.24.0

package/dist/swirl-shell-layout.entry.11eba04c.js

@@ -1,56 +0,0 @@
-import { r as i, h as e, H as t } from "./index.2ccacc62.js";
-import { c as s } from "./index-d280dafb.186cdb0e.js";
-import { a as d, g as r } from "./utils-61f188cc.4a43deab.js";
-import "react";
-import "react-dom";
-const h = `:host{--extended-sidebar-width:17.5rem;--collapsed-sidebar-width:4rem;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.shell-layout{display:flex;width:100%;min-height:100%}@media (min-width: 992px){.shell-layout--collapsed-sidebar:not(.shell-layout--collapsing) .shell-layout__sidebar-wrapper.shell-layout__sidebar-wrapper--hovered .shell-layout__sidebar,.shell-layout--collapsed-sidebar:not(.shell-layout--collapsing) .shell-layout__sidebar-wrapper:focus-within .shell-layout__sidebar{width:var(--extended-sidebar-width);box-shadow:0 0.75rem 2rem rgba(25, 26, 28, 0.12),
-              0 0.25rem 0.75rem rgba(25, 26, 28, 0.08)}}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper{min-height:100%;transform:translate3d(-100%, 0, 0)}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper .shell-layout__sidebar{width:100%;box-shadow:none}@media (min-width: 992px){.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper{max-width:var(--collapsed-sidebar-width);flex-basis:var(--collapsed-sidebar-width);transform:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__sidebar{box-shadow:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__collapsed-logo{display:block}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__expanded-logo{display:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__toggle{display:none}}.shell-layout__sidebar-wrapper{position:absolute;z-index:2;top:0;bottom:0;left:0;width:100%;max-width:var(--extended-sidebar-width);flex-basis:var(--extended-sidebar-width);flex-shrink:0;transition:max-width 0.2s, transform 0.2s}@media (min-width: 992px){.shell-layout__sidebar-wrapper{position:relative;inset:auto}}.shell-layout__sidebar{display:flex;width:var(--extended-sidebar-width);height:100%;border-right:var(--s-border-width-default) solid var(--s-border-default);flex-direction:column;transition:box-shadow 0.2s, width 0.2s;box-shadow:0 0.75rem 2rem rgba(25, 26, 28, 0.12),
-    0 0.25rem 0.75rem rgba(25, 26, 28, 0.08)}@media (min-width: 992px){.shell-layout__sidebar{box-shadow:none}}.shell-layout__header{padding:var(--s-space-8);flex-shrink:0;background-color:var(--s-background-default);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.shell-layout__logo-bar{display:flex;overflow:hidden;align-items:center}.shell-layout__expanded-logo{padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + var(--s-space-2));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + var(--s-space-2));flex-grow:1}.shell-layout__collapsed-logo{display:none;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + var(--s-space-2));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + var(--s-space-2));flex-grow:1}.shell-layout__toggle{padding-right:var(--s-space-8);padding-left:var(--s-space-12);flex-grow:0;flex-shrink:0}.shell-layout__mobile-toggle{position:absolute;z-index:2;top:var(--s-space-12);left:calc(100% + var(--s-space-16))}@media (min-width: 992px){.shell-layout__mobile-toggle{display:none}}.shell-layout__tools{margin-top:var(--s-space-4);flex-basis:100%;flex-shrink:0}.shell-layout__main-navigation{overflow:auto;padding:var(--s-space-8);flex-grow:1;background-color:var(--s-background-default)}.shell-layout__main{flex-grow:1;background-color:var(--s-background-default)}.shell-layout__main>*,.shell-layout__main ::slotted(*){height:100%}.shell-layout__backdrop{position:fixed;z-index:1;background-color:rgba(0, 0, 0, 0.4);-webkit-animation:shell-layout-backdrop-fade-in 0.1s;animation:shell-layout-backdrop-fade-in 0.1s;inset:0}@media (min-width: 992px){.shell-layout__backdrop{display:none}}.shell-layout__backdrop--fading{-webkit-animation:shell-layout-backdrop-fade-out 0.2s;animation:shell-layout-backdrop-fade-out 0.2s}@-webkit-keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes shell-layout-backdrop-fade-out{from{opacity:1}to{opacity:0}}@keyframes shell-layout-backdrop-fade-out{from{opacity:1}to{opacity:0}}`, n = class {
-  constructor(l) {
-    i(this, l), this.desktopMediaQuery = d(), this.desktopMediaQueryHandler = (a) => {
-      a.matches ? this.showSidebar() : this.hideSidebar();
-    }, this.hideSidebar = () => {
-      this.collapsedSidebar = !0, this.collapsing = !0, setTimeout(() => {
-        this.collapsing = !1, this.sidebarHovered = !1;
-      }, 200);
-    }, this.showSidebar = () => {
-      this.collapsedSidebar = !1;
-    }, this.toggleSidebar = () => {
-      this.collapsedSidebar ? this.showSidebar() : this.hideSidebar();
-    }, this.onBackdropClick = () => {
-      this.collapsedSidebar || this.hideSidebar();
-    }, this.onSidebarClick = () => {
-      var a;
-      this.collapsedSidebar && ((a = r()) === null || a === void 0 || a.blur());
-    }, this.onSidebarMouseEnter = () => {
-      this.sidebarHovered = !0;
-    }, this.onSidebarMouseLeave = () => {
-      this.sidebarHovered = !1;
-    }, this.mainNavigationLabel = "Main", this.sidebarToggleLabel = "Toggle sidebar", this.collapsedSidebar = void 0, this.collapsing = void 0, this.sidebarHovered = void 0;
-  }
-  componentWillLoad() {
-    var l, a;
-    this.desktopMediaQuery.matches || this.hideSidebar(), (a = (l = this.desktopMediaQuery).addEventListener) === null || a === void 0 || a.call(l, "change", this.desktopMediaQueryHandler);
-  }
-  async collapseSidebar() {
-    this.hideSidebar();
-  }
-  async extendSidebar() {
-    this.showSidebar();
-  }
-  render() {
-    const l = s("shell-layout", {
-      "shell-layout--collapsed-sidebar": this.collapsedSidebar,
-      "shell-layout--collapsing": this.collapsing
-    }), a = s("shell-layout__sidebar-wrapper", {
-      "shell-layout__sidebar-wrapper--hovered": this.sidebarHovered
-    }), o = s("shell-layout__backdrop", {
-      "shell-layout__backdrop--fading": this.collapsing
-    });
-    return e(t, null, e("div", { class: l }, e("div", { class: a, onClick: this.onSidebarClick, onMouseEnter: this.onSidebarMouseEnter, onMouseLeave: this.onSidebarMouseLeave }, e("div", { class: "shell-layout__sidebar" }, e("header", { class: "shell-layout__header" }, e("div", { class: "shell-layout__logo-bar" }, e("div", { class: "shell-layout__expanded-logo" }, e("slot", { name: "logo-expanded" })), e("div", { class: "shell-layout__collapsed-logo" }, e("slot", { name: "logo-collapsed" })), e("div", { class: "shell-layout__toggle" }, e("swirl-button", { swirlAriaExpanded: String(!this.collapsedSidebar), hideLabel: !0, icon: this.collapsedSidebar ? "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>" : "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", label: this.sidebarToggleLabel, onClick: this.toggleSidebar }))), e("div", { class: "shell-layout__tools" }, e("slot", { name: "tools" }))), e("nav", { "aria-label": this.mainNavigationLabel, class: "shell-layout__main-navigation" }, e("slot", { name: "main-navigation" })))), e("main", { class: "shell-layout__main" }, e("slot", { name: "main" })), (!this.collapsedSidebar || this.collapsing) && e("div", { class: o, onClick: this.onBackdropClick })));
-  }
-};
-n.style = h;
-export {
-  n as swirl_shell_layout
-};