@salesforcedevs/dx-components 0.43.2-alpha2 → 0.43.3-tree-selected-scroll-2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.43.2-alpha2",
+    "version": "0.43.3-tree-selected-scroll-2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/base-elements/sidebarBase/sidebarBase.ts

@@ -0,0 +1,25 @@
+import { LightningElement } from "lwc";
+
+const HEIGHT_OF_SIDEBAR_ITEM = 32;
+
+export class SidebarBase extends LightningElement {
+    /*Scroll to selected tree item */
+    private onSelectedItemRendered(event: CustomEvent) {
+        event.preventDefault();
+        const selectedTreeItem = event.detail.element;
+        if (selectedTreeItem) {
+            const sidebarContent = this.template.querySelector(
+                ".sidebar-content-tree"
+            );
+            if (sidebarContent) {
+                sidebarContent.scrollTo({
+                    top:
+                        selectedTreeItem.offsetTop +
+                        HEIGHT_OF_SIDEBAR_ITEM + // add height of sidebar item
+                        HEIGHT_OF_SIDEBAR_ITEM * 2, // add height of 2 more items so that user can see at least two more items after selected item
+                    behavior: "smooth"
+                });
+            }
+        }
+    }
+}

package/src/modules/dx/cardBlogPost/cardBlogPost.css

