@salesforcedevs/docs-components 1.3.300-fix-alpha2 → 1.3.300-rnb-tab-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.300-fix-alpha2",
+    "version": "1.3.300-rnb-tab-alpha",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/amfReference/amfReference.ts

@@ -1475,18 +1475,10 @@ export default class AmfReference extends LightningElement {
         // update topic view
         const { referenceId, amfId, type } = this.selectedTopic!;
 
-        // Adding stringify inside try/catch
-        let amfString = "";
-        try {
-            amfString = JSON.stringify(this.amfMap[referenceId].model);
-        } catch (error) {
-            console.error(`Error stringifying amf model: ${error}`);
-        }
-
         // This updates the component in the content section.
         this.topicModel = {
             type,
-            amf: amfString,
+            amf: this.amfMap[referenceId].model,
             parser: this.amfMap[referenceId].parser,
             id: amfId
         };

package/src/modules/doc/amfReference/types.ts

@@ -95,7 +95,7 @@ export interface ParsedTopicModel {
 export interface TopicModel {
     id: string;
     type: string;
-    amf: string;
+    amf: AmfModel;
     parser: AmfParser;
 }
 

package/src/modules/doc/amfTopic/amfTopic.ts

@@ -27,11 +27,7 @@ export default class AmfTopic extends LightningElement {
             !this.amf ||
             (value && this._model && value.amf !== this._model?.amf)
         ) {
-            try {
-                this.amf = value && JSON.parse(value.amf);
-            } catch (error) {
-                console.error(`Error parsing amf model:: ${error}`);
-            }
+            this.amf = value && clone(value.amf);
         }
         if (
             !this.type ||

package/src/modules/doc/amfTopic/types.ts

@@ -51,6 +51,6 @@ export type AmfModel = Json;
 export interface TopicModel {
     id: string;
     type: string;
-    amf: string;
+    amf: AmfModel;
     parser: AmfModelParser;
 }

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -41,6 +41,7 @@ export default class ContentLayout extends LightningElement {
     @api language!: string;
     @api bailHref!: string;
     @api bailLabel!: string;
+    @api rnbByTabId?: string = "lwc-doc-tab";
 
     // This is needed for now to prevent failing snapshot tests due to links in the footer
     @api showFooter = false;
@@ -101,6 +102,10 @@ export default class ContentLayout extends LightningElement {
         return this.contentLoaded && typeof Sprig !== "undefined";
     }
 
+    get showTabBasedRNB() {
+        return this.rnbByTabId ? true : false;
+    }
+
     private searchSyncer = new SearchSyncer({
         callbacks: {
             onSearchChange: (nextSearchString: string): void => {
@@ -136,6 +141,41 @@ export default class ContentLayout extends LightningElement {
         );
     }
 
+    onTabChanged = () => {
+        this.updateRNB();
+    };
+
+    updateRNB = () => {
+        const headingElements = this.getHeadingElements();
+        headingElements.forEach((headingElement: any) => {
+            headingElement.hash = headingElement.attributes.hash?.nodeValue;
+        });
+        this.updateTocItems(headingElements);
+    };
+
+    private getHeadingElements() {
+        let headingElements = document.querySelectorAll(TOC_HEADER_TAG);
+        if (this.showTabBasedRNB) {
+            const tabPanelListItems: any =
+                document.querySelectorAll("dx-tab-panel-list");
+            for (const tabPanelListItem of tabPanelListItems) {
+                if (tabPanelListItem.id === this.rnbByTabId) {
+                    const tabPanelItems =
+                        tabPanelListItem.querySelectorAll("dx-tab-panel");
+                    for (const tabPanelItem of tabPanelItems) {
+                        if (tabPanelItem.active) {
+                            headingElements =
+                                tabPanelItem.querySelectorAll(TOC_HEADER_TAG);
+                            break;
+                        }
+                    }
+                    break;
+                }
+            }
+        }
+        return headingElements;
+    }
+
     connectedCallback(): void {
         const hasParentHighlightListener = closest(
             "doc-xml-content",
@@ -148,6 +188,9 @@ export default class ContentLayout extends LightningElement {
             );
             this.searchSyncer.init();
         }
+        if (this.showTabBasedRNB) {
+            window.addEventListener("tabchanged", this.onTabChanged);
+        }
     }
 
     renderedCallback(): void {
@@ -255,9 +298,7 @@ export default class ContentLayout extends LightningElement {
                 );
 
                 // Adjust scroll margin for doc headings when doc phase is present
-                const docHeadingEls = Array.from(
-                    document.querySelectorAll("doc-heading")
-                );
+                const docHeadingEls = this.getHeadingElements();
                 docHeadingEls.forEach((docHeadingEl) => {
                     (docHeadingEl as any).style.scrollMarginTop = `${
                         globalNavHeight +
@@ -313,7 +354,7 @@ export default class ContentLayout extends LightningElement {
         );
 
         // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
-        const headingElements = document.querySelectorAll(TOC_HEADER_TAG);
+        const headingElements = this.getHeadingElements();
         for (const headingElement of headingElements as any) {
             // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
             const id = headingElement.getAttribute("id")!;
@@ -329,47 +370,34 @@ export default class ContentLayout extends LightningElement {
         }
     };
 
-    onSlotChange(event: Event): void {
-        const slotElements = (
-            event.target as HTMLSlotElement
-        ).assignedElements();
-
-        if (slotElements.length) {
-            this.contentLoaded = true;
-            const slotContentElement = slotElements[0];
-            const headingElements =
-                slotContentElement.ownerDocument?.getElementsByTagName(
-                    TOC_HEADER_TAG
-                );
-
-            for (const headingElement of headingElements as any) {
-                // Sometimes elements hash is not being set when slot content is wrapped with div
-                headingElement.hash = headingElement.attributes.hash?.nodeValue;
-            }
+    onSlotChange(): void {
+        this.updateRNB();
+    }
 
-            const tocOptions = [];
+    // eslint-disable-next-line no-undef
+    private updateTocItems(headingElements: NodeListOf<Element>): void {
+        const tocOptions = [];
 
-            for (const headingElement of headingElements as any) {
-                headingElement.id = headingElement.hash;
-
-                // Update tocOptions from anchorTags only for H2, consider default as 2 as per component
-                const headingAriaLevel =
-                    headingElement.attributes["aria-level"]?.nodeValue || "2";
-                const isH2 = headingAriaLevel === "2";
-
-                if (isH2) {
-                    const tocItem = {
-                        anchor: `#${headingElement.hash}`,
-                        id: headingElement.id,
-                        label: headingElement.title
-                    };
-                    tocOptions.push(tocItem);
-                    this.tocOptionIdsSet.add(headingElement.id);
-                }
+        for (const headingElement of headingElements as any) {
+            headingElement.id = headingElement.hash;
+
+            // Update tocOptions from anchorTags only for H2, consider default as 2 as per component
+            const headingAriaLevel =
+                headingElement.attributes["aria-level"]?.nodeValue || "2";
+            const isH2 = headingAriaLevel === "2";
+
+            if (isH2) {
+                const tocItem = {
+                    anchor: `#${headingElement.hash}`,
+                    id: headingElement.id,
+                    label: headingElement.title
+                };
+                tocOptions.push(tocItem);
+                this.tocOptionIdsSet.add(headingElement.id);
             }
-
-            this._tocOptions = tocOptions;
         }
+
+        this._tocOptions = tocOptions;
     }
 
     private disconnectObserver(): void {