import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';

const snkSimpleBarCss = ".sc-snk-simple-bar-h{display:flex;height:100%;width:100%}.simple-bar__container.sc-snk-simple-bar{flex:1;display:flex;align-items:stretch;gap:var(--space--small)}.simple-bar__left-slot.sc-snk-simple-bar{min-width:280px;flex:1;display:flex;align-items:center}.simple-bar__right-slot.sc-snk-simple-bar{flex:1;display:flex;align-items:center;justify-content:flex-end}.simple-bar__column.sc-snk-simple-bar{flex:1;display:flex;flex-direction:column}";

const SnkSimpleBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.clickBreadcrumbItem = createEvent(this, "clickBreadcrumbItem", 3);
    this.exit = createEvent(this, "exit", 3);
    this.label = undefined;
    this.breadcrumbItens = undefined;
    this.messagesBuilder = undefined;
  }
  /**
   * Permite customizar as mensagens dos blocos de construção
   * através de um pequeno módulo na estrutura da aplicação:
   * - Crie um arquivo no seguinte caminho: /messages/appmessages.msg.js.
   * Para conhecer os detalhes do módulo, veja o arquivo neste projeto: "/src/lib/message/resources/snk-simple-bar.msg.ts"
   */
  getMessage(key, params) {
    var _a;
    if (this.messagesBuilder)
      return this.messagesBuilder.getMessage(key, params);
    if ((_a = this._application) === null || _a === void 0 ? void 0 : _a.messagesBuilder)
      return this._application.messagesBuilder.getMessage(key, params);
  }
  componentDidLoad() {
    if (!this._element)
      return;
    ElementIDUtils.addIDInfo(this._element);
    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
  }
  render() {
    return (h("div", { class: "simple-bar__container ez-margin-vertical--small ez-padding--extra-small" }, h("div", { class: "simple-bar__left-slot" }, h("ez-button", { class: "ez-padding-right--medium", title: this.getMessage('snkSimpleBar.backTitle'), mode: 'icon', iconName: "arrow_back", size: 'medium', onClick: () => this.exit.emit() }), h("div", { class: "simple-bar__column" }, h("h1", { class: "ez-title ez-title--primary ez-title--extra-large" }, this.label), h("ez-breadcrumb", { items: this.breadcrumbItens, onSelectedItem: ({ detail }) => this.clickBreadcrumbItem.emit(detail) }))), h("div", { class: "simple-bar__right-slot" }, h("slot", { name: "rightSlot" }))));
  }
  get _element() { return this; }
  static get style() { return snkSimpleBarCss; }
}, [6, "snk-simple-bar", {
    "label": [1],
    "breadcrumbItens": [16],
    "messagesBuilder": [1040]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["snk-simple-bar"];
  components.forEach(tagName => { switch (tagName) {
    case "snk-simple-bar":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, SnkSimpleBar);
      }
      break;
  } });
}

export { SnkSimpleBar as S, defineCustomElement as d };
