@salesforcedevs/dx-components 1.3.224-alpha.1 → 1.3.224-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.224-alpha.1",
+    "version": "1.3.224-alpha.2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

@@ -8,6 +8,9 @@ import {
 import { getContentTypeColorVariables } from "dxUtils/contentTypes";
 import { pollUntil } from "dxUtils/async";
 
+// Max height for breadcrumb without wrapping
+const MAX_BREADCRUMB_HEIGHT = 16;
+
 interface CoveoSearch {
     state: typeof CoveoSDK.state;
     get: typeof CoveoSDK.get;
@@ -141,10 +144,10 @@ const processParts = (parts: string[], internalFlag = false) => {
     return parts.filter(filterFn).map((part) => {
         // Remove special characters & .htm/.xml extension
         part = part
-            .replace(/_/g, " ")
-            .replace(/-/g, " ")
-            .replace(/.html*/g, " ")
-            .replace(/.xml/g, " ")
+            .replace(/_/g, "")
+            .replace(/-/g, "")
+            .replace(/.html*/g, "")
+            .replace(/.xml/g, "")
             .replace(/b2c/g, "B2C");
 
         // Capitalize first letter of each word
@@ -367,17 +370,16 @@ export default class SearchResults extends LightningElement {
                 1000
             );
 
-            this.processBreadcrumbs(this.root!);
+            this.processBreadcrumbs(root);
 
             window.onresize = () => this.processBreadcrumbs(root);
         });
     }
 
-    // Checks if text is wrapping by comparing it with an element's text that doesn't wrap
-    private isTextWrapping = (
-        elementOne: HTMLElement,
-        elementTwo: HTMLElement
-    ) => elementOne.offsetHeight > elementTwo.offsetHeight;
+    // check if the breadcrumb is overflowing or not based on the height of a single character in the text element
+    private isTextWrapping = (element: HTMLElement) => {
+        return element.offsetHeight > MAX_BREADCRUMB_HEIGHT;
+    };
 
     private truncateBreadcrumbText = (breadcrumbItems: HTMLElement[]) => {
         breadcrumbItems.forEach((breadcrumbItem: HTMLElement) => {
@@ -396,10 +398,10 @@ export default class SearchResults extends LightningElement {
         breadcrumb: HTMLElement
     ) => {
         for (let i = 1; i < breadcrumbItems.length; i++) {
-            if (this.isTextWrapping(breadcrumb, breadcrumbItems[0])) {
+            if (this.isTextWrapping(breadcrumb)) {
                 // if the previous element is an ellipsis, make it empty (in order to avoid multiple grouped ellipsis)
                 if (breadcrumbItems[i - 1]?.textContent === "...") {
-                    breadcrumbItems[i].outerHTML = "";
+                    breadcrumbItems[i].innerHTML = "";
                 } else {
                     breadcrumbItems[i].textContent = "...";
                 }
@@ -408,8 +410,17 @@ export default class SearchResults extends LightningElement {
             }
         }
 
-        // remove duplicate slashes due to empty breadcrumb items
-        breadcrumb.outerHTML = breadcrumb.outerHTML.replace(" /  / ", " / ");
+        // remove any empty breadcrumb items
+        breadcrumb.innerHTML = breadcrumb.innerHTML
+            .replace(
+                / ?\/ +<span class="breadcrumb-item"><\/span> +\/ ?/g,
+                " / "
+            )
+            // when first loading the page on mobile, the breadcrumb items are not grouped correctly
+            .replace(
+                `<span class="breadcrumb-item">...</span> / <span class="breadcrumb-item">...</span>`,
+                `<span class="breadcrumb-item">...</span>`
+            );
     };
 
     private formatBreadcrumbs = (breadcrumbs: HTMLElement[]) => {
@@ -419,7 +430,7 @@ export default class SearchResults extends LightningElement {
                 breadcrumb.querySelectorAll(".breadcrumb-item");
 
             // Check if the breadcrumb is overflowing by comparing it's height to the height of the first breadcrumb item
-            if (this.isTextWrapping(breadcrumb, breadcrumbItems[0])) {
+            if (this.isTextWrapping(breadcrumb)) {
                 // it is overflowing, so we need to truncate long titles to 30 characters
                 this.truncateBreadcrumbText(breadcrumbItems);
 
@@ -427,7 +438,7 @@ export default class SearchResults extends LightningElement {
                 this.addBreadcrumbEllipsis(breadcrumbItems, breadcrumb);
 
                 // After processing all breadcrumb items, if it's still overflowing, hide the breadcrumb element
-                if (this.isTextWrapping(breadcrumb, breadcrumbItems[0])) {
+                if (this.isTextWrapping(breadcrumb)) {
                     breadcrumb.style.display = "none";
                 }
             }