@searchcraft/javascript-sdk 0.7.1 → 0.8.0

package/dist/collection/components/searchcraft-base-search-results/searchcraft-base-search-results.js

@@ -1,6 +1,6 @@
 import { h, } from "@stencil/core";
 import { useSearchcraftStore } from "../../provider/store";
-import { getDocumentValueFromSearchResultMapping, serializeStyles, } from "../../utils/index";
+import { serializeStyles } from "../../utils/index";
 /**
  * This web component is responsible for displaying the results of a search query.
  * Once a query is submitted, the component formats and presents an ordered list of the results.
@@ -34,10 +34,6 @@ import { getDocumentValueFromSearchResultMapping, serializeStyles, } from "../..
  * ```
  */
 export class SearchcraftBaseSearchResults {
-    /**
-     * How often ads are injected.
-     */
-    adInterval = 4;
     /**
      * A custom styles object.
      */
@@ -46,14 +42,6 @@ export class SearchcraftBaseSearchResults {
      * Formats the content rendered for each result.
      */
     searchResultMappings;
-    /**
-     * Should an ad be placed at the end of the results.
-     */
-    placeAdAtEnd = false;
-    /**
-     * Should an ad be placed at the start of the results.
-     */
-    placeAdAtStart = true;
     /**
      * The placement of the image for each result.
      */
@@ -82,109 +70,52 @@ export class SearchcraftBaseSearchResults {
      * When no results are returned.
      */
     noResults;
-    hasSearched = false;
-    query = '';
-    searchResults = null;
+    searchTerm = '';
+    searchClientResponseItems = [];
+    adClientResponseItems = [];
+    searchResultsPerPage;
+    searchResultsPage;
     unsubscribe = () => { };
     componentDidLoad() {
-        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
-            if (state.query.length > 0) {
-                this.hasSearched = true;
-            }
-            else {
-                this.hasSearched = false;
-            }
-            this.searchResults = { ...state.searchResults };
-            this.query = state.query;
-        });
-        const { searchResults, query } = useSearchcraftStore.getState();
-        this.searchResults = searchResults;
-        this.query = query;
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => this.handleStateChange(state));
+        const currentState = useSearchcraftStore.getState();
+        this.searchClientResponseItems = currentState.searchClientResponseItems;
+        this.searchTerm = currentState.searchTerm;
     }
     disconnectedCallback() {
-        if (this.unsubscribe) {
-            this.unsubscribe();
-        }
+        this.unsubscribe?.();
     }
