import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
import { ElementIDUtils } from '@sankhyalabs/core';
import { E as EzScrollDirection } from './EzScrollDirection-2df26c93.js';
import { i as initI18n } from './index-41363fa6.js';

var ModeMenuEnum;
(function (ModeMenuEnum) {
  ModeMenuEnum["FLOAT"] = "float";
  ModeMenuEnum["FIXED"] = "fixed";
})(ModeMenuEnum || (ModeMenuEnum = {}));

var SizeMenuEnum;
(function (SizeMenuEnum) {
  SizeMenuEnum["SMALL"] = "sm";
  SizeMenuEnum["MEDIUM"] = "md";
  SizeMenuEnum["LARGE"] = "lg";
})(SizeMenuEnum || (SizeMenuEnum = {}));

var TypeMenuEnum;
(function (TypeMenuEnum) {
  TypeMenuEnum["FLOAT"] = "float";
  TypeMenuEnum["FIXED"] = "fixed";
  TypeMenuEnum["DYNAMIC"] = "dynamic";
})(TypeMenuEnum || (TypeMenuEnum = {}));

const ezSidebarNavigatorCss = ":host{--ez-sidebar-navigator--padding-left:var(--space--xs, 12px);--ez-sidebar-navigator--padding-right:var(--space--xs, 12px);--ez-sidebar-navigator--gap:var(--space--xs, 12px);--ez-sidebar-navigator--box-shadow:var(--shadow, 0px 0px 24px 0px #000);--ez-sidebar-navigator--background-color:var(--color--inverted);--ez-sidebar-navigator--border-radius:0px var(--border--radius-medium) var(--border--radius-medium) 0px;--ez-sidebar-navigator--height:calc(100vh - var(--space--lg, 24px));--ez-sidebar-navigator--z-index:var(--elevation--20, 20);--ez-sidebar-navigator--header-gap:var(--space--xs, 12px);--ez-sidebar-navigator--footer-gap:var(--space--xs, 12px);--ez-ez-sidebar-navigator__title--font-family:var(--font-pattern, \"Roboto\");--ez-ez-sidebar-navigator__title--font-size:var(--title--medium, 16px);--ez-ez-sidebar-navigator__title--color:var(--title--primary, #2b3a54);--ez-ez-sidebar-navigator__title--font-weight:var(--text-weight--extra-large, 700)}.inverted{transform:rotate(180deg)}.ez-sidebar-navigator{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:var(--ez-sidebar-navigator--height);padding-top:var(--space--xs, 12px);padding-bottom:var(--space--xs, 12px);outline:none;gap:var(--ez-sidebar-navigator--gap);padding-left:var(--ez-sidebar-navigator--padding-left);padding-right:var(--ez-sidebar-navigator--padding-right);background-color:var(--ez-sidebar-navigator--background-color);-webkit-box-shadow:var(--ez-sidebar-navigator--box-shadow);box-shadow:var(--ez-sidebar-navigator--box-shadow);border-radius:var(--ez-sidebar-navigator--border-radius)}.ez-sidebar-navigator__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-content:space-between;gap:var(--ez-sidebar-navigator--header-gap)}.ez-sidebar-navigator__content{height:100%}.ez-sidebar-navigator__footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--ez-sidebar-navigator--footer-gap)}.ez-sidebar-navigator__title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-family:var(--ez-ez-sidebar-navigator__title--font-family);font-size:var(--ez-ez-sidebar-navigator__title--font-size);font-weight:var(--ez-ez-sidebar-navigator__title--font-weight);color:var(--ez-ez-sidebar-navigator__title--color)}.ez-sidebar-navigator__end{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:auto;gap:var(--ez-sidebar-navigator--gap)}.dynamic{position:absolute;z-index:var(--ez-sidebar-navigator--z-index)}.fixed{position:relative}.hidden{display:none}.show{animation:fadeIn .1s ease-in-out 1}@keyframes fadeIn{from{transform:translate(-100%)}}.sm{width:240px}.md{width:280px}.lg{width:320px}@media screen and (max-width: 991px){.responsive{width:240px}}@media screen and (min-width: 992px){.responsive{width:280px}}@media screen and (min-width: 1200px){.responsive{width:320px}}";