@@ -4,7 +4,7 @@ dx-card-content {
     --dx-c-body-max-lines: 3;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 1024px) {
     dx-card-content::part(body),
     dx-card-content::part(datetime) {
         display: none;

package/src/modules/dx/cardContent/cardContent.css

@@ -26,7 +26,7 @@
 
 /* mobile responsiveness */
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 1024px) {
     .card-content:not(.dx-card-base_featured) {
         flex-direction: row;
     }

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.css

@@ -12,7 +12,7 @@
     z-index: 1;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 1024px) {
     .badge {
         --badge-size: 56px;
     }

package/src/modules/dx/cardVideoPreview/cardVideoPreview.css

@@ -7,7 +7,7 @@
     z-index: 1;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 1024px) {
     dx-card-content::part(datetime) {
         display: block;
     }

package/src/modules/dx/cardVideoPreview/cardVideoPreview.html

@@ -16,7 +16,6 @@
             slot="image-badge"
         ></dx-icon-badge>
         <dx-formatted-date-time
-            if:true={datetime}
             slot="datetime"
             day="2-digit"
             month="long"

package/src/modules/dx/cardVideoPreview/cardVideoPreview.ts

@@ -2,7 +2,7 @@ import { LightningElement, api } from "lwc";
 
 export default class CardVideoPreview extends LightningElement {
     @api body?: string | null = null;
-    @api datetime?: string;
+    @api datetime!: string;
     @api featured?: boolean = false;
     @api href!: string;
     @api imgAlt?: string;

package/src/modules/dx/section/section.css

@@ -69,7 +69,7 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
-.text > .label:not(:last-child) {
+.text > .label {
     margin-bottom: var(--dx-g-spacing-lg);
 }
 

package/src/modules/dx/section/section.ts

@@ -3,16 +3,16 @@ import cx from "classnames";
 import { toDxColor } from "utils/css";
 
 export default class Section extends LightningElement {
-    @api backgroundColor: string = "transparent";
-    @api dark: boolean = false;
+    @api backgroundColor?: string | null = "transparent";
+    @api dark?: boolean = false;
     @api headingLevel: "1" | "2" | "3" | "4" | "5" = "3";
-    @api label?: string;
-    @api subtitle?: string;
-    @api textAlign: "center" | "left" = "left";
-    @api title?: string;
-    @api topGraphic: boolean = false;
-    @api graphicOverlap: boolean = false;
-    @api bottomGraphic: boolean = false;
+    @api label?: string | null = null;
+    @api subtitle?: string | null = null;
+    @api textAlign?: "center" | "left" = "left";
+    @api title?: string | null = null;
+    @api topGraphic?: boolean = false;
+    @api graphicOverlap?: boolean = false;
+    @api bottomGraphic?: boolean = false;
 
     private get style(): string {
         return `--dx-c-section-background-color: ${toDxColor(

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

@@ -88,6 +88,7 @@
                 tree-root={tree.tree}
                 onselect={onSelect}
                 value={value}
+                onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>
     </div>

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

@@ -1,6 +1,6 @@
 import cx from "classnames";
 import { track as trackAnalytics } from "dx/instrumentation";
-import { LightningElement, api, track } from "lwc";
+import { api, track } from "lwc";
 import {
     TreeNode,
     SidebarGtmAction,
@@ -9,11 +9,12 @@ import {
 import { getSidebarSearchParams } from "utils/coveo";
 import { toJson } from "utils/normalizers";
 import SidebarSearch from "dx/sidebarSearch";
+import { SidebarBase } from "base-elements/sidebarBase";
 
 const MOBILE_SIZE_MATCH = "768px";
 const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 
-export default class Sidebar extends LightningElement {
+export default class Sidebar extends SidebarBase {
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
     @api coveoSearchHub!: string;

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

@@ -49,7 +49,7 @@
                     ></dx-input>
                 </div>
             </div>
-            <div class="sidebar-content" if:true={anyResultMatch}>
+            <div class="sidebar-content sidebar-content-tree" if:true={anyResultMatch}>
                 <dx-tree
                     for:each={filteredTrees}
                     for:item="tree"
@@ -57,6 +57,7 @@
                     tree-root={tree.tree}
                     onselect={onSelect}
                     value={value}
+                    onselecteditemrendered={onSelectedItemRendered}
                 ></dx-tree>
             </div>
             <dx-empty-state

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

@@ -1,15 +1,16 @@
 import cx from "classnames";
 import { track } from "dx/instrumentation";
-import { LightningElement, api } from "lwc";
+import { api } from "lwc";
 
 import { TreeNode, SidebarGtmAction } from "typings/custom";
 import { toJson } from "utils/normalizers";
+import { SidebarBase } from "base-elements/sidebarBase";
 
 const WAIT_TIME = 500;
 const MOBILE_SIZE_MATCH = "768px";
 const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 
-export default class Sidebar extends LightningElement {
+export default class Sidebar extends SidebarBase {
     @api header: string = "";
 
     @api

package/src/modules/dx/treeItem/treeItem.ts

@@ -2,6 +2,7 @@ import { LightningElement, api } from "lwc";
 import { InternalTreeNode } from "typings/custom";
 import { track } from "dx/instrumentation";
 import { SidebarGtmAction } from "typings/custom";
+import { isInViewport } from "utils/browser";
 
 const DEFAULT_TARGET = "_self";
 
@@ -61,6 +62,25 @@ export default class TreeItem extends LightningElement {
         }
     }
 
+    renderedCallback(): void {
+        this.sendEventToParentIfSelected();
+    }
+
+    private sendEventToParentIfSelected(): void {
+        /**
+         * This is to send selected element reference to parent if it's not visible in the viewport
+         * Parent component will use the elements offsetTop scrollTo that element's position
+         */
+        if (this.isSelected) {
+            const element = this.template.querySelector("dx-tree-tile");
+            if (element && !isInViewport(element)) {
+                this.fireEvent("selecteditemrendered", {
+                    element
+                });
+            }
+        }
+    }
+
     private onIconClick(event: CustomEvent): void {
         const isSelectAction = false;
         this.doExpand(isSelectAction);

package/src/modules/dx/vimeoPlayer/vimeoPlayer.html

@@ -1,3 +1,3 @@
 <template>
-    <div class="video-container" lwc:dom="manual"></div>
+    <div class="video-container"></div>
 </template>

package/src/modules/helpers/card/card.css

@@ -184,6 +184,18 @@ a.dx-card-base:hover dx-card-title {
 
 /* Desktop Only */
 @media screen and (min-width: 1024px) {
+    .dx-card-base_layout-horizontal .dx-card-base_borderless-image_link {
+        align-self: flex-start;
+        flex-shrink: 0;
+        width: 0;
+        height: unset;
+        margin-right: var(--dx-g-card-img-spacing);
+        margin-bottom: unset;
+        padding-top: unset;
+        padding-right: 45%;
+        padding-bottom: 22.5%;
+    }
+
     .dx-card-base_featured dx-card-title {
         --dx-c-card-title-letter-spacing: -0.6px;
         --dx-c-card-title-font-size: 32px;
@@ -204,21 +216,6 @@ a.dx-card-base:hover dx-card-title {
     }
 }
 
-/* Tablet + Desktop Only */
-@media screen and (min-width: 764px) {
-    .dx-card-base_layout-horizontal .dx-card-base_borderless-image_link {
-        align-self: flex-start;
-        flex-shrink: 0;
-        width: 0;
-        height: unset;
-        margin-right: var(--dx-g-card-img-spacing);
-        margin-bottom: unset;
-        padding-top: unset;
-        padding-right: 45%;
-        padding-bottom: 22.5%;
-    }
-}
-
 /* Tablet */
 @media screen and (max-width: 1024px) {
     :host {
@@ -226,6 +223,10 @@ a.dx-card-base:hover dx-card-title {
         --dx-g-card-img-spacing: 16px;
     }
 
+    .dx-card-base_borderless-image {
+        min-height: unset;
+    }
+
     /* text resp */
     .dx-text-body-2,
     .dx-text-body-3 {
@@ -255,9 +256,3 @@ a.dx-card-base:hover dx-card-title {
         font-size: var(--dx-g-text-sm);
     }
 }
-
-@media screen and (max-width: 764px) {
-    .dx-card-base_borderless-image {
-        min-height: unset;
-    }
-}

package/src/modules/utils/browser/browser.ts

@@ -0,0 +1,19 @@
+/**
+ * Returns whether given element is in browser viewport or not
+ */
+function isInViewport(element: HTMLElement): boolean {
+    if (element) {
+        const rect = element.getBoundingClientRect();
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <=
+                (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <=
+                (window.innerWidth || document.documentElement.clientWidth)
+        );
+    }
+    return false;
+}
+
+export { isInViewport };