@salesforcedevs/dx-components 1.3.104 → 1.3.106

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.104",
+    "version": "1.3.106",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "5c5892f9f85207284a94a39243f47e948e5e3fdf"
+    "gitHead": "e505946b6e79055d355ff6073dd59a47049670b8"
 }

package/src/modules/dx/footer/footer.css

@@ -2,7 +2,7 @@
 @import "dxHelpers/text";
 
 .content-container {
-    padding: 0 var(--dx-g-page-padding-horizontal);
+    padding: 0 var(--dx-g-global-header-padding-horizontal);
 }
 
 a {
@@ -70,6 +70,7 @@ footer.signup-variant-no-signup {
 
 .content-container_top_large {
     position: relative;
+    padding: 0 var(--dx-g-page-padding-horizontal);
     height: 504px;
 }
 

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

@@ -10,7 +10,7 @@
 }
 
 .popover-container {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     z-index: var(--dx-c-popover-z-index, var(--dx-g-z-index-max));

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

@@ -246,9 +246,9 @@ export default class Popover extends LightningElement {
         const elements = slot.assignedElements();
         const slotted = elements.length === 0 ? null : elements[0];
         // allows dropdown/select to compose popover
-        const slotElement = (slotted?.tagName === "SLOT"
-            ? slotted.firstChild
-            : slotted) as HTMLElement | null;
+        const slotElement = (
+            slotted?.tagName === "SLOT" ? slotted.firstChild : slotted
+        ) as HTMLElement | null;
         const isWorkToDo =
             slotElement &&
             (!this.control || !slotElement.isSameNode(this.control));
@@ -286,7 +286,7 @@ export default class Popover extends LightningElement {
         }
     }
 
-    private setPosition = async () => {
+    private _setPosition = async () => {
         if (this.popover && this.control) {
             await Promise.resolve();
             const popoverEl = this.popover;
@@ -310,6 +310,7 @@ export default class Popover extends LightningElement {
 
             computePosition(this.control, popoverEl, {
                 placement: this.placement,
+                strategy: "fixed",
                 middleware
             }).then(({ x, y, placement, middlewareData }) => {
                 Object.assign(popoverEl.style, {
@@ -349,4 +350,10 @@ export default class Popover extends LightningElement {
             });
         }
     };
+    public get setPosition() {
+        return this._setPosition;
+    }
+    public set setPosition(value) {
+        this._setPosition = value;
+    }
 }

package/src/modules/dx/scrollManager/scrollManager.ts

@@ -4,6 +4,8 @@ import { track } from "dxUtils/analytics";
 
 const RESTORE_SCROLL_EVENT_NAME = "restore-scroll";
 const LOAD_TIME_SCROLL_RESTORE_DELAY = 750;
+const REDUNDANT_INSTANCE_ERROR_MESSAGE =
+    "Multiple <dx-scroll-manager>s detected, this should never be the case.";
 
 declare module globalThis {
     let singletonScrollManagerRendered: boolean;
@@ -81,9 +83,7 @@ export default class ScrollManager extends LightningElement {
                 }, LOAD_TIME_SCROLL_RESTORE_DELAY);
             }
         } else {
-            console.error(
-                "Multiple <dx-scroll-manager>s detected, this should never be the case."
-            );
+            console.error(REDUNDANT_INSTANCE_ERROR_MESSAGE);
         }
     }
 
@@ -93,9 +93,20 @@ export default class ScrollManager extends LightningElement {
             window.addEventListener(RESTORE_SCROLL_EVENT_NAME, restoreScroll);
 
             document.body.addEventListener("scroll", this.manualScrollListener);
+            window.addEventListener("scroll", this.onWindowScroll);
         } else {
-            console.error(
-                "Multiple <dx-scroll-manager>s detected, this should never be the case."
+            console.error(REDUNDANT_INSTANCE_ERROR_MESSAGE);
+        }
+    }
+
+    onWindowScroll() {
+        const html = document.querySelector("html");
+        if (html) {
+            html.setAttribute(
+                "style",
+                `--dx-g-global-header-nav-row-count: ${
+                    html.scrollTop >= 72 ? 1 : 2
+                }`
             );
         }
     }
@@ -177,5 +188,6 @@ export default class ScrollManager extends LightningElement {
 
     disconnectedCallback(): void {
         window.removeEventListener(RESTORE_SCROLL_EVENT_NAME, restoreScroll);
+        window.removeEventListener("scroll", this.onWindowScroll);
     }
 }

package/src/modules/dx/searchResults/searchResults.ts

@@ -155,6 +155,17 @@ export default class SearchResults extends LightningElement {
         Coveo.$$(root).on(
             Coveo.InitializationEvents.afterInitialization,
             () => {
+                const url = new URL(window.location.href);
+                const searchParams = url.searchParams;
+                const keywordsParam = searchParams.get("keywords");
+
+                // Accomodate for the global nav using 'keywords' param instead of 'q'
+                if (keywordsParam) {
+                    this._query = searchParams.get("keywords")!;
+                    searchParams.delete("keywords");
+                    window.history.replaceState(null, "", url.href);
+                }
+
                 if (this._query !== "") {
                     Coveo.state(this.root!, "q", this.searchQuery);
                 }

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

@@ -1,23 +1,14 @@
 @import "dxHelpers/reset";
 @import "dxHelpers/text";
 
-:host {
-    --dx-c-toc-width: 284px;
-}
-
 .toc {
     display: flex;
     flex-direction: row-reverse;
-    width: var(--dx-c-toc-width);
-    max-width: 100%;
+    max-width: 240px;
+    min-width: 80px;
     word-break: break-word;
 }
 
-.toc_collapsed {
-    width: var(--dx-g-spacing-xl);
-    margin-left: var(--dx-g-spacing-xl);
-}
-
 .toc_content {
     display: flex;
     flex-direction: column;
@@ -26,11 +17,6 @@
     padding-bottom: var(--dx-g-spacing-smd);
 }
 
-.state-hide-content {
-    opacity: 0;
-    pointer-events: none;
-}
-
 .toc_title {
     display: flex;
     flex-direction: row;
@@ -44,29 +30,6 @@
     transition: var(--dx-g-transition-hue-1x);
 }
 
-.toggle-button.collapsed {
-    --dx-c-button-opacity: 1;
-
-    transform: rotate(180deg);
-}
-
-.toggle-button {
-    width: var(--dx-g-icon-size-xl);
-    height: var(--dx-g-icon-size-xl);
-
-    --dx-c-button-opacity: 0;
-    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
-    --dx-c-button-custom-background: white;
-    --dx-c-button-custom-border: white;
-    --dx-c-button-custom-color-hover: white;
-    --dx-c-button-custom-background-hover: var(--dx-g-blue-vibrant-50);
-    --dx-c-button-custom-border-hover: var(--dx-g-blue-vibrant-50);
-}
-
-.toggle-button:hover {
-    --dx-c-button-opacity: 1;
-}
-
 .content-button {
     line-height: var(--dx-g-text-lg);
     color: var(--dx-g-blue-vibrant-20);
@@ -100,7 +63,3 @@
     color: var(--dx-g-blue-vibrant-40);
     border-color: var(--dx-g-blue-vibrant-40);
 }
-
-.toc:hover .toggle-button {
-    --dx-c-button-opacity: 1;
-}

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

@@ -1,14 +1,7 @@
 <template>
-    <div class={contentClassName} role="directory">
-        <dx-button
-            aria-label={toggleButtonAriaLabel}
-            class={toggleButtonClass}
-            onclick={toggleShowContent}
-            icon-symbol="open_panel"
-            variant="custom"
-        ></dx-button>
-        <div if:true={showContent} class="toc toc_content">
-            <h2 class={titleClassName}>{title}</h2>
+    <div class="toc" role="directory">
+        <div class="toc toc_content">
+            <h2 class="dx-text-display-8 toc_title">{title}</h2>
             <template for:each={options} for:item="option">
                 <a
                     href={option.anchor}
@@ -23,7 +16,7 @@
             </template>
         </div>
     </div>
-    <div if:true={showContent}>
+    <div>
         <slot name="view-pdf"></slot>
     </div>
 </template>

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

@@ -35,34 +35,9 @@ export default class Toc extends LightningElement {
     }
 
     private _value?: string = undefined;
-    private showContent: boolean = true;
 
     @track _options!: Array<ContentElement>;
 
-    private get toggleButtonIconSymbol() {
-        return this.showContent ? "forward" : "back";
-    }
-
-    private get toggleButtonAriaLabel() {
-        return this.showContent
-            ? "Hide table of contents"
-            : "Show table of contents";
-    }
-
-    private get contentClassName() {
-        return cx("toc", !this.showContent && "toc_collapsed");
-    }
-    private get toggleButtonClass() {
-        return cx("toggle-button", !this.showContent && "collapsed");
-    }
-
-    private get titleClassName() {
-        return cx(
-            "dx-text-display-8 toc_title",
-            !this.showContent && "state-hide-content"
-        );
-    }
-
     private onClick(e: Event) {
         const target = e.currentTarget as HTMLElement;
         const id = target.getAttribute("contentid");
@@ -84,24 +59,4 @@ export default class Toc extends LightningElement {
             content_category: "cta"
         });
     }
-
-    private toggleShowContent(e: Event) {
-        this.showContent = !this.showContent;
-        this.trackShowContent(e);
-    }
-
-    private trackShowContent(event: Event) {
-        let action = "collapse";
-        if (this.showContent) {
-            action = "expand";
-        }
-        sendGtm(event.target!, "custEv_tableOfContents", {
-            click_text: this.toggleButtonAriaLabel,
-            clickAction: action,
-            click_url: "",
-            element_title: this.title,
-            element_type: "button",
-            content_category: "cta"
-        });
-    }
 }

package/src/modules/dxHelpers/commonHeader/commonHeader.css

@@ -36,6 +36,10 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 
 .subtitle {
     color: var(--dx-g-blue-vibrant-20);
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 /* First row */
@@ -43,7 +47,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 .header_l1 {
     height: var(--dx-g-spacing-3xl);
     background: var(--dx-g-brand-current-color-background-2);
-    padding: 0 var(--dx-g-page-padding-horizontal);
+    padding: 0 var(--dx-g-global-header-padding-horizontal);
     position: relative;
 }
 
@@ -58,9 +62,8 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 /* Second row */
 
 .header_l2 {
-    height: var(--dx-g-spacing-4xl);
     background: var(--dx-g-brand-current-color-background);
-    padding: var(--dx-g-spacing-lg) var(--dx-g-page-padding-horizontal);
+    padding: var(--dx-g-spacing-lg) var(--dx-g-global-header-padding-horizontal);
 }
 
 .header_l2_group {
@@ -121,7 +124,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 
 @media (max-width: 768px) {
     .header_l2_group-nav {
-        padding-left: calc(var(--dx-g-page-padding-horizontal) - 4px);
+        padding-left: calc(var(--dx-g-global-header-padding-horizontal) - 4px);
     }
 
     .header_l2_group-nav_overflow {

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

@@ -9,7 +9,7 @@
     --dx-c-sidebar-button-color-hover: white;
     --dx-c-sidebar-button-background-hover: var(--dx-g-blue-vibrant-50);
     --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
-    --dx-c-sidebar-left-padding: var(--dx-g-page-padding-horizontal);
+    --dx-c-sidebar-left-padding: var(--dx-g-global-header-padding-horizontal);
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
 }
 
@@ -52,6 +52,11 @@ dx-tree:not(:last-child) {
     width: var(--dx-g-spacing-xl);
 }
 
+.container.collapsed .header {
+    padding-left: var(--dx-g-global-header-padding-horizontal);
+    padding-right: var(--dx-g-global-header-padding-horizontal);
+}
+
 .container {
     background-color: var(--dx-g-gray-95);
     display: flex;