@salesforcedevs/docs-components 1.3.194-langpicker18-alpha → 1.3.194-langpicker19-alpha

package/lwc.config.json

@@ -18,7 +18,7 @@
         "doc/overview",
         "doc/phase",
         "doc/xmlContent",
-        "doc/footerNav",
+        "doc/sidebarFooterNav",
         "docUtils/utils"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.194-langpicker18-alpha",
+    "version": "1.3.194-langpicker19-alpha",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/contentLayout/contentLayout.html

@@ -7,10 +7,7 @@
                 value={sidebarValue}
                 header={sidebarHeader}
                 ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
-                bail-href={bailHref}
-                bail-label={bailLabel}
+                sidebar-footer-content={sidebarFooterContent}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar-old>
@@ -26,10 +23,7 @@
                 coveo-search-hub={coveoSearchHub}
                 coveo-advanced-query-config={coveoAdvancedQueryConfig}
                 ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
-                bail-href={bailHref}
-                bail-label={bailLabel}
+                sidebar-footer-content={sidebarFooterContent}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar>

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

@@ -4,7 +4,7 @@ import { closest } from "kagekiri";
 import { toJson } from "dxUtils/normalizers";
 import { highlightTerms } from "dxUtils/highlight";
 import { SearchSyncer } from "docUtils/searchSyncer";
-import type { OptionWithLink } from "typings/custom";
+import type { SidebarFooter } from "typings/custom";
 
 type AnchorMap = { [key: string]: { intersect: boolean; id: string } };
 
