npm - @searchcraft/javascript-sdk - Versions diffs - 0.10.7 → 0.11.0 - Mend

@searchcraft/javascript-sdk 0.10.7 → 0.11.0

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 (135) hide show

package/dist/components/searchcraft-popover-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"searchcraft-popover-button.js","mappings":"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","names":["SearchcraftPopoverButton"],"sources":["src/components/searchcraft-popover-button/searchcraft-popover-button.tsx"],"sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\n\nimport type { PopoverButtonTemplate } from '@searchcraft/core';\n\nimport { searchcraftStore } from '@store';\n\nimport { html } from '@utils';\n\n/*\n Renders a button which, when clicked, turns on popover visibility.\n \n @react-import\n * ```jsx\n * import { SearchcraftPopoverButton } from \"@searchcraft/react-sdk\";\n * ````\n \n @vue-import\n * ```jsx\n * import { SearchcraftPopoverButton } from \"@searchcraft/vue-sdk\";\n * ```\n \n @js-example\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-button>\n * Open popover\n * </searchcraft-popover-button>\n * ```\n \n ```js\n * // index.js\n * const popoverButton = document.querySelector('searchcraft-popover-button');\n \n popoverButton.template = ({ isPopoverVisible }, { html }) => html`\n * <span>Click me</span>\n * `;\n * ```\n \n @react-example\n * ```jsx\n * <SearchcraftPopoverButton\n * template={({ isPopoverVisible }, { html }) => html`\n * <span>Click me</span>\n * `}\n * >\n * Open popover\n * </SearchcraftPopoverButton>\n * ```\n \n @vue-example\n * ```jsx\n * <SearchcraftPopoverButton\n * :template={({ isPopoverVisible }, { html }) => html`\n * <span>Click me</span>\n * `}\n * >\n * Open popover\n * </SearchcraftPopoverButton>\n * ```\n /\n@Component({\n tag: 'searchcraft-popover-button',\n shadow: false,\n})\nexport class SearchcraftPopoverButton {\n /\n A callback function responsible for rendering the button contents.\n /\n @Prop() template?: PopoverButtonTemplate;\n /\n The type of popover button to render.\n */\n @Prop() type?: 'skeuomorphic';\n\n @State() hotkey;\n @State() hotkeyModifier;\n @State() hotkeyModifierSymbol;\n @State() isPopoverVisible;\n @State() userAgent;\n\n private unsubscribe: () => void = () => {};\n\n handleOnClick() {\n searchcraftStore.getState().setPopoverVisibility(true);\n }\n\n componentDidLoad() {\n const state = searchcraftStore.getState();\n this.hotkey = state.hotkey.toUpperCase();\n this.hotkeyModifier = state.hotkeyModifier;\n this.isPopoverVisible = state.isPopoverVisible;\n this.userAgent = this.setUserAgent();\n this.hotkeyModifierSymbol = this.setHotkeyModifierSymbol();\n\n this.unsubscribe = searchcraftStore.subscribe((state) => {\n this.hotkey = state.hotkey.toUpperCase();\n this.hotkeyModifier = state.hotkeyModifier;\n this.hotkeyModifierSymbol = this.setHotkeyModifierSymbol();\n });\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n }\n\n setUserAgent() {\n const userAgent = navigator.userAgent.toLowerCase();\n\n switch (true) {\n case userAgent.includes('windows'):\n return 'window';\n case userAgent.includes('mac'):\n return 'mac';\n default:\n return 'other';\n }\n }\n\n renderOptionSymbol = () => {\n return (\n <svg\n version='1.1'\n xmlns='http://www.w3.org/2000/svg'\n width='20'\n height='20'\n viewBox='0 0 512 512'\n fill='none'\n >\n <title>Option key</title>\n <path\n d='M283,112c0-11.58,9.42-21,21-21h160c11.58,0,21,9.42,21,21s-9.42,21-21,21h-160c-11.58,0-21-9.42-21-21Z'\n fill='currentColor'\n />\n <path\n d='M485,400c0,11.58-9.42,21-21,21h-128c-8.29,0-15.82-4.9-19.19-12.47l-122.46-275.53H48c-11.58,0-21-9.42-21-21s9.42-21,21-21h160c8.29,0,15.82,4.9,19.19,12.47l122.46,275.53h114.35c11.58,0,21,9.42,21,21Z'\n fill='currentColor'\n />\n </svg>\n );\n };\n\n renderCtrlSymbol = () => {\n return (\n <svg\n version='1.1'\n xmlns='http://www.w3.org/2000/svg'\n width='20'\n height='20'\n viewBox='0 0 512 512'\n fill='none'\n >\n <title>Ctrl key</title>\n <path\n d='M388.95,209.4c-.37,5.59-2.9,10.71-7.12,14.4-3.83,3.35-8.74,5.2-13.82,5.2-6.06,0-11.83-2.61-15.81-7.17l-96.2-109.94-96.2,109.94c-3.98,4.56-9.75,7.17-15.81,7.17-5.08,0-9.99-1.84-13.82-5.2-4.22-3.69-6.75-8.81-7.12-14.4-.38-5.6,1.45-11.01,5.15-15.23l112-128c3.98-4.56,9.74-7.17,15.8-7.17s11.82,2.61,15.8,7.17l112,128c3.7,4.22,5.53,9.63,5.15,15.23Z'\n fill='currentColor'\n />\n </svg>\n );\n };\n\n renderWindowsMetaSymbol = () => {\n return (\n <svg\n version='1.1'\n xmlns='http://www.w3.org/2000/svg'\n width='20'\n height='20'\n viewBox='0 0 512 512'\n fill='none'\n >\n <title>Windows meta key</title>\n <path\n d='M206.115 255.957c-23.854-12.259-47.043-18.479-68.94-18.479-2.978 0-5.976 0.090-8.974 0.354-27.94 2.312-53.461 9.684-69.875 15.414-4.354 1.599-8.817 3.288-13.415 5.153l-44.911 155.697c30.851-11.416 58.146-16.969 83.135-16.969 40.423 0 69.764 15.104 93.996 30.652 11.481-38.959 39.022-133.045 47.241-161.162-5.975-3.642-12.038-7.285-18.257-10.66zM264.174 295.535l-45.223 157.074c13.416 7.686 58.549 32.025 93.106 32.025 27.896 0 59.126-7.148 95.417-21.896l43.178-150.988c-29.316 9.461-57.438 14.26-83.732 14.26-47.975 0-81.557-15.549-102.746-30.475zM146.411 184.395c38.559 0.399 67.076 15.104 90.708 30.251l46.376-158.672c-9.773-5.598-35.403-19.547-53.929-24.3-12.193-2.842-25.010-4.308-38.602-4.308-25.898 0.488-54.194 6.973-86.444 19.9l-44.22 155.298c32.404-12.218 60.322-18.17 86.043-18.17 0.023 0.001 0.068 0.001 0.068 0.001zM512 99.062c-29.407 11.416-58.104 17.233-85.514 17.233-45.843 0-79.646-15.901-101.547-31.183l-45.975 159.118c30.873 19.854 64.145 29.939 99.061 29.939 28.474 0 57.97-6.84 87.731-20.344l-0.091-1.111 1.867-0.443 44.468-153.209z'\n fill='currentColor'\n />\n </svg>\n );\n };\n\n renderMacMetaSymbol = () => {\n return (\n <svg\n version='1.1'\n xmlns='http://www.w3.org/2000/svg'\n width='20'\n height='20'\n viewBox='0 0 512 512'\n fill='none'\n >\n <title>Mac meta key</title>\n <path\n d='M368,283h-43v-54h43c46.87,0,85-38.13,85-85s-38.13-85-85-85-85,38.13-85,85v43h-54v-43c0-46.87-38.13-85-85-85s-85,38.13-85,85,38.13,85,85,85h43v54h-43c-46.87,0-85,38.13-85,85s38.13,85,85,85,85-38.13,85-85v-43h54v43c0,46.87,38.13,85,85,85s85-38.13,85-85-38.13-85-85-85ZM325,144c0-23.71,19.29-43,43-43s43,19.29,43,43-19.29,43-43,43h-43v-43ZM144,187c-23.71,0-43-19.29-43-43s19.29-43,43-43,43,19.29,43,43v43h-43ZM187,368c0,23.71-19.29,43-43,43s-43-19.29-43-43,19.29-43,43-43h43v43ZM283,283h-54v-54h54v54ZM368,411c-23.71,0-43-19.29-43-43v-43h43c23.71,0,43,19.29,43,43s-19.29,43-43,43Z'\n fill='currentColor'\n />\n </svg>\n );\n };\n\n setHotkeyModifierSymbol() {\n switch (this.hotkeyModifier) {\n case 'ctrl':\n return this.userAgent === 'windows'\n ? this.renderCtrlSymbol()\n : this.renderMacMetaSymbol();\n case 'alt':\n case 'option':\n return this.renderOptionSymbol();\n default:\n return this.userAgent === 'windows'\n ? this.renderWindowsMetaSymbol()\n : this.renderMacMetaSymbol();\n }\n }\n\n renderSkeuomorphicSlot() {\n return (\n <div class='searchcraft-popover-button-wrapper'>\n <div class='searchcraft-popover-button-input'>\n <svg\n class='searchcraft-popover-button-input-search-icon'\n viewBox='0 0 20 20'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n version='1.1'\n >\n <title>Search icon</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 <span>Search</span>\n </div>\n <div class='searchcraft-popover-button-keycaps'>\n <div class='searchcraft-popover-button-keycaps-keycap searchcraft-popover-button-keycaps-keycap-modifier'>\n <span>{this.hotkeyModifierSymbol}</span>\n </div>\n <div class='searchcraft-popover-button-keycaps-keycap searchcraft-popover-button-keycaps-keycap-key'>\n <span>{this.hotkey}</span>\n </div>\n </div>\n </div>\n );\n }\n\n renderSlot() {\n switch (this.type) {\n case 'skeuomorphic':\n return this.renderSkeuomorphicSlot();\n default:\n return (\n <div>\n <slot />\n </div>\n );\n }\n }\n\n render() {\n return (\n <button\n class={`searchcraft-popover-button ${this.type ? ` searchcraft-popover-button-${this.type}` : ''}`}\n innerHTML={\n typeof this.template !== 'undefined'\n ? this.template(\n { isPopoverVisible: this.isPopoverVisible },\n { html },\n )\n : undefined\n }\n onClick={this.handleOnClick.bind(this)}\n type='button'\n >\n {typeof this.template !== 'undefined'\n ? undefined\n : this.type\n ? this.renderSlot()\n : 'Open Popover'}\n </button>\n );\n }\n}\n"],"version":3}
1	+ {"file":"searchcraft-popover-button.js","mappings":"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","names":["SearchcraftPopoverButton"],"sources":["src/components/searchcraft-popover-button/searchcraft-popover-button.tsx"],"sourcesContent":["import type { SearchcraftCore } from '@classes';\nimport { registry } from '@classes/CoreInstanceRegistry';\nimport { Component, h, Prop, State } from '@stencil/core';\n\nimport type { PopoverButtonTemplate } from '@types';\n\nimport { html } from '@utils';\n\n/*\n Renders a button which, when clicked, turns on popover visibility.\n \n @react-import\n * ```jsx\n * import { SearchcraftPopoverButton } from \"@searchcraft/react-sdk\";\n * ````\n \n @vue-import\n * ```jsx\n * import { SearchcraftPopoverButton } from \"@searchcraft/vue-sdk\";\n * ```\n \n @js-example\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-button>\n * Open popover\n * </searchcraft-popover-button>\n * ```\n \n ```js\n * // index.js\n * const popoverButton = document.querySelector('searchcraft-popover-button');\n \n popoverButton.template = ({ isPopoverVisible }, { html }) => html`\n * <span>Click me</span>\n * `;\n * ```\n \n @react-example\n * ```jsx\n * <SearchcraftPopoverButton\n * template={({ isPopoverVisible }, { html }) => html`\n * <span>Click me</span>\n * `}\n * >\n * Open popover\n * </SearchcraftPopoverButton>\n * ```\n \n @vue-example\n * ```jsx\n * <SearchcraftPopoverButton\n * :template={({ isPopoverVisible }, { html }) => html`\n * <span>Click me</span>\n * `}\n * >\n * Open popover\n * </SearchcraftPopoverButton>\n * ```\n /\n@Component({\n tag: 'searchcraft-popover-button',\n shadow: false,\n})\nexport class SearchcraftPopoverButton {\n /\n A callback function responsible for rendering the button contents.\n /\n @Prop() template?: PopoverButtonTemplate;\n /\n The type of popover button to render.\n /\n @Prop() type?: 'skeuomorphic';\n /\n The id of the Searchcraft instance that this component should use.\n */\n @Prop() searchcraftId?: string;\n\n @State() hotkey;\n @State() hotkeyModifier;\n @State() hotkeyModifierSymbol;\n @State() isPopoverVisible;\n @State() userAgent;\n\n private unsubscribe: () => void = () => {};\n private cleanupCore?: () => void;\n private core?: SearchcraftCore;\n\n onCoreAvailable(core: SearchcraftCore) {\n this.core = core;\n const state = core.store.getState();\n this.hotkey = state.hotkey.toUpperCase();\n this.hotkeyModifier = state.hotkeyModifier;\n this.isPopoverVisible = state.isPopoverVisible;\n this.userAgent = this.setUserAgent();\n this.hotkeyModifierSymbol = this.setHotkeyModifierSymbol();\n\n this.unsubscribe = core.store.subscribe((state) => {\n this.hotkey = state.hotkey.toUpperCase();\n this.hotkeyModifier = state.hotkeyModifier;\n this.hotkeyModifierSymbol = this.setHotkeyModifierSymbol();\n });\n }\n\n connectedCallback() {\n this.cleanupCore = registry.useCoreInstance(\n this.searchcraftId,\n this.onCoreAvailable.bind(this),\n );\n }\n\n handleOnClick() {\n this.core?.store.getState().setPopoverVisibility(true);\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n this.cleanupCore?.();\n }\n\n setUserAgent() {\n const userAgent = navigator.userAgent.toLowerCase();\n\n switch (true) {\n case userAgent.includes('windows'):\n return 'window';\n case userAgent.includes('mac'):\n return 'mac';\n default:\n return 'other';\n }\n }\n\n renderOptionSymbol = () => {\n return (\n <svg\n version='1.1'\n xmlns='http://www.w3.org/2000/svg'\n width='20'\n height='20'\n viewBox='0 0 512 512'\n fill='none'\n >\n <title>Option key</title>\n <path\n d='M283,112c0-11.58,9.42-21,21-21h160c11.58,0,21,9.42,21,21s-9.42,21-21,21h-160c-11.58,0-21-9.42-21-21Z'\n fill='currentColor'\n />\n <path\n d='M485,400c0,11.58-9.42,21-21,21h-128c-8.29,0-15.82-4.9-19.19-12.47l-122.46-275.53H48c-11.58,0-21-9.42-21-21s9.42-21,21-21h160c8.29,0,15.82,4.9,19.19,12.47l122.46,275.53h114.35c11.58,0,21,9.42,21,21Z'\n fill='currentColor'\n />\n </svg>\n );\n };\n\n renderCtrlSymbol = () => {\n return (\n <svg\n version='1.1'\n xmlns='http://www.w3.org/2000/svg'\n width='20'\n height='20'\n viewBox='0 0 512 512'\n fill='none'\n >\n <title>Ctrl key</title>\n <path\n d='M388.95,209.4c-.37,5.59-2.9,10.71-7.12,14.4-3.83,3.35-8.74,5.2-13.82,5.2-6.06,0-11.83-2.61-15.81-7.17l-96.2-109.94-96.2,109.94c-3.98,4.56-9.75,7.17-15.81,7.17-5.08,0-9.99-1.84-13.82-5.2-4.22-3.69-6.75-8.81-7.12-14.4-.38-5.6,1.45-11.01,5.15-15.23l112-128c3.98-4.56,9.74-7.17,15.8-7.17s11.82,2.61,15.8,7.17l112,128c3.7,4.22,5.53,9.63,5.15,15.23Z'\n fill='currentColor'\n />\n </svg>\n );\n };\n\n renderWindowsMetaSymbol = () => {\n return (\n <svg\n version='1.1'\n xmlns='http://www.w3.org/2000/svg'\n width='20'\n height='20'\n viewBox='0 0 512 512'\n fill='none'\n >\n <title>Windows meta key</title>\n <path\n d='M206.115 255.957c-23.854-12.259-47.043-18.479-68.94-18.479-2.978 0-5.976 0.090-8.974 0.354-27.94 2.312-53.461 9.684-69.875 15.414-4.354 1.599-8.817 3.288-13.415 5.153l-44.911 155.697c30.851-11.416 58.146-16.969 83.135-16.969 40.423 0 69.764 15.104 93.996 30.652 11.481-38.959 39.022-133.045 47.241-161.162-5.975-3.642-12.038-7.285-18.257-10.66zM264.174 295.535l-45.223 157.074c13.416 7.686 58.549 32.025 93.106 32.025 27.896 0 59.126-7.148 95.417-21.896l43.178-150.988c-29.316 9.461-57.438 14.26-83.732 14.26-47.975 0-81.557-15.549-102.746-30.475zM146.411 184.395c38.559 0.399 67.076 15.104 90.708 30.251l46.376-158.672c-9.773-5.598-35.403-19.547-53.929-24.3-12.193-2.842-25.010-4.308-38.602-4.308-25.898 0.488-54.194 6.973-86.444 19.9l-44.22 155.298c32.404-12.218 60.322-18.17 86.043-18.17 0.023 0.001 0.068 0.001 0.068 0.001zM512 99.062c-29.407 11.416-58.104 17.233-85.514 17.233-45.843 0-79.646-15.901-101.547-31.183l-45.975 159.118c30.873 19.854 64.145 29.939 99.061 29.939 28.474 0 57.97-6.84 87.731-20.344l-0.091-1.111 1.867-0.443 44.468-153.209z'\n fill='currentColor'\n />\n </svg>\n );\n };\n\n renderMacMetaSymbol = () => {\n return (\n <svg\n version='1.1'\n xmlns='http://www.w3.org/2000/svg'\n width='20'\n height='20'\n viewBox='0 0 512 512'\n fill='none'\n >\n <title>Mac meta key</title>\n <path\n d='M368,283h-43v-54h43c46.87,0,85-38.13,85-85s-38.13-85-85-85-85,38.13-85,85v43h-54v-43c0-46.87-38.13-85-85-85s-85,38.13-85,85,38.13,85,85,85h43v54h-43c-46.87,0-85,38.13-85,85s38.13,85,85,85,85-38.13,85-85v-43h54v43c0,46.87,38.13,85,85,85s85-38.13,85-85-38.13-85-85-85ZM325,144c0-23.71,19.29-43,43-43s43,19.29,43,43-19.29,43-43,43h-43v-43ZM144,187c-23.71,0-43-19.29-43-43s19.29-43,43-43,43,19.29,43,43v43h-43ZM187,368c0,23.71-19.29,43-43,43s-43-19.29-43-43,19.29-43,43-43h43v43ZM283,283h-54v-54h54v54ZM368,411c-23.71,0-43-19.29-43-43v-43h43c23.71,0,43,19.29,43,43s-19.29,43-43,43Z'\n fill='currentColor'\n />\n </svg>\n );\n };\n\n setHotkeyModifierSymbol() {\n switch (this.hotkeyModifier) {\n case 'ctrl':\n return this.userAgent === 'windows'\n ? this.renderCtrlSymbol()\n : this.renderMacMetaSymbol();\n case 'alt':\n case 'option':\n return this.renderOptionSymbol();\n default:\n return this.userAgent === 'windows'\n ? this.renderWindowsMetaSymbol()\n : this.renderMacMetaSymbol();\n }\n }\n\n renderSkeuomorphicSlot() {\n return (\n <div class='searchcraft-popover-button-wrapper'>\n <div class='searchcraft-popover-button-input'>\n <svg\n class='searchcraft-popover-button-input-search-icon'\n viewBox='0 0 20 20'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n version='1.1'\n >\n <title>Search icon</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 <span>Search</span>\n </div>\n <div class='searchcraft-popover-button-keycaps'>\n <div class='searchcraft-popover-button-keycaps-keycap searchcraft-popover-button-keycaps-keycap-modifier'>\n <span>{this.hotkeyModifierSymbol}</span>\n </div>\n <div class='searchcraft-popover-button-keycaps-keycap searchcraft-popover-button-keycaps-keycap-key'>\n <span>{this.hotkey}</span>\n </div>\n </div>\n </div>\n );\n }\n\n renderSlot() {\n switch (this.type) {\n case 'skeuomorphic':\n return this.renderSkeuomorphicSlot();\n default:\n return (\n <div>\n <slot />\n </div>\n );\n }\n }\n\n render() {\n return (\n <button\n class={`searchcraft-popover-button ${this.type ? ` searchcraft-popover-button-${this.type}` : ''}`}\n innerHTML={\n typeof this.template !== 'undefined'\n ? this.template(\n { isPopoverVisible: this.isPopoverVisible },\n { html },\n )\n : undefined\n }\n onClick={this.handleOnClick.bind(this)}\n type='button'\n >\n {typeof this.template !== 'undefined'\n ? undefined\n : this.type\n ? this.renderSlot()\n : 'Open Popover'}\n </button>\n );\n }\n}\n"],"version":3}

