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

package/package.json

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

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -38,7 +38,7 @@
 }
 
 .option:active {
-    background: var(--dx-g-blue-vibrant-95) !important;
+    background: var(--dx-g-cloud-blue-vibrant-95) !important;
 }
 
 .option:not(.option-active):hover {
@@ -46,7 +46,7 @@
 }
 
 .option-active {
-    background: var(--dx-g-blue-vibrant-95);
+    background: var(--dx-g-cloud-blue-vibrant-95);
 }
 
 .option_details {

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

@@ -96,7 +96,7 @@
         <div if:false={mobile} class="footer-nav">
             <dx-dropdown
                 if:true={hasLanguages}
-                class="header_lang-dropdown"
+                class="footer_lang-dropdown"
                 options={languages}
                 small
                 value-path={langValuePath}

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -70,24 +70,15 @@
         </template>
 
         <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}
+            <doc-footer-nav
+                class="footer_lang-dropdown"
+                lang-value-path={langValuePath}
+                language={language}
+                languages={languages}
+                bail-href={bailHref}
+                bail-label={bailLabel}
             >
-                <dx-button
-                    aria-label="Select Language"
-                    variant="inline"
-                    icon-size="small"
-                    icon-symbol="world"
-                >
-                    {languageLabel}
-                </dx-button>
-            </dx-dropdown>
+            </doc-footer-nav>
         </div>
     </div>
 </template>

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -13,6 +13,10 @@ const MOBILE_SIZE_MATCH = "768px";
 export default class Sidebar extends SidebarBase {
     @api header: string = "";
     @api langValuePath: string = "id";
+    @api languages!: OptionWithLink[];
+    @api language!: string;
+    @api bailHref!: string;
+    @api bailLabel!: string;
 
     @api
     get value() {
@@ -40,26 +44,6 @@ export default class Sidebar extends SidebarBase {
         this.assignFilteredTrees();
     }
 
-    @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 expanded: boolean = true;
     private _searchTimeout?: number;
     private _value?: string = undefined;
@@ -71,9 +55,6 @@ export default class Sidebar extends SidebarBase {
     private matchMedia!: MediaQueryList;
     private valueToLabel: { [key: string]: string } = {};
 
-    private _languages!: OptionWithLink[];
-    private _language: string | null = null;
-
     private get anyResultMatch() {
         return this.filteredTrees.length > 0;
     }

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

@@ -78,10 +78,31 @@ dx-tree:last-child {
     box-shadow: 2px 0 0 0 var(--border-color);
     min-height: var(--dx-c-sidebar-min-height);
     padding: var(--dx-c-sidebar-vertical-padding) 0
-        var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
+        var(--dx-c-sidebar-vertical-padding) 0;
     position: relative;
 }
 
+.footer_lang-dropdown {
+    --button-primary-color: var(--dx-g-blue-vibrant-50);
+    --button-primary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+
+    padding: var(--dx-g-spacing-2xs) var(--dx-g-spacing-md);
+}
+
+.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 {
+    background-color: var(--button-primary-color-hover);
+
+    --border-color: var(--button-primary-color-hover);
+}
+
 .collapsed.container:not(.container-mobile) {
     background-color: transparent;
 }
@@ -146,7 +167,7 @@ dx-tree:last-child {
     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);
+    height: var(--dx-g-spacing-xl);
 }
 
 @media screen and (max-width: 768px) {
@@ -154,4 +175,12 @@ dx-tree:last-child {
         padding-left: var(--dx-g-spacing-lg);
         padding-right: var(--dx-g-spacing-md);
     }
+
+    .header_l2_group-title .header_lang-dropdown {
+        margin-left: auto;
+    }
+
+    .header_lang-dropdown > dx-button {
+        padding: var(--dx-g-spacing-2xs) 0;
+    }
 }