import { Component, h, Prop, Event } from '@stencil/core';
export class ScTag {
  constructor() {
    /** The tag's type. */
    this.type = 'default';
    /** The tag's size. */
    this.size = 'medium';
    /** Draws a pill-style tag with rounded edges. */
    this.pill = false;
    /** Makes the tag clearable. */
    this.clearable = false;
  }
  handleClearClick() {
    this.scClear.emit(this);
  }
  render() {
    return (h("span", { part: "base", onClick: () => this.handleClearClick(), class: {
        'tag': true,
        // Types
        'tag--primary': this.type === 'primary',
        'tag--success': this.type === 'success',
        'tag--info': this.type === 'info',
        'tag--warning': this.type === 'warning',
        'tag--danger': this.type === 'danger',
        'tag--default': this.type === 'default',
        // Sizes
        'tag--small': this.size === 'small',
        'tag--medium': this.size === 'medium',
        'tag--large': this.size === 'large',
        // Modifers
        'tag--pill': this.pill,
        'tag--clearable': this.clearable,
      } },
      h("span", { part: "content", class: "tag__content" },
        h("slot", null)),
      !!this.clearable && (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", class: "bi bi-x", viewBox: "0 0 16 16" },
        h("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" })))));
  }
  static get is() { return "sc-tag"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-tag.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-tag.css"]
  }; }
  static get properties() { return {
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'primary' | 'success' | 'info' | 'warning' | 'danger' | 'default'",
        "resolved": "\"danger\" | \"default\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The tag's type."
      },
      "attribute": "type",
      "reflect": true,
      "defaultValue": "'default'"
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'small' | 'medium' | 'large'",
        "resolved": "\"large\" | \"medium\" | \"small\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The tag's size."
      },
      "attribute": "size",
      "reflect": true,
      "defaultValue": "'medium'"
    },
    "pill": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Draws a pill-style tag with rounded edges."
      },
      "attribute": "pill",
      "reflect": true,
      "defaultValue": "false"
    },
    "clearable": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Makes the tag clearable."
      },
      "attribute": "clearable",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get events() { return [{
      "method": "scClear",
      "name": "scClear",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "ScTag",
        "resolved": "ScTag",
        "references": {
          "ScTag": {
            "location": "global"
          }
        }
      }
    }]; }
}
