@salesforcedevs/docs-components 1.3.345-refactor-tab-alpha4 → 1.3.345-refactor-tab-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.345-refactor-tab-alpha4",
+    "version": "1.3.345-refactor-tab-alpha6",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -386,28 +386,30 @@ export default class ContentLayout extends LightningElement {
         this._tocOptions = tocOptions;
     }
 
-    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 and header is not being set when slot content is wrapped with div
+    setHashAndHeaderForDocHeading(headingElements: any) {
+        for (const headingElement of headingElements as any) {
+            // Sometimes elements hash and header is not being set when slot content is wrapped with div
+            if (!headingElement.hash) {
                 headingElement.hash = headingElement.attributes.hash?.nodeValue;
+            }
+
+            if (!headingElement.header) {
                 headingElement.header =
                     headingElement.attributes.header?.nodeValue;
             }
-
-            this.updateTocItems(headingElements);
         }
+
+        this.updateTocItems(headingElements);
+    }
+
+    updateRNB = () => {
+        const headingElements = this.getHeadingElements();
+        this.setHashAndHeaderForDocHeading(headingElements);
+    };
+
+    onSlotChange(): void {
+        this.updateRNB();
+        this.contentLoaded = true;
     }
 
     protected disconnectObserver(): void {

package/src/modules/doc/lwcContentLayout/lwcContentLayout.ts

@@ -30,27 +30,12 @@ export default class LwcContentLayout extends ContentLayout {
     };
 
     private getTabPanelList() {
+        // eslint-disable-next-line @lwc/lwc/no-document-query
         return document.querySelector("dx-tab-panel-list");
     }
 
-    updateRNB = () => {
-        const headingElements = this.getHeadingElements();
-        headingElements.forEach((headingElement: any) => {
-            // Sometimes elements hash and header is not being set when slot content is wrapped with div
-            if (!headingElement.hash) {
-                headingElement.hash = headingElement.attributes.hash?.nodeValue;
-            }
-
-            if (!headingElement.header) {
-                headingElement.header =
-                    headingElement.attributes.header?.nodeValue;
-            }
-        });
-        this.updateTocItems(headingElements);
-    };
-
     protected getHeadingElements() {
-        let headingElements = document.querySelectorAll(TOC_HEADER_TAG);
+        let headingElements = super.getHeadingElements();
         if (this.showTabBasedRNB) {
             const tabPanelListItem: any = this.getTabPanelList();
             const tabPanels =
@@ -101,6 +86,7 @@ export default class LwcContentLayout extends ContentLayout {
     };
 
     connectedCallback(): void {
+        super.connectedCallback();
         window.addEventListener("popstate", this.handlePopState);
     }
 
@@ -173,18 +159,10 @@ export default class LwcContentLayout extends ContentLayout {
     }
 
     updateHeadingForRNB(): void {
-        // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
-        const headingElements = this.getHeadingElements();
-
         // We only need to update URL in case of /docs and ignore if tabs are used anywhere else in DSC
         if (this.showTabBasedRNB) {
             this.updateURL();
         }
-        this.addObserverAndScroll(headingElements);
-    }
-
-    onSlotChange(): void {
-        this.updateRNB();
-        this.contentLoaded = true;
+        super.updateHeadingForRNB();
     }
 }