@searchcraft/javascript-sdk 0.11.1 → 0.12.1

package/dist/hydrate/index.mjs

@@ -2555,6 +2555,65 @@ class SearchcraftErrorMessage {
     }; }
 }
 
+/**
+ * This is the default instance id for searchcraft core instances.
+ * When no id is specified in a component's props, use this one.
+ */
+const DEFAULT_CORE_INSTANCE_ID = 'searchcraft';
+/**
+ * CoreInstanceRegistry
+ *
+ * This class is responsible for managing all of the instances of SearchcraftCore on a page.
+ * It provides a means for consuming components to use the instance of SearchcraftCore that
+ * they need to use when that instance of core gets added to the Registry.
+ */
+class CoreInstanceRegistry {
+    coreInstances = {};
+    subscriptions = {};
+    /**
+     * Adds a SearchcraftCore instance to the Registry.
+     *
+     * When the instance is added, iterates through the onAvailable callbacks
+     * that have been subscribed via useCoreInstance.
+     *
+     * @param coreInstance The SearchcraftCore instance to add to the registry
+     * @param searchcraftId The unique identifier for this SearchcraftCore instance.
+     */
+    addCoreInstance(coreInstance, searchcraftId) {
+        const id = searchcraftId || DEFAULT_CORE_INSTANCE_ID;
+        this.coreInstances[id] = coreInstance;
+        for (const callback of this.subscriptions[id] || []) {
+            callback(coreInstance);
+        }
+    }
+    /**
+     * Use the specified instance of SearchcraftCore. When the instance becomes available,
+     * the onAvailable callback will be called.
+     *
+     * @param searchcraftId The SearchcraftCore instance to use.
+     * @param onAvailable The callback that gets called when the core instance becomes available.
+     */
+    useCoreInstance(searchcraftId, onAvailable) {
+        const id = searchcraftId || DEFAULT_CORE_INSTANCE_ID;
+        // If the core instance already is available, call the onAvailable callback immediately.
+        if (this.coreInstances[id]) {
+            onAvailable(this.coreInstances[id]);
+            return () => { };
+        }
+        // Add the callback to the collection of callbacks for this searchcraft instance.
+        if (!this.subscriptions[id]) {
+            this.subscriptions[id] = [];
+        }
+        this.subscriptions[id].push(onAvailable);
+        return () => {
+            if (this.subscriptions[id]) {
+                this.subscriptions[id] = this.subscriptions[id].filter((cb) => cb !== onAvailable);
+            }
+        };
+    }
+}
+const registry = new CoreInstanceRegistry();
+
 /**
  * Helper function for getting a Node (FacetWithChildrenObject)
  * at a given path. Traverses the node tree to get the node.
@@ -4215,65 +4274,6 @@ const html = (strings, ...values) => {
     return result || '';
 };
 
-/**
- * This is the default instance id for searchcraft core instances.
- * When no id is specified in a component's props, use this one.
- */
-const DEFAULT_CORE_INSTANCE_ID = 'searchcraft';
-/**
- * CoreInstanceRegistry
- *
- * This class is responsible for managing all of the instances of SearchcraftCore on a page.
- * It provides a means for consuming components to use the instance of SearchcraftCore that
- * they need to use when that instance of core gets added to the Registry.
- */
-class CoreInstanceRegistry {
-    coreInstances = {};
-    subscriptions = {};
-    /**
-     * Adds a SearchcraftCore instance to the Registry.
-     *
-     * When the instance is added, iterates through the onAvailable callbacks
-     * that have been subscribed via useCoreInstance.
-     *
-     * @param coreInstance The SearchcraftCore instance to add to the registry
-     * @param searchcraftId The unique identifier for this SearchcraftCore instance.
-     */
-    addCoreInstance(coreInstance, searchcraftId) {
-        const id = searchcraftId || DEFAULT_CORE_INSTANCE_ID;
-        this.coreInstances[id] = coreInstance;
-        for (const callback of this.subscriptions[id] || []) {
-            callback(coreInstance);
-        }
-    }
-    /**
-     * Use the specified instance of SearchcraftCore. When the instance becomes available,
-     * the onAvailable callback will be called.
-     *
-     * @param searchcraftId The SearchcraftCore instance to use.
-     * @param onAvailable The callback that gets called when the core instance becomes available.
-     */
-    useCoreInstance(searchcraftId, onAvailable) {
-        const id = searchcraftId || DEFAULT_CORE_INSTANCE_ID;
-        // If the core instance already is available, call the onAvailable callback immediately.
-        if (this.coreInstances[id]) {
-            onAvailable(this.coreInstances[id]);
-            return () => { };
-        }
-        // Add the callback to the collection of callbacks for this searchcraft instance.
-        if (!this.subscriptions[id]) {
-            this.subscriptions[id] = [];
-        }
-        this.subscriptions[id].push(onAvailable);
-        return () => {
-            if (this.subscriptions[id]) {
-                this.subscriptions[id] = this.subscriptions[id].filter((cb) => cb !== onAvailable);
-            }
-        };
-    }
-}
-const registry = new CoreInstanceRegistry();
-
 /**
  * This web component is designed to display facets in a search interface, allowing users to refine their search results by applying filters based on various attributes.
  * It is consumed within the `searchcraft-filter-panel`.
@@ -4436,45 +4436,86 @@ class SearchcraftFacetList {
     handleStateUpdate(_state) {
         const state = { ..._state };
         // Determine what action to take based on the current State
-        if (state.searchTerm.trim() === '') {
+        // Check if this is an initialQuery case (string requestProperties with empty searchTerm)
+        const isInitialQuery = typeof state.searchClientRequestProperties === 'string' &&
+            state.searchTerm.trim() === '';
+        if (state.searchTerm.trim() === '' && !isInitialQuery) {
             this.handleIncomingSearchResponse(state, 'SEARCH_TERM_EMPTY');
             this.lastSearchTerm = '';
         }
         else if (this.lastTimeTaken !== state.searchResponseTimeTaken &&
-            state.searchClientRequestProperties &&
-            typeof state.searchClientRequestProperties === 'object') {
-            const requestProperties = state.searchClientRequestProperties;
-            let actionType = 'UNKNOWN';
-            if (this.lastSearchTerm !== requestProperties.searchTerm) {
-                if (this.areAnyFacetPathsSelected) {
-                    actionType = 'NEW_SEARCH_TERM_WHILE_FACETS_ACTIVE';
+            state.searchClientRequestProperties) {
+            // Handle both object and string requestProperties (string is used for initialQuery)
+            if (typeof state.searchClientRequestProperties === 'object') {
+                const requestProperties = state.searchClientRequestProperties;
+                let actionType = 'UNKNOWN';
+                if (this.lastSearchTerm !== requestProperties.searchTerm) {
+                    if (this.areAnyFacetPathsSelected) {
+                        actionType = 'NEW_SEARCH_TERM_WHILE_FACETS_ACTIVE';
+                    }
+                    else {
+                        actionType = 'NEW_SEARCH_TERM';
+                    }
                 }
-                else {
-                    actionType = 'NEW_SEARCH_TERM';
+                else if (this.lastRangeValues !==
+                    JSON.stringify(requestProperties.rangeValueForIndexFields)) {
+                    actionType = 'RANGE_VALUE_UPDATE';
                 }
+                else if (this.lastFacetValues !==
+                    JSON.stringify(requestProperties.facetPathsForIndexFields)) {
+                    actionType = 'FACET_UPDATE';
+                }
+                else if (this.lastSortType !== requestProperties.order_by) {
+                    actionType = 'SORT_ORDER_UPDATE';
+                }
+                else if (this.lastSearchMode !== requestProperties.mode) {
+                    actionType = 'EXACT_MATCH_UPDATE';
+                }
+                this.lastRangeValues = JSON.stringify(requestProperties.rangeValueForIndexFields);
+                this.lastFacetValues = JSON.stringify(requestProperties.facetPathsForIndexFields);
+                this.lastSortType = requestProperties.order_by;
+                this.lastSearchMode = requestProperties.mode;
+                this.lastSearchTerm = requestProperties.searchTerm;
+                this.lastTimeTaken = state.searchResponseTimeTaken;
+                // Handle the incoming response, using the action we have determined.
+                this.handleIncomingSearchResponse(state, actionType);
             }
-            else if (this.lastRangeValues !==
-                JSON.stringify(requestProperties.rangeValueForIndexFields)) {
-                actionType = 'RANGE_VALUE_UPDATE';
-            }
-            else if (this.lastFacetValues !==
-                JSON.stringify(requestProperties.facetPathsForIndexFields)) {
-                actionType = 'FACET_UPDATE';
-            }
-            else if (this.lastSortType !== requestProperties.order_by) {
-                actionType = 'SORT_ORDER_UPDATE';
-            }
-            else if (this.lastSearchMode !== requestProperties.mode) {
-                actionType = 'EXACT_MATCH_UPDATE';
+            else if (typeof state.searchClientRequestProperties === 'string') {
+                // Handle initialQuery case where requestProperties is a string
+                // For initialQuery, searchTerm will be empty but we still want to show facets
+                let actionType = 'NEW_SEARCH_TERM';
+                // Parse the request to get facet and range filters from the query array
+                const requestObj = JSON.parse(state.searchClientRequestProperties);
+                const queryArray = Array.isArray(requestObj.query)
+                    ? requestObj.query
+                    : [requestObj.query];
+                // Extract filter queries (those with occur: 'must')
+                const filterQueries = queryArray.filter((q) => q.occur === 'must');
+                const currentFilters = JSON.stringify(filterQueries);
+                // Determine the action type based on what changed
+                if (this.lastFacetValues !== undefined && this.lastFacetValues !== currentFilters) {
+                    // Filters have changed (not initial load)
+                    actionType = 'FACET_UPDATE';
+                }
+                else if (state.searchTerm.trim() === '' && this.lastSearchTerm === '') {
+                    // Initial load or no changes with empty search term
+                    actionType = 'NEW_SEARCH_TERM';
+                }
+                else if (this.lastSearchTerm !== state.searchTerm) {
+                    // User has typed a new search term after initialQuery
+                    if (this.areAnyFacetPathsSelected) {
+                        actionType = 'NEW_SEARCH_TERM_WHILE_FACETS_ACTIVE';
+                    }
+                    else {
+                        actionType = 'NEW_SEARCH_TERM';
+                    }
+                }
+                this.lastFacetValues = currentFilters;
+                this.lastSearchTerm = state.searchTerm;
+                this.lastTimeTaken = state.searchResponseTimeTaken;
+                // Handle the incoming response, using the action we have determined.
+                this.handleIncomingSearchResponse(state, actionType);
             }
-            this.lastRangeValues = JSON.stringify(requestProperties.rangeValueForIndexFields);
-            this.lastFacetValues = JSON.stringify(requestProperties.facetPathsForIndexFields);
-            this.lastSortType = requestProperties.order_by;
-            this.lastSearchMode = requestProperties.mode;
-            this.lastSearchTerm = requestProperties.searchTerm;
-            this.lastTimeTaken = state.searchResponseTimeTaken;
-            // Handle the incoming response, using the action we have determined.
-            this.handleIncomingSearchResponse(state, actionType);
         }
     }
     onCoreAvailable(core) {
@@ -4714,7 +4755,7 @@ class SearchcraftFilterPanel {
      * Iterate through `items` and render them based on `type`
      */
     render() {
-        return (hAsync("div", { key: 'b18a05516bea8d145d1ca015835d63fafbfc8bd8', class: 'searchcraft-filter-panel' }, this.items.map((filterItem) => {
+        return (hAsync("div", { key: 'ee8974e38b296a1ba27111bc2a4244d8915f5839', class: 'searchcraft-filter-panel' }, this.items.map((filterItem) => {
             switch (filterItem.type) {
                 case 'dateRange': {
                     const item = filterItem;
@@ -4833,6 +4874,10 @@ class SearchcraftInputForm {
      * 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.
      */
     placeholderBehavior;
+    /**
+     * The value to display in the input field.
+     */
+    value;
     /**
      * When the input becomes focused.
      */
@@ -4853,18 +4898,41 @@ class SearchcraftInputForm {
     cleanupCore;
     init() {
         if (this.core) {
+            // Initialize inputValue from prop if provided
+            if (this.value !== undefined && this.value.trim().length > 0) {
+                this.inputValue = this.value;
+                this.core.store.getState().setSearchTerm(this.value);
+                // Trigger search if autoSearch is enabled
+                if (this.autoSearch) {
+                    this.core.store.getState().search();
+                }
+            }
             this.inputInit?.emit();
         }
     }
     onCoreChange() {
         this.init();
     }
+    onValueChange(newValue) {
+        if (newValue !== undefined && newValue !== this.inputValue) {
+            this.inputValue = newValue;
+            this.core?.store.getState().setSearchTerm(newValue);
+            // Trigger search if autoSearch is enabled and value is not empty
+            if (this.autoSearch && newValue.trim().length > 0) {
+                this.core?.store.getState().search();
+            }
+        }
+    }
     onCoreAvailable(core) {
         this.core = core;
         this.init();
         this.unsubscribe = core.store.subscribe((state) => {
             this.searchTerm = state.searchTerm;
-            this.inputValue = state.searchTerm;
+            // Only update inputValue from store if value prop is not set
+            // OR if the store was cleared (empty string)
+            if (this.value === undefined || state.searchTerm === '') {
+                this.inputValue = state.searchTerm;
+            }
         });
     }
     connectedCallback() {
@@ -4893,6 +4961,8 @@ class SearchcraftInputForm {
         }
     };
     handleClearInput = () => {
+        // Clear the input value even if controlled by prop
+        this.inputValue = '';
         this.core?.store.getState().resetSearchValues();
         this.error = false;
     };
@@ -4911,14 +4981,15 @@ class SearchcraftInputForm {
         const inputGridStyles = {
             gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',
         };
-        return (hAsync("form", { key: 'c1eea324038f640a9075d5714378d5c4b97168e0', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, hAsync("div", { key: 'f157c00510e5c3e75dd703996be24de5e97bbcd9', class: inputGridClassNames, style: inputGridStyles }, hAsync("div", { key: 'c97f3e5ef9ed6aee103dedc76b3ee1620b69ebba', class: 'searchcraft-input-form-button' }, hAsync("searchcraft-button", { key: '4bb5dfea8b9f8f2f0a7e5fc5c1b199ef9d209278', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), this.inputLabel && (hAsync("div", { key: 'aa8beca21ce414d645687ee73b7ca29c740438a2', class: 'searchcraft-input-form-label' }, hAsync("searchcraft-input-label", { key: '8c15364abcf2e43354b445be6c7ceb9387ea4a67', label: this.inputLabel }))), this.error && (hAsync("div", { key: '5987b6da22a25da50613ceb277bfe44b31ba8f37', class: 'searchcraft-input-form-error-message' }, hAsync("searchcraft-error-message", { key: 'f2a230f0cf3cf0bbaddbb37ef2f38afdf73b28f6' }, "Something went wrong."))), hAsync("div", { key: 'a0862217135ac6f9a96d9e64e6fca5f772eb8f51', class: 'searchcraft-input-form-input-wrapper' }, hAsync("input", { key: '7071be386f0c73a0230e0815640b134ee5139262', autoComplete: 'off', class: classNames('searchcraft-input-form-input', {
+        return (hAsync("form", { key: 'd214ace44e9209154d215e803de088aefa58a285', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, hAsync("div", { key: '5699f5dca28caf5e9584401f1883d2e08d26e3ec', class: inputGridClassNames, style: inputGridStyles }, hAsync("div", { key: 'ef792a946414a680e9c99c145246d00b9b8f2ffb', class: 'searchcraft-input-form-button' }, hAsync("searchcraft-button", { key: 'ba5a8cb98889bb486781af4915a21c94a0b1498a', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), this.inputLabel && (hAsync("div", { key: 'a9e770ef967f7ab1c6ddf8f87f23cea509894536', class: 'searchcraft-input-form-label' }, hAsync("searchcraft-input-label", { key: '93b29e630e71a3c7724921aa9586aab76e592f4f', label: this.inputLabel }))), this.error && (hAsync("div", { key: '641ef4f468d527c24a1635d49dcbbba03030686f', class: 'searchcraft-input-form-error-message' }, hAsync("searchcraft-error-message", { key: '2d839d17b702fe1b41d7e49aacfc52fb53315766' }, "Something went wrong."))), hAsync("div", { key: 'af0c73478de21447c992bd0037ba007d54f53a86', class: 'searchcraft-input-form-input-wrapper' }, hAsync("input", { key: '3de1be1aa71c143b58cd6080d422410bd400e4e5', 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) => {
                 this.handleInput(event);
-            }, placeholder: this.placeholderValue, type: 'text', value: this.inputValue }), hAsync("div", { key: '178a7a21a84f012662312dc2b9145fff0aec6a44', class: 'searchcraft-input-form-input-icon' }, hAsync("svg", { key: '7fb86586c155f7075fb65280482eb2ab5ff8a9db', 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' }, hAsync("title", { key: '0a48667010f2c998917271f941877c5ec826329f' }, "Search icon"), hAsync("path", { key: '94c54dfa1406bdc6c2f87f3b31e1b01862b58e08', 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 && (hAsync("button", { key: '931fc5e8842de1e8f3bab3fa163261c54c24148c', type: 'button', class: 'searchcraft-input-form-clear-button', onClick: this.handleClearInput }, hAsync("svg", { key: '0676b050222eb9a7bf2f7c7c112ae40c0644ecf7', class: 'searchcraft-input-form-clear-icon', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, hAsync("title", { key: '002b23596bc977b5a942776e4f7b513db4584361' }, "Clear icon"), hAsync("path", { key: '05346b8f1ede39b9e1924760f400df10d8b0aa49', 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 }), hAsync("div", { key: 'fe9043c046e3b1b91129299f0860919ba8a8416b', class: 'searchcraft-input-form-input-icon' }, hAsync("svg", { key: '31ae1553cd214d5e2f97c9e3699862dff51a0916', 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' }, hAsync("title", { key: '9db677da65283ff15b0d4e79b5d9daf89637b33f' }, "Search icon"), hAsync("path", { key: '2a002eae6ed3725a432e7c3e4649c0bd2ffff7a0', 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 && (hAsync("button", { key: 'b7e92b22c3234eb31d85b0aa98d7c682b2fc0021', type: 'button', class: 'searchcraft-input-form-clear-button', onClick: this.handleClearInput }, hAsync("svg", { key: 'bfbeb742f197da0cac6dd5df2627db9df5349207', class: 'searchcraft-input-form-clear-icon', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, hAsync("title", { key: 'c62b9d237b3762609fed72e0520322fb5eabe979' }, "Clear icon"), hAsync("path", { key: '198a13760ce8b076ef8e791dec933b210ff3017a', 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"]
+        "core": ["onCoreChange"],
+        "value": ["onValueChange"]
     }; }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -4931,6 +5002,7 @@ class SearchcraftInputForm {
             "inputLabel": [1, "input-label"],
             "placeholderValue": [1, "placeholder-value"],
             "placeholderBehavior": [1, "placeholder-behavior"],
+            "value": [1],
             "inputValue": [32],
             "searchTerm": [32],
             "error": [32]
@@ -5042,6 +5114,7 @@ class SearchcraftPagination {
     searchResultsPerPage;
     searchResultsPage;
     searchResultsCount;
+    searchClientRequestProperties;
     // local vars
     searchResultsPagesCount = 1;
     searchResultsRangeMin = 1;
@@ -5057,6 +5130,7 @@ class SearchcraftPagination {
             this.searchResultsPerPage = state.searchResultsPerPage;
             this.searchResultsPage = state.searchResultsPage;
             this.searchResultsCount = state.searchResultsCount;
+            this.searchClientRequestProperties = state.searchClientRequestProperties;
             // local vars
             this.searchResultsPagesCount = Math.ceil(this.searchResultsCount / this.searchResultsPerPage);
             this.searchResultsRangeMin =
@@ -5116,8 +5190,11 @@ class SearchcraftPagination {
         return (hAsync("li", null, hAsync("span", { class: 'searchcraft-pagination-item searchcraft-pagination-item-active' }, this.searchResultsPage)));
     }
     render() {
-        // early return if there isn't a searchTerm or there is 1 or fewer pages of results
-        if (!this.searchTerm || this.searchResultsPagesCount <= 1) {
+        // Check if this is an initialQuery case (string requestProperties with empty searchTerm)
+        const isInitialQuery = typeof this.searchClientRequestProperties === 'string' &&
+            this.searchTerm.trim() === '';
+        // early return if there isn't a searchTerm (unless it's initialQuery) or there is 1 or fewer pages of results
+        if ((!this.searchTerm && !isInitialQuery) || this.searchResultsPagesCount <= 1) {
             return;
         }
         return (hAsync("div", { class: 'searchcraft-pagination' }, hAsync("div", { class: 'searchcraft-pagination-control' }, hAsync("searchcraft-button", { disabled: this.searchResultsPage === 1, hierarchy: 'tertiary', onButtonClick: () => this.handleGoToPage(Math.max(1, this.searchResultsPage - 1)), label: 'Previous', iconPosition: 'left', icon: hAsync("svg", { class: 'searchcraft-button-icon', width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, hAsync("title", null, "Previous page icon"), hAsync("path", { d: 'M12.5 15L7.5 10L12.5 5', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })), iconOnly: true })), hAsync("ul", { class: 'searchcraft-pagination-list' }, this.renderOddPaginationItem(1), this.renderEvenPaginationItem(2), this.renderMiddlePaginationItem(), this.renderEvenPaginationItem(this.searchResultsPagesCount > 4
@@ -5135,6 +5212,7 @@ class SearchcraftPagination {
             "searchResultsPerPage": [32],
             "searchResultsPage": [32],
             "searchResultsCount": [32],
+            "searchClientRequestProperties": [32],
             "searchResultsPagesCount": [32],
             "searchResultsRangeMin": [32],
             "searchResultsRangeMax": [32],
@@ -5434,6 +5512,16 @@ class SearchcraftPopoverForm {
      * The id of the Searchcraft instance that this component should use.
      */
     searchcraftId;
+    /**
+     * The input element's placeholder value.
+     */
+    placeholderValue = 'Enter Search';
+    /**
+     * The placeholder's render behavior.
+     * 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus.
+     * 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.
+     */
+    placeholderBehavior;
     isPopoverVisibleInState = false;
     searchClientResponseItems = [];
     adClientResponseItems = [];
@@ -5544,6 +5632,12 @@ class SearchcraftPopoverForm {
                 this.modalElement.popoverResultMappings = this.popoverResultMappings;
                 this.modalElement.setAttribute('type', 'fullscreen');
                 this.modalElement.setAttribute('searchcraft-id', this.searchcraftId);
+                if (this.placeholderValue) {
+                    this.modalElement.setAttribute('placeholder-value', this.placeholderValue);
+                }
+                if (this.placeholderBehavior) {
+                    this.modalElement.setAttribute('placeholder-behavior', this.placeholderBehavior);
+                }
                 document.body.appendChild(this.modalElement);
             }
         }
@@ -5611,20 +5705,20 @@ class SearchcraftPopoverForm {
         const isListViewVisible = this.hasResultsToShow && this.isFocused;
         return (hAsync("div", { class: classNames('searchcraft-popover-form searchcraft-popover-form-inline', {
                 'searchcraft-popover-form-active': isListViewVisible,
-            }) }, hAsync("div", { class: 'searchcraft-popover-form-input searchcraft-popover-form-inline-input' }, hAsync("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this), searchcraftId: this.searchcraftId })), isListViewVisible && (hAsync("div", { class: 'searchcraft-popover-form-inline-wrapper' }, hAsync("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage, searchcraftId: this.searchcraftId }), hAsync("searchcraft-popover-footer", { searchcraftId: this.searchcraftId })))));
+            }) }, hAsync("div", { class: 'searchcraft-popover-form-input searchcraft-popover-form-inline-input' }, hAsync("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this), searchcraftId: this.searchcraftId, placeholderValue: this.placeholderValue, placeholderBehavior: this.placeholderBehavior })), isListViewVisible && (hAsync("div", { class: 'searchcraft-popover-form-inline-wrapper' }, hAsync("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage, searchcraftId: this.searchcraftId }), hAsync("searchcraft-popover-footer", { searchcraftId: this.searchcraftId })))));
     }
     renderModalPopover() {
         if (this.isPopoverVisibleInState) {
             return (hAsync("div", { class: classNames('searchcraft-popover-form searchcraft-popover-form-modal', {
                     'searchcraft-popover-form-active': this.hasResultsToShow,
-                }) }, hAsync("div", { class: 'searchcraft-popover-form-modal-backdrop', onClick: this.handleModalBackdropClick }), hAsync("div", { class: 'searchcraft-popover-form-modal-wrapper' }, hAsync("div", { class: 'searchcraft-popover-form-input searchcraft-popover-form-modal-input' }, hAsync("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this), searchcraftId: this.searchcraftId }), hAsync("button", { type: 'button', class: 'searchcraft-popover-form-cancel-button searchcraft-popover-form-modal-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), hAsync("div", { class: 'searchcraft-popover-form-modal-popover-list-view' }, this.hasResultsToShow && (hAsync("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage, searchcraftId: this.searchcraftId }))), hAsync("searchcraft-popover-footer", { searchcraftId: this.searchcraftId }))));
+                }) }, hAsync("div", { class: 'searchcraft-popover-form-modal-backdrop', onClick: this.handleModalBackdropClick }), hAsync("div", { class: 'searchcraft-popover-form-modal-wrapper' }, hAsync("div", { class: 'searchcraft-popover-form-input searchcraft-popover-form-modal-input' }, hAsync("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this), searchcraftId: this.searchcraftId, placeholderValue: this.placeholderValue, placeholderBehavior: this.placeholderBehavior }), hAsync("button", { type: 'button', class: 'searchcraft-popover-form-cancel-button searchcraft-popover-form-modal-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), hAsync("div", { class: 'searchcraft-popover-form-modal-popover-list-view' }, this.hasResultsToShow && (hAsync("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage, searchcraftId: this.searchcraftId }))), hAsync("searchcraft-popover-footer", { searchcraftId: this.searchcraftId }))));
         }
     }
     renderFullscreenPopover() {
         if (this.isPopoverVisibleInState) {
             return (hAsync("div", { class: classNames('searchcraft-popover-form searchcraft-popover-form-fullscreen', {
                     'searchcraft-popover-form-active': this.hasResultsToShow,
-                }) }, hAsync("div", { class: 'searchcraft-popover-form-input searchcraft-popover-form-fullscreen-input' }, hAsync("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this), searchcraftId: this.searchcraftId }), hAsync("button", { type: 'button', class: 'searchcraft-popover-form-cancel-button searchcraft-popover-form-fullscreen-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), hAsync("div", { class: 'searchcraft-popover-form-fullscreen-popover-list-view' }, this.hasResultsToShow && (hAsync("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage, searchcraftId: this.searchcraftId }))), hAsync("searchcraft-popover-footer", { searchcraftId: this.searchcraftId })));
+                }) }, hAsync("div", { class: 'searchcraft-popover-form-input searchcraft-popover-form-fullscreen-input' }, hAsync("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this), searchcraftId: this.searchcraftId, placeholderValue: this.placeholderValue, placeholderBehavior: this.placeholderBehavior }), hAsync("button", { type: 'button', class: 'searchcraft-popover-form-cancel-button searchcraft-popover-form-fullscreen-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), hAsync("div", { class: 'searchcraft-popover-form-fullscreen-popover-list-view' }, this.hasResultsToShow && (hAsync("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage, searchcraftId: this.searchcraftId }))), hAsync("searchcraft-popover-footer", { searchcraftId: this.searchcraftId })));
         }
     }
     render() {
@@ -5646,6 +5740,8 @@ class SearchcraftPopoverForm {
             "hotkey": [1],
             "hotkeyModifier": [1, "hotkey-modifier"],
             "searchcraftId": [1, "searchcraft-id"],
+            "placeholderValue": [1, "placeholder-value"],
+            "placeholderBehavior": [1, "placeholder-behavior"],
             "isPopoverVisibleInState": [32],
             "searchClientResponseItems": [32],
             "adClientResponseItems": [32],
@@ -6140,6 +6236,7 @@ class SearchcraftResultsInfo {
     searchResultsPage;
     searchResultsPerPage;
     searchResultsCount;
+    searchClientRequestProperties;
     // local vars
     count = 0;
     range = [0, 0];
@@ -6153,6 +6250,7 @@ class SearchcraftResultsInfo {
             this.searchResultsPage = state.searchResultsPage;
             this.searchResultsPerPage = state.searchResultsPerPage;
             this.searchResultsCount = state.searchResultsCount;
+            this.searchClientRequestProperties = state.searchClientRequestProperties;
             // local vars
             this.count = this.searchResultsCount;
             this.range[0] =
@@ -6175,7 +6273,12 @@ class SearchcraftResultsInfo {
         this.cleanupCore?.();
     }
     render() {
-        if (!this.searchTerm || this.searchResultsCount === 0) {
+        // Check if this is an initialQuery case (string requestProperties with empty searchTerm)
+        const isInitialQuery = typeof this.searchClientRequestProperties === 'string' &&
+            this.searchTerm.trim() === '';
+        // Only hide if there's no search term AND no initialQuery AND no results
+        if ((!this.searchTerm && !isInitialQuery) ||
+            this.searchResultsCount === 0) {
             return null;
         }
         return (hAsync("p", { class: 'searchcraft-results-info' }, typeof this.template !== 'undefined'
@@ -6196,6 +6299,7 @@ class SearchcraftResultsInfo {
             "searchResultsPage": [32],
             "searchResultsPerPage": [32],
             "searchResultsCount": [32],
+            "searchClientRequestProperties": [32],
             "count": [32],
             "range": [32],
             "responseTime": [32]
@@ -6570,6 +6674,7 @@ class SearchcraftSearchResultsPerPage {
     searchResultsPerPage;
     searchResultsCount;
     searchResultsPagesCount;
+    searchClientRequestProperties;
     // local vars
     initialSearchResultsPerPage;
     // store functions
@@ -6584,6 +6689,7 @@ class SearchcraftSearchResultsPerPage {
             this.searchResultsPerPage = state.searchResultsPerPage;
             this.searchResultsPage = state.searchResultsPage;
             this.searchResultsCount = state.searchResultsCount;
+            this.searchClientRequestProperties = state.searchClientRequestProperties;
             // local vars
             this.searchResultsPagesCount = Math.ceil(this.searchResultsCount / this.searchResultsPerPage);
             // store functions
@@ -6601,8 +6707,11 @@ class SearchcraftSearchResultsPerPage {
         this.cleanupCore?.();
     }
     render() {
-        // early return if there isn't a searchTerm or there is 1 or fewer pages of results
-        if (!this.searchTerm || this.searchResultsPagesCount <= 1) {
+        // Check if this is an initialQuery case (string requestProperties with empty searchTerm)
+        const isInitialQuery = typeof this.searchClientRequestProperties === 'string' &&
+            this.searchTerm.trim() === '';
+        // early return if there isn't a searchTerm (unless it's initialQuery) or there is 1 or fewer pages of results
+        if ((!this.searchTerm && !isInitialQuery) || this.searchResultsPagesCount <= 1) {
             return;
         }
         return (hAsync("div", { class: 'searchcraft-search-results-per-page' }, hAsync("div", { class: 'searchcraft-search-results-per-page-select' }, hAsync("label", { class: 'searchcraft-search-results-per-page-select-label', htmlFor: 'searchcraft-search-results-per-page-select-input' }, "Results Per Page"), hAsync("div", { class: 'searchcraft-search-results-per-page-select-input' }, hAsync("searchcraft-select", { inputId: 'searchcraft-search-results-per-page-select-input', name: 'results-per-page', options: [...Array(5)].map((_, index) => {
@@ -6628,6 +6737,7 @@ class SearchcraftSearchResultsPerPage {
             "searchResultsPerPage": [32],
             "searchResultsCount": [32],
             "searchResultsPagesCount": [32],
+            "searchClientRequestProperties": [32],
             "initialSearchResultsPerPage": [32],
             "setSearchResultsPerPage": [32],
             "setSearchResultsPage": [32]
@@ -9170,19 +9280,13 @@ class SearchcraftSummaryBox {
     searchcraftId;
     summary = '';
     isLoading = false;
+    isSummaryNotEnabled = false;
     get hostElement() { return getElement(this); }
     unsubscribe;
     cleanupCore;
     onCoreAvailable(core) {
         core.store.setState({ hasSummaryBox: true });
-        this.unsubscribe = core.store.subscribe((state) => {
-            this.summary = DOMPurify.sanitize(marked_umd.exports.marked.parse(state.summary));
-            this.isLoading = state.isSummaryLoading;
-            const div = this.hostElement?.querySelector('.searchcraft-summary-box-content');
-            if (div) {
-                div.innerHTML = DOMPurify.sanitize(marked_umd.exports.marked.parse(state.summary));
-            }
-        });
+        this.unsubscribe = core.store.subscribe(this.handleStateChange.bind(this));
     }
     connectedCallback() {
         this.cleanupCore = registry.useCoreInstance(this.searchcraftId, this.onCoreAvailable.bind(this));
@@ -9191,8 +9295,45 @@ class SearchcraftSummaryBox {
         this.unsubscribe?.();
         this.cleanupCore?.();
     }
+    /**
+     * Handles state changes from the store and updates component state.
+     */
+    handleStateChange(state) {
+        this.isLoading = state.isSummaryLoading;
+        this.isSummaryNotEnabled = state.isSummaryNotEnabled;
+        this.summary = this.sanitizeMarkdown(state.summary);
+        // Update DOM directly for performance (avoids re-render)
+        this.updateContentElement(state.summary);
+    }
+    /**
+     * Sanitizes and converts markdown to HTML.
+     */
+    sanitizeMarkdown(markdown) {
+        return DOMPurify.sanitize(marked_umd.exports.marked.parse(markdown));
+    }
+    /**
+     * Updates the content element directly without triggering a re-render.
+     */
+    updateContentElement(markdown) {
+        const contentElement = this.hostElement?.querySelector('.searchcraft-summary-box-content');
+        if (contentElement) {
+            contentElement.innerHTML = this.sanitizeMarkdown(markdown);
+        }
+    }
+    /**
+     * Renders the appropriate content based on current state.
+     */
+    renderContent() {
+        if (this.isLoading) {
+            return hAsync("searchcraft-loading", { label: 'LOADING' });
+        }
+        if (this.isSummaryNotEnabled) {
+            return (hAsync("div", { class: 'searchcraft-summary-box-content' }, "AI summaries are not enabled"));
+        }
+        return hAsync("div", { class: 'searchcraft-summary-box-content' }, this.summary);
+    }
     render() {
-        return (hAsync("div", { key: '71173c93d5230610c52dfda79e23ae116e55331b', class: 'searchcraft-summary-box' }, this.isLoading && hAsync("searchcraft-loading", { key: 'a9a51922a4bedc975d3a76008fad5c014e8810ad', label: 'LOADING' }), !this.isLoading && (hAsync("div", { key: 'bb2440d7e36972c85b1887a609fd19c463f44bc9', class: 'searchcraft-summary-box-content' }, this.summary))));
+        return hAsync("div", { key: 'c88d0bf7e12ad0fa0c019d207854a6e92babc683', class: 'searchcraft-summary-box' }, this.renderContent());
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -9200,7 +9341,8 @@ class SearchcraftSummaryBox {
         "$members$": {
             "searchcraftId": [1, "searchcraft-id"],
             "summary": [32],
-            "isLoading": [32]
+            "isLoading": [32],
+            "isSummaryNotEnabled": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -9244,7 +9386,7 @@ class SearchcraftTheme {
         registerInstance(this, hostRef);
     }
     render() {
-        return hAsync("style", { key: '7380c677cd9edda898cdfccf8cdb3d60e8602f14' }, styles);
+        return hAsync("style", { key: 'ef26626cdfa4fa98d516802d71443c49a9c6ecf9' }, styles);
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -9308,9 +9450,9 @@ class SearchcraftToggleButton {
         this.cleanupCore?.();
     }
     render() {
-        return (hAsync("div", { key: '22a346c471a467b0b38b4cfde59ea70e0941cc93', class: classNames('searchcraft-toggle-button', {
+        return (hAsync("div", { key: 'ab1d5ee21c7aaa28af1c405edc986556858366e8', class: classNames('searchcraft-toggle-button', {
                 'searchcraft-toggle-button-active': this.isActive,
-            }) }, hAsync("div", { key: '99a2ad545500218f85006a9a0f8bbf18b8f42ed7' }, hAsync("p", { key: '5e4a9e3f27af75d0d480dc6b3668963bfcb0d1a2', class: 'searchcraft-toggle-button-label' }, this.label), this.subLabel && (hAsync("p", { key: 'c9df9f08270b58a167831d59ae3f9178eb3f6175', class: 'searchcraft-toggle-button-sub-label' }, this.subLabel))), hAsync("button", { key: '6eebeb90660122d2c12ec91091ed5987478bbec4', class: 'searchcraft-toggle-button-background', onClick: this.handleToggle, type: 'button' }, hAsync("div", { key: '62f9b1397354322986a24e8fe9e8cee62bc96600', class: 'searchcraft-toggle-button-handle' }))));
+            }) }, hAsync("div", { key: '44f86a16d796d448bdb2fb3af72d4d8e1484364b' }, hAsync("p", { key: '9fedb38795d6379cae56dc005ab8e4a944b4261b', class: 'searchcraft-toggle-button-label' }, this.label), this.subLabel && (hAsync("p", { key: '44f3d17175184032275fec89a4cfe7f8266b7014', class: 'searchcraft-toggle-button-sub-label' }, this.subLabel))), hAsync("button", { key: '15fc18906ff2fb21fe646a4e3a8a2ace4a37cae2', class: 'searchcraft-toggle-button-background', onClick: this.handleToggle, type: 'button' }, hAsync("div", { key: '716d29c65a199f63f5fd294dc3e3ad2ea4d53aa3', class: 'searchcraft-toggle-button-handle' }))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,

package/dist/types/classes/SearchcraftCore.d.ts

@@ -1,5 +1,5 @@
 import { type AdClient, MeasureClient, SearchClient } from "../clients/index";
-import type { AdClientResponseItem, SearchcraftConfig, SearchcraftSDKInfo, SubscriptionEventName, SubscriptionEventCallback, SubscriptionEventMap, UnsubscribeFunction, SearchClientRequestProperties } from "../types/index";
+import type { AdClientResponseItem, SearchClientRequestProperties, SearchcraftConfig, SearchcraftSDKInfo, SubscriptionEventCallback, SubscriptionEventMap, SubscriptionEventName, UnsubscribeFunction } from "../types/index";
 import { type SearchcraftStore } from "../store/index";
 /**
  * Javascript Class providing the functionality to interact with the Searchcraft BE