import { Component, h, Prop } from "@stencil/core";
import { modifiersToClass } from '../../utils/utils';
export class IbkModal {
  constructor() {
    /** Determina el color de fondo del modal */
    this.background = 'dark';
    /** Determina si el modal tendrá una "X" para cerrar el modal */
    this.fixed = false;
  }
  /** Configura la clase del componente basado en estados y modificadores */
  containerClass() {
    return modifiersToClass('ibk-modal', [
      this.background
    ]);
  }
  render() {
    return (h("div", { class: this.containerClass() },
      h("div", { class: "ibk-modal__content" },
        !this.fixed && h("i", { class: "ibk-modal__close icon-m-close" }),
        this.heading && h("p", { class: "ibk-modal__heading", innerHTML: this.heading }),
        this.subtitle && h("p", { class: "ibk-modal__subtitle", innerHTML: this.subtitle }),
        h("slot", null))));
  }
  static get is() { return "ibk-modal"; }
  static get originalStyleUrls() { return {
    "$": ["modal.css"]
  }; }
  static get styleUrls() { return {
    "$": ["modal.css"]
  }; }
  static get properties() { return {
    "background": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'light' | 'dark'",
        "resolved": "\"dark\" | \"light\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determina el color de fondo del modal"
      },
      "attribute": "background",
      "reflect": false,
      "defaultValue": "'dark'"
    },
    "heading": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "T\u00EDtulo del modal"
      },
      "attribute": "heading",
      "reflect": false
    },
    "subtitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Subt\u00EDtulo del modal"
      },
      "attribute": "subtitle",
      "reflect": false
    },
    "fixed": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determina si el modal tendr\u00E1 una \"X\" para cerrar el modal"
      },
      "attribute": "fixed",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
}
