import { Host, h } from "@stencil/core";
/**
 * Basic badge component. Can be used to display small information on top of other elements. Typically
 * used to display things on top of product.
 *
 * @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() {
    this.accent = undefined;
    this.neutral = 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 }, 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
      }
    };
  }
  static get events() {
    return [{
        "method": "klevuBadgeClose",
        "name": "klevuBadgeClose",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "void",
          "resolved": "void",
          "references": {}
        }
      }];
  }
}
//# sourceMappingURL=klevu-badge.js.map
