import { Component, h, Prop, Host } from '@stencil/core';
export class Button {
  constructor() {
    /**
     * The theme type of the button. Given by bulma our css framework.
     */
    this.type = 'is-primary';
    /**
     * Size of the button
     */
    this.size = '';
    /**
     * If `true` the button has a active theme
     */
    this.isActive = false;
    /**
     * If `true` the bottom corners get rounded
     */
    this.bottomRounded = false;
    /**
     * Name of the left button icon
     */
    this.icon = '';
    /**
     * Name of the right button icon
     */
    this.iconRight = '';
  }
  render() {
    return (h(Host, { class: [this.expanded ? 'is-fullwidth' : ''].join(' ') },
      h("button", { class: [
          'button',
          this.type,
          this.size,
          this.light ? 'is-light' : '',
          this.inverted ? 'is-inverted' : '',
          this.isActive ? 'is-active' : '',
          this.outlined ? 'is-outlined' : '',
          this.expanded ? 'is-fullwidth' : '',
          this.loading ? 'is-loading' : '',
          this.isSquare ? 'is-square' : '',
          this.dense ? 'is-dense' : '',
          this.bottomRounded ? 'has-round-bottom-corners' : '',
        ].join(' '), disabled: this.disabled },
        h("span", null),
        this.loading ? h("bal-spinner", { class: "is-small is-inverted" }) : '',
        this.icon ? h("bal-icon", { class: "icon-left", name: this.icon }) : '',
        h("bal-text", { style: { display: this.loading ? 'none' : 'inline' } },
          h("slot", null)),
        this.iconRight ? h("bal-icon", { class: "icon-right", name: this.iconRight }) : '')));
  }
  static get is() { return "bal-button"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["bal-button.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["bal-button.css"]
  }; }
  static get properties() { return {
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'is-primary' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger' | 'is-link'",
        "resolved": "\"is-danger\" | \"is-info\" | \"is-link\" | \"is-primary\" | \"is-success\" | \"is-warning\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The theme type of the button. Given by bulma our css framework."
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'is-primary'"
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'is-small' | ''",
        "resolved": "\"\" | \"is-small\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Size of the button"
      },
      "attribute": "size",
      "reflect": false,
      "defaultValue": "''"
    },
    "isSquare": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the width of the buttons is limited"
      },
      "attribute": "is-square",
      "reflect": false
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the button is disabled"
      },
      "attribute": "disabled",
      "reflect": false
    },
    "light": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the button has a light color"
      },
      "attribute": "light",
      "reflect": false
    },
    "isActive": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the button has a active theme"
      },
      "attribute": "is-active",
      "reflect": false,
      "defaultValue": "false"
    },
    "expanded": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the button has a full width"
      },
      "attribute": "expanded",
      "reflect": false
    },
    "outlined": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the button is outlined"
      },
      "attribute": "outlined",
      "reflect": false
    },
    "inverted": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the button is inverted"
      },
      "attribute": "inverted",
      "reflect": false
    },
    "dense": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the button is dense"
      },
      "attribute": "dense",
      "reflect": false
    },
    "loading": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the label is hidden and a loading spinner is shown instead."
      },
      "attribute": "loading",
      "reflect": false
    },
    "bottomRounded": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the bottom corners get rounded"
      },
      "attribute": "bottom-rounded",
      "reflect": false,
      "defaultValue": "false"
    },
    "icon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Name of the left button icon"
      },
      "attribute": "icon",
      "reflect": false,
      "defaultValue": "''"
    },
    "iconRight": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Name of the right button icon"
      },
      "attribute": "icon-right",
      "reflect": false,
      "defaultValue": "''"
    }
  }; }
}
