npm - @searchcraft/javascript-sdk - Versions diffs - 0.15.1 → 0.16.0 - Mend

@searchcraft/javascript-sdk 0.15.1 → 0.16.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 (72) hide show

package/dist/components/searchcraft-input-form2.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './index2.js?scv=0.15.1';
-import { c as classNames } from './index3.js?scv=0.15.1';
-import { r as registry } from './CoreInstanceRegistry.js?scv=0.15.1';
-import { d as defineCustomElement$3 } from './searchcraft-button2.js?scv=0.15.1';
-import { d as defineCustomElement$2 } from './searchcraft-error-message2.js?scv=0.15.1';
-import { d as defineCustomElement$1 } from './searchcraft-input-label2.js?scv=0.15.1';
+import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './index2.js?scv=0.16.0';
+import { c as classNames } from './index3.js?scv=0.16.0';
+import { r as registry } from './CoreInstanceRegistry.js?scv=0.16.0';
+import { d as defineCustomElement$3 } from './searchcraft-button2.js?scv=0.16.0';
+import { d as defineCustomElement$2 } from './searchcraft-error-message2.js?scv=0.16.0';
+import { d as defineCustomElement$1 } from './searchcraft-input-label2.js?scv=0.16.0';
 const SearchcraftInputForm = /*@__PURE__*/ proxyCustomElement(class SearchcraftInputForm extends H {
     constructor(registerHost) {
@@ -67,6 +67,7 @@ const SearchcraftInputForm = /*@__PURE__*/ proxyCustomElement(class SearchcraftI
     core;
     unsubscribe;
     cleanupCore;
+    inputElement;
     init() {
         if (this.core) {
             // Initialize inputValue from prop if provided
@@ -139,8 +140,19 @@ const SearchcraftInputForm = /*@__PURE__*/ proxyCustomElement(class SearchcraftI
     };
     handleFormSubmit = async (event) => {
         event.preventDefault();
+        this.dismissOnScreenKeyboard();
         await this.performSearch();
     };
+    /**
+     * Closes the on-screen keyboard after a search is submitted on touch devices,
+     * so it no longer covers the results. Devices with a mouse keep focus in the
+     * input, so the user can keep typing and use the arrow keys.
+     */
+    dismissOnScreenKeyboard() {
+        if (window.matchMedia?.('(hover: none) and (pointer: coarse)').matches) {
+            this.inputElement?.blur();
+        }
+    }
     render() {
         const isShowingClearButton = this.inputValue.length > 0;
         const inputGridClassNames = classNames('searchcraft-input-form-grid', {
@@ -152,11 +164,13 @@ const SearchcraftInputForm = /*@__PURE__*/ proxyCustomElement(class SearchcraftI
         const inputGridStyles = {
             gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',
         };
-        return (h("form", { key: '8ba91615394f95c0d5bd26a3006d3e8b454f047e', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, h("div", { key: 'd9025a1c041e3132280b22e5a1b039df0196cea5', class: inputGridClassNames, style: inputGridStyles }, h("div", { key: 'a8c3a80a0ccb718f974902fb1d163d5c3ee6194a', class: 'searchcraft-input-form-button' }, h("searchcraft-button", { key: 'a12ff9a8cdb9a4ce3c3fd54b1c2ae084edd37069', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), this.inputLabel && (h("div", { key: '866e7162c402524eaca864bb6e950a244245dc48', class: 'searchcraft-input-form-label' }, h("searchcraft-input-label", { key: 'c57217cd5924c827df08e22a728067e3bfc63a26', label: this.inputLabel }))), this.error && (h("div", { key: '4a54728bf366db50de39470cf31860a6307dafea', class: 'searchcraft-input-form-error-message' }, h("searchcraft-error-message", { key: '5fa5b5f5677350338d15c8e6614b0d9f584141b0' }, "Something went wrong."))), h("div", { key: '67be766103a3bca11cff6f83a2a6dea7c6c6f106', class: 'searchcraft-input-form-input-wrapper' }, h("input", { key: '931609a4e8fc55d688077ec6cb04f2bb9b86b5fe', autoComplete: 'off', class: classNames('searchcraft-input-form-input', {
+        return (h("form", { key: 'e375f04aa3062b93d07a24d6d79a63029d463c6d', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, h("div", { key: '9a9020828ba87f1edd7ec01b67575e824ecd03b9', class: inputGridClassNames, style: inputGridStyles }, h("div", { key: 'b79f9c030c8ca57cbd02034430ca518b1f83b868', class: 'searchcraft-input-form-button' }, h("searchcraft-button", { key: '90f23e6543171cb8aaf4c8e3fcb93979eba85dd4', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), this.inputLabel && (h("div", { key: '9114a59d7fad2b4b982a9f5e46466ac23c84e56f', class: 'searchcraft-input-form-label' }, h("searchcraft-input-label", { key: '9c3adad40480f97178b9054d28f17648c512ad8d', label: this.inputLabel }))), this.error && (h("div", { key: '95f070e32fe45166798913b73ceef26aaf7e68f0', class: 'searchcraft-input-form-error-message' }, h("searchcraft-error-message", { key: 'd507e9c01b9a7447b49b667d2510bf2b4d1237d1' }, "Something went wrong."))), h("div", { key: '3a5057e699b2ebd2af20ed41504e833023834570', class: 'searchcraft-input-form-input-wrapper' }, h("input", { key: '3bc445b52df4aa0392106b6245d8bddce6a7894f', autoComplete: 'off', class: classNames('searchcraft-input-form-input', {
                 'searchcraft-placeholder-hide-on-focus': this.placeholderBehavior === 'hide-on-focus',
-            }), onFocus: () => this.inputFocus?.emit(), onBlur: () => this.inputBlur?.emit(), onInput: (event) => {
+            }), enterkeyhint: 'search', ref: (el) => {
+                this.inputElement = el;
+            }, onFocus: () => this.inputFocus?.emit(), onBlur: () => this.inputBlur?.emit(), onInput: (event) => {
                 this.handleInput(event);
-            }, placeholder: this.placeholderValue, type: 'text', value: this.inputValue }), h("div", { key: '7feb32348b7faec4104137a142ba8150149498a5', class: 'searchcraft-input-form-input-icon' }, h("svg", { key: '8b9abd236d4896b8dbd5c14e06019c116e3675be', class: 'searchcraft-input-form-input-search-icon', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, h("title", { key: '4d3b6724f6532920f5531d2e15b28a06f0770688' }, "Search icon"), h("path", { key: '65a46a1916c1f020c9bebffd42aa016b59177376', d: 'M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), isShowingClearButton && (h("button", { key: '65278eb0ab49415dce79c874adf90adcb5854db5', type: 'button', class: 'searchcraft-input-form-clear-button', onClick: this.handleClearInput }, h("svg", { key: '0016263afe32250ace58cc4b98ff6106d7d9d4a0', class: 'searchcraft-input-form-clear-icon', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { key: '9b40d806455ab9c19c0cddb4c76101debdb0266c' }, "Clear icon"), h("path", { key: '2954ee1496d6736d6e780755034902c76adb81e9', d: 'M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))))))));
+            }, placeholder: this.placeholderValue, type: 'text', value: this.inputValue }), h("div", { key: '1f15e09d4a1d1c69105c6d3776fa579e2485d074', class: 'searchcraft-input-form-input-icon' }, h("svg", { key: 'c2290c43f4795235a9092ca65843534b476966d3', class: 'searchcraft-input-form-input-search-icon', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, h("title", { key: 'd039ba9a93b779aedba28fe8df299698d8d19b8c' }, "Search icon"), h("path", { key: '4206937d1f038dca6effee55ca03e9046377c14c', d: 'M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), isShowingClearButton && (h("button", { key: '3dfa0dfc5d1b6708f79db2c085bd8b5f18e0b67b', type: 'button', class: 'searchcraft-input-form-clear-button', onClick: this.handleClearInput }, h("svg", { key: '3af9c1768c0e0eed6935cc5267d1169b11f08bb4', class: 'searchcraft-input-form-clear-icon', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { key: '7eb8530a8b89e387231cb509b3f68b4a3bafde20' }, "Clear icon"), h("path", { key: '83d43b2cf2f2e90e9b340e6fdf7c91cffee23c20', d: 'M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))))))));
     }
     static get watchers() { return {
         "core": ["onCoreChange"],

package/dist/components/searchcraft-input-form2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"searchcraft-input-form2.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/searchcraft-input-form/searchcraft-input-form.tsx"],"sourcesContent":["import {\n Component,\n Event,\n type EventEmitter,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport type { SearchcraftCore } from '@classes';\nimport { registry } from '@classes/CoreInstanceRegistry';\nimport type { SearchcraftState } from '@store';\n\n/*\n This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.\n * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.\n \n @react-import\n * ```jsx\n * import { SearchcraftInputForm } from \"@searchcraft/react-sdk\";\n * ```\n \n @vue-import\n * ```jsx\n * import { SearchcraftInputForm } from \"@searchcraft/vue-sdk\";\n * ```\n \n @js-example\n * ```html\n * <searchcraft-input-form auto-search />\n * ```\n \n @react-example\n * ```jsx\n * <SearchcraftInputForm autoSearch />\n * ```\n \n @vue-example\n * ```jsx\n * <SearchcraftInputForm autoSearch />\n * ```\n /\n@Component({\n tag: 'searchcraft-input-form',\n shadow: false,\n})\nexport class SearchcraftInputForm {\n /\n The id of the Searchcraft instance that this component should use.\n /\n @Prop() searchcraftId?: string;\n /\n Whether or not to automatically submit the search term when the input changes.\n /\n @Prop() autoSearch?: boolean = true;\n /\n Where to place the search button.\n /\n @Prop() buttonPlacement?: 'left' \| 'right' \| 'none' = 'none';\n /\n The label for the submit button.\n /\n @Prop() buttonLabel?: string;\n /\n The label rendered above the input.\n /\n @Prop() inputLabel?: string;\n /\n The input element's placeholder value.\n /\n @Prop() placeholderValue?: string = 'Enter Search';\n /\n The placeholder's render behavior.\n * 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus.\n * 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.\n /\n @Prop() placeholderBehavior?: 'hide-on-focus' \| 'hide-on-text-entered';\n /\n The value to display in the input field.\n /\n @Prop() value?: string;\n /\n When the input becomes focused.\n /\n @Event() inputFocus?: EventEmitter<void>;\n /\n When the input becomes unfocused.\n /\n @Event() inputBlur?: EventEmitter<void>;\n /\n Event emitted when input initializes.\n */\n @Event() inputInit?: EventEmitter<void>;\n\n @State() inputValue = '';\n @State() searchTerm = '';\n @State() error = false;\n\n private core?: SearchcraftCore;\n private unsubscribe?: () => void;\n private cleanupCore?: () => void;\n\n init() {\n if (this.core) {\n // Initialize inputValue from prop if provided\n if (this.value !== undefined && this.value.trim().length > 0) {\n this.inputValue = this.value;\n this.core.store.getState().setSearchTerm(this.value);\n // Trigger search if autoSearch is enabled\n if (this.autoSearch) {\n this.core.store.getState().search();\n }\n }\n this.inputInit?.emit();\n }\n }\n\n @Watch('core')\n onCoreChange() {\n this.init();\n }\n\n @Watch('value')\n onValueChange(newValue: string \| undefined) {\n if (newValue !== undefined && newValue !== this.inputValue) {\n this.inputValue = newValue;\n this.core?.store.getState().setSearchTerm(newValue);\n // Trigger search if autoSearch is enabled and value is not empty\n if (this.autoSearch && newValue.trim().length > 0) {\n this.core?.store.getState().search();\n }\n }\n }\n\n onCoreAvailable(core: SearchcraftCore) {\n this.core = core;\n this.init();\n this.unsubscribe = core.store.subscribe((state: SearchcraftState) => {\n this.searchTerm = state.searchTerm;\n // Only update inputValue from store if value prop is not set\n // OR if the store was cleared (empty string)\n if (this.value === undefined \|\| state.searchTerm === '') {\n this.inputValue = state.searchTerm;\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 handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.inputValue = input.value;\n this.core?.store.getState().setSearchTerm(input.value);\n\n if (!this.autoSearch) {\n return;\n }\n\n this.performSearch();\n };\n\n private performSearch = async () => {\n this.error = false;\n\n try {\n await this.core?.store.getState().search();\n } catch (error) {\n this.error = true;\n }\n };\n\n handleClearInput = () => {\n // Clear the input value even if controlled by prop\n this.inputValue = '';\n this.core?.store.getState().resetSearchValues();\n this.error = false;\n };\n\n handleFormSubmit = async (event: Event) => {\n event.preventDefault();\n await this.performSearch();\n };\n\n render() {\n const isShowingClearButton = this.inputValue.length > 0;\n const inputGridClassNames = classNames('searchcraft-input-form-grid', {\n 'searchcraft-input-form-grid-button-left':\n this.buttonPlacement === 'left',\n 'searchcraft-input-form-grid-button-right':\n this.buttonPlacement === 'right',\n 'searchcraft-input-form-grid-button-none':\n this.buttonPlacement === 'none',\n });\n const shouldHaveVerticalGap = this.inputLabel \|\| this.error;\n const inputGridStyles = {\n gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',\n };\n return (\n <form class='searchcraft-input-form' onSubmit={this.handleFormSubmit}>\n <div class={inputGridClassNames} style={inputGridStyles}>\n <div class='searchcraft-input-form-button'>\n <searchcraft-button\n onButtonClick={this.handleFormSubmit}\n label={this.buttonLabel}\n />\n </div>\n {this.inputLabel && (\n <div class='searchcraft-input-form-label'>\n <searchcraft-input-label label={this.inputLabel} />\n </div>\n )}\n {this.error && (\n <div class='searchcraft-input-form-error-message'>\n <searchcraft-error-message>\n Something went wrong.\n </searchcraft-error-message>\n </div>\n )}\n <div class='searchcraft-input-form-input-wrapper'>\n <input\n autoComplete='off'\n class={classNames('searchcraft-input-form-input', {\n 'searchcraft-placeholder-hide-on-focus':\n this.placeholderBehavior === 'hide-on-focus',\n })}\n onFocus={() => this.inputFocus?.emit()}\n onBlur={() => this.inputBlur?.emit()}\n onInput={(event) => {\n this.handleInput(event);\n }}\n placeholder={this.placeholderValue}\n type='text'\n value={this.inputValue}\n />\n <div class='searchcraft-input-form-input-icon'>\n <svg\n class='searchcraft-input-form-input-search-icon'\n viewBox='0 0 20 20'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n aria-labelledby='searchcraft-title'\n >\n <title>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 </div>\n {isShowingClearButton && (\n <button\n type='button'\n class='searchcraft-input-form-clear-button'\n onClick={this.handleClearInput}\n >\n <svg\n class='searchcraft-input-form-clear-icon'\n viewBox='0 0 22 22'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n aria-labelledby='icon-title'\n >\n <title>Clear icon</title>\n <path\n d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n </button>\n )}\n </div>\n </div>\n </form>\n );\n }\n}\n"],"version":3}
1	+ {"file":"searchcraft-input-form2.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/searchcraft-input-form/searchcraft-input-form.tsx"],"sourcesContent":["import {\n Component,\n Event,\n type EventEmitter,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport type { SearchcraftCore } from '@classes';\nimport { registry } from '@classes/CoreInstanceRegistry';\nimport type { SearchcraftState } from '@store';\n\n/*\n This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.\n * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.\n \n @react-import\n * ```jsx\n * import { SearchcraftInputForm } from \"@searchcraft/react-sdk\";\n * ```\n \n @vue-import\n * ```jsx\n * import { SearchcraftInputForm } from \"@searchcraft/vue-sdk\";\n * ```\n \n @js-example\n * ```html\n * <searchcraft-input-form auto-search />\n * ```\n \n @react-example\n * ```jsx\n * <SearchcraftInputForm autoSearch />\n * ```\n \n @vue-example\n * ```jsx\n * <SearchcraftInputForm autoSearch />\n * ```\n /\n@Component({\n tag: 'searchcraft-input-form',\n shadow: false,\n})\nexport class SearchcraftInputForm {\n /\n The id of the Searchcraft instance that this component should use.\n /\n @Prop() searchcraftId?: string;\n /\n Whether or not to automatically submit the search term when the input changes.\n /\n @Prop() autoSearch?: boolean = true;\n /\n Where to place the search button.\n /\n @Prop() buttonPlacement?: 'left' \| 'right' \| 'none' = 'none';\n /\n The label for the submit button.\n /\n @Prop() buttonLabel?: string;\n /\n The label rendered above the input.\n /\n @Prop() inputLabel?: string;\n /\n The input element's placeholder value.\n /\n @Prop() placeholderValue?: string = 'Enter Search';\n /\n The placeholder's render behavior.\n * 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus.\n * 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.\n /\n @Prop() placeholderBehavior?: 'hide-on-focus' \| 'hide-on-text-entered';\n /\n The value to display in the input field.\n /\n @Prop() value?: string;\n /\n When the input becomes focused.\n /\n @Event() inputFocus?: EventEmitter<void>;\n /\n When the input becomes unfocused.\n /\n @Event() inputBlur?: EventEmitter<void>;\n /\n Event emitted when input initializes.\n /\n @Event() inputInit?: EventEmitter<void>;\n\n @State() inputValue = '';\n @State() searchTerm = '';\n @State() error = false;\n\n private core?: SearchcraftCore;\n private unsubscribe?: () => void;\n private cleanupCore?: () => void;\n private inputElement?: HTMLInputElement;\n\n init() {\n if (this.core) {\n // Initialize inputValue from prop if provided\n if (this.value !== undefined && this.value.trim().length > 0) {\n this.inputValue = this.value;\n this.core.store.getState().setSearchTerm(this.value);\n // Trigger search if autoSearch is enabled\n if (this.autoSearch) {\n this.core.store.getState().search();\n }\n }\n this.inputInit?.emit();\n }\n }\n\n @Watch('core')\n onCoreChange() {\n this.init();\n }\n\n @Watch('value')\n onValueChange(newValue: string \| undefined) {\n if (newValue !== undefined && newValue !== this.inputValue) {\n this.inputValue = newValue;\n this.core?.store.getState().setSearchTerm(newValue);\n // Trigger search if autoSearch is enabled and value is not empty\n if (this.autoSearch && newValue.trim().length > 0) {\n this.core?.store.getState().search();\n }\n }\n }\n\n onCoreAvailable(core: SearchcraftCore) {\n this.core = core;\n this.init();\n this.unsubscribe = core.store.subscribe((state: SearchcraftState) => {\n this.searchTerm = state.searchTerm;\n // Only update inputValue from store if value prop is not set\n // OR if the store was cleared (empty string)\n if (this.value === undefined \|\| state.searchTerm === '') {\n this.inputValue = state.searchTerm;\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 handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.inputValue = input.value;\n this.core?.store.getState().setSearchTerm(input.value);\n\n if (!this.autoSearch) {\n return;\n }\n\n this.performSearch();\n };\n\n private performSearch = async () => {\n this.error = false;\n\n try {\n await this.core?.store.getState().search();\n } catch (error) {\n this.error = true;\n }\n };\n\n handleClearInput = () => {\n // Clear the input value even if controlled by prop\n this.inputValue = '';\n this.core?.store.getState().resetSearchValues();\n this.error = false;\n };\n\n handleFormSubmit = async (event: Event) => {\n event.preventDefault();\n this.dismissOnScreenKeyboard();\n await this.performSearch();\n };\n\n /\n Closes the on-screen keyboard after a search is submitted on touch devices,\n * so it no longer covers the results. Devices with a mouse keep focus in the\n * input, so the user can keep typing and use the arrow keys.\n */\n private dismissOnScreenKeyboard() {\n if (window.matchMedia?.('(hover: none) and (pointer: coarse)').matches) {\n this.inputElement?.blur();\n }\n }\n\n render() {\n const isShowingClearButton = this.inputValue.length > 0;\n const inputGridClassNames = classNames('searchcraft-input-form-grid', {\n 'searchcraft-input-form-grid-button-left':\n this.buttonPlacement === 'left',\n 'searchcraft-input-form-grid-button-right':\n this.buttonPlacement === 'right',\n 'searchcraft-input-form-grid-button-none':\n this.buttonPlacement === 'none',\n });\n const shouldHaveVerticalGap = this.inputLabel \|\| this.error;\n const inputGridStyles = {\n gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',\n };\n return (\n <form class='searchcraft-input-form' onSubmit={this.handleFormSubmit}>\n <div class={inputGridClassNames} style={inputGridStyles}>\n <div class='searchcraft-input-form-button'>\n <searchcraft-button\n onButtonClick={this.handleFormSubmit}\n label={this.buttonLabel}\n />\n </div>\n {this.inputLabel && (\n <div class='searchcraft-input-form-label'>\n <searchcraft-input-label label={this.inputLabel} />\n </div>\n )}\n {this.error && (\n <div class='searchcraft-input-form-error-message'>\n <searchcraft-error-message>\n Something went wrong.\n </searchcraft-error-message>\n </div>\n )}\n <div class='searchcraft-input-form-input-wrapper'>\n <input\n autoComplete='off'\n class={classNames('searchcraft-input-form-input', {\n 'searchcraft-placeholder-hide-on-focus':\n this.placeholderBehavior === 'hide-on-focus',\n })}\n enterkeyhint='search'\n ref={(el) => {\n this.inputElement = el;\n }}\n onFocus={() => this.inputFocus?.emit()}\n onBlur={() => this.inputBlur?.emit()}\n onInput={(event) => {\n this.handleInput(event);\n }}\n placeholder={this.placeholderValue}\n type='text'\n value={this.inputValue}\n />\n <div class='searchcraft-input-form-input-icon'>\n <svg\n class='searchcraft-input-form-input-search-icon'\n viewBox='0 0 20 20'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n aria-labelledby='searchcraft-title'\n >\n <title>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 </div>\n {isShowingClearButton && (\n <button\n type='button'\n class='searchcraft-input-form-clear-button'\n onClick={this.handleClearInput}\n >\n <svg\n class='searchcraft-input-form-clear-icon'\n viewBox='0 0 22 22'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n aria-labelledby='icon-title'\n >\n <title>Clear icon</title>\n <path\n d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n </button>\n )}\n </div>\n </div>\n </form>\n );\n }\n}\n"],"version":3}

package/dist/components/searchcraft-input-label.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftInputLabel$1, d as defineCustomElement$1 } from './searchcraft-input-label2.js?scv=0.15.1';
+import { S as SearchcraftInputLabel$1, d as defineCustomElement$1 } from './searchcraft-input-label2.js?scv=0.16.0';
 const SearchcraftInputLabel = SearchcraftInputLabel$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-input-label2.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, h, t as transformTag } from './index2.js?scv=0.15.1';
-import { c as classNames } from './index3.js?scv=0.15.1';
+import { p as proxyCustomElement, H, h, t as transformTag } from './index2.js?scv=0.16.0';
+import { c as classNames } from './index3.js?scv=0.16.0';
 const SearchcraftInputLabel = /*@__PURE__*/ proxyCustomElement(class SearchcraftInputLabel extends H {
     constructor(registerHost) {

package/dist/components/searchcraft-loading.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftInputLabel, d as defineCustomElement$1 } from './searchcraft-loading2.js?scv=0.15.1';
+import { S as SearchcraftInputLabel, d as defineCustomElement$1 } from './searchcraft-loading2.js?scv=0.16.0';
 const SearchcraftLoading = SearchcraftInputLabel;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-loading2.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, t as transformTag } from './index2.js?scv=0.15.1';
+import { p as proxyCustomElement, H, h, t as transformTag } from './index2.js?scv=0.16.0';
 const SearchcraftInputLabel = /*@__PURE__*/ proxyCustomElement(class SearchcraftInputLabel extends H {
     constructor(registerHost) {

package/dist/components/searchcraft-pagination.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h, t as transformTag } from './index2.js?scv=0.15.1';
-import { r as registry } from './CoreInstanceRegistry.js?scv=0.15.1';
-import { c as classNames } from './index3.js?scv=0.15.1';
-import { d as defineCustomElement$2 } from './searchcraft-button2.js?scv=0.15.1';
+import { p as proxyCustomElement, H, h, t as transformTag } from './index2.js?scv=0.16.0';
+import { r as registry } from './CoreInstanceRegistry.js?scv=0.16.0';
+import { c as classNames } from './index3.js?scv=0.16.0';
+import { d as defineCustomElement$2 } from './searchcraft-button2.js?scv=0.16.0';
 const SearchcraftPagination$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftPagination extends H {
     constructor(registerHost) {

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

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, t as transformTag } from './index2.js?scv=0.15.1';
-import { r as registry } from './CoreInstanceRegistry.js?scv=0.15.1';
-import { h as html } from './html.js?scv=0.15.1';
+import { p as proxyCustomElement, H, h, t as transformTag } from './index2.js?scv=0.16.0';
+import { r as registry } from './CoreInstanceRegistry.js?scv=0.16.0';
+import { s as safeUrl, h as html } from './safeUrl.js?scv=0.16.0';
 const SearchcraftPopoverButton$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftPopoverButton extends H {
     constructor(registerHost) {
@@ -17,6 +17,14 @@ const SearchcraftPopoverButton$1 = /*@__PURE__*/ proxyCustomElement(class Search
      * The type of popover button to render.
      */
     type;
+    /**
+     * The placeholder text shown in the `skeuomorphic` button, and the
+     * accessible label of the `magnifying-glass` button. Set it to the same
+     * value as the `placeholderValue` of `searchcraft-popover-form` so the
+     * button matches the form it opens. When it is blank, the
+     * `magnifying-glass` button is labeled "Search".
+     */
+    placeholderValue = 'Search';
     /**
      * The id of the Searchcraft instance that this component should use.
      */
@@ -92,7 +100,7 @@ const SearchcraftPopoverButton$1 = /*@__PURE__*/ proxyCustomElement(class Search
         }
     }
     renderSkeuomorphicSlot() {
-        return (h("div", { class: 'searchcraft-popover-button-wrapper' }, h("div", { class: 'searchcraft-popover-button-input' }, h("svg", { class: 'searchcraft-popover-button-input-search-icon', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', version: '1.1' }, h("title", null, "Search icon"), h("path", { d: 'M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })), h("span", null, "Search")), h("div", { class: 'searchcraft-popover-button-keycaps' }, h("div", { class: 'searchcraft-popover-button-keycaps-keycap searchcraft-popover-button-keycaps-keycap-modifier' }, h("span", null, this.hotkeyModifierSymbol)), h("div", { class: 'searchcraft-popover-button-keycaps-keycap searchcraft-popover-button-keycaps-keycap-key' }, h("span", null, this.hotkey)))));
+        return (h("div", { class: 'searchcraft-popover-button-wrapper' }, h("div", { class: 'searchcraft-popover-button-input' }, h("svg", { class: 'searchcraft-popover-button-input-search-icon', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', version: '1.1' }, h("title", null, "Search icon"), h("path", { d: 'M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })), h("span", null, this.placeholderValue)), h("div", { class: 'searchcraft-popover-button-keycaps' }, h("div", { class: 'searchcraft-popover-button-keycaps-keycap searchcraft-popover-button-keycaps-keycap-modifier' }, h("span", null, this.hotkeyModifierSymbol)), h("div", { class: 'searchcraft-popover-button-keycaps-keycap searchcraft-popover-button-keycaps-keycap-key' }, h("span", null, this.hotkey)))));
     }
     renderSlot() {
         switch (this.type) {
@@ -105,8 +113,10 @@ const SearchcraftPopoverButton$1 = /*@__PURE__*/ proxyCustomElement(class Search
         }
     }
     render() {
-        return (h("button", { key: '760f4f8d8daddaaadc0367e21b9efe23c4ef7c7d', "aria-label": this.type === 'magnifying-glass' ? 'Search' : undefined, class: `searchcraft-popover-button ${this.type ? ` searchcraft-popover-button-${this.type}` : ''}`, innerHTML: typeof this.template !== 'undefined'
-                ? this.template({ isPopoverVisible: this.isPopoverVisible }, { html })
+        return (h("button", { key: '3ff00f71e3057f907a447f87b3a82b6ae57796e7', "aria-label": this.type === 'magnifying-glass'
+                ? this.placeholderValue?.trim() || 'Search'
+                : undefined, class: `searchcraft-popover-button ${this.type ? ` searchcraft-popover-button-${this.type}` : ''}`, innerHTML: typeof this.template !== 'undefined'
+                ? this.template({ isPopoverVisible: this.isPopoverVisible }, { html, safeUrl })
                 : undefined, onClick: this.handleOnClick.bind(this), type: 'button' }, typeof this.template !== 'undefined'
             ? undefined
             : this.type
@@ -116,6 +126,7 @@ const SearchcraftPopoverButton$1 = /*@__PURE__*/ proxyCustomElement(class Search
 }, [772, "searchcraft-popover-button", {
         "template": [16],
         "type": [1],
+        "placeholderValue": [1, "placeholder-value"],
         "searchcraftId": [1, "searchcraft-id"],
         "hotkey": [32],
         "hotkeyModifier": [32],

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","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/searchcraft-popover-button/searchcraft-popover-button.tsx"],"sourcesContent":["import type { SearchcraftCore } from '@classes';\nimport { registry } from '@classes/CoreInstanceRegistry';\nimport { Component, Prop, State, h } 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' \| 'magnifying-glass';\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 case 'magnifying-glass':\n return (\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 aria-hidden='true'\n >\n <path\n d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n </div>\n );\n default:\n return (\n <div>\n <slot />\n </div>\n );\n }\n }\n\n render() {\n return (\n <button\n aria-label={this.type === 'magnifying-glass' ? 'Search' : undefined}\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","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/searchcraft-popover-button/searchcraft-popover-button.tsx"],"sourcesContent":["import type { SearchcraftCore } from '@classes';\nimport { registry } from '@classes/CoreInstanceRegistry';\nimport { Component, Prop, State, h } from '@stencil/core';\n\nimport type { PopoverButtonTemplate } from '@types';\n\nimport { html, safeUrl } 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' \| 'magnifying-glass';\n /\n The placeholder text shown in the `skeuomorphic` button, and the\n * accessible label of the `magnifying-glass` button. Set it to the same\n * value as the `placeholderValue` of `searchcraft-popover-form` so the\n * button matches the form it opens. When it is blank, the\n * `magnifying-glass` button is labeled \"Search\".\n /\n @Prop() placeholderValue?: string = 'Search';\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>{this.placeholderValue}</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 case 'magnifying-glass':\n return (\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 aria-hidden='true'\n >\n <path\n d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n </div>\n );\n default:\n return (\n <div>\n <slot />\n </div>\n );\n }\n }\n\n render() {\n return (\n <button\n aria-label={\n this.type === 'magnifying-glass'\n ? this.placeholderValue?.trim() \|\| 'Search'\n : undefined\n }\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, safeUrl },\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 './searchcraft-popover-footer2.js?scv=0.15.1';
+import { S as SearchcraftPopoverFooter$1, d as defineCustomElement$1 } from './searchcraft-popover-footer2.js?scv=0.16.0';
 const SearchcraftPopoverFooter = SearchcraftPopoverFooter$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, h, t as transformTag } from './index2.js?scv=0.15.1';
-import { r as registry } from './CoreInstanceRegistry.js?scv=0.15.1';
-import { f as formatNumberWithCommas } from './units.js?scv=0.15.1';
+import { p as proxyCustomElement, H, h, t as transformTag } from './index2.js?scv=0.16.0';
+import { r as registry } from './CoreInstanceRegistry.js?scv=0.16.0';
+import { f as formatNumberWithCommas } from './units.js?scv=0.16.0';
 import './purify.es.js';
 const name = "@searchcraft/javascript-sdk";
-const version = "0.15.1";
+const version = "0.16.0";
 const SearchcraftPopoverFooter = /*@__PURE__*/ proxyCustomElement(class SearchcraftPopoverFooter extends H {
     constructor(registerHost) {

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

@@ -1,16 +1,18 @@
-import { p as proxyCustomElement, H, h, t as transformTag } from './index2.js?scv=0.15.1';
-import { r as registry } from './CoreInstanceRegistry.js?scv=0.15.1';
-import { c as classNames } from './index3.js?scv=0.15.1';
-import { d as defineCustomElement$b } from './searchcraft-ad2.js?scv=0.15.1';
-import { d as defineCustomElement$a } from './searchcraft-button2.js?scv=0.15.1';
-import { d as defineCustomElement$9 } from './searchcraft-error-message2.js?scv=0.15.1';
-import { d as defineCustomElement$8 } from './searchcraft-input-form2.js?scv=0.15.1';
-import { d as defineCustomElement$7 } from './searchcraft-input-label2.js?scv=0.15.1';
-import { d as defineCustomElement$6 } from './searchcraft-loading2.js?scv=0.15.1';
-import { d as defineCustomElement$5 } from './searchcraft-popover-footer2.js?scv=0.15.1';
-import { d as defineCustomElement$4 } from './searchcraft-popover-list-item2.js?scv=0.15.1';
-import { d as defineCustomElement$3 } from './searchcraft-popover-list-view2.js?scv=0.15.1';
-import { d as defineCustomElement$2 } from './searchcraft-results-summary2.js?scv=0.15.1';
+import { p as proxyCustomElement, H, h, t as transformTag } from './index2.js?scv=0.16.0';
+import { r as registry } from './CoreInstanceRegistry.js?scv=0.16.0';
+import { s as safeUrl, h as html } from './safeUrl.js?scv=0.16.0';
+import { c as classNames } from './index3.js?scv=0.16.0';
+import { p as purify } from './purify.es.js?scv=0.16.0';
+import { d as defineCustomElement$b } from './searchcraft-ad2.js?scv=0.16.0';
+import { d as defineCustomElement$a } from './searchcraft-button2.js?scv=0.16.0';
+import { d as defineCustomElement$9 } from './searchcraft-error-message2.js?scv=0.16.0';
+import { d as defineCustomElement$8 } from './searchcraft-input-form2.js?scv=0.16.0';
+import { d as defineCustomElement$7 } from './searchcraft-input-label2.js?scv=0.16.0';
+import { d as defineCustomElement$6 } from './searchcraft-loading2.js?scv=0.16.0';
+import { d as defineCustomElement$5 } from './searchcraft-popover-footer2.js?scv=0.16.0';
+import { d as defineCustomElement$4 } from './searchcraft-popover-list-item2.js?scv=0.16.0';
+import { d as defineCustomElement$3 } from './searchcraft-popover-list-view2.js?scv=0.16.0';
+import { d as defineCustomElement$2 } from './searchcraft-results-summary2.js?scv=0.16.0';
 const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftPopoverForm extends H {
     constructor(registerHost) {
@@ -30,6 +32,19 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
      * Formats the content rendered for each result.
      */
     popoverResultMappings;
+    /**
+     * A callback function responsible for rendering a result. When provided, it is used instead of `popoverResultMappings`.
+     * Pass URLs from the result through the `safeUrl` helper before placing them in an `href` or `src`.
+     * Never place result values in event handler attributes such as `onclick`, or in `style`.
+     */
+    template;
+    /**
+     * A callback function responsible for rendering the message shown when a search returns no results.
+     * When it is not provided, the popover shows `No results found for "<search term>".`
+     * The returned markup is sanitized with DOMPurify, which removes scripts, event handler
+     * attributes such as `onclick`, and links with schemes it does not allow, such as an app's own scheme.
+     */
+    noResultsTemplate;
     /**
      * The hotkey that activates the popover.
      */
@@ -77,6 +92,11 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
     searchClientResponseItems = [];
     adClientResponseItems = [];
     searchTerm;
+    isSearchInProgress = false;
+    /**
+     * The search term of the most recent search response.
+     */
+    completedSearchTerm;
     isFocused = false;
     breakpointSm = 576;
     breakpointMd = 768;
@@ -108,6 +128,12 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
             this.searchClientResponseItems = [...state.searchClientResponseItems];
             this.adClientResponseItems = [...state.adClientResponseItems];
             this.searchTerm = state.searchTerm;
+            this.isSearchInProgress = state.isSearchInProgress;
+            const requestProperties = state.searchClientRequestProperties;
+            this.completedSearchTerm =
+                requestProperties && typeof requestProperties === 'object'
+                    ? requestProperties.searchTerm
+                    : undefined;
             this.searchResultsPage = state.searchResultsPage;
             this.searchResultsPerPage = state.searchResultsPerPage;
         });
@@ -189,6 +215,8 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
             if (!this.modalElement) {
                 this.modalElement = document.createElement('searchcraft-popover-form');
                 this.modalElement.popoverResultMappings = this.popoverResultMappings;
+                this.modalElement.template = this.template;
+                this.modalElement.noResultsTemplate = this.noResultsTemplate;
                 this.modalElement.setAttribute('type', 'fullscreen');
                 this.modalElement.setAttribute('searchcraft-id', this.searchcraftId);
                 if (this.placeholderValue) {
@@ -207,6 +235,17 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
             }
         }
     }
+    /**
+     * Passes result rendering changes on to the fullscreen form created for small viewports,
+     * which only receives these props when it is first created.
+     */
+    syncModalElementResultRendering() {
+        if (this.modalElement) {
+            this.modalElement.popoverResultMappings = this.popoverResultMappings;
+            this.modalElement.template = this.template;
+            this.modalElement.noResultsTemplate = this.noResultsTemplate;
+        }
+    }
     handleModalBackdropClick(_event) {
         this.core?.store.getState().setPopoverVisibility(false);
     }
@@ -240,8 +279,17 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
      * @param direction
      */
     focusOnNextListItem(direction) {
-        const listItems = Array.from(document.querySelectorAll('.searchcraft-popover-list-item-link')).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);
-        const currentIndex = listItems.indexOf(document.activeElement);
+        // Results rendered by a `template` are reached through the first link in the template.
+        const links = Array.from(document.querySelectorAll('.searchcraft-popover-list-item-link, .searchcraft-popover-list-item-template')).map((el) => el.classList.contains('searchcraft-popover-list-item-template')
+            ? el.querySelector('a')
+            : el);
+        const listItems = Array.from(new Set(links)).filter((el) => !!el && !el.hasAttribute('disabled') && el.offsetParent !== null);
+        // Focus may be on another link inside a templated result, so match on the result too.
+        const activeElement = document.activeElement;
+        const currentIndex = listItems.findIndex((el) => el === activeElement ||
+            !!el
+                .closest('.searchcraft-popover-list-item-template')
+                ?.contains(activeElement));
         if (direction === 'ArrowDown') {
             listItems[(currentIndex + 1) % listItems.length]?.focus();
         }
@@ -266,6 +314,28 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
             this.searchTerm?.trim()?.length > 0 &&
             this.searchClientResponseItems.length > 0);
     }
+    /**
+     * Whether the search for the current search term finished without results.
+     */
+    get hasNoResultsToShow() {
+        const searchTerm = this.searchTerm?.trim();
+        return (!!searchTerm &&
+            !this.isSearchInProgress &&
+            this.searchClientResponseItems.length === 0 &&
+            this.completedSearchTerm?.trim() === searchTerm);
+    }
+    renderNoResults() {
+        const searchTerm = this.searchTerm?.trim() || '';
+        if (this.noResultsTemplate) {
+            try {
+                return (h("div", { class: 'searchcraft-popover-form-no-results', innerHTML: purify.sanitize(this.noResultsTemplate({ searchTerm }, { html, safeUrl })) }));
+            }
+            catch (error) {
+                console.error('Invalid popover no results template:', error);
+            }
+        }
+        return (h("div", { class: 'searchcraft-popover-form-no-results' }, h("p", { class: 'searchcraft-popover-form-no-results-message' }, "No results found for \"", searchTerm, "\".")));
+    }
     get viewAllResultsHref() {
         const baseUrl = this.viewAllResultsBaseUrl;
         if (!baseUrl) {
@@ -291,22 +361,24 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
     }
     renderInlinePopover() {
         const isListViewVisible = this.hasResultsToShow && this.isFocused;
+        const isNoResultsVisible = this.hasNoResultsToShow && this.isFocused;
+        const isDropdownVisible = isListViewVisible || isNoResultsVisible;
         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), searchcraftId: this.searchcraftId, placeholderValue: this.placeholderValue, placeholderBehavior: this.placeholderBehavior })), isListViewVisible && (h("div", { class: 'searchcraft-popover-form-inline-wrapper' }, h("div", { class: 'searchcraft-popover-form-inline-scroll-area' }, this.showSummaryBox && (h("searchcraft-results-summary", { searchcraftId: this.searchcraftId })), 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, sdkVariant: this.sdkVariant, viewAllResultsHref: this.viewAllResultsHref, viewAllResultsLabel: this.resolvedViewAllResultsLabel })))));
+                'searchcraft-popover-form-active': isDropdownVisible,
+            }) }, h("div", { class: 'searchcraft-popover-form-input searchcraft-popover-form-inline-input' }, h("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this), searchcraftId: this.searchcraftId, placeholderValue: this.placeholderValue, placeholderBehavior: this.placeholderBehavior })), isDropdownVisible && (h("div", { class: 'searchcraft-popover-form-inline-wrapper' }, h("div", { class: 'searchcraft-popover-form-inline-scroll-area' }, isListViewVisible && this.showSummaryBox && (h("searchcraft-results-summary", { searchcraftId: this.searchcraftId })), isListViewVisible ? (h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, template: this.template, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage, searchcraftId: this.searchcraftId })) : (this.renderNoResults())), h("searchcraft-popover-footer", { searchcraftId: this.searchcraftId, sdkVariant: this.sdkVariant, viewAllResultsHref: this.viewAllResultsHref, viewAllResultsLabel: this.resolvedViewAllResultsLabel })))));
     }
     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), searchcraftId: this.searchcraftId, placeholderValue: this.placeholderValue, placeholderBehavior: this.placeholderBehavior }), 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.showSummaryBox && this.hasResultsToShow && (h("searchcraft-results-summary", { searchcraftId: this.searchcraftId })), 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, sdkVariant: this.sdkVariant, viewAllResultsHref: this.viewAllResultsHref, viewAllResultsLabel: this.resolvedViewAllResultsLabel }))));
+                    'searchcraft-popover-form-active': this.hasResultsToShow || this.hasNoResultsToShow,
+                }) }, 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, placeholderValue: this.placeholderValue, placeholderBehavior: this.placeholderBehavior }), 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.showSummaryBox && this.hasResultsToShow && (h("searchcraft-results-summary", { searchcraftId: this.searchcraftId })), this.hasResultsToShow && (h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, template: this.template, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage, searchcraftId: this.searchcraftId })), this.hasNoResultsToShow && this.renderNoResults()), h("searchcraft-popover-footer", { searchcraftId: this.searchcraftId, sdkVariant: this.sdkVariant, viewAllResultsHref: this.viewAllResultsHref, viewAllResultsLabel: this.resolvedViewAllResultsLabel }))));
         }
     }
     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), searchcraftId: this.searchcraftId, placeholderValue: this.placeholderValue, placeholderBehavior: this.placeholderBehavior }), 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.showSummaryBox && this.hasResultsToShow && (h("searchcraft-results-summary", { searchcraftId: this.searchcraftId })), 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, sdkVariant: this.sdkVariant, viewAllResultsHref: this.viewAllResultsHref, viewAllResultsLabel: this.resolvedViewAllResultsLabel })));
