@coveops/abi 0.1.0

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

@@ -0,0 +1,69 @@
+<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-excerpt {
+    font-size: 13px;
+    margin-top:2px !important;
+  }
+
+  atomic-result-link a:visited {
+    color: #45130f !important;
+
+  }
+
+  atomic-result-section-bottom-metadata {
+    color: darkgray !important;
+    font-weight: bold;
+    margin-right: 3px;
+    margin-right: 2px;
+    font-size: 14px;
+    line-height: 18px !important;
+  }
+
+  atomic-result-date {
+    font-size: 13px;
+    justify-self: end;
+  }
+
+  atomic-result-section-title a {
+    color: #b11f24 !important;
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+</style>
+
+<atomic-result-section-visual>
+  <atomic-icon class="icon"></atomic-icon>
+  <img src="https://abiglobal--c.vf.force.com/resource/PP_Coveo/img/Default.png" class="thumbnail">
+</atomic-result-section-visual>
+
+<atomic-result-section-title>
+  <div class="title-date">
+    <atomic-result-link></atomic-result-link>
+    <atomic-result-date></atomic-result-date>
+  </div>
+</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-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/results-manager.tsx

@@ -0,0 +1,64 @@
+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/
+ */
+@Component({
+  tag: "results-manager",
+  shadow: false,
+})
+export class ResultsManager {
+  public async componentWillLoad() {
+    return waitForAtomic();
+  }
+
+  public render() {
+
+
+    return (
+      <atomic-result-list>
+        <atomic-result-template must-match-abicontenttype="Site Pages">
+        <template innerHTML={SitePagesTemplate}></template>
+      </atomic-result-template>
+        <atomic-result-template must-match-abicontenttype="Knowledge Article">
+          <template innerHTML={KATemplate}></template>
+        </atomic-result-template>
+      <atomic-result-template must-match-abicontenttype='FAQ'>
+        <template innerHTML={FAQTemplate}></template>
+      </atomic-result-template>
+      <atomic-result-template must-match-abicontenttype='Quick Links'>
+        <template innerHTML={QuickLinksTemplate}></template>
+      </atomic-result-template>
+      <atomic-result-template must-match-abicontenttype='Application'>
+        <template innerHTML={AppTemplate}></template>
+      </atomic-result-template>
+      <atomic-result-template must-match-abicontenttype='eLearning'>
+        <template innerHTML={ELearningTemplate}></template>
+      </atomic-result-template>
+      <atomic-result-template must-match-abicontenttype='People'>
+        <template innerHTML={PeopleTemplate}></template>
+      </atomic-result-template>
+      <atomic-result-template must-match-abicontenttype='Documents'>
+        <template innerHTML={DocumentsTemplate}></template>
+      </atomic-result-template>
+      <atomic-result-template must-match-abicontenttype='Media'>
+        <template innerHTML={MediaTemplate}></template>
+        </atomic-result-template>
+        <atomic-result-template>
+          <template innerHTML={template1}></template>
+        </atomic-result-template>
+      </atomic-result-list>
+    );
+  }
+}

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

@@ -0,0 +1,67 @@
+<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-excerpt {
+    font-size: 13px;
+    margin-top:2px !important;
+  }
+
+  atomic-result-link a:visited {
+    color: #45130f !important;
+
+  }
+
+  atomic-result-section-bottom-metadata {
+    color: darkgray !important;
+    font-weight: bold;
+    margin-right: 3px;
+    font-size: 14px;
+    line-height: 18px !important;
+  }
+
+  atomic-result-date {
+    font-size: 13px;
+    justify-self: end;
+  }
+
+  atomic-result-section-title a {
+    color: #b11f24 !important;
+    font-size: 13px;
+    font-weight: 600;
+  }
+</style>
+
+<atomic-result-section-visual>
+  <atomic-icon class="icon"></atomic-icon>
+  <img src="https://abiglobal--c.vf.force.com/resource/PP_Coveo/img/Default.png" class="thumbnail">
+</atomic-result-section-visual>
+
+<atomic-result-section-title>
+  <div class="title-date">
+    <atomic-result-link></atomic-result-link>
+    <atomic-result-date></atomic-result-date>
+  </div>
+</atomic-result-section-title>
+
+<atomic-result-section-excerpt>
+  <atomic-result-text field="excerpt"></atomic-result-text>
+</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/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/src/components/sample-component/sample-component.tsx

@@ -0,0 +1,157 @@
+import { Bindings, initializeBindings } from "@coveo/atomic";
+import { Component, Element, h, State, forceUpdate } from "@stencil/core";
+import {
+  PagerState,
+  Pager,
+  SearchStatusState,
+  buildSearchStatus,
+  buildPager,
+  Unsubscribe,
+} 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.
+ */
+@Component({
+  tag: "sample-component",
+  styleUrl: "sample-component.css",
+  shadow: true,
+})
+export class SampleComponent {
+  // The Atomic bindings to be resolved on the parent atomic-search-interface.
+  // Used to access the Headless engine in order to create controllers, dispatch actions, access state, etc.
+  private bindings?: Bindings;
+
+  // We recommend recording possible errors thrown during the configuration.
+  private error?: Error;
+
+  // Headless controller that contains the necessary methods.
+  private pagerController!: Pager;
+
+  // When disconnecting components from the page, we recommend removing
+  // state change listeners as well by calling the unsubscribe methods.
+  private pagerUnsubscribe: Unsubscribe = () => {};
+  private statusUnsubscribe: Unsubscribe = () => {};
+  private i18nUnsubscribe = () => {};
+
+  @Element() private host!: Element;
+
+  // Headless controller state property, using the `@State()` decorator.
+  // Headless will automatically update these objects when the state related
+  // to the controller has changed.
+  @State() private pagerState!: PagerState;
+  @State() private statusState!: SearchStatusState;
+
+  // 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.
+  public 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 as Error;
+    }
+  }
+
+  // The `disconnectedCallback` lifecycle method should be used to unsubcribe controllers and
+  // possibly the i18n language change listener.
+  public disconnectedCallback() {
+    this.pagerUnsubscribe();
+    this.statusUnsubscribe();
+    this.i18nUnsubscribe();
+  }
+
+  private get pages() {
+    const pages = this.pagerState!.currentPages;
+    return pages.map((page) => this.buildPage(page));
+  }
+
+  private buildPage(page: number) {
+    const isSelected = this.pagerController.isCurrentPage(page);
+    return (
+      <button
+        onClick={() => {
+          this.pagerController.selectPage(page);
+        }}
+      >
+        {isSelected ? "✓ " : ""}
+        {page.toLocaleString(this.bindings!.i18n.language)}
+      </button>
+    );
+  }
+
+  private get previous() {
+    return (
+      <button
+        onClick={() => {
+          this.pagerController.previousPage();
+        }}
+      >
+        <atomic-text value="previous"></atomic-text>
+      </button>
+    );
+  }
+
+  private get next() {
+    return (
+      <button
+        onClick={() => {
+          this.pagerController.nextPage();
+        }}
+      >
+        <atomic-text value="next"></atomic-text>
+      </button>
+    );
+  }
+
+  public render() {
+    if (this.error) {
+      return (
+        <p>
+          Error when initializing the component, please view the console for
+          more information.
+        </p>
+      );
+    }
+
+    if (!this.bindings || !this.statusState.hasResults) {
+      return;
+    }
+
+    return (
+      <nav>
+        {this.pagerState.hasPreviousPage && this.previous}
+        {this.pages}
+        {this.pagerState.hasNextPage && this.next}
+      </nav>
+    );
+  }
+}

