@coveops/abi 0.6.0 → 0.8.0

package/dist/esm/sample-component.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement, f as forceUpdate } from './index-8b0b351b.js';
+import { r as registerInstance, h, g as getElement, f as forceUpdate } from './index-99665e7c.js';
 import { i as initializeBindings, n as nw, D as DI } from './index-42e9a708.js';
 import { w as waitForAtomic } from './atomic-0e957d02.js';
 import './headless.esm-085e70ed-c4dfb380.js';

package/dist/esm/strip-html-component.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-8b0b351b.js';
+import { r as registerInstance, h, g as getElement } from './index-99665e7c.js';
 import './headless.esm-085e70ed-c4dfb380.js';
 import { r as resultContext } from './result-template-decorators-881a4c8e-ed85ad21.js';
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coveops/abi",
   "description": "Abi project",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "private": false,
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/src/components/faq-popup-component/faq-popup-component.tsx

@@ -44,47 +44,63 @@ export class FaqPopupComponent {
 
   private openFAQModal(result: Result) {
     if(this.bindings){
-    const { logClickEvent } = loadGenericAnalyticsActions (this.bindings.engine);
-    const logClickPayload : LogClickEventActionCreatorPayload= { 
-      evt: 'documentQuickview',
-      result: result,
+      const { logClickEvent } = loadGenericAnalyticsActions (this.bindings.engine);
+      const logClickPayload : LogClickEventActionCreatorPayload= { 
+        evt: 'documentQuickview',
+        result: result,
+      }
+      this.bindings.engine.dispatch(logClickEvent(logClickPayload))
     }
-    this.bindings.engine.dispatch(logClickEvent(logClickPayload))
-  }
     this.modalElement.source = this.host; 
-    this.modalElement.querySelector('[slot=header]').children[0].innerHTML = 'Question: ' + (this.result?.title || '');
     // Get the body slot
     const bodySlot = this.modalElement.querySelector('[slot=body]');
 
     // Clear any existing content
     bodySlot.innerHTML = '';
 
-    const answerElement = document.createElement('div');
-    answerElement.style.display = 'flex';
-    answerElement.style.gap = '16px';
+    const tableEl = document.createElement('table');
+
+    const questionElement = document.createElement("tr");
+    questionElement.className = "question-row";
+    questionElement.innerHTML = '<td>Question: </td> <td>' + (this.result?.title || '') + '</td>'
+        +'<div id="faq-modal-close-button"><svg width="48" height="49" viewBox="0 0 48 49" fill="black" xmlns="http://www.w3.org/2000/svg"><rect y="0.5" width="48" height="48" rx="24" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M22.5382 24.5L15 16.9618L16.4618 15.5L24 23.0382L31.5382 15.5L33 16.9618L25.4618 24.5L33 32.0382L31.5382 33.5L24 25.9618L16.4618 33.5L15 32.0382L22.5382 24.5Z" fill="#17171A"/></svg></div>';
 
+    tableEl.appendChild(questionElement);
+
+    const answerElement = document.createElement('tr');
+    
     // Create the answer title element and set its text
-    const answerTitleElement = document.createElement('div');
+    const answerTitleElement = document.createElement('td');
     answerTitleElement.innerText = 'Answer:';
     answerElement.appendChild(answerTitleElement);
 
-    // Get the answer from the result object
-    const answerContent = this.result?.raw.answer as string || '';
-
     // Create a new element to contain the answer content
-    const answerContentElement = document.createElement('div');
-    answerContentElement.innerHTML = answerContent;
+    const answerContentElement = document.createElement('td');
+    answerContentElement.innerHTML = this.result?.raw.answer as string || '';
 
     // Append the answer content element to the answer element
     answerElement.appendChild(answerContentElement);
 
     // Now, the answer element has the title and the content properly appended
 
-    bodySlot.appendChild(answerElement);
+    tableEl.appendChild(answerElement);
 
 
+    if(this.result?.raw.category) {
+      const categoryElement = document.createElement("tr");
+      categoryElement.innerHTML = '<td> Category: </td><td>'+ this.result.raw.category + '</td>';
+      tableEl.appendChild(categoryElement);
+    }
+
+    if(this.result?.raw.newmoreinfo) {
+      const linkElement = document.createElement("tr");
+      const linkUrl = this.result.raw.newmoreinfo;
+      linkElement.innerHTML = '<td> Link: </td><td> <a href="'+linkUrl+'" target="_blank">'+linkUrl+'</a> </td>';
+      tableEl.appendChild(linkElement);
+    }
+
     // Create and append the category element
-    const categoryElement = document.createElement('div');
+    /*const categoryElement = document.createElement('div');
     categoryElement.innerHTML = 'Category: ' + (this.result?.raw.category || '');
     bodySlot.appendChild(categoryElement);
 
@@ -94,9 +110,11 @@ export class FaqPopupComponent {
     const linkElement = document.createElement('div');
     const linkUrl = this.result?.raw.newmoreinfo || '';
     linkElement.innerHTML = `Link: <a href="${linkUrl}" target="_blank">${linkUrl}</a>`;
-    bodySlot.appendChild(linkElement);
+    bodySlot.appendChild(linkElement);*/
+
+    bodySlot.appendChild(tableEl);
 
-    this.modalElement.querySelector('#faq-modal-close').addEventListener('click', this.closeFAQModal);
+    this.modalElement.querySelector('#faq-modal-close-button').addEventListener('click', this.closeFAQModal);
     this.modalElement.setAttribute('is-open', 'true');
 
     if (this.result) {

package/src/components/results-manager/AppTemplate.html

@@ -41,7 +41,7 @@
 </style>
 
 <atomic-result-section-visual>
-  <img src="../images/ProcessPeople.png" alt="Image" />
+  <img src="https://cdn.jsdelivr.net/npm/@coveops/abi@latest/dist/abi/images/ProcessPeople.png" alt="Image" />
 
   <!-- <atomic-icon class="icon"></atomic-icon>
   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="38" height="35" viewBox="0 0 60 50">

package/src/components/results-manager/DocumentsTemplate.html

@@ -58,7 +58,7 @@
 </style>
 
 <atomic-result-section-visual>
-  <img src="../images/Documents.png" alt="Image" />
+  <img src="https://cdn.jsdelivr.net/npm/@coveops/abi@latest/dist/abi/images/Documents.png" alt="Image" />
   <!-- <atomic-icon class="icon"></atomic-icon>
   <?xml version="1.0" encoding="UTF-8"?>
   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 55 50">

package/src/components/results-manager/ELearningTemplate.html

@@ -45,7 +45,7 @@
 </style>
 
 <atomic-result-section-visual>
-  <img src="../images/Link.png" alt="Image" />
+  <img src="https://cdn.jsdelivr.net/npm/@coveops/abi@latest/dist/abi/images/Link.png" alt="Image" />
 
   <!-- <atomic-icon class="icon"></atomic-icon>
   <?xml version="1.0" encoding="UTF-8"?>

package/src/components/results-manager/FAQTemplate.html

@@ -73,7 +73,7 @@ atomic-result-section-visual {
 </style>
 
 <atomic-result-section-visual>
-  <img src="../images/FAQ.png" alt="Image" />
+  <img src="https://cdn.jsdelivr.net/npm/@coveops/abi@latest/dist/abi/images/FAQ.png" alt="Image" />
   <!-- <atomic-icon class="icon"></atomic-icon>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="45px" viewBox="0 0 50 45" version="1.1">
     <g id="surface1">

package/src/components/results-manager/KATemplate.html

@@ -56,7 +56,7 @@
 
 <atomic-result-section-visual>
 <atomic-field-condition  must-match-source="ServiceNow - Knowledge">
-  <img src="../images/Default.png" alt="Image" />
+  <img src="https://cdn.jsdelivr.net/npm/@coveops/abi@latest/dist/abi/images/Default.png" alt="Image" />
   <!-- <atomic-icon class="icon"></atomic-icon>  <?xml version="1.0" encoding="UTF-8"?>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="55px" height="55px" viewBox="0 0 65 65" version="1.1">
   <g id="surface1">
@@ -90,7 +90,7 @@
   </svg> -->
 </atomic-field-condition>
   <atomic-field-condition class="field" must-match-source="Salesforce - Guru">
-    <img src="../images/FAQ.png" alt="Image" />
+    <img src="https://cdn.jsdelivr.net/npm/@coveops/abi@latest/dist/abi/images/FAQ.png" alt="Image" />
 
   <!-- <atomic-icon class="icon"></atomic-icon>
 

package/src/components/results-manager/MediaTemplate.html

@@ -44,12 +44,12 @@
 
 <atomic-result-section-visual>
   <atomic-field-condition class="field" must-match-filetype="mp4,wmv,avi,MOV,flv,mkv,webm,ogg,ogv,m4v">
-    <img src="../images/Images.png" alt="Image" />
+    <img src="https://cdn.jsdelivr.net/npm/@coveops/abi@latest/dist/abi/images/Images.png" alt="Image" />
     <!-- <atomic-icon class="icon"></atomic-icon>
     <img src="https://abiglobal--c.vf.force.com/resource/PP_Coveo/img/Movies.png" class="thumbnail"> -->
   </atomic-field-condition>
   <atomic-field-condition class="field" must-match-filetype="gif,jpeg,jpg,png,bmp,Image,mp3,mp4,wmv,avi,MOV,flv,mkv,webm,ogg,ogv,m4v">
-    <img src="../images/Movies.png" alt="Image" />
+    <img src="https://cdn.jsdelivr.net/npm/@coveops/abi@latest/dist/abi/images/Movies.png" alt="Image" />
     <!-- <atomic-icon class="icon"></atomic-icon>
     <img src="https://abiglobal--c.vf.force.com/resource/PP_Coveo/img/Images.png" class="thumbnail"> -->
   </atomic-field-condition>

package/src/components/results-manager/QuickLinksTemplate.html

@@ -56,7 +56,7 @@
     <path d="M0 0 C3.43595166 1.52708963 6.11912454 3.59927045 9 6 C8.01 6.66 7.02 7.32 6 8 C4.02 6.35 2.04 4.7 0 3 C-0.99 4.485 -0.99 4.485 -2 6 C-2.66 6 -3.32 6 -4 6 C-4 5.01 -4 4.02 -4 3 C-2 1.3125 -2 1.3125 0 0 Z " fill="#DFDFDF" transform="translate(28,34)"></path>
     <path d="M0 0 C1 3 1 3 1 5 C2.45833358 6.62514468 2.45833358 6.62514468 4 8 C3.34 9.32 2.68 10.64 2 12 C0.00449854 10.00449854 -0.81376393 8.52075165 -2 6 C-2.37125 5.2575 -2.7425 4.515 -3.125 3.75 C-3.41375 3.1725 -3.7025 2.595 -4 2 C-2.68 1.34 -1.36 0.68 0 0 Z " fill="#C6C6C6" transform="translate(36,28)"></path>
     </svg> -->
-    <img src="../images/ProcessPeople.png" alt="Image" />
+    <img src="https://cdn.jsdelivr.net/npm/@coveops/abi@latest/dist/abi/images/ProcessPeople.png" alt="Image" />
 
 </atomic-result-section-visual>
 

package/src/components/results-manager/SitePagesTemplate.html

@@ -69,7 +69,7 @@
 </style>
 
 <atomic-result-section-visual>
-  <img src="../images/Default.png" alt="Image" />
+  <img src="https://cdn.jsdelivr.net/npm/@coveops/abi@latest/dist/abi/images/Default.png" alt="Image" />
   <!-- <atomic-icon class="icon"></atomic-icon>
   <?xml version="1.0" encoding="UTF-8"?>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="55px" height="55px" viewBox="0 0 65 65" version="1.1">

package/src/components/results-manager/template-1.html

@@ -56,7 +56,7 @@
 </style>
 
 <atomic-result-section-visual>
-  <img src="../images/Default.png" alt="Image" />
+  <img src="https://cdn.jsdelivr.net/npm/@coveops/abi@latest/dist/abi/images/Default.png" alt="Image" />
   <!-- <atomic-icon class="icon"></atomic-icon>
   <?xml version="1.0" encoding="UTF-8"?>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="55px" height="55px"

package/src/pages/index.html

@@ -60,7 +60,7 @@
      
     </div>
     <div slot="body" style="max-width: none;">This is the body</div>
-    <!-- <div slot="footer"><button id="btn-done">Done</button></div> -->
+    <div slot="footer"><button id="btn-done">Done</button></div>
   </atomic-modal>
       <atomic-search-layout>
         <atomic-layout-section style="justify-self:center" section="search">

package/src/style/index.css

@@ -4,12 +4,6 @@ body {
 
 }
 
-atomic-modal#faq-modal::part(header-wrapper) {
-display: grid;
-width: 100%;
-padding-right: 0px !important;
-}
-
 atomic-search-box::part(wrapper) {
   border-radius: 30px;
   border: thin solid #7e8c9a;
@@ -51,28 +45,67 @@ atomic-pager::part(page-button):hover {
   cursor: pointer;
 }
 
-atomic-modal#faq-modal::part(header-wrapper) {
-  display: grid;
-  width: 100%;
-  padding-right: 0px !important;
-  }
-
-
 atomic-result-section-visual {
     height: 6rem !important;
     width: 3rem !important;
 }
 
+atomic-modal#faq-modal::part(header-wrapper) {
+  display: none;
+}
 atomic-modal::part(backdrop){
   grid-template-columns: none !important;
 }
 atomic-modal::part(header){
   max-width: none;
-  }
+}
+atomic-modal::part(body-wrapper) {
+  padding: 0;
+}
 atomic-modal::part(body){
   max-width: none;
-  }
+}
+
+atomic-modal::part(footer),
+atomic-modal::part(footer-wrapper) {
+  display: none;
+}
+
+atomic-modal#faq-modal table {
+  width: -moz-available;          /* WebKit-based browsers will ignore this. */
+  width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
+  width: fill-available;
+  border-collapse: collapse;
+  font-size: 1.3rem;
+}
+
+atomic-modal#faq-modal table tr.question-row {
+  border-bottom: 1px solid #a6a6a6;
+}
+
+atomic-modal#faq-modal table tr {
+  vertical-align: top;
+}
+
+atomic-modal#faq-modal table tr td {
+  padding: 1.5rem;
+}
+atomic-modal#faq-modal table tr td a {
+  color: #caa144;
+}
+
+
+atomic-modal#faq-modal #faq-modal-close-button {
+  cursor: pointer;
+  top: 0;
+  right: 1.5rem;
+  position: absolute;
+}
+
+atomic-search-box::part(recent-query-text), 
+atomic-search-box::part(input), 
+atomic-search-box::part(query-suggestion-text) {
+  font-size: 1.3rem !important
+}
+
 
-  atomic-search-box::part(recent-query-text), 
-  atomic-search-box::part(input), 
-  atomic-search-box::part(query-suggestion-text) {font-size: 1.3rem !important}