package/dist/components/searchcraft-popover-footer.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftPopoverFooter$1, d as defineCustomElement$1 } from './p-b4cac872.js';
+import { S as SearchcraftPopoverFooter$1, d as defineCustomElement$1 } from './p-1d5c5536.js';
 const SearchcraftPopoverFooter = SearchcraftPopoverFooter$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-popover-form.js CHANGED Viewed

@@ -1,14 +1,14 @@
 import { p as proxyCustomElement, H, h } from './p-5365011f.js';
 import { c as classNames } from './p-5cdc6210.js';
-import { s as searchcraftStore } from './p-062d6b80.js';
-import { d as defineCustomElement$9 } from './p-adc6236e.js';
+import { r as registry } from './p-e30203b1.js';
+import { d as defineCustomElement$9 } from './p-87435aac.js';
 import { d as defineCustomElement$8 } from './p-acf23bab.js';
 import { d as defineCustomElement$7 } from './p-f2585cdf.js';
-import { d as defineCustomElement$6 } from './p-acab4d41.js';
+import { d as defineCustomElement$6 } from './p-b7e99386.js';
 import { d as defineCustomElement$5 } from './p-1adf78b9.js';
-import { d as defineCustomElement$4 } from './p-b4cac872.js';
-import { d as defineCustomElement$3 } from './p-320e3895.js';
-import { d as defineCustomElement$2 } from './p-b01f8216.js';
+import { d as defineCustomElement$4 } from './p-1d5c5536.js';
+import { d as defineCustomElement$3 } from './p-fc8ccffa.js';
+import { d as defineCustomElement$2 } from './p-b13c7fbb.js';
 const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftPopoverForm extends H {
     constructor() {
@@ -34,8 +34,11 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
      * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.
      */
     hotkeyModifier = 'meta';
+    /**
+     * The id of the Searchcraft instance that this component should use.
+     */
+    searchcraftId;
     isPopoverVisibleInState = false;
-    unsubscribe;
     searchClientResponseItems = [];
     adClientResponseItems = [];
     searchTerm;
@@ -47,19 +50,23 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
     searchResultsPerPage;
     modalElement;
     get hostElement() { return this; }
-    componentDidLoad() {
+    unsubscribe;
+    cleanupCore;
+    core;
+    onCoreAvailable(core) {
+        this.core = core;
         // Loads the breakpoint values into state
         const computedStyle = getComputedStyle(document.documentElement);
         this.breakpointSm = Number.parseFloat(computedStyle.getPropertyValue('--sc-breakpoint-sm').trim());
         this.breakpointMd = Number.parseFloat(computedStyle.getPropertyValue('--sc-breakpoint-md').trim());
         this.breakpointLg = Number.parseFloat(computedStyle.getPropertyValue('--sc-breakpoint-lg').trim());
         // Set popover visiblity in state
-        this.isPopoverVisibleInState = searchcraftStore.getState().isPopoverVisible;
+        this.isPopoverVisibleInState = core.store.getState().isPopoverVisible;
         // Add event listeners
         document.addEventListener('click', this.handleDocumentClick);
         document.addEventListener('keydown', this.handleDocumentKeyDown);
         // Subscribe to state events
-        this.unsubscribe = searchcraftStore.subscribe((state) => {
+        this.unsubscribe = core.store.subscribe((state) => {
             if (this.isPopoverVisibleInState !== state.isPopoverVisible) {
                 this.handlePopoverVisibilityChange(state.isPopoverVisible);
             }
@@ -70,12 +77,16 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
             this.searchResultsPerPage = state.searchResultsPerPage;
         });
         // Set hotkey and hotkeyModifier in state.
-        searchcraftStore
+        core.store
             .getState()
             .setHotKeyAndHotKeyModifier(this.hotkey, this.hotkeyModifier);
     }
+    connectedCallback() {
+        this.cleanupCore = registry.useCoreInstance(this.searchcraftId, this.onCoreAvailable.bind(this));
+    }
     disconnectedCallback() {
         this.unsubscribe?.();
+        this.cleanupCore?.();
         document.removeEventListener('click', this.handleDocumentClick);
         document.removeEventListener('keydown', this.handleDocumentKeyDown);
     }
@@ -111,7 +122,7 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
                 this.focusOnNextListItem(event.key);
                 break;
             case 'Escape':
-                searchcraftStore.getState().setPopoverVisibility(false);
+                this.core?.store.getState().setPopoverVisibility(false);
                 break;
             default:
                 return;
@@ -130,18 +141,19 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         if (this.type === 'inline' &&
             window.visualViewport &&
             window.visualViewport.width < this.breakpointSm) {
-            searchcraftStore.getState().setPopoverVisibility(true);
+            this.core?.store.getState().setPopoverVisibility(true);
             // Appends a popover form of type=`modal` to the body
             if (!this.modalElement) {
                 this.modalElement = document.createElement('searchcraft-popover-form');
                 this.modalElement.popoverResultMappings = this.popoverResultMappings;
                 this.modalElement.setAttribute('type', 'fullscreen');
+                this.modalElement.setAttribute('searchcraft-id', this.searchcraftId);
                 document.body.appendChild(this.modalElement);
             }
         }
     }
     handleModalBackdropClick(_event) {
-        searchcraftStore.getState().setPopoverVisibility(false);
+        this.core?.store.getState().setPopoverVisibility(false);
     }
     /**
      * When a hotkey is pressed, tests if the modifiers also match.
@@ -157,14 +169,14 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
                 hostElementInput?.focus();
             }
             else {
-                searchcraftStore
+                this.core?.store
                     .getState()
                     .setPopoverVisibility(!this.isPopoverVisibleInState);
             }
         }
     }
     handleCancelButtonClick() {
-        searchcraftStore.getState().setPopoverVisibility(false);
+        this.core?.store.getState().setPopoverVisibility(false);
     }
     /**
      * Moves focus to the next/previous list item in the list view. If you are at the top
@@ -203,20 +215,20 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         const isListViewVisible = this.hasResultsToShow && this.isFocused;
         return (h("div", { class: classNames('searchcraft-popover-form searchcraft-popover-form-inline', {
                 'searchcraft-popover-form-active': isListViewVisible,
-            }) }, 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)))));
+            }) }, h("div", { class: 'searchcraft-popover-form-input searchcraft-popover-form-inline-input' }, h("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this), searchcraftId: this.searchcraftId })), 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, searchcraftId: this.searchcraftId }), h("searchcraft-popover-footer", { searchcraftId: this.searchcraftId })))));
     }
     renderModalPopover() {
         if (this.isPopoverVisibleInState) {
             return (h("div", { class: classNames('searchcraft-popover-form searchcraft-popover-form-modal', {
                     'searchcraft-popover-form-active': this.hasResultsToShow,
-                }) }, 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-cancel-button searchcraft-popover-form-modal-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), h("div", { class: 'searchcraft-popover-form-modal-popover-list-view' }, 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))));
+                }) }, 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), searchcraftId: this.searchcraftId }), h("button", { type: 'button', class: 'searchcraft-popover-form-cancel-button searchcraft-popover-form-modal-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), h("div", { class: 'searchcraft-popover-form-modal-popover-list-view' }, this.hasResultsToShow && (h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage, searchcraftId: this.searchcraftId }))), h("searchcraft-popover-footer", { searchcraftId: this.searchcraftId }))));
         }
     }
     renderFullscreenPopover() {
         if (this.isPopoverVisibleInState) {
             return (h("div", { class: classNames('searchcraft-popover-form searchcraft-popover-form-fullscreen', {
                     'searchcraft-popover-form-active': this.hasResultsToShow,
-                }) }, 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-cancel-button searchcraft-popover-form-fullscreen-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), h("div", { class: 'searchcraft-popover-form-fullscreen-popover-list-view' }, 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)));
+                }) }, 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), searchcraftId: this.searchcraftId }), h("button", { type: 'button', class: 'searchcraft-popover-form-cancel-button searchcraft-popover-form-fullscreen-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), h("div", { class: 'searchcraft-popover-form-fullscreen-popover-list-view' }, this.hasResultsToShow && (h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage, searchcraftId: this.searchcraftId }))), h("searchcraft-popover-footer", { searchcraftId: this.searchcraftId })));
         }
     }
     render() {
@@ -234,8 +246,8 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         "popoverResultMappings": [16],
         "hotkey": [1],
         "hotkeyModifier": [1, "hotkey-modifier"],
+        "searchcraftId": [1, "searchcraft-id"],
         "isPopoverVisibleInState": [32],
-        "unsubscribe": [32],
         "searchClientResponseItems": [32],
         "adClientResponseItems": [32],
         "searchTerm": [32],

package/dist/components/searchcraft-popover-form.js.map CHANGED Viewed

	@@ -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 @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-cancel-button searchcraft-popover-form-modal-cancel-button'\n onClick={this.handleCancelButtonClick.bind(this)}\n >\n Cancel\n </button>\n </div>\n <div class='searchcraft-popover-form-modal-popover-list-view'>\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 <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-cancel-button searchcraft-popover-form-fullscreen-cancel-button'\n onClick={this.handleCancelButtonClick.bind(this)}\n >\n Cancel\n </button>\n </div>\n <div class='searchcraft-popover-form-fullscreen-popover-list-view'>\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 <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	+ {"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 '@types';\nimport { registry } from '@classes/CoreInstanceRegistry';\nimport type { SearchcraftCore } from '@classes';\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 The id of the Searchcraft instance that this component should use.\n /\n @Prop() searchcraftId?: string;\n\n @State() isPopoverVisibleInState = false;\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 private unsubscribe: (() => void) \| undefined;\n private cleanupCore?: () => void;\n core?: SearchcraftCore;\n\n onCoreAvailable(core: SearchcraftCore) {\n this.core = core;\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 = core.store.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 = core.store.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 core.store\n .getState()\n .setHotKeyAndHotKeyModifier(this.hotkey, this.hotkeyModifier);\n }\n\n connectedCallback() {\n this.cleanupCore = registry.useCoreInstance(\n this.searchcraftId,\n this.onCoreAvailable.bind(this),\n );\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n this.cleanupCore?.();\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 this.core?.store.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 this.core?.store.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 this.modalElement.setAttribute('searchcraft-id', this.searchcraftId);\n document.body.appendChild(this.modalElement);\n }\n }\n }\n\n handleModalBackdropClick(_event: MouseEvent) {\n this.core?.store.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 this.core?.store\n .getState()\n .setPopoverVisibility(!this.isPopoverVisibleInState);\n }\n }\n }\n\n handleCancelButtonClick() {\n this.core?.store.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 searchcraftId={this.searchcraftId}\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 searchcraftId={this.searchcraftId}\n />\n <searchcraft-popover-footer searchcraftId={this.searchcraftId} />\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 searchcraftId={this.searchcraftId}\n />\n <button\n type='button'\n class='searchcraft-popover-form-cancel-button searchcraft-popover-form-modal-cancel-button'\n onClick={this.handleCancelButtonClick.bind(this)}\n >\n Cancel\n </button>\n </div>\n <div class='searchcraft-popover-form-modal-popover-list-view'>\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 searchcraftId={this.searchcraftId}\n />\n )}\n </div>\n <searchcraft-popover-footer searchcraftId={this.searchcraftId} />\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 searchcraftId={this.searchcraftId}\n />\n <button\n type='button'\n class='searchcraft-popover-form-cancel-button searchcraft-popover-form-fullscreen-cancel-button'\n onClick={this.handleCancelButtonClick.bind(this)}\n >\n Cancel\n </button>\n </div>\n <div class='searchcraft-popover-form-fullscreen-popover-list-view'>\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 searchcraftId={this.searchcraftId}\n />\n )}\n </div>\n <searchcraft-popover-footer searchcraftId={this.searchcraftId} />\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}

package/dist/components/searchcraft-popover-list-item.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftPopoverListItem$1, d as defineCustomElement$1 } from './p-320e3895.js';
+import { S as SearchcraftPopoverListItem$1, d as defineCustomElement$1 } from './p-fc8ccffa.js';
 const SearchcraftPopoverListItem = SearchcraftPopoverListItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-popover-list-view.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftPopoverListView$1, d as defineCustomElement$1 } from './p-b01f8216.js';
+import { S as SearchcraftPopoverListView$1, d as defineCustomElement$1 } from './p-b13c7fbb.js';
 const SearchcraftPopoverListView = SearchcraftPopoverListView$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-results-info.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h } from './p-5365011f.js';
-import { s as searchcraftStore } from './p-062d6b80.js';
+import { r as registry } from './p-e30203b1.js';
 import { f as formatNumberWithCommas } from './p-d54771ef.js';
-import { h as html } from './p-810a7850.js';
+import { h as html } from './p-b4b67072.js';
 const SearchcraftResultsInfo$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftResultsInfo extends H {
     constructor() {
@@ -12,6 +12,10 @@ const SearchcraftResultsInfo$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
      * A callback function responsible for rendering the results info.
      */
     template;
+    /**
+     * The id of the Searchcraft instance that this component should use.
+     */
+    searchcraftId;
     // store vars
     searchTerm;
     searchResultsPage;
@@ -22,8 +26,9 @@ const SearchcraftResultsInfo$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
     range = [0, 0];
     responseTime = '0';
     unsubscribe = () => { };
-    connectedCallback() {
-        this.unsubscribe = searchcraftStore.subscribe((state) => {
+    cleanupCore;
+    onCoreAvailable(core) {
+        this.unsubscribe = core.store.subscribe((state) => {
             // store vars
             this.searchTerm = state.searchTerm;
             this.searchResultsPage = state.searchResultsPage;
@@ -43,10 +48,12 @@ const SearchcraftResultsInfo$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
             this.responseTime = ((state.searchResponseTimeTaken || 0) * 1000).toFixed(2);
         });
     }
+    connectedCallback() {
+        this.cleanupCore = registry.useCoreInstance(this.searchcraftId, this.onCoreAvailable.bind(this));
+    }
     disconnectedCallback() {
-        if (this.unsubscribe) {
-            this.unsubscribe();
-        }
+        this.unsubscribe?.();
+        this.cleanupCore?.();
     }
     render() {
         if (!this.searchTerm || this.searchResultsCount === 0) {
@@ -62,6 +69,7 @@ const SearchcraftResultsInfo$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
     }
 }, [0, "searchcraft-results-info", {
         "template": [16],
+        "searchcraftId": [1, "searchcraft-id"],
         "searchTerm": [32],
         "searchResultsPage": [32],
         "searchResultsPerPage": [32],

package/dist/components/searchcraft-results-info.js.map CHANGED Viewed

	@@ -1 +1 @@
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	+ {"file":"searchcraft-results-info.js","mappings":";;;;;MA0DaA,wBAAsB;;;;;;;;IAIzB,QAAQ,CAAuB;;;;IAI/B,aAAa,CAAU;;IAGtB,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;IAC3B,WAAW,CAAc;IAEjC,eAAe,CAAC,IAAqB;QACnC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,KAAK;;YAE5C,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,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,eAAe,CACzC,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAChC,CAAC;KACH;IAED,oBAAoB;QAClB,IAAI,CAAC,WAAW,IAAI,CAAC;QACrB,IAAI,CAAC,WAAW,IAAI,CAAC;KACtB;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 type { SearchcraftCore } from '@classes';\nimport { registry } from '@classes/CoreInstanceRegistry';\nimport { Component, h, State, Prop } from '@stencil/core';\n\nimport type { ResultsInfoTemplate } from '@types';\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 The id of the Searchcraft instance that this component should use.\n /\n @Prop() searchcraftId?: string;\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 private cleanupCore?: () => void;\n\n onCoreAvailable(core: SearchcraftCore) {\n this.unsubscribe = core.store.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 connectedCallback() {\n this.cleanupCore = registry.useCoreInstance(\n this.searchcraftId,\n this.onCoreAvailable.bind(this),\n );\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n this.cleanupCore?.();\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}

package/dist/components/searchcraft-search-result.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftSearchResult$1, d as defineCustomElement$1 } from './p-274c5cc8.js';
+import { S as SearchcraftSearchResult$1, d as defineCustomElement$1 } from './p-3286bbb3.js';
 const SearchcraftSearchResult = SearchcraftSearchResult$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-search-results-per-page.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-5365011f.js';
-import { s as searchcraftStore } from './p-062d6b80.js';
+import { r as registry } from './p-e30203b1.js';
 import { d as defineCustomElement$2 } from './p-73db9122.js';
 const SearchcraftSearchResultsPerPage$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftSearchResultsPerPage extends H {
@@ -12,6 +12,10 @@ const SearchcraftSearchResultsPerPage$1 = /*@__PURE__*/ proxyCustomElement(class
      * The base value is defined by the `searchResultsPerPage` option in the configuration.
      */
     increment = 20;
+    /**
+     * The id of the Searchcraft instance that this component should use.
+     */
+    searchcraftId;
     // store vars
     searchTerm;
     searchResultsPage;
@@ -24,8 +28,9 @@ const SearchcraftSearchResultsPerPage$1 = /*@__PURE__*/ proxyCustomElement(class
     setSearchResultsPerPage = () => { };
     setSearchResultsPage = () => { };
     unsubscribe = () => { };
-    componentDidLoad() {
-        this.unsubscribe = searchcraftStore.subscribe((state) => {
+    cleanupCore;
+    onCoreAvailable(core) {
+        this.unsubscribe = core.store.subscribe((state) => {
             // store vars
             this.searchTerm = state.searchTerm;
             this.searchResultsPerPage = state.searchResultsPerPage;
@@ -38,10 +43,14 @@ const SearchcraftSearchResultsPerPage$1 = /*@__PURE__*/ proxyCustomElement(class
             this.setSearchResultsPerPage = state.setSearchResultsPerPage;
         });
         this.initialSearchResultsPerPage =
-            searchcraftStore.getState().searchResultsPerPage;
+            core.store.getState().searchResultsPerPage;
+    }
+    connectedCallback() {
+        this.cleanupCore = registry.useCoreInstance(this.searchcraftId, this.onCoreAvailable.bind(this));
     }
     disconnectedCallback() {
         this.unsubscribe?.();
+        this.cleanupCore?.();
     }
     render() {
         // early return if there isn't a searchTerm or there is 1 or fewer pages of results
@@ -62,6 +71,7 @@ const SearchcraftSearchResultsPerPage$1 = /*@__PURE__*/ proxyCustomElement(class
     }
 }, [0, "searchcraft-search-results-per-page", {
         "increment": [8],
+        "searchcraftId": [1, "searchcraft-id"],
         "searchTerm": [32],
         "searchResultsPage": [32],
         "searchResultsPerPage": [32],

package/dist/components/searchcraft-search-results-per-page.js.map CHANGED Viewed

	@@ -1 +1 @@
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	+ {"file":"searchcraft-search-results-per-page.js","mappings":";;;;MAqCaA,iCAA+B;;;;;;;;;IAKlC,SAAS,GAAoB,EAAE,CAAC;;;;IAIhC,aAAa,CAAU;;IAGtB,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;IACnC,WAAW,CAAc;IAEjC,eAAe,CAAC,IAAqB;QACnC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,KAAK;;YAE5C,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,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,oBAAoB,CAAC;KAC9C;IAED,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,eAAe,CACzC,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAChC,CAAC;KACH;IAED,oBAAoB;QAClB,IAAI,CAAC,WAAW,IAAI,CAAC;QACrB,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 type { SearchcraftCore } from '@classes';\nimport { registry } from '@classes/CoreInstanceRegistry';\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 The id of the Searchcraft instance that this component should use.\n /\n @Prop() searchcraftId?: string;\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 private cleanupCore?: () => void;\n\n onCoreAvailable(core: SearchcraftCore) {\n this.unsubscribe = core.store.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 core.store.getState().searchResultsPerPage;\n }\n\n connectedCallback() {\n this.cleanupCore = registry.useCoreInstance(\n this.searchcraftId,\n this.onCoreAvailable.bind(this),\n );\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n this.cleanupCore?.();\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}