package/src/components.d.ts

@@ -0,0 +1,63 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+export namespace Components {
+    interface FaqPopupComponent {
+    }
+    interface ResultsManager {
+    }
+    interface SampleComponent {
+    }
+}
+declare global {
+    interface HTMLFaqPopupComponentElement extends Components.FaqPopupComponent, HTMLStencilElement {
+    }
+    var HTMLFaqPopupComponentElement: {
+        prototype: HTMLFaqPopupComponentElement;
+        new (): HTMLFaqPopupComponentElement;
+    };
+    interface HTMLResultsManagerElement extends Components.ResultsManager, HTMLStencilElement {
+    }
+    var HTMLResultsManagerElement: {
+        prototype: HTMLResultsManagerElement;
+        new (): HTMLResultsManagerElement;
+    };
+    interface HTMLSampleComponentElement extends Components.SampleComponent, HTMLStencilElement {
+    }
+    var HTMLSampleComponentElement: {
+        prototype: HTMLSampleComponentElement;
+        new (): HTMLSampleComponentElement;
+    };
+    interface HTMLElementTagNameMap {
+        "faq-popup-component": HTMLFaqPopupComponentElement;
+        "results-manager": HTMLResultsManagerElement;
+        "sample-component": HTMLSampleComponentElement;
+    }
+}
+declare namespace LocalJSX {
+    interface FaqPopupComponent {
+    }
+    interface ResultsManager {
+    }
+    interface SampleComponent {
+    }
+    interface IntrinsicElements {
+        "faq-popup-component": FaqPopupComponent;
+        "results-manager": ResultsManager;
+        "sample-component": SampleComponent;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "faq-popup-component": LocalJSX.FaqPopupComponent & JSXBase.HTMLAttributes<HTMLFaqPopupComponentElement>;
+            "results-manager": LocalJSX.ResultsManager & JSXBase.HTMLAttributes<HTMLResultsManagerElement>;
+            "sample-component": LocalJSX.SampleComponent & JSXBase.HTMLAttributes<HTMLSampleComponentElement>;
+        }
+    }
+}

