import { Component, Host, Prop, h } from '@stencil/core';
export class TeliaCounterBadge {
  constructor() {
    /** 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 is() { return "telia-counter-badge"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["telia-counter-badge.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-counter-badge.css"]
  }; }
  static get properties() { return {
    "dataTestid": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Test id set for web component host"
      },
      "attribute": "data-testid",
      "reflect": false
    },
    "value": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The numeric value displayed in the badge."
      },
      "attribute": "value",
      "reflect": false,
      "defaultValue": "0"
    },
    "allyLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Describe unclear button context for better accessibility support"
      },
      "attribute": "ally-label",
      "reflect": false,
      "defaultValue": "null"
    }
  }; }
}
