import { r as registerInstance, h, H as Host } from './index-c269755a.js';
import { H as HTag } from './HTag-1f86a384.js';

// 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 = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * 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"]
  }; }
};
TeliaHeading.tags = Object.values(HTag);
TeliaHeading.style = teliaHeadingCss;

export { TeliaHeading as telia_heading };
