@patternfly/elements
Version:
PatternFly Elements
1 lines • 10.2 kB
Source Map (JSON)
{"version":3,"file":"pf-jump-links.js","sourceRoot":"","sources":["pf-jump-links.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\n\nimport { PfJumpLinksItem } from './pf-jump-links-item.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport style from './pf-jump-links.css';\n\n/**\n * **Jump links** allow users to navigate to sections within a page.\n * @fires toggle - when the `expanded` disclosure widget is toggled\n * @slot - Place pf-jump-links-items here\n * @cssprop --pf-c-jump-links__list--Display\n * @cssprop --pf-c-jump-links__list--FlexDirection\n * @cssprop --pf-c-jump-links__list--PaddingTop -- padding around the list of links\n * @cssprop --pf-c-jump-links__list--PaddingRight\n * @cssprop --pf-c-jump-links__list--PaddingBottom\n * @cssprop --pf-c-jump-links__list--PaddingLeft\n * @cssprop --pf-c-jump-links__list--Visibility\n * @cssprop --pf-c-jump-links__list--before--BorderColor\n * @cssprop --pf-c-jump-links__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links__list--before--BorderRightWidth\n * @cssprop --pf-c-jump-links__list--before--BorderBottomWidth\n * @cssprop --pf-c-jump-links__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n * @cssprop --pf-c-jump-links__toggle--MarginTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-jump-links__toggle--MarginBottom\n * @cssprop --pf-c-jump-links__toggle--MarginBottom--base\n * @cssprop --pf-c-jump-links__toggle--MarginLeft\n * @cssprop --pf-c-jump-links__toggle-text--Color\n * @cssprop --pf-c-button--PaddingTop -- padding around the expandable jump links disclosure widget.\n * @cssprop --pf-c-button--PaddingRight\n * @cssprop --pf-c-button--PaddingBottom\n * @cssprop --pf-c-button--PaddingLeft\n * @cssprop --pf-c-jump-links__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links__toggle-icon--Transition\n * @cssprop --pf-c-jump-links__toggle-text--MarginLeft\n * @cssprop --pf-c-jump-links--m-expanded__toggle--MarginBottom\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Rotate\n * @cssprop --pf-c-jump-links--m-expanded__toggle-icon--Color\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingTop\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingRight\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingBottom\n * @cssprop --pf-c-jump-links--m-vertical__list--PaddingLeft\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth\n * @cssprop --pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth\n * @cssprop --pf-c-jump-links--m-vertical__list--FlexDirection\n */\n@customElement('pf-jump-links')\nexport class PfJumpLinks extends LitElement {\n static readonly styles: CSSStyleSheet[] = [style];\n\n /** Whether the element features a disclosure widget around the nav items */\n @property({ reflect: true, type: Boolean }) expandable = false;\n\n /** Whether the expandable element's disclosure widget is expanded */\n @property({ reflect: true, type: Boolean }) expanded = false;\n\n /** Whether the layout of children is vertical or horizontal. */\n @property({ reflect: true, type: Boolean }) vertical = false;\n\n /** Whether to center children. */\n @property({ reflect: true, type: Boolean }) centered = false;\n\n /** Offset to add to the scroll position, potentially for a masthead which content scrolls under. */\n @property({ type: Number }) offset = 0;\n\n /** Label to add to nav element. */\n @property() label?: string;\n\n #kids = this.querySelectorAll?.<LitElement>(':is(pf-jump-links-item, pf-jump-links-list)');\n\n get #items() {\n return Array.from(this.#kids ?? [])\n .flatMap(i => [\n ...i.shadowRoot?.querySelectorAll?.('a') ?? [],\n ...i.querySelectorAll?.('a') ?? [],\n ]);\n }\n\n #tabindex = RovingTabindexController.of<HTMLAnchorElement>(this, {\n getItems: () => this.#items,\n });\n\n #spy = new ScrollSpyController(this, {\n rootMargin: `${this.offset}px 0px 0px 0px`,\n tagNames: ['pf-jump-links-item'],\n });\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const here = await super.getUpdateComplete();\n const ps = await Promise.all(Array.from(this.#kids, x => x.updateComplete));\n return here && ps.every(x => !!x);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('slotchange', this.#onSlotChange);\n this.addEventListener('select', this.#onSelect);\n }\n\n override firstUpdated(): void {\n const active = this.querySelector?.<PfJumpLinksItem>('pf-jump-links-item[active]');\n if (active) {\n this.#setActiveItem(active);\n }\n }\n\n override updated(changed: Map<string, unknown>): void {\n if (changed.has('offset')) {\n this.#spy.rootMargin = `${this.offset ?? 0}px 0px 0px 0px`;\n }\n }\n\n render(): TemplateResult<1> {\n return html`\n <nav id=\"container\">${this.expandable ? html`\n <details ?open=\"${this.expanded}\" @toggle=\"${this.#onToggle}\">\n <summary>\n <pf-icon icon=\"chevron-right\"></pf-icon>\n <span id=\"label\">${this.label}</span>\n </summary>\n <div role=\"listbox\" aria-labelledby=\"label\">\n <slot></slot>\n </div>\n </details>` : html`\n <span id=\"label\">${this.label}</span>\n <div role=\"listbox\" aria-labelledby=\"label\">\n <slot></slot>\n </div>`}\n </nav>\n `;\n }\n\n #onSlotChange() {\n this.#tabindex.items = this.#items;\n }\n\n #onSelect(event: Event) {\n if (event.target instanceof PfJumpLinksItem) {\n this.#setActiveItem(event.target);\n }\n }\n\n #setActiveItem(item: PfJumpLinksItem) {\n const itemLink = item.shadowRoot?.querySelector?.('a') ?? null;\n if (itemLink) {\n this.#tabindex.atFocusedItemIndex = this.#tabindex.items.indexOf(itemLink);\n this.#spy.setActive(item);\n }\n }\n\n #onToggle(event: Event) {\n if (event.target instanceof HTMLDetailsElement) {\n this.expanded = event.target.open;\n }\n this.dispatchEvent(new Event('toggle'));\n }\n}\n\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-jump-links': PfJumpLinks;\n }\n}\n"]}