@salesforcedevs/docs-components 1.20.13-redocly → 1.20.13-rnb-issue1

package/lwc.config.json

@@ -20,7 +20,6 @@
         "doc/headingAnchor",
         "doc/overview",
         "doc/phase",
-        "doc/redocReference",
         "doc/specificationContent",
         "doc/versionPicker",
         "doc/xmlContent",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.20.13-redocly",
+    "version": "1.20.13-rnb-issue1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -1,5 +1,5 @@
 /* eslint-disable @lwc/lwc/no-document-query */
-import { LightningElement, api } from "lwc";
+import { LightningElement, api, track } from "lwc";
 import { closest } from "kagekiri";
 import { toJson } from "dxUtils/normalizers";
 import { highlightTerms } from "dxUtils/highlight";
@@ -81,10 +81,12 @@ export default class ContentLayout extends LightningElement {
         );
     }
 
+    @track
     protected _sidebarContent: unknown;
 
     protected _breadcrumbs = null;
 
+    @track
     protected _tocOptions!: Array<unknown>;
 
     protected tocOptionIdsSet = new Set();

package/src/modules/doc/redocReference/redocReference.css

@@ -1,6 +0,0 @@
-:host {
-    --doc-c-redoc-sidebar-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
-            var(--dx-g-spacing-xl)
-    );
-}

package/src/modules/doc/redocReference/redocReference.html

@@ -1,8 +0,0 @@
-<template>
-    <slot></slot>
-    <dx-error-fallback
-        if:true={showError}
-        title="API Documentation Unavailable"
-        description="This API reference is currently unavailable. Please try again later."
-    ></dx-error-fallback>
-</template>

package/src/modules/doc/redocReference/redocReference.ts

