{"version":3,"file":"horizontal-tabs-v2.mjs","sources":["../../../../src/horizontal-tabs/v2/horizontal-tabs.ts"],"sourcesContent":["import { html, nothing, unsafeCSS, type CSSResult, type PropertyValues, type TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { createRef, ref, type Ref } from 'lit/directives/ref.js';\nimport { BaseOrganism, type ContentAlignment } from '../../base-organism/base-organism';\nimport { AnalyticsService } from '../../core/analytics';\nimport { appendStylesheet } from '../../core/utils';\nimport styles from './horizontal-tabs.scss?inline';\nimport slotStyles from './horizontal-tabs.slot.scss?inline';\nimport '@vg-constellation/web/tabs';\nimport '@vg-constellation/web/accordion';\n\ninterface TabItem {\n accordionHostRef: Ref;\n tabRef: Ref;\n}\n\n/** Which group currently hosts the panel slots; the other group renders them empty. */\ntype PanelLayout = 'tabs' | 'accordion';\n\nconst DEFAULT_SLOTS = 4;\nconst DEFAULT_LABEL = 'Tab';\n\nconst labelOf = (panel: Element | null): string =>\n panel?.getAttribute('data-label') || DEFAULT_LABEL;\n\n@customElement('pips-v2-horizontal-tabs')\nexport class HorizontalTabV2 extends BaseOrganism {\n static override styles: CSSResult[] = [...BaseOrganism.styles, unsafeCSS(styles)];\n\n @state()\n private tabItems: TabItem[] = [];\n\n /**\n * Derived from each panel's `data-label`, and held apart from `tabItems` deliberately: a\n * changed label has to re-render the tab and accordion headers without changing the\n * identity of the array `updated()` watches. Carrying the label inside `TabItem` forced a\n * whole-array swap to trigger that re-render, which `updated()` could not distinguish from\n * a real content change — so every panel was cloned twice per cycle.\n */\n @state()\n private labels: string[] = [];\n\n // Panels are slotted into one group at a time, never cloned into the other: clones re-run\n // their text-content and footnote markers, and the renumbering re-triggered the clone.\n @state()\n private layout: PanelLayout = 'tabs';\n\n private resizeObserver: ResizeObserver | null = null;\n\n private headingText: string = '';\n private analyticsService?: AnalyticsService;\n\n private previouslyOpenAccordions = new Set();\n private isInitialLoad = true;\n\n @property({ type: Number, reflect: true })\n slots = DEFAULT_SLOTS;\n\n @property({ type: Number })\n currentTab = 0;\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n appendStylesheet({\n target: this,\n styles: slotStyles,\n name: `${this.tagName.toLowerCase()}-slot`,\n });\n\n // Event delegation - single listeners for all tabs/accordions\n this.addEventListener('c11n-tab-change', this.handleTabChange);\n this.addEventListener('c11n-accordion-toggle', this.handleAccordionToggle);\n\n this.resizeObserver = new ResizeObserver(() => this.syncLayout());\n this.resizeObserver.observe(this);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n\n // Cleanup event listeners\n this.removeEventListener('c11n-tab-change', this.handleTabChange);\n this.removeEventListener('c11n-accordion-toggle', this.handleAccordionToggle);\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n /**\n * AEM authors `slots` as an attribute, so the property receives whatever the Number\n * converter produces — `null` for a removed attribute, `NaN` for a typo. `tabItems.length`\n * can never equal such a value, which turns the re-initialise check in `updated()` into an\n * unbounded microtask loop that also leaves every accordion body empty. An authored `0` is\n * a legitimate count and is preserved; anything unusable falls back to the default.\n */\n private get panelCount(): number {\n // Guarded by `typeof` rather than `Number()`: a removed attribute arrives as `null`,\n // which `Number()` would quietly turn into a legitimate-looking count of zero.\n const requested = typeof this.slots === 'number' ? this.slots : DEFAULT_SLOTS;\n if (!Number.isFinite(requested) || requested < 0) return DEFAULT_SLOTS;\n\n return Math.trunc(requested);\n }\n\n private initializeItems(): void {\n const count = this.panelCount;\n\n this.tabItems = Array.from({ length: count }, () => ({\n accordionHostRef: createRef(),\n tabRef: createRef(),\n }));\n this.labels = Array.from({ length: count }, () => DEFAULT_LABEL);\n }\n\n /** Reads the container query's outcome, so the stylesheet stays the breakpoint's only source. */\n private syncLayout(): void {\n const tabs = this.shadowRoot?.querySelector('c11n-web-v1-tabs');\n if (!tabs) return;\n this.layout = getComputedStyle(tabs).display === 'none' ? 'accordion' : 'tabs';\n }\n\n private handleTabChange = (): void => {\n // The initially current tab is not a selection, so it is not a sub-page view.\n if (this.isInitialLoad) {\n this.isInitialLoad = false;\n return;\n }\n\n // Constellation moves `current` after the event, so read it on the next frame.\n requestAnimationFrame(() => {\n const currentIndex = this.tabItems.findIndex((item) =>\n item.tabRef.value?.hasAttribute('current')\n );\n if (currentIndex >= 0) {\n this.trackAnalytics(currentIndex, 'tab');\n }\n });\n };\n\n private handleAccordionToggle = (): void => {\n // Constellation moves `open` after the event, so read it on the next frame.\n requestAnimationFrame(() => {\n const openIndexes = new Set(\n this.tabItems.flatMap((item, index) =>\n item.accordionHostRef.value?.hasAttribute('open') ? [index] : []\n )\n );\n\n // Multi-expandable: only the accordion that was not already open is a new view.\n const newlyOpenedIndex = Array.from(openIndexes).find(\n (index) => !this.previouslyOpenAccordions.has(index)\n );\n if (newlyOpenedIndex !== undefined) {\n this.trackAnalytics(newlyOpenedIndex, 'accordion');\n }\n\n this.previouslyOpenAccordions = openIndexes;\n });\n };\n\n /**\n * `subPageID` is consumed by Adobe Launch rules as\n * `${heading}:${tabLabel}:${elementId}` — the shape is a reporting contract.\n */\n private trackAnalytics(index: number, type: 'tab' | 'accordion'): void {\n const item = this.tabItems[index];\n const element = type === 'tab' ? item.tabRef.value : item.accordionHostRef.value;\n try {\n this.analyticsService ??= new AnalyticsService();\n this.analyticsService.trackSubPageViewed({\n subPageID: `${this.headingText}:${this.labels[index]}:${element?.id || ''}`,\n spClicked: true,\n });\n } catch (error) {\n console.warn('Analytics tracking failed:', error);\n }\n }\n\n /**\n * v1 read the heading text in a `slotchange` handler it owned. The heading slot is\n * now rendered by `BaseOrganism`, whose own `slotchange` handler calls\n * `requestUpdate()`, so re-reading it on every update covers every case v1 covered\n * plus heading text that is mutated after the initial slot assignment.\n */\n private syncHeadingText(): void {\n const slot = this.shadowRoot?.querySelector('slot[name=\"heading\"]');\n const heading = slot?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\n this.headingText = heading?.innerText || '';\n\n this.applyCtaLocation();\n }\n\n /** Both CTA tags: authored CTAs are v1, rich-text links render as v2.\n * Both groups slot the same light-DOM CTAs. */\n private applyCtaLocation(): void {\n if (!this.headingText) return;\n\n this\n .querySelectorAll('pips-v1-call-to-action, pips-v2-call-to-action')\n .forEach((cta) => {\n cta.location = this.headingText;\n });\n }\n\n protected override updated(changedProperties?: PropertyValues): void {\n super.updated();\n this.syncHeadingText();\n\n if (this.tabItems.length !== this.panelCount) {\n // The groups this renders are measured on the following pass, once they exist.\n this.initializeItems();\n return;\n }\n\n if (changedProperties?.has('tabItems')) {\n this.syncLayout();\n }\n this.syncLabels();\n }\n\n /** Read from the light DOM, so a label never depends on which group hosts its slot. */\n private syncLabels(): void {\n const nextLabels = this.tabItems.map((_, index) =>\n labelOf(this.querySelector(`:scope > [slot=\"slot-${index}\"]`))\n );\n if (nextLabels.some((label, index) => label !== this.labels[index])) {\n this.labels = nextLabels;\n }\n }\n\n private readonly onFieldSlotChange = (): void => {\n this.requestUpdate();\n };\n\n /**\n * Restates `BaseOrganism`'s own query rather than reusing it: the base method is `private`,\n * and promoting it to `protected` would mean editing the base organism, which this\n * migration deliberately leaves untouched. Kept name-for-name with the base so the two read\n * as the same operation — worth revisiting whenever `BaseOrganism` is next opened.\n */\n private hasSlotted(name: string): boolean {\n return this.querySelector(`:scope > [slot=\"${name}\"]`) !== null;\n }\n\n /** v1 centered heading and body at every breakpoint; keep that without a policy. */\n protected override get defaultContentAlignment(): ContentAlignment {\n return 'center';\n }\n\n /**\n * Declares this organism's own field slots rather than delegating to\n * `super.renderContent()`. The authorable surface is deliberately identical to v1 —\n * `heading`, `body` and the panel slots — so the inherited `media`, `image`,\n * `media-stacked`, `media-side`, `items` and `cta` slots are intentionally not\n * rendered. Same approach as `pips-v2-actionbar` and `pips-v2-contentside`.\n *\n * The wrappers reuse the inherited `organism-heading` / `organism-body` class names so\n * the shared field rhythm and `alignmentClass()` from `base-organism.scss` still apply;\n * `defaultContentAlignment` keeps v1's centering when no policy sets `content-alignment`.\n *\n * Both groups are always rendered and CSS shows one of them; each panel slot is rendered\n * only in the visible group (see `layout`), so the light-DOM panel content never moves.\n */\n protected override renderContent(): TemplateResult {\n return html`\n ${this.hasSlotted('heading')\n ? html`\n
\n \n
\n `\n : nothing}\n ${this.hasSlotted('body')\n ? html`\n
\n \n
\n `\n : nothing}\n
\n ${this.renderTabs()} ${this.renderAccordion()}\n
\n `;\n }\n\n /** `slotchange` schedules the update that re-derives labels when an AEM edit swaps a panel. */\n private renderPanelSlot(index: number, group: PanelLayout) {\n if (this.layout !== group) return nothing;\n\n return html``;\n }\n\n private renderTabs() {\n if (this.tabItems.length === 0) return html``;\n\n return html`\n \n \n ${this.tabItems.map(\n (item, index) => html`\n \n \n \n `\n )}\n \n \n ${this.tabItems.map(\n (_item, index) => html`\n ${this.renderPanelSlot(index, 'tabs')}\n `\n )}\n \n \n `;\n }\n\n private renderAccordion() {\n if (this.tabItems.length === 0) return html``;\n\n return html`\n \n ${this.tabItems.map(\n (item, index) => html`\n \n

\n ${this.labels[index]}\n

\n
${this.renderPanelSlot(index, 'accordion')}
\n \n `\n )}\n \n `;\n }\n}\n"],"names":["HorizontalTabV2","BaseOrganism","constructor","super","arguments","this","tabItems","labels","layout","resizeObserver","headingText","previouslyOpenAccordions","Set","isInitialLoad","slots","currentTab","handleTabChange","requestAnimationFrame","currentIndex","findIndex","item","tabRef","value","hasAttribute","trackAnalytics","handleAccordionToggle","openIndexes","flatMap","index","accordionHostRef","newlyOpenedIndex","Array","from","find","has","onFieldSlotChange","requestUpdate","connectedCallback","appendStylesheet","target","styles","name","tagName","toLowerCase","addEventListener","ResizeObserver","syncLayout","observe","disconnectedCallback","removeEventListener","disconnect","panelCount","requested","Number","isFinite","Math","trunc","initializeItems","count","length","createRef","tabs","shadowRoot","querySelector","getComputedStyle","display","type","element","analyticsService","AnalyticsService","trackSubPageViewed","subPageID","id","spClicked","error","console","warn","syncHeadingText","slot","heading","assignedElements","flatten","innerText","applyCtaLocation","querySelectorAll","forEach","cta","location","changedProperties","updated","syncLabels","nextLabels","map","_","labelOf","panel","getAttribute","some","label","defaultContentAlignment","renderContent","html","hasSlotted","alignmentClass","nothing","renderTabs","renderAccordion","group","ref","_item","renderPanelSlot","unsafeCSS","__decorateClass","state","prototype","property","reflect","customElement"],"mappings":"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"}