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

// Create a const where all members have a readonly value
// and literal type by using const assertion.
const HTag = {
  H1: 'h1',
  H2: 'h2',
  H3: 'h3',
  H4: 'h4',
  H5: 'h5',
  H6: 'h6',
};
Object.values(HTag);

// Create a const where all members have a readonly value
// and literal type by using const assertion.
const TitleVariant = {
  TITLE100: 'title-100',
  TITLE200: 'title-200',
  TITLE300: 'title-300',
  TITLE400: 'title-400',
  TITLE500: 'title-500',
  TITLE600: 'title-600',
  TITLE700: 'title-700',
  SUBSECTION100: 'subsection-100',
};

const teliaHeadingCss = ":host{display:block}h1,h2,h3,h4,h5,h6{hyphens:auto;margin:0;max-width:60ch}.subsection-100{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:500;font-size:calc(1.6rem * var(--voca-rem-multiplier));line-height:1.25}.title-100{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:bold;font-size:calc(1.6rem * var(--voca-rem-multiplier));line-height:1.25}@media screen and (min-width: 37.5em){.title-100{font-size:calc(\n    calc(1.6rem * var(--voca-rem-multiplier)) + 0.4 *\n      (100vw - calc(60rem * var(--voca-rem-multiplier))) / 84\n  )}}@media screen and (min-width: 90em){.title-100{font-size:calc(2rem * var(--voca-rem-multiplier))}}.title-200{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:bold;font-size:calc(2rem * var(--voca-rem-multiplier));line-height:1.25}@media screen and (min-width: 37.5em){.title-200{font-size:calc(\n    calc(2rem * var(--voca-rem-multiplier)) + 0.4 *\n      (100vw - calc(60rem * var(--voca-rem-multiplier))) / 84\n  )}}@media screen and (min-width: 90em){.title-200{font-size:calc(2.4rem * var(--voca-rem-multiplier))}}.title-300{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:bold;font-size:calc(2.4rem * var(--voca-rem-multiplier));line-height:1.25}@media screen and (min-width: 37.5em){.title-300{font-size:calc(\n    calc(2.4rem * var(--voca-rem-multiplier)) + 0.8 *\n      (100vw - calc(60rem * var(--voca-rem-multiplier))) / 84\n  )}}@media screen and (min-width: 90em){.title-300{font-size:calc(3.2rem * var(--voca-rem-multiplier))}}.title-400{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:bold;font-size:calc(2.8rem * var(--voca-rem-multiplier));line-height:1.25}@media screen and (min-width: 37.5em){.title-400{font-size:calc(\n    calc(2.8rem * var(--voca-rem-multiplier)) + 1.2 *\n      (100vw - calc(60rem * var(--voca-rem-multiplier))) / 84\n  )}}@media screen and (min-width: 90em){.title-400{font-size:calc(4rem * var(--voca-rem-multiplier))}}.title-500{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:bold;font-size:calc(3.2rem * var(--voca-rem-multiplier));line-height:1}@media screen and (min-width: 37.5em){.title-500{font-size:calc(\n    calc(3.2rem * var(--voca-rem-multiplier)) + 1.6 *\n      (100vw - calc(60rem * var(--voca-rem-multiplier))) / 84\n  )}}@media screen and (min-width: 90em){.title-500{font-size:calc(4.8rem * var(--voca-rem-multiplier))}}.title-600{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:bold;font-size:calc(3.6rem * var(--voca-rem-multiplier));line-height:1}@media screen and (min-width: 37.5em){.title-600{font-size:calc(\n    calc(3.6rem * var(--voca-rem-multiplier)) + 2 *\n      (100vw - calc(60rem * var(--voca-rem-multiplier))) / 84\n  )}}@media screen and (min-width: 90em){.title-600{font-size:calc(5.6rem * var(--voca-rem-multiplier))}}.title-700{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:bold;font-size:calc(4rem * var(--voca-rem-multiplier));line-height:1}@media screen and (min-width: 37.5em){.title-700{font-size:calc(\n    calc(4rem * var(--voca-rem-multiplier)) + 2.4 *\n      (100vw - calc(60rem * var(--voca-rem-multiplier))) / 84\n  )}}@media screen and (min-width: 90em){.title-700{font-size:calc(6.4rem * var(--voca-rem-multiplier))}}.display-25{font-family:\"TeliaSansHeading\", \"TeliaSans\", \"HelveticaNeue\", Helvetica, Arial, sans-serif;font-weight:normal;font-size:calc(3.2rem * var(--voca-rem-multiplier));line-height:1}@media screen and (min-width: 37.5em){.display-25{font-size:calc(\n    calc(3.2rem * var(--voca-rem-multiplier)) + 1.6 *\n      (100vw - calc(60rem * var(--voca-rem-multiplier))) / 84\n  )}}@media screen and (min-width: 90em){.display-25{font-size:calc(4.8rem * var(--voca-rem-multiplier))}}.display-50{font-family:\"TeliaSansHeading\", \"TeliaSans\", \"HelveticaNeue\", Helvetica, Arial, sans-serif;font-weight:normal;font-size:calc(3.6rem * var(--voca-rem-multiplier));line-height:1}@media screen and (min-width: 37.5em){.display-50{font-size:calc(\n    calc(3.6rem * var(--voca-rem-multiplier)) + 2 *\n      (100vw - calc(60rem * var(--voca-rem-multiplier))) / 84\n  )}}@media screen and (min-width: 90em){.display-50{font-size:calc(5.6rem * var(--voca-rem-multiplier))}}.display-100{font-family:\"TeliaSansHeading\", \"TeliaSans\", \"HelveticaNeue\", Helvetica, Arial, sans-serif;font-weight:normal;font-size:calc(4rem * var(--voca-rem-multiplier));line-height:1}@media screen and (min-width: 37.5em){.display-100{font-size:calc(\n    calc(4rem * var(--voca-rem-multiplier)) + 2.4 *\n      (100vw - calc(60rem * var(--voca-rem-multiplier))) / 84\n  )}}@media screen and (min-width: 90em){.display-100{font-size:calc(6.4rem * var(--voca-rem-multiplier))}}.display-200{font-family:\"TeliaSansHeading\", \"TeliaSans\", \"HelveticaNeue\", Helvetica, Arial, sans-serif;font-weight:normal;font-size:calc(4.8rem * var(--voca-rem-multiplier));line-height:1}@media screen and (min-width: 37.5em){.display-200{font-size:calc(\n    calc(4.8rem * var(--voca-rem-multiplier)) + 3.2 *\n      (100vw - calc(60rem * var(--voca-rem-multiplier))) / 84\n  )}}@media screen and (min-width: 90em){.display-200{font-size:calc(8rem * var(--voca-rem-multiplier))}}";

const TeliaHeading = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /**
     * 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 watchers() { return {
    "tag": ["validateTag"]
  }; }
  static get style() { return teliaHeadingCss; }
}, [1, "telia-heading", {
    "tag": [1],
    "variant": [1]
  }]);
TeliaHeading.tags = Object.values(HTag);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-heading", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-heading":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaHeading);
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { HTag as H, TeliaHeading as T, defineCustomElement as d };
