import { Component, Host, h, Prop, Watch } from '@stencil/core';
import { HTag } from '../../types/HTag';
import { TitleVariant, } from '../../types/HeadingVariant';
export class TeliaHeading {
  constructor() {
    /**
     * Determines the appearance of the text.
     *
     */
    this.variant = TitleVariant.TITLE100;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-heading';
  }
  validateTag(newValue) {
    this.validateHTag(newValue);
  }
  connectedCallback() {
    this.validateHTag(this.tag);
  }
  render() {
    const Tag = this.tag.toString();
    return (h(Host, { class: `telia-heading--${this.variant}` },
      h(Tag, { class: this.variant },
        h("slot", null)),
      h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  validateHTag(input) {
    /* By checking the provided value against our predefined
     * set of values, we are able to assert that the value is
     * valid at runtime. This is useful if consumer of design
     * system is not using typescript.
     */
    if (TeliaHeading.tags.indexOf(input) < 0) {
      throw new Error(`Illegal value for 'tag': ${input}. Please use ${TeliaHeading.tags.join(', ')}`);
    }
  }
  static get is() { return "telia-heading"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["telia-heading.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-heading.css"]
  }; }
  static get properties() { return {
    "tag": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "HTagType",
        "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
        "references": {
          "HTagType": {
            "location": "import",
            "path": "../../types/HTag"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The tag to render. This is mandatory."
      },
      "attribute": "tag",
      "reflect": false
    },
    "variant": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "TitleVariantType | DisplayVariantType",
        "resolved": "\"display-100\" | \"display-200\" | \"display-25\" | \"display-50\" | \"subsection-100\" | \"title-100\" | \"title-200\" | \"title-300\" | \"title-400\" | \"title-500\" | \"title-600\" | \"title-700\"",
        "references": {
          "TitleVariantType": {
            "location": "import",
            "path": "../../types/HeadingVariant"
          },
          "DisplayVariantType": {
            "location": "import",
            "path": "../../types/HeadingVariant"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determines the appearance of the text."
      },
      "attribute": "variant",
      "reflect": false,
      "defaultValue": "TitleVariant.TITLE100"
    }
  }; }
  static get watchers() { return [{
      "propName": "tag",
      "methodName": "validateTag"
    }]; }
}
TeliaHeading.tags = Object.values(HTag);