package/src/html.d.ts

@@ -0,0 +1,4 @@
+declare module "*.html" {
+  const content: string;
+  export default content;
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+import { waitForAtomic } from "./utils/atomic";
+
+async function main() {
+  await waitForAtomic();
+  const searchInterface: HTMLAtomicSearchInterfaceElement =
+    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/src/pages/index.html

@@ -0,0 +1,137 @@
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!--
+      Modifying any <head> attributes of the page locally (including the title attribute) will have no effect when the page is uploaded to the Coveo platform.
+      If you wish to modify the page title, you should modify the `name` property defined in the coveo.deploy.json configuration file.
+    -->
+  <title>Abi</title>
+  <link href="/atomic/themes/coveo.css" rel="stylesheet" />
+  <link href="/build/abi.css" rel="stylesheet" />
+  <!-- 
+      When using the Coveo CDN - Make sure you're using the same minor version as the packaged Atomic.
+      E.g., if you have "@coveo/atomic@2.0.0" installed, use the "/atomic/v2.0.0/" path.
+      When deploying with the Coveo CLI, the Atomic CDN defined in the coveo.deploy.json configuration file will be used.
+    
+      <script type="module" src="https://static.cloud.coveo.com/atomic/vMAJOR.MINOR/atomic.esm.js"></script> 
+    -->
+  <script type="module" src="/atomic/atomic.esm.js"></script>
+  <!-- Custom Elements Lazy Loading -->
+  <script type="module" src="/build/abi.esm.js"></script>
+  <!-- Global initialization script -->
+  <script type="module" src="/build/index.esm.js"></script>
+</head>
+
+<body>
+  <!-- 
+      This is a non-functional element.
+      Contents of this element will be parsed and injected in the bundle's HTML when deploying.
+    -->
+  <style>
+    atomic-search-box::part(wrapper) {
+      border-radius: 30px;
+      border: thin solid #7e8c9a;
+    }
+
+    atomic-search-box::part(submit-button) {
+      background-color: white;
+      border: thin solid #7e8c9a;
+      border-radius: 0px 30px 30px 0px;
+    }
+
+    atomic-search-box::part(submit-icon) {
+      color: black;
+    }
+
+    atomic-pager::part(active-page-button) {
+      background-color: #1d4f76;
+      color: #cddee9;
+
+    }
+
+    atomic-pager::part(page-button) {
+      color: #cddee9;
+    }
+
+    atomic-pager::part(page-button) {
+      border: thin solid #7e8c9a;
+      border-radius: 0px;
+    }
+    atomic-modal#faq-modal::part(header-wrapper) {
+      display: grid;
+      width: 100%;
+      padding-right: 0px !important;
+      }
+    atomic-modal#faq-modal::part(container) {  
+      width: 155%;
+      }
+  </style>
+  <atomic-hosted-page>
+    <atomic-search-interface fields-to-include='[
+      "sfcaseid", "sfppcustomlinkcpplinkurlc", "sfcaseppstatus", "sfcaseppstatusc", "sfcasestatus", 
+      "sfppcustomlinkcppiconc", "sfcasenumber", "sfcaseppprocessc", "sfppleaveabsencecppactiontypec", 
+      "sfppleaveabsencecppactionreasonc", "sfppleaveabsencecppenddatecfq", "sfppleaveabsencecppenddatecfy", 
+      "sfppleaveabsencecppstartdatecfq", "sfppleaveabsencecppstartdatecfy", "sfppleaveabsencecppstartdatec", 
+      "sfppleaveabsencecppenddatec", "sfrecordtypename", "sfcasepprequesterc", "sfcaseemployeec", 
+      "sfppourcompanylinkdetailcppcontentc", "sfppourcompanylinkdetailcid", "sfppcustomlinkname", "sfppcustomlinkid", 
+      "sfppmyteamcppemployeenumberc", "sfppmyteamcpppositionc", "sfppmyteamcppemailc", "sfppmyteamcppphonenumberc", 
+      "sfppmyteamcppmanagersemployeenumberc", "sfppmyteamcppmanagersnamec", "function", "owner", "businessunit", 
+      "datesubmitted", "bestpracticezone", "connectortype", "clickUri", "zone", "roadmap", "strategy", "sfkeywordc", 
+      "spitemtype", "splistbasetype", "splisttype", "title", "searchablemeta", "totalNumberOfChildResults", 
+      "moreinformation", "picture", "targettab", "targettemplate", "metatype", "resultimage", "sfppzonec", 
+      "sfppemployeeworklocationc", "sfppbusinessfunctionc", "sfpersonemail", "sfpppositontitlec", "istailoredmappingtype", 
+      "resultpicture", "abicontenttype", "containsattachment", "spsitename", "spsiteuri", "attachmentfilename", "parents", 
+      "sysparents", "description", "answer","newmoreinfo", "filetype","sfppcustomlinkcppdescriptionc","trainingsource","function","category","sfpersonemail","sfppbusinessfunctionc","sfppemployeeworklocationc","duration"
+  ]'><atomic-modal id="faq-modal" is-open="false">
+    <div slot="header" style="display: grid;grid-template-columns: 5fr 01fr; width:100%;">
+      <div class="header-title" style="padding-top:4%;">This is a title</div>
+      <div id="faq-modal-close"  style="text-align: end;">
+        <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>
+     
+    </div>
+    <div slot="body">This is the body</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">
+          <atomic-search-box></atomic-search-box>
+        </atomic-layout-section>
+        <!-- <atomic-layout-section section="facets">
+            <atomic-facet-manager>
+              <atomic-facet field="filetype" label="Filetype"></atomic-facet>
+              <atomic-facet field="source" label="Source"></atomic-facet>
+            </atomic-facet-manager>
+          </atomic-layout-section> -->
+        <atomic-layout-section section="main">
+          <atomic-layout-section section="status">
+            <atomic-breadbox></atomic-breadbox>
+            <atomic-query-summary enable-duration="true"></atomic-query-summary>
+            <atomic-refine-toggle></atomic-refine-toggle>
+            <atomic-sort-dropdown>
+              <atomic-sort-expression label="relevance" expression="relevancy"></atomic-sort-expression>
+              <atomic-sort-expression label="most-recent" expression="date descending"></atomic-sort-expression>
+            </atomic-sort-dropdown>
+            <atomic-did-you-mean></atomic-did-you-mean>
+          </atomic-layout-section>
+          <atomic-layout-section section="results">
+            <results-manager></results-manager>
+            <atomic-query-error></atomic-query-error>
+            <atomic-no-results></atomic-no-results>
+          </atomic-layout-section>
+          <atomic-layout-section section="pagination">
+            <atomic-pager></atomic-pager>
+          </atomic-layout-section>
+        </atomic-layout-section>
+      </atomic-search-layout>
+    </atomic-search-interface>
+  </atomic-hosted-page>
+</body>
+
+</html>