@@ -37,10 +37,7 @@ export default class ContentLayout extends LightningElement {
     @api coveoSearchHub!: string;
     @api coveoAdvancedQueryConfig!: string;
     @api useOldSidebar?: boolean = false;
-    @api languages!: OptionWithLink[];
-    @api language!: string;
-    @api bailHref!: string;
-    @api bailLabel!: string;
+    @api sidebarFooterContent!: SidebarFooter;
 
     @api
     get breadcrumbs() {

package/src/modules/doc/{footerNav/footerNav.ts → sidebarFooterNav/sidebarFooterNav.ts}

@@ -1,66 +1,52 @@
 /* eslint-disable @lwc/lwc/no-document-query */
 import { LightningElement, api } from "lwc";
-import type { OptionWithLink } from "typings/custom";
-import { toJson } from "dxUtils/normalizers";
+import type { DocLanguage, SidebarFooter } from "typings/custom";
 import get from "lodash.get";
 import { track } from "dxUtils/analytics";
 
 const MOBILE_SIZE_MATCH = "768px";
 
-export default class ContentLayout extends LightningElement {
+export default class SidebarFooterNav extends LightningElement {
     @api langValuePath: string = "id";
-    @api bailHref?: string | null = null;
-    @api bailLabel?: string | null = null;
 
     @api
-    get languages() {
-        return this._languages;
+    set sidebarFooterContent(values: SidebarFooter) {
+        this._languages = values?.languages;
+        this._language = values?.language || null;
+        this._bailHref = values?.bailHref;
+        this._bailLabel = values?.bailLabel;
     }
 
-    set languages(value) {
-        this._languages = toJson(value);
-    }
-
-    @api
-    get language() {
-        return this._language;
-    }
-
-    set language(value) {
-        if (this._language !== value) {
-            this._language = value;
-        }
-    }
-
-    private _languages!: OptionWithLink[];
+    private _languages!: DocLanguage[];
     private _language: string | null = null;
+    private _bailHref?: string | null = null;
+    private _bailLabel?: string | null = null;
     private mobile: boolean = false;
     private matchMedia!: MediaQueryList;
 
     private get hasLanguages(): boolean {
-        return !!(this.languages && this.languages.length > 1);
+        return !!(this._languages && this._languages.length > 1);
     }
 
     private get languageLabel(): string {
         return (
-            (this.language &&
-                this.languages.find(
-                    (lang) => get(lang, this.langValuePath) === this.language
+            (this._language &&
+                this._languages.find(
+                    (lang) => get(lang, this.langValuePath) === this._language
                 )?.label) ||
-            this.languages[0].label
+            this._languages[0].label
         );
     }
 
     get hasBailLink(): boolean {
-        return !!(this.bailHref && this.bailLabel);
+        return !!(this._bailHref && this._bailLabel);
     }
 
     private onLangChange(event: CustomEvent<string>): void {
         const { detail } = event;
         this._language = detail;
 
-        const docElement = document.querySelector("doc-header");
-        docElement?.dispatchEvent(new CustomEvent("langchange", { detail }));
+        this.dispatchEvent(new CustomEvent("langchange", { detail }));
     }
 
     private getFilename = function (path: string) {
@@ -70,14 +56,14 @@ export default class ContentLayout extends LightningElement {
     private handleBailClick(event: Event) {
         const payload = {
             click_text: "pdf",
-            click_url: this.bailHref,
+            click_url: this._bailHref,
             element_title: "pdf",
             element_type: "link",
             content_category: "download"
         };
         track(event.target!, "custEv_pdfDownload", {
             ...payload,
-            file_name: this.getFilename(this.bailHref!),
+            file_name: this.getFilename(this._bailHref!),
             file_extension: "pdf"
         });
 

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

@@ -59,14 +59,14 @@ export type ApiDocLanguage = {
     url: string;
 };
 
-export interface Header extends Element {
+export type SidebarFooter = {
     subtitle: string;
     bailHref: string;
     bailLabel: string;
     languages: Array<DocLanguage>;
     language?: string;
     headerHref: string;
-}
+};
 
 export type ApiNavItem = {
     children: Array<ApiNavItem>;

package/src/modules/doc/xmlContent/xmlContent.html

@@ -11,10 +11,8 @@
         sidebar-value={sidebarValue}
         onselect={handleSelect}
         use-old-sidebar={useOldSidebar}
-        languages={availableLanguages}
-        language={language.id}
-        bail-href={pageHeader.bailHref}
-        bail-label={pageHeader.bailLabel}
+        onlangchange={handleLanguageChange}
+        sidebar-footer-content={sidebarFooterObj}
     >
         <doc-phase
             slot="version-banner"

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -7,7 +7,7 @@ import {
     DocLanguage,
     DocVersion,
     TreeNode,
-    Header,
+    SidebarFooter,
     HistoryState,
     PageReference,
     TocMap
@@ -70,7 +70,7 @@ export default class DocXmlContent extends LightningElementWithState<{
     private version: DocVersion | null = null;
     private docTitle = "";
     private _pathName = "";
-    private _pageHeader?: Header;
+    private sidebarFooterObj?: SidebarFooter | null = null;
     private listenerAttached = false;
     private _enableCoveo?: boolean = false;
 
@@ -214,13 +214,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     disconnectedCallback(): void {
         window.removeEventListener("popstate", this.handlePopState);
         this.searchSyncer.dispose();
-        if (this.listenerAttached) {
-            this.pageHeader.removeEventListener(
-                "langchange",
-                this.handleLanguageChange
-            );
-            this.listenerAttached = false;
-        }
     }
 
     private get languageId(): string | undefined {
@@ -265,14 +258,6 @@ export default class DocXmlContent extends LightningElementWithState<{
         return config;
     }
 
-    private get pageHeader(): Header {
-        if (!this._pageHeader) {
-            this._pageHeader = document.querySelector("doc-header")!;
-        }
-
-        return this._pageHeader;
-    }
-
     private get sidebarValue(): string {
         if (this.pageReference?.contentDocumentId) {
             const hashedUri = `${
@@ -527,33 +512,21 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     updateHeader(): void {
-        if (!this.pageHeader) {
-            return;
-        }
-
         if (this.docTitle) {
-            this.pageHeader.subtitle = this.docTitle;
+            this.sidebarFooterObj!.subtitle = this.docTitle;
         }
 
         if (this.pdfUrl) {
-            this.pageHeader.bailHref = this.pdfUrl;
-            this.pageHeader.bailLabel = "PDF";
-        }
-
-        if (!this.listenerAttached) {
-            this.pageHeader.addEventListener(
-                "langchange",
-                this.handleLanguageChange
-            );
-            this.listenerAttached = true;
+            this.sidebarFooterObj!.bailHref = this.pdfUrl;
+            this.sidebarFooterObj!.bailLabel = "PDF";
         }
 
-        this.pageHeader.languages = this.availableLanguages;
-        this.pageHeader.language = this.language?.id;
+        this.sidebarFooterObj!.languages = this.availableLanguages;
+        this.sidebarFooterObj!.language = this.language?.id;
 
         if (this.pageReference) {
             const { docId, deliverable, page } = this.pageReference;
-            this.pageHeader.headerHref = `/${page}/${docId}/${deliverable}/`;
+            this.sidebarFooterObj!.headerHref = `/${page}/${docId}/${deliverable}/`;
         }
     }