@salesforcedevs/dx-components 0.19.3-alpha.22 → 0.19.3-alpha.23

package/package.json

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

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -320,6 +320,7 @@ export default class SidebarSearch extends LightningElement {
 
     private dispatchOnChangeEvent(results: Result[]) {
         this.updateSessionStorage();
+        this.dispatchHighlightedTermChange();
         this.dispatchEvent(
             new CustomEvent("change", {
                 detail: {
@@ -335,8 +336,19 @@ export default class SidebarSearch extends LightningElement {
     }
 
     private dispatchHighlightedTermChange = debounce(() => {
-        console.log(this.engine);
-        console.log(this.engine?.state.search.response.termsToHighlight);
+        const { termsToHighlight, phrasesToHighlight } =
+            this.engine?.state?.search?.response;
+        if (!termsToHighlight || !phrasesToHighlight) {
+            return;
+        }
+        const terms = new Set(
+            [
+                Object.values(termsToHighlight),
+                Object.values(phrasesToHighlight),
+                this.value
+            ].flat()
+        );
+        console.log({ terms });
         this.dispatchEvent(
             new CustomEvent("highlightedtermchange", {
                 detail: this.value,
@@ -399,7 +411,6 @@ export default class SidebarSearch extends LightningElement {
         this.value = e.detail;
 
         this.handleValueChange(false);
-        this.dispatchHighlightedTermChange();
     }
 
     private onInputFocus() {

package/src/modules/utils/highlight/highlight.ts

@@ -36,10 +36,12 @@ export const highlightTerms = (
             console.error(e, element);
         }
 
-        element.querySelectorAll("mark").forEach((el) => {
-            console.log(el)
-            el.style.backgroundColor = "var(--dx-g-yellow-vibrant-90)";
-        });
+        element
+            .querySelectorAll("mark")
+            .forEach(
+                (el) =>
+                    (el.style.backgroundColor = "var(--dx-g-yellow-vibrant-90)")
+            );
 
         const mark = element.querySelector("mark");
         if (mark && !scrolled) {