@salesforcedevs/dx-components 1.3.210-lang3-alpha → 1.3.210-lang5-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.210-lang3-alpha",
+    "version": "1.3.210-lang5-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/dropdown/dropdown.html

@@ -11,7 +11,6 @@
         placement={placement}
         small={small}
         width={width}
-        lang-picker={langPicker}
     >
         <slot slot="control"></slot>
         <div

package/src/modules/dx/dropdown/dropdown.ts

@@ -37,7 +37,6 @@ export default class Dropdown extends LightningElement {
     @api fullWidth?: boolean | null;
     @api navItemLabel: string | null = null;
     @api variant: DropdownVariant = "base";
-    @api langPicker?: boolean;
 
     // props forwarded to dropdown option
     @api analyticsEvent?: string;

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

@@ -46,6 +46,8 @@
 }
 
 .option-active {
+    --dx-c-dropdown-option-label-color: var(--dx-g-blue-vibrant-50);
+
     background: var(--dx-g-cloud-blue-vibrant-95);
 }
 
@@ -67,7 +69,7 @@
     color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
     display: flex;
     align-items: center;
-    font-weight: var(--dx-g-font-bold);
+    font-weight: var(--dx-c-dropdown-option-font-weight, var(--dx-g-font-bold));
     font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-base));
 }
 
@@ -79,22 +81,6 @@
     -webkit-box-orient: vertical;
 }
 
-.option-docoption {
-    align-items: center;
-    flex-direction: row;
-    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md);
-}
-
-.option-docoption .option_label {
-    color: var(--dx-g-gray-10);
-    font-weight: normal !important;
-}
-
-.option-docoption.option-active .option_label {
-    color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
-    font-weight: var(--dx-g-font-bold);
-}
-
 .option_label > *:last-child {
     margin-left: var(--dx-g-spacing-sm);
 }

package/src/modules/dx/popover/popover.css

@@ -28,7 +28,7 @@
     max-height: 65vh;
     padding: var(--popover-padding);
     overflow-y: auto;
-    transition: opacity 0.2s linear, transform 0.2s linear;
+    transition: var(--popover-transition);
     transition-delay: 0.02s;
     transform: translateY(var(--dx-g-spacing-xs));
     opacity: 0;
@@ -41,13 +41,7 @@
 
 .popover-container_open .popover {
     opacity: 1;
-    transform: translateY(0);
-}
-
-.popover-leftalign {
-    opacity: 1;
-    transform: translateX(-16px) translateY(-12px);
-    transition: none;
+    transform: var(--popover-container-open-transform);
 }
 
 .popover-overridewidth {

package/src/modules/dx/popover/popover.ts

@@ -39,7 +39,6 @@ export default class Popover extends LightningElement {
     @api width?: string | null = null;
     @api fullWidth?: boolean | null;
     @api showArrow?: boolean | null;
-    @api langPicker?: boolean;
 
     @api
     get open() {
@@ -152,11 +151,7 @@ export default class Popover extends LightningElement {
     }
 
     private get containerClassName() {
-        return cx(
-            "popover-container",
-            this.open && "popover-container_open",
-            this.langPicker && "popover-leftalign"
-        );
+        return cx("popover-container", this.open && "popover-container_open");
     }
 
     private get style() {

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

@@ -16,7 +16,6 @@ export default class Sidebar extends SidebarBase {
     @api coveoAdvancedQueryConfig!: string;
     @api header: string = "";
     @api langValuePath: string = "id";
-    @api languages!: OptionWithLink[];
     @api language!: string;
     @api bailHref!: string;
     @api bailLabel!: string;
@@ -49,6 +48,15 @@ export default class Sidebar extends SidebarBase {
         }));
     }
 
+    @api
+    get languages() {
+        return this._languages;
+    }
+
+    set languages(value) {
+        this._languages = toJson(value);
+    }
+
     @api
     setInputValue(searchTerm: string) {
         (
@@ -74,6 +82,7 @@ export default class Sidebar extends SidebarBase {
     private scrollToSelectedSearchResult: boolean = false;
     private selectedSearchResultIndex: number = -1;
     private requestedFetchMoreResults: boolean = false;
+    private _languages!: OptionWithLink[];
 
     private get areResultsEmpty(): boolean {
         return (
@@ -264,18 +273,10 @@ export default class Sidebar extends SidebarBase {
     }
 
     private get hasMobileSidebarFooter(): boolean {
-        return !!(
-            this.mobile &&
-            this.languages &&
-            toJson(this.languages).length > 1 &&
-            this.expanded
-        );
+        return this.mobile && this.languages?.length > 1 && this.expanded;
     }
 
     private get hasSidebarFooter(): boolean {
-        return !!(
-            (this.languages && toJson(this.languages).length > 1) ||
-            Boolean(this.bailHref)
-        );
+        return this.languages?.length > 1 || Boolean(this.bailHref);
     }
 }

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

@@ -12,7 +12,6 @@ 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;
@@ -26,6 +25,15 @@ export default class Sidebar extends SidebarBase {
         this._value = value;
     }
 
+    @api
+    get languages() {
+        return this._languages;
+    }
+
+    set languages(value) {
+        this._languages = toJson(value);
+    }
+
     @api
     get trees() {
         return this._trees;
@@ -53,6 +61,7 @@ export default class Sidebar extends SidebarBase {
     private searchText: string = "";
     private matchMedia!: MediaQueryList;
     private valueToLabel: { [key: string]: string } = {};
+    private _languages!: OptionWithLink[];
 
     private get anyResultMatch() {
         return this.filteredTrees.length > 0;
@@ -198,18 +207,10 @@ export default class Sidebar extends SidebarBase {
     }
 
     private get hasMobileSidebarFooter(): boolean {
-        return !!(
-            this.mobile &&
-            this.languages &&
-            toJson(this.languages).length > 1 &&
-            this.expanded
-        );
+        return this.mobile && this.languages?.length > 1 && this.expanded;
     }
 
     private get hasSidebarFooter(): boolean {
-        return !!(
-            (this.languages && toJson(this.languages).length > 1) ||
-            Boolean(this.bailHref)
-        );
+        return this.languages?.length > 1 || Boolean(this.bailHref);
     }
 }