import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './telia-vst2.js';

const teliaCounterBadgeCss = ".telia-counter-badge{background-color:#5e0092;border-radius:calc(99.9rem * var(--voca-rem-multiplier));font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:500;font-size:calc(1.2rem * var(--voca-rem-multiplier));color:#ffffff;display:inline-block;line-height:1;width:calc(1.4rem * var(--voca-rem-multiplier));max-height:calc(1.4rem * var(--voca-rem-multiplier));padding:calc(0.1rem * var(--voca-rem-multiplier)) calc(0.4rem * var(--voca-rem-multiplier));text-align:center}.telia-counter-badge--long{width:auto}.telia-counter-badge--placeholder{display:flex;justify-content:center;align-items:center}";

const TeliaCounterBadge$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /** The numeric value displayed in the badge. */
    this.value = 0;
    /** Describe unclear button context for better accessibility support */
    this.allyLabel = null;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-counter-badge';
  }
  sanitizeValue(value) {
    const integerValue = Number.parseInt(value);
    if (integerValue > 0) {
      return integerValue;
    }
    else {
      throw Error('Value needs to be a number (1-9)');
    }
  }
  formatValue(value) {
    return value > 999 ? '999+' : value.toString();
  }
  render() {
    return (h(Host, { class: {
        'telia-counter-badge': !!this.value,
        [`telia-counter-badge--long`]: this.value > 9,
      }, "data-testid": this.dataTestid }, h("span", { class: "telia-counter-badge--placeholder", role: "status", "aria-label": this.allyLabel }, this.formatValue(this.sanitizeValue(this.value))), h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  static get style() { return teliaCounterBadgeCss; }
}, [1, "telia-counter-badge", {
    "dataTestid": [1, "data-testid"],
    "value": [2],
    "allyLabel": [1, "ally-label"]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-counter-badge", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-counter-badge":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaCounterBadge$1);
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const TeliaCounterBadge = TeliaCounterBadge$1;
const defineCustomElement = defineCustomElement$1;

export { TeliaCounterBadge, defineCustomElement };
