import { 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
 * @csspart badge-content The content of the badge
 * @csspart badge-base The container of the badge
 */
export class KlevuBadge {
  constructor() {
    this.accent = undefined;
    this.neutral = undefined;
  }
  render() {
    let style = {};
    if (this.accent || this.neutral) {
      style = {
        "--background": this.accent
          ? `var(--klevu-color-accent-${this.accent})`
          : `var(--klevu-color-neutral-${this.neutral})`,
        "--klevu-typography-color": this.neutral && this.neutral > 6 ? "var(--klevu-color-neutral-1)" : "var(--klevu-typography-color)",
      };
    }
    return (h("div", { style: style, part: "badge-base" }, h("klevu-typography", { variant: "body-xs" }, h("span", { part: "badge-content" }, 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 accent color to badge (1-4)"
        },
        "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 (1-8)"
        },
        "attribute": "neutral",
        "reflect": false
      }
    };
  }
}
//# sourceMappingURL=klevu-badge.js.map
