@coveops/abi 0.1.0

package/dist/collection/collection-manifest.json

@@ -0,0 +1,19 @@
+{
+  "entries": [
+    "./components/faq-popup-component/faq-popup-component.js",
+    "./components/results-manager/results-manager.js",
+    "./components/sample-component/sample-component.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.17.3",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [
+    {
+      "name": "@coveo/atomic",
+      "tags": []
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/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/dist/collection/components/faq-popup-component/faq-popup-component.js

@@ -0,0 +1,78 @@
+import { Component, h, Element, State, Host } from "@stencil/core";
+import { resultContext, initializeBindings } from "@coveo/atomic";
+export class FaqPopupComponent {
+  constructor() {
+    this.closeFAQModal = () => {
+      this.modalElement.setAttribute('is-open', 'false');
+      this.modalElement.querySelector('#btn-done').removeEventListener('click', this.closeFAQModal);
+    };
+  }
+  // We recommended fetching the result context using the `connectedCallback` lifecycle method
+  // with async/await. Using `componentWillLoad` will hang the parent `atomic-search-interface` initialization.
+  async connectedCallback() {
+    var _a;
+    try {
+      this.bindings = await initializeBindings(this.host);
+      this.result = await resultContext(this.host);
+      this.modalElement = (_a = this.bindings) === null || _a === void 0 ? void 0 : _a.interfaceElement.querySelector('#faq-modal');
+      console.log("this.result", this.result, this.modalElement, this.bindings);
+    }
+    catch (error) {
+      console.error(error);
+      this.host.remove();
+    }
+  }
+  openFAQModal() {
+    var _a, _b, _c, _d;
+    this.modalElement.source = this.host;
+    this.modalElement.querySelector('[slot=header]').children[0].innerHTML = 'Question: ' + (((_a = this.result) === null || _a === void 0 ? void 0 : _a.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 = ((_b = this.result) === null || _b === void 0 ? void 0 : _b.raw.answer) || '';
+    // 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: ' + (((_c = this.result) === null || _c === void 0 ? void 0 : _c.raw.category) || '');
+    bodySlot.appendChild(categoryElement);
+    const linkElement = document.createElement('div');
+    const linkUrl = ((_d = this.result) === null || _d === void 0 ? void 0 : _d.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');
+  }
+  render() {
+    if (!this.result) {
+      return;
+    }
+    return (h(Host, { className: "clickable-host", onClick: () => this.openFAQModal() }, this.result.title));
+  }
+  static get is() { return "faq-popup-component"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["faq-popup-component.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["faq-popup-component.css"]
+  }; }
+  static get states() { return {
+    "result": {}
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/results-manager/results-manager.js

@@ -0,0 +1,45 @@
+import { Component, h } from "@stencil/core";
+import { waitForAtomic } from "../../utils/atomic";
+import template1 from "./template-1.html";
+import SitePagesTemplate from "./SitePagesTemplate.html";
+import KATemplate from "./KATemplate.html";
+import FAQTemplate from "./FAQTemplate.html";
+import QuickLinksTemplate from "./QuickLinksTemplate.html";
+import AppTemplate from "./AppTemplate.html";
+import ELearningTemplate from "./ELearningTemplate.html";
+import PeopleTemplate from "./PeopleTemplate.html";
+import DocumentsTemplate from "./DocumentsTemplate.html";
+import MediaTemplate from "./MediaTemplate.html";
+/**
+ * Component used to manage results & result templates.
+ * See https://docs.coveo.com/en/atomic/latest/usage/create-a-result-list/
+ */
+export class ResultsManager {
+  async componentWillLoad() {
+    return waitForAtomic();
+  }
+  render() {
+    return (h("atomic-result-list", null,
+      h("atomic-result-template", { "must-match-abicontenttype": "Site Pages" },
+        h("template", { innerHTML: SitePagesTemplate })),
+      h("atomic-result-template", { "must-match-abicontenttype": "Knowledge Article" },
+        h("template", { innerHTML: KATemplate })),
+      h("atomic-result-template", { "must-match-abicontenttype": 'FAQ' },
+        h("template", { innerHTML: FAQTemplate })),
+      h("atomic-result-template", { "must-match-abicontenttype": 'Quick Links' },
+        h("template", { innerHTML: QuickLinksTemplate })),
+      h("atomic-result-template", { "must-match-abicontenttype": 'Application' },
+        h("template", { innerHTML: AppTemplate })),
+      h("atomic-result-template", { "must-match-abicontenttype": 'eLearning' },
+        h("template", { innerHTML: ELearningTemplate })),
+      h("atomic-result-template", { "must-match-abicontenttype": 'People' },
+        h("template", { innerHTML: PeopleTemplate })),
+      h("atomic-result-template", { "must-match-abicontenttype": 'Documents' },
+        h("template", { innerHTML: DocumentsTemplate })),
+      h("atomic-result-template", { "must-match-abicontenttype": 'Media' },
+        h("template", { innerHTML: MediaTemplate })),
+      h("atomic-result-template", null,
+        h("template", { innerHTML: template1 }))));
+  }
+  static get is() { return "results-manager"; }
+}

package/dist/collection/components/sample-component/sample-component.css

@@ -0,0 +1,10 @@
+nav {
+  width: 300px;
+  display: flex;
+  justify-content: space-around;
+}
+
+button {
+  color: var(--atomic-on-primary);
+  background-color: var(--atomic-primary);
+}

package/dist/collection/components/sample-component/sample-component.js

@@ -0,0 +1,102 @@
+import { initializeBindings } from "@coveo/atomic";
+import { Component, Element, h, State, forceUpdate } from "@stencil/core";
+import { buildSearchStatus, buildPager, } from "@coveo/headless";
+import { waitForAtomic } from "../../utils/atomic";
+/**
+ * Sample custom Atomic component, initializing itself against a parent search interface in order to retrieve the bindings.
+ *
+ * This component showcases a custom-made pagination component, for educational purposes.
+ *
+ * In a real life scenario, we recommend using either [atomic-pager](https://docs.coveo.com/en/atomic/latest/reference/components/atomic-pager/) or [atomic-load-more-results](https://docs.coveo.com/en/atomic/latest/reference/components/atomic-load-more-results/) instead.
+ */
+export class SampleComponent {
+  constructor() {
+    // When disconnecting components from the page, we recommend removing
+    // state change listeners as well by calling the unsubscribe methods.
+    this.pagerUnsubscribe = () => { };
+    this.statusUnsubscribe = () => { };
+    this.i18nUnsubscribe = () => { };
+  }
+  // We recommend initializing the bindings and the Headless controllers
+  // using the `connectedCallback` lifecycle method with async/await.
+  // Using `componentWillLoad` will hang the parent atomic-search-interface initialization.
+  async connectedCallback() {
+    try {
+      // Wait for the Atomic to load and bindings to be resolved.
+      await waitForAtomic();
+      this.bindings = await initializeBindings(this.host);
+      // Initialize controllers.
+      const statusController = buildSearchStatus(this.bindings.engine);
+      this.pagerController = buildPager(this.bindings.engine);
+      // Subscribe to controller state changes.
+      this.statusUnsubscribe = statusController.subscribe(() => (this.statusState = statusController.state));
+      this.pagerUnsubscribe = this.pagerController.subscribe(() => (this.pagerState = this.pagerController.state));
+      // (Optional) To use if component needs to rerender when the Atomic i18n language changes.
+      // If your component does not use any strings or does not support multiple languages,
+      // you can ignore everything related to i18n.
+      const updateLanguage = () => forceUpdate(this);
+      this.bindings.i18n.on("languageChanged", updateLanguage);
+      this.i18nUnsubscribe = () => this.bindings.i18n.off("languageChanged", updateLanguage);
+    }
+    catch (error) {
+      console.error(error);
+      this.error = error;
+    }
+  }
+  // The `disconnectedCallback` lifecycle method should be used to unsubcribe controllers and
+  // possibly the i18n language change listener.
+  disconnectedCallback() {
+    this.pagerUnsubscribe();
+    this.statusUnsubscribe();
+    this.i18nUnsubscribe();
+  }
+  get pages() {
+    const pages = this.pagerState.currentPages;
+    return pages.map((page) => this.buildPage(page));
+  }
+  buildPage(page) {
+    const isSelected = this.pagerController.isCurrentPage(page);
+    return (h("button", { onClick: () => {
+        this.pagerController.selectPage(page);
+      } },
+      isSelected ? "✓ " : "",
+      page.toLocaleString(this.bindings.i18n.language)));
+  }
+  get previous() {
+    return (h("button", { onClick: () => {
+        this.pagerController.previousPage();
+      } },
+      h("atomic-text", { value: "previous" })));
+  }
+  get next() {
+    return (h("button", { onClick: () => {
+        this.pagerController.nextPage();
+      } },
+      h("atomic-text", { value: "next" })));
+  }
+  render() {
+    if (this.error) {
+      return (h("p", null, "Error when initializing the component, please view the console for more information."));
+    }
+    if (!this.bindings || !this.statusState.hasResults) {
+      return;
+    }
+    return (h("nav", null,
+      this.pagerState.hasPreviousPage && this.previous,
+      this.pages,
+      this.pagerState.hasNextPage && this.next));
+  }
+  static get is() { return "sample-component"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["sample-component.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sample-component.css"]
+  }; }
+  static get states() { return {
+    "pagerState": {},
+    "statusState": {}
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/index.js

@@ -0,0 +1,15 @@
+import { waitForAtomic } from "./utils/atomic";
+async function main() {
+  await waitForAtomic();
+  const searchInterface = document.querySelector("atomic-search-interface");
+  const platformUrl = process.env.PLATFORM_URL;
+  const organizationId = process.env.ORGANIZATION_ID;
+  const accessToken = process.env.API_KEY;
+  await searchInterface.initialize({
+    accessToken,
+    organizationId,
+    platformUrl,
+  });
+  searchInterface.executeFirstSearch();
+}
+main();

package/dist/collection/utils/atomic.js

@@ -0,0 +1,3 @@
+export function waitForAtomic() {
+  return customElements.whenDefined("atomic-search-interface");
+}

package/dist/components/index.d.ts

@@ -0,0 +1,57 @@
+/* abi custom elements bundle */
+
+import type { Components, JSX } from "../types/html";
+
+interface FaqPopupComponent extends Components.FaqPopupComponent, HTMLElement {}
+export const FaqPopupComponent: {
+  prototype: FaqPopupComponent;
+  new (): FaqPopupComponent;
+};
+
+interface ResultsManager extends Components.ResultsManager, HTMLElement {}
+export const ResultsManager: {
+  prototype: ResultsManager;
+  new (): ResultsManager;
+};
+
+interface SampleComponent extends Components.SampleComponent, HTMLElement {}
+export const SampleComponent: {
+  prototype: SampleComponent;
+  new (): SampleComponent;
+};
+
+/**
+ * Utility to define all custom elements within this package using the tag name provided in the component's source. 
+ * When defining each custom element, it will also check it's safe to define by:
+ *
+ * 1. Ensuring the "customElements" registry is available in the global context (window).
+ * 2. The component tag name is not already defined.
+ *
+ * Use the standard [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) 
+ * method instead to define custom elements individually, or to provide a different tag name.
+ */
+export declare const defineCustomElements: (opts?: any) => void;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  ce?: (eventName: string, opts?: any) => CustomEvent;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';