import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
import { ElementIDUtils } from '@sankhyalabs/core';
import { A as ApplicationUtils } from './ApplicationUtils-1569f757.js';
import './DialogType-54a62731.js';
import './CheckMode-bdb2ec19.js';
import { i as initI18n } from './index-41363fa6.js';
import './FormLayout-071d324c.js';

const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box--subtitle--font-size:var(--text--medium, 14px);--ez-collapsible-box--subtitle--font-family:var(--font-pattern, 'Roboto');--ez-collapsible-box--subtitle--font-weight:var(--text-weight--medium, 400);--ez-collapsible-box--subtitle--color:var(--text--primary);--ez-collapsible-box--subtitle--margin-bottom:var(--space--medium, 12px);--ez-collapsible-box--focus--color:var(--color--primary-600);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}ez-icon{--ez-icon--color:inherit}.collapsible-box{display:flex;flex-direction:column;width:100%;overflow:hidden}.collapsable-box--bordered{border:var(--border--small);border-color:var(--color--strokes);border-radius:var(--border--radius-medium);padding:var(--space--xs)}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:100%;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;color:var(--ez-collapsible-box--color);--ez-icon--color:var(--ez-collapsible-box__icon--color);margin-bottom:var(--space--medium, 12px)}.collapsible-box__title:focus{color:var(--ez-collapsible-box--focus--color);--ez-icon--color:var(--ez-collapsible-box--focus--color)}.collapsible-box__label{display:flex;white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;gap:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight)}.subtitle-box__label{display:flex;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;font-family:var(--ez-collapsible-box--subtitle--font-family);font-size:var(--ez-collapsible-box--subtitle--font-size);font-weight:var(--ez-collapsible-box--subtitle--font-weight);color:var(--ez-collapsible-box--subtitle--color);margin-bottom:var(--ez-collapsible-box--subtitle--margin-bottom)}.subtitle-box__content{width:100%}.collapsible-box__label ez-icon{visibility:hidden;transition:2s all ease-in-out}.collapsible-box__label:hover ez-icon{visibility:visible}.collapsible-box__text-edit{margin-left:6px}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--left{margin-right:auto}.collapsible-box__title--right{margin-left:auto}.collapsible-box__title--center{margin-left:auto;margin-right:auto}.collapsible-box__title--stretch{justify-content:space-between;width:100%}.collapsible-box__title--no-margin{margin-bottom:0}.collapsible-box__content{display:flex;flex-wrap:wrap;width:100%;height:0px;max-height:0px;opacity:0;overflow:hidden;transition:all var(--transition, 0.5s)}.collapsible-box__content--show{height:100%;max-height:none;opacity:1;overflow:visible;transition:all var(--transition, 0.5s)}.font--x-small{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--x-large{font-size:20px}";

const EzCollapsibleBox = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.ezChange = createEvent(this, "ezChange", 7);
    this.ezRemove = createEvent(this, "ezRemove", 7);
    this.ezSaveEditLabel = createEvent(this, "ezSaveEditLabel", 7);
    this.ezEditLabelMode = createEvent(this, "ezEditLabelMode", 7);
    this._activeEditText = false;
    this.value = false;
    this.boxBordered = false;
    this.label = undefined;
    this.subtitle = undefined;
    this.headerSize = "small";
    this.iconPlacement = "left";
    this.headerAlign = "left";
    this.removable = false;
    this.editable = false;
    this.conditionalSave = undefined;
  }
  /**
   * Oculta/mostra o conteúdo do ez-collapsible-box.
   */
  async showHide() {
    this.value = !this.value;
  }
  /**
   * Aplica o foco no campo de edição de título.
   */
  async applyFocusTextEdit() {
    var _a;
    (_a = this._refTextEdit) === null || _a === void 0 ? void 0 : _a.applyFocusSelect();
  }
  /**
   * Cancela a edição de título.
   */
  async cancelEdition() {
    this._activeEditText = false;
    this.ezEditLabelMode.emit(this._activeEditText);
  }
  observeCollapsedValue() {
    this.ezChange.emit(this.value);
  }
  /**
   * Retorna o tamanho configurado do texto e do ícone.
   */
  getHeaderSize() {
    const sizeAlias = ["xsmall", "xlarge"];
    const sizeList = ["x-small", "small", "medium", "large", "x-large"];
    const sizeLowerCase = this.headerSize && this.headerSize.toLowerCase();
    const sizeCustom = sizeAlias.includes(sizeLowerCase) ? sizeLowerCase.replace('x', 'x-') : sizeLowerCase;
    return sizeList.includes(sizeCustom) ? sizeCustom : "small";
  }
  removeElement() {
    this._hostElement && this._hostElement.remove();
    this.ezRemove.emit(this);
  }
  editLabel(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    this._activeEditText = true;
    this.ezEditLabelMode.emit(this._activeEditText);
  }
  async confirmRemove(evt) {
    evt.stopPropagation();
    const confirmMessage = this.i18n("ez-collapsible-box.confirmRemove", { label: this.label });
    const canRemove = await ApplicationUtils.confirm(this.i18n("app.warning"), confirmMessage);
    if (canRemove) {
      this.removeElement();
    }
  }
  saveEditionText(editDetails) {
    const { value, newValue } = editDetails.detail;
    if (value === newValue) {
      this.cancelEdition();
      return;
    }
    let canSave = true;
    if (this.conditionalSave) {
      canSave = this.conditionalSave(newValue);
    }
    if (this.label !== newValue && canSave) {
      this.label = newValue;
      this._activeEditText = false;
      this.ezSaveEditLabel.emit(editDetails.detail);
      this.ezEditLabelMode.emit(this._activeEditText);
    }
  }
  getStyledLabel() {
    if (this._refLabel == undefined) {
      return;
    }
    let styledLabel = {
      fontSize: window.getComputedStyle(this._refLabel).getPropertyValue('font-size'),
      fontWeight: window.getComputedStyle(this._refLabel).getPropertyValue('font-weight'),
      fontFamily: window.getComputedStyle(this._refLabel).getPropertyValue('font-family')
    };
    return styledLabel;
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
  }
  componentDidLoad() {
    ElementIDUtils.addIDInfo(this._hostElement);
  }
  render() {
    return (h("div", { class: `collapsible-box ${this.boxBordered && 'collapsable-box--bordered'}` }, h("div", { class: "collapsible-box__header" }, h("button", Object.assign({}, (!this._activeEditText ? { onClick: () => { this.showHide(); } } : null), { class: "collapsible-box__title collapsible-box__title--" + (this.headerAlign || "left") +
        (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
        (this.value ? " collapsible-box__title--no-margin" : "") }), h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : ""), id: "toggleCollapsible" }), !this._activeEditText ?
      h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label, ref: elem => this._refLabel = elem }, h("span", null, this.label), this.editable &&
        h("ez-icon", { slot: "icon", "icon-name": "edit", onClick: (evt) => this.editLabel(evt), title: this.i18n("app.edit") }), this.removable &&
        h("ez-icon", { slot: "icon", "icon-name": "delete", onClick: (evt) => this.confirmRemove(evt), title: this.i18n("app.remove") })) :
      h("ez-text-edit", { class: "collapsible-box__text-edit", ref: ref => this._refTextEdit = ref, value: this.label, styled: this.getStyledLabel(), onSaveEdition: (ev) => this.saveEditionText(ev), onCancelEdition: () => this.cancelEdition() })), h("slot", { name: "rightSlot" })), h("div", { class: "collapsible-box__content" + (this.value ? "" : " collapsible-box__content--show") }, this.subtitle &&
      h("div", { class: "subtitle-box__content" }, h("label", { class: "subtitle-box__label", title: this.subtitle }, h("span", null, this.subtitle))), h("slot", null))));
  }
  get _hostElement() { return getElement(this); }
  static get watchers() { return {
    "value": ["observeCollapsedValue"]
  }; }
};
EzCollapsibleBox.style = ezCollapsibleBoxCss;

export { EzCollapsibleBox as ez_collapsible_box };