-    renderDocument(document, index) {
-        /**
-         * Index field values -> Result container props mappings.
-         */
-        const titleContent = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings?.title);
-        const subtitleContent = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings?.subtitle);
-        const bodyContent = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings?.body);
-        const containerHref = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings?.containerHref);
-        const buttonHref = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings?.buttonHref);
-        const imageSource = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings?.imageSource);
-        const footerContent = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings?.footer);
-        let serializedStyles = '';
-        if (this.customStylesForResults) {
-            serializedStyles =
-                typeof this.customStylesForResults === 'string'
-                    ? this.customStylesForResults
-                    : serializeStyles(this.customStylesForResults);
-        }
-        return (h("searchcraft-base-search-result", { key: `${document.document_id}-${index}`, "custom-styles": serializedStyles, "image-placement": this.resultImagePlacement, "container-rel": this.containerRel, "container-target": this.containerTarget, "button-label": this.buttonLabel || 'View more', "button-rel": this.buttonRel, "button-target": this.buttonTarget, "document-position": index, "title-content": titleContent, "subtitle-content": subtitleContent, "body-content": bodyContent, "footer-content": footerContent, "container-href": containerHref, "button-href": buttonHref, "image-src": imageSource }));
+    handleStateChange(state) {
+        this.searchClientResponseItems = [...state.searchClientResponseItems];
+        this.adClientResponseItems = [...state.adClientResponseItems];
+        this.searchTerm = state.searchTerm;
+        this.searchResultsPage = state.searchResultsPage;
+        this.searchResultsPerPage = state.searchResultsPerPage;
     }
     render() {
-        if (this.query.trim() === '') {
+        if (this.searchTerm.trim() === '') {
             return (h("div", { class: 'searchcraft-search-results-empty-state-container' }, h("slot", { name: 'empty-search' })));
         }
-        if (!this.searchResults?.data) {
+        if (this.searchClientResponseItems.length === 0) {
             return;
         }
-        const documents = this.searchResults?.data?.hits?.map((data, _index) => {
-            const { doc: result } = data;
-            return result;
-        });
-        const finalComponents = [];
-        if (this.placeAdAtStart) {
-            finalComponents.push(h("div", { key: 'ad-section-start', class: 'searchcraft-ad-section' }, h("p", null, "Ad Section")));
-        }
-        if (this.adInterval > 0) {
-            documents.forEach((document, index) => {
-                finalComponents.push(this.renderDocument(document, index));
-                if ((index + 1) % this.adInterval === 0) {
-                    finalComponents.push(h("div", { key: `ad-section-${index + 1}`, class: 'searchcraft-ad-section ' }, h("p", null, "Ad Section")));
-                }
-            });
-        }
-        else {
-            const documentElements = documents.map((document, index) => this.renderDocument(document, index));
-            finalComponents.push(...documentElements);
-        }
-        if (this.placeAdAtEnd) {
-            finalComponents.push(h("div", { key: 'ad-section-end', class: 'searchcraft-ad-section' }, h("p", null, "Ad Section")));
-        }
-        if (this.query.length > 0 && this.searchResults?.data?.hits?.length === 0) {
+        if (this.searchTerm.length > 0 &&
+            this.searchClientResponseItems.length === 0) {
             this.noResults?.emit();
         }
-        return (h("div", { class: 'searchcraft-search-results-container' }, finalComponents, this.query.length > 0 &&
-            this.searchResults?.data?.hits?.length === 0 && (h("div", { class: 'searchcraft-search-results-error-message-container' }, h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` })))));
+        let serializedStyles = '';
+        if (this.customStylesForResults) {
+            serializedStyles =
+                typeof this.customStylesForResults === 'string'
+                    ? this.customStylesForResults
+                    : serializeStyles(this.customStylesForResults);
+        }
+        return (h("div", { class: 'searchcraft-search-results-container' }, this.adClientResponseItems?.map((item) => (h("searchcraft-base-search-result-ad", { adClientResponseItem: item, key: item.adId }))), this.searchClientResponseItems?.map((item, index) => (h("searchcraft-base-search-result", { key: item.id, "custom-styles": serializedStyles, "image-placement": this.resultImagePlacement, "container-rel": this.containerRel, "container-target": this.containerTarget, "button-label": this.buttonLabel || 'View more', "button-rel": this.buttonRel, "button-target": this.buttonTarget, "document-position": this.searchResultsPerPage * this.searchResultsPage + index, searchResultMappings: this.searchResultMappings, item: item }))), this.searchTerm.length > 0 &&
+            this.searchClientResponseItems.length === 0 && (h("div", { class: 'searchcraft-search-results-error-message-container' }, h("searchcraft-error-message", { "error-message": `No search results found for "${this.searchTerm}" query` })))));
     }
     static get is() { return "searchcraft-base-search-results"; }
     static get properties() {
         return {
-            "adInterval": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "How often ads are injected."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "ad-interval",
-                "reflect": false,
-                "defaultValue": "4"
-            },
             "customStylesForResults": {
                 "type": "string",
                 "mutable": false,
@@ -218,8 +149,8 @@ export class SearchcraftBaseSearchResults {
                     "references": {
                         "SearchResultMappings": {
                             "location": "import",
-                            "path": "types",
-                            "id": "src/types/index.ts::SearchResultMappings"
+                            "path": "@searchcraft/core",
+                            "id": "../core-sdk/dist/index.d.ts::SearchResultMappings"
                         }
                     }
                 },
@@ -232,46 +163,6 @@ export class SearchcraftBaseSearchResults {
                 "getter": false,
                 "setter": false
             },
-            "placeAdAtEnd": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Should an ad be placed at the end of the results."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "place-ad-at-end",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "placeAdAtStart": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Should an ad be placed at the start of the results."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "place-ad-at-start",
-                "reflect": false,
-                "defaultValue": "true"
-            },
             "resultImagePlacement": {
                 "type": "string",
                 "mutable": false,
@@ -393,9 +284,11 @@ export class SearchcraftBaseSearchResults {
     }
     static get states() {
         return {
-            "hasSearched": {},
-            "query": {},
-            "searchResults": {}
+            "searchTerm": {},
+            "searchClientResponseItems": {},
+            "adClientResponseItems": {},
+            "searchResultsPerPage": {},
+            "searchResultsPage": {}
         };
     }
     static get events() {

package/dist/collection/components/searchcraft-base-search-results/searchcraft-base-search-results.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-base-search-results.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Event,\n  Prop,\n  State,\n  type EventEmitter,\n} from '@stencil/core';\n\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport {\n  getDocumentValueFromSearchResultMapping,\n  serializeStyles,\n} from '@utils';\nimport type { SearchResultMappings } from 'types';\nimport type { JSX } from '@stencil/core/internal';\n\n/**\n * This web component is responsible for displaying the results of a search query.\n * Once a query is submitted, the component formats and presents an ordered list of the results.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-base-search-results\n *   ad-interval=\"4\"\n *   place-ad-at-start=\"false\"\n *   result-image-placement=\"right\"\n * />\n * ```\n *\n * ```js\n * // index.js\n * const baseSearchResults = document.querySelector('searchcraft-base-search-results');\n *\n * baseSearchResults.searchResultMappings = containerHref: {\n *   fieldNames: [\n *    {\n *      fieldName: 'canonical_link',\n *      dataType: 'text',\n *    },\n *  ],\n * };\n *\n * baseSearchResults.addEventListener('noResults', () => {\n *   console.log('No search results found');\n * });\n * ```\n */\n@Component({\n  tag: 'searchcraft-base-search-results',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchResults {\n  /**\n   * How often ads are injected.\n   */\n  @Prop() adInterval = 4;\n  /**\n   * A custom styles object.\n   */\n  @Prop() customStylesForResults:\n    | string\n    | Record<string, Record<string, string>>\n    | undefined;\n  /**\n   * Formats the content rendered for each result.\n   */\n  @Prop() searchResultMappings: SearchResultMappings | undefined;\n  /**\n   * Should an ad be placed at the end of the results.\n   */\n  @Prop() placeAdAtEnd = false;\n  /**\n   * Should an ad be placed at the start of the results.\n   */\n  @Prop() placeAdAtStart = true;\n  /**\n   * The placement of the image for each result.\n   */\n  @Prop() resultImagePlacement: 'left' | 'right' = 'right';\n  /**\n   * The label for the button rendered when containerHref is not present for each result.\n   */\n  @Prop() buttonLabel: string | undefined;\n  /**\n   * Where to open the link for the button rendered when containerHref is not present for each result.\n   */\n  @Prop() buttonTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  /**\n   * The relationship between the current document and the link for the button rendered when containerHref is not present for each result.\n   */\n  @Prop() buttonRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  /**\n   * Where to open the link for the containing element for each result.\n   */\n  @Prop() containerTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  /**\n   * The relationship between the current document and the link for the containing element for each result.\n   */\n  @Prop() containerRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n\n  /**\n   * When no results are returned.\n   */\n  @Event() noResults?: EventEmitter<void>;\n\n  @State() hasSearched = false;\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  private unsubscribe: () => void = () => {};\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (state.query.length > 0) {\n        this.hasSearched = true;\n      } else {\n        this.hasSearched = false;\n      }\n      this.searchResults = { ...state.searchResults } as SearchcraftResponse;\n      this.query = state.query;\n    });\n\n    const { searchResults, query } = useSearchcraftStore.getState();\n    this.searchResults = searchResults;\n    this.query = query;\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  renderDocument(document: Record<string, unknown>, index: number) {\n    /**\n     * Index field values -> Result container props mappings.\n     */\n    const titleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings?.title,\n    );\n    const subtitleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings?.subtitle,\n    );\n    const bodyContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings?.body,\n    );\n    const containerHref = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings?.containerHref,\n    );\n    const buttonHref = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings?.buttonHref,\n    );\n    const imageSource = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings?.imageSource,\n    );\n    const footerContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings?.footer,\n    );\n\n    let serializedStyles = '';\n    if (this.customStylesForResults) {\n      serializedStyles =\n        typeof this.customStylesForResults === 'string'\n          ? this.customStylesForResults\n          : serializeStyles(this.customStylesForResults);\n    }\n\n    return (\n      <searchcraft-base-search-result\n        key={`${document.document_id}-${index}`}\n        custom-styles={serializedStyles}\n        image-placement={this.resultImagePlacement}\n        container-rel={this.containerRel}\n        container-target={this.containerTarget}\n        button-label={this.buttonLabel || 'View more'}\n        button-rel={this.buttonRel}\n        button-target={this.buttonTarget}\n        document-position={index}\n        title-content={titleContent}\n        subtitle-content={subtitleContent}\n        body-content={bodyContent}\n        footer-content={footerContent}\n        container-href={containerHref}\n        button-href={buttonHref}\n        image-src={imageSource}\n      />\n    );\n  }\n\n  render() {\n    if (this.query.trim() === '') {\n      return (\n        <div class='searchcraft-search-results-empty-state-container'>\n          <slot name='empty-search' />\n        </div>\n      );\n    }\n\n    if (!this.searchResults?.data) {\n      return;\n    }\n\n    const documents: Record<string, unknown>[] =\n      this.searchResults?.data?.hits?.map((data, _index) => {\n        const { doc: result } = data;\n        return result;\n      }) as Record<string, unknown>[];\n\n    const finalComponents: JSX.Element[] = [];\n\n    if (this.placeAdAtStart) {\n      finalComponents.push(\n        <div key='ad-section-start' class='searchcraft-ad-section'>\n          <p>Ad Section</p>\n        </div>,\n      );\n    }\n\n    if (this.adInterval > 0) {\n      documents.forEach((document, index) => {\n        finalComponents.push(this.renderDocument(document, index));\n\n        if ((index + 1) % this.adInterval === 0) {\n          finalComponents.push(\n            <div\n              key={`ad-section-${index + 1}`}\n              class='searchcraft-ad-section '\n            >\n              <p>Ad Section</p>\n            </div>,\n          );\n        }\n      });\n    } else {\n      const documentElements = documents.map((document, index) =>\n        this.renderDocument(document, index),\n      );\n      finalComponents.push(...documentElements);\n    }\n\n    if (this.placeAdAtEnd) {\n      finalComponents.push(\n        <div key='ad-section-end' class='searchcraft-ad-section'>\n          <p>Ad Section</p>\n        </div>,\n      );\n    }\n\n    if (this.query.length > 0 && this.searchResults?.data?.hits?.length === 0) {\n      this.noResults?.emit();\n    }\n\n    return (\n      <div class='searchcraft-search-results-container'>\n        {finalComponents}\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <div class='searchcraft-search-results-error-message-container'>\n              <searchcraft-error-message\n                error-message={`No search results found for \"${this.query}\" query`}\n              />\n            </div>\n          )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-base-search-results.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Event,\n  Prop,\n  State,\n  type EventEmitter,\n} from '@stencil/core';\n\nimport type {\n  AdClientResponseItem,\n  SearchClientResponseItem,\n} from '@searchcraft/core';\n\nimport { type SearchcraftState, useSearchcraftStore } from '@provider/store';\n\nimport { serializeStyles } from '@utils';\nimport type { SearchResultMappings } from '@searchcraft/core';\n\n/**\n * This web component is responsible for displaying the results of a search query.\n * Once a query is submitted, the component formats and presents an ordered list of the results.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-base-search-results\n *   ad-interval=\"4\"\n *   place-ad-at-start=\"false\"\n *   result-image-placement=\"right\"\n * />\n * ```\n *\n * ```js\n * // index.js\n * const baseSearchResults = document.querySelector('searchcraft-base-search-results');\n *\n * baseSearchResults.searchResultMappings = containerHref: {\n *   fieldNames: [\n *    {\n *      fieldName: 'canonical_link',\n *      dataType: 'text',\n *    },\n *  ],\n * };\n *\n * baseSearchResults.addEventListener('noResults', () => {\n *   console.log('No search results found');\n * });\n * ```\n */\n@Component({\n  tag: 'searchcraft-base-search-results',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchResults {\n  /**\n   * A custom styles object.\n   */\n  @Prop() customStylesForResults:\n    | string\n    | Record<string, Record<string, string>>\n    | undefined;\n  /**\n   * Formats the content rendered for each result.\n   */\n  @Prop() searchResultMappings: SearchResultMappings | undefined;\n  /**\n   * The placement of the image for each result.\n   */\n  @Prop() resultImagePlacement: 'left' | 'right' = 'right';\n  /**\n   * The label for the button rendered when containerHref is not present for each result.\n   */\n  @Prop() buttonLabel: string | undefined;\n  /**\n   * Where to open the link for the button rendered when containerHref is not present for each result.\n   */\n  @Prop() buttonTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  /**\n   * The relationship between the current document and the link for the button rendered when containerHref is not present for each result.\n   */\n  @Prop() buttonRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  /**\n   * Where to open the link for the containing element for each result.\n   */\n  @Prop() containerTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  /**\n   * The relationship between the current document and the link for the containing element for each result.\n   */\n  @Prop() containerRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n\n  /**\n   * When no results are returned.\n   */\n  @Event() noResults?: EventEmitter<void>;\n\n  @State() searchTerm = '';\n  @State() searchClientResponseItems: SearchClientResponseItem[] = [];\n  @State() adClientResponseItems: AdClientResponseItem[] = [];\n  @State() searchResultsPerPage;\n  @State() searchResultsPage;\n\n  private unsubscribe: () => void = () => {};\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) =>\n      this.handleStateChange(state),\n    );\n    const currentState = useSearchcraftStore.getState();\n    this.searchClientResponseItems = currentState.searchClientResponseItems;\n    this.searchTerm = currentState.searchTerm;\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n  }\n\n  handleStateChange(state: SearchcraftState) {\n    this.searchClientResponseItems = [...state.searchClientResponseItems];\n    this.adClientResponseItems = [...state.adClientResponseItems];\n    this.searchTerm = state.searchTerm;\n    this.searchResultsPage = state.searchResultsPage;\n    this.searchResultsPerPage = state.searchResultsPerPage;\n  }\n\n  render() {\n    if (this.searchTerm.trim() === '') {\n      return (\n        <div class='searchcraft-search-results-empty-state-container'>\n          <slot name='empty-search' />\n        </div>\n      );\n    }\n\n    if (this.searchClientResponseItems.length === 0) {\n      return;\n    }\n\n    if (\n      this.searchTerm.length > 0 &&\n      this.searchClientResponseItems.length === 0\n    ) {\n      this.noResults?.emit();\n    }\n\n    let serializedStyles = '';\n    if (this.customStylesForResults) {\n      serializedStyles =\n        typeof this.customStylesForResults === 'string'\n          ? this.customStylesForResults\n          : serializeStyles(this.customStylesForResults);\n    }\n\n    return (\n      <div class='searchcraft-search-results-container'>\n        {this.adClientResponseItems?.map((item) => (\n          <searchcraft-base-search-result-ad\n            adClientResponseItem={item}\n            key={item.adId}\n          />\n        ))}\n        {this.searchClientResponseItems?.map((item, index) => (\n          <searchcraft-base-search-result\n            key={item.id}\n            custom-styles={serializedStyles}\n            image-placement={this.resultImagePlacement}\n            container-rel={this.containerRel}\n            container-target={this.containerTarget}\n            button-label={this.buttonLabel || 'View more'}\n            button-rel={this.buttonRel}\n            button-target={this.buttonTarget}\n            document-position={\n              this.searchResultsPerPage * this.searchResultsPage + index\n            }\n            searchResultMappings={this.searchResultMappings}\n            item={item}\n          />\n        ))}\n        {this.searchTerm.length > 0 &&\n          this.searchClientResponseItems.length === 0 && (\n            <div class='searchcraft-search-results-error-message-container'>\n              <searchcraft-error-message\n                error-message={`No search results found for \"${this.searchTerm}\" query`}\n              />\n            </div>\n          )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-button/searchcraft-button.js

@@ -6,10 +6,18 @@ import classNames from "classnames";
  * It is consumed within the `searchcraft-input-form` component.
  */
 export class SearchcraftButton {
+    /**
+     * Controls the visual representation of the button.
+     */
+    hierarchy = 'primary';
+    /**
+     * Whether the button is disabled.
+     */
+    disabled = false;
     /**
      * The icon element.
      */
-    iconElement;
+    icon;
     /**
      * Should the button only display an icon.
      */
@@ -23,20 +31,67 @@ export class SearchcraftButton {
      */
     label = 'Search';
     /**
-     * When the button is clicked.
+     * The type of the button.
+     */
+    type = 'button';
+    /**
+     * The event fired when the button is clicked.
      */
     buttonClick;
-    isRequesting = false;
-    handleClick = () => {
+    handleButtonClick = () => {
         this.buttonClick.emit();
     };
     render() {
-        return (h(Fragment, { key: 'af99927e7c05f06ec9a63123c7f740a0e96e734b' }, this.iconOnly ? (h("button", { class: classNames('searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.isRequesting ? (h("searchcraft-spinner-dark", null)) : (this.iconElement))) : (h("button", { class: classNames('searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.iconPosition === 'left' && this.iconElement, h("span", { class: classNames('buttonLabel', 'searchcraft-button-label') }, this.label)))));
+        return (h("button", { key: 'fc258e1c7aab54611c781789eef7facc074f02c3', class: classNames('searchcraft-button', {
+                'searchcraft-button-primary': this.hierarchy === 'primary',
+                'searchcraft-button-tertiary': this.hierarchy === 'tertiary',
+                'searchcraft-button-disabled': this.disabled,
+            }), disabled: this.disabled, onClick: this.handleButtonClick, type: this.type }, this.iconOnly ? (this.icon) : (h(Fragment, null, this.iconPosition === 'left' && this.icon, h("span", null, this.label), this.iconPosition === 'right' && this.icon))));
     }
     static get is() { return "searchcraft-button"; }
     static get properties() {
         return {
-            "iconElement": {
+            "hierarchy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'tertiary'",
+                    "resolved": "\"primary\" | \"tertiary\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the visual representation of the button."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hierarchy",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icon": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
@@ -63,11 +118,11 @@ export class SearchcraftButton {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Should the button only display an icon."
@@ -82,12 +137,12 @@ export class SearchcraftButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\" | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The position of the icon."
@@ -117,14 +172,29 @@ export class SearchcraftButton {
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "'Search'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'submit' | 'reset' | 'button'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of the button."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'button'"
             }
         };
     }
-    static get states() {
-        return {
-            "isRequesting": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "buttonClick",
@@ -134,7 +204,7 @@ export class SearchcraftButton {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "When the button is clicked."
+                    "text": "The event fired when the button is clicked."
                 },
                 "complexType": {
                     "original": "void",

package/dist/collection/components/searchcraft-button/searchcraft-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-button.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-button/searchcraft-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,KAAK,EACL,QAAQ,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC;;;;GAIG;AAKH,MAAM,OAAO,iBAAiB;IAC5B;;OAEG;IACK,WAAW,CAAW;IAC9B;;OAEG;IACK,QAAQ,GAAG,KAAK,CAAC;IACzB;;OAEG;IACK,YAAY,GAAG,MAAM,CAAC;IAC9B;;OAEG;IACK,KAAK,GAAG,QAAQ,CAAC;IAEzB;;OAEG;IACM,WAAW,CAAsB;IAEjC,YAAY,GAAG,KAAK,CAAC;IAEtB,WAAW,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,QAAQ,uDACN,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,cACE,KAAK,EAAE,UAAU,CAAC,oBAAoB,CAAC,EACvC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,mCAA4B,CAC7B,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,WAAW,CACjB,CACM,CACV,CAAC,CAAC,CAAC,CACF,cACE,KAAK,EAAE,UAAU,CAAC,oBAAoB,CAAC,EACvC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ;YAEZ,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW;YACjD,YAAM,KAAK,EAAE,UAAU,CAAC,aAAa,EAAE,0BAA0B,CAAC,IAC/D,IAAI,CAAC,KAAK,CACN,CACA,CACV,CACQ,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  State,\n  Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component represents a button to be consumed within the `search-input-form` component.\n * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.\n * It is consumed within the `searchcraft-input-form` component.\n */\n@Component({\n  tag: 'searchcraft-button',\n  shadow: false,\n})\nexport class SearchcraftButton {\n  /**\n   * The icon element.\n   */\n  @Prop() iconElement?: Element;\n  /**\n   * Should the button only display an icon.\n   */\n  @Prop() iconOnly = false;\n  /**\n   * The position of the icon.\n   */\n  @Prop() iconPosition = 'left';\n  /**\n   * The label for the button.\n   */\n  @Prop() label = 'Search';\n\n  /**\n   * When the button is clicked.\n   */\n  @Event() buttonClick!: EventEmitter<void>;\n\n  @State() isRequesting = false;\n\n  private handleClick = () => {\n    this.buttonClick.emit();\n  };\n\n  render() {\n    return (\n      <Fragment>\n        {this.iconOnly ? (\n          <button\n            class={classNames('searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.isRequesting ? (\n              <searchcraft-spinner-dark />\n            ) : (\n              this.iconElement\n            )}\n          </button>\n        ) : (\n          <button\n            class={classNames('searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.iconPosition === 'left' && this.iconElement}\n            <span class={classNames('buttonLabel', 'searchcraft-button-label')}>\n              {this.label}\n            </span>\n          </button>\n        )}\n      </Fragment>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-button.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-button/searchcraft-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,QAAQ,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC;;;;GAIG;AAKH,MAAM,OAAO,iBAAiB;IAC5B;;OAEG;IACK,SAAS,GAA4B,SAAS,CAAC;IACvD;;OAEG;IACK,QAAQ,GAAa,KAAK,CAAC;IACnC;;OAEG;IACK,IAAI,CAAW;IACvB;;OAEG;IACK,QAAQ,GAAa,KAAK,CAAC;IACnC;;OAEG;IACK,YAAY,GAAsB,MAAM,CAAC;IACjD;;OAEG;IACK,KAAK,GAAG,QAAQ,CAAC;IACzB;;OAEG;IACK,IAAI,GAAmC,QAAQ,CAAC;IACxD;;OAEG;IACM,WAAW,CAAsB;IAElC,iBAAiB,GAAG,GAAG,EAAE;QAC/B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,+DACE,KAAK,EAAE,UAAU,CAAC,oBAAoB,EAAE;gBACtC,4BAA4B,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS;gBAC1D,6BAA6B,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU;gBAC5D,6BAA6B,EAAE,IAAI,CAAC,QAAQ;aAC7C,CAAC,EACF,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,IAEd,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,IAAI,CAAC,IAAI,CACV,CAAC,CAAC,CAAC,CACF,EAAC,QAAQ;YACN,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI;YAC1C,gBAAO,IAAI,CAAC,KAAK,CAAQ;YACxB,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,CAClC,CACZ,CACM,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component represents a button to be consumed within the `search-input-form` component.\n * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.\n * It is consumed within the `searchcraft-input-form` component.\n */\n@Component({\n  tag: 'searchcraft-button',\n  shadow: false,\n})\nexport class SearchcraftButton {\n  /**\n   * Controls the visual representation of the button.\n   */\n  @Prop() hierarchy?: 'primary' | 'tertiary' = 'primary';\n  /**\n   * Whether the button is disabled.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The icon element.\n   */\n  @Prop() icon?: Element;\n  /**\n   * Should the button only display an icon.\n   */\n  @Prop() iconOnly?: boolean = false;\n  /**\n   * The position of the icon.\n   */\n  @Prop() iconPosition?: 'left' | 'right' = 'left';\n  /**\n   * The label for the button.\n   */\n  @Prop() label = 'Search';\n  /**\n   * The type of the button.\n   */\n  @Prop() type?: 'submit' | 'reset' | 'button' = 'button';\n  /**\n   * The event fired when the button is clicked.\n   */\n  @Event() buttonClick!: EventEmitter<void>;\n\n  private handleButtonClick = () => {\n    this.buttonClick.emit();\n  };\n\n  render() {\n    return (\n      <button\n        class={classNames('searchcraft-button', {\n          'searchcraft-button-primary': this.hierarchy === 'primary',\n          'searchcraft-button-tertiary': this.hierarchy === 'tertiary',\n          'searchcraft-button-disabled': this.disabled,\n        })}\n        disabled={this.disabled}\n        onClick={this.handleButtonClick}\n        type={this.type}\n      >\n        {this.iconOnly ? (\n          this.icon\n        ) : (\n          <Fragment>\n            {this.iconPosition === 'left' && this.icon}\n            <span>{this.label}</span>\n            {this.iconPosition === 'right' && this.icon}\n          </Fragment>\n        )}\n      </button>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-error-message/searchcraft-error-message.js

@@ -14,7 +14,7 @@ export class SearchcraftErrorMessage {
      */
     errorMessage;
     render() {
-        return (h("p", { key: '432bc13abc15f4d9c62ebc751e44e266b258b1f9', class: 'searchcraft-error-message' }, this.errorMessage || 'Search term is required.'));
+        return (h("p", { key: 'dc97bb66da10a98fca027f928deaaf80d945417b', class: 'searchcraft-error-message' }, this.errorMessage || 'Search term is required.'));
     }
     static get is() { return "searchcraft-error-message"; }
     static get properties() {

package/dist/collection/components/searchcraft-facet-list/searchcraft-facet-list.js

@@ -35,19 +35,19 @@ export class SearchcraftFacetList {
     selectedPaths = {};
     lastTimeTaken;
     hasNewSearchTerm = false;
-    lastQuery;
+    lastSearchTerm;
     lastSearchMode;
     lastSortType;
     unsubscribe;
     searchStore = useSearchcraftStore.getState();
     handleStateUpdate(state) {
-        const facetPrime = state.searchResults?.data.facets;
-        const timeTaken = state.searchResults?.data.time_taken;
+        const facetPrime = state.searchResponseFacetPrime;
+        const timeTaken = state.searchResponseTimeTaken;
         if (!this.fieldName) {
             return;
         }
         /** Things to do when the state's search term has changed, but before the response received */
-        if (state.query !== this.lastQuery ||
+        if (state.searchTerm !== this.lastSearchTerm ||
             state.searchMode !== this.lastSearchMode ||
             state.sortType !== this.lastSortType) {
             this.selectedPaths = {};
@@ -68,7 +68,7 @@ export class SearchcraftFacetList {
                 this.facetRoot = mergeFacetRoots(this.fieldName, this.baseFacetRoot, incomingFacetRoot);
             }
         }
-        this.lastQuery = state.query;
+        this.lastSearchTerm = state.searchTerm;
         this.lastSearchMode = state.searchMode;
         this.lastSortType = state.sortType;
         this.lastTimeTaken = timeTaken;
@@ -131,13 +131,13 @@ export class SearchcraftFacetList {
             const isChildSelected = facetChild.children
                 ? facetChild.children?.some((child) => this.selectedPaths[child.path])
                 : false;
-            return (h("div", { key: facetChild.path, class: classNames('searchcraft-filters-list-item') }, h("label", { class: classNames('filterCheckboxLabel', 'searchcraft-filters-list-checkbox-label') }, h("input", { checked: this.selectedPaths[facetChild.path], onChange: (_event) => this.handleCheckboxChange(facetChild.path), type: 'checkbox' }), isChildSelected ? (h("div", { class: classNames('dashContainer', 'searchcraft-filter-list-dash-container') }, h("searchcraft-dash-icon", null))) : (h("div", { class: classNames('checkContainer', 'searchcraft-filter-list-check-container') }, h("searchcraft-check-icon", null))), this.formatLabel(facetChild)), facetChild.children && facetChild.children.length > 0 && (h(Fragment, null, facetChild.children.map((grandchild) => (h("label", { key: grandchild.path, class: classNames('childFilterCheckboxLabel', 'searchcraft-child-filter-checkbox-label'), style: {
+            return (h("div", { key: facetChild.path, class: classNames('searchcraft-filters-list-item') }, h("label", { class: classNames('filterCheckboxLabel', 'searchcraft-filters-list-checkbox-label') }, h("input", { checked: this.selectedPaths[facetChild.path], onChange: (_event) => this.handleCheckboxChange(facetChild.path), type: 'checkbox' }), isChildSelected ? (h("div", { class: classNames('dashContainer', 'searchcraft-filter-list-dash-container') }, h("svg", { width: '14', height: '3', viewBox: '0 0 14 3', fill: 'none' }, h("title", null, "Checkbox Dash"), h("line", { x1: '1.5', y1: '1.5', x2: '12.5', y2: '1.5', stroke: 'white', "stroke-width": '3', "stroke-linecap": 'round' })))) : (h("div", { class: classNames('checkContainer', 'searchcraft-filter-list-check-container') }, h("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none' }, h("title", null, "Checkbox Check"), h("path", { d: 'M13.9999 2L5.74988 10L1.99988 6.36364', stroke: 'white', "stroke-width": '3', "stroke-linecap": 'round', "stroke-linejoin": 'round' })))), this.formatLabel(facetChild)), facetChild.children && facetChild.children.length > 0 && (h(Fragment, null, facetChild.children.map((grandchild) => (h("label", { key: grandchild.path, class: classNames('childFilterCheckboxLabel', 'searchcraft-child-filter-checkbox-label'), style: {
                     display: this.selectedPaths[facetChild.path]
                         ? 'flex'
                         : 'none',
                 } }, h("input", { checked: this.selectedPaths[grandchild.path], onChange: (_event) => {
                     this.handleCheckboxChange(grandchild.path);
-                }, type: 'checkbox' }), h("div", { class: classNames('checkContainer', 'searchcraft-filter-list-check-container') }, h("searchcraft-check-icon", null)), this.formatSubLabel(grandchild, facetChild))))))));
+                }, type: 'checkbox' }), h("div", { class: classNames('checkContainer', 'searchcraft-filter-list-check-container') }, h("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none' }, h("title", null, "Checkbox Check"), h("path", { d: 'M13.9999 2L5.74988 10L1.99988 6.36364', stroke: 'white', "stroke-width": '3', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), this.formatSubLabel(grandchild, facetChild))))))));
         })));
     }
     static get is() { return "searchcraft-facet-list"; }
@@ -172,7 +172,7 @@ export class SearchcraftFacetList {
             "selectedPaths": {},
             "lastTimeTaken": {},
             "hasNewSearchTerm": {},
-            "lastQuery": {},
+            "lastSearchTerm": {},
             "lastSearchMode": {},
             "lastSortType": {},
             "unsubscribe": {}