@salesforcedevs/docs-components - npm Package Compare versions

Comparing version 1.3.267 to 1.3.268-ref-rnb-tab1

lwc.config.json

@@ -18,2 +18,3 @@ {
         "doc/headingAnchor",
+        "doc/lwcReferenceLayout",
         "doc/overview",
@@ -20,0 +21,0 @@ "doc/phase",

package.json

 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.267",
+    "version": "1.3.268-ref-rnb-tab1",
     "description": "Docs Lightning web components for DSC",
@@ -27,3 +27,3 @@ "license": "MIT",
     },
-    "gitHead": "cd4268483d1b4f56f3dc2ed6fc384bae2d8714d0"
+    "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
 }

src/modules/doc/contentLayout/contentLayout.ts

@@ -40,2 +40,3 @@ /* eslint-disable @lwc/lwc/no-document-query */
     @api useOldSidebar?: boolean = false;
+    @api rnbByTabId?: string = "";
     @api languages!: OptionWithLink[];
@@ -86,3 +87,3 @@ @api language!: string;
     @track
-    private _sidebarContent: unknown;
+    _sidebarContent: unknown;
 
@@ -135,2 +136,6 @@ private _breadcrumbs = null;
 
+    get showTabBasedRNB() {
+        return this.rnbByTabId ? true : false;
+    }
+
     get showBreadcrumbs(): boolean {
@@ -154,4 +159,20 @@ return (
         }
+
+        if (this.showTabBasedRNB) {
+            window.addEventListener("tabchanged", this.onTabChanged);
+        }
     }
 
+    onTabChanged = () => {
+        this.updateRNB();
+    };
+
+    updateRNB = () => {
+        const headingElements = this.getHeadingElements();
+        headingElements.forEach((headingElement) => {
+            headingElement.hash = headingElement.attributes.hash?.nodeValue;
+        });
+        this.updateTocItems(headingElements);
+    };
+
     renderedCallback(): void {
@@ -184,2 +205,6 @@ /**
         );
+
+        if (this.showTabBasedRNB) {
+            window.removeEventListener("tabchanged", this.onTabChanged);
+        }
         window.removeEventListener("scroll", this.adjustNavPosition);
@@ -204,2 +229,25 @@ window.removeEventListener("resize", this.adjustNavPosition);
 
+    private getHeadingElements() {
+        let headingElements = document.querySelectorAll(TOC_HEADER_TAG);
+        if (this.showTabBasedRNB) {
+            const tabPanelListItems =
+                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;
+    }
+
     /*
@@ -264,5 +312,3 @@ This is a workaround for the global nav sticky header being decoupled from the doc header & doc phase.
                 // 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) => {
@@ -323,3 +369,3 @@ (docHeadingEl as any).style.scrollMarginTop = `${
         // 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) {
@@ -340,43 +386,30 @@ // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
 
-    onSlotChange(event: Event): void {
-        const slotElements = (
-            event.target as HTMLSlotElement
-        ).assignedElements();
+    onSlotChange(): void {
+        this.updateRNB();
+    }
 
-        if (slotElements.length) {
-            this.contentLoaded = true;
-            const slotContentElement = slotElements[0];
-            const headingElements =
-                slotContentElement.ownerDocument?.getElementsByTagName(
-                    TOC_HEADER_TAG
-                );
+    // eslint-disable-next-line no-undef
+    private updateTocItems(headingElements: NodeListOf<Element>): void {
+        const tocOptions = [];
 
-            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;
-            }
+        for (const headingElement of headingElements) {
+            headingElement.id = headingElement.hash;
 
-            const tocOptions = [];
+            // 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";
 
-            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);
-                }
+            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;
     }
@@ -383,0 +416,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

258531

increased by1.14%

Number of package files

79

increased by3.95%

Number of low license alerts

0

decreased by-100%

Lines of code

6584

increased by1%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes