@salesforcedevs/dx-components 1.3.194-langpicker2-alpha → 1.3.194-langpicker3-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.194-langpicker2-alpha",
+    "version": "1.3.194-langpicker3-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/sidebar/sidebar.html

@@ -92,5 +92,26 @@
                 onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>
+
+        <div if:false={mobile} class="footer-nav">
+            <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>
+        </div>
     </div>
 </template>

package/src/modules/dx/sidebar/sidebar.ts

@@ -5,6 +5,8 @@ import { getSidebarSearchParams } from "dxUtils/coveo";
 import { toJson } from "dxUtils/normalizers";
 import SidebarSearch from "dx/sidebarSearch";
 import { SidebarBase } from "dxBaseElements/sidebarBase";
+import type { OptionWithLink } from "typings/custom";
+import get from "lodash.get";
 
 const MOBILE_SIZE_MATCH = "768px";
 
@@ -14,6 +16,7 @@ export default class Sidebar extends SidebarBase {
     @api coveoSearchHub!: string;
     @api coveoAdvancedQueryConfig!: string;
     @api header: string = "";
+    @api langValuePath: string = "id";
 
     @api
     get value() {
@@ -43,6 +46,26 @@ export default class Sidebar extends SidebarBase {
         }));
     }
 
+    @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;
+        }
+    }
+
     @api
     setInputValue(searchTerm: string) {
         (
@@ -68,6 +91,8 @@ export default class Sidebar extends SidebarBase {
     private scrollToSelectedSearchResult: boolean = false;
     private selectedSearchResultIndex: number = -1;
     private requestedFetchMoreResults: boolean = false;
+    private _languages!: OptionWithLink[];
+    private _language: string | null = null;
 
     private get areResultsEmpty(): boolean {
         return (
@@ -256,4 +281,25 @@ export default class Sidebar extends SidebarBase {
             this.template.querySelector("dx-sidebar-search") as any
         )?.requestOpenDropdown(false);
     }
+
+    private get hasLanguages(): boolean {
+        return !!(this.languages && this.languages.length);
+    }
+
+    private get languageLabel(): string {
+        return (
+            (this.language &&
+                this.languages.find(
+                    (lang) => get(lang, this.langValuePath) === this.language
+                )?.label) ||
+            this.languages[0].label
+        );
+    }
+
+    private onLangChange(event: CustomEvent<string>): void {
+        const { detail } = event;
+        this._language = detail;
+
+        this.dispatchEvent(new CustomEvent("langchange", { detail }));
+    }
 }

package/src/modules/dx/sidebarOld/sidebarOld.css

@@ -24,16 +24,3 @@ dx-empty-state {
 .header-toggle-icon dx-button[aria-expanded="true"]:hover {
     --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
 }
-
-.footer-nav {
-    display: flex;
-    padding: 0 var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xl);
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: inherit;
-    background: white;
-    border-top: 1px solid var(--dx-g-gray-90);
-    border-right: 1px solid var(--dx-g-gray-90);
-    line-height: var(--dx-g-spacing-xl);
-}

package/src/modules/dxHelpers/commonSidebar/commonSidebar.css

@@ -136,6 +136,19 @@ dx-tree:last-child {
     white-space: nowrap;
 }
 
+.footer-nav {
+    display: flex;
+    padding: 0 var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xl);
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: inherit;
+    background: white;
+    border-top: 1px solid var(--dx-g-gray-90);
+    border-right: 1px solid var(--dx-g-gray-90);
+    line-height: var(--dx-g-spacing-xl);
+}
+
 @media screen and (max-width: 768px) {
     .padding-horizontal {
         padding-left: var(--dx-g-spacing-lg);