@salesforcedevs/docs-components 1.3.194-langpicker11-alpha → 1.3.194-langpicker13-alpha

package/package.json

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

package/src/modules/doc/footerNav/footerNav.html

@@ -12,6 +12,27 @@
         >
             {bailLabel}
         </dx-button>
+        <dx-dropdown
+            if:true={hasLanguages}
+            class="footer_lang-dropdown"
+            options={languages}
+            small
+            value-path={langValuePath}
+            value={language}
+            onchange={onLangChange}
+            variant="docoption"
+        >
+            <dx-button
+                aria-label="Select Language"
+                variant="inline"
+                icon-size="large"
+                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"

package/src/modules/doc/footerNav/footerNav.ts

@@ -5,6 +5,8 @@ import { toJson } from "dxUtils/normalizers";
 import get from "lodash.get";
 import { track } from "dxUtils/analytics";
 
+const MOBILE_SIZE_MATCH = "768px";
+
 export default class ContentLayout extends LightningElement {
     @api langValuePath: string = "id";
     @api bailHref?: string | null = null;
@@ -32,6 +34,8 @@ export default class ContentLayout extends LightningElement {
 
     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);
@@ -81,4 +85,20 @@ export default class ContentLayout extends LightningElement {
             ...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/header/header.ts

@@ -1,10 +1,8 @@
 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";
@@ -23,28 +21,6 @@ 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;
@@ -60,24 +36,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(
@@ -129,34 +87,4 @@ export default class Header extends HeaderBase {
             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);
-    };
 }