@salesforcedevs/dx-components 1.3.37-alpha02 → 1.3.37-alpha04

package/package.json

@@ -1,41 +1,41 @@
 {
-  "name": "@salesforcedevs/dx-components",
-  "version": "1.3.37-alpha02",
-  "description": "DX Lightning web components",
-  "license": "MIT",
-  "engines": {
-    "node": ">= 14.x"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@coveo/headless": "^1.32.0",
-    "@floating-ui/dom": "^1.0.4",
-    "@sfdocs-internal/wires": "^0.6.3",
-    "@vimeo/player": "^2.16.4",
-    "classnames": "^2.2.6",
-    "coveo-search-ui": "^2.10104.0",
-    "debounce": "^1.2.0",
-    "js-cookie": "^3.0.1",
-    "lodash.defaults": "^4.2.0",
-    "lodash.get": "^4.4.2",
-    "lodash.kebabcase": "^4.1.1",
-    "microtip": "0.2.2",
-    "salesforce-oauth2": "^0.2.0",
-    "uuid": "^9.0.0"
-  },
-  "devDependencies": {
-    "@types/classnames": "^2.2.10",
-    "@types/debounce": "^1.2.0",
-    "@types/js-cookie": "^3.0.2",
-    "@types/lodash.defaults": "^4.2.7",
-    "@types/lodash.get": "^4.4.6",
-    "@types/lodash.kebabcase": "^4.1.7",
-    "@types/luxon": "^3.1.0",
-    "@types/uuid": "^8.3.4",
-    "@types/vimeo__player": "^2.16.2",
-    "eventsourcemock": "^2.0.0",
-    "luxon": "^3.1.0"
-  }
+    "name": "@salesforcedevs/dx-components",
+    "version": "1.3.37-alpha04",
+    "description": "DX Lightning web components",
+    "license": "MIT",
+    "engines": {
+        "node": ">= 14.x"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@coveo/headless": "^1.32.0",
+        "@floating-ui/dom": "^1.0.4",
+        "@sfdocs-internal/wires": "^0.6.3",
+        "@vimeo/player": "^2.16.4",
+        "classnames": "^2.2.6",
+        "coveo-search-ui": "^2.10104.0",
+        "debounce": "^1.2.0",
+        "js-cookie": "^3.0.1",
+        "lodash.defaults": "^4.2.0",
+        "lodash.get": "^4.4.2",
+        "lodash.kebabcase": "^4.1.1",
+        "microtip": "0.2.2",
+        "salesforce-oauth2": "^0.2.0",
+        "uuid": "^9.0.0"
+    },
+    "devDependencies": {
+        "@types/classnames": "^2.2.10",
+        "@types/debounce": "^1.2.0",
+        "@types/js-cookie": "^3.0.2",
+        "@types/lodash.defaults": "^4.2.7",
+        "@types/lodash.get": "^4.4.6",
+        "@types/lodash.kebabcase": "^4.1.7",
+        "@types/luxon": "^3.1.0",
+        "@types/uuid": "^8.3.4",
+        "@types/vimeo__player": "^2.16.2",
+        "eventsourcemock": "^2.0.0",
+        "luxon": "^3.1.0"
+    }
 }

package/src/modules/dx/searchResults/coveo.css

@@ -1,6 +1,8 @@
 /*
 Code generated by scripts/postinstall.js DO NOT EDIT
-*//*
+*/
+
+/*
 * @param direction vertical or horizontal
 * @param position type of positioning to apply (relative/absolute)
 */
@@ -1376,6 +1378,15 @@ Code generated by scripts/postinstall.js DO NOT EDIT
 .coveo-filetype-salesforce-standard-work-order-item,
 .coveo-filetype-salesforce-standard-work-order,
 .coveo-filetype-salesforce-standard-work-type,
