@coveops/abi 0.1.0

package/dist/types/utils/atomic.d.ts

@@ -0,0 +1 @@
+export declare function waitForAtomic(): Promise<CustomElementConstructor>;

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@coveops/abi",
+  "description": "Abi project",
+  "version": "0.1.0",
+  "private": false,
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/index.js",
+  "scripts": {
+    "start": "stencil build --dev --watch --serve",
+    "build": "stencil build && node deployment.esbuild.mjs",
+    "deploy": "npm run build && coveo ui:deploy"
+  },
+  "dependencies": {
+    "@coveo/atomic": "2.19.16",
+    "@coveo/headless": "2.8.10",
+    "@stencil/core": "2.17.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "5.0.2",
+    "esbuild": "0.17.11",
+    "gts": "3.1.1",
+    "prettier": "2.8.4",
+    "rollup-plugin-dotenv": "0.4.1",
+    "rollup-plugin-html": "0.2.1"
+  },
+  "author": "",
+  "license": "ISC"
+}

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

@@ -0,0 +1,15 @@
+b {
+  color: var(--atomic-primary);
+}
+/* :host {
+  display: block;
+}
+
+.clickable-host {
+  cursor: pointer;
+}
+
+.clickable-host:hover {
+  cursor: pointer;
+  text-decoration: underline; /* Optional: adds underline on hover */
+} */

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

@@ -0,0 +1,102 @@
+
+import { Component, h, Element, State, Host } from "@stencil/core";
+import { resultContext, Bindings, initializeBindings } from "@coveo/atomic";
+
+import {
+  Result
+} from "@coveo/headless";
+
+@Component({
+  tag: "faq-popup-component",
+  styleUrl: "faq-popup-component.css",
+  shadow: true,
+})
+export class FaqPopupComponent {
+
+  private bindings?: Bindings;
+  private modalElement?: any;
+
+  // The Headless result object to be resolved from the parent atomic-result component.
+  @State() private result?: Result;
+  @Element() private host!: Element;
+
+  // We recommended fetching the result context using the `connectedCallback` lifecycle method
+  // with async/await. Using `componentWillLoad` will hang the parent `atomic-search-interface` initialization.
+  public async connectedCallback() {
+
+    try {
+      this.bindings = await initializeBindings(this.host);
+      this.result = await resultContext(this.host);
+      this.modalElement = this.bindings?.interfaceElement.querySelector('#faq-modal');
+      console.log("this.result", this.result, this.modalElement, this.bindings)
+    } catch (error) {
+      console.error(error);
+      this.host.remove();
+    }
+  }
+  private openFAQModal() {
+
+    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';
+
+    // Create the answer title element and set its text
+    const answerTitleElement = document.createElement('div');
+    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;
+
+    // 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);
+
+
+    // Create and append the category element
+    const categoryElement = document.createElement('div');
+    categoryElement.innerHTML = 'Category: ' + (this.result?.raw.category || '');
+    bodySlot.appendChild(categoryElement);
+
+
+
+
+    const linkElement = document.createElement('div');
+    const linkUrl = this.result?.raw.newmoreinfo || '';
+    linkElement.innerHTML = `Link: <a href="${linkUrl}" target="_blank">${linkUrl}</a>`;
+    bodySlot.appendChild(linkElement);
+
+    this.modalElement.querySelector('#faq-modal-close').addEventListener('click', this.closeFAQModal);
+    this.modalElement.setAttribute('is-open', 'true');
+  }
+  private closeFAQModal: Function = () => {
+    this.modalElement.setAttribute('is-open', 'false');
+    this.modalElement.querySelector('#btn-done').removeEventListener('click', this.closeFAQModal);
+  }
+  public render() {
+    if (!this.result) {
+      return;
+    }
+
+    return (
+      <Host className="clickable-host" onClick={() => this.openFAQModal()}>
+        {this.result.title}
+      </Host>
+    );
+  }
+}

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

