/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { Component, Host, Prop, h, State, Event } from '@stencil/core';
import { createColorClasses } from '../../utils/theme';
export class GascoChip {
  constructor() {
    this.outline = true;
    this.chipId = `gasco-chip-${chipIds++}`;
    /**
     * The color to use from your application's color palette.
     * Default options are: `"primary"`, `"secondary"`, `"success"`, `"warning"` and `"danger"`.
     */
    this.color = 'primary';
    /**
     * If `true`, the user cannot interact with the chip.
     */
    this.disabled = false;
    this.isActive = false;
    this.onFocus = () => {
      this.gascoFocus.emit();
    };
    this.onBlur = () => {
      this.gascoBlur.emit();
    };
  }
  onClick(ev) {
    ev.preventDefault();
    this.isActive = !this.isActive;
  }
  render() {
    const finalSize = this.size === undefined && false ? 'small' : this.size;
    return (h(Host, { id: this.chipId, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
        [`chip-${finalSize}`]: finalSize !== undefined,
        'chip-outline': this.outline,
        'chip-disabled': this.disabled,
      }) },
      h("slot", null)));
  }
  static get is() { return "gasco-chip"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["gasco-chip.md.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["gasco-chip.md.css"]
  }; }
  static get properties() { return {
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Color",
        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never>",
        "references": {
          "Color": {
            "location": "import",
            "path": "../../interface"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"success\"`, `\"warning\"` and `\"danger\"`."
      },
      "attribute": "color",
      "reflect": true,
      "defaultValue": "'primary'"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, the user cannot interact with the chip."
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'small' | 'default' | 'large'",
        "resolved": "\"default\" | \"large\" | \"small\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "The button size."
      },
      "attribute": "size",
      "reflect": true
    }
  }; }
  static get states() { return {
    "isActive": {}
  }; }
  static get events() { return [{
      "method": "gascoFocus",
      "name": "gascoFocus",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the chip has focus."
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }, {
      "method": "gascoBlur",
      "name": "gascoBlur",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the chip loses focus."
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }]; }
}
let chipIds = 0;