+.coveo-filetype-slack,
+.coveo-icon.filetype.Slackmessage,
+.coveo-icon.filetype.slackmessage,
+.coveo-icon.filetype.Slackchannel,
+.coveo-icon.filetype.slackchannel,
+.coveo-icon.filetype.Slackfile,
+.coveo-icon.filetype.slackfile,
+.coveo-icon.filetype.Slackuser,
+.coveo-icon.filetype.slackuser,
 .coveo-filetype-user,
 .coveo-icon.objecttype.People,
 .coveo-icon.objecttype.people,
@@ -1584,21 +1595,6 @@ Code generated by scripts/postinstall.js DO NOT EDIT
   background-size: 56px 64px;
 }
 
-.coveo-filetype-slack,
-.coveo-icon.filetype.Slackmessage,
-.coveo-icon.filetype.slackmessage,
-.coveo-icon.filetype.Slackchannel,
-.coveo-icon.filetype.slackchannel,
-.coveo-icon.filetype.Slackfile,
-.coveo-icon.filetype.slackfile,
-.coveo-icon.filetype.Slackuser,
-.coveo-icon.filetype.slackuser {
-  display: inline-block;
-  width: 124px;
-  height: 124px;
-  background-size: 124px 124px;
-}
-
 .coveo-filetype-attachment-small,
 .coveo-icon.objecttype.coveo-small.Attachment,
 .coveo-icon.objecttype.coveo-small.attachment,
@@ -2124,6 +2120,15 @@ Code generated by scripts/postinstall.js DO NOT EDIT
 .coveo-filetype-salesforce-standard-work-order-item-small,
 .coveo-filetype-salesforce-standard-work-order-small,
 .coveo-filetype-salesforce-standard-work-type-small,
+.coveo-filetype-slack-small,
+.coveo-icon.filetype.coveo-small.Slackmessage,
+.coveo-icon.filetype.coveo-small.slackmessage,
+.coveo-icon.filetype.coveo-small.Slackchannel,
+.coveo-icon.filetype.coveo-small.slackchannel,
+.coveo-icon.filetype.coveo-small.Slackfile,
+.coveo-icon.filetype.coveo-small.slackfile,
+.coveo-icon.filetype.coveo-small.Slackuser,
+.coveo-icon.filetype.coveo-small.slackuser,
 .coveo-filetype-user-small,
 .coveo-icon.objecttype.coveo-small.People,
 .coveo-icon.objecttype.coveo-small.people,
@@ -2332,21 +2337,6 @@ Code generated by scripts/postinstall.js DO NOT EDIT
   background-size: 28px 32px;
 }
 
-.coveo-filetype-slack-small,
-.coveo-icon.filetype.coveo-small.Slackmessage,
-.coveo-icon.filetype.coveo-small.slackmessage,
-.coveo-icon.filetype.coveo-small.Slackchannel,
-.coveo-icon.filetype.coveo-small.slackchannel,
-.coveo-icon.filetype.coveo-small.Slackfile,
-.coveo-icon.filetype.coveo-small.slackfile,
-.coveo-icon.filetype.coveo-small.Slackuser,
-.coveo-icon.filetype.coveo-small.slackuser {
-  display: inline-block;
-  width: 62px;
-  height: 62px;
-  background-size: 62px 62px;
-}
-
 .coveo-filetype-attachment,
 .coveo-icon.objecttype.Attachment,
 .coveo-icon.objecttype.attachment,
