@salesforcedevs/docs-components 1.3.194-langpicker10-alpha → 1.3.194-langpicker12-alpha

package/package.json

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

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

@@ -28,6 +28,8 @@
                 ontogglesidebar={onToggleSidebar}
                 languages={languages}
                 language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar>

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;
+    };
 }