@searchcraft/javascript-sdk 0.10.0 → 0.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/dist/components/defineCustomElements.js +2 -0
  2. package/dist/components/index.d.ts +238 -120
  3. package/dist/components/index.js +10 -5
  4. package/dist/components/index.js.map +1 -1
  5. package/dist/components/{p-3f63fa14.js → p-0077f677.js} +4 -4
  6. package/dist/components/p-0077f677.js.map +1 -0
  7. package/dist/components/{p-e72d0167.js → p-13e81b5d.js} +3 -3
  8. package/dist/components/p-13e81b5d.js.map +1 -0
  9. package/dist/components/{p-39e70a00.js → p-172a848d.js} +29 -3
  10. package/dist/components/p-172a848d.js.map +1 -0
  11. package/dist/components/{p-f8df3d49.js → p-17c646e2.js} +101 -65
  12. package/dist/components/p-17c646e2.js.map +1 -0
  13. package/dist/components/{p-d361b781.js → p-2be1a382.js} +4 -4
  14. package/dist/components/{p-d361b781.js.map → p-2be1a382.js.map} +1 -1
  15. package/dist/components/{p-c317a36a.js → p-3e65aa91.js} +6 -6
  16. package/dist/components/p-3e65aa91.js.map +1 -0
  17. package/dist/components/{p-8aa0fff5.js → p-5d17ace0.js} +13 -13
  18. package/dist/components/p-5d17ace0.js.map +1 -0
  19. package/dist/components/p-84e2cbd6.js +46 -0
  20. package/dist/components/p-84e2cbd6.js.map +1 -0
  21. package/dist/components/{p-bc9e0e40.js → p-868803f9.js} +3 -3
  22. package/dist/components/{p-bc9e0e40.js.map → p-868803f9.js.map} +1 -1
  23. package/dist/components/{p-34a32648.js → p-a62a2e74.js} +4 -4
  24. package/dist/components/{p-34a32648.js.map → p-a62a2e74.js.map} +1 -1
  25. package/dist/components/searchcraft-ad.js +1 -1
  26. package/dist/components/searchcraft-facet-list.js +1 -1
  27. package/dist/components/searchcraft-filter-panel.js +5 -5
  28. package/dist/components/searchcraft-filter-panel.js.map +1 -1
  29. package/dist/components/searchcraft-input-form.js +1 -1
  30. package/dist/components/searchcraft-pagination.js +1 -1
  31. package/dist/components/searchcraft-pagination.js.map +1 -1
  32. package/dist/components/searchcraft-popover-button.js +95 -3
  33. package/dist/components/searchcraft-popover-button.js.map +1 -1
  34. package/dist/components/searchcraft-popover-footer.d.ts +11 -0
  35. package/dist/components/searchcraft-popover-footer.js +8 -0
  36. package/dist/components/searchcraft-popover-footer.js.map +1 -0
  37. package/dist/components/searchcraft-popover-form.js +34 -24
  38. package/dist/components/searchcraft-popover-form.js.map +1 -1
  39. package/dist/components/searchcraft-popover-list-item.js +1 -1
  40. package/dist/components/searchcraft-popover-list-view.js +1 -1
  41. package/dist/components/searchcraft-results-info.js +1 -8
  42. package/dist/components/searchcraft-results-info.js.map +1 -1
  43. package/dist/components/searchcraft-search-result.js +1 -1
  44. package/dist/components/searchcraft-search-results-per-page.js +1 -1
  45. package/dist/components/searchcraft-search-results-per-page.js.map +1 -1
  46. package/dist/components/searchcraft-search-results.js +3 -3
  47. package/dist/components/searchcraft-search-results.js.map +1 -1
  48. package/dist/components/searchcraft-slider.js +1 -1
  49. package/dist/components/searchcraft-theme.js +2 -2
  50. package/dist/components/searchcraft-theme.js.map +1 -1
  51. package/dist/components/searchcraft-toggle-button.js +1 -1
  52. package/dist/hydrate/index.js +298 -109
  53. package/dist/hydrate/index.mjs +298 -109
  54. package/dist/themes/hologram.css +1 -0
  55. package/dist/themes/hologram.css.map +1 -0
  56. package/dist/types/components/searchcraft-filter-panel/searchcraft-filter-panel.d.ts +4 -3
  57. package/dist/types/components/searchcraft-input-form/searchcraft-input-form.d.ts +4 -3
  58. package/dist/types/components/searchcraft-pagination/searchcraft-pagination.d.ts +4 -3
  59. package/dist/types/components/searchcraft-popover-button/searchcraft-popover-button.d.ts +49 -5
  60. package/dist/types/components/searchcraft-popover-footer/searchcraft-popover-footer.d.ts +13 -0
  61. package/dist/types/components/searchcraft-popover-form/searchcraft-popover-form.d.ts +4 -3
  62. package/dist/types/components/searchcraft-popover-list-item/searchcraft-popover-list-item.d.ts +3 -3
  63. package/dist/types/components/searchcraft-results-info/searchcraft-results-info.d.ts +6 -10
  64. package/dist/types/components/searchcraft-search-result/searchcraft-search-result.d.ts +3 -0
  65. package/dist/types/components/searchcraft-search-results/searchcraft-search-results.d.ts +5 -4
  66. package/dist/types/components/searchcraft-search-results-per-page/searchcraft-search-results-per-page.d.ts +4 -3
  67. package/dist/types/components/searchcraft-theme/searchcraft-theme.d.ts +4 -3
  68. package/dist/types/components.d.ts +231 -120
  69. package/dist/types/store/SearchcraftStore.types.d.ts +3 -0
  70. package/package.json +7 -3
  71. package/dist/components/p-39e70a00.js.map +0 -1
  72. package/dist/components/p-3f63fa14.js.map +0 -1
  73. package/dist/components/p-8aa0fff5.js.map +0 -1
  74. package/dist/components/p-c317a36a.js.map +0 -1
  75. package/dist/components/p-e72d0167.js.map +0 -1
  76. package/dist/components/p-f8df3d49.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"file":"searchcraft-popover-footer.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
@@ -1,13 +1,14 @@
1
1
  import { p as proxyCustomElement, H, h } from './p-5365011f.js';
2
2
  import { c as classNames } from './p-5cdc6210.js';
3
- import { s as searchcraftStore } from './p-f8df3d49.js';
4
- import { d as defineCustomElement$8 } from './p-e72d0167.js';
5
- import { d as defineCustomElement$7 } from './p-acf23bab.js';
6
- import { d as defineCustomElement$6 } from './p-f2585cdf.js';
7
- import { d as defineCustomElement$5 } from './p-3f63fa14.js';
8
- import { d as defineCustomElement$4 } from './p-1adf78b9.js';
9
- import { d as defineCustomElement$3 } from './p-8aa0fff5.js';
10
- import { d as defineCustomElement$2 } from './p-34a32648.js';
3
+ import { s as searchcraftStore } from './p-17c646e2.js';
4
+ import { d as defineCustomElement$9 } from './p-13e81b5d.js';
5
+ import { d as defineCustomElement$8 } from './p-acf23bab.js';
6
+ import { d as defineCustomElement$7 } from './p-f2585cdf.js';
7
+ import { d as defineCustomElement$6 } from './p-0077f677.js';
8
+ import { d as defineCustomElement$5 } from './p-1adf78b9.js';
9
+ import { d as defineCustomElement$4 } from './p-84e2cbd6.js';
10
+ import { d as defineCustomElement$3 } from './p-5d17ace0.js';
11
+ import { d as defineCustomElement$2 } from './p-a62a2e74.js';
11
12
 
12
13
  const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftPopoverForm extends H {
13
14
  constructor() {
@@ -68,6 +69,10 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
68
69
  this.searchResultsPage = state.searchResultsPage;
69
70
  this.searchResultsPerPage = state.searchResultsPerPage;
70
71
  });
72
+ // Set hotkey and hotkeyModifier in state.
73
+ searchcraftStore
74
+ .getState()
75
+ .setHotKeyAndHotKeyModifier(this.hotkey, this.hotkeyModifier);
71
76
  }
72
77
  disconnectedCallback() {
73
78
  this.unsubscribe?.();
@@ -113,7 +118,7 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
113
118
  }
114
119
  };
115
120
  handleInputInit = () => {
116
- const input = this.hostElement.querySelector('.searchcraft-input');
121
+ const input = this.hostElement.querySelector('.searchcraft-input-form-input');
117
122
  input?.focus();
118
123
  };
119
124
  /**
@@ -168,7 +173,7 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
168
173
  * @param direction
169
174
  */
170
175
  focusOnNextListItem(direction) {
171
- const listItems = Array.from(document.querySelectorAll('a.searchcraft-popover-form-list-item')).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);
176
+ const listItems = Array.from(document.querySelectorAll('.searchcraft-popover-list-item-link')).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);
172
177
  const currentIndex = listItems.indexOf(document.activeElement);
173
178
  if (direction === 'ArrowDown') {
174
179
  listItems[(currentIndex + 1) % listItems.length]?.focus();
@@ -196,22 +201,22 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
196
201
  }