@@ -8065,6 +8055,13 @@ select.coveo-dropdown::-ms-expand {
 * @param $size size of the icon to use
 */
 
+@font-face {
+  font-family: 'Lato';
+  src: url('https://static.cloud.coveo.com/searchui/v2.10104/0/fonts/lato.woff2'), url('https://staticdev.cloud.coveo.com/searchui/v2.10104/0/fonts/lato.woff2'), url('../fonts/lato.woff2'), url('https://static.cloud.coveo.com/searchui/v2.10104/0/fonts/lato.woff'), url('https://staticdev.cloud.coveo.com/searchui/v2.10104/0/fonts/lato.woff'), url('../fonts/lato.woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
 .CoveoSearchInterface {
   min-height: 100%;
   position: relative;
@@ -18738,6 +18735,10 @@ button.coveo-user-feedback-banner-explain-why-active {
 * @param $size size of the icon to use
 */
 
+.coveo-user-explanation-modal .coveo-small-close {
+  display: none;
+}
+
 .coveo-user-explanation-modal-explanation-section {
   display: flex;
   flex-wrap: wrap;

package/src/modules/dx/searchResults/searchResults.html

@@ -94,7 +94,7 @@
                     <dx-pagination
                         current-page={currentPage}
                         total-pages={totalPages}
-                        onpagechange={goToPage}
+                        onpagechange={onPageChange}
                         pages-to-show="5"
                     ></dx-pagination>
                 </div>

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

@@ -110,11 +110,16 @@ export default class SearchResults extends LightningElement {
     private currentPage: number = 1;
     private totalPages: number = 1;
 
-    private goToPage(e: CustomEvent) {
+    private onPageChange(e: CustomEvent) {
+        // go to the page
         const page = e.detail;
-        const Pager = Coveo.get(this.root!.querySelector(".CoveoPager") as HTMLElement) as any;
+        const Pager = Coveo.get(
+            this.root!.querySelector(".CoveoPager") as HTMLElement
+        ) as any;
         Pager.setPage(page);
         this.currentPage = page;
+
+        setTimeout(this.appendTypeBadges, 0);
     }
 
     private dismissFiltersOverlay = () => {
@@ -125,18 +130,23 @@ export default class SearchResults extends LightningElement {
     };
 
     private attachListeners(root: HTMLElement) {
-        Coveo.$$(root).on(Coveo.InitializationEvents.afterInitialization, () => {
-            if (this._query !== "") {
-                Coveo.state(this.root!, "q", this.searchQuery);
+        Coveo.$$(root).on(
+            Coveo.InitializationEvents.afterInitialization,
+            () => {
+                if (this._query !== "") {
+                    Coveo.state(this.root!, "q", this.searchQuery);
+                }
+                if (Coveo.state(this.root!, "q") === "") {
+                    Coveo.state(this.root!, "sort", "date descending");
+                }
+                this.isInitialized = true;
             }
-            if (Coveo.state(this.root!, "q") === "") {
-                Coveo.state(this.root!, "sort", "date descending");
-            }
-            this.isInitialized = true;
-        });
+        );
 
         Coveo.$$(root).on(Coveo.QueryEvents.querySuccess, (event: any) => {
-            const { currentPage, numberOfPages } = getPaginationState(event.detail);
+            const { currentPage, numberOfPages } = getPaginationState(
+                event.detail
+            );
             this.currentPage = currentPage;
             this.totalPages = numberOfPages;
             this.totalResults = event.detail.results.totalCount;
@@ -164,17 +174,27 @@ export default class SearchResults extends LightningElement {
 
         this.attachListeners(this.root);
 
-        let variantValue = "";
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "badge",
+            (value: string) => `<div class="type-badge-shell ${value}"></div>`
+        );
 
-        Coveo.TemplateHelpers.registerTemplateHelper("badge", (value: string) => {
-            variantValue = value;
-        });
+        Coveo.init(this.root);
+    }
 
-        const typeBadgeEl = document.createElement("dx-type-badge");
-        typeBadgeEl.setAttribute("variant", variantValue);
-        this.template.querySelector(".CoveoFieldValue");
+    appendTypeBadges = () => {
+        this.template.querySelectorAll(".type-badge-shell")?.forEach((el) => {
+            el.classList.remove("type-badge-shell");
+            el.classList.forEach((cl) => {
+                const typeBadge = document.createElement("dx-type-badge");
+                typeBadge.setAttribute("variant", cl);
+                el.appendChild(typeBadge);
+            });
+        });
+    };
 
-        Coveo.init(this.root);
+    connectedCallback(): void {
+        setInterval(this.appendTypeBadges, 60);
     }
 
     renderedCallback() {