@salesforcedevs/docs-components 1.3.205 → 1.3.209-lang1-alpha

package/lwc.config.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.205",
+    "version": "1.3.209-lang1-alpha",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -24,5 +24,5 @@
         "@types/lodash.orderby": "^4.6.7",
         "@types/lodash.uniqby": "^4.7.7"
     },
-    "gitHead": "2002bc58ce5f0ecc32effec28c796b3211c40178"
+    "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
 }

package/src/modules/doc/amfReference/amfReference.html

@@ -16,6 +16,8 @@
         toc-title={tocTitle}
         toc-options={tocOptions}
         enable-slot-change="true"
+        languages={languages}
+        language={language}
     >
         <doc-phase
             slot="doc-phase"

package/src/modules/doc/amfReference/amfReference.ts

@@ -4,6 +4,7 @@ import { sentenceCase } from "sentence-case";
 import qs from "query-string";
 import { AmfModelParser } from "doc/amfModelParser";
 import { normalizeBoolean } from "dxUtils/normalizers";
+import type { OptionWithLink } from "typings/custom";
 import type {
     AmfConfig,
     AmfMetadataTopic,
@@ -48,6 +49,8 @@ export default class AmfReference extends LightningElement {
     @api useOldSidebar: boolean = false;
     @api tocTitle?: string;
     @api tocOptions?: string;
+    @api languages!: OptionWithLink[];
+    @api language!: string;
     @track navigation = [] as NavigationItem[];
     @track versions: Array<ReferenceVersion> = [];
     @track showVersionBanner = false;

package/src/modules/doc/contentCallout/contentCallout.css

@@ -52,3 +52,8 @@
     display: flex;
     flex-direction: row;
 }
+
+.dx-callout-content {
+    flex: 1;
+    overflow: auto;
+}

package/src/modules/doc/contentLayout/contentLayout.css

@@ -61,12 +61,16 @@ dx-toc {
     flex-direction: row;
     justify-content: center;
     max-width: var(--dx-g-doc-content-max-width);
+
+    /* Derived this manually by substracting (topHeader, doc header, banner and the content). */
+    min-height: 62vh;
     margin: auto;
     padding: 0 var(--dx-g-global-header-padding-horizontal);
+    margin-bottom: calc(2 * (var(--dx-g-spacing-5xl) + 4px));
 }
 
 .content-body {
-    margin: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-xl);
+    margin: var(--dx-g-spacing-sm) 0 0;
     max-width: 900px;
     flex: 1;
     width: 0;
@@ -106,6 +110,7 @@ dx-toc {
     .content-body-container {
         padding-right: 0;
         overflow-x: auto;
+        margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
     }
 
     .left-nav-bar {

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

@@ -7,6 +7,10 @@
                 value={sidebarValue}
                 header={sidebarHeader}
                 ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar-old>
@@ -22,6 +26,10 @@
                 coveo-search-hub={coveoSearchHub}
                 coveo-advanced-query-config={coveoAdvancedQueryConfig}
                 ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar>
@@ -48,6 +56,9 @@
                     ></dx-toc>
                 </div>
             </div>
+            <div class="footer-container">
+                <dx-footer variant="no-signup"></dx-footer>
+            </div>
         </div>
     </div>
 </template>

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

@@ -4,6 +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";
 
 type AnchorMap = { [key: string]: { intersect: boolean; id: string } };
 
@@ -36,6 +37,10 @@ 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
     get breadcrumbs() {

package/src/modules/doc/header/header.css

@@ -7,6 +7,8 @@ dx-logo {
 .header_l2 {
     justify-content: space-between;
     height: var(--dx-g-doc-header-main-nav-height);
+    padding-bottom: var(--dx-g-spacing-xs);
+    background: white;
 }
 
 .nav_menu-button {
@@ -16,44 +18,32 @@ dx-logo {
     );
 }
 
+.has-brand.has-scoped-nav-items {
+    border-bottom: 1px solid var(--dx-g-gray-90);
+    border-top: 1px solid var(--dx-g-gray-90);
+}
+
 .nav_menu-ctas {
     margin-right: var(--dx-g-spacing-sm);
 }
 
 header:not(.has-brand) > .header_l1 {
-    background: var(--dx-g-brand-current-color-background);
+    background: white;
+    border-bottom: 1px solid var(--dx-g-gray-90);
 }
 
 header:not(.has-brand) > .header_l2 {
-    background: var(--dx-g-brand-current-color-background-2);
+    border-bottom: 1px solid var(--dx-g-gray-90);
+    border-top: 1px solid var(--dx-g-gray-90);
+    padding-bottom: var(--dx-g-spacing-lg);
 }
 
 .header_l2_group.header_l2_group-right-ctas {
     align-items: baseline;
 }
 
-.header_bail-link {
-    --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
-
-    margin-left: var(--dx-g-spacing-sm);
-}
-
-.header_lang-dropdown {
-    --button-primary-color: var(--dx-g-blue-vibrant-40);
-    --button-primary-color-hover: var(--dx-g-blue-vibrant-30);
-}
-
-.header_lang-dropdown > dx-button {
-    --dx-c-button-primary-color: var(--button-primary-color);
-    --dx-c-button-primary-color-hover: var(--button-primary-color-hover);
-    --dx-c-slot-empty-width: min-content;
-    --border-color: var(--button-primary-color);
-
-    border-bottom: 1px dashed var(--border-color);
-}
-
-.header_lang-dropdown > dx-button:hover {
-    --border-color: var(--button-primary-color-hover);
+.has-brand .header_l2_group-title {
+    padding-bottom: calc(var(--dx-g-spacing-md) + 2px);
 }
 
 @media (max-width: 768px) {
@@ -82,6 +72,10 @@ header:not(.has-brand) > .header_l2 {
         margin-right: var(--dx-g-spacing-sm);
     }
 
+    .has-brand .header_l2_group-title {
+        padding-bottom: var(--dx-g-spacing-smd);
+    }
+
     .header_l2_group-title {
         margin-right: 0;
         padding: var(--dx-g-spacing-smd)
@@ -89,19 +83,15 @@ header:not(.has-brand) > .header_l2 {
         min-height: var(--dx-g-doc-header-main-nav-height);
     }
 
-    .header_l2_group-title .header_lang-dropdown {
-        margin-left: auto;
-    }
-
-    .header_lang-dropdown > dx-button {
-        padding: var(--dx-g-spacing-2xs) 0;
-    }
-
     .has-scoped-nav-items > .header_l2 {
         height: unset;
     }
 
     .has-scoped-nav-items .header_l2_group-title {
-        border-bottom: 1px solid var(--dx-g-brand-current-color-border-2);
+        border-bottom: 1px solid var(--dx-g-gray-90);
+    }
+
+    header:not(.has-brand) > .header_l2 {
+        padding-bottom: 0;
     }
 }

package/src/modules/doc/header/header.html

@@ -14,28 +14,12 @@
                                 if:true={isValidBrand}
                                 sprite="salesforcebrand"
                                 symbol={brand}
-                                size="xlarge"
+                                size="large"
                             ></dx-icon>
-                            <span class="subtitle dx-text-display-6">
+                            <span class="subtitle dx-text-display-7">
                                 {subtitle}
                             </span>
                         </a>
-                        <dx-dropdown
-                            if:true={showMobileLanguages}
-                            class="header_lang-dropdown"
-                            options={languages}
-                            small
-                            value={language}
-                            value-path={langValuePath}
-                            onchange={onLangChange}
-                        >
-                            <dx-button
-                                aria-label="Select Language"
-                                variant="inline"
-                                icon-size="large"
-                                icon-symbol="world"
-                            ></dx-button>
-                        </dx-dropdown>
                     </div>
                     <div
                         if:true={hasScopedNavItems}
@@ -52,41 +36,6 @@
                             ></dx-header-nav>
                         </div>
                     </div>
-                    <div
-                        if:false={smallMobile}
-                        class="header_l2_group header_l2_group-right-ctas"
-                    >
-                        <dx-dropdown
-                            if:true={hasLanguages}
-                            class="header_lang-dropdown"
-                            options={languages}
-                            small
-                            value-path={langValuePath}
-                            value={language}
-                            onchange={onLangChange}
-                        >
-                            <dx-button
-                                aria-label="Select Language"
-                                variant="inline"
-                                icon-size="small"
-                                icon-symbol="world"
-                            >
-                                {languageLabel}
-                            </dx-button>
-                        </dx-dropdown>
-                        <dx-button
-                            if:true={hasBailLink}
-                            aria-label={bailLabel}
-                            class="header_bail-link"
-                            href={bailHref}
-                            onclick={handleBailClick}
-                            variant="tertiary"
-                            icon-symbol="new_window"
-                            target="_blank"
-                        >
-                            {bailLabel}
-                        </dx-button>
-                    </div>
                 </div>
             </header>
         </dx-brand-theme-provider>

package/src/modules/doc/header/header.ts

@@ -1,14 +1,11 @@
 import { api } from "lwc";
 import cx from "classnames";
-import type { OptionWithNested, OptionWithLink } from "typings/custom";
+import type { OptionWithNested } from "typings/custom";
 import { HeaderBase } from "dxBaseElements/headerBase";
 import { toJson } from "dxUtils/normalizers";
-import get from "lodash.get";
-import { track } from "dxUtils/analytics";
 
 const TABLET_MATCH = "980px";
 const MOBILE_MATCH = "880px";
-const SMALL_MOBILE_MATCH = "768px";
 
 export default class Header extends HeaderBase {
     @api langValuePath: string = "id"; // allows to override how language property is interpreted, follows valuePath dropdown api.
@@ -23,31 +20,7 @@ export default class Header extends HeaderBase {
         this._scopedNavItems = toJson(value);
     }
 
-    @api
-    get languages() {
-        return this._languages;
-    }
-
-    set languages(value) {
-        this._languages = toJson(value);
-    }
-
-    @api
-    get language() {
-        return this._language;
-    }
-
-    set language(value) {
-        if (this._language !== value) {
-            this._language = value;
-        }
-    }
-
-    private _language: string | null = null;
-    private _languages!: OptionWithLink[];
     private _scopedNavItems!: OptionWithNested[];
-    private smallMobile = false;
-    private smallMobileMatchMedia!: MediaQueryList;
     private tablet = false;
     private tabletMatchMedia!: MediaQueryList;
     private shouldRender = false;
@@ -60,24 +33,6 @@ export default class Header extends HeaderBase {
         return this.scopedNavItems && this.scopedNavItems.length > 0;
     }
 
-    private get hasLanguages(): boolean {
-        return !!(this.languages && this.languages.length);
-    }
-
-    private get showMobileLanguages(): boolean {
-        return this.smallMobile && this.hasLanguages;
-    }
-
-    private get languageLabel(): string {
-        return (
-            (this.language &&
-                this.languages.find(
-                    (lang) => get(lang, this.langValuePath) === this.language
-                )?.label) ||
-            this.languages[0].label
-        );
-    }
-
     connectedCallback(): void {
         super.connectedCallback();
         this.tabletMatchMedia = window.matchMedia(
@@ -86,14 +41,6 @@ export default class Header extends HeaderBase {
         this.onTabletChange(this.tabletMatchMedia);
         this.tabletMatchMedia.addEventListener("change", this.onTabletChange);
 
-        this.smallMobileMatchMedia = window.matchMedia(
-            `(max-width: ${SMALL_MOBILE_MATCH})`
-        );
-        this.onSmallMobileChange(this.smallMobileMatchMedia);
-        this.smallMobileMatchMedia.addEventListener(
-            "change",
-            this.onSmallMobileChange
-        );
         if (
             (window.location.pathname.includes("/docs/") &&
                 window.location.pathname !== "/docs/apis") ||
@@ -110,53 +57,15 @@ export default class Header extends HeaderBase {
             "change",
             this.onTabletChange
         );
-
-        this.smallMobileMatchMedia.removeEventListener(
-            "change",
-            this.onSmallMobileChange
-        );
     }
 
     private onTabletChange = (e: MediaQueryListEvent | MediaQueryList) =>
         (this.tablet = e.matches);
 
-    private onSmallMobileChange = (e: MediaQueryListEvent | MediaQueryList) =>
-        (this.smallMobile = e.matches);
-
     protected additionalClasses(): string {
         return cx(
             this.brand && "has-brand",
             this.hasScopedNavItems && "has-scoped-nav-items"
         );
     }
-
-    private onLangChange(event: CustomEvent<string>): void {
-        const { detail } = event;
-        this._language = detail;
-
-        this.dispatchEvent(new CustomEvent("langchange", { detail }));
-    }
-
-    private handleBailClick(event: Event) {
-        const payload = {
-            click_text: "pdf",
-            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_extension: "pdf"
-        });
-
-        track(event.target!, "custEv_linkClick", {
-            ...payload
-        });
-    }
-
-    private getFilename = function (path: string) {
-        return path.substring(path.lastIndexOf("/") + 1);
-    };
 }

package/src/modules/doc/sidebarFooterNav/sidebarFooterNav.css

@@ -0,0 +1,44 @@
+@import "dxHelpers/reset";
+
+:host {
+    --button-primary-color: var(--dx-g-blue-vibrant-50);
+    --button-primary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+}
+
+.footer-display {
+    display: flex;
+}
+
+.footer_lang-dropdown {
+    display: flex;
+    padding: 0 var(--dx-g-spacing-md);
+    margin-left: var(--dx-g-spacing-sm);
+    height: var(--dx-g-spacing-xl);
+    border-radius: var(--dx-g-spacing-xs);
+    align-items: center;
+}
+
+.footer_lang-dropdown > dx-button {
+    --dx-c-button-primary-color: var(--button-primary-color);
+    --dx-c-slot-empty-width: min-content;
+    --border-color: var(--button-primary-color);
+}
+
+.footer_lang-dropdown:hover,
+.footer_lang-dropdown:active,
+.footer_lang-dropdown:focus,
+.pdf_bail-link:hover {
+    background-color: var(--button-primary-color-hover);
+
+    --border-color: var(--button-primary-color-hover);
+}
+
+.pdf_bail-link {
+    --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
+
+    padding: 0 var(--dx-g-spacing-md);
+    border-radius: var(--dx-g-spacing-xs);
+    display: flex;
+    height: var(--dx-g-spacing-xl);
+    align-items: center;
+}

package/src/modules/doc/sidebarFooterNav/sidebarFooterNav.html

@@ -0,0 +1,58 @@
+<template>
+    <div if:false={mobile} class="footer-display">
+        <dx-button
+            if:true={hasBailLink}
+            aria-label={bailLabel}
+            class="pdf_bail-link"
+            href={bailHref}
+            onclick={handleBailClick}
+            variant="inline"
+            icon-symbol="new_window"
+            target="_blank"
+        >
+            {bailLabel}
+        </dx-button>
+        <dx-dropdown
+            if:true={hasLanguages}
+            class="footer_lang-dropdown"
+            options={languages}
+            small
+            value-path={langValuePath}
+            value={language}
+            onchange={onLangChange}
+            variant="docoption"
+            lang-picker="true"
+        >
+            <dx-button
+                aria-label="Select Language"
+                variant="inline"
+                icon-size="medium"
+                icon-symbol="world"
+            >
+                {languageLabel}
+            </dx-button>
+        </dx-dropdown>
+    </div>
+    <div if:true={mobile} class="footer-display">
+        <dx-dropdown
+            if:true={hasLanguages}
+            class="footer_lang-dropdown"
+            options={languages}
+            small
+            value-path={langValuePath}
+            value={language}
+            onchange={onLangChange}
+            variant="docoption"
+            lang-picker="true"
+        >
+            <dx-button
+                aria-label="Select Language"
+                variant="inline"
+                icon-size="small"
+                icon-symbol="world"
+            >
+                {languageLabel}
+            </dx-button>
+        </dx-dropdown>
+    </div>
+</template>

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

@@ -0,0 +1,109 @@
+/* eslint-disable @lwc/lwc/no-document-query */
+import { LightningElement, api } from "lwc";
+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 {
+    @api langValuePath: string = "id";
+    @api bailHref?: string | null = null;
+    @api bailLabel?: string | null = null;
+
+    @api
+    get languages() {
+        return this._languages;
+    }
+
+    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 mobile: boolean = false;
+    private matchMedia!: MediaQueryList;
+
+    private get hasLanguages(): boolean {
+        return !!(this.languages && this.languages.length > 1);
+    }
+
+    private get languageLabel(): string {
+        return (
+            (this.language &&
+                this.languages.find(
+                    (lang) => get(lang, this.langValuePath) === this.language
+                )?.label) ||
+            this.languages[0].label
+        );
+    }
+
+    get hasBailLink(): boolean {
+        return !!(this.bailHref && this.bailLabel);
+    }
+
+    private onLangChange(event: CustomEvent<string>): void {
+        const { detail } = event;
+        this._language = detail;
+
+        this.dispatchEvent(
+            new CustomEvent("langchange", {
+                detail,
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
+
+    private getFilename = function (path: string) {
+        return path.substring(path.lastIndexOf("/") + 1);
+    };
+
+    private handleBailClick(event: Event) {
+        const payload = {
+            click_text: "pdf",
+            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_extension: "pdf"
+        });
+
+        track(event.target!, "custEv_linkClick", {
+            ...payload
+        });
+    }
+
+    connectedCallback() {
+        this.matchMedia = window.matchMedia(
+            `(max-width: ${MOBILE_SIZE_MATCH})`
+        );
+        this.onMediaChange(this.matchMedia);
+        this.matchMedia.addEventListener("change", this.onMediaChange);
+    }
+
+    disconnectedCallback() {
+        this.matchMedia.removeEventListener("change", this.onMediaChange);
+    }
+
+    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
+        this.mobile = event.matches;
+    };
+}

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

@@ -61,12 +61,15 @@ export type ApiDocLanguage = {
 
 export interface Header extends Element {
     subtitle: string;
+    headerHref: string;
+}
+
+export type SiderbarFooter = {
     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,6 +11,11 @@
         sidebar-value={sidebarValue}
         onselect={handleSelect}
         use-old-sidebar={useOldSidebar}
+        onlangchange={handleLanguageChange}
+        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

@@ -8,6 +8,7 @@ import {
     DocVersion,
     TreeNode,
     Header,
+    SiderbarFooter,
     HistoryState,
     PageReference,
     TocMap
@@ -16,7 +17,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 +26,12 @@ const PIXEL_PER_CHARACTER_MAP: { [key: string]: number } = {
     "ja-jp": 12.5
 };
 
+const defaultSidebarFooter: SiderbarFooter = {
+    bailHref: "",
+    bailLabel: "",
+    languages: [],
+    language: ""
+};
 export default class DocXmlContent extends LightningElementWithState<{
     isFetchingDocument: boolean;
     isFetchingContent: boolean;
@@ -64,15 +70,16 @@ export default class DocXmlContent extends LightningElementWithState<{
     private docContent = "";
     private language?: DocLanguage | null = null;
     private loaded = false;
+    private _pageHeader?: Header;
     private pdfUrl = "";
     private tocMap: TocMap = {};
     private sidebarContent: Array<TreeNode> | null = null;
     private version: DocVersion | null = null;
     private docTitle = "";
     private _pathName = "";
-    private _pageHeader?: Header;
     private listenerAttached = false;
     private _enableCoveo?: boolean = false;
+    private sidebarFooterContent: SiderbarFooter = { ...defaultSidebarFooter };
 
     private searchSyncer = new SearchSyncer({
         callbacks: {
@@ -214,13 +221,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 {
@@ -371,17 +371,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();
     };
@@ -414,12 +403,8 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     getReferenceFromUrl(): PageReference {
-        const [
-            page,
-            docId,
-            deliverable,
-            contentDocumentId
-        ] = window.location.pathname.substr(1).split("/");
+        const [page, docId, deliverable, contentDocumentId] =
+            window.location.pathname.substr(1).split("/");
 
         const { origin: domain, hash, search } = window.location;
 
@@ -469,7 +454,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.availableVersions = data.availableVersions;
         this.pdfUrl = data.pdfUrl;
 
-        this.updateHeader();
+        this.updateHeaderAndSidebarFooter();
 
         this.buildBreadcrumbs();
 
@@ -533,7 +518,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         });
     }
 
-    updateHeader(): void {
+    updateHeaderAndSidebarFooter(): void {
         if (!this.pageHeader) {
             return;
         }
@@ -543,20 +528,12 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
 
         if (this.pdfUrl) {
-            this.pageHeader.bailHref = this.pdfUrl;
-            this.pageHeader.bailLabel = "PDF";
+            this.sidebarFooterContent.bailHref = this.pdfUrl;
+            this.sidebarFooterContent.bailLabel = "PDF";
         }
 
-        if (!this.listenerAttached) {
-            this.pageHeader.addEventListener(
-                "langchange",
-                this.handleLanguageChange
-            );
-            this.listenerAttached = true;
-        }
-
-        this.pageHeader.languages = this.availableLanguages;
-        this.pageHeader.language = this.language?.id;
+        this.sidebarFooterContent.languages = this.availableLanguages;
+        this.sidebarFooterContent.language = this.language?.id;
 
         if (this.pageReference) {
             const { docId, deliverable, page } = this.pageReference;
@@ -581,20 +558,14 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private updateSearchInput(searchParam: string): void {
-        (this.template.querySelector(
-            "doc-content-layout"
-        ) as any)?.setSidebarInputValue(searchParam);
+        (
+            this.template.querySelector("doc-content-layout") as any
+        )?.setSidebarInputValue(searchParam);
     }
 
     private pageReferenceToString(reference: PageReference): string {
-        const {
-            page,
-            docId,
-            deliverable,
-            contentDocumentId,
-            hash,
-            search
-        } = reference;
+        const { page, docId, deliverable, contentDocumentId, hash, search } =
+            reference;
         return `/${page}/${docId}/${deliverable}/${contentDocumentId}${this.normalizeSearch(
             search!
         )}${this.normalizeHash(hash)}`;

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.