import { ElementIDUtils } from "@sankhyalabs/core";
import { h, Host } from "@stencil/core";
export class EzUnderface {
  constructor() {
    this.color = "default";
    this.customColor = undefined;
    this.height = undefined;
    this.width = undefined;
  }
  componentDidRender() {
    if (this._element) {
      ElementIDUtils.addIDInfo(this._element);
    }
    if (this._container) {
      const dataInfo = { id: 'container' };
      ElementIDUtils.addIDInfo(this._container, 'underface', dataInfo);
    }
  }
  render() {
    const customStyleVars = Object.assign({}, this.customColor && { '--ez-underface--custom-background-color': `var(${this.customColor})` }, this.height && { '--ez-underface--custom-height': `${this.height}px` }, this.width && { '--ez-underface--custom-width': `${this.width}px` });
    return (h(Host, { style: customStyleVars }, h("div", { ref: element => this._container = element, class: `underface_container ${this.color}` }, h("slot", null))));
  }
  static get is() { return "ez-underface"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-underface.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-underface.css"]
    };
  }
  static get properties() {
    return {
      "color": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"default\" | \"light-green\" | \"green\" | \"light-gray\" | \"dark-petroleum\" | \"ocean-green\"",
          "resolved": "\"dark-petroleum\" | \"default\" | \"green\" | \"light-gray\" | \"light-green\" | \"ocean-green\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define a cor de fundo do componente."
        },
        "attribute": "color",
        "reflect": true,
        "defaultValue": "\"default\""
      },
      "customColor": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define uma cor de fundo customizada, dentro da paleta de cores do Design System, sobrescrevendo a propriedade color.\nExemplo: \"--color--yellow-600\""
        },
        "attribute": "custom-color",
        "reflect": true
      },
      "height": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define a altura do componente."
        },
        "attribute": "height",
        "reflect": true
      },
      "width": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define a largura do componente."
        },
        "attribute": "width",
        "reflect": true
      }
    };
  }
  static get elementRef() { return "_element"; }
}