@@ -1,256 +0,0 @@
-/* eslint-disable @lwc/lwc/no-document-query */
-import { createElement, LightningElement, api } from "lwc";
-import DocPhase from "doc/phase";
-import DxFooter from "dx/footer";
-import SprigSurvey from "doc/sprigSurvey";
-
-declare global {
-    interface Window {
-        Redoc: any;
-    }
-}
-
-type ReferenceItem = {
-    source: string;
-    href: string;
-    isSelected?: boolean;
-    docPhase?: any;
-};
-
-type ReferenceConfig = {
-    refList: ReferenceItem[];
-};
-
-export default class RedocReference extends LightningElement {
-    private _referenceConfig: ReferenceConfig = { refList: [] };
-    private _parentDocPhaseInfo: string | null = null;
-
-    private layoutTimeoutId: number | null = null;
-    private isScrolling: boolean = false;
-    private previousTopValue = "";
-    private redocInitialized = false;
-
-    showError = false;
-
-    @api
-    get referenceConfig(): ReferenceConfig {
-        return this._referenceConfig;
-    }
-
-    set referenceConfig(value: string | ReferenceConfig) {
-        try {
-            const refConfig =
-                typeof value === "string" ? JSON.parse(value) : value;
-            this._referenceConfig = refConfig;
-        } catch (e) {
-            this._referenceConfig = { refList: [] };
-        }
-    }
-
-    @api
-    get docPhaseInfo(): string | null {
-        return this._parentDocPhaseInfo;
-    }
-
-    set docPhaseInfo(value: string) {
-        this._parentDocPhaseInfo = value;
-    }
-
-    connectedCallback(): void {
-        window.addEventListener("scroll", this.handleScrollWithThrottle);
-        window.addEventListener("resize", this.handleScrollWithThrottle);
-    }
-
-    renderedCallback(): void {
-        if (!this.redocInitialized && window.Redoc) {
-            this.initializeRedoc();
-        }
-    }
-
-    disconnectedCallback(): void {
-        if (this.layoutTimeoutId) {
-            clearTimeout(this.layoutTimeoutId);
-            this.layoutTimeoutId = null;
-        }
-
-        window.removeEventListener("scroll", this.handleScrollWithThrottle);
-        window.removeEventListener("resize", this.handleScrollWithThrottle);
-    }
-
-    @api
-    setDocPhaseInfo(docPhaseInfo: string): void {
-        this._parentDocPhaseInfo = docPhaseInfo;
-    }
-
-    private handleScrollWithThrottle = () => {
-        if (!this.isScrolling) {
-            this.isScrolling = true;
-
-            setTimeout(() => {
-                this.adjustPosition();
-            }, 200);
-
-            this.isScrolling = false;
-        }
-    };
-
-    private adjustPosition = () => {
-        const redocContainer = this.getRedocContainer();
-        const sidebarMenuElement = redocContainer?.querySelector(
-            ".redoc-wrap .menu-content"
-        ) as HTMLElement;
-
-        requestAnimationFrame(() => {
-            const globalNavElement = document.querySelector("hgf-c360nav");
-            const contextNavElement =
-                document.querySelector("hgf-c360contextnav");
-            const docHeaderElement =
-                document.querySelector(".sticky-doc-header");
-
-            if (sidebarMenuElement) {
-                const globalNavHeight =
-                    globalNavElement?.getBoundingClientRect().height || 0;
-                const contextNavHeight =
-                    contextNavElement?.getBoundingClientRect().height || 0;
-                const docHeaderHeight =
-                    docHeaderElement?.getBoundingClientRect().height || 0;
-
-                const calculatedTopValue = `${
-                    globalNavHeight + contextNavHeight + docHeaderHeight
-                }px`;
-
-                if (calculatedTopValue !== this.previousTopValue) {
-                    sidebarMenuElement.style.setProperty(
-                        "--doc-c-redoc-sidebar-top",
-                        calculatedTopValue
-                    );
-                    this.previousTopValue = calculatedTopValue;
-                }
-            }
-        });
-    };
-
-    private getDocPhaseInfo(): string | null {
-        if (this._parentDocPhaseInfo) {
-            return this._parentDocPhaseInfo;
-        }
-        const selectedRef = this.getSelectedReference();
-        return selectedRef?.docPhase
-            ? JSON.stringify(selectedRef.docPhase)
-            : null;
-    }
-
-    private getSelectedReference(): ReferenceItem | null {
-        return this._referenceConfig?.refList?.length
-            ? this._referenceConfig.refList.find((ref) => ref.isSelected) ||
-                  this._referenceConfig.refList[0]
-            : null;
-    }
-
-    private getRedocContainer(): HTMLElement | null {
-        return document.querySelector(".redoc-container");
-    }
-
-    private updateUrlWithReference(selectedRef: ReferenceItem): void {
-        if (selectedRef?.href) {
-            const parentReferencePath = selectedRef.href;
-            const currentUrl = window.location;
-            const existingParams = currentUrl.search + currentUrl.hash;
-
-            window.history.pushState(
-                {},
-                "",
-                `${parentReferencePath}${existingParams}`
-            );
-        }
-    }
-
-    private initializeRedoc(): void {
-        try {
-            const selectedRef = this.getSelectedReference();
-            if (selectedRef) {
-                this.updateUrlWithReference(selectedRef);
-
-                const specUrl = selectedRef.source;
-                const redocContainer = this.getRedocContainer();
-                if (specUrl && redocContainer) {
-                    this.redocInitialized = true;
-                    window.Redoc.init(
-                        specUrl,
-                        {
-                            expandResponses: "200,400"
-                        },
-                        redocContainer,
-                        () => {
-                            this.insertCustomLayoutElements();
-                        }
-                    );
-                } else {
-                    this.showError = true;
-                }
-            }
-        } catch (error) {
-            this.showError = true;
-            console.error("Failed to load data:", error);
-        }
-    }
-
-    private insertCustomLayoutElements(): void {
-        const redocContainer = this.getRedocContainer();
-        const apiContentDiv = redocContainer?.querySelector(".api-content");
-        if (apiContentDiv) {
-            (apiContentDiv as HTMLElement).setAttribute("lwc:dom", "manual");
-
-            try {
-                const docPhaseInfo = this.getDocPhaseInfo();
-                if (docPhaseInfo) {
-                    this.insertDocPhase(
-                        apiContentDiv as HTMLElement,
-                        docPhaseInfo
-                    );
-                }
-                this.insertSprigSurvey(apiContentDiv as HTMLElement);
-                this.insertFooter(apiContentDiv as HTMLElement);
-            } catch (error) {
-                console.error(
-                    "Error showing banner and footer elements",
-                    error
-                );
-            }
-        } else {
-            this.layoutTimeoutId = window.setTimeout(
-                () => this.insertCustomLayoutElements(),
-                100
-            );
-        }
-    }
-
-    private insertDocPhase(container: HTMLElement, docPhaseInfo: string): void {
-        const docPhaseElement = createElement("doc-phase", { is: DocPhase });
-        Object.assign(docPhaseElement, { docPhaseInfo });
-
-        const wrapper = document.createElement("div");
-        wrapper.className = "doc-phase-wrapper";
-        wrapper.appendChild(docPhaseElement);
-
-        container.insertBefore(wrapper, container.firstChild);
-    }
-
-    private insertFooter(container: HTMLElement): void {
-        const footerElement = createElement("dx-footer", { is: DxFooter });
-        Object.assign(footerElement, { variant: "no-signup" });
-        container.appendChild(footerElement);
-    }
-
-    private insertSprigSurvey(container: HTMLElement): void {
-        const feedbackElement = createElement("doc-sprig-survey", {
-            is: SprigSurvey
-        });
-
-        const wrapper = document.createElement("div");
-        wrapper.className = "feedback-wrapper";
-        wrapper.appendChild(feedbackElement);
-
-        container.appendChild(wrapper);
-    }
-}