var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a getter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot read private member from an object whose class did not declare it");
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _KlevuBadge_close;
import { Host, h } from "@stencil/core";
/**
 * Basic badge component. Can be used to display small information on top of other elements.
 *
 * @slot default - Badge content
 * @cssprop --klevu-badge-background - Background color of the badge, if accent or neutral is not set
 * @cssprop --klevu-badge-border-radius --klevu-border-radius-xxl Border radius of the badge
 */
export class KlevuBadge {
  constructor() {
    _KlevuBadge_close.set(this, () => {
      if (this.closable) {
        this.klevuBadgeClose.emit();
      }
    });
    this.accent = undefined;
    this.neutral = undefined;
    this.closable = undefined;
  }
  render() {
    let style = {};
    if (this.accent || this.neutral) {
      style = {
        "--klevu-badge-background": this.accent
          ? `var(--klevu-color-accent-${this.accent})`
          : `var(--klevu-color-neutral-${this.neutral})`,
      };
    }
    return (h(Host, { style: style, class: { closable: Boolean(this.closable) }, onClick: __classPrivateFieldGet(this, _KlevuBadge_close, "f").bind(this) }, this.closable && h("span", { part: "material-icon" }, "close"), h("klevu-typography", { variant: "body-xs" }, h("slot", null))));
  }
  static get is() { return "klevu-badge"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-badge.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-badge.css"]
    };
  }
  static get properties() {
    return {
      "accent": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Setting a acceent color to badge"
        },
        "attribute": "accent",
        "reflect": false
      },
      "neutral": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Setting a neutral color to badge"
        },
        "attribute": "neutral",
        "reflect": false
      },
      "closable": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "closable",
        "reflect": false
      }
    };
  }
  static get events() {
    return [{
        "method": "klevuBadgeClose",
        "name": "klevuBadgeClose",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "void",
          "resolved": "void",
          "references": {}
        }
      }];
  }
}
_KlevuBadge_close = new WeakMap();
//# sourceMappingURL=klevu-badge.js.map