package/src/style/index.css

@@ -0,0 +1,12 @@
+
+body {
+  margin: 0;
+
+}
+
+atomic-modal#faq-modal::part(header-wrapper) {
+display: grid;
+width: 100%;
+padding-right: 0px !important;
+}
+

package/src/utils/atomic.ts

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

package/stencil.config.ts

@@ -0,0 +1,63 @@
+import { Config } from "@stencil/core";
+import dotenvPlugin from "rollup-plugin-dotenv";
+import html from "rollup-plugin-html";
+import replace from "@rollup/plugin-replace";
+
+// https://stenciljs.com/docs/config
+
+export const config: Config = {
+  namespace: "abi",
+  globalStyle: "src/style/index.css",
+  taskQueue: "async",
+  outputTargets: [
+    {
+      type: "www",
+      serviceWorker: null, // disable service workers
+      copy: [
+        { src: "pages", keepDirStructure: false },
+        {
+          src: "../node_modules/@coveo/atomic/dist/atomic",
+          dest: "atomic",
+          keepDirStructure: false,
+        },
+      ],
+    },
+    {
+      type: "dist",
+    },
+    {
+      type: "dist-custom-elements-bundle",
+      minify: false,
+      includeGlobalScripts: true,
+      externalRuntime: false,
+      inlineDynamicImports: false,
+      dir: "dist/components",
+    },
+    /*
+    If migrating to Stencil v3, the "dist-custom-elements-bundle" output target should be replaced by the following:
+    {
+      type: "dist-custom-elements",
+      customElementsExportBehavior: "bundle",
+      minify: false,
+      includeGlobalScripts: true,
+      generateTypeDeclarations: false,
+      externalRuntime: false,
+    },
+    */
+  ],
+  plugins: [
+    dotenvPlugin(),
+    replace({
+      "process.env.PLATFORM_URL": `'${process.env.PLATFORM_URL}'`,
+      "process.env.ORGANIZATION_ID": `'${process.env.ORGANIZATION_ID}'`,
+      "process.env.API_KEY": `'${process.env.API_KEY}'`,
+    }),
+  ],
+  rollupPlugins: {
+    before: [
+      html({
+        include: "src/components/**/*.html",
+      }),
+    ],
+  },
+};