@salesforcedevs/dx-components 1.20.0 → 1.20.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.20.0",
+    "version": "1.20.4",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -46,5 +46,5 @@
     "volta": {
         "node": "20.19.0"
     },
-    "gitHead": "3ff1ef723b233e63fa9227f127856714a363edac"
+    "gitHead": "6a754f7876a57aa5528d47716844c827670e4f76"
 }

package/src/modules/dx/toc/toc.css

@@ -1,6 +1,10 @@
 @import "dxHelpers/reset";
 @import "dxHelpers/text";
 
+:host {
+    --dx-c-toc-padding-bottom: 80px;
+}
+
 .toc {
     display: flex;
     flex-direction: row;
@@ -25,12 +29,35 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
+.toc-content-header {
+    width: 100%;
+}
+
+.toc-content-header[show-shadow="true"] {
+    box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
+}
+
+.toc-content-header[show-shadow="true"] .toc_title {
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+.toc-items {
+    overflow-y: auto;
+    padding-bottom: var(--dx-c-toc-padding-bottom);
+    padding-right: var(--dx-g-spacing-smd);
+}
+
+.toc-items[show-bottom-shadow="true"] {
+    box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
+}
+
 .dx-text-display-8 {
     padding-top: var(--dx-g-spacing-sm);
     transition: var(--dx-g-transition-hue-1x);
 }
 
 .content-button {
+    display: block;
     line-height: var(--dx-g-text-lg);
     color: var(--dx-g-blue-vibrant-20);
     font-family: var(--dx-g-font-sans);

package/src/modules/dx/toc/toc.html

@@ -1,19 +1,27 @@
 <template>
     <div class="toc" role="navigation">
         <div class="toc toc_content">
-            <h2 class="dx-text-display-8 toc_title">{header}</h2>
-            <template for:each={options} for:item="option">
-                <a
-                    href={option.anchor}
-                    class={option.className}
-                    onclick={onClick}
-                    contentid={option.id}
-                    data-text={option.label}
-                    key={option.id}
-                >
-                    {option.label}
-                </a>
-            </template>
+            <div class="toc-content-header" show-shadow={showBoxShadow}>
+                <h2 class="dx-text-display-8 toc_title">{header}</h2>
+            </div>
+            <div
+                class="toc-items"
+                show-bottom-shadow={showBottomShadow}
+                onscroll={handleScroll}
+            >
+                <template for:each={options} for:item="option">
+                    <a
+                        href={option.anchor}
+                        class={option.className}
+                        onclick={onClick}
+                        contentid={option.id}
+                        data-text={option.label}
+                        key={option.id}
+                    >
+                        {option.label}
+                    </a>
+                </template>
+            </div>
         </div>
     </div>
     <div>

package/src/modules/dx/toc/toc.ts

@@ -3,8 +3,19 @@ import cx from "classnames";
 import { ContentElement } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { track as sendGtm } from "dxUtils/analytics";
+import { handleScroll } from "dxUtils/handleScroll";
 
 export default class Toc extends LightningElement {
+    // For showing shadow at the top
+    private showBoxShadow: boolean = false;
+    private scrolling: boolean = false;
+
+    handleScroll = handleScroll.bind(this);
+
+    // For showing shadow at the bottom
+    private showBottomShadow: boolean = false;
+    private scrollingToTop: boolean = false;
+
     @api header!: string;
 
     @api
@@ -38,6 +49,43 @@ export default class Toc extends LightningElement {
 
     @track _options!: Array<ContentElement>;
 
+    // to show shadow box at bottom of list container
+    private showShadowAtBottom = (event: any) => {
+        const list = event.target;
+
+        if (!this.scrollingToTop) {
+            this.scrollingToTop = true;
+            // Set a timeout to handle scroll event after a delay
+            setTimeout(() => {
+                const isScrollable = list.scrollHeight > list.clientHeight;
+                const isAtBottom =
+                    list.scrollTop + list.clientHeight >=
+                    list.scrollHeight -
+                        parseInt(
+                            getComputedStyle(
+                                this.template.host
+                            ).getPropertyValue("--dx-c-toc-padding-bottom"),
+                            10
+                        );
+
+                this.showBottomShadow = isScrollable && !isAtBottom;
+
+                // Reset scrolling back to false after handling the scroll
+                this.scrollingToTop = false;
+            }, 200);
+        }
+    };
+
+    renderedCallback(): void {
+        const list = this.template.querySelector(".toc-items");
+        list?.addEventListener("scroll", this.showShadowAtBottom);
+    }
+
+    disconnectedCallback(): void {
+        const list = this.template.querySelector(".toc-items");
+        list?.removeEventListener("scroll", this.showShadowAtBottom);
+    }
+
     private onClick(e: Event) {
         const target = e.currentTarget as HTMLElement;
         const id = target.getAttribute("contentid");

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

@@ -2,12 +2,14 @@ import { LightningElement, api } from "lwc";
 import type { OptionWithLink } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { Brand, DevCenterConfig } from "typings/custom";
+import { handleScroll } from "dxUtils/handleScroll";
 
 export const HEIGHT_OF_SIDEBAR_ITEM = 32;
 export const WAIT_TIME_BEFORE_SCROLL_IN_MS = 500;
 
 export class SidebarBase extends LightningElement {
     _sidebarContent: HTMLElement | null = null;
+    handleScroll = handleScroll.bind(this);
 
     selectedElement: HTMLElement | null = null;
     timerId: ReturnType<typeof setTimeout> | null = null;
@@ -61,29 +63,6 @@ export class SidebarBase extends LightningElement {
         return this._sidebarContent;
     }
 
-    /**
-     * This method is to handle the scroll event for LNB and show box shadow
-     * @param scrollEvent
-     */
-    handleScroll(scrollEvent: any) {
-        const lnb = scrollEvent.target;
-
-        if (!this.scrolling) {
-            this.scrolling = true;
-            // Set a timeout to handle scroll event after a delay
-            setTimeout(() => {
-                // Check if lnb is scrolled
-                if (lnb.scrollTop > 0 && lnb.scrollHeight > lnb.clientHeight) {
-                    this.showBoxShadow = true;
-                } else {
-                    this.showBoxShadow = false;
-                }
-                // Reset scrolling back to false after handling the scroll
-                this.scrolling = false;
-            }, 200);
-        }
-    }
-
     renderedCallback(): void {
         /**
          * Implementing debouncing kind of logic here to scroll to selected element once tree rendering is done

package/src/modules/dxHelpers/card/card.css

@@ -115,6 +115,7 @@ span {
     object-fit: cover;
     transition: var(--dx-g-transition-filter-2x),
         var(--dx-g-transition-box-shadow-2x);
+    width: 100%;
 }
 
 .dx-card-base_borderless-image {

package/src/modules/dxUtils/handleScroll/handleScroll.ts

@@ -0,0 +1,20 @@
+/**
+ * This generic method is to handle the scroll event and show box shadow below header
+ * @param scrollEvent
+ */
+export function handleScroll(this: any, scrollEvent: any) {
+    const listContainer = scrollEvent.target;
+
+    if (!this.scrolling) {
+        this.scrolling = true;
+        // Set a timeout to handle scroll event after a delay
+        setTimeout(() => {
+            // Check if scrolled
+            this.showBoxShadow =
+                listContainer.scrollTop > 0 &&
+                listContainer.scrollHeight > listContainer.clientHeight;
+            // Reset scrolling back to false after handling the scroll
+            this.scrolling = false;
+        }, 200);
+    }
+}