import { Component, h, Host, Prop } from '@stencil/core';
export class Icon {
  constructor() {
    /**
     * The name of the icon without the bal-icon prefix.
     */
    this.name = '';
    /**
     * Defines the size of the icon.
     */
    this.size = '';
    /**
     * If `true` the icon can be positioned ot the right side of another component
     */
    this.isRight = false;
    /**
     * If `true` the icon can be positioned ot the left side of another component
     */
    this.isLeft = false;
    /**
     * If `true` the icon rotates like for a loading spinner
     */
    this.rotate = false;
    /**
     * If `true` the icon rotates like for a loading spinner
     */
    this.turn = false;
    /**
     * Defines the color of the icon.
     */
    this.color = '';
  }
  get sizeCssClass() {
    if (this.size && this.size.length > 0) {
      return `is-${this.size}`;
    }
    return '';
  }
  get iconCssClass() {
    return `icon-${this.name}`;
  }
  render() {
    return (h(Host, null,
      h("span", { class: [
          'icon',
          this.isRight ? 'is-right' : '',
          this.isLeft ? 'is-left' : '',
          this.rotate ? 'rotate' : '',
          this.turn ? 'turn' : '',
          this.sizeCssClass,
        ].join(' ') },
        h("i", { class: ['font', this.iconCssClass, this.color.length > 0 ? `has-text-${this.color}` : ''].join(' ') }))));
  }
  static get is() { return "bal-icon"; }
  static get originalStyleUrls() { return {
    "$": ["bal-icon.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["bal-icon.css"]
  }; }
  static get properties() { return {
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The name of the icon without the bal-icon prefix."
      },
      "attribute": "name",
      "reflect": false,
      "defaultValue": "''"
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'small' | 'medium' | 'large' | ''",
        "resolved": "\"\" | \"large\" | \"medium\" | \"small\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Defines the size of the icon."
      },
      "attribute": "size",
      "reflect": false,
      "defaultValue": "''"
    },
    "isRight": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the icon can be positioned ot the right side of another component"
      },
      "attribute": "is-right",
      "reflect": false,
      "defaultValue": "false"
    },
    "isLeft": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the icon can be positioned ot the left side of another component"
      },
      "attribute": "is-left",
      "reflect": false,
      "defaultValue": "false"
    },
    "rotate": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the icon rotates like for a loading spinner"
      },
      "attribute": "rotate",
      "reflect": false,
      "defaultValue": "false"
    },
    "turn": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true` the icon rotates like for a loading spinner"
      },
      "attribute": "turn",
      "reflect": false,
      "defaultValue": "false"
    },
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "| 'danger'\n    | 'warning'\n    | 'primary'\n    | 'blue'\n    | 'success'\n    | 'grey'\n    | 'white'\n    | 'black'\n    | 'blue-line'\n    | 'blue-light-line'\n    | ''",
        "resolved": "\"\" | \"black\" | \"blue\" | \"blue-light-line\" | \"blue-line\" | \"danger\" | \"grey\" | \"primary\" | \"success\" | \"warning\" | \"white\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Defines the color of the icon."
      },
      "attribute": "color",
      "reflect": false,
      "defaultValue": "''"
    }
  }; }
}
