import { r as registerInstance, h, H as Host, g as getElement } from './index-090d31ca.js';
import { s as sanitizeVegaComponent } from './component-d58ca1d0.js';
import './global-slimmer-registry-0a7aa308.js';
import { I as InjectVegaSlimmer } from './inject-vega-slimmer-caffc2aa.js';
import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-4202784a.js';

const vegaCounterBadgeCss = ":host{display:block;position:relative;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host .dot{display:inline-block;position:absolute;border-radius:9999px;width:9px;height:9px}:host .counter{display:flex;position:absolute;height:20px;min-width:20px;border-radius:9999px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));justify-content:center;align-items:center;font-family:\"Inter\", sans-serif;font-weight:700;font-size:12px;line-height:15px}:host .default-position{top:0px;right:0px;transform:scale(1) translate(50%, -50%)}:host .multi-digit{padding-left:4px;padding-right:4px}:host .v-bg-danger{background-color:rgba(var(--v-bg-danger, 189, 41, 71, 1))}:host .v-bg-action{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}";

var __decorate = (undefined && undefined.__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;
};
const VegaCounterBadge = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    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);
      }
    }
  }
  get host() { return getElement(this); }
};
__decorate([
  InjectVegaGlobalSlimmer()
], VegaCounterBadge.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaCounterBadge.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
VegaCounterBadge.style = vegaCounterBadgeCss;

export { VegaCounterBadge as vega_counter_badge };