197
202
  renderInlinePopover() {
198
203
  const isListViewVisible = this.hasResultsToShow && this.isFocused;
199
- const popoverFormClassNames = classNames('searchcraft-popover-form searchcraft-popover-form-inline', {
200
- 'searchcraft-popover-form-active': isListViewVisible,
201
- });
202
- return (h("div", { class: popoverFormClassNames }, h("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this) }), isListViewVisible && (h("div", { class: 'searchcraft-popover-form-inline-wrapper-outer' }, h("div", { class: 'searchcraft-popover-form-inline-wrapper-inner' }, h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage }))))));
204
+ return (h("div", { class: classNames('searchcraft-popover-form searchcraft-popover-form-inline', {
205
+ 'searchcraft-popover-form-active': isListViewVisible,
206
+ }) }, h("div", { class: 'searchcraft-popover-form-input searchcraft-popover-form-inline-input' }, h("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this) })), isListViewVisible && (h("div", { class: 'searchcraft-popover-form-inline-wrapper' }, h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage }), h("searchcraft-popover-footer", null)))));
203
207
  }
204
208
  renderModalPopover() {
205
209
  if (this.isPopoverVisibleInState) {
206
- const popoverFormClassNames = classNames('searchcraft-popover-form', {
207
- 'searchcraft-popover-form-active': this.hasResultsToShow,
208
- });
209
- 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 searchcraft-popover-form-modal-input-wrapper' }, h("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this) }), h("button", { type: 'button', class: 'searchcraft-popover-form-button searchcraft-popover-form-modal-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 }))))));
210
+ return (h("div", { class: classNames('searchcraft-popover-form searchcraft-popover-form-modal', {
211
+ 'searchcraft-popover-form-active': this.hasResultsToShow,
212
+ }) }, h("div", { class: 'searchcraft-popover-form-modal-backdrop', onClick: this.handleModalBackdropClick }), h("div", { class: 'searchcraft-popover-form-modal-wrapper' }, h("div", { class: 'searchcraft-popover-form-input searchcraft-popover-form-modal-input' }, h("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this) }), h("button", { type: 'button', class: 'searchcraft-popover-form-input-cancel-button searchcraft-popover-form-modal-input-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 })), h("searchcraft-popover-footer", null))));
210
213
  }
211
214
  }
212
215
  renderFullscreenPopover() {
213
216
  if (this.isPopoverVisibleInState) {
214
- return (h("div", { class: 'searchcraft-popover-form-fullscreen' }, h("div", { class: 'searchcraft-popover-form' }, h("div", { class: 'searchcraft-popover-form-input-wrapper searchcraft-popover-form-fullscreen-input-wrapper' }, h("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this) }), h("button", { type: 'button', class: 'searchcraft-popover-form-button searchcraft-popover-form-fullscreen-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 })))));
217
+ return (h("div", { class: classNames('searchcraft-popover-form searchcraft-popover-form-fullscreen', {
218
+ 'searchcraft-popover-form-active': this.hasResultsToShow,
219
+ }) }, h("div", { class: 'searchcraft-popover-form-input searchcraft-popover-form-fullscreen-input' }, h("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this) }), h("button", { type: 'button', class: 'searchcraft-popover-form-input-cancel-button searchcraft-popover-form-fullscreen-input-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 })), h("searchcraft-popover-footer", null)));
215
220
  }
216
221
  }
217
222
  render() {
@@ -246,7 +251,7 @@ function defineCustomElement$1() {
246
251
  if (typeof customElements === "undefined") {
247
252
  return;
248
253
  }
249
- const components = ["searchcraft-popover-form", "searchcraft-ad", "searchcraft-button", "searchcraft-error-message", "searchcraft-input-form", "searchcraft-input-label", "searchcraft-popover-form", "searchcraft-popover-list-item", "searchcraft-popover-list-view"];
254
+ const components = ["searchcraft-popover-form", "searchcraft-ad", "searchcraft-button", "searchcraft-error-message", "searchcraft-input-form", "searchcraft-input-label", "searchcraft-popover-footer", "searchcraft-popover-form", "searchcraft-popover-list-item", "searchcraft-popover-list-view"];
250
255
  components.forEach(tagName => { switch (tagName) {
251
256
  case "searchcraft-popover-form":
252
257
  if (!customElements.get(tagName)) {
@@ -255,25 +260,30 @@ function defineCustomElement$1() {
255
260
  break;
256
261
  case "searchcraft-ad":
257
262
  if (!customElements.get(tagName)) {
258
- defineCustomElement$8();
263
+ defineCustomElement$9();
259
264
  }
260
265
  break;
261
266
  case "searchcraft-button":
262
267
  if (!customElements.get(tagName)) {
263
- defineCustomElement$7();
268
+ defineCustomElement$8();
264
269
  }
265
270
  break;
266
271
  case "searchcraft-error-message":
267
272
  if (!customElements.get(tagName)) {
268
- defineCustomElement$6();
273
+ defineCustomElement$7();
269
274
  }
270
275
  break;
271
276
  case "searchcraft-input-form":
272
277
  if (!customElements.get(tagName)) {
273
- defineCustomElement$5();
278
+ defineCustomElement$6();
274
279
  }
275
280
  break;
276
281
  case "searchcraft-input-label":
282
+ if (!customElements.get(tagName)) {
283
+ defineCustomElement$5();
284
+ }
285
+ break;
286
+ case "searchcraft-popover-footer":
277
287
  if (!customElements.get(tagName)) {
278
288
  defineCustomElement$4();
279
289
  }
@@ -1 +1 @@
1
- {"file":"searchcraft-popover-form.js","mappings":"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","names":["SearchcraftPopoverForm"],"sources":["src/components/searchcraft-popover-form/searchcraft-popover-form.tsx"],"sourcesContent":["import { Component, Element, Prop, State, h } from '@stencil/core';\nimport classNames from 'classnames';\nimport type {\n SearchClientResponseItem,\n AdClientResponseItem,\n PopoverResultMappings,\n} from '@searchcraft/core';\n\nimport { searchcraftStore } from '@store';\n\n/**\n * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.\n *\n * @import\n * ```jsx\n * // react\n * import { SearchcraftPopoverForm } from \"@searchcraft/react-sdk\";\n *\n * // vue\n * import { SearchcraftPopoverForm } from \"@searchcraft/vue-sdk\";\n * ```\n *\n * @js-example\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-form type=\"inline\" />\n * ```\n *\n * ```js\n * // index.js\n * const popoverForm = document.querySelector('searchcraft-popover-form');\n *\n * popoverForm.popoverResultMappings = {};\n * ```\n *\n * @react-example\n * ```jsx\n * <SearchcraftPopoverForm type=\"inline\" popoverResultMappings={[]} />\n * ```\n *\n * @vue-example\n * ```jsx\n * <SearchcraftPopoverForm type=\"inline\" :popoverResultMappings=\"[]\"\" />\n * ```\n *\n */\n@Component({\n tag: 'searchcraft-popover-form',\n shadow: false,\n})\nexport class SearchcraftPopoverForm {\n /**\n * The type of popover form to render.\n * - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content.\n * - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component.\n * - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.\n */\n @Prop() type?: 'inline' | 'fullscreen' | 'modal' = 'inline';\n /**\n * Formats the content rendered for each result.\n */\n @Prop() popoverResultMappings?: PopoverResultMappings;\n /**\n * The hotkey that activates the popover.\n */\n @Prop() hotkey?: string = 'k';\n /**\n * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.\n */\n @Prop() hotkeyModifier?: 'ctrl' | 'meta' | 'alt' | 'option' = 'meta';\n\n @State() isPopoverVisibleInState = false;\n @State() unsubscribe: (() => void) | undefined;\n @State() searchClientResponseItems: SearchClientResponseItem[] = [];\n @State() adClientResponseItems: AdClientResponseItem[] = [];\n @State() searchTerm: string | undefined;\n @State() isFocused = false;\n @State() breakpointSm = 576;\n @State() breakpointMd = 768;\n @State() breakpointLg = 992;\n @State() searchResultsPage;\n @State() searchResultsPerPage;\n\n @State() modalElement;\n\n @Element() hostElement!: HTMLElement;\n\n componentDidLoad() {\n // Loads the breakpoint values into state\n const computedStyle = getComputedStyle(document.documentElement);\n this.breakpointSm = Number.parseFloat(\n computedStyle.getPropertyValue('--sc-breakpoint-sm').trim(),\n );\n this.breakpointMd = Number.parseFloat(\n computedStyle.getPropertyValue('--sc-breakpoint-md').trim(),\n );\n this.breakpointLg = Number.parseFloat(\n computedStyle.getPropertyValue('--sc-breakpoint-lg').trim(),\n );\n // Set popover visiblity in state\n this.isPopoverVisibleInState = searchcraftStore.getState().isPopoverVisible;\n\n // Add event listeners\n document.addEventListener('click', this.handleDocumentClick);\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n\n // Subscribe to state events\n this.unsubscribe = searchcraftStore.subscribe((state) => {\n if (this.isPopoverVisibleInState !== state.isPopoverVisible) {\n this.handlePopoverVisibilityChange(state.isPopoverVisible);\n }\n\n this.searchClientResponseItems = [...state.searchClientResponseItems];\n this.adClientResponseItems = [...state.adClientResponseItems];\n this.searchTerm = state.searchTerm;\n this.searchResultsPage = state.searchResultsPage;\n this.searchResultsPerPage = state.searchResultsPerPage;\n });\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n document.removeEventListener('click', this.handleDocumentClick);\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n handleDocumentClick = (event: MouseEvent) => {\n if (!this.hostElement.contains(event.target as Node)) {\n this.isFocused = false;\n }\n };\n\n /**\n * Handles when popover visibility is changed in state\n */\n handlePopoverVisibilityChange(isVisible: boolean) {\n this.isPopoverVisibleInState = isVisible;\n document.body.style.overflow = isVisible ? 'hidden' : 'auto';\n }\n\n /**\n * Actions to perform when various keys are pressed within the popover form.\n */\n handleDocumentKeyDown = (event: KeyboardEvent) => {\n // Document-scoped actions\n if (event.key === this.hotkey) {\n this.handleHotkeyPressed(event);\n }\n\n // Document-scoped -> Popover-scoped keyboard event boundary\n if (!this.hostElement.contains(document.activeElement)) {\n return;\n }\n\n // Popover-scoped actions\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n event.preventDefault();\n this.focusOnNextListItem(event.key);\n break;\n case 'Escape':\n searchcraftStore.getState().setPopoverVisibility(false);\n break;\n default:\n return;\n }\n };\n\n handleInputInit = () => {\n const input = this.hostElement.querySelector('.searchcraft-input') as\n | HTMLInputElement\n | undefined;\n input?.focus();\n };\n\n /**\n * When popover is `inline` and the viewport is at the smallest breakpoint,\n * focusing on the input will open a modal version of the popover form.\n */\n handleInputFocus() {\n this.isFocused = true;\n\n if (\n this.type === 'inline' &&\n window.visualViewport &&\n window.visualViewport.width < this.breakpointSm\n ) {\n searchcraftStore.getState().setPopoverVisibility(true);\n\n // Appends a popover form of type=`modal` to the body\n if (!this.modalElement) {\n this.modalElement = document.createElement('searchcraft-popover-form');\n this.modalElement.popoverResultMappings = this.popoverResultMappings;\n this.modalElement.setAttribute('type', 'fullscreen');\n document.body.appendChild(this.modalElement);\n }\n }\n }\n\n handleModalBackdropClick(_event: MouseEvent) {\n searchcraftStore.getState().setPopoverVisibility(false);\n }\n\n /**\n * When a hotkey is pressed, tests if the modifiers also match.\n * If modifiers match, toggles visibility of the popover modal.\n */\n handleHotkeyPressed(event: KeyboardEvent) {\n if (\n (event.ctrlKey && this.hotkeyModifier === 'ctrl') ||\n (event.altKey && this.hotkeyModifier === 'alt') ||\n (event.metaKey && this.hotkeyModifier === 'meta')\n ) {\n event.preventDefault();\n if (this.type === 'inline' && !this.isPopoverVisibleInState) {\n const hostElementInput = this.hostElement.querySelector(\n '.searchcraft-input-form-input',\n ) as HTMLInputElement | undefined;\n hostElementInput?.focus();\n } else {\n searchcraftStore\n .getState()\n .setPopoverVisibility(!this.isPopoverVisibleInState);\n }\n }\n }\n\n handleCancelButtonClick() {\n searchcraftStore.getState().setPopoverVisibility(false);\n }\n\n /**\n * Moves focus to the next/previous list item in the list view. If you are at the top\n * of the list view, it moves focus back to the input.\n *\n * @param direction\n */\n focusOnNextListItem(direction: 'ArrowDown' | 'ArrowUp') {\n const listItems = Array.from(\n document.querySelectorAll<HTMLAnchorElement>(\n 'a.searchcraft-popover-form-list-item',\n ),\n ).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);\n\n const currentIndex = listItems.indexOf(\n document.activeElement as HTMLAnchorElement,\n );\n\n if (direction === 'ArrowDown') {\n listItems[(currentIndex + 1) % listItems.length]?.focus();\n } else if (direction === 'ArrowUp') {\n if (currentIndex >= 1) {\n listItems[currentIndex - 1]?.focus();\n } else {\n const input = document.querySelector('.searchcraft-input-form-input') as\n | HTMLInputElement\n | undefined;\n\n if (input) {\n input.focus();\n requestAnimationFrame(() => {\n input.selectionEnd = input.value.length;\n input.selectionStart = input.value.length;\n });\n }\n }\n }\n }\n\n get hasResultsToShow() {\n return (\n this.searchTerm &&\n this.searchTerm?.trim()?.length > 0 &&\n this.searchClientResponseItems.length > 0\n );\n }\n\n renderInlinePopover() {\n const isListViewVisible = this.hasResultsToShow && this.isFocused;\n\n const popoverFormClassNames = classNames(\n 'searchcraft-popover-form searchcraft-popover-form-inline',\n {\n 'searchcraft-popover-form-active': isListViewVisible,\n },\n );\n\n return (\n <div class={popoverFormClassNames}>\n <searchcraft-input-form\n onInputFocus={this.handleInputFocus.bind(this)}\n />\n {isListViewVisible && (\n <div class='searchcraft-popover-form-inline-wrapper-outer'>\n <div class='searchcraft-popover-form-inline-wrapper-inner'>\n <searchcraft-popover-list-view\n popoverResultMappings={this.popoverResultMappings}\n searchClientResponseItems={this.searchClientResponseItems}\n adClientResponseItems={this.adClientResponseItems}\n searchResultsPage={this.searchResultsPage}\n searchResultsPerPage={this.searchResultsPerPage}\n />\n </div>\n </div>\n )}\n </div>\n );\n }\n\n renderModalPopover() {\n if (this.isPopoverVisibleInState) {\n const popoverFormClassNames = classNames('searchcraft-popover-form', {\n 'searchcraft-popover-form-active': this.hasResultsToShow,\n });\n\n return (\n <div class='searchcraft-popover-form-modal'>\n {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}\n <div\n class='searchcraft-popover-form-modal-backdrop'\n onClick={this.handleModalBackdropClick}\n />\n <div class='searchcraft-popover-form-modal-inner'>\n <div class={popoverFormClassNames}>\n <div class='searchcraft-popover-form-input-wrapper searchcraft-popover-form-modal-input-wrapper'>\n <searchcraft-input-form\n onInputFocus={this.handleInputFocus.bind(this)}\n onInputInit={this.handleInputInit.bind(this)}\n />\n <button\n type='button'\n class='searchcraft-popover-form-button searchcraft-popover-form-modal-button'\n onClick={this.handleCancelButtonClick.bind(this)}\n >\n Cancel\n </button>\n </div>\n {this.hasResultsToShow && (\n <searchcraft-popover-list-view\n popoverResultMappings={this.popoverResultMappings}\n searchClientResponseItems={this.searchClientResponseItems}\n adClientResponseItems={this.adClientResponseItems}\n searchResultsPage={this.searchResultsPage}\n searchResultsPerPage={this.searchResultsPerPage}\n />\n )}\n </div>\n </div>\n </div>\n );\n }\n }\n\n renderFullscreenPopover() {\n if (this.isPopoverVisibleInState) {\n return (\n <div class='searchcraft-popover-form-fullscreen'>\n <div class='searchcraft-popover-form'>\n <div class='searchcraft-popover-form-input-wrapper searchcraft-popover-form-fullscreen-input-wrapper'>\n <searchcraft-input-form\n onInputFocus={this.handleInputFocus.bind(this)}\n onInputInit={this.handleInputInit.bind(this)}\n />\n <button\n type='button'\n class='searchcraft-popover-form-button searchcraft-popover-form-fullscreen-button'\n onClick={this.handleCancelButtonClick.bind(this)}\n >\n Cancel\n </button>\n </div>\n {this.hasResultsToShow && (\n <searchcraft-popover-list-view\n popoverResultMappings={this.popoverResultMappings}\n searchClientResponseItems={this.searchClientResponseItems}\n adClientResponseItems={this.adClientResponseItems}\n searchResultsPage={this.searchResultsPage}\n searchResultsPerPage={this.searchResultsPerPage}\n />\n )}\n </div>\n </div>\n );\n }\n }\n\n render() {\n switch (this.type) {\n case 'inline':\n return this.renderInlinePopover();\n case 'modal':\n return this.renderModalPopover();\n case 'fullscreen':\n return this.renderFullscreenPopover();\n }\n }\n}\n"],"version":3}
1
+ {"file":"searchcraft-popover-form.js","mappings":"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","names":["SearchcraftPopoverForm"],"sources":["src/components/searchcraft-popover-form/searchcraft-popover-form.tsx"],"sourcesContent":["import { Component, Element, Prop, State, h } from '@stencil/core';\nimport classNames from 'classnames';\nimport type {\n SearchClientResponseItem,\n AdClientResponseItem,\n PopoverResultMappings,\n} from '@searchcraft/core';\n\nimport { searchcraftStore } from '@store';\n\n/**\n * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.\n *\n * @react-import\n * ```jsx\n * import { SearchcraftPopoverForm } from \"@searchcraft/react-sdk\";\n * ```\n *\n * @vue-import\n * ```jsx\n * import { SearchcraftPopoverForm } from \"@searchcraft/vue-sdk\";\n * ```\n *\n * @js-example\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-form type=\"inline\" />\n * ```\n *\n * ```js\n * // index.js\n * const popoverForm = document.querySelector('searchcraft-popover-form');\n *\n * popoverForm.popoverResultMappings = {};\n * ```\n *\n * @react-example\n * ```jsx\n * <SearchcraftPopoverForm type=\"inline\" popoverResultMappings={[]} />\n * ```\n *\n * @vue-example\n * ```jsx\n * <SearchcraftPopoverForm type=\"inline\" :popoverResultMappings=\"[]\"\" />\n * ```\n *\n */\n@Component({\n tag: 'searchcraft-popover-form',\n shadow: false,\n})\nexport class SearchcraftPopoverForm {\n /**\n * The type of popover form to render.\n * - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content.\n * - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component.\n * - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.\n */\n @Prop() type?: 'inline' | 'fullscreen' | 'modal' = 'inline';\n /**\n * Formats the content rendered for each result.\n */\n @Prop() popoverResultMappings?: PopoverResultMappings;\n /**\n * The hotkey that activates the popover.\n */\n @Prop() hotkey?: string = 'k';\n /**\n * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.\n */\n @Prop() hotkeyModifier?: 'ctrl' | 'meta' | 'alt' | 'option' = 'meta';\n\n @State() isPopoverVisibleInState = false;\n @State() unsubscribe: (() => void) | undefined;\n @State() searchClientResponseItems: SearchClientResponseItem[] = [];\n @State() adClientResponseItems: AdClientResponseItem[] = [];\n @State() searchTerm: string | undefined;\n @State() isFocused = false;\n @State() breakpointSm = 576;\n @State() breakpointMd = 768;\n @State() breakpointLg = 992;\n @State() searchResultsPage;\n @State() searchResultsPerPage;\n\n @State() modalElement;\n\n @Element() hostElement!: HTMLElement;\n\n componentDidLoad() {\n // Loads the breakpoint values into state\n const computedStyle = getComputedStyle(document.documentElement);\n this.breakpointSm = Number.parseFloat(\n computedStyle.getPropertyValue('--sc-breakpoint-sm').trim(),\n );\n this.breakpointMd = Number.parseFloat(\n computedStyle.getPropertyValue('--sc-breakpoint-md').trim(),\n );\n this.breakpointLg = Number.parseFloat(\n computedStyle.getPropertyValue('--sc-breakpoint-lg').trim(),\n );\n // Set popover visiblity in state\n this.isPopoverVisibleInState = searchcraftStore.getState().isPopoverVisible;\n\n // Add event listeners\n document.addEventListener('click', this.handleDocumentClick);\n document.addEventListener('keydown', this.handleDocumentKeyDown);\n\n // Subscribe to state events\n this.unsubscribe = searchcraftStore.subscribe((state) => {\n if (this.isPopoverVisibleInState !== state.isPopoverVisible) {\n this.handlePopoverVisibilityChange(state.isPopoverVisible);\n }\n\n this.searchClientResponseItems = [...state.searchClientResponseItems];\n this.adClientResponseItems = [...state.adClientResponseItems];\n this.searchTerm = state.searchTerm;\n this.searchResultsPage = state.searchResultsPage;\n this.searchResultsPerPage = state.searchResultsPerPage;\n });\n\n // Set hotkey and hotkeyModifier in state.\n searchcraftStore\n .getState()\n .setHotKeyAndHotKeyModifier(this.hotkey, this.hotkeyModifier);\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n document.removeEventListener('click', this.handleDocumentClick);\n document.removeEventListener('keydown', this.handleDocumentKeyDown);\n }\n\n handleDocumentClick = (event: MouseEvent) => {\n if (!this.hostElement.contains(event.target as Node)) {\n this.isFocused = false;\n }\n };\n\n /**\n * Handles when popover visibility is changed in state\n */\n handlePopoverVisibilityChange(isVisible: boolean) {\n this.isPopoverVisibleInState = isVisible;\n document.body.style.overflow = isVisible ? 'hidden' : 'auto';\n }\n\n /**\n * Actions to perform when various keys are pressed within the popover form.\n */\n handleDocumentKeyDown = (event: KeyboardEvent) => {\n // Document-scoped actions\n if (event.key === this.hotkey) {\n this.handleHotkeyPressed(event);\n }\n\n // Document-scoped -> Popover-scoped keyboard event boundary\n if (!this.hostElement.contains(document.activeElement)) {\n return;\n }\n\n // Popover-scoped actions\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n event.preventDefault();\n this.focusOnNextListItem(event.key);\n break;\n case 'Escape':\n searchcraftStore.getState().setPopoverVisibility(false);\n break;\n default:\n return;\n }\n };\n\n handleInputInit = () => {\n const input = this.hostElement.querySelector(\n '.searchcraft-input-form-input',\n ) as HTMLInputElement | undefined;\n input?.focus();\n };\n\n /**\n * When popover is `inline` and the viewport is at the smallest breakpoint,\n * focusing on the input will open a modal version of the popover form.\n */\n handleInputFocus() {\n this.isFocused = true;\n\n if (\n this.type === 'inline' &&\n window.visualViewport &&\n window.visualViewport.width < this.breakpointSm\n ) {\n searchcraftStore.getState().setPopoverVisibility(true);\n\n // Appends a popover form of type=`modal` to the body\n if (!this.modalElement) {\n this.modalElement = document.createElement('searchcraft-popover-form');\n this.modalElement.popoverResultMappings = this.popoverResultMappings;\n this.modalElement.setAttribute('type', 'fullscreen');\n document.body.appendChild(this.modalElement);\n }\n }\n }\n\n handleModalBackdropClick(_event: MouseEvent) {\n searchcraftStore.getState().setPopoverVisibility(false);\n }\n\n /**\n * When a hotkey is pressed, tests if the modifiers also match.\n * If modifiers match, toggles visibility of the popover modal.\n */\n handleHotkeyPressed(event: KeyboardEvent) {\n if (\n (event.ctrlKey && this.hotkeyModifier === 'ctrl') ||\n (event.altKey && this.hotkeyModifier === 'alt') ||\n (event.metaKey && this.hotkeyModifier === 'meta')\n ) {\n event.preventDefault();\n if (this.type === 'inline' && !this.isPopoverVisibleInState) {\n const hostElementInput = this.hostElement.querySelector(\n '.searchcraft-input-form-input',\n ) as HTMLInputElement | undefined;\n hostElementInput?.focus();\n } else {\n searchcraftStore\n .getState()\n .setPopoverVisibility(!this.isPopoverVisibleInState);\n }\n }\n }\n\n handleCancelButtonClick() {\n searchcraftStore.getState().setPopoverVisibility(false);\n }\n\n /**\n * Moves focus to the next/previous list item in the list view. If you are at the top\n * of the list view, it moves focus back to the input.\n *\n * @param direction\n */\n focusOnNextListItem(direction: 'ArrowDown' | 'ArrowUp') {\n const listItems = Array.from(\n document.querySelectorAll<HTMLAnchorElement>(\n '.searchcraft-popover-list-item-link',\n ),\n ).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);\n\n const currentIndex = listItems.indexOf(\n document.activeElement as HTMLAnchorElement,\n );\n\n if (direction === 'ArrowDown') {\n listItems[(currentIndex + 1) % listItems.length]?.focus();\n } else if (direction === 'ArrowUp') {\n if (currentIndex >= 1) {\n listItems[currentIndex - 1]?.focus();\n } else {\n const input = document.querySelector('.searchcraft-input-form-input') as\n | HTMLInputElement\n | undefined;\n\n if (input) {\n input.focus();\n requestAnimationFrame(() => {\n input.selectionEnd = input.value.length;\n input.selectionStart = input.value.length;\n });\n }\n }\n }\n }\n\n get hasResultsToShow() {\n return (\n this.searchTerm &&\n this.searchTerm?.trim()?.length > 0 &&\n this.searchClientResponseItems.length > 0\n );\n }\n\n renderInlinePopover() {\n const isListViewVisible = this.hasResultsToShow && this.isFocused;\n\n return (\n <div\n class={classNames(\n 'searchcraft-popover-form searchcraft-popover-form-inline',\n {\n 'searchcraft-popover-form-active': isListViewVisible,\n },\n )}\n >\n <div class='searchcraft-popover-form-input searchcraft-popover-form-inline-input'>\n <searchcraft-input-form\n onInputFocus={this.handleInputFocus.bind(this)}\n />\n </div>\n {isListViewVisible && (\n <div class='searchcraft-popover-form-inline-wrapper'>\n <searchcraft-popover-list-view\n popoverResultMappings={this.popoverResultMappings}\n searchClientResponseItems={this.searchClientResponseItems}\n adClientResponseItems={this.adClientResponseItems}\n searchResultsPage={this.searchResultsPage}\n searchResultsPerPage={this.searchResultsPerPage}\n />\n <searchcraft-popover-footer />\n </div>\n )}\n </div>\n );\n }\n\n renderModalPopover() {\n if (this.isPopoverVisibleInState) {\n return (\n <div\n class={classNames(\n 'searchcraft-popover-form searchcraft-popover-form-modal',\n {\n 'searchcraft-popover-form-active': this.hasResultsToShow,\n },\n )}\n >\n {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}\n <div\n class='searchcraft-popover-form-modal-backdrop'\n onClick={this.handleModalBackdropClick}\n />\n <div class='searchcraft-popover-form-modal-wrapper'>\n <div class='searchcraft-popover-form-input searchcraft-popover-form-modal-input'>\n <searchcraft-input-form\n onInputFocus={this.handleInputFocus.bind(this)}\n onInputInit={this.handleInputInit.bind(this)}\n />\n <button\n type='button'\n class='searchcraft-popover-form-input-cancel-button searchcraft-popover-form-modal-input-cancel-button'\n onClick={this.handleCancelButtonClick.bind(this)}\n >\n Cancel\n </button>\n </div>\n {this.hasResultsToShow && (\n <searchcraft-popover-list-view\n popoverResultMappings={this.popoverResultMappings}\n searchClientResponseItems={this.searchClientResponseItems}\n adClientResponseItems={this.adClientResponseItems}\n searchResultsPage={this.searchResultsPage}\n searchResultsPerPage={this.searchResultsPerPage}\n />\n )}\n <searchcraft-popover-footer />\n </div>\n </div>\n );\n }\n }\n\n renderFullscreenPopover() {\n if (this.isPopoverVisibleInState) {\n return (\n <div\n class={classNames(\n 'searchcraft-popover-form searchcraft-popover-form-fullscreen',\n {\n 'searchcraft-popover-form-active': this.hasResultsToShow,\n },\n )}\n >\n <div class='searchcraft-popover-form-input searchcraft-popover-form-fullscreen-input'>\n <searchcraft-input-form\n onInputFocus={this.handleInputFocus.bind(this)}\n onInputInit={this.handleInputInit.bind(this)}\n />\n <button\n type='button'\n class='searchcraft-popover-form-input-cancel-button searchcraft-popover-form-fullscreen-input-cancel-button'\n onClick={this.handleCancelButtonClick.bind(this)}\n >\n Cancel\n </button>\n </div>\n {this.hasResultsToShow && (\n <searchcraft-popover-list-view\n popoverResultMappings={this.popoverResultMappings}\n searchClientResponseItems={this.searchClientResponseItems}\n adClientResponseItems={this.adClientResponseItems}\n searchResultsPage={this.searchResultsPage}\n searchResultsPerPage={this.searchResultsPerPage}\n />\n )}\n <searchcraft-popover-footer />\n </div>\n );\n }\n }\n\n render() {\n switch (this.type) {\n case 'inline':\n return this.renderInlinePopover();\n case 'modal':\n return this.renderModalPopover();\n case 'fullscreen':\n return this.renderFullscreenPopover();\n }\n }\n}\n"],"version":3}
@@ -1,4 +1,4 @@
1
- import { S as SearchcraftPopoverListItem$1, d as defineCustomElement$1 } from './p-8aa0fff5.js';
1
+ import { S as SearchcraftPopoverListItem$1, d as defineCustomElement$1 } from './p-5d17ace0.js';
2
2
 
3
3
  const SearchcraftPopoverListItem = SearchcraftPopoverListItem$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { S as SearchcraftPopoverListView$1, d as defineCustomElement$1 } from './p-34a32648.js';
1
+ import { S as SearchcraftPopoverListView$1, d as defineCustomElement$1 } from './p-a62a2e74.js';
2
2
 
3
3
  const SearchcraftPopoverListView = SearchcraftPopoverListView$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, h } from './p-5365011f.js';
2
- import { s as searchcraftStore } from './p-f8df3d49.js';
2
+ import { s as searchcraftStore } from './p-17c646e2.js';
3
3
  import { f as formatNumberWithCommas } from './p-6104fe5d.js';
4
4
  import { h as html } from './p-810a7850.js';
5
5
 
@@ -10,13 +10,6 @@ const SearchcraftResultsInfo$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
10
10
  }
11
11
  /**
12
12
  * A callback function responsible for rendering the results info.
13
- *
14
- * @example
15
- * ```ts
16
- * resultsInfo.template = html`
17
- * ${range[0]}-${range[1]} of ${count} results in ${responseTime}ms
18
- * `;
19
- * ```
20
13
  */
21
14
  template;
22
15
  // store vars
@@ -1 +1 @@
1
- {"file":"searchcraft-results-info.js","mappings":";;;;;MAuDaA,wBAAsB;;;;;;;;;;;;;;;IAWzB,QAAQ,CAAuB;;IAG9B,UAAU,CAAC;IACX,iBAAiB,CAAC;IAClB,oBAAoB,CAAC;IACrB,kBAAkB,CAAC;;IAGnB,KAAK,GAAG,CAAC,CAAC;IACV,KAAK,GAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzB,YAAY,GAAG,GAAG,CAAC;IAE5B,WAAW,GAAe,SAAQ,CAAC;IAEnC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC,KAAK;;YAElD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;YACnC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC;YACjD,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,oBAAoB,CAAC;YACvD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,kBAAkB,CAAC;;YAGnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC;YACrC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBACX,IAAI,CAAC,iBAAiB,IAAI,CAAC;sBACvB,CAAC;sBACD,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC;YAC/D,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,CAAC;YACnE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBACX,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,kBAAkB;sBACnC,IAAI,CAAC,kBAAkB;sBACvB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACpB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,uBAAuB,IAAI,CAAC,IAAI,IAAI,EAAE,OAAO,CACvE,CAAC,CACF,CAAC;SACH,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,kBAAkB,KAAK,CAAC,EAAE;YACrD,OAAO,IAAI,CAAC;SACb;QAED,QACE,SAAG,KAAK,EAAC,0BAA0B,IAChC,OAAO,IAAI,CAAC,QAAQ,KAAK,WAAW;cACjC,IAAI,CAAC,QAAQ,CACX;gBACE,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;gBACrD,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,YAAY,EAAE,IAAI,CAAC,YAAY;aAChC,EACD,EAAE,IAAI,EAAE,CACT;cACD,GAAG,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,qBAAqB,IAAI,CAAC,YAAY,IAAI,CACjF,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftResultsInfo"],"sources":["src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"sourcesContent":["import { Component, h, State, Prop } from '@stencil/core';\n\nimport type { ResultsInfoTemplate } from '@searchcraft/core';\n\nimport { searchcraftStore } from '@store';\n\nimport { formatNumberWithCommas, html } from '@utils';\n\n/**\n * This web component is designed to display the number of results returned from a search query.\n *\n * @import\n * ```jsx\n * // react\n * import { SearchcraftResultsInfo } from \"@searchcraft/react-sdk\";\n *\n * // vue\n * import { SearchcraftResultsInfo } from \"@searchcraft/vue-sdk\";\n * ```\n *\n * @js-example\n * ```html\n * <!-- index.html -->\n * <searchcraft-results-info />\n * ```\n *\n * ```js\n * // index.js\n * const resultsInfo = document.querySelector('searchcraft-results-info');\n *\n * resultsInfo.template = (info, { html }) => html`\n * ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms\n * `;\n * ```\n *\n * @react-example\n * ```jsx\n * <SearchcraftResultsInfo\n * template={(info, { html }) => html`\n * ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms\n * `}\n * />\n *\n * @vue-example\n * ```jsx\n * <SearchcraftResultsInfo\n * :template={(info, { html }) => html`\n * ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms\n * `}\n * />\n */\n@Component({\n tag: 'searchcraft-results-info',\n shadow: false,\n})\nexport class SearchcraftResultsInfo {\n /**\n * A callback function responsible for rendering the results info.\n *\n * @example\n * ```ts\n * resultsInfo.template = html`\n * ${range[0]}-${range[1]} of ${count} results in ${responseTime}ms\n * `;\n * ```\n */\n @Prop() template?: ResultsInfoTemplate;\n\n // store vars\n @State() searchTerm;\n @State() searchResultsPage;\n @State() searchResultsPerPage;\n @State() searchResultsCount;\n\n // local vars\n @State() count = 0;\n @State() range: number[] = [0, 0];\n @State() responseTime = '0';\n\n unsubscribe: () => void = () => {};\n\n connectedCallback() {\n this.unsubscribe = searchcraftStore.subscribe((state) => {\n // store vars\n this.searchTerm = state.searchTerm;\n this.searchResultsPage = state.searchResultsPage;\n this.searchResultsPerPage = state.searchResultsPerPage;\n this.searchResultsCount = state.searchResultsCount;\n\n // local vars\n this.count = this.searchResultsCount;\n this.range[0] =\n this.searchResultsPage <= 1\n ? 1\n : this.searchResultsPerPage * (this.searchResultsPage - 1);\n this.range[1] = this.searchResultsPerPage * this.searchResultsPage;\n this.range[1] =\n this.range[1] > this.searchResultsCount\n ? this.searchResultsCount\n : this.range[1];\n this.responseTime = ((state.searchResponseTimeTaken || 0) * 1000).toFixed(\n 2,\n );\n });\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n }\n\n render() {\n if (!this.searchTerm || this.searchResultsCount === 0) {\n return null;\n }\n\n return (\n <p class='searchcraft-results-info'>\n {typeof this.template !== 'undefined'\n ? this.template(\n {\n range: [Number(this.range[0]), Number(this.range[1])],\n count: this.count,\n responseTime: this.responseTime,\n },\n { html },\n )\n : `${formatNumberWithCommas(this.count)} results found in ${this.responseTime}ms`}\n </p>\n );\n }\n}\n"],"version":3}
1
+ {"file":"searchcraft-results-info.js","mappings":";;;;;MA0DaA,wBAAsB;;;;;;;;IAIzB,QAAQ,CAAuB;;IAG9B,UAAU,CAAC;IACX,iBAAiB,CAAC;IAClB,oBAAoB,CAAC;IACrB,kBAAkB,CAAC;;IAGnB,KAAK,GAAG,CAAC,CAAC;IACV,KAAK,GAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzB,YAAY,GAAG,GAAG,CAAC;IAE5B,WAAW,GAAe,SAAQ,CAAC;IAEnC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC,KAAK;;YAElD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;YACnC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC;YACjD,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,oBAAoB,CAAC;YACvD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,kBAAkB,CAAC;;YAGnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC;YACrC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBACX,IAAI,CAAC,iBAAiB,IAAI,CAAC;sBACvB,CAAC;sBACD,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC;YAC/D,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,CAAC;YACnE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBACX,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,kBAAkB;sBACnC,IAAI,CAAC,kBAAkB;sBACvB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACpB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,uBAAuB,IAAI,CAAC,IAAI,IAAI,EAAE,OAAO,CACvE,CAAC,CACF,CAAC;SACH,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,kBAAkB,KAAK,CAAC,EAAE;YACrD,OAAO,IAAI,CAAC;SACb;QAED,QACE,SAAG,KAAK,EAAC,0BAA0B,IAChC,OAAO,IAAI,CAAC,QAAQ,KAAK,WAAW;cACjC,IAAI,CAAC,QAAQ,CACX;gBACE,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;gBACrD,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,YAAY,EAAE,IAAI,CAAC,YAAY;aAChC,EACD,EAAE,IAAI,EAAE,CACT;cACD,GAAG,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,qBAAqB,IAAI,CAAC,YAAY,IAAI,CACjF,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftResultsInfo"],"sources":["src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"sourcesContent":["import { Component, h, State, Prop } from '@stencil/core';\n\nimport type { ResultsInfoTemplate } from '@searchcraft/core';\n\nimport { searchcraftStore } from '@store';\n\nimport { formatNumberWithCommas, html } from '@utils';\n\n/**\n * This web component is designed to display the number of results returned from a search query.\n *\n * @react-import\n * ```jsx\n * import { SearchcraftResultsInfo } from \"@searchcraft/react-sdk\";\n * ```\n *\n * @vue-import\n * ```jsx\n * import { SearchcraftResultsInfo } from \"@searchcraft/vue-sdk\";\n * ```\n *\n * @js-example\n * ```html\n * <!-- index.html -->\n * <searchcraft-results-info />\n * ```\n *\n * ```js\n * // index.js\n * const resultsInfo = document.querySelector('searchcraft-results-info');\n *\n * resultsInfo.template = (info, { html }) => html`\n * ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms\n * `;\n * ```\n *\n * @react-example\n * ```jsx\n * <SearchcraftResultsInfo\n * template={(info, { html }) => html`\n * ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms\n * `}\n * />\n * ```\n *\n * @vue-example\n * ```jsx\n * <SearchcraftResultsInfo\n * :template={(info, { html }) => html`\n * ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms\n * `}\n * />\n * ```\n */\n@Component({\n tag: 'searchcraft-results-info',\n shadow: false,\n})\nexport class SearchcraftResultsInfo {\n /**\n * A callback function responsible for rendering the results info.\n */\n @Prop() template?: ResultsInfoTemplate;\n\n // store vars\n @State() searchTerm;\n @State() searchResultsPage;\n @State() searchResultsPerPage;\n @State() searchResultsCount;\n\n // local vars\n @State() count = 0;\n @State() range: number[] = [0, 0];\n @State() responseTime = '0';\n\n unsubscribe: () => void = () => {};\n\n connectedCallback() {\n this.unsubscribe = searchcraftStore.subscribe((state) => {\n // store vars\n this.searchTerm = state.searchTerm;\n this.searchResultsPage = state.searchResultsPage;\n this.searchResultsPerPage = state.searchResultsPerPage;\n this.searchResultsCount = state.searchResultsCount;\n\n // local vars\n this.count = this.searchResultsCount;\n this.range[0] =\n this.searchResultsPage <= 1\n ? 1\n : this.searchResultsPerPage * (this.searchResultsPage - 1);\n this.range[1] = this.searchResultsPerPage * this.searchResultsPage;\n this.range[1] =\n this.range[1] > this.searchResultsCount\n ? this.searchResultsCount\n : this.range[1];\n this.responseTime = ((state.searchResponseTimeTaken || 0) * 1000).toFixed(\n 2,\n );\n });\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n }\n\n render() {\n if (!this.searchTerm || this.searchResultsCount === 0) {\n return null;\n }\n\n return (\n <p class='searchcraft-results-info'>\n {typeof this.template !== 'undefined'\n ? this.template(\n {\n range: [Number(this.range[0]), Number(this.range[1])],\n count: this.count,\n responseTime: this.responseTime,\n },\n { html },\n )\n : `${formatNumberWithCommas(this.count)} results found in ${this.responseTime}ms`}\n </p>\n );\n }\n}\n"],"version":3}
@@ -1,4 +1,4 @@
1
- import { S as SearchcraftSearchResult$1, d as defineCustomElement$1 } from './p-39e70a00.js';
1
+ import { S as SearchcraftSearchResult$1, d as defineCustomElement$1 } from './p-172a848d.js';
2
2
 
3
3
  const SearchcraftSearchResult = SearchcraftSearchResult$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, h } from './p-5365011f.js';
2
- import { s as searchcraftStore } from './p-f8df3d49.js';
2
+ import { s as searchcraftStore } from './p-17c646e2.js';
3
3
  import { d as defineCustomElement$2 } from './p-73db9122.js';
4
4
 
5
5
  const SearchcraftSearchResultsPerPage$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftSearchResultsPerPage extends H {
@@ -1 +1 @@
1
- {"file":"searchcraft-search-results-per-page.js","mappings":";;;;MAmCaA,iCAA+B;;;;;;;;;IAKlC,SAAS,GAAoB,EAAE,CAAC;;IAG/B,UAAU,CAAC;IACX,iBAAiB,CAAC;IAClB,oBAAoB,CAAC;IACrB,kBAAkB,CAAC;IACnB,uBAAuB,CAAC;;IAGxB,2BAA2B,CAAC;;IAG5B,uBAAuB,GAA8B,SAAQ,CAAC;IAC9D,oBAAoB,GAA2B,SAAQ,CAAC;IAEzD,WAAW,GAAe,SAAQ,CAAC;IAE3C,gBAAgB;QACd,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC,KAAK;;YAElD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;YACnC,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,oBAAoB,CAAC;YACvD,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC;YACjD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,kBAAkB,CAAC;;YAGnD,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,IAAI,CACtC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,CACpD,CAAC;;YAGF,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,oBAAoB,CAAC;YACvD,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC,uBAAuB,CAAC;SAC9D,CAAC,CAAC;QAEH,IAAI,CAAC,2BAA2B;YAC9B,gBAAgB,CAAC,QAAQ,EAAE,CAAC,oBAAoB,CAAC;KACpD;IAED,oBAAoB;QAClB,IAAI,CAAC,WAAW,IAAI,CAAC;KACtB;IAED,MAAM;;QAEJ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,uBAAuB,IAAI,CAAC,EAAE;YACzD,OAAO;SACR;QAED,QACE,WAAK,KAAK,EAAC,qCAAqC,IAC9C,WAAK,KAAK,EAAC,4CAA4C,IACrD,aACE,KAAK,EAAC,kDAAkD,EACxD,OAAO,EAAC,kDAAkD,uBAGpD,EACR,WAAK,KAAK,EAAC,kDAAkD,IAC3D,0BACE,OAAO,EAAC,kDAAkD,EAC1D,IAAI,EAAC,kBAAkB,EACvB,OAAO,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK;gBAClC,MAAM,KAAK,GACT,IAAI,CAAC,2BAA2B;oBAChC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;gBACjC,OAAO;oBACL,KAAK,EAAE,GAAG,KAAK,EAAE;oBACjB,KAAK;iBACN,CAAC;aACH,CAAC,EACF,cAAc,EAAE,CAAC,KAAK;gBACpB,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;gBACnD,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;aAC9B,GACD,CACE,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftSearchResultsPerPage"],"sources":["src/components/searchcraft-search-results-per-page/searchcraft-search-results-per-page.tsx"],"sourcesContent":["import { searchcraftStore } from '@store';\nimport { Component, h, State, Prop } from '@stencil/core';\n\n/**\n * This web component is designed to choose the number of search results displayed.\n *\n * @import\n * ```jsx\n * // react\n * import { SearchcraftSearchResultsPerPage } from \"@searchcraft/react-sdk\";\n *\n * // vue\n * import { SearchcraftSearchResultsPerPage } from \"@searchcraft/vue-sdk\";\n * ```\n *\n * @js-example\n * ```html\n * <!-- index.html -->\n * <searchcraft-search-results-per-page increment=\"20\" />\n * ```\n *\n * @react-example\n * ```jsx\n * <SearchcraftSearchResultsPerPage increment={20} />\n * ```\n *\n * @vue-example\n * ```jsx\n * <SearchcraftSearchResultsPerPage increment=\"20\" />\n * ```\n */\n@Component({\n tag: 'searchcraft-search-results-per-page',\n shadow: false,\n})\nexport class SearchcraftSearchResultsPerPage {\n /**\n * The amount the options will increase (e.g. 20 = [20, 40, 60, 80, 100]).\n * The base value is defined by the `searchResultsPerPage` option in the configuration.\n */\n @Prop() increment: string | number = 20;\n\n // store vars\n @State() searchTerm;\n @State() searchResultsPage;\n @State() searchResultsPerPage;\n @State() searchResultsCount;\n @State() searchResultsPagesCount;\n\n // local vars\n @State() initialSearchResultsPerPage;\n\n // store functions\n @State() setSearchResultsPerPage: (perPage: number) => void = () => {};\n @State() setSearchResultsPage: (page: number) => void = () => {};\n\n private unsubscribe: () => void = () => {};\n\n componentDidLoad() {\n this.unsubscribe = searchcraftStore.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\n // store functions\n this.setSearchResultsPage = state.setSearchResultsPage;\n this.setSearchResultsPerPage = state.setSearchResultsPerPage;\n });\n\n this.initialSearchResultsPerPage =\n searchcraftStore.getState().searchResultsPerPage;\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\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 class='searchcraft-search-results-per-page'>\n <div class='searchcraft-search-results-per-page-select'>\n <label\n class='searchcraft-search-results-per-page-select-label'\n htmlFor='searchcraft-search-results-per-page-select-input'\n >\n Results Per Page\n </label>\n <div class='searchcraft-search-results-per-page-select-input'>\n <searchcraft-select\n inputId='searchcraft-search-results-per-page-select-input'\n name='results-per-page'\n options={[...Array(5)].map((_, index) => {\n const value =\n this.initialSearchResultsPerPage +\n Number(this.increment) * index;\n return {\n label: `${value}`,\n value,\n };\n })}\n onSelectChange={(event) => {\n this.setSearchResultsPerPage(Number(event.detail));\n this.setSearchResultsPage(1);\n }}\n />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"searchcraft-search-results-per-page.js","mappings":";;;;MAoCaA,iCAA+B;;;;;;;;;IAKlC,SAAS,GAAoB,EAAE,CAAC;;IAG/B,UAAU,CAAC;IACX,iBAAiB,CAAC;IAClB,oBAAoB,CAAC;IACrB,kBAAkB,CAAC;IACnB,uBAAuB,CAAC;;IAGxB,2BAA2B,CAAC;;IAG5B,uBAAuB,GAA8B,SAAQ,CAAC;IAC9D,oBAAoB,GAA2B,SAAQ,CAAC;IAEzD,WAAW,GAAe,SAAQ,CAAC;IAE3C,gBAAgB;QACd,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC,KAAK;;YAElD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;YACnC,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,oBAAoB,CAAC;YACvD,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC;YACjD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,kBAAkB,CAAC;;YAGnD,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,IAAI,CACtC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,CACpD,CAAC;;YAGF,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,oBAAoB,CAAC;YACvD,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC,uBAAuB,CAAC;SAC9D,CAAC,CAAC;QAEH,IAAI,CAAC,2BAA2B;YAC9B,gBAAgB,CAAC,QAAQ,EAAE,CAAC,oBAAoB,CAAC;KACpD;IAED,oBAAoB;QAClB,IAAI,CAAC,WAAW,IAAI,CAAC;KACtB;IAED,MAAM;;QAEJ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,uBAAuB,IAAI,CAAC,EAAE;YACzD,OAAO;SACR;QAED,QACE,WAAK,KAAK,EAAC,qCAAqC,IAC9C,WAAK,KAAK,EAAC,4CAA4C,IACrD,aACE,KAAK,EAAC,kDAAkD,EACxD,OAAO,EAAC,kDAAkD,uBAGpD,EACR,WAAK,KAAK,EAAC,kDAAkD,IAC3D,0BACE,OAAO,EAAC,kDAAkD,EAC1D,IAAI,EAAC,kBAAkB,EACvB,OAAO,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK;gBAClC,MAAM,KAAK,GACT,IAAI,CAAC,2BAA2B;oBAChC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;gBACjC,OAAO;oBACL,KAAK,EAAE,GAAG,KAAK,EAAE;oBACjB,KAAK;iBACN,CAAC;aACH,CAAC,EACF,cAAc,EAAE,CAAC,KAAK;gBACpB,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;gBACnD,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;aAC9B,GACD,CACE,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftSearchResultsPerPage"],"sources":["src/components/searchcraft-search-results-per-page/searchcraft-search-results-per-page.tsx"],"sourcesContent":["import { searchcraftStore } from '@store';\nimport { Component, h, State, Prop } from '@stencil/core';\n\n/**\n * This web component is designed to choose the number of search results displayed.\n *\n * @react-import\n * ```jsx\n * import { SearchcraftSearchResultsPerPage } from \"@searchcraft/react-sdk\";\n * ```\n *\n * @vue-import\n * ```jsx\n * import { SearchcraftSearchResultsPerPage } from \"@searchcraft/vue-sdk\";\n * ```\n *\n * @js-example\n * ```html\n * <!-- index.html -->\n * <searchcraft-search-results-per-page increment=\"20\" />\n * ```\n *\n * @react-example\n * ```jsx\n * <SearchcraftSearchResultsPerPage increment={20} />\n * ```\n *\n * @vue-example\n * ```jsx\n * <SearchcraftSearchResultsPerPage increment=\"20\" />\n * ```\n */\n@Component({\n tag: 'searchcraft-search-results-per-page',\n shadow: false,\n})\nexport class SearchcraftSearchResultsPerPage {\n /**\n * The amount the options will increase (e.g. 20 = [20, 40, 60, 80, 100]).\n * The base value is defined by the `searchResultsPerPage` option in the configuration.\n */\n @Prop() increment: string | number = 20;\n\n // store vars\n @State() searchTerm;\n @State() searchResultsPage;\n @State() searchResultsPerPage;\n @State() searchResultsCount;\n @State() searchResultsPagesCount;\n\n // local vars\n @State() initialSearchResultsPerPage;\n\n // store functions\n @State() setSearchResultsPerPage: (perPage: number) => void = () => {};\n @State() setSearchResultsPage: (page: number) => void = () => {};\n\n private unsubscribe: () => void = () => {};\n\n componentDidLoad() {\n this.unsubscribe = searchcraftStore.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\n // store functions\n this.setSearchResultsPage = state.setSearchResultsPage;\n this.setSearchResultsPerPage = state.setSearchResultsPerPage;\n });\n\n this.initialSearchResultsPerPage =\n searchcraftStore.getState().searchResultsPerPage;\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\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 class='searchcraft-search-results-per-page'>\n <div class='searchcraft-search-results-per-page-select'>\n <label\n class='searchcraft-search-results-per-page-select-label'\n htmlFor='searchcraft-search-results-per-page-select-input'\n >\n Results Per Page\n </label>\n <div class='searchcraft-search-results-per-page-select-input'>\n <searchcraft-select\n inputId='searchcraft-search-results-per-page-select-input'\n name='results-per-page'\n options={[...Array(5)].map((_, index) => {\n const value =\n this.initialSearchResultsPerPage +\n Number(this.increment) * index;\n return {\n label: `${value}`,\n value,\n };\n })}\n onSelectChange={(event) => {\n this.setSearchResultsPerPage(Number(event.detail));\n this.setSearchResultsPage(1);\n }}\n />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
@@ -1,8 +1,8 @@
1
1
  import { p as proxyCustomElement, H, h } from './p-5365011f.js';
2
- import { n as nanoid, d as defineCustomElement$4 } from './p-e72d0167.js';
3
- import { s as searchcraftStore } from './p-f8df3d49.js';
2
+ import { n as nanoid, d as defineCustomElement$4 } from './p-13e81b5d.js';
3
+ import { s as searchcraftStore } from './p-17c646e2.js';
4
4
  import { d as defineCustomElement$3 } from './p-f2585cdf.js';
5
- import { d as defineCustomElement$2 } from './p-39e70a00.js';
5
+ import { d as defineCustomElement$2 } from './p-172a848d.js';
6
6
 
7
7
  const SearchcraftSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftSearchResults extends H {
8
8
  constructor() {
@@ -1 +1 @@
1
- {"file":"searchcraft-search-results.js","mappings":"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","names":["SearchcraftSearchResults"],"sources":["src/components/searchcraft-search-results/searchcraft-search-results.tsx"],"sourcesContent":["import { Component, h, Prop, State, type JSX } from '@stencil/core';\nimport { nanoid } from 'nanoid';\n\nimport type {\n AdClientResponseItem,\n SearchClientResponseItem,\n SearchcraftConfig,\n SearchResultTemplate,\n SearchResultTemplateData,\n} from '@searchcraft/core';\n\nimport { type SearchcraftState, searchcraftStore } from '@store';\n\n/**\n * This web component is responsible for displaying the results of a search query. Once a query is submitted, the component formats and presents an ordered list of the results.\n *\n *\n * @import\n * ```jsx\n * // react\n * import { SearchcraftSearchResults } from \"@searchcraft/react-sdk\";\n *\n * // vue\n * import { SearchcraftSearchResults } from \"@searchcraft/vue-sdk\";\n * ```\n *\n * @js-example\n * ```html\n * <!-- index.html -->\n * <searchcraft-search-results\n * ad-interval=\"4\"\n * place-ad-at-start=\"true\"\n * />\n * ```\n *\n * ```js\n * // index.js\n * const searchResults = document.querySelector('searchcraft-search-results');\n *\n * searchResults.template = (item, index, { html }) => html`\n * <h2>${item.title}</h2>\n * `;\n * ```\n *\n * @react-example\n * ```jsx\n * <SearchcraftSearchResults\n * adInterval={4}\n * placeAdAtState={true}\n * template={(item, index, { html }) => html`\n * <h2>${item.title}</h2>\n * `}\n * />\n * ```\n *\n * @vue-example\n * ```jsx\n * <SearchcraftSearchResults\n * adInterval={4}\n * placeAdAtState={true}\n * :template={(item, index, { html }) => html`\n * <h2>${item.title}</h2>\n * `}\n * />\n * ```\n */\n@Component({\n tag: 'searchcraft-search-results',\n})\nexport class SearchcraftSearchResults {\n /**\n * A callback function responsible for rendering a result. Passed to `searchcraft-search-result`.\n */\n @Prop() template?: SearchResultTemplate<SearchResultTemplateData>;\n\n @State() searchTerm = '';\n @State() searchClientResponseItems?: SearchClientResponseItem[];\n @State() adClientResponseItems: AdClientResponseItem[] = [];\n @State() searchResultsPerPage;\n @State() searchResultsPage;\n @State() isSearchInProgress = true;\n @State() config?: SearchcraftConfig;\n\n private unsubscribe: () => void = () => {};\n\n componentDidLoad() {\n this.unsubscribe = searchcraftStore.subscribe((state) =>\n this.handleStateChange(state),\n );\n const currentState = searchcraftStore.getState();\n this.handleStateChange(currentState);\n this.searchClientResponseItems = currentState.searchClientResponseItems;\n this.searchTerm = currentState.searchTerm;\n this.config = currentState.core?.config;\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n }\n\n handleStateChange(state: SearchcraftState) {\n this.searchClientResponseItems = [...state.searchClientResponseItems];\n this.adClientResponseItems = [...state.adClientResponseItems];\n this.searchTerm = state.searchTerm;\n this.searchResultsPage = state.searchResultsPage;\n this.searchResultsPerPage = state.searchResultsPerPage;\n this.config = state.core?.config;\n this.isSearchInProgress = state.isSearchInProgress;\n }\n\n renderEmptyState() {\n return (\n <div class='searchcraft-search-results-empty-state'>\n <slot name='empty-search' />\n </div>\n );\n }\n\n renderNoResultsFoundState() {\n return (\n <div class='searchcraft-search-results'>\n <div class='searchcraft-search-results-error-message'>\n <searchcraft-error-message>\n No search results found for \"{this.searchTerm}\" query.\n </searchcraft-error-message>\n </div>\n </div>\n );\n }\n\n renderWithADMAds() {\n return (\n <div class='searchcraft-search-results'>\n {this.adClientResponseItems?.map((item) => (\n <searchcraft-ad\n adSource='adMarketplace'\n adClientResponseItem={item}\n adContainerId={nanoid()}\n key={item.id}\n />\n ))}\n {this.searchClientResponseItems?.map((item, index) => (\n <searchcraft-search-result\n key={item.id}\n document-position={\n this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n }\n index={index}\n item={item}\n template={this.template}\n />\n ))}\n </div>\n );\n }\n\n renderWithCustomAds() {\n const itemsToRender: JSX.Element[] = [];\n const interstitialInterval = this.config?.customAdInterstitialInterval || 0;\n const interstitialQuantity = this.config?.customAdInterstitialQuantity || 1;\n const adStartQuantity = this.config?.customAdStartQuantity || 0;\n const adEndQuantity = this.config?.customAdEndQuantity || 0;\n const searchItems = this.searchClientResponseItems || [];\n\n // Renders ads at beginning\n for (let n = 0; n < adStartQuantity; n++) {\n itemsToRender.push(\n <searchcraft-ad\n adSource='Custom'\n adContainerId={nanoid()}\n key={`${n}-ad`}\n />,\n );\n }\n\n // Renders search results + interstitial ads\n searchItems.forEach((item, index) => {\n if (\n interstitialInterval &&\n index % interstitialInterval === 0 &&\n index + interstitialInterval < searchItems.length &&\n index >= interstitialInterval\n ) {\n for (let n = 0; n < interstitialQuantity; n++) {\n itemsToRender.push(\n <searchcraft-ad\n adSource='Custom'\n adContainerId={nanoid()}\n key={`${item.id}-ad-${n}`}\n />,\n );\n }\n }\n itemsToRender.push(\n <searchcraft-search-result\n key={item.id}\n document-position={\n this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n }\n index={index}\n item={item}\n template={this.template}\n />,\n );\n });\n\n // Renders ads at end\n for (let n = 0; n < adEndQuantity; n++) {\n itemsToRender.push(\n <searchcraft-ad\n adSource='Custom'\n adContainerId={nanoid()}\n key={`${n}-ad`}\n />,\n );\n }\n\n return <div class='searchcraft-search-results'>{itemsToRender}</div>;\n }\n\n renderWithNativoAds() {\n const itemsToRender: JSX.Element[] = [];\n const interstitialStartIndex =\n this.config?.nativoAdInterstialStartIndex || 0;\n const interstitialInterval = this.config?.nativoAdInterstitialInterval || 0;\n const interstitialQuantity = this.config?.nativoAdInterstitialQuantity || 1;\n const adStartQuantity = this.config?.nativoAdStartQuantity || 0;\n const adEndQuantity = this.config?.nativoAdEndQuantity || 0;\n const searchItems = this.searchClientResponseItems || [];\n\n // Renders ads at beginning\n for (let n = 0; n < adStartQuantity; n++) {\n itemsToRender.push(\n <searchcraft-ad\n adSource='Nativo'\n adContainerId={nanoid()}\n key={`${n}-ad`}\n />,\n );\n }\n\n // Renders search results + interstitial ads\n searchItems.forEach((item, index) => {\n if (\n interstitialInterval &&\n (index + interstitialStartIndex) % interstitialInterval === 0 &&\n index + interstitialInterval < searchItems.length &&\n index >= interstitialInterval\n ) {\n for (let n = 0; n < interstitialQuantity; n++) {\n itemsToRender.push(\n <searchcraft-ad\n adSource='Nativo'\n adContainerId={nanoid()}\n key={`${item.id}-ad-${n}`}\n />,\n );\n }\n }\n itemsToRender.push(\n <searchcraft-search-result\n key={item.id}\n document-position={\n this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n }\n index={index}\n item={item}\n template={this.template}\n />,\n );\n });\n\n // Renders ads at end\n for (let n = 0; n < adEndQuantity; n++) {\n itemsToRender.push(\n <searchcraft-ad\n adSource='Nativo'\n adContainerId={nanoid()}\n key={`${n}-ad`}\n />,\n );\n }\n\n return <div class='searchcraft-search-results'>{itemsToRender}</div>;\n }\n\n renderWithNoAds() {\n return (\n <div class='searchcraft-search-results'>\n {this.searchClientResponseItems?.map((item, index) => (\n <searchcraft-search-result\n key={item.id}\n document-position={\n this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n }\n index={index}\n item={item}\n template={this.template}\n />\n ))}\n </div>\n );\n }\n\n render() {\n if (this.searchTerm.trim() === '') {\n return this.renderEmptyState();\n }\n\n if (\n this.searchTerm.length > 0 &&\n (this.searchClientResponseItems || []).length === 0 &&\n !this.isSearchInProgress\n ) {\n return this.renderNoResultsFoundState();\n }\n\n switch (this.config?.adSource || 'None') {\n case 'adMarketplace':\n return this.renderWithADMAds();\n case 'Custom':\n return this.renderWithCustomAds();\n case 'Nativo':\n return this.renderWithNativoAds();\n default:\n return this.renderWithNoAds();\n }\n }\n}\n"],"version":3}
1
+ {"file":"searchcraft-search-results.js","mappings":"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","names":["SearchcraftSearchResults"],"sources":["src/components/searchcraft-search-results/searchcraft-search-results.tsx"],"sourcesContent":["import { Component, h, Prop, State, type JSX } from '@stencil/core';\nimport { nanoid } from 'nanoid';\n\nimport type {\n AdClientResponseItem,\n SearchClientResponseItem,\n SearchcraftConfig,\n SearchResultTemplate,\n SearchResultTemplateData,\n} from '@searchcraft/core';\n\nimport { type SearchcraftState, searchcraftStore } from '@store';\n\n/**\n * This web component is responsible for displaying the results of a search query. Once a query is submitted, the component formats and presents an ordered list of the results.\n *\n *\n * @react-import\n * ```jsx\n * import { SearchcraftSearchResults } from \"@searchcraft/react-sdk\";\n * ```\n *\n * @vue-import\n * ```jsx\n * import { SearchcraftSearchResults } from \"@searchcraft/vue-sdk\";\n * ```\n *\n * @js-example\n * ```html\n * <!-- index.html -->\n * <searchcraft-search-results\n * ad-interval=\"4\"\n * place-ad-at-start=\"true\"\n * />\n * ```\n *\n * ```js\n * // index.js\n * const searchResults = document.querySelector('searchcraft-search-results');\n *\n * searchResults.template = (item, index, { html }) => html`\n * <h2>${item.title}</h2>\n * `;\n * ```\n *\n * @react-example\n * ```jsx\n * <SearchcraftSearchResults\n * adInterval={4}\n * placeAdAtState={true}\n * template={(item, index, { html }) => html`\n * <h2>${item.title}</h2>\n * `}\n * />\n * ```\n *\n * @vue-example\n * ```jsx\n * <SearchcraftSearchResults\n * adInterval={4}\n * placeAdAtState={true}\n * :template={(item, index, { html }) => html`\n * <h2>${item.title}</h2>\n * `}\n * />\n * ```\n */\n@Component({\n tag: 'searchcraft-search-results',\n})\nexport class SearchcraftSearchResults {\n /**\n * A callback function responsible for rendering a result. Passed to `searchcraft-search-result`.\n */\n @Prop() template?: SearchResultTemplate<SearchResultTemplateData>;\n\n @State() searchTerm = '';\n @State() searchClientResponseItems?: SearchClientResponseItem[];\n @State() adClientResponseItems: AdClientResponseItem[] = [];\n @State() searchResultsPerPage;\n @State() searchResultsPage;\n @State() isSearchInProgress = true;\n @State() config?: SearchcraftConfig;\n\n private unsubscribe: () => void = () => {};\n\n componentDidLoad() {\n this.unsubscribe = searchcraftStore.subscribe((state) =>\n this.handleStateChange(state),\n );\n const currentState = searchcraftStore.getState();\n this.handleStateChange(currentState);\n this.searchClientResponseItems = currentState.searchClientResponseItems;\n this.searchTerm = currentState.searchTerm;\n this.config = currentState.core?.config;\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n }\n\n handleStateChange(state: SearchcraftState) {\n this.searchClientResponseItems = [...state.searchClientResponseItems];\n this.adClientResponseItems = [...state.adClientResponseItems];\n this.searchTerm = state.searchTerm;\n this.searchResultsPage = state.searchResultsPage;\n this.searchResultsPerPage = state.searchResultsPerPage;\n this.config = state.core?.config;\n this.isSearchInProgress = state.isSearchInProgress;\n }\n\n renderEmptyState() {\n return (\n <div class='searchcraft-search-results-empty-state'>\n <slot name='empty-search' />\n </div>\n );\n }\n\n renderNoResultsFoundState() {\n return (\n <div class='searchcraft-search-results'>\n <div class='searchcraft-search-results-error-message'>\n <searchcraft-error-message>\n No search results found for \"{this.searchTerm}\" query.\n </searchcraft-error-message>\n </div>\n </div>\n );\n }\n\n renderWithADMAds() {\n return (\n <div class='searchcraft-search-results'>\n {this.adClientResponseItems?.map((item) => (\n <searchcraft-ad\n adSource='adMarketplace'\n adClientResponseItem={item}\n adContainerId={nanoid()}\n key={item.id}\n />\n ))}\n {this.searchClientResponseItems?.map((item, index) => (\n <searchcraft-search-result\n key={item.id}\n document-position={\n this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n }\n index={index}\n item={item}\n template={this.template}\n />\n ))}\n </div>\n );\n }\n\n renderWithCustomAds() {\n const itemsToRender: JSX.Element[] = [];\n const interstitialInterval = this.config?.customAdInterstitialInterval || 0;\n const interstitialQuantity = this.config?.customAdInterstitialQuantity || 1;\n const adStartQuantity = this.config?.customAdStartQuantity || 0;\n const adEndQuantity = this.config?.customAdEndQuantity || 0;\n const searchItems = this.searchClientResponseItems || [];\n\n // Renders ads at beginning\n for (let n = 0; n < adStartQuantity; n++) {\n itemsToRender.push(\n <searchcraft-ad\n adSource='Custom'\n adContainerId={nanoid()}\n key={`${n}-ad`}\n />,\n );\n }\n\n // Renders search results + interstitial ads\n searchItems.forEach((item, index) => {\n if (\n interstitialInterval &&\n index % interstitialInterval === 0 &&\n index + interstitialInterval < searchItems.length &&\n index >= interstitialInterval\n ) {\n for (let n = 0; n < interstitialQuantity; n++) {\n itemsToRender.push(\n <searchcraft-ad\n adSource='Custom'\n adContainerId={nanoid()}\n key={`${item.id}-ad-${n}`}\n />,\n );\n }\n }\n itemsToRender.push(\n <searchcraft-search-result\n key={item.id}\n document-position={\n this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n }\n index={index}\n item={item}\n template={this.template}\n />,\n );\n });\n\n // Renders ads at end\n for (let n = 0; n < adEndQuantity; n++) {\n itemsToRender.push(\n <searchcraft-ad\n adSource='Custom'\n adContainerId={nanoid()}\n key={`${n}-ad`}\n />,\n );\n }\n\n return <div class='searchcraft-search-results'>{itemsToRender}</div>;\n }\n\n renderWithNativoAds() {\n const itemsToRender: JSX.Element[] = [];\n const interstitialStartIndex =\n this.config?.nativoAdInterstialStartIndex || 0;\n const interstitialInterval = this.config?.nativoAdInterstitialInterval || 0;\n const interstitialQuantity = this.config?.nativoAdInterstitialQuantity || 1;\n const adStartQuantity = this.config?.nativoAdStartQuantity || 0;\n const adEndQuantity = this.config?.nativoAdEndQuantity || 0;\n const searchItems = this.searchClientResponseItems || [];\n\n // Renders ads at beginning\n for (let n = 0; n < adStartQuantity; n++) {\n itemsToRender.push(\n <searchcraft-ad\n adSource='Nativo'\n adContainerId={nanoid()}\n key={`${n}-ad`}\n />,\n );\n }\n\n // Renders search results + interstitial ads\n searchItems.forEach((item, index) => {\n if (\n interstitialInterval &&\n (index + interstitialStartIndex) % interstitialInterval === 0 &&\n index + interstitialInterval < searchItems.length &&\n index >= interstitialInterval\n ) {\n for (let n = 0; n < interstitialQuantity; n++) {\n itemsToRender.push(\n <searchcraft-ad\n adSource='Nativo'\n adContainerId={nanoid()}\n key={`${item.id}-ad-${n}`}\n />,\n );\n }\n }\n itemsToRender.push(\n <searchcraft-search-result\n key={item.id}\n document-position={\n this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n }\n index={index}\n item={item}\n template={this.template}\n />,\n );\n });\n\n // Renders ads at end\n for (let n = 0; n < adEndQuantity; n++) {\n itemsToRender.push(\n <searchcraft-ad\n adSource='Nativo'\n adContainerId={nanoid()}\n key={`${n}-ad`}\n />,\n );\n }\n\n return <div class='searchcraft-search-results'>{itemsToRender}</div>;\n }\n\n renderWithNoAds() {\n return (\n <div class='searchcraft-search-results'>\n {this.searchClientResponseItems?.map((item, index) => (\n <searchcraft-search-result\n key={item.id}\n document-position={\n this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n }\n index={index}\n item={item}\n template={this.template}\n />\n ))}\n </div>\n );\n }\n\n render() {\n if (this.searchTerm.trim() === '') {\n return this.renderEmptyState();\n }\n\n if (\n this.searchTerm.length > 0 &&\n (this.searchClientResponseItems || []).length === 0 &&\n !this.isSearchInProgress\n ) {\n return this.renderNoResultsFoundState();\n }\n\n switch (this.config?.adSource || 'None') {\n case 'adMarketplace':\n return this.renderWithADMAds();\n case 'Custom':\n return this.renderWithCustomAds();\n case 'Nativo':\n return this.renderWithNativoAds();\n default:\n return this.renderWithNoAds();\n }\n }\n}\n"],"version":3}
@@ -1,4 +1,4 @@
1
- import { S as SearchcraftSlider$1, d as defineCustomElement$1 } from './p-bc9e0e40.js';
1
+ import { S as SearchcraftSlider$1, d as defineCustomElement$1 } from './p-868803f9.js';
2
2
 
3
3
  const SearchcraftSlider = SearchcraftSlider$1;
4
4
  const defineCustomElement = defineCustomElement$1;