import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-442cf464.js';
import { c as createColorClasses } from './theme-a8bb96f5.js';

const sideMenuCss = ":host{margin:0;padding:0;position:relative}:host aside{left:0;position:fixed;top:0;width:var(--lu-side-menu-desktop-width, 448px);height:100vh;transform:translate3d(-486px, 0, 0);transition:transform 0.25s ease-out;border-right:1px solid #F1F1F1;background:white;box-shadow:none;z-index:2;will-change:transform}:host([data-is-visible]) aside{transform:translate3d(0, 0, 0);transition:transform 0.25s ease-in}:host([data-has-box-shadow]) aside{box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.3)}:host([data-is-collapsible]) .collapse-button{display:block}:host([data-is-collapsed]) aside{transform:translate3d(-448px, 0, 0);transition:transform 0.25s ease-in;box-shadow:none}header{padding:0 20px;display:flex;position:relative;flex:1 1 auto;align-items:center;justify-content:space-between;background-color:#1a2b57;color:white}.collapse-button{left:100%;padding:var(--side-menu-button-padding-top, 14px) var(--side-menu-button-padding-end, 8px) var(--side-menu-button-padding-bottom, 10px) var(--side-menu-button-padding-start, 8px);display:none;position:absolute;top:var(--side-menu-button-top, 68px);border:1px solid var(--side-menu-button-border-color, #F1F1F1);background:white;color:var(--side-menu-button-color, #333333);font-size:var(--side-menu-button-font-size, 17px);cursor:pointer;z-index:3}@media (max-width: 680px){:host aside{width:var(--lu-side-menu-mobile-width, 75%);transform:translate3d(-125%, 0, 0)}:host([data-is-visible]) aside{transform:translate3d(0, 0, 0)}:host([data-is-collapsed]) aside{transform:translate3d(-125%, 0, 0)}.backdrop{left:0;position:fixed;top:0;width:100%;height:100vh;transition:opacity 0.25s ease-out;background:#333333;opacity:0;z-index:1;pointer-events:none}:host([data-is-visible]) .backdrop{opacity:0.6;pointer-events:all}:host([data-is-collapsible]) .collapse-button{display:none}}";

const SideMenu = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.luSideMenuCollapsedEvent = createEvent(this, "luSideMenuCollapsedEvent", 7);
    /**
     * The attribute for making sure the sidebar is dataIsVisible or not. Defaults to `"false"`
     */
    this.isVisible = false;
    /**
     * The attribute for making sure the sidebar is collapsible or not. Defaults to `"false"`. Toggle button doesn't show up if this isn't true
     */
    this.isCollapsible = false;
    /**
     * Tells if the side menu has been toggled closed
     */
    this.isCollapsed = false;
    /**
     * gives some box shadow
     */
    this.hasBoxShadow = true;
    /**
     * Externally manage state
     */
    this.externallyManaged = false;
  }
  /**
   * This method allows to set the sidebar to dataIsVisible.
   */
  async makeVisible() {
    if (!this.externallyManaged) {
      this.isVisible = true;
    }
  }
  /**
   * This method allows to set the sidebar to hidden.
   */
  async isHidden() {
    if (!this.externallyManaged) {
      this.isVisible = false;
    }
    this.luSideMenuCollapsedEvent.emit();
  }
  /**
   * This method allows to collapse and open the sidebar. Note: This is different from hiding the sidebar completely.
   */
  async collapsedHandler() {
    if (!this.externallyManaged) {
      this.isCollapsed = !this.isCollapsed;
      this.isVisible = !this.isCollapsed;
    }
    this.luSideMenuCollapsedEvent.emit();
  }
  handleEscape(event) {
    let key = event.key.toString();
    if (key === 'Escape') {
      if (!this.externallyManaged) {
        this.isVisible = false;
      }
      this.luSideMenuCollapsedEvent.emit();
    }
  }
  hostData() {
    return {
      class: Object.assign({}, createColorClasses(this.color)),
      'data-is-visible': this.isVisible,
      'data-is-collapsed': this.isCollapsed,
      'data-is-collapsible': this.isCollapsible,
      'data-has-box-shadow': this.hasBoxShadow
    };
  }
  __stencil_render() {
    return [
      h("div", { class: "backdrop", onClick: this.isHidden.bind(this) }),
      h("aside", { id: "luSideMenu", "aria-label": this.isVisible || !this.isCollapsed ? 'side menu is open' : 'side menu is closed' }, h("header", null, h("slot", { name: "header-left" }), h("slot", { name: "header-middle" }), h("slot", { name: "header-right" })), h("slot", { name: "content" }), h("button", { class: "collapse-button", role: "button", tabindex: "0", onClick: this.collapsedHandler.bind(this), "aria-controls": "luSideMenu", "aria-expanded": this.isVisible || !this.isCollapsed ? true : false }, this.isCollapsed ? h("lu-icon", { name: "ios-arrow-forward" }) :
        h("lu-icon", { name: "ios-arrow-back" })))
    ];
  }
  get LuSideMenuEl() { return getElement(this); }
  render() { return h(Host, this.hostData(), this.__stencil_render()); }
};
SideMenu.style = sideMenuCss;

export { SideMenu as lu_side_menu };

//# sourceMappingURL=lu-side-menu.entry.js.map