@searchcraft/javascript-sdk 0.6.0 → 0.7.1

package/dist/components/p-d95bc2a0.js

@@ -0,0 +1,284 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-5365011f.js';
+import { u as useSearchcraftStore, b as ae } from './p-936e2ed4.js';
+import { p as parseCustomStyles } from './p-d9551738.js';
+import { c as classNames } from './p-5cdc6210.js';
+import { d as defineCustomElement$3 } from './p-521fe971.js';
+import { d as defineCustomElement$2 } from './p-a75ef832.js';
+import { d as defineCustomElement$1 } from './p-ca881e5c.js';
+
+const name = "@searchcraft/javascript-sdk";
+const version = "0.7.1";
+const description = "Searchcraft Javascript SDK";
+const author = "Searchcraft";
+const license = "Apache-2.0";
+const main = "dist/index.cjs.js";
+const module = "dist/index.js";
+const types = "dist/types/index.d.ts";
+const collection = "dist/collection/collection-manifest.json";
+const unpkg = "dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.esm.js";
+const exports = {
+	".": {
+		"import": "./dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.esm.js",
+		require: "./dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.cjs.js",
+		types: "./dist/types/index.d.ts"
+	},
+	"./components": {
+		"import": "./dist/components/index.js",
+		types: "./dist/components/index.d.ts"
+	},
+	"./loader": {
+		"import": "./dist/loader/index.js",
+		require: "./dist/loader/index.cjs",
+		types: "./dist/loader/index.d.ts"
+	},
+	"./dist/components/*": {
+		"import": "./dist/components/*",
+		types: "./dist/components/*"
+	}
+};
+const repository = {
+	type: "git",
+	url: "https://bitbucket.org/madebychalk/searchcraft-javascript-sdks/"
+};
+const files = [
+	"dist/"
+];
+const scripts = {
+	build: "stencil build && yarn docs",
+	docs: "typedoc --options typedoc.json",
+	dev: "stencil build --dev --watch",
+	test: "stencil test --spec --e2e",
+	"test.watch": "stencil test --spec --e2e --watchAll",
+	generate: "stencil generate"
+};
+const dependencies = {
+	"@stencil/vue-output-target": "^0.9.2",
+	classnames: "^2.3.2"
+};
+const devDependencies = {
+	"@searchcraft/core": "^0.7.1",
+	"@searchcraft/javascript-sdk": "*",
+	"@stencil/core": "^4.7.0",
+	"@stencil/react-output-target": "^0.8.2",
+	"@stencil/sass": "^3.0.12",
+	"@types/node": "^16.18.11",
+	zustand: "^5.0.1"
+};
+const packageJson = {
+	name: name,
+	"private": false,
+	version: version,
+	description: description,
+	author: author,
+	license: license,
+	main: main,
+	module: module,
+	types: types,
+	collection: collection,
+	"collection:main": "dist/collection/index.js",
+	unpkg: unpkg,
+	exports: exports,
+	repository: repository,
+	files: files,
+	scripts: scripts,
+	dependencies: dependencies,
+	devDependencies: devDependencies
+};
+
+const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.inputCleared = createEvent(this, "inputCleared", 7);
+        this.noResultsReceived = createEvent(this, "noResultsReceived", 7);
+        this.inputFocus = createEvent(this, "inputFocus", 7);
+        this.inputBlur = createEvent(this, "inputBlur", 7);
+        this.inputInit = createEvent(this, "inputInit", 7);
+        this.querySubmit = createEvent(this, "querySubmit", 7);
+    }
+    /**
+     * The Searchcraft config object.
+     */
+    config;
+    /**
+     * Whether or not to automatically submit the search term when the input changes.
+     */
+    autoSearch = true;
+    /**
+     * Where to place the search button.
+     */
+    buttonPlacement = 'none';
+    /**
+     * The label for the submit button.
+     */
+    buttonLabel;
+    /**
+     * The label rendered above the input.
+     */
+    inputLabel;
+    /**
+     * A custom styles object to be applied to the input element.
+     */
+    customStyles = {};
+    /**
+     * The input element's placeholder value.
+     */
+    placeholderValue = 'Enter Search';
+    /**
+     * The starting value of the input element.
+     */
+    searchTerm = '';
+    /**
+     * When the input is cleared.
+     */
+    inputCleared;
+    /**
+     * When no results are returned.
+     */
+    noResultsReceived;
+    /**
+     * When the input becomes focused.
+     */
+    inputFocus;
+    /**
+     * When the input becomes unfocused.
+     */
+    inputBlur;
+    /**
+     * Event emitted when input initializes.
+     */
+    inputInit;
+    /**
+     * Event emitted when a query has been submitted.
+     */
+    querySubmit;
+    inputValue = this.searchTerm;
+    error = false;
+    isSearchcraftInitialized = false;
+    searchStore = useSearchcraftStore.getState();
+    init() {
+        if (this.config && !this.isSearchcraftInitialized) {
+            const searchcraft = new ae(this.config, {
+                sdkName: packageJson.name,
+                sdkVersion: packageJson.version,
+            });
+            this.searchStore.initialize(searchcraft, true);
+            this.isSearchcraftInitialized = true;
+            this.inputInit?.emit();
+        }
+    }
+    componentDidLoad() {
+        this.init();
+    }
+    onConfigChange() {
+        this.init();
+    }
+    handleOnInput = (event) => {
+        const input = event.target;
+        this.inputValue = input.value;
+        if (input.value.trim() === '') {
+            this.inputCleared?.emit();
+            this.searchTerm = '';
+            this.searchStore.setQuery('');
+            this.searchStore.setSearchResults(null);
+            return;
+        }
+        if (!this.autoSearch) {
+            return;
+        }
+        this.performSearch(input.value);
+    };
+    performSearch = async (value) => {
+        if (value === useSearchcraftStore.getState().query) {
+            return;
+        }
+        this.searchTerm = value.trim();
+        this.error = false;
+        this.searchStore.setQuery(this.searchTerm);
+        this.querySubmit?.emit(this.searchTerm);
+        try {
+            await this.searchStore.search();
+        }
+        catch (error) {
+            this.error = true;
+            this.inputCleared?.emit();
+        }
+    };
+    handleClearInput = () => {
+        this.inputValue = '';
+        this.searchTerm = '';
+        this.searchStore.setQuery('');
+        this.searchStore.setSearchResults(null);
+        this.error = false;
+        this.inputCleared?.emit();
+    };
+    handleFormSubmit = async (event) => {
+        event.preventDefault();
+        await this.performSearch(this.searchTerm);
+    };
+    render() {
+        const validatedCustomStyles = parseCustomStyles(this.customStyles);
+        const isShowingClearButton = this.inputValue.length > 0;
+        const inputGridClassNames = classNames('searchcraft-input-grid', {
+            'searchcraft-input-grid-buttonLeft': this.buttonPlacement === 'left',
+            'searchcraft-input-grid-buttonRight': this.buttonPlacement === 'right',
+            'searchcraft-input-grid-buttonNone': this.buttonPlacement === 'none',
+        });
+        const shouldHaveVerticalGap = this.inputLabel || this.error;
+        const inputGridStyles = {
+            gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',
+        };
+        return (h("form", { key: 'b23e712102e03332d5958b736133ac5222c571ed', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, h("div", { key: '62e1666b20e3901565241c83cb6b398afbaf14bf', class: inputGridClassNames, style: inputGridStyles }, h("div", { key: '1f78f96f48e354ba434bcd6c8eb20f6940d2281c', class: 'searchcraft-input-button-wrapper' }, h("searchcraft-button", { key: '0e89a333f3d489dccb05d978dde8622ee24a2508', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), this.inputLabel && (h("div", { key: '1b75214db1a0a9d7144e8974e3467da9a94cc845', class: 'searchcraft-input-label-wrapper' }, h("searchcraft-input-label", { key: 'd7edaa9b980eae47628747488e4966ef62fab574', label: this.inputLabel }))), this.error && (h("div", { key: '936858e238d96838caa3aa34dbb4d86b3f6ad839', class: 'searchcraft-input-error-wrapper' }, h("searchcraft-error-message", { key: '75400c0a6f9d20f5c58ef0125f70a0ba8f2da920', errorMessage: 'Something went wrong.' }))), h("div", { key: '0978f74e9a83c78604c494fca9d8a885f73b5fff', class: 'searchcraft-input-wrapper' }, h("input", { key: '4a9f69a9e21c89c97daea9e4c19e41523c71e0f2', autoComplete: 'off', class: 'searchcraft-input', onFocus: () => this.inputFocus?.emit(), onBlur: () => this.inputBlur?.emit(), onInput: (event) => {
+                this.handleOnInput(event);
+            }, placeholder: this.placeholderValue, style: validatedCustomStyles, type: 'text', value: this.inputValue }), h("div", { key: '9c215722544c132dc9e302c522d0f7c36c205b74', class: 'searchcraft-input-search-icon-wrapper' }, h("svg", { key: '4f6dfc2a89a888eafcd4aee6d02e40635c2fb78a', class: 'searchcraft-input-search-icon', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, h("title", { key: '6be4ba3b739aeebd27e2ba0f3b7766c1ac6cf2e3', id: 'searchcraft-title' }, "Searchcraft Search Icon Light"), h("path", { key: 'd62f785b5bb2f261a3dbf8e4d91f2db405e36dc4', d: 'M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z', stroke: '#404040', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), isShowingClearButton && (h("button", { key: '8ca5193982311991eb0bf30a200b5bee25688c54', type: 'button', class: 'searchcraft-input-clear-button', onClick: this.handleClearInput }, h("svg", { key: 'a929aee41d677e850a2568ee08a047f35711b4bf', class: 'searchcraft-input-clear-icon', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { key: '60b50c641ab494c1e8f02f3e1fa19d0a41162859', id: 'icon-title' }, "Searchcraft Clear Input Icon Light"), h("path", { key: '6d47a20770f51f069efe06ee29c1451fd78de357', d: 'M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z', stroke: 'black', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))))))));
+    }
+    static get watchers() { return {
+        "config": ["onConfigChange"]
+    }; }
+}, [0, "searchcraft-input-form", {
+        "config": [16],
+        "autoSearch": [4, "auto-search"],
+        "buttonPlacement": [1, "button-placement"],
+        "buttonLabel": [1, "button-label"],
+        "inputLabel": [1, "input-label"],
+        "customStyles": [1, "custom-styles"],
+        "placeholderValue": [1, "placeholder-value"],
+        "searchTerm": [1, "search-term"],
+        "inputValue": [32],
+        "error": [32],
+        "isSearchcraftInitialized": [32]
+    }, undefined, {
+        "config": ["onConfigChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-input-form", "searchcraft-button", "searchcraft-error-message", "searchcraft-input-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-input-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftInput);
+            }
+            break;
+        case "searchcraft-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "searchcraft-error-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "searchcraft-input-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SearchcraftInput as S, defineCustomElement as d };
+
+//# sourceMappingURL=p-d95bc2a0.js.map

package/dist/components/p-d95bc2a0.js.map

@@ -0,0 +1 @@
+{"file":"p-d95bc2a0.js","mappings":"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","names":["SearchcraftCore"],"sources":["src/components/searchcraft-input-form/searchcraft-input-form.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Event,\n  type EventEmitter,\n  Watch,\n} from '@stencil/core';\n\nimport { type SearchcraftConfig, SearchcraftCore } from '@searchcraft/core';\nimport packageJson from '../../../package.json';\n\nimport { parseCustomStyles } from '@utils';\nimport { useSearchcraftStore } from '@provider/store';\nimport classNames from 'classnames';\n\n/**\n * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.\n * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-input-form placeholder-value=\"Search here\" />\n * ```\n *\n * ```js\n * // index.js\n * const searchInputForm = document.querySelector('searchcraft-input-form');\n *\n * seardchInputForm.config = {\n *   index: [],\n *   readKey: '',\n *   endpointUrl: '',\n * };\n *\n * searchForm.addEventListener('querySubmit', (event) => {\n *   console.log('Query submitted', event.detail);\n * });\n * ```\n */\n@Component({\n  tag: 'searchcraft-input-form',\n  shadow: false,\n})\nexport class SearchcraftInput {\n  /**\n   * The Searchcraft config object.\n   */\n  @Prop() config: SearchcraftConfig | undefined;\n  /**\n   * Whether or not to automatically submit the search term when the input changes.\n   */\n  @Prop() autoSearch = true;\n  /**\n   * Where to place the search button.\n   */\n  @Prop() buttonPlacement: 'left' | 'right' | 'none' = 'none';\n  /**\n   * The label for the submit button.\n   */\n  @Prop() buttonLabel: string | undefined;\n  /**\n   * The label rendered above the input.\n   */\n  @Prop() inputLabel: string | undefined;\n  /**\n   * A custom styles object to be applied to the input element.\n   */\n  @Prop() customStyles: string | Record<string, string> = {};\n  /**\n   * The input element's placeholder value.\n   */\n  @Prop() placeholderValue = 'Enter Search';\n  /**\n   * The starting value of the input element.\n   */\n  @Prop() searchTerm = '';\n  /**\n   * When the input is cleared.\n   */\n  @Event() inputCleared?: EventEmitter<void>;\n  /**\n   * When no results are returned.\n   */\n  @Event() noResultsReceived?: EventEmitter<void>;\n  /**\n   * When the input becomes focused.\n   */\n  @Event() inputFocus?: EventEmitter<void>;\n  /**\n   * When the input becomes unfocused.\n   */\n  @Event() inputBlur?: EventEmitter<void>;\n  /**\n   * Event emitted when input initializes.\n   */\n  @Event() inputInit?: EventEmitter<void>;\n  /**\n   * Event emitted when a query has been submitted.\n   */\n  @Event() querySubmit?: EventEmitter<string>;\n\n  @State() inputValue = this.searchTerm;\n  @State() error = false;\n  @State() isSearchcraftInitialized = false;\n\n  private searchStore = useSearchcraftStore.getState();\n\n  init() {\n    if (this.config && !this.isSearchcraftInitialized) {\n      const searchcraft = new SearchcraftCore(this.config, {\n        sdkName: packageJson.name,\n        sdkVersion: packageJson.version,\n      });\n      this.searchStore.initialize(searchcraft, true);\n      this.isSearchcraftInitialized = true;\n      this.inputInit?.emit();\n    }\n  }\n\n  componentDidLoad() {\n    this.init();\n  }\n\n  @Watch('config')\n  onConfigChange() {\n    this.init();\n  }\n\n  handleOnInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.inputValue = input.value;\n\n    if (input.value.trim() === '') {\n      this.inputCleared?.emit();\n      this.searchTerm = '';\n      this.searchStore.setQuery('');\n      this.searchStore.setSearchResults(null);\n      return;\n    }\n\n    if (!this.autoSearch) {\n      return;\n    }\n\n    this.performSearch(input.value);\n  };\n\n  private performSearch = async (value: string) => {\n    if (value === useSearchcraftStore.getState().query) {\n      return;\n    }\n\n    this.searchTerm = value.trim();\n    this.error = false;\n    this.searchStore.setQuery(this.searchTerm);\n    this.querySubmit?.emit(this.searchTerm);\n\n    try {\n      await this.searchStore.search();\n    } catch (error) {\n      this.error = true;\n      this.inputCleared?.emit();\n    }\n  };\n\n  handleClearInput = () => {\n    this.inputValue = '';\n    this.searchTerm = '';\n    this.searchStore.setQuery('');\n    this.searchStore.setSearchResults(null);\n    this.error = false;\n\n    this.inputCleared?.emit();\n  };\n\n  handleFormSubmit = async (event: Event) => {\n    event.preventDefault();\n    await this.performSearch(this.searchTerm);\n  };\n\n  render() {\n    const validatedCustomStyles = parseCustomStyles(this.customStyles);\n\n    const isShowingClearButton = this.inputValue.length > 0;\n\n    const inputGridClassNames = classNames('searchcraft-input-grid', {\n      'searchcraft-input-grid-buttonLeft': this.buttonPlacement === 'left',\n      'searchcraft-input-grid-buttonRight': this.buttonPlacement === 'right',\n      'searchcraft-input-grid-buttonNone': this.buttonPlacement === 'none',\n    });\n\n    const shouldHaveVerticalGap = this.inputLabel || this.error;\n    const inputGridStyles = {\n      gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',\n    };\n\n    return (\n      <form class='searchcraft-input-form' onSubmit={this.handleFormSubmit}>\n        <div class={inputGridClassNames} style={inputGridStyles}>\n          <div class='searchcraft-input-button-wrapper'>\n            <searchcraft-button\n              onButtonClick={this.handleFormSubmit}\n              label={this.buttonLabel}\n            />\n          </div>\n          {this.inputLabel && (\n            <div class='searchcraft-input-label-wrapper'>\n              <searchcraft-input-label label={this.inputLabel} />\n            </div>\n          )}\n          {this.error && (\n            <div class='searchcraft-input-error-wrapper'>\n              <searchcraft-error-message errorMessage='Something went wrong.' />\n            </div>\n          )}\n          <div class='searchcraft-input-wrapper'>\n            <input\n              autoComplete='off'\n              class='searchcraft-input'\n              onFocus={() => this.inputFocus?.emit()}\n              onBlur={() => this.inputBlur?.emit()}\n              onInput={(event) => {\n                this.handleOnInput(event);\n              }}\n              placeholder={this.placeholderValue}\n              style={validatedCustomStyles}\n              type='text'\n              value={this.inputValue}\n            />\n            <div class='searchcraft-input-search-icon-wrapper'>\n              <svg\n                class='searchcraft-input-search-icon'\n                viewBox='0 0 20 20'\n                fill='none'\n                xmlns='http://www.w3.org/2000/svg'\n                aria-labelledby='searchcraft-title'\n              >\n                <title id='searchcraft-title'>\n                  Searchcraft Search Icon Light\n                </title>\n                <path\n                  d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n                  stroke='#404040'\n                  stroke-width='1.5'\n                  stroke-linecap='round'\n                  stroke-linejoin='round'\n                />\n              </svg>\n            </div>\n            {isShowingClearButton && (\n              <button\n                type='button'\n                class='searchcraft-input-clear-button'\n                onClick={this.handleClearInput}\n              >\n                <svg\n                  class='searchcraft-input-clear-icon'\n                  viewBox='0 0 22 22'\n                  fill='none'\n                  xmlns='http://www.w3.org/2000/svg'\n                  aria-labelledby='icon-title'\n                >\n                  <title id='icon-title'>\n                    Searchcraft Clear Input Icon Light\n                  </title>\n                  <path\n                    d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n                    stroke='black'\n                    stroke-width='1.5'\n                    stroke-linecap='round'\n                    stroke-linejoin='round'\n                  />\n                </svg>\n              </button>\n            )}\n          </div>\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/searchcraft-base-search-result.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftBaseSearchResult$1, d as defineCustomElement$1 } from './p-04c46179.js';
+import { S as SearchcraftBaseSearchResult$1, d as defineCustomElement$1 } from './p-b4a8fcbe.js';
 
 const SearchcraftBaseSearchResult = SearchcraftBaseSearchResult$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,33 +1,68 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-e4846fa2.js';
-import { u as useSearchcraftStore } from './p-d6a88eed.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-5365011f.js';
+import { u as useSearchcraftStore } from './p-936e2ed4.js';
 import { g as getDocumentValueFromSearchResultMapping } from './p-755f491b.js';
 import { s as serializeStyles } from './p-d9551738.js';
-import { d as defineCustomElement$3 } from './p-04c46179.js';
-import { d as defineCustomElement$2 } from './p-953f4238.js';
-
-const searchcraftBaseSearchResultsModuleCss = ":root{--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px;--sc-popover-form-border-radius:8px;--sc-popover-list-view-height:400px;--sc-popover-list-item-image-size:60px;--sc-popover-list-item-padding-horizontal:8px;--sc-popover-list-item-padding-vertical:8px;--sc-popover-modal-max-width:570px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}:root{--sc-breakpoint-sm:576px;--sc-breakpoint-md:768px;--sc-breakpoint-lg:992px}.searchcraft-search-results-container{display:flex;flex-direction:column;justify-content:center;gap:16px}.searchcraft-ad-section{align-items:center;background-color:#F1F1F1;border-radius:16px;display:flex;flex-direction:column;font-size:16px;justify-content:center;min-height:176px;text-align:center}.searchcraft-ad-section p{margin:0;color:var(--sc-content-disabled)}.searchcraft-search-results-empty-state-container{text-align:center}.searchcraft-search-results-error-message-container{text-align:center}";
-const SearchcraftBaseSearchResultsStyle0 = searchcraftBaseSearchResultsModuleCss;
+import { d as defineCustomElement$3 } from './p-b4a8fcbe.js';
+import { d as defineCustomElement$2 } from './p-a75ef832.js';
 
 const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftBaseSearchResults extends H {
     constructor() {
         super();
         this.__registerHost();
         this.noResults = createEvent(this, "noResults", 7);
-        this.adInterval = 4;
-        this.customStylesForResults = undefined;
-        this.searchResultMappings = undefined;
-        this.placeAdAtEnd = false;
-        this.placeAdAtStart = true;
-        this.resultImagePlacement = 'right';
-        this.buttonLabel = undefined;
-        this.buttonTarget = '_blank';
-        this.buttonRel = undefined;
-        this.containerTarget = '_blank';
-        this.containerRel = undefined;
-        this.hasSearched = false;
-        this.query = '';
-        this.searchResults = null;
     }
+    /**
+     * How often ads are injected.
+     */
+    adInterval = 4;
+    /**
+     * A custom styles object.
+     */
+    customStylesForResults;
+    /**
+     * 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.
+     */
+    resultImagePlacement = 'right';
+    /**
+     * The label for the button rendered when containerHref is not present for each result.
+     */
+    buttonLabel;
+    /**
+     * Where to open the link for the button rendered when containerHref is not present for each result.
+     */
+    buttonTarget = '_blank';
+    /**
+     * The relationship between the current document and the link for the button rendered when containerHref is not present for each result.
+     */
+    buttonRel;
+    /**
+     * Where to open the link for the containing element for each result.
+     */
+    containerTarget = '_blank';
+    /**
+     * The relationship between the current document and the link for the containing element for each result.
+     */
+    containerRel;
+    /**
+     * When no results are returned.
+     */
+    noResults;
+    hasSearched = false;
+    query = '';
+    searchResults = null;
+    unsubscribe = () => { };
     componentDidLoad() {
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
             if (state.query.length > 0) {
@@ -36,7 +71,7 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
             else {
                 this.hasSearched = false;
             }
-            this.searchResults = Object.assign({}, state.searchResults);
+            this.searchResults = { ...state.searchResults };
             this.query = state.query;
         });
         const { searchResults, query } = useSearchcraftStore.getState();
@@ -52,27 +87,30 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
         /**
          * 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);
-        const serializedStyles = typeof this.customStylesForResults === 'string'
-            ? this.customStylesForResults
-            : serializeStyles(this.customStylesForResults);
+        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 }));
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         if (this.query.trim() === '') {
             return (h("div", { class: 'searchcraft-search-results-empty-state-container' }, h("slot", { name: 'empty-search' })));
         }
-        if (!((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data)) {
+        if (!this.searchResults?.data) {
             return;
         }
-        const documents = (_d = (_c = (_b = this.searchResults) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.hits) === null || _d === void 0 ? void 0 : _d.map((data, _index) => {
+        const documents = this.searchResults?.data?.hits?.map((data, _index) => {
             const { doc: result } = data;
             return result;
         });
@@ -95,13 +133,12 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
         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 && ((_g = (_f = (_e = this.searchResults) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.hits) === null || _g === void 0 ? void 0 : _g.length) === 0) {
-            this.noResults.emit();
+        if (this.query.length > 0 && this.searchResults?.data?.hits?.length === 0) {
+            this.noResults?.emit();
         }
         return (h("div", { class: 'searchcraft-search-results-container' }, finalComponents, this.query.length > 0 &&
-            ((_k = (_j = (_h = this.searchResults) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.hits) === null || _k === void 0 ? void 0 : _k.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` })))));
+            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` })))));
     }
-    static get style() { return SearchcraftBaseSearchResultsStyle0; }
 }, [4, "searchcraft-base-search-results", {
         "adInterval": [2, "ad-interval"],
         "customStylesForResults": [1, "custom-styles-for-results"],

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

@@ -1 +1 @@
-{"file":"searchcraft-base-search-results.js","mappings":";;;;;;;AAAA,MAAM,qCAAqC,GAAG,2zHAA2zH,CAAC;AAC12H,2CAAe,qCAAqC;;MCuDvCA,8BAA4B;;;;;0BAIlB,CAAC;;;4BAeC,KAAK;8BAIH,IAAI;oCAIoB,OAAO;;4BAQQ,QAAQ;;+BAQL,QAAQ;;2BAWpD,KAAK;qBACX,EAAE;6BACkC,IAAI;;IAIzD,gBAAgB;QACd,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;YACrD,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC1B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;aACzB;iBAAM;gBACL,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;aAC1B;YACD,IAAI,CAAC,aAAa,qBAAQ,KAAK,CAAC,aAAa,CAAE,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;SAC1B,CAAC,CAAC;QAEH,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QAChE,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QACnC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;KACpB;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,cAAc,CAAC,QAAiC,EAAE,KAAa;;;;QAI7D,MAAM,YAAY,GAAG,uCAAuC,CAC1D,QAAQ,EACR,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAChC,CAAC;QACF,MAAM,eAAe,GAAG,uCAAuC,CAC7D,QAAQ,EACR,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CACnC,CAAC;QACF,MAAM,WAAW,GAAG,uCAAuC,CACzD,QAAQ,EACR,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAC/B,CAAC;QACF,MAAM,aAAa,GAAG,uCAAuC,CAC3D,QAAQ,EACR,IAAI,CAAC,oBAAoB,CAAC,aAAa,CACxC,CAAC;QACF,MAAM,UAAU,GAAG,uCAAuC,CACxD,QAAQ,EACR,IAAI,CAAC,oBAAoB,CAAC,UAAU,CACrC,CAAC;QACF,MAAM,WAAW,GAAG,uCAAuC,CACzD,QAAQ,EACR,IAAI,CAAC,oBAAoB,CAAC,WAAW,CACtC,CAAC;QACF,MAAM,aAAa,GAAG,uCAAuC,CAC3D,QAAQ,EACR,IAAI,CAAC,oBAAoB,CAAC,MAAM,CACjC,CAAC;QAEF,MAAM,gBAAgB,GACpB,OAAO,IAAI,CAAC,sBAAsB,KAAK,QAAQ;cAC3C,IAAI,CAAC,sBAAsB;cAC3B,eAAe,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;QAEnD,QACE,sCACE,GAAG,EAAE,GAAG,QAAQ,CAAC,WAAW,IAAI,KAAK,EAAE,mBACxB,gBAAgB,qBACd,IAAI,CAAC,oBAAoB,mBAC3B,IAAI,CAAC,YAAY,sBACd,IAAI,CAAC,eAAe,kBACxB,IAAI,CAAC,WAAW,IAAI,WAAW,gBACjC,IAAI,CAAC,SAAS,mBACX,IAAI,CAAC,YAAY,uBACb,KAAK,mBACT,YAAY,sBACT,eAAe,kBACnB,WAAW,oBACT,aAAa,oBACb,aAAa,iBAChB,UAAU,eACZ,WAAW,GACtB,EACF;KACH;IAED,MAAM;;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC5B,QACE,WAAK,KAAK,EAAC,kDAAkD,IAC3D,YAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACN;SACH;QAED,IAAI,EAAC,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,CAAA,EAAE;YAC7B,OAAO;SACR;QAED,MAAM,SAAS,GACb,MAAA,MAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,0CAAE,IAAI,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM;YAC/C,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;YAC7B,OAAO,MAAM,CAAC;SACf,CAAC,CAAC;QAEL,MAAM,eAAe,GAAkB,EAAE,CAAC;QAE1C,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,eAAe,CAAC,IAAI,CAClB,WAAK,GAAG,EAAC,kBAAkB,EAAC,KAAK,EAAC,wBAAwB,IACxD,0BAAiB,CACb,CACP,CAAC;SACH;QAED,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE;YACvB,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK;gBAChC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;gBAE3D,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,KAAK,CAAC,EAAE;oBACvC,eAAe,CAAC,IAAI,CAClB,WACE,GAAG,EAAE,cAAc,KAAK,GAAG,CAAC,EAAE,EAC9B,KAAK,EAAC,yBAAyB,IAE/B,0BAAiB,CACb,CACP,CAAC;iBACH;aACF,CAAC,CAAC;SACJ;aAAM;YACL,MAAM,gBAAgB,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,KACrD,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CACrC,CAAC;YACF,eAAe,CAAC,IAAI,CAAC,GAAG,gBAAgB,CAAC,CAAC;SAC3C;QAED,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,eAAe,CAAC,IAAI,CAClB,WAAK,GAAG,EAAC,gBAAgB,EAAC,KAAK,EAAC,wBAAwB,IACtD,0BAAiB,CACb,CACP,CAAC;SACH;QAED,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAA,MAAA,MAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,0CAAE,IAAI,0CAAE,MAAM,MAAK,CAAC,EAAE;YACzE,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;SACvB;QAED,QACE,WAAK,KAAK,EAAC,sCAAsC,IAC9C,eAAe,EACf,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;YACpB,CAAA,MAAA,MAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,0CAAE,IAAI,0CAAE,MAAM,MAAK,CAAC,KAC1C,WAAK,KAAK,EAAC,oDAAoD,IAC7D,kDACiB,gCAAgC,IAAI,CAAC,KAAK,SAAS,GAClE,CACE,CACP,CACC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftBaseSearchResults"],"sources":["src/components/searchcraft-base-search-results/searchcraft-base-search-results.module.scss?tag=searchcraft-base-search-results","src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"sourcesContent":[".searchcraft-search-results-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 16px;\n}\n\n.searchcraft-ad-section {\n  align-items: center;\n  background-color: #F1F1F1;\n  border-radius: 16px;\n  display: flex;\n  flex-direction: column;\n  font-size: 16px;\n  justify-content: center;\n  min-height: 176px;\n  text-align: center;\n\n  p {\n    margin: 0;\n    color: var(--sc-content-disabled);\n  }\n}\n\n.searchcraft-search-results-empty-state-container {\n  text-align: center;\n}\n\n.searchcraft-search-results-error-message-container {\n  text-align: center;\n}\n","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';\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  styleUrl: 'searchcraft-base-search-results.module.scss',\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 };\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    const serializedStyles =\n      typeof this.customStylesForResults === 'string'\n        ? this.customStylesForResults\n        : serializeStyles(this.customStylesForResults);\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      });\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","mappings":"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","names":["SearchcraftBaseSearchResults"],"sources":["src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"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}

package/dist/components/searchcraft-button.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftButton$1, d as defineCustomElement$1 } from './p-f9d778b3.js';
+import { S as SearchcraftButton$1, d as defineCustomElement$1 } from './p-521fe971.js';
 
 const SearchcraftButton = SearchcraftButton$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { S as SearchcraftErrorMessage$1, d as defineCustomElement$1 } from './p-953f4238.js';
+import { S as SearchcraftErrorMessage$1, d as defineCustomElement$1 } from './p-a75ef832.js';
 
 const SearchcraftErrorMessage = SearchcraftErrorMessage$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { S as SearchcraftFacetList$1, d as defineCustomElement$1 } from './p-a248ad69.js';
+import { S as SearchcraftFacetList$1, d as defineCustomElement$1 } from './p-54998882.js';
 
 const SearchcraftFacetList = SearchcraftFacetList$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-filter-panel.js

@@ -1,30 +1,29 @@
-import { p as proxyCustomElement, H, h } from './p-e4846fa2.js';
-import { u as useSearchcraftStore } from './p-d6a88eed.js';
+import { p as proxyCustomElement, H, h } from './p-5365011f.js';
+import { u as useSearchcraftStore } from './p-936e2ed4.js';
 import { a as getMillis } from './p-755f491b.js';
-import { d as defineCustomElement$4 } from './p-a248ad69.js';
-import { d as defineCustomElement$3 } from './p-0e38a723.js';
-import { d as defineCustomElement$2 } from './p-4c45ef80.js';
-
-const searchcraftFilterPanelModuleCss = ":root{--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px;--sc-popover-form-border-radius:8px;--sc-popover-list-view-height:400px;--sc-popover-list-item-image-size:60px;--sc-popover-list-item-padding-horizontal:8px;--sc-popover-list-item-padding-vertical:8px;--sc-popover-modal-max-width:570px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}:root{--sc-breakpoint-sm:576px;--sc-breakpoint-md:768px;--sc-breakpoint-lg:992px}.searchcraft-filter-panel{display:flex;flex-direction:column;gap:16px}.searchcraft-filter-panel-section{display:flex;flex-direction:column;gap:8px}.searchcraft-filter-panel-label{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-bold-font-size);font-weight:var(--sc-body-small-bold-font-weight);line-height:var(--sc-body-small-bold-line-height)}";
-const SearchcraftFilterPanelStyle0 = searchcraftFilterPanelModuleCss;
+import { d as defineCustomElement$4 } from './p-54998882.js';
+import { d as defineCustomElement$3 } from './p-4b92ae26.js';
+import { d as defineCustomElement$2 } from './p-1234974c.js';
 
 const SearchcraftFilterPanel$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftFilterPanel extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.searchStore = useSearchcraftStore.getState();
-        this.items = [];
-        this.unsubscribe = undefined;
-        this.lastQuery = undefined;
     }
+    /**
+     * The items to filter.
+     */
+    items = [];
+    unsubscribe;
+    lastQuery;
+    searchStore = useSearchcraftStore.getState();
     componentDidLoad() {
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
             this.lastQuery = state.query || '';
         });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unsubscribe?.();
     }
     handleDateRangeChanged(fieldName, min, max) {
         const start = new Date(min);
@@ -66,7 +65,7 @@ const SearchcraftFilterPanel$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
      * Iterate through `items` and render them based on `type`
      */
     render() {
-        return (h("div", { key: '43bb83b1616c00f46727c7baff2cbc013f88e111', class: 'searchcraft-filter-panel' }, this.items.map((filterItem) => {
+        return (h("div", { key: '9b9fcc79913da68b49909965eb75f9a5b1701acb', class: 'searchcraft-filter-panel' }, this.items.map((filterItem) => {
             switch (filterItem.type) {
                 case 'dateRange': {
                     const item = filterItem;
@@ -107,7 +106,6 @@ const SearchcraftFilterPanel$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
             }
         })));
     }
-    static get style() { return SearchcraftFilterPanelStyle0; }
 }, [0, "searchcraft-filter-panel", {
         "items": [16],
         "unsubscribe": [32],