@@ -0,0 +1,44 @@
+<style>
+  .field {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .field-label {
+    font-weight: bold;
+    margin-right: 0.25rem;
+  }
+
+  .title-date {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+  }
+
+  atomic-result-section-title a {
+    color: #b11f24 !important;
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  atomic-result-section-excerpt {
+    font-size: 13px;
+    margin-top: 2px !important;
+  }
+
+  atomic-result-link a:visited {
+    color: #45130f !important;
+  }
+</style>
+
+<atomic-result-section-visual>
+  <atomic-icon class="icon"></atomic-icon>
+  <img src="https://abiglobal--c.vf.force.com/resource/PP_Coveo/img/ProcessPeople.png" class="thumbnail">
+</atomic-result-section-visual>
+
+<atomic-result-section-title>
+  <atomic-result-link href-template='${raw.sfppcustomlinkcpplinkurlc}'></atomic-result-link>
+</atomic-result-section-title>
+<!-- sfppcustomlinkcpplinkurlc -->
+<atomic-result-section-excerpt>
+  <atomic-result-html field="sfppcustomlinkcppdescriptionc"></atomic-result-html>
+</atomic-result-section-excerpt>

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

@@ -0,0 +1,37 @@
+<style>
+  .field {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .field-label {
+    font-weight: bold;
+    margin-right: 0.25rem;
+  }
+  atomic-result-section-excerpt{
+    margin-top:2px !important;
+  }
+  atomic-result-section-bottom-metadata{
+    margin-top: 2px;
+  }
+</style>
+
+<atomic-result-section-visual>
+
+  <atomic-icon class="icon"></atomic-icon>
+  <img src="  https://abiglobal--c.vf.force.com/resource/PP_Coveo/img/Documents.png" class="thumbnail">
+</atomic-result-section-visual>
+
+<atomic-result-section-title>
+  <atomic-result-link></atomic-result-link>
+</atomic-result-section-title>
+
+<atomic-result-section-excerpt>
+  <atomic-result-html field="excerpt"></atomic-result-html>
+</atomic-result-section-excerpt>
+
+<atomic-result-section-bottom-metadata>
+  <atomic-result-fields-list>
+    <atomic-result-link><atomic-result-text field="PrintableUri"></atomic-result-text></atomic-result-link>
+  </atomic-result-fields-list>
+</atomic-result-section-bottom-metadata>

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

@@ -0,0 +1,81 @@
+<style>
+  .field {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .field-label {
+    font-weight: bold;
+    margin-right: 0.25rem;
+  }
+
+  atomic-result-section-bottom-metadata {
+    color: darkgray !important;
+    font-weight: bold;
+    margin-right: 3px;
+    margin-top: 2px;
+    font-size: 14px;
+    line-height: 18px !important;
+  }
+
+  atomic-result-section-title a {
+    color: #b11f24 !important;
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  atomic-result-section-excerpt {
+    font-size: 13px;
+    margin-top: 2px !important;
+  }
+
+  atomic-result-link a:visited {
+    color: #b11f24 !important;
+
+  }
+</style>
+
+<atomic-result-section-visual>
+  <atomic-icon class="icon"></atomic-icon>
+  <img src="https://abiglobal--c.vf.force.com/resource/PP_Coveo/img/Link.png" class="thumbnail">
+</atomic-result-section-visual>
+
+<atomic-result-section-title>
+  <atomic-result-link></atomic-result-link>
+</atomic-result-section-title>
+
+<atomic-result-section-excerpt>
+  <atomic-result-text field="description"></atomic-result-text>
+</atomic-result-section-excerpt>
+
+<atomic-result-section-bottom-metadata>
+  <atomic-result-fields-list>
+    <atomic-field-condition class="field" if-defined="trainingsource">
+      <span class="field-label">
+        <atomic-text value="Training"></atomic-text>:
+      </span>
+      <atomic-result-text field="trainingsource"></atomic-result-text>
+    </atomic-field-condition>
+
+    <atomic-field-condition class="field" if-defined="function">
+      <span class="field-label">
+        <atomic-text value="Function"></atomic-text>:
+      </span>
+      <atomic-result-text field="function"></atomic-result-text>
+    </atomic-field-condition>
+
+    <atomic-field-condition class="field" if-defined="category">
+      <span class="field-label">
+        <atomic-text value="Category"></atomic-text>:
+      </span>
+      <atomic-result-multi-value-text field="category"></atomic-result-multi-value-text>
+    </atomic-field-condition>
+
+    <atomic-field-condition class="field" if-defined="duration">
+      <span class="field-label">
+        <atomic-text value="Duration"></atomic-text>:
+      </span>
+      <atomic-result-text field="duration"></atomic-result-text>
+    </atomic-field-condition>
+  </atomic-result-fields-list>
+</atomic-result-section-bottom-metadata>

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

@@ -0,0 +1,73 @@
+<style>
+  .field {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .field-label {
+    font-weight: bold;
+    margin-right: 0.25rem;
+  }
+
+  atomic-result-section-excerpt {
+    font-size: 13px;
+    margin-top: 2px !important;
+  }
+
+  atomic-text {
+    color: darkgray !important;
+    font-weight: bold;
+    margin-right: 3px;
+    font-size: 14px;
+    line-height: 18px !important;
+  }
+
+  atomic-result-link a:visited {
+    color: #45130f !important;
+
+  }
+
+  atomic-result-section-title a {
+    color: #b11f24 !important;
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  atomic-result-link a {
+    color: #b11f24;
+  }
+
+  atomic-result-section-bottom-metadata {
+    margin-top: 2px;
+  }
+  atomic-result-section-title{
+    cursor: pointer;
+    
+  }
+
+  atomic-result-section-title:hover {
+  cursor: pointer;
+  text-decoration: underline; /* Optional: adds underline on hover */
+}
+
+</style>
+
+<atomic-result-section-visual>
+  <atomic-icon class="icon"></atomic-icon>
+  <img src="https://abiglobal--c.vf.force.com/resource/PP_Coveo/img/FAQ.png" class="thumbnail">
+</atomic-result-section-visual>
+
+<atomic-result-section-title>
+  <faq-popup-component></faq-popup-component>
+</atomic-result-section-title>
+
+<atomic-result-section-excerpt>
+  <atomic-result-html field="answer"></atomic-result-html>
+</atomic-result-section-excerpt>
+
+<atomic-result-section-bottom-metadata>
+  <atomic-result-fields-list>
+    <atomic-result-link><atomic-result-text field="PrintableUri"></atomic-result-text></atomic-result-link>
+  </atomic-result-fields-list>
+  
+</atomic-result-section-bottom-metadata>

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

@@ -0,0 +1,84 @@
+<style>
+  .field {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .field-label {
+    font-weight: bold;
+    margin-right: 0.25rem;
+  }
+
+
+  atomic-result-section-excerpt {
+    font-size: 13px;
+    margin-top:2px !important;
+  }
+  atomic-text {
+    color: darkgray !important;
+    font-weight: bold;
+    margin-right: 3px;
+    font-size: 14px;
+    line-height: 18px !important;
+  }
+
+  atomic-result-link a:visited {
+    color: #45130f !important;
+
+  }
+
+  atomic-result-section-bottom-metadata{
+    margin-top: 2px;
+  }
+
+  atomic-result-section-title a {
+    color: #b11f24 !important;
+    font-size: 13px;
+    font-weight: 600;
+  }
+  atomic-result-link a{
+    color: #b11f24;
+  }
+
+</style>
+
+<atomic-result-section-visual>
+<atomic-field-condition class="field" must-match-source="ServiceNow - Knowledge">
+  <atomic-icon class="icon"></atomic-icon>
+  <img src="https://abiglobal--c.vf.force.com/resource/PP_Coveo/img/Default.png" class="thumbnail">
+</atomic-field-condition>
+  <atomic-field-condition class="field" must-match-source="Salesforce - Guru UAT">
+  <atomic-icon class="icon"></atomic-icon>
+  <img src="https://abiglobal--c.vf.force.com/resource/PP_Coveo/img/FAQ.png" class="thumbnail">
+</atomic-field-condition>
+</atomic-result-section-visual>
+
+
+
+<atomic-result-section-title>
+  <atomic-result-link></atomic-result-link>
+</atomic-result-section-title>
+
+<atomic-result-section-excerpt>
+  <atomic-field-condition class="field" must-match-source="ServiceNow - Knowledge">
+    <atomic-result-text field="excerpt"></atomic-result-text>
+  </atomic-field-condition>
+  
+  <atomic-field-condition class="field" must-match-source="Salesforce - Guru UAT">
+    <atomic-result-text field="answer"></atomic-result-text>
+
+  </atomic-field-condition>
+</atomic-result-section-excerpt>
+
+<atomic-result-section-bottom-metadata>
+  <atomic-result-fields-list>
+    <atomic-field-condition class="field" must-match-source="ServiceNow - Knowledge">
+      <atomic-result-link><atomic-result-text field="PrintableUri"></atomic-result-text></atomic-result-link>
+    </atomic-field-condition>
+   
+    <atomic-field-condition class="field" must-match-source="Salesforce - Guru UAT">
+      <atomic-result-link><atomic-text value="Guru > Articles"></atomic-text></atomic-result-link> 
+    </atomic-field-condition>
+   </atomic-result-fields-list>
+  
+</atomic-result-section-bottom-metadata>

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

@@ -0,0 +1,40 @@
+<style>
+  .field {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .field-label {
+    font-weight: bold;
+    margin-right: 0.25rem;
+  }
+  atomic-result-section-excerpt{
+    margin-top:2px !important;
+  }
+  atomic-result-section-bottom-metadata{
+    margin-top: 2px;
+  }
+</style>
+
+<atomic-result-section-visual>
+  <atomic-field-condition class="field" must-match-filetype="mp4,wmv,avi,MOV,flv,mkv,webm,ogg,ogv,m4v">
+    <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">
+    <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>
+  
+</atomic-result-section-visual>
+
+<atomic-result-section-title>
+  <atomic-result-link></atomic-result-link>
+</atomic-result-section-title>
+
+
+<atomic-result-section-bottom-metadata>
+  <atomic-result-fields-list>
+      <atomic-result-text field="PrintableUri"></atomic-result-text>
+  </atomic-result-fields-list>
+</atomic-result-section-bottom-metadata>

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

@@ -0,0 +1,74 @@
+<style>
+  .field {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .field-label {
+    font-weight: bold;
+    margin-right: 0.25rem;
+  }
+
+  atomic-result-section-bottom-metadata{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    width: 45%;
+    margin-top: 2px;
+  }
+  atomic-result-section-excerpt{
+    margin-top:2px !important;
+  }
+  atomic-result-section-title a {
+    color: #b11f24 !important;
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+</style>
+
+<atomic-result-section-visual>
+  <atomic-result-image field="resultpicture"></atomic-result-image>
+</atomic-result-section-visual>
+
+<atomic-result-section-title>
+</atomic-result-section-title>
+
+<atomic-result-section-bottom-metadata>
+
+    <atomic-field-condition class="field" if-defined="sfpppositontitlec">
+      <span class="field-label">
+        <atomic-text value="Title"></atomic-text>:
+      </span>
+      <atomic-result-text field="sfpppositontitlec"></atomic-result-text>
+    </atomic-field-condition>
+    <br>
+    <atomic-field-condition class="field" if-defined="sfppzonec">
+      <span class="field-label">
+        <atomic-text value="Zone"></atomic-text>:
+      </span>
+      <atomic-result-text field="sfppzonec"></atomic-result-text>
+    </atomic-field-condition>
+ 
+    <atomic-field-condition class="field" if-defined="sfppemployeeworklocationc">
+      <span class="field-label">
+        <atomic-text value="OfficeLocation"></atomic-text>:
+      </span>
+      <atomic-result-text field="sfppemployeeworklocationc"></atomic-result-text>
+    </atomic-field-condition>
+    <atomic-field-condition class="field" if-defined="sfppbusinessfunctionc">
+      <span class="field-label">
+        <atomic-text value="Function"></atomic-text>:
+      </span>
+      <atomic-result-text field="sfppbusinessfunctionc"></atomic-result-text>
+    </atomic-field-condition>
+
+    <atomic-field-condition class="field" if-defined="sfpersonemail">
+      <span class="field-label">
+        <atomic-text value="Email"></atomic-text>:
+      </span>
+      <atomic-result-text field="sfpersonemail"></atomic-result-text>
+    </atomic-field-condition>
+
+
+
+</atomic-result-section-bottom-metadata>

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

@@ -0,0 +1,51 @@
+<style>
+  .field {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .field-label {
+    font-weight: bold;
+    margin-right: 0.25rem;
+  }
+.title-date{
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+}
+atomic-result-section-title a{
+  color: #b11f24 !important;
+  font-size: 13px;
+  font-weight: 600;
+  }
+  atomic-result-section-excerpt{
+    font-size: 13px; 
+    margin-top:2px !important;
+    }
+    atomic-result-link a:visited{
+  color: #b11f24 !important;
+
+}
+ 
+atomic-result-link a:visited {
+  color: #45130f !important;
+
+}
+</style>
+
+<atomic-result-section-visual>
+  <atomic-icon class="icon"></atomic-icon>
+  <img src="https://abiglobal--c.vf.force.com/resource/PP_Coveo/img/ProcessPeople.png" class="thumbnail">
+</atomic-result-section-visual>
+
+<atomic-result-section-title>
+
+  <atomic-result-link href-template='${raw.sfppcustomlinkcpplinkurlc}'></atomic-result-link>
+
+</div>
+</atomic-result-section-title>
+<!-- sfppcustomlinkcpplinkurlc -->
+<atomic-result-section-excerpt>
+  <atomic-result-html field="description"></atomic-result-html>
+</atomic-result-section-excerpt>
+
+