@coveops/abi 0.3.2 → 0.4.1

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");
+}