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

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

@@ -62,29 +62,32 @@
                 ></dx-tree>
             </div>
             <dx-empty-state
+                variant="alt"
                 class="padding-horizontal"
                 size="small"
                 title="No Results"
+                body={emptyStateBody}
+                suggestions={emptyStateSuggestions}
                 if:false={anyResultMatch}
             ></dx-empty-state>
             <div if:true={hasMobileSidebarFooter} class="footer-nav">
-                <doc-sidebar-footer-nav
+                <dx-sidebar-footer-nav
                     lang-value-path={langValuePath}
                     language={language}
                     languages={languages}
-                ></doc-sidebar-footer-nav>
+                ></dx-sidebar-footer-nav>
             </div>
         </template>
 
         <template if:false={mobile}>
             <div if:true={hasSidebarFooter} class="footer-nav">
-                <doc-sidebar-footer-nav
+                <dx-sidebar-footer-nav
                     lang-value-path={langValuePath}
                     language={language}
                     languages={languages}
                     bail-href={bailHref}
                     bail-label={bailLabel}
-                ></doc-sidebar-footer-nav>
+                ></dx-sidebar-footer-nav>
             </div>
         </template>
     </div>

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

@@ -4,35 +4,12 @@ import { api } from "lwc";
 import { TreeNode } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { SidebarBase } from "dxBaseElements/sidebarBase";
-import type { OptionWithLink } from "typings/custom";
 
 const WAIT_TIME = 500;
 const MOBILE_SIZE_MATCH = "768px";
 
 export default class Sidebar extends SidebarBase {
     @api header: string = "";
-    @api langValuePath: string = "id";
-    @api language!: string;
-    @api bailHref!: string;
-    @api bailLabel!: string;
-
-    @api
-    get value() {
-        return this._value;
-    }
-
-    set value(value) {
-        this._value = value;
-    }
-
-    @api
-    get languages() {
-        return this._languages;
-    }
-
-    set languages(value) {
-        this._languages = toJson(value);
-    }
 
     @api
     get trees() {
@@ -51,17 +28,13 @@ export default class Sidebar extends SidebarBase {
         this.assignFilteredTrees();
     }
 
-    private expanded: boolean = true;
     private _searchTimeout?: number;
-    private _value?: string = undefined;
     private _trees!: Array<TreeNode>;
 
     private filteredTrees: Array<{ key: string; tree: TreeNode }> = [];
-    private mobile: boolean = true;
     private searchText: string = "";
     private matchMedia!: MediaQueryList;
     private valueToLabel: { [key: string]: string } = {};
-    private _languages!: OptionWithLink[];
 
     private get anyResultMatch() {
         return this.filteredTrees.length > 0;
@@ -86,6 +59,17 @@ export default class Sidebar extends SidebarBase {
         return this.expanded ? "close" : "custom-rows";
     }
 
+    private get emptyStateBody(): string {
+        return "Search Tips:";
+    }
+
+    private get emptyStateSuggestions(): string {
+        return JSON.stringify([
+            "Please consider misspellings",
+            "Try different search keywords"
+        ]);
+    }
+
     connectedCallback() {
         this.matchMedia = window.matchMedia(
             `(max-width: ${MOBILE_SIZE_MATCH})`
@@ -105,32 +89,6 @@ export default class Sidebar extends SidebarBase {
         this.matchMedia.removeEventListener("change", this.onMediaChange);
     }
 
-    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
-        this.mobile = event.matches;
-        this.expanded = !this.mobile;
-    };
-
-    private onSelect(event: CustomEvent) {
-        this._value = event.detail.name;
-
-        if (this.mobile) {
-            this.onToggleClick();
-        }
-    }
-
-    private onToggleClick() {
-        this.expanded = !this.expanded;
-        this.dispatchEvent(
-            new CustomEvent("togglesidebar", {
-                detail: {
-                    open: this.expanded,
-                    bubbles: true,
-                    composed: true
-                }
-            })
-        );
-    }
-
     /*
      * Debouncing this method: Do not apply searchText filter as long as this
      * function is being called to avoid running the recursivity logic very often.
@@ -205,12 +163,4 @@ export default class Sidebar extends SidebarBase {
             node.children.forEach((child) => this.assignValueToLabel(child));
         }
     }
-
-    private get hasMobileSidebarFooter(): boolean {
-        return this.mobile && this.languages?.length > 1 && this.expanded;
-    }
-
-    private get hasSidebarFooter(): boolean {
-        return this.languages?.length > 1 || Boolean(this.bailHref);
-    }
 }

package/src/modules/dxBaseElements/sidebarBase/sidebarBase.ts

@@ -1,4 +1,6 @@
-import { LightningElement } from "lwc";
+import { LightningElement, api } from "lwc";
+import type { OptionWithLink } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
 
 export const HEIGHT_OF_SIDEBAR_ITEM = 32;
 export const WAIT_TIME_BEFORE_SCROLL_IN_MS = 500;
@@ -8,6 +10,33 @@ export class SidebarBase extends LightningElement {
 
     selectedElement: HTMLElement | null = null;
     timerId: ReturnType<typeof setTimeout> | null = null;
+    _languages!: OptionWithLink[];
+    mobile: boolean = true;
+    expanded: boolean = true;
+    _value?: string = undefined;
+
+    @api langValuePath: string = "id";
+    @api language!: string;
+    @api bailHref!: string;
+    @api bailLabel!: string;
+
+    @api
+    get languages() {
+        return this._languages;
+    }
+
+    set languages(value) {
+        this._languages = toJson(value);
+    }
+
+    @api
+    get value() {
+        return this._value;
+    }
+
+    set value(value) {
+        this._value = value;
+    }
 
     get sidebarContent() {
         if (!this._sidebarContent) {
@@ -62,4 +91,38 @@ export class SidebarBase extends LightningElement {
             this.selectedElement = null;
         }
     }
+
+    onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
+        this.mobile = event.matches;
+        this.expanded = !this.mobile;
+    };
+
+    onSelect(event: CustomEvent) {
+        this._value = event.detail.name;
+
+        if (this.mobile) {
+            this.onToggleClick();
+        }
+    }
+
+    onToggleClick() {
+        this.expanded = !this.expanded;
+        this.dispatchEvent(
+            new CustomEvent("togglesidebar", {
+                detail: {
+                    open: this.expanded,
+                    bubbles: true,
+                    composed: true
+                }
+            })
+        );
+    }
+
+    private get hasMobileSidebarFooter(): boolean {
+        return this.mobile && this.languages?.length > 1 && this.expanded;
+    }
+
+    private get hasSidebarFooter(): boolean {
+        return this.languages?.length > 1 || Boolean(this.bailHref);
+    }
 }