{"mappings":"AACA,cAAc,sBAA0C;AAGxD,OAAO,UAAU;;;;;;;;;AAYjB,cAgCM,gBAAgB,KAAK;;;;CAIzB,AACA,IAAI,OAAO,OAAO,OAAO,OAAO,OAAO;;;;;;CAOvC,AACA;;;;CAKA,AACA,MAAM,SAAS;CAEf,UAAU,UAAU,eAAe;CAmBnC,UAAU,YAAY,GAAG,kBAAkB,eAAe;;AA8B5D,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/heading/component.ts"],"sourcesContent":["import { godown, htmlSlot, styles, tokenList } from \"@godown/element\";\nimport { type TemplateResult, css, html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n\nimport Link from \"../link/component.js\";\n\nconst protoName = \"heading\";\n\n/**\n * {@linkcode Heading} renders a heading.\n *\n * If the id is provided, the anchor will be displayed.\n *\n * @slot - Heading content.\n * @category layout\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    display: block;\n    text-align: start;\n  }\n\n  [part~=\"anchor\"] {\n    position: absolute;\n    text-align: center;\n    min-width: 1.25em;\n    right: 100%;\n  }\n\n  [part~=\"left\"][part~=\"anchor\"] {\n    right: 100%;\n  }\n\n  [part~=\"right\"][part~=\"anchor\"] {\n    left: 100%;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    width: fit-content;\n    position: relative;\n  }\n`)\nclass Heading extends Link {\n  /**\n   * The heading level.\n   */\n  @property()\n  as: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h1\";\n\n  /**\n   * The anchor prefix.\n   *\n   * Element must have an id to be displayed.\n   */\n  @property()\n  anchor = \"#\";\n\n  /**\n   * The anchor side.\n   */\n  @property()\n  side: \"left\" | \"right\" = \"left\";\n\n  protected render(): TemplateResult<1> {\n    const hrefValue = this.href || (this.id ? \"#\" + this.id : undefined);\n    return html`\n      <a\n        part=\"root\"\n        href=\"${hrefValue || nothing}\"\n      >\n        ${this.wrapHeading(\n          htmlSlot(),\n          hrefValue\n            ? html`\n                <i part=\"${tokenList(\"anchor\", this.side)}\">${this.anchor}</i>\n              `\n            : \"\",\n        )}\n      </a>\n    `;\n  }\n\n  protected wrapHeading(...children: any[]): TemplateResult<1> {\n    switch (this.as) {\n      case \"h2\":\n        return html`\n          <h2>${children}</h2>\n        `;\n      case \"h3\":\n        return html`\n          <h3>${children}</h3>\n        `;\n      case \"h4\":\n        return html`\n          <h4>${children}</h4>\n        `;\n      case \"h5\":\n        return html`\n          <h5>${children}</h5>\n        `;\n      case \"h6\":\n        return html`\n          <h6>${children}</h6>\n        `;\n      default:\n        return html`\n          <h1>${children}</h1>\n        `;\n    }\n  }\n}\n\nexport default Heading;\nexport { Heading };\n"],"version":3,"file":"component.d.ts"}