{"version":3,"file":"footnote-link.H-BWTDnG.js","sources":["../../../../../packages/web-components/src/lib/components/footnote-link/footnote-link.ts"],"sourcesContent":["import { PropertyValueMap, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { pdsCustomElement as customElement } from '../../decorators/pds-custom-element';\nimport { PdsLink } from '../link/link';\nimport styles from './footnote-link.scss?inline';\nimport { required } from '../../decorators/required';\nimport { PdsFootnoteItem } from '../footnote-item/footnote-item';\n\n/**\n * @summary This component is meant to handle the superscript links that are used as a tie to a footnote.\n * @slot default Optional: Inherited from PdsLink, not applicable\n * @slot icon-left Optional: Inherited from PdsLink, not applicable\n * @slot icon-right Optional: Inherited from PdsLink, not applicable\n */\n@customElement('pds-footnote-link', {\n category: 'component',\n type: 'component',\n state: 'stable',\n styles,\n})\nexport class PdsFootnoteLink extends PdsLink {\n /**\n\n * The ID used to link together the footnote-item and the footnote-link on the page. This has to match the ID of the footnote-item for it to work properly.\n * The text will be replaced with the index of the footnote. This is a **required** property.\n */\n @required\n @property({ type: String })\n footnoteId: string;\n\n /**\n * - id for footnote link\n */\n @property({ type: String, reflect: true })\n id: string;\n\n /**\n * - **default** renders link for basic action\n * - **inverted** used on a darker background\n */\n @property({ type: String })\n variant: 'default' | 'inverted' = 'default';\n\n /*\n * The href for the footnote link.\n */\n @property({ reflect: true })\n href: string;\n\n /*\n * The number of the footnote.\n *\n * @internal\n */\n @state()\n footnoteNumber: string = '1';\n\n protected firstUpdated(): void {\n super.firstUpdated();\n }\n\n async updated(\n changedProperties: PropertyValueMap | Map,\n ) {\n super.updated(changedProperties);\n this.handleFootnoteNumbering();\n }\n\n /**\n * Retrieve the footnote item that corresponds with the footnoteId\n *\n * @internal\n */\n getMatchingFootnoteItem(): PdsFootnoteItem | null {\n let footnote: PdsFootnoteItem | null = null;\n\n const footnotes = document.querySelectorAll('pds-footnote-item');\n // Bail early if we have no footnote items\n if (footnotes.length === 0) {\n return null;\n }\n // Loop through each footnote item to see if there's one with a matching id\n footnotes.forEach((footnoteItem) => {\n const item = footnoteItem as PdsFootnoteItem;\n if (item.id === this.footnoteId) {\n footnote = item;\n }\n });\n return footnote;\n }\n\n /**\n * Make the corresponding footnote item focusable when the footnote link is clicked\n *\n * @internal\n */\n handleClick(): void {\n const footnoteItem = this.getMatchingFootnoteItem();\n\n if (footnoteItem) {\n footnoteItem.tabIndex = 0;\n }\n }\n\n /**\n * Handle the footnote numbering by checking for a corresponding footnote-item\n * element and then assigning the index of the footnote-item to the link text\n * @internal\n */\n handleFootnoteNumbering() {\n const footnote = this.getMatchingFootnoteItem();\n\n // Bail if we didn't find a matching footnote\n if (!footnote) {\n return;\n }\n // Get its parent to validate that it is a footnote element\n const parent = footnote.parentElement as HTMLElement;\n // TODOv4: remove the check for PDS-FOOTNOTE when that component is removed\n if (\n parent.tagName === 'PDS-FOOTNOTE' ||\n parent.tagName === 'PDS-FOOTNOTES'\n ) {\n // Get the index of the footnote\n const index = Array.prototype.indexOf.call(parent.children, footnote);\n // change the text to the index of the footnote\n this.footnoteNumber = (index + 1).toString();\n }\n }\n\n // Note - this render overrides the render provided by PdsLink\n render() {\n return html`${this.footnoteNumber}`;\n }\n}\n"],"names":["PdsFootnoteLink","PdsLink","changedProperties","footnote","footnotes","footnoteItem","item","parent","index","html","ifDefined","__decorateClass","required","property","state","customElement","styles"],"mappings":";;;;;;;;;;;AAqBa,IAAAA,IAAN,cAA8BC,EAAQ;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAqB6B,KAAA,UAAA,WAcT,KAAA,iBAAA;AAAA,EAAA;AAAA,EAEf,eAAqB;AAC7B,UAAM,aAAa;AAAA,EAAA;AAAA,EAGrB,MAAM,QACJC,GACA;AACA,UAAM,QAAQA,CAAiB,GAC/B,KAAK,wBAAwB;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ/B,0BAAkD;AAChD,QAAIC,IAAmC;AAEjC,UAAAC,IAAY,SAAS,iBAAiB,mBAAmB;AAE3D,WAAAA,EAAU,WAAW,IAChB,QAGCA,EAAA,QAAQ,CAACC,MAAiB;AAClC,YAAMC,IAAOD;AACT,MAAAC,EAAK,OAAO,KAAK,eACRH,IAAAG;AAAA,IACb,CACD,GACMH;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQT,cAAoB;AACZ,UAAAE,IAAe,KAAK,wBAAwB;AAElD,IAAIA,MACFA,EAAa,WAAW;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQF,0BAA0B;AAClB,UAAAF,IAAW,KAAK,wBAAwB;AAG9C,QAAI,CAACA;AACH;AAGF,UAAMI,IAASJ,EAAS;AAExB,QACEI,EAAO,YAAY,kBACnBA,EAAO,YAAY,iBACnB;AAEA,YAAMC,IAAQ,MAAM,UAAU,QAAQ,KAAKD,EAAO,UAAUJ,CAAQ;AAE/D,WAAA,kBAAkBK,IAAQ,GAAG,SAAS;AAAA,IAAA;AAAA,EAC7C;AAAA;AAAA,EAIF,SAAS;AACA,WAAAC;AAAAA;AAAAA,iBAEM,KAAK,UAAU;AAAA,eACjBC,EAAU,KAAK,IAAI,CAAC;AAAA,qBACdA,EAAU,KAAK,SAAS,CAAC;AAAA;AAAA,iBAE7B,KAAK,WAAW;AAAA,WACtB,KAAK,cAAc;AAAA;AAAA;AAAA,EAAA;AAI9B;AAnHEC,EAAA;AAAA,EAFCC;AAAA,EACAC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAPfb,EAQX,WAAA,cAAA,CAAA;AAMAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAb9Bb,EAcX,WAAA,MAAA,CAAA;AAOAW,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GApBfb,EAqBX,WAAA,WAAA,CAAA;AAMAW,EAAA;AAAA,EADCE,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GA1BhBb,EA2BX,WAAA,QAAA,CAAA;AAQAW,EAAA;AAAA,EADCG,EAAM;AAAA,GAlCId,EAmCX,WAAA,kBAAA,CAAA;AAnCWA,IAANW,EAAA;AAAA,EANNI,EAAc,qBAAqB;AAAA,IAClC,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAAC;AAAA,EACD,CAAA;AAAA,GACYhB,CAAA;"}