import { Host, h } from '@stencil/core';
import { ElementIDUtils } from '@sankhyalabs/core';
import { getI18n } from '../../utils/i18n';
export class EzSpinner {
  constructor() {
    this.size = 'small';
  }
  addInfoId() {
    if (this._element) {
      ElementIDUtils.addIDInfo(this._element);
    }
  }
  async componentWillLoad() {
    this.i18n = getI18n();
  }
  componentDidLoad() {
    this.addInfoId();
  }
  render() {
    return (h(Host, null, h("div", { class: "spinner__container", "data-size": this.size, role: "status", "aria-label": this.i18n ? this.i18n('spinner.loading') : 'Carregando...' }, h("svg", { viewBox: "0 0 24 24", class: "spinner__svg" }, h("circle", { cx: "12", cy: "12", r: "10", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", class: "spinner__path" })))));
  }
  static get is() { return "ez-spinner"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-spinner.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-spinner.css"]
    };
  }
  static get properties() {
    return {
      "size": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'small' | 'medium' | 'large'",
          "resolved": "\"large\" | \"medium\" | \"small\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define o tamanho do spinner"
        },
        "attribute": "size",
        "reflect": false,
        "defaultValue": "'small'"
      }
    };
  }
  static get elementRef() { return "_element"; }
}
