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

package/package.json

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

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

@@ -7,7 +7,10 @@
                 value={sidebarValue}
                 header={sidebarHeader}
                 ontogglesidebar={onToggleSidebar}
-                sidebar-footer-content={sidebarFooterContent}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar-old>
@@ -23,7 +26,10 @@
                 coveo-search-hub={coveoSearchHub}
                 coveo-advanced-query-config={coveoAdvancedQueryConfig}
                 ontogglesidebar={onToggleSidebar}
-                sidebar-footer-content={sidebarFooterContent}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
             >
                 <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 { SidebarFooter } from "typings/custom";
+import type { OptionWithLink } from "typings/custom";
 
 type AnchorMap = { [key: string]: { intersect: boolean; id: string } };
 
@@ -37,7 +37,10 @@ export default class ContentLayout extends LightningElement {
     @api coveoSearchHub!: string;
     @api coveoAdvancedQueryConfig!: string;
     @api useOldSidebar?: boolean = false;
-    @api sidebarFooterContent!: SidebarFooter;
+    @api languages!: OptionWithLink[];
+    @api language!: string;
+    @api bailHref!: string;
+    @api bailLabel!: string;
 
     @api
     get breadcrumbs() {

package/src/modules/doc/sidebarFooterNav/sidebarFooterNav.ts

@@ -1,52 +1,71 @@
 /* eslint-disable @lwc/lwc/no-document-query */
 import { LightningElement, api } from "lwc";
-import type { DocLanguage, SidebarFooter } from "typings/custom";
+import type { OptionWithLink } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
 import get from "lodash.get";
 import { track } from "dxUtils/analytics";
 
 const MOBILE_SIZE_MATCH = "768px";
 
-export default class SidebarFooterNav extends LightningElement {
+export default class ContentLayout extends LightningElement {
     @api langValuePath: string = "id";
+    @api bailHref?: string | null = null;
+    @api bailLabel?: string | null = null;
 
     @api
-    set sidebarFooterContent(values: SidebarFooter) {
-        this._languages = values?.languages;
-        this._language = values?.language || null;
-        this._bailHref = values?.bailHref;
-        this._bailLabel = values?.bailLabel;
+    get languages() {
+        return this._languages;
     }
 
-    private _languages!: DocLanguage[];
+    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 _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;
 
-        this.dispatchEvent(new CustomEvent("langchange", { detail }));
+        this.dispatchEvent(
+            new CustomEvent("langchange", {
+                detail,
+                bubbles: true,
+                composed: true
+            })
+        );
     }
 
     private getFilename = function (path: string) {
@@ -56,14 +75,14 @@ export default class SidebarFooterNav 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,7 +59,7 @@ export type ApiDocLanguage = {
     url: string;
 };
 
-export type SidebarFooter = {
+export type SiderbarFooter = {
     subtitle: string;
     bailHref: string;
     bailLabel: string;

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

@@ -12,7 +12,10 @@
         onselect={handleSelect}
         use-old-sidebar={useOldSidebar}
         onlangchange={handleLanguageChange}
-        sidebar-footer-content={sidebarFooterObj}
+        languages={sidebarFooterContent.languages}
+        language={sidebarFooterContent.language}
+        bail-href={sidebarFooterContent.bailHref}
+        bail-label={sidebarFooterContent.bailLabel}
     >
         <doc-phase
             slot="version-banner"

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

@@ -7,7 +7,7 @@ import {
     DocLanguage,
     DocVersion,
     TreeNode,
-    SidebarFooter,
+    SiderbarFooter,
     HistoryState,
     PageReference,
     TocMap
@@ -16,7 +16,6 @@ import { SearchSyncer } from "docUtils/searchSyncer";
 import { LightningElementWithState } from "dxBaseElements/lightningElementWithState";
 import { logCoveoPageView, oldVersionDocInfo } from "docUtils/utils";
 import { Breadcrumb, DocPhaseInfo, Language } from "typings/custom";
-import { track as trackGTM } from "dxUtils/analytics";
 
 // TODO: Imitating from actual implementation as doc-content use it like this. We should refactor it later.
 const handleContentError = (error: any): void => console.log(error);
@@ -26,6 +25,14 @@ const PIXEL_PER_CHARACTER_MAP: { [key: string]: number } = {
     "ja-jp": 12.5
 };
 
+const defaultSidebarFooter: SiderbarFooter = {
+    subtitle: "",
+    bailHref: "",
+    bailLabel: "",
+    languages: [],
+    language: "",
+    headerHref: ""
+};
 export default class DocXmlContent extends LightningElementWithState<{
     isFetchingDocument: boolean;
     isFetchingContent: boolean;
@@ -70,9 +77,9 @@ export default class DocXmlContent extends LightningElementWithState<{
     private version: DocVersion | null = null;
     private docTitle = "";
     private _pathName = "";
-    private sidebarFooterObj?: SidebarFooter | null = null;
     private listenerAttached = false;
     private _enableCoveo?: boolean = false;
+    private sidebarFooterContent: SiderbarFooter = { ...defaultSidebarFooter };
 
     private searchSyncer = new SearchSyncer({
         callbacks: {
@@ -353,17 +360,6 @@ export default class DocXmlContent extends LightningElementWithState<{
             ({ id }) => id === event.detail
         );
         this.pageReference.docId = this.language!.url;
-
-        trackGTM(event.target!, "custEv_ctaLinkClick", {
-            click_text: event.detail,
-            element_title: "language selector",
-            click_url: `${window.location.origin}${this.pageReferenceToString(
-                this.pageReference
-            )}`,
-            element_type: "link",
-            content_category: "cta"
-        });
-
         this.updateUrl();
         this.fetchDocument();
     };
@@ -447,7 +443,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.availableVersions = data.availableVersions;
         this.pdfUrl = data.pdfUrl;
 
-        this.updateHeader();
+        this.updateSidebarFooter();
 
         this.buildBreadcrumbs();
 
@@ -511,22 +507,22 @@ export default class DocXmlContent extends LightningElementWithState<{
         });
     }
 
-    updateHeader(): void {
+    updateSidebarFooter(): void {
         if (this.docTitle) {
-            this.sidebarFooterObj!.subtitle = this.docTitle;
+            this.sidebarFooterContent.subtitle = this.docTitle;
         }
 
         if (this.pdfUrl) {
-            this.sidebarFooterObj!.bailHref = this.pdfUrl;
-            this.sidebarFooterObj!.bailLabel = "PDF";
+            this.sidebarFooterContent.bailHref = this.pdfUrl;
+            this.sidebarFooterContent.bailLabel = "PDF";
         }
 
-        this.sidebarFooterObj!.languages = this.availableLanguages;
-        this.sidebarFooterObj!.language = this.language?.id;
+        this.sidebarFooterContent.languages = this.availableLanguages;
+        this.sidebarFooterContent.language = this.language?.id;
 
         if (this.pageReference) {
             const { docId, deliverable, page } = this.pageReference;
-            this.sidebarFooterObj!.headerHref = `/${page}/${docId}/${deliverable}/`;
+            this.sidebarFooterContent.headerHref = `/${page}/${docId}/${deliverable}/`;
         }
     }