var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Component, Host, h, Element, Prop } from '@stencil/core';
import { sanitizeVegaComponent } from '../../utils/component';
import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
/**
 * @vegaVersion 1.15.0
 */
export class VegaCounterBadge {
  constructor() {
    this.globalSlimmers = {};
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
    /**
     * Determines whether the badge is displayed without a specific count.
     *
     * If set to `true`, the count is hidden,
     *    and the badge is rendered as a smaller dot.
     *
     * @vegaVersion 1.15.0
     */
    this.dot = false;
    /**
     * Specifies the background color token to indicate prominence.
     *
     * - Use 'bg-danger' to represent critical information that
     *    demands the user's attention.
     * - Use 'bg-action' to represent a mere count of items.
     *
     * @vegaVersion 1.15.0
     */
    this.color = 'bg-danger';
    /**
     * Represents the number that will be displayed on the badge.
     *
     * @vegaVersion 1.15.0
     */
    this.count = 0;
    /**
     * Specifies the offset of the badge `[left, top]` from
     *    its default position at the top right corner.
     *
     * @vegaVersion 1.15.0
     */
    this.offset = [0, 0];
  }
  render() {
    return sanitizeVegaComponent(h(Host, null,
      h("div", { class: {
          'dot': this.count > 0 && this.dot,
          'counter': this.count > 0 && !this.dot,
          'multi-digit': this.count >= 10 && !this.dot,
          'v-bg-danger': this.color != 'bg-action',
          'v-bg-action': this.color == 'bg-action',
          'default-position': this.count > 0,
        }, style: { right: `${-this.offset[0]}px`, top: `${this.offset[1]}px` } }, this.renderCounter()),
      h("slot", null)), this.host);
  }
  renderCounter() {
    if (this.count > 0 && !this.dot) {
      if (this.count > 99) {
        return h("span", null, "99+");
      }
      else {
        return h("span", null, this.count);
      }
    }
  }
  static get is() { return "vega-counter-badge"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["vega-counter-badge.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["vega-counter-badge.css"]
  }; }
  static get properties() { return {
    "dot": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.15.0"
          }],
        "text": "Determines whether the badge is displayed without a specific count.\n\nIf set to `true`, the count is hidden,\n   and the badge is rendered as a smaller dot."
      },
      "attribute": "dot",
      "reflect": false,
      "defaultValue": "false"
    },
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'bg-danger' | 'bg-action'",
        "resolved": "\"bg-action\" | \"bg-danger\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.15.0"
          }],
        "text": "Specifies the background color token to indicate prominence.\n\n- Use 'bg-danger' to represent critical information that\n   demands the user's attention.\n- Use 'bg-action' to represent a mere count of items."
      },
      "attribute": "color",
      "reflect": false,
      "defaultValue": "'bg-danger'"
    },
    "count": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.15.0"
          }],
        "text": "Represents the number that will be displayed on the badge."
      },
      "attribute": "count",
      "reflect": false,
      "defaultValue": "0"
    },
    "offset": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "number[]",
        "resolved": "number[]",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.15.0"
          }],
        "text": "Specifies the offset of the badge `[left, top]` from\n   its default position at the top right corner."
      },
      "defaultValue": "[0, 0]"
    }
  }; }
  static get elementRef() { return "host"; }
}
__decorate([
  InjectVegaGlobalSlimmer()
], VegaCounterBadge.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaCounterBadge.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
