{"version":3,"file":"support-heading.CiTmPHI7.js","sources":["../../../../../packages/web-components/src/lib/components/support-heading/support-heading.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { pdsCustomElement as customElement } from '../../decorators/pds-custom-element';\nimport { PdsElement } from '../PdsElement';\nimport styles from './support-heading.scss?inline';\nimport { required } from '../../decorators/required';\nimport '../heading/heading';\n\n@customElement('pds-support-heading', {\n  category: 'component',\n  type: 'component',\n  state: 'stable',\n  styles,\n})\n/**\n * @summary A support heading\n *\n * @slot default Required: The text of the heading\n */\nexport class PdsSupportHeading extends PdsElement {\n  /**\n   * Heading variant\n   * - **meta-default** renders a <pds-heading> with meta text variant capitalized\n   * - **meta-sm** renders a <pds-heading> with smaller meta text variant capitalized\n   * - **headline-default** renders a <pds-heading> sentence case and bold with blue border and light blue offset background\n   */\n  @property()\n  headingVariant: 'meta-default' | 'meta-sm' | 'headline-default' =\n    'meta-default';\n\n  @property({ type: Boolean })\n  inverted: boolean = false;\n\n  /**\n   * This is a **required** property.\n   */\n  @required\n  @property()\n  headingTagName: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n  /**\n   * Tracks the internal heading markup, which needs to be set after the first update (see note)\n   * @internal\n   */\n  @state()\n  headingElementMarkup = html``;\n\n  /**\n   * @internal\n   */\n  get classNames() {\n    return {\n      [this.headingVariant]: !!this.headingVariant,\n      inverted: this.inverted,\n    };\n  }\n\n  headingLevel() {\n    return this.headingTagName.replace('h', '');\n  }\n\n  protected firstUpdated(): void {\n    super.firstUpdated();\n\n    // We have to wait for the first update to set the heading element markup\n    // For some reason, it doesn't know what properties are set (even if explicitly set to strings)\n    // when rendering on the server, so then the required decorator doesn't work\n    // At some point, we should dig into this more to see if we can allow nested\n    // components that have required fields to render on the server\n    this.headingElementMarkup = html`<pds-heading\n      headingTag=${this.headingTagName}\n      variant=${this.headingVariant}\n      ><slot></slot\n    ></pds-heading>`;\n  }\n\n  render() {\n    return html`<div\n      class=${this.getClass()}\n      role=\"heading\"\n      aria-level=\"${this.headingLevel()}\"\n    >\n      <div class=${this.classEl('body')}>${this.headingElementMarkup}</div>\n    </div>`;\n  }\n}\n"],"names":["PdsSupportHeading","PdsElement","html","__decorateClass","property","required","state","customElement","styles"],"mappings":";;;;;;;;;;AAmBa,IAAAA,IAAN,cAAgCC,EAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA,GASH,KAAA,iBAAA,gBAGkB,KAAA,WAAA,IAcG,KAAA,uBAAAC;AAAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAKvB,IAAI,aAAa;AACR,WAAA;AAAA,MACL,CAAC,KAAK,cAAc,GAAG,CAAC,CAAC,KAAK;AAAA,MAC9B,UAAU,KAAK;AAAA,IAAA;AAAA,EAEnB;AAAA,EAEA,eAAe;AACb,WAAO,KAAK,eAAe,QAAQ,KAAK,EAAE;AAAA,EAC5C;AAAA,EAEU,eAAqB;AAC7B,UAAM,aAAa,GAOnB,KAAK,uBAAuBA;AAAAA,mBACb,KAAK,cAAc;AAAA,gBACtB,KAAK,cAAc;AAAA;AAAA;AAAA,EAGjC;AAAA,EAEA,SAAS;AACA,WAAAA;AAAAA,cACG,KAAK,UAAU;AAAA;AAAA,oBAET,KAAK,cAAc;AAAA;AAAA,mBAEpB,KAAK,QAAQ,MAAM,CAAC,IAAI,KAAK,oBAAoB;AAAA;AAAA,EAElE;AACF;AA1DEC,EAAA;AAAA,EADCC,EAAS;AAAA,GAPCJ,EAQX,WAAA,kBAAA,CAAA;AAIAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS;AAAA,GAXhBJ,EAYX,WAAA,YAAA,CAAA;AAOAG,EAAA;AAAA,EAFCE;AAAA,EACAD,EAAS;AAAA,GAlBCJ,EAmBX,WAAA,kBAAA,CAAA;AAOAG,EAAA;AAAA,EADCG,EAAM;AAAA,GAzBIN,EA0BX,WAAA,wBAAA,CAAA;AA1BWA,IAANG,EAAA;AAAA,EAXNI,EAAc,uBAAuB;AAAA,IACpC,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAAC;AAAA,EAAA,CACD;AAAA,GAMYR,CAAA;"}