@searchcraft/javascript-sdk 0.7.2 → 0.8.1

package/dist/esm/searchcraft-filter-panel.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-3608c57d.js';
-import { u as useSearchcraftStore } from './store-aa071d9c.js';
-import { a as getMillis } from './units-b6eba560.js';
+import { u as useSearchcraftStore } from './SearchcraftStore-3cfd565a.js';
+import { g as getMillis } from './units-daaf96f5.js';
 
 const SearchcraftFilterPanel = class {
     constructor(hostRef) {
@@ -11,11 +11,11 @@ const SearchcraftFilterPanel = class {
      */
     items = [];
     unsubscribe;
-    lastQuery;
+    lastSearchTerm;
     searchStore = useSearchcraftStore.getState();
     componentDidLoad() {
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
-            this.lastQuery = state.query || '';
+            this.lastSearchTerm = state.searchTerm || '';
         });
     }
     disconnectedCallback() {
@@ -61,7 +61,7 @@ const SearchcraftFilterPanel = class {
      * Iterate through `items` and render them based on `type`
      */
     render() {
-        return (h("div", { key: '9b9fcc79913da68b49909965eb75f9a5b1701acb', class: 'searchcraft-filter-panel' }, this.items.map((filterItem) => {
+        return (h("div", { key: '7e3e39a09d392e6da9c387d8cd641a50171ddc59', class: 'searchcraft-filter-panel' }, this.items.map((filterItem) => {
             switch (filterItem.type) {
                 case 'dateRange': {
                     const item = filterItem;

package/dist/esm/searchcraft-filter-panel.entry.js.map

@@ -1 +1 @@
-{"file":"searchcraft-filter-panel.entry.js","mappings":"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","names":[],"sources":["src/components/searchcraft-filter-panel/searchcraft-filter-panel.tsx"],"sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport type {\n  FilterItem,\n  DateRangeFilterItem,\n  NumericFilterItem,\n  ExactMatchToggleFilterItem,\n  FacetsFilterItem,\n} from '../../types/searchcraft-filter-panel.types';\nimport { useSearchcraftStore } from '@provider/store';\nimport { getMillis } from '@utils';\n\n/**\n * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-filter-panel />\n * ```\n */\n@Component({\n  tag: 'searchcraft-filter-panel',\n  shadow: false,\n})\nexport class SearchcraftFilterPanel {\n  /**\n   * The items to filter.\n   */\n  @Prop() items: FilterItem[] = [];\n\n  @State() unsubscribe: (() => void) | undefined;\n  @State() lastQuery: string | undefined;\n\n  private searchStore = useSearchcraftStore.getState();\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (this.lastQuery !== state.query) {\n        // A place to put actions to do when the query changes\n      }\n      this.lastQuery = state.query || '';\n    });\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n  }\n\n  handleDateRangeChanged(fieldName: string, min: number, max: number) {\n    const start = new Date(min);\n    const end = new Date(max);\n    this.searchStore.addRangeValueForIndexField({\n      fieldName,\n      value: `${fieldName}:[${start.toISOString()} TO ${end.toISOString()}]`,\n    });\n\n    this.searchStore.search();\n  }\n\n  handleNumericRangeChanged(fieldName: string, min: number, max: number) {\n    this.searchStore.addRangeValueForIndexField({\n      fieldName,\n      value: `${fieldName}:[${min} TO ${max}]`,\n    });\n    this.searchStore.search();\n  }\n\n  handleFacetSelectionUpdated(fieldName: string, paths: string[]) {\n    if (paths.length > 0) {\n      this.searchStore.addFacetPathsForIndexField({\n        fieldName,\n        value: `${fieldName}: IN [${paths.join(' ')}]`,\n      });\n    } else {\n      this.searchStore.removeFacetPathsForIndexField(fieldName);\n    }\n    this.searchStore.search();\n  }\n\n  handleExactMatchToggleUpdated(isActive: boolean) {\n    this.searchStore.setSearchMode(isActive ? 'exact' : 'fuzzy');\n    this.searchStore.search();\n  }\n\n  handleMostRecentToggleUpdated(isActive: boolean) {\n    this.searchStore.setSortType(isActive ? 'desc' : 'asc');\n    this.searchStore.search();\n  }\n\n  /**\n   * Iterate through `items` and render them based on `type`\n   */\n  render() {\n    return (\n      <div class='searchcraft-filter-panel'>\n        {this.items.map((filterItem) => {\n          switch (filterItem.type) {\n            case 'dateRange': {\n              const item = filterItem as DateRangeFilterItem;\n              const min = new Date(item.options.minDate).getTime();\n              const max = new Date(item.options.maxDate).getTime();\n              const granularityValue = getMillis(item.options.granularity);\n              // return date range slider\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-slider\n                    min={min}\n                    max={max}\n                    granularity={granularityValue}\n                    dataType='date'\n                    onRangeChanged={(event) => {\n                      this.handleDateRangeChanged(\n                        item.fieldName,\n                        event.detail.startValue,\n                        event.detail.endValue,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'numericRange': {\n              const item = filterItem as NumericFilterItem;\n              // return date range slider\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-slider\n                    min={item.options.min}\n                    max={item.options.max}\n                    granularity={item.options.granularity}\n                    onRangeChanged={(event) => {\n                      this.handleNumericRangeChanged(\n                        item.fieldName,\n                        event.detail.startValue,\n                        event.detail.endValue,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'facets': {\n              const item = filterItem as FacetsFilterItem;\n              // return \"filters-list\"\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-facet-list\n                    fieldName={item.fieldName}\n                    onFacetSelectionUpdated={(event) => {\n                      this.handleFacetSelectionUpdated(\n                        item.fieldName,\n                        event.detail.paths,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'exactMatchToggle': {\n              const item = filterItem as ExactMatchToggleFilterItem;\n              return (\n                <searchcraft-toggle-button\n                  label={item.label}\n                  subLabel={item.options.subLabel}\n                  onToggleUpdated={(event) => {\n                    this.handleExactMatchToggleUpdated(event.detail);\n                  }}\n                />\n              );\n            }\n            case 'mostRecentToggle': {\n              const item = filterItem as ExactMatchToggleFilterItem;\n              return (\n                <searchcraft-toggle-button\n                  label={item.label}\n                  subLabel={item.options.subLabel}\n                  onToggleUpdated={(event) => {\n                    this.handleMostRecentToggleUpdated(event.detail);\n                  }}\n                />\n              );\n            }\n          }\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"searchcraft-filter-panel.entry.js","mappings":"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","names":[],"sources":["src/components/searchcraft-filter-panel/searchcraft-filter-panel.tsx"],"sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport type {\n  FilterItem,\n  DateRangeFilterItem,\n  NumericFilterItem,\n  ExactMatchToggleFilterItem,\n  FacetsFilterItem,\n} from '@searchcraft/core';\nimport { useSearchcraftStore } from '@provider/store';\nimport { getMillis } from '@utils';\n\n/**\n * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-filter-panel />\n * ```\n */\n@Component({\n  tag: 'searchcraft-filter-panel',\n  shadow: false,\n})\nexport class SearchcraftFilterPanel {\n  /**\n   * The items to filter.\n   */\n  @Prop() items: FilterItem[] = [];\n\n  @State() unsubscribe: (() => void) | undefined;\n  @State() lastSearchTerm: string | undefined;\n\n  private searchStore = useSearchcraftStore.getState();\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (this.lastSearchTerm !== state.searchTerm) {\n        // A place to put actions to do when the query changes\n      }\n      this.lastSearchTerm = state.searchTerm || '';\n    });\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n  }\n\n  handleDateRangeChanged(fieldName: string, min: number, max: number) {\n    const start = new Date(min);\n    const end = new Date(max);\n    this.searchStore.addRangeValueForIndexField({\n      fieldName,\n      value: `${fieldName}:[${start.toISOString()} TO ${end.toISOString()}]`,\n    });\n\n    this.searchStore.search();\n  }\n\n  handleNumericRangeChanged(fieldName: string, min: number, max: number) {\n    this.searchStore.addRangeValueForIndexField({\n      fieldName,\n      value: `${fieldName}:[${min} TO ${max}]`,\n    });\n    this.searchStore.search();\n  }\n\n  handleFacetSelectionUpdated(fieldName: string, paths: string[]) {\n    if (paths.length > 0) {\n      this.searchStore.addFacetPathsForIndexField({\n        fieldName,\n        value: `${fieldName}: IN [${paths.join(' ')}]`,\n      });\n    } else {\n      this.searchStore.removeFacetPathsForIndexField(fieldName);\n    }\n    this.searchStore.search();\n  }\n\n  handleExactMatchToggleUpdated(isActive: boolean) {\n    this.searchStore.setSearchMode(isActive ? 'exact' : 'fuzzy');\n    this.searchStore.search();\n  }\n\n  handleMostRecentToggleUpdated(isActive: boolean) {\n    this.searchStore.setSortType(isActive ? 'desc' : 'asc');\n    this.searchStore.search();\n  }\n\n  /**\n   * Iterate through `items` and render them based on `type`\n   */\n  render() {\n    return (\n      <div class='searchcraft-filter-panel'>\n        {this.items.map((filterItem) => {\n          switch (filterItem.type) {\n            case 'dateRange': {\n              const item = filterItem as DateRangeFilterItem;\n              const min = new Date(item.options.minDate).getTime();\n              const max = new Date(item.options.maxDate).getTime();\n              const granularityValue = getMillis(item.options.granularity);\n              // return date range slider\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-slider\n                    min={min}\n                    max={max}\n                    granularity={granularityValue}\n                    dataType='date'\n                    onRangeChanged={(event) => {\n                      this.handleDateRangeChanged(\n                        item.fieldName,\n                        event.detail.startValue,\n                        event.detail.endValue,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'numericRange': {\n              const item = filterItem as NumericFilterItem;\n              // return date range slider\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-slider\n                    min={item.options.min}\n                    max={item.options.max}\n                    granularity={item.options.granularity}\n                    onRangeChanged={(event) => {\n                      this.handleNumericRangeChanged(\n                        item.fieldName,\n                        event.detail.startValue,\n                        event.detail.endValue,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'facets': {\n              const item = filterItem as FacetsFilterItem;\n              // return \"filters-list\"\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-facet-list\n                    fieldName={item.fieldName}\n                    onFacetSelectionUpdated={(event) => {\n                      this.handleFacetSelectionUpdated(\n                        item.fieldName,\n                        event.detail.paths,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'exactMatchToggle': {\n              const item = filterItem as ExactMatchToggleFilterItem;\n              return (\n                <searchcraft-toggle-button\n                  label={item.label}\n                  subLabel={item.options.subLabel}\n                  onToggleUpdated={(event) => {\n                    this.handleExactMatchToggleUpdated(event.detail);\n                  }}\n                />\n              );\n            }\n            case 'mostRecentToggle': {\n              const item = filterItem as ExactMatchToggleFilterItem;\n              return (\n                <searchcraft-toggle-button\n                  label={item.label}\n                  subLabel={item.options.subLabel}\n                  onToggleUpdated={(event) => {\n                    this.handleMostRecentToggleUpdated(event.detail);\n                  }}\n                />\n              );\n            }\n          }\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/searchcraft-input-form_2.entry.js

@@ -1,11 +1,10 @@
 import { r as registerInstance, c as createEvent, h } from './index-3608c57d.js';
-import { u as useSearchcraftStore, b as ae } from './store-aa071d9c.js';
+import { u as useSearchcraftStore, g as ge } from './SearchcraftStore-3cfd565a.js';
 import { p as parseCustomStyles } from './styles-961644ef.js';
 import { c as classNames } from './index-72ac5051.js';
-import { g as getDocumentValueFromSearchResultMapping } from './units-b6eba560.js';
 
 const name = "@searchcraft/javascript-sdk";
-const version = "0.7.2";
+const version = "0.8.1";
 const description = "Searchcraft Javascript SDK";
 const author = "Searchcraft";
 const license = "Apache-2.0";
@@ -54,7 +53,7 @@ const dependencies = {
 	classnames: "^2.3.2"
 };
 const devDependencies = {
-	"@searchcraft/core": "^0.7.2",
+	"@searchcraft/core": "^0.8.1",
 	"@searchcraft/javascript-sdk": "*",
 	"@stencil/core": "^4.7.0",
 	"@stencil/react-output-target": "^0.8.2",
@@ -155,7 +154,7 @@ const SearchcraftInput = class {
     searchStore = useSearchcraftStore.getState();
     init() {
         if (this.config && !this.isSearchcraftInitialized) {
-            const searchcraft = new ae(this.config, {
+            const searchcraft = new ge(this.config, {
                 sdkName: packageJson.name,
                 sdkVersion: packageJson.version,
             });
@@ -173,25 +172,21 @@ const SearchcraftInput = class {
     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;
         }
+        if (input.value.trim() === '') {
+            this.inputCleared?.emit();
+        }
         this.performSearch(input.value);
     };
     performSearch = async (value) => {
-        if (value === useSearchcraftStore.getState().query) {
+        if (value === useSearchcraftStore.getState().searchTerm) {
             return;
         }
         this.searchTerm = value.trim();
         this.error = false;
-        this.searchStore.setQuery(this.searchTerm);
+        this.searchStore.setSearchTerm(this.searchTerm);
         this.querySubmit?.emit(this.searchTerm);
         try {
             await this.searchStore.search();
@@ -204,8 +199,8 @@ const SearchcraftInput = class {
     handleClearInput = () => {
         this.inputValue = '';
         this.searchTerm = '';
-        this.searchStore.setQuery('');
-        this.searchStore.setSearchResults(null);
+        this.searchStore.setSearchTerm('');
+        this.searchStore.setSearchClientResponseItems([]);
         this.error = false;
         this.inputCleared?.emit();
     };
@@ -225,9 +220,9 @@ const SearchcraftInput = class {
         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) => {
+        return (h("form", { key: 'bc665c50db8de601a3c95266bdf063ebb988d6a8', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, h("div", { key: 'a6936858c08d866b66b887c7ae03b35961cf04a1', class: inputGridClassNames, style: inputGridStyles }, h("div", { key: '915ac892fccb771f1c5338cd2d52f16f1793615d', class: 'searchcraft-input-button-wrapper' }, h("searchcraft-button", { key: '81447da28dcb9cb80a8cdf0c6765c909c2746585', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), this.inputLabel && (h("div", { key: '939c3407d16075be25ff23bf9b379c05ba1a66d4', class: 'searchcraft-input-label-wrapper' }, h("searchcraft-input-label", { key: '9d9c4043c04132b27710cca47abf102a188a80b9', label: this.inputLabel }))), this.error && (h("div", { key: '7e309f8a5c81a41bdd593f4e4ee1ba30c531c97d', class: 'searchcraft-input-error-wrapper' }, h("searchcraft-error-message", { key: 'de947c04f0948e36786f50ac65720eeb598ae7bf', errorMessage: 'Something went wrong.' }))), h("div", { key: 'bcf774e3fa5164ab838b634badf2002495437fe7', class: 'searchcraft-input-wrapper' }, h("input", { key: 'fd9759559712a39d3493e069ddddf7c267879c84', 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' }))))))));
+            }, placeholder: this.placeholderValue, style: validatedCustomStyles, type: 'text', value: this.inputValue }), h("div", { key: '8564b18962feeea8d9ab8bb46af4ba28a089d8f4', class: 'searchcraft-input-search-icon-wrapper' }, h("svg", { key: '90c3636ea306ed70887d76deaf058ab3ace61134', 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: 'c9921263b87df28e06bab9990e324aa1bebac767', id: 'searchcraft-title' }, "Searchcraft Search Icon Light"), h("path", { key: 'bb82073fd722ff4a74e1a86c74cdf0dd9a8080b4', 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: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), isShowingClearButton && (h("button", { key: 'e708cb9426171bfdfb29e0a98206d086fa14e15e', type: 'button', class: 'searchcraft-input-clear-button', onClick: this.handleClearInput }, h("svg", { key: '243b6eacc68fa8cc57d5e11b9b317d7fe581406f', 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: 'd8a8b44fe04345b5b27ba33ec4ba510500eab3bf', id: 'icon-title' }, "Searchcraft Clear Input Icon Light"), h("path", { key: '0602cbff7aac6755dabb496b84e6ef3e4e2ac7a6', 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: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))))))));
     }
     static get watchers() { return {
         "config": ["onConfigChange"]
@@ -244,22 +239,14 @@ const SearchcraftPopoverListView = class {
      */
     popoverResultMappings;
     /**
-     * The documents to render in the list view.
+     * The items to render in the list view.
      */
-    documents;
-    renderDocument(document, index) {
-        /**
-         * Index field values -> Result container props mappings.
-         */
-        const titleContent = getDocumentValueFromSearchResultMapping(document, this.popoverResultMappings?.title);
-        const subtitleContent = getDocumentValueFromSearchResultMapping(document, this.popoverResultMappings?.subtitle);
-        const href = getDocumentValueFromSearchResultMapping(document, this.popoverResultMappings?.href);
-        const imageSource = getDocumentValueFromSearchResultMapping(document, this.popoverResultMappings?.imageSource);
-        const imageAlt = getDocumentValueFromSearchResultMapping(document, this.popoverResultMappings?.imageAlt);
-        return (h("searchcraft-popover-list-item", { key: `${document.document_id}-${index}`, "title-content": titleContent, "subtitle-content": subtitleContent, "image-src": imageSource, "image-alt": imageAlt, href: href, "document-position": index }));
-    }
+    searchClientResponseItems;
+    adClientResponseItems;
+    searchResultsPage;
+    searchResultsPerPage;
     render() {
-        return (h("div", { key: '2eee5552a2bf24bd0c75a224d4de6da8526df316', class: 'searchcraft-popover-list-view' }, this.documents?.map((document, index) => this.renderDocument(document, index))));
+        return (h("div", { key: 'a869d98e96f6fbbc80ecb79058c4753b4a3a8b1d', class: 'searchcraft-popover-list-view' }, this.adClientResponseItems?.map((item) => (h("searchcraft-popover-list-item-ad", { adClientResponseItem: item, key: item.adId }))), this.searchClientResponseItems?.map((item, index) => (h("searchcraft-popover-list-item", { item: item, key: item.id, popoverResultMappings: this.popoverResultMappings, documentPosition: this.searchResultsPerPage * (this.searchResultsPage - 1) + index })))));
     }
 };
 

package/dist/esm/searchcraft-input-form_2.entry.js.map

@@ -1 +1 @@
-{"file":"searchcraft-input-form.searchcraft-popover-list-view.entry.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA8Ca,gBAAgB;;;;;;;;;;;;;IAInB,MAAM,CAAgC;;;;IAItC,UAAU,GAAG,IAAI,CAAC;;;;IAIlB,eAAe,GAA8B,MAAM,CAAC;;;;IAIpD,WAAW,CAAqB;;;;IAIhC,UAAU,CAAqB;;;;IAI/B,YAAY,GAAoC,EAAE,CAAC;;;;IAInD,gBAAgB,GAAG,cAAc,CAAC;;;;IAIlC,UAAU,GAAG,EAAE,CAAC;;;;IAIf,YAAY,CAAsB;;;;IAIlC,iBAAiB,CAAsB;;;;IAIvC,UAAU,CAAsB;;;;IAIhC,SAAS,CAAsB;;;;IAI/B,SAAS,CAAsB;;;;IAI/B,WAAW,CAAwB;IAEnC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IAC7B,KAAK,GAAG,KAAK,CAAC;IACd,wBAAwB,GAAG,KAAK,CAAC;IAElC,WAAW,GAAG,mBAAmB,CAAC,QAAQ,EAAE,CAAC;IAErD,IAAI;QACF,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE;YACjD,MAAM,WAAW,GAAG,IAAIA,EAAe,CAAC,IAAI,CAAC,MAAM,EAAE;gBACnD,OAAO,EAAE,WAAW,CAAC,IAAI;gBACzB,UAAU,EAAE,WAAW,CAAC,OAAO;aAChC,CAAC,CAAC;YACH,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;YAC/C,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC;YACrC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;SACxB;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAGD,cAAc;QACZ,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAED,aAAa,GAAG,CAAC,KAAY;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC;QAE9B,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC7B,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC;YAC1B,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YAC9B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACxC,OAAO;SACR;QAED,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO;SACR;QAED,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACjC,CAAC;IAEM,aAAa,GAAG,OAAO,KAAa;QAC1C,IAAI,KAAK,KAAK,mBAAmB,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE;YAClD,OAAO;SACR;QAED,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;QAC/B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC3C,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAExC,IAAI;YACF,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;SACjC;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC;SAC3B;KACF,CAAC;IAEF,gBAAgB,GAAG;QACjB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC9B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACxC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QAEnB,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC;KAC3B,CAAC;IAEF,gBAAgB,GAAG,OAAO,KAAY;QACpC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3C,CAAC;IAEF,MAAM;QACJ,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAEnE,MAAM,oBAAoB,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;QAExD,MAAM,mBAAmB,GAAG,UAAU,CAAC,wBAAwB,EAAE;YAC/D,mCAAmC,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;YACpE,oCAAoC,EAAE,IAAI,CAAC,eAAe,KAAK,OAAO;YACtE,mCAAmC,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;SACrE,CAAC,CAAC;QAEH,MAAM,qBAAqB,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC;QAC5D,MAAM,eAAe,GAAG;YACtB,GAAG,EAAE,qBAAqB,GAAG,SAAS,GAAG,SAAS;SACnD,CAAC;QAEF,QACE,6DAAM,KAAK,EAAC,wBAAwB,EAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,IAClE,4DAAK,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,eAAe,IACrD,4DAAK,KAAK,EAAC,kCAAkC,IAC3C,2EACE,aAAa,EAAE,IAAI,CAAC,gBAAgB,EACpC,KAAK,EAAE,IAAI,CAAC,WAAW,GACvB,CACE,EACL,IAAI,CAAC,UAAU,KACd,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,gFAAyB,KAAK,EAAE,IAAI,CAAC,UAAU,GAAI,CAC/C,CACP,EACA,IAAI,CAAC,KAAK,KACT,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,kFAA2B,YAAY,EAAC,uBAAuB,GAAG,CAC9D,CACP,EACD,4DAAK,KAAK,EAAC,2BAA2B,IACpC,8DACE,YAAY,EAAC,KAAK,EAClB,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,EACtC,MAAM,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,EACpC,OAAO,EAAE,CAAC,KAAK;gBACb,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;aAC3B,EACD,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,KAAK,EAAE,qBAAqB,EAC5B,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,UAAU,GACtB,EACF,4DAAK,KAAK,EAAC,uCAAuC,IAChD,4DACE,KAAK,EAAC,+BAA+B,EACrC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,mBAAmB,IAEnC,8DAAO,EAAE,EAAC,mBAAmB,oCAErB,EACR,6DACE,CAAC,EAAC,mNAAmN,EACrN,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACF,EACL,oBAAoB,KACnB,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,gCAAgC,EACtC,OAAO,EAAE,IAAI,CAAC,gBAAgB,IAE9B,4DACE,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,8DAAO,EAAE,EAAC,YAAY,yCAEd,EACR,6DACE,CAAC,EAAC,uIAAuI,EACzI,MAAM,EAAC,OAAO,kBACD,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACC,CACV,CACG,CACF,CACD,EACP;KACH;;;;;;MCvQU,0BAA0B;;;;;;;;IAK7B,qBAAqB,CAAoC;;;;IAIzD,SAAS,CAAwC;IAEzD,cAAc,CAAC,QAAiC,EAAE,KAAa;;;;QAI7D,MAAM,YAAY,GAAG,uCAAuC,CAC1D,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,KAAK,CAClC,CAAC;QACF,MAAM,eAAe,GAAG,uCAAuC,CAC7D,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CACrC,CAAC;QACF,MAAM,IAAI,GAAG,uCAAuC,CAClD,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,IAAI,CACjC,CAAC;QACF,MAAM,WAAW,GAAG,uCAAuC,CACzD,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,WAAW,CACxC,CAAC;QACF,MAAM,QAAQ,GAAG,uCAAuC,CACtD,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CACrC,CAAC;QAEF,QACE,qCACE,GAAG,EAAE,GAAG,QAAQ,CAAC,WAAW,IAAI,KAAK,EAAE,mBACxB,YAAY,sBACT,eAAe,eACtB,WAAW,eACX,QAAQ,EACnB,IAAI,EAAE,IAAI,uBACS,KAAK,GACxB,EACF;KACH;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,KACnC,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CACrC,CACG,EACN;KACH;;;;;","names":["SearchcraftCore"],"sources":["src/components/searchcraft-input-form/searchcraft-input-form.tsx","src/components/searchcraft-popover-list-view/searchcraft-popover-list-view.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","import { Component, h, Prop } from '@stencil/core';\n\nimport { getDocumentValueFromSearchResultMapping } from '@utils';\nimport type { PopoverResultMappings } from 'types';\n\n/**\n * This web component is designed to display a list of results within a popover interface.\n * It is consumed within the `searchcraft-popover-form` component.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-list-view />\n * ```\n */\n@Component({\n  tag: 'searchcraft-popover-list-view',\n  shadow: false,\n})\nexport class SearchcraftPopoverListView {\n  /**\n   * The mappings that define how the data in the documents are mapped to the\n   * list-view-item elements.\n   */\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n  /**\n   * The documents to render in the list view.\n   */\n  @Prop() documents: Record<string, unknown>[] | undefined;\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.popoverResultMappings?.title,\n    );\n    const subtitleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.subtitle,\n    );\n    const href = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.href,\n    );\n    const imageSource = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.imageSource,\n    );\n    const imageAlt = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.imageAlt,\n    );\n\n    return (\n      <searchcraft-popover-list-item\n        key={`${document.document_id}-${index}`}\n        title-content={titleContent}\n        subtitle-content={subtitleContent}\n        image-src={imageSource}\n        image-alt={imageAlt}\n        href={href}\n        document-position={index}\n      />\n    );\n  }\n\n  render() {\n    return (\n      <div class='searchcraft-popover-list-view'>\n        {this.documents?.map((document, index) =>\n          this.renderDocument(document, index),\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"searchcraft-input-form.searchcraft-popover-list-view.entry.js","mappings":"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","names":["SearchcraftCore"],"sources":["src/components/searchcraft-input-form/searchcraft-input-form.tsx","src/components/searchcraft-popover-list-view/searchcraft-popover-list-view.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 * searchInputForm.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 (!this.autoSearch) {\n      return;\n    }\n\n    if (input.value.trim() === '') {\n      this.inputCleared?.emit();\n    }\n\n    this.performSearch(input.value);\n  };\n\n  private performSearch = async (value: string) => {\n    if (value === useSearchcraftStore.getState().searchTerm) {\n      return;\n    }\n\n    this.searchTerm = value.trim();\n    this.error = false;\n    this.searchStore.setSearchTerm(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.setSearchTerm('');\n    this.searchStore.setSearchClientResponseItems([]);\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='currentColor'\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='currentColor'\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","import type {\n  AdClientResponseItem,\n  SearchClientResponseItem,\n} from '@searchcraft/core';\nimport { Component, h, Prop } from '@stencil/core';\n\nimport type { PopoverResultMappings } from '@searchcraft/core';\n\n/**\n * This web component is designed to display a list of results within a popover interface.\n * It is consumed within the `searchcraft-popover-form` component.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-list-view />\n * ```\n */\n@Component({\n  tag: 'searchcraft-popover-list-view',\n  shadow: false,\n})\nexport class SearchcraftPopoverListView {\n  /**\n   * The mappings that define how the data in the documents are mapped to the\n   * list-view-item elements.\n   */\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n  /**\n   * The items to render in the list view.\n   */\n  @Prop() searchClientResponseItems: SearchClientResponseItem[] | undefined;\n  @Prop() adClientResponseItems: AdClientResponseItem[] | undefined;\n  @Prop() searchResultsPage!: number;\n  @Prop() searchResultsPerPage!: number;\n\n  render() {\n    return (\n      <div class='searchcraft-popover-list-view'>\n        {this.adClientResponseItems?.map((item) => (\n          <searchcraft-popover-list-item-ad\n            adClientResponseItem={item}\n            key={item.adId}\n          />\n        ))}\n        {this.searchClientResponseItems?.map((item, index) => (\n          <searchcraft-popover-list-item\n            item={item}\n            key={item.id}\n            popoverResultMappings={this.popoverResultMappings}\n            documentPosition={\n              this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/searchcraft-javascript-sdk.js

@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["searchcraft-filter-panel",[[0,"searchcraft-filter-panel",{"items":[16],"unsubscribe":[32],"lastQuery":[32]}]]],["searchcraft-base-search-results",[[4,"searchcraft-base-search-results",{"adInterval":[2,"ad-interval"],"customStylesForResults":[1,"custom-styles-for-results"],"searchResultMappings":[16],"placeAdAtEnd":[4,"place-ad-at-end"],"placeAdAtStart":[4,"place-ad-at-start"],"resultImagePlacement":[1,"result-image-placement"],"buttonLabel":[1,"button-label"],"buttonTarget":[1,"button-target"],"buttonRel":[1,"button-rel"],"containerTarget":[1,"container-target"],"containerRel":[1,"container-rel"],"hasSearched":[32],"query":[32],"searchResults":[32]}]]],["searchcraft-popover-button",[[4,"searchcraft-popover-button"]]],["searchcraft-results-info",[[0,"searchcraft-results-info",{"isRequesting":[32],"resultsCount":[32],"responseTime":[32],"query":[32]}]]],["searchcraft-theme",[[0,"searchcraft-theme"]]],["searchcraft-base-search-result",[[0,"searchcraft-base-search-result",{"titleContent":[1,"title-content"],"subtitleContent":[1,"subtitle-content"],"bodyContent":[1,"body-content"],"footerContent":[1,"footer-content"],"buttonLabel":[1,"button-label"],"buttonHref":[1,"button-href"],"buttonTarget":[1,"button-target"],"buttonRel":[1,"button-rel"],"containerHref":[1,"container-href"],"containerTarget":[1,"container-target"],"containerRel":[1,"container-rel"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"imagePlacement":[1,"image-placement"],"customStyles":[1,"custom-styles"],"documentPosition":[2,"document-position"]}]]],["searchcraft-popover-list-item",[[0,"searchcraft-popover-list-item",{"titleContent":[1,"title-content"],"subtitleContent":[1,"subtitle-content"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"href":[1],"documentPosition":[2,"document-position"]}]]],["searchcraft-button_3",[[0,"searchcraft-button",{"iconElement":[16],"iconOnly":[4,"icon-only"],"iconPosition":[1,"icon-position"],"label":[1],"isRequesting":[32]}],[0,"searchcraft-input-label",{"inputLabelClassName":[1,"input-label-class-name"],"label":[1]}],[0,"searchcraft-error-message",{"errorMessage":[1,"error-message"]}]]],["searchcraft-input-form_2",[[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]},null,{"config":["onConfigChange"]}],[0,"searchcraft-popover-list-view",{"popoverResultMappings":[16],"documents":[16]}]]],["searchcraft-popover-form",[[0,"searchcraft-popover-form",{"config":[16],"type":[1],"popoverResultMappings":[16],"hotkey":[1],"hotkeyModifier":[1,"hotkey-modifier"],"isPopoverVisibleInState":[32],"unsubscribe":[32],"searchResults":[32],"searchTerm":[32],"isFocused":[32],"breakpointSm":[32],"breakpointMd":[32],"breakpointLg":[32],"modalElement":[32]}]]],["searchcraft-facet-list_3",[[0,"searchcraft-facet-list",{"fieldName":[1,"field-name"],"baseFacetRoot":[32],"facetRoot":[32],"selectedPaths":[32],"lastTimeTaken":[32],"hasNewSearchTerm":[32],"lastQuery":[32],"lastSearchMode":[32],"lastSortType":[32],"unsubscribe":[32]}],[0,"searchcraft-slider",{"max":[2],"min":[2],"granularity":[2],"dataType":[1,"data-type"],"endValue":[32],"startValue":[32],"lastFocusedHandle":[32]}],[0,"searchcraft-toggle-button",{"label":[1],"subLabel":[1,"sub-label"],"isActive":[32],"unsubscribe":[32],"lastQuery":[32]}]]]], options);
+  return bootstrapLazy([["searchcraft-base-search-results",[[4,"searchcraft-base-search-results",{"customStylesForResults":[1,"custom-styles-for-results"],"searchResultMappings":[16],"resultImagePlacement":[1,"result-image-placement"],"buttonLabel":[1,"button-label"],"buttonTarget":[1,"button-target"],"buttonRel":[1,"button-rel"],"containerTarget":[1,"container-target"],"containerRel":[1,"container-rel"],"searchTerm":[32],"searchClientResponseItems":[32],"adClientResponseItems":[32],"searchResultsPerPage":[32],"searchResultsPage":[32]}]]],["searchcraft-filter-panel",[[0,"searchcraft-filter-panel",{"items":[16],"unsubscribe":[32],"lastSearchTerm":[32]}]]],["searchcraft-pagination",[[0,"searchcraft-pagination",{"customStyles":[1,"custom-styles"],"searchTerm":[32],"searchResultsPerPage":[32],"searchResultsPage":[32],"searchResultsCount":[32],"searchResultsPagesCount":[32],"searchResultsRangeMin":[32],"searchResultsRangeMax":[32],"setSearchResultsPage":[32]}]]],["searchcraft-search-results-per-page",[[0,"searchcraft-search-results-per-page",{"increment":[8],"customStyles":[1,"custom-styles"],"searchTerm":[32],"searchResultsPage":[32],"searchResultsPerPage":[32],"searchResultsCount":[32],"searchResultsPagesCount":[32],"initialSearchResultsPerPage":[32],"setSearchResultsPerPage":[32],"setSearchResultsPage":[32]}]]],["searchcraft-popover-button",[[4,"searchcraft-popover-button"]]],["searchcraft-results-info",[[0,"searchcraft-results-info",{"customFormatter":[16],"customStyles":[1,"custom-styles"],"searchTerm":[32],"searchResultsPage":[32],"searchResultsPerPage":[32],"searchResultsCount":[32],"count":[32],"range":[32],"responseTime":[32]}]]],["searchcraft-theme",[[0,"searchcraft-theme",{"theme":[1],"customTheme":[1,"custom-theme"]}]]],["searchcraft-input-form_2",[[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]},null,{"config":["onConfigChange"]}],[0,"searchcraft-popover-list-view",{"popoverResultMappings":[16],"searchClientResponseItems":[16],"adClientResponseItems":[16],"searchResultsPage":[2,"search-results-page"],"searchResultsPerPage":[2,"search-results-per-page"]}]]],["searchcraft-popover-form",[[0,"searchcraft-popover-form",{"config":[16],"type":[1],"popoverResultMappings":[16],"hotkey":[1],"hotkeyModifier":[1,"hotkey-modifier"],"isPopoverVisibleInState":[32],"unsubscribe":[32],"searchClientResponseItems":[32],"adClientResponseItems":[32],"searchTerm":[32],"isFocused":[32],"breakpointSm":[32],"breakpointMd":[32],"breakpointLg":[32],"searchResultsPage":[32],"searchResultsPerPage":[32],"modalElement":[32]}]]],["searchcraft-select",[[0,"searchcraft-select",{"caption":[1],"disabled":[4],"inputId":[1,"input-id"],"label":[1],"labelId":[1,"label-id"],"name":[1],"options":[1],"customStyles":[1,"custom-styles"],"searchResultsPerPage":[32],"setSearchResultsPage":[32],"setSearchResultsPerPage":[32]}]]],["searchcraft-base-search-result_2",[[0,"searchcraft-base-search-result",{"item":[16],"searchResultMappings":[16],"containerTarget":[1,"container-target"],"containerRel":[1,"container-rel"],"buttonTarget":[1,"button-target"],"buttonRel":[1,"button-rel"],"imagePlacement":[1,"image-placement"],"customStyles":[1,"custom-styles"],"documentPosition":[2,"document-position"],"titleContent":[32],"subtitleContent":[32],"bodyContent":[32],"footerContent":[32],"buttonLabel":[32],"buttonHref":[32],"containerHref":[32],"imageSrc":[32],"imageAlt":[32]}],[0,"searchcraft-base-search-result-ad",{"adClientResponseItem":[16]}]]],["searchcraft-facet-list_3",[[0,"searchcraft-facet-list",{"fieldName":[1,"field-name"],"baseFacetRoot":[32],"facetRoot":[32],"selectedPaths":[32],"lastTimeTaken":[32],"hasNewSearchTerm":[32],"lastSearchTerm":[32],"lastSearchMode":[32],"lastSortType":[32],"unsubscribe":[32]}],[0,"searchcraft-slider",{"max":[2],"min":[2],"granularity":[2],"dataType":[1,"data-type"],"endValue":[32],"startValue":[32],"lastFocusedHandle":[32]}],[0,"searchcraft-toggle-button",{"label":[1],"subLabel":[1,"sub-label"],"isActive":[32],"unsubscribe":[32],"lastSearchTerm":[32]}]]],["searchcraft-popover-list-item_2",[[0,"searchcraft-popover-list-item",{"item":[16],"popoverResultMappings":[16],"documentPosition":[2,"document-position"],"href":[32],"imageSrc":[32],"imageAlt":[32],"titleContent":[32],"subtitleContent":[32]}],[0,"searchcraft-popover-list-item-ad",{"adClientResponseItem":[16]}]]],["searchcraft-button_3",[[0,"searchcraft-input-label",{"inputLabelClassName":[1,"input-label-class-name"],"label":[1]}],[0,"searchcraft-button",{"hierarchy":[1],"disabled":[4],"icon":[16],"iconOnly":[4,"icon-only"],"iconPosition":[1,"icon-position"],"label":[1],"type":[1]}],[0,"searchcraft-error-message",{"errorMessage":[1,"error-message"]}]]]], options);
 });
 
 //# sourceMappingURL=searchcraft-javascript-sdk.js.map

package/dist/esm/searchcraft-pagination.entry.js

@@ -0,0 +1,102 @@
+import { r as registerInstance, h } from './index-3608c57d.js';
+import { u as useSearchcraftStore } from './SearchcraftStore-3cfd565a.js';
+import { c as classNames } from './index-72ac5051.js';
+import { p as parseCustomStyles } from './styles-961644ef.js';
+
+const SearchcraftPagination = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * The custom styles object.
+     */
+    customStyles;
+    // store vars
+    searchTerm;
+    searchResultsPerPage;
+    searchResultsPage;
+    searchResultsCount;
+    // local vars
+    searchResultsPagesCount = 1;
+    searchResultsRangeMin = 1;
+    searchResultsRangeMax = 1;
+    // store functions
+    setSearchResultsPage = () => { };
+    unsubscribe = () => { };
+    componentDidLoad() {
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            // store vars
+            this.searchTerm = state.searchTerm;
+            this.searchResultsPerPage = state.searchResultsPerPage;
+            this.searchResultsPage = state.searchResultsPage;
+            this.searchResultsCount = state.searchResultsCount;
+            // local vars
+            this.searchResultsPagesCount = Math.ceil(this.searchResultsCount / this.searchResultsPerPage);
+            this.searchResultsRangeMin =
+                (this.searchResultsPage - 1) * this.searchResultsPerPage + 1;
+            this.searchResultsRangeMax =
+                (this.searchResultsPerPage - 1) * this.searchResultsPerPage +
+                    this.searchResultsPerPage;
+            // store functions
+            this.setSearchResultsPage = state.setSearchResultsPage;
+        });
+    }
+    disconnectedCallback() {
+        this.unsubscribe?.();
+    }
+    handleGoToPage(page) {
+        this.setSearchResultsPage(page);
+    }
+    renderOddPaginationItem(page) {
+        return (h("li", null, h("button", { class: classNames('searchcraft-pagination-item', {
+                'searchcraft-pagination-item-active': this.searchResultsPage === page,
+            }), onClick: () => this.handleGoToPage(page), type: 'button' }, page)));
+    }
+    renderEvenPaginationItem(page) {
+        if (this.searchResultsPagesCount <= page) {
+            return;
+        }
+        if (this.searchResultsPagesCount <= 5 ||
+            page < Math.ceil(this.searchResultsPagesCount / 2) // is the first or second even pagination item
+            ? this.searchResultsPage <= page + 1
+            : this.searchResultsPage >= page - 1) {
+            return (h("li", null, h("button", { class: classNames('searchcraft-pagination-item', {
+                    'searchcraft-pagination-item-active': this.searchResultsPage === page,
+                }), onClick: () => this.handleGoToPage(page), type: 'button' }, page)));
+        }
+        return (h("li", null, h("span", { class: 'searchcraft-pagination-item' }, "...")));
+    }
+    renderMiddlePaginationItem() {
+        if (this.searchResultsPagesCount <= 3) {
+            return;
+        }
+        if (this.searchResultsPagesCount <= 5 ||
+            this.searchResultsPage <= 3 ||
+            this.searchResultsPage >= this.searchResultsPagesCount - 2) {
+            return (h("li", null, h("button", { class: classNames('searchcraft-pagination-item', {
+                    'searchcraft-pagination-item-active': this.searchResultsPage === 3 ||
+                        this.searchResultsPage === this.searchResultsPagesCount - 2,
+                }), type: 'button', onClick: () => this.handleGoToPage(this.searchResultsPage >= this.searchResultsPagesCount - 2
+                    ? this.searchResultsPagesCount - 2
+                    : 3) }, this.searchResultsPage >= this.searchResultsPagesCount - 2
+                ? this.searchResultsPagesCount - 2
+                : 3)));
+        }
+        return (h("li", null, h("span", { class: 'searchcraft-pagination-item searchcraft-pagination-item-active' }, this.searchResultsPage)));
+    }
+    render() {
+        // early return if there isn't a searchTerm or there is 1 or fewer pages of results
+        if (!this.searchTerm || this.searchResultsPagesCount <= 1) {
+            return;
+        }
+        return (h("div", { class: classNames('searchcraft-pagination', parseCustomStyles(this.customStyles || {})) }, h("div", { class: 'searchcraft-pagination-control' }, h("searchcraft-button", { disabled: this.searchResultsPage === 1, hierarchy: 'tertiary', onButtonClick: () => this.handleGoToPage(Math.max(1, this.searchResultsPage - 1)), label: 'PREVIOUS', iconPosition: 'left', icon: h("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, h("title", null, "Previous page icon"), h("path", { d: 'M12.5 15L7.5 10L12.5 5', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })) })), h("ul", { class: 'searchcraft-pagination-list' }, this.renderOddPaginationItem(1), this.renderEvenPaginationItem(2), this.renderMiddlePaginationItem(), this.renderEvenPaginationItem(this.searchResultsPagesCount > 4
+            ? this.searchResultsPagesCount - 1
+            : 4), this.renderOddPaginationItem(this.searchResultsPagesCount)), h("div", { class: 'searchcraft-pagination-control' }, h("searchcraft-button", { disabled: this.searchResultsPage === this.searchResultsPagesCount, hierarchy: 'tertiary', onButtonClick: () => {
+                this.handleGoToPage(Math.min(this.searchResultsPagesCount, this.searchResultsPage + 1));
+            }, label: 'NEXT', iconPosition: 'right', icon: h("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, h("title", null, "Next page icon"), h("path", { d: 'M7.5 15L12.5 10L7.5 5', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })) }))));
+    }
+};
+
+export { SearchcraftPagination as searchcraft_pagination };
+
+//# sourceMappingURL=searchcraft-pagination.entry.js.map

package/dist/esm/searchcraft-pagination.entry.js.map

@@ -0,0 +1 @@
+{"file":"searchcraft-pagination.entry.js","mappings":"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","names":[],"sources":["src/components/searchcraft-pagination/searchcraft-pagination.tsx"],"sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport { Component, h, State, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils';\n\n/**\n * This web component is designed to facilitate pagination of search results.\n * Once a query is submitted, calculates the number for pages.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-pagination />\n * ```\n */\n@Component({\n  tag: 'searchcraft-pagination',\n  shadow: false,\n})\nexport class SearchcraftPagination {\n  /**\n   * The custom styles object.\n   */\n  @Prop() customStyles?: string;\n\n  // store vars\n  @State() searchTerm;\n  @State() searchResultsPerPage;\n  @State() searchResultsPage;\n  @State() searchResultsCount;\n\n  // local vars\n  @State() searchResultsPagesCount = 1;\n  @State() searchResultsRangeMin = 1;\n  @State() searchResultsRangeMax = 1;\n\n  // store functions\n  @State() setSearchResultsPage: (page: number) => void = () => {};\n\n  private unsubscribe: () => void = () => {};\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      // store vars\n      this.searchTerm = state.searchTerm;\n      this.searchResultsPerPage = state.searchResultsPerPage;\n      this.searchResultsPage = state.searchResultsPage;\n      this.searchResultsCount = state.searchResultsCount;\n\n      // local vars\n      this.searchResultsPagesCount = Math.ceil(\n        this.searchResultsCount / this.searchResultsPerPage,\n      );\n      this.searchResultsRangeMin =\n        (this.searchResultsPage - 1) * this.searchResultsPerPage + 1;\n      this.searchResultsRangeMax =\n        (this.searchResultsPerPage - 1) * this.searchResultsPerPage +\n        this.searchResultsPerPage;\n\n      // store functions\n      this.setSearchResultsPage = state.setSearchResultsPage;\n    });\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n  }\n\n  handleGoToPage(page: number) {\n    this.setSearchResultsPage(page);\n  }\n\n  renderOddPaginationItem(page: number) {\n    return (\n      <li>\n        <button\n          class={classNames('searchcraft-pagination-item', {\n            'searchcraft-pagination-item-active':\n              this.searchResultsPage === page,\n          })}\n          onClick={() => this.handleGoToPage(page)}\n          type='button'\n        >\n          {page}\n        </button>\n      </li>\n    );\n  }\n\n  renderEvenPaginationItem(page: number) {\n    if (this.searchResultsPagesCount <= page) {\n      return;\n    }\n\n    if (\n      this.searchResultsPagesCount <= 5 ||\n      page < Math.ceil(this.searchResultsPagesCount / 2) // is the first or second even pagination item\n        ? this.searchResultsPage <= page + 1\n        : this.searchResultsPage >= page - 1\n    ) {\n      return (\n        <li>\n          <button\n            class={classNames('searchcraft-pagination-item', {\n              'searchcraft-pagination-item-active':\n                this.searchResultsPage === page,\n            })}\n            onClick={() => this.handleGoToPage(page)}\n            type='button'\n          >\n            {page}\n          </button>\n        </li>\n      );\n    }\n\n    return (\n      <li>\n        <span class='searchcraft-pagination-item'>...</span>\n      </li>\n    );\n  }\n\n  renderMiddlePaginationItem() {\n    if (this.searchResultsPagesCount <= 3) {\n      return;\n    }\n\n    if (\n      this.searchResultsPagesCount <= 5 ||\n      this.searchResultsPage <= 3 ||\n      this.searchResultsPage >= this.searchResultsPagesCount - 2\n    ) {\n      return (\n        <li>\n          <button\n            class={classNames('searchcraft-pagination-item', {\n              'searchcraft-pagination-item-active':\n                this.searchResultsPage === 3 ||\n                this.searchResultsPage === this.searchResultsPagesCount - 2,\n            })}\n            type='button'\n            onClick={() =>\n              this.handleGoToPage(\n                this.searchResultsPage >= this.searchResultsPagesCount - 2\n                  ? this.searchResultsPagesCount - 2\n                  : 3,\n              )\n            }\n          >\n            {this.searchResultsPage >= this.searchResultsPagesCount - 2\n              ? this.searchResultsPagesCount - 2\n              : 3}\n          </button>\n        </li>\n      );\n    }\n\n    return (\n      <li>\n        <span class='searchcraft-pagination-item searchcraft-pagination-item-active'>\n          {this.searchResultsPage}\n        </span>\n      </li>\n    );\n  }\n\n  render() {\n    // early return if there isn't a searchTerm or there is 1 or fewer pages of results\n    if (!this.searchTerm || this.searchResultsPagesCount <= 1) {\n      return;\n    }\n\n    return (\n      <div\n        class={classNames(\n          'searchcraft-pagination',\n          parseCustomStyles(this.customStyles || {}),\n        )}\n      >\n        <div class='searchcraft-pagination-control'>\n          <searchcraft-button\n            disabled={this.searchResultsPage === 1}\n            hierarchy='tertiary'\n            onButtonClick={() =>\n              this.handleGoToPage(Math.max(1, this.searchResultsPage - 1))\n            }\n            label='PREVIOUS'\n            iconPosition='left'\n            icon={\n              <svg\n                width='20'\n                height='20'\n                viewBox='0 0 20 20'\n                fill='none'\n                xmlns='http://www.w3.org/2000/svg'\n              >\n                <title>Previous page icon</title>\n                <path\n                  d='M12.5 15L7.5 10L12.5 5'\n                  stroke='currentColor'\n                  stroke-width='1.5'\n                  stroke-linecap='round'\n                  stroke-linejoin='round'\n                />\n              </svg>\n            }\n          />\n        </div>\n        <ul class='searchcraft-pagination-list'>\n          {this.renderOddPaginationItem(1)}\n          {this.renderEvenPaginationItem(2)}\n          {this.renderMiddlePaginationItem()}\n          {this.renderEvenPaginationItem(\n            this.searchResultsPagesCount > 4\n              ? this.searchResultsPagesCount - 1\n              : 4,\n          )}\n          {this.renderOddPaginationItem(this.searchResultsPagesCount)}\n        </ul>\n        <div class='searchcraft-pagination-control'>\n          <searchcraft-button\n            disabled={this.searchResultsPage === this.searchResultsPagesCount}\n            hierarchy='tertiary'\n            onButtonClick={() => {\n              this.handleGoToPage(\n                Math.min(\n                  this.searchResultsPagesCount,\n                  this.searchResultsPage + 1,\n                ),\n              );\n            }}\n            label='NEXT'\n            iconPosition='right'\n            icon={\n              <svg\n                width='20'\n                height='20'\n                viewBox='0 0 20 20'\n                fill='none'\n                xmlns='http://www.w3.org/2000/svg'\n              >\n                <title>Next page icon</title>\n                <path\n                  d='M7.5 15L12.5 10L7.5 5'\n                  stroke='currentColor'\n                  stroke-width='1.5'\n                  stroke-linecap='round'\n                  stroke-linejoin='round'\n                />\n              </svg>\n            }\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/searchcraft-popover-button.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h } from './index-3608c57d.js';
-import { u as useSearchcraftStore } from './store-aa071d9c.js';
+import { u as useSearchcraftStore } from './SearchcraftStore-3cfd565a.js';
 
 const SearchcraftPopoverButton = class {
     constructor(hostRef) {
@@ -9,7 +9,7 @@ const SearchcraftPopoverButton = class {
         useSearchcraftStore.getState().setPopoverVisibility(true);
     }
     render() {
-        return (h("button", { key: '3907a514a85a79c320f529840fda06474721871a', type: 'button', onClick: this.handleOnClick.bind(this) }, h("slot", { key: '91bedc41efb5c17a774eab7a95e0abac39497408' })));
+        return (h("button", { key: '538e1e8506bea196e6ba45482f9daa75d032462f', type: 'button', onClick: this.handleOnClick.bind(this) }, h("slot", { key: '788b70da6edcbfb283d373ada36709582ad16e51' })));
     }
 };
 

package/dist/esm/searchcraft-popover-form.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, g as getElement, h } from './index-3608c57d.js';
 import { c as classNames } from './index-72ac5051.js';
-import { u as useSearchcraftStore } from './store-aa071d9c.js';
+import { u as useSearchcraftStore } from './SearchcraftStore-3cfd565a.js';
 
 const SearchcraftPopoverForm = class {
     constructor(hostRef) {
@@ -32,12 +32,15 @@ const SearchcraftPopoverForm = class {
     hotkeyModifier = 'meta';
     isPopoverVisibleInState = false;
     unsubscribe;
-    searchResults;
+    searchClientResponseItems = [];
+    adClientResponseItems = [];
     searchTerm;
     isFocused = false;
     breakpointSm = 576;
     breakpointMd = 768;
     breakpointLg = 992;
+    searchResultsPage;
+    searchResultsPerPage;
     modalElement;
     get hostElement() { return getElement(this); }
     componentDidLoad() {
@@ -57,8 +60,11 @@ const SearchcraftPopoverForm = class {
             if (this.isPopoverVisibleInState !== state.isPopoverVisible) {
                 this.handlePopoverVisibilityChange(state.isPopoverVisible);
             }
-            this.searchResults = { ...state.searchResults };
-            this.searchTerm = state.query;
+            this.searchClientResponseItems = [...state.searchClientResponseItems];
+            this.adClientResponseItems = [...state.adClientResponseItems];
+            this.searchTerm = state.searchTerm;
+            this.searchResultsPage = state.searchResultsPage;
+            this.searchResultsPerPage = state.searchResultsPerPage;
         });
     }
     disconnectedCallback() {
@@ -185,40 +191,36 @@ const SearchcraftPopoverForm = class {
     get hasResultsToShow() {
         return (this.searchTerm &&
             this.searchTerm?.trim()?.length > 0 &&
-            (this.searchResults?.data?.hits?.length || 0) > 0);
+            this.searchClientResponseItems.length > 0);
     }
-    renderInlinePopover(documents) {
+    renderInlinePopover() {
         const isListViewVisible = this.hasResultsToShow && this.isFocused;
         const popoverFormClassNames = classNames('searchcraft-popover-form searchcraft-popover-form-inline', {
             'searchcraft-popover-form-active': isListViewVisible,
         });
-        return (h("div", { class: popoverFormClassNames }, h("searchcraft-input-form", { config: this.config, onInputFocus: this.handleInputFocus.bind(this) }), isListViewVisible && (h("div", { class: 'searchcraft-popover-inline-wrapper-outer' }, h("div", { class: 'searchcraft-popover-inline-wrapper-inner' }, h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, documents: documents }))))));
+        return (h("div", { class: popoverFormClassNames }, h("searchcraft-input-form", { config: this.config, onInputFocus: this.handleInputFocus.bind(this) }), isListViewVisible && (h("div", { class: 'searchcraft-popover-inline-wrapper-outer' }, h("div", { class: 'searchcraft-popover-inline-wrapper-inner' }, h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage }))))));
     }
-    renderModalPopover(documents) {
+    renderModalPopover() {
         if (this.isPopoverVisibleInState) {
             const popoverFormClassNames = classNames('searchcraft-popover-form', {
                 'searchcraft-popover-form-active': this.hasResultsToShow,
             });
-            return (h("div", { class: 'searchcraft-popover-form-modal' }, h("div", { class: 'searchcraft-popover-form-modal-backdrop', onClick: this.handleModalBackdropClick }), h("div", { class: 'searchcraft-popover-form-modal-inner' }, h("div", { class: popoverFormClassNames }, h("div", { class: 'searchcraft-popover-form-input-wrapper' }, h("searchcraft-input-form", { config: this.config, onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this) }), h("button", { type: 'button', class: 'searchcraft-popover-form-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), this.hasResultsToShow && (h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, documents: documents }))))));
+            return (h("div", { class: 'searchcraft-popover-form-modal' }, h("div", { class: 'searchcraft-popover-form-modal-backdrop', onClick: this.handleModalBackdropClick }), h("div", { class: 'searchcraft-popover-form-modal-inner' }, h("div", { class: popoverFormClassNames }, h("div", { class: 'searchcraft-popover-form-input-wrapper' }, h("searchcraft-input-form", { config: this.config, onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this) }), h("button", { type: 'button', class: 'searchcraft-popover-form-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), this.hasResultsToShow && (h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage }))))));
         }
     }
-    renderFullscreenPopover(documents) {
+    renderFullscreenPopover() {
         if (this.isPopoverVisibleInState) {
-            return (h("div", { class: 'searchcraft-popover-form-fullscreen' }, h("div", { class: 'searchcraft-popover-form' }, h("div", { class: 'searchcraft-popover-form-input-wrapper' }, h("searchcraft-input-form", { config: this.config, onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this) }), h("button", { type: 'button', class: 'searchcraft-popover-form-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), this.hasResultsToShow && (h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, documents: documents })))));
+            return (h("div", { class: 'searchcraft-popover-form-fullscreen' }, h("div", { class: 'searchcraft-popover-form' }, h("div", { class: 'searchcraft-popover-form-input-wrapper' }, h("searchcraft-input-form", { config: this.config, onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this) }), h("button", { type: 'button', class: 'searchcraft-popover-form-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), this.hasResultsToShow && (h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage })))));
         }
     }
     render() {
-        const documents = this.searchResults?.data?.hits?.map((data, _index) => {
-            const { doc: result } = data;
-            return result;
-        });
         switch (this.type) {
             case 'inline':
-                return this.renderInlinePopover(documents);
+                return this.renderInlinePopover();
             case 'modal':
-                return this.renderModalPopover(documents);
+                return this.renderModalPopover();
             case 'fullscreen':
-                return this.renderFullscreenPopover(documents);
+                return this.renderFullscreenPopover();
         }
     }
 };