+                    'searchcraft-popover-form-active': this.hasResultsToShow || this.hasNoResultsToShow,
+                }) }, 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, placeholderValue: this.placeholderValue, placeholderBehavior: this.placeholderBehavior }), 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.showSummaryBox && this.hasResultsToShow && (h("searchcraft-results-summary", { searchcraftId: this.searchcraftId })), this.hasResultsToShow && (h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, template: this.template, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage, searchcraftId: this.searchcraftId })), this.hasNoResultsToShow && this.renderNoResults()), h("searchcraft-popover-footer", { searchcraftId: this.searchcraftId, sdkVariant: this.sdkVariant, viewAllResultsHref: this.viewAllResultsHref, viewAllResultsLabel: this.resolvedViewAllResultsLabel })));
         }
     }
     render() {
@@ -319,9 +391,16 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
                 return this.renderFullscreenPopover();
         }
     }
+    static get watchers() { return {
+        "popoverResultMappings": ["syncModalElementResultRendering"],
+        "template": ["syncModalElementResultRendering"],
+        "noResultsTemplate": ["syncModalElementResultRendering"]
+    }; }
 }, [768, "searchcraft-popover-form", {
         "type": [1],
         "popoverResultMappings": [16],
+        "template": [16],
+        "noResultsTemplate": [16],
         "hotkey": [1],
         "hotkeyModifier": [1, "hotkey-modifier"],
         "searchcraftId": [1, "searchcraft-id"],
@@ -335,6 +414,8 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         "searchClientResponseItems": [32],
         "adClientResponseItems": [32],
         "searchTerm": [32],
+        "isSearchInProgress": [32],
+        "completedSearchTerm": [32],
         "isFocused": [32],
         "breakpointSm": [32],
         "breakpointMd": [32],
@@ -342,6 +423,10 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         "searchResultsPage": [32],
         "searchResultsPerPage": [32],
         "modalElement": [32]
+    }, undefined, {
+        "popoverResultMappings": ["syncModalElementResultRendering"],
+        "template": ["syncModalElementResultRendering"],
+        "noResultsTemplate": ["syncModalElementResultRendering"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {