@salesforcedevs/dx-components 0.19.3-alpha.20 → 0.19.3-alpha.24

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.19.3-alpha.20",
+    "version": "0.19.3-alpha.24",
     "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,6 +336,20 @@ export default class SidebarSearch extends LightningElement {
     }
 
     private dispatchHighlightedTermChange = debounce(() => {
+        const { termsToHighlight, phrasesToHighlight } =
+            this.engine?.state?.search?.response;
+        if (!termsToHighlight || !phrasesToHighlight) {
+            return;
+        }
+        console.log(termsToHighlight, Object.values(termsToHighlight))
+        const terms = new Set(
+            [
+                Object.values(termsToHighlight),
+                Object.values(phrasesToHighlight),
+                this.value
+            ].flat()
+        );
+        console.log({ terms });
         this.dispatchEvent(
             new CustomEvent("highlightedtermchange", {
                 detail: this.value,
@@ -397,7 +412,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,6 +36,13 @@ export const highlightTerms = (
             console.error(e, element);
         }
 
+        element
+            .querySelectorAll("mark")
+            .forEach(
+                (el) =>
+                    (el.style.backgroundColor = "var(--dx-g-yellow-vibrant-90)")
+            );
+
         const mark = element.querySelector("mark");
         if (mark && !scrolled) {
             scrolled = true;