/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { c as createColorClasses } from './theme.js';

const gascoChipMdCss = ":host{--color:var(--gasco-color-primary, #00A3E0);--border-color:var(--gasco-color-primary, #00A3E0);--border-width:1px;--border-style:solid;--background:transparent;border-radius:100px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:4px;margin-right:4px;margin-top:4px;margin-bottom:4px;padding-left:12px;padding-right:12px;padding-top:7px;padding-bottom:7px;display:inline-flex;position:relative;align-items:center;height:28px;font-weight:400;font-size:16px;line-height:24px;color:var(--color);font-family:var(--gasco-font-family, inherit);cursor:pointer;overflow:hidden;vertical-align:middle;box-sizing:border-box;transition:300ms}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:4px;margin-inline-end:4px}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host(.chip-disabled){transition:300ms;cursor:default;opacity:0.8;pointer-events:none}:host(.chip-disabled.chip-outline){border-color:var(--gasco-color-light-contrast, #CCCCCC) !important;background:#EBEBEB !important}:host(.chip-disabled.chip-outline.gasco-color){color:var(--gasco-color-light-contrast, #CCCCCC) !important}:host(.gasco-color){transition:300ms;background:rgba(var(--gasco-color-base-rgb), 0.08);color:var(--gasco-color-base)}:host(.gasco-color:focus){color:#FFF;background:var(--gasco-color-base) !important}:host(.gasco-color:active){color:#FFF;background:var(--gasco-color-base) !important}:host(.gasco-color.gasco-activated){background:rgba(var(--gasco-color-base-rgb), 0.16)}:host(.chip-outline){transition:300ms;border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:transparent}:host(.chip-outline.gasco-color){border-color:var(--gasco-color-base)}:host(.chip-outline:not(.gasco-color):focus){background:rgba(0, 0, 0, 0.04)}:host(.chip-outline.gasco-activated:not(.gasco-color)){background:rgba(0, 0, 0, 0.08)}:host(.chip-outline.chip-large){height:32px;font-size:18px;line-height:28px}:host(.chip-outline.chip-small){height:26px;font-size:14px;line-height:20px}::slotted(gasco-icon){font-size:20px}:host(:not(.gasco-color)) ::slotted(gasco-icon){color:rgba(0, 0, 0, 0.54)}::slotted(gasco-icon:first-child){margin-left:-4px;margin-right:8px;margin-top:-4px;margin-bottom:-4px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(gasco-icon:first-child){margin-left:unset;margin-right:unset;-webkit-margin-start:-4px;margin-inline-start:-4px;-webkit-margin-end:8px;margin-inline-end:8px}}::slotted(gasco-icon:last-child){margin-left:8px;margin-right:-4px;margin-top:-4px;margin-bottom:-4px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(gasco-icon:last-child){margin-left:unset;margin-right:unset;-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:-4px;margin-inline-end:-4px}}:host(:focus){outline:none}:host(:focus){--background:rgba(var(--gasco-text-color-rgb, 0, 0, 0), 0.16)}:host(:active){--background:current-color(base)}@media (any-hover: hover){:host(:hover){--background:rgba(var(--gasco-text-color-rgb, 0, 0, 0), 0.16)}:host(.gasco-color:hover){background:rgba(var(--gasco-color-base-rgb), 0.1)}:host(.chip-outline:not(.gasco-color):hover){background:rgba(var(--gasco-text-color-rgb, 0, 0, 0), 0.04)}}";

const GascoChip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.gascoFocus = createEvent(this, "gascoFocus", 7);
    this.gascoBlur = createEvent(this, "gascoBlur", 7);
    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 style() { return gascoChipMdCss; }
}, [1, "gasco-chip", {
    "color": [513],
    "disabled": [4],
    "size": [513],
    "isActive": [32]
  }]);
let chipIds = 0;
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["gasco-chip"];
  components.forEach(tagName => { switch (tagName) {
    case "gasco-chip":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, GascoChip$1);
      }
      break;
  } });
}

const GascoChip = GascoChip$1;
const defineCustomElement = defineCustomElement$1;

export { GascoChip, defineCustomElement };