const EzSidebarNavigator = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.ezChangeMode = createEvent(this, "ezChangeMode", 7);
    this.handleToggleSidebar = () => {
      this.open = !this.open;
    };
    this.handleToggleMode = () => {
      this.mode = this.mode === ModeMenuEnum.FIXED ? ModeMenuEnum.FLOAT : ModeMenuEnum.FIXED;
      this.ezChangeMode.emit(this.mode);
    };
    this.type = TypeMenuEnum.DYNAMIC;
    this.mode = ModeMenuEnum.FLOAT;
    this.size = SizeMenuEnum.SMALL;
    this.isResponsive = false;
    this.titleMenu = "";
    this.showCollapseMenu = true;
    this.showFixedButton = true;
    this.open = false;
  }
  /**
  * Método para fixar/desafixar o menu, emitindo o evento ezChangeMode.
  */
  async changeModeMenu() {
    if (this.type === TypeMenuEnum.DYNAMIC) {
      this.handleToggleMode();
    }
  }
  /**
  * Método para fechar o menu automaticamente após uma ação, fluxo, etc.
  */
  async closeSidebar() {
    this.open = false;
  }
  /**
  * Método para abrir o menu automaticamente após uma ação, fluxo, etc.
  */
  async openSidebar() {
    this.open = true;
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
  }
  componentDidLoad() {
    if (this.type === TypeMenuEnum.FIXED) {
      this.mode = ModeMenuEnum.FIXED;
      this.open = true;
    }
  }
  render() {
    ElementIDUtils.addIDInfoIfNotExists(this._element);
    return (h(Host, null, h("ez-sidebar-button", { class: this.open ? "hidden" : "", onEzClick: this.mode === ModeMenuEnum.FIXED ? this.handleToggleSidebar : undefined, onMouseEnter: this.mode === ModeMenuEnum.FLOAT ? this.handleToggleSidebar : undefined, "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": ElementIDUtils.getInternalIDInfo("openButton") }), this.open ? (h("aside", { tabIndex: -1, id: "navigator", class: `ez-col ez-col--sd-12 ez-col--tb-3 ez-sidebar-navigator ${this.mode === ModeMenuEnum.FLOAT ? 'dynamic' : 'fixed'} ${this.isResponsive ? 'responsive' : this.size} ${!this.open ? "hidden" : "show"}`, "data-element-id": ElementIDUtils.getInternalIDInfo("sidebar"), onMouseLeave: this.type !== TypeMenuEnum.FIXED && this.mode === ModeMenuEnum.FLOAT ? this.handleToggleSidebar : undefined }, h("header", { class: "ez-sidebar-navigator__header" }, h("slot", { name: "start" }), this.titleMenu !== '' && (h("div", { class: "ez-sidebar-navigator__title", title: this.titleMenu }, this.titleMenu)), !this.titleMenu && (h("slot", { name: "content" })), h("div", { class: "ez-sidebar-navigator__end" }, h("slot", { name: "end" }), (this.type === TypeMenuEnum.DYNAMIC && this.showFixedButton) && (h("ez-button", { onClick: this.handleToggleMode, mode: "icon", size: "small", iconName: this.mode === ModeMenuEnum.FIXED ? "un-pin" : "push-pin", title: this.mode === ModeMenuEnum.FIXED ? this.i18n("ez-sidebar.unPinMenu") : this.i18n("ez-sidebar.pushPinMenu"), "aria-label": this.mode === ModeMenuEnum.FIXED ? this.i18n("ez-sidebar.unPinMenu") : this.i18n("ez-sidebar.pushPinMenu"), "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("pinButton") })), (this.mode === ModeMenuEnum.FIXED && this.showCollapseMenu) && (h("ez-button", { onClick: this.handleToggleSidebar, class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: this.i18n("ez-sidebar.hideMenu"), "aria-label": this.i18n("ez-sidebar.hideMenu"), "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("closeButton") })))), this.titleMenu && (h("slot", { name: "content" })), h("ez-scroller", { class: "ez-sidebar-navigator__content", direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("slot", null)), h("footer", { class: "ez-sidebar-navigator__footer" }, h("slot", { name: "footer" }))))
      : undefined));
  }
  get _element() { return getElement(this); }
};
EzSidebarNavigator.style = ezSidebarNavigatorCss;

export { EzSidebarNavigator as ez_sidebar_navigator };
