import { Host, h } from '@stencil/core';
import { CSSVarsUtils } from '../../../../utils';
import initI18n from '../../../../utils/i18n';
export class SplitItem {
  constructor() {
    this.label = undefined;
    this.enableExpand = true;
    this._expanded = false;
    this.size = undefined;
    this.structural = false;
  }
  /**
   * Alterna a visibilidade do painel.
   */
  toggleExpandItem() {
    var _a, _b;
    this._expanded = !this._expanded;
    (_b = (_a = this.expandButtonRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.blur();
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
  }
  componentDidLoad() {
    CSSVarsUtils.applyVarsGrid(this._element, this._slot.children[0]);
  }
  render() {
    return (h(Host, { class: `box_split-item ${this._expanded ? 'expanded__item' : ''} ${this.structural ? 'structural__item' : 'content__item'}`, ref: el => (this._element = el) }, h("div", { class: "ez-split-item--header" }, h("slot", { name: "leftButtons" }), h("div", { class: "ez-split-item--header-title" }, this.label && (h("h3", { class: "ez-text ez-text--primary ez-title ez-title--medium ez-margin--small", title: this.label }, this.label))), h("div", { class: "ez-split-item--header-buttons" }, h("slot", { name: "rightButtons" }), this.enableExpand && (h("ez-button", { ref: el => this.expandButtonRef = el, size: "small", mode: "icon", iconName: "expand", class: 'ez-button--tertiary', onClick: () => this.toggleExpandItem(), title: this._expanded ? this.i18n('app.collapse') : this.i18n('app.expand') })))), h("div", { class: "ez-split-item--content grid_height-0", ref: el => (this._slot = el) }, h("slot", null))));
  }
  static get is() { return "ez-split-item"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-split-item.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-split-item.css"]
    };
  }
  static get properties() {
    return {
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define um t\u00EDtulo para o painel."
        },
        "attribute": "label",
        "reflect": false
      },
      "enableExpand": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define se o item pode ser expandido"
        },
        "attribute": "enable-expand",
        "reflect": true,
        "defaultValue": "true"
      },
      "size": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [{
              "name": "values",
              "text": "'%', 'fr'"
            }],
          "text": "Define o tamanho inicial do painel."
        },
        "attribute": "size",
        "reflect": false
      },
      "structural": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define se o painel est\u00E1 sendo utilizado como estrutura para apresenta\u00E7\u00E3o de outro item"
        },
        "attribute": "structural",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get states() {
    return {
      "_expanded": {}
    };
  }
}
