@searchcraft/javascript-sdk 0.2.7 → 0.2.9

package/dist/cjs/index.cjs.js

@@ -2,15 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const utils = require('./utils-2dc6115c.js');
-const store = require('./store-c44c58ab.js');
+const store = require('./store-f3bec622.js');
 
 
 
-exports.extractDynamicProperties = utils.extractDynamicProperties;
-exports.parseCustomStyles = utils.parseCustomStyles;
-exports.parseSearchKeys = utils.parseSearchKeys;
-exports.serializeStyles = utils.serializeStyles;
+exports.extractDynamicProperties = store.extractDynamicProperties;
+exports.parseCustomStyles = store.parseCustomStyles;
+exports.parseSearchKeys = store.parseSearchKeys;
+exports.serializeStyles = store.serializeStyles;
 exports.useSearchcraftStore = store.useSearchcraftStore;
 exports.useThemeStore = store.useThemeStore;
 

package/dist/cjs/index.cjs.js.map

@@ -1 +1 @@
-{"file":"index.cjs.js","mappings":";;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"index.cjs.js","mappings":";;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["searchcraft-auto-search-form_18.cjs",[[1,"searchcraft-auto-search-form",{"autoSearchFormClass":[1,"auto-search-form-class"],"clearInput":[16],"config":[16],"customStylesForInput":[1,"custom-styles-for-input"],"inputCaptionValue":[1,"input-caption-value"],"inputIconHeight":[2,"input-icon-height"],"inputIconWidth":[2,"input-icon-width"],"labelForInput":[1,"label-for-input"],"placeholderValue":[1,"placeholder-value"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"searchContainerClass":[1,"search-container-class"],"error":[32],"isRequesting":[32],"query":[32],"searchResults":[32]}],[1,"searchcraft-base-search-results",{"adInterval":[2,"ad-interval"],"customStylesForResults":[1,"custom-styles-for-results"],"documentAttributesForDisplay":[1,"document-attributes-for-display"],"fallbackElement":[16],"formatTime":[4,"format-time"],"placeAdAtEnd":[4,"place-ad-at-end"],"placeAdAtStart":[4,"place-ad-at-start"],"placeResultImageRight":[4,"place-result-image-right"],"hasSearched":[32],"query":[32],"searchResults":[32]}],[1,"searchcraft-filters-list",{"filters":[16],"dynamicFilters":[32],"isRequesting":[32],"query":[32],"resultsCount":[32],"selectedFilters":[32]}],[1,"searchcraft-results-info",{"isRequesting":[32],"resultsCount":[32],"responseTime":[32],"query":[32]}],[1,"searchcraft-slider",{"maxYear":[2,"max-year"],"minYear":[2,"min-year"],"endYear":[32],"hasSearched":[32],"query":[32],"resultsCount":[32],"startYear":[32]}],[1,"searchcraft-toggle-button",{"type":[1],"isActive":[32],"query":[32],"resultsCount":[32]}],[1,"searchcraft-base-search-result",{"buttonText":[1,"button-text"],"customStyles":[1,"custom-styles"],"headingText":[1,"heading-text"],"imageDescription":[1,"image-description"],"imageSource":[1,"image-source"],"isInteractive":[4,"is-interactive"],"primaryContent":[1,"primary-content"],"secondaryContent":[1,"secondary-content"],"subheadingText":[1,"subheading-text"],"tertiaryContent":[1,"tertiary-content"],"themeMode":[1,"theme-mode"],"placeImageRight":[4,"place-image-right"]}],[1,"searchcraft-check-icon"],[1,"searchcraft-input",{"customStyles":[1,"custom-styles"],"error":[4],"formClassName":[1,"form-class-name"],"inputCaptionClassName":[1,"input-caption-class-name"],"inputCaptionValue":[1,"input-caption-value"],"inputClassName":[1,"input-class-name"],"inputIconHeight":[2,"input-icon-height"],"inputIconWidth":[2,"input-icon-width"],"isRequesting":[4,"is-requesting"],"placeholderValue":[1,"placeholder-value"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"query":[1],"theme":[32]}],[1,"searchcraft-input-label",{"inputLabelClassName":[1,"input-label-class-name"],"label":[1],"theme":[32]}],[1,"searchcraft-clear-input-button",{"isRequesting":[4,"is-requesting"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"theme":[32]}],[1,"searchcraft-input-icon",{"error":[4],"height":[2],"rightToLeftOrientation":[4,"right-to-left-orientation"],"width":[2],"theme":[32]}],[1,"searchcraft-error-message",{"errorMessage":[1,"error-message"],"theme":[1]}],[1,"searchcraft-input-caption",{"error":[4],"inputCaptionClassName":[1,"input-caption-class-name"],"inputCaptionValue":[1,"input-caption-value"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"theme":[32]}],[1,"searchcraft-clear-icon-set",{"type":[1]}],[1,"searchcraft-search-icon-set",{"type":[1],"width":[2],"height":[2]}],[1,"searchcraft-spinner-light"],[1,"searchcraft-spinner-dark"]]],["searchcraft-base-search-form.cjs",[[1,"searchcraft-base-search-form",{"config":[16],"errorMessage":[1,"error-message"],"labelForInput":[1,"label-for-input"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"error":[32],"query":[32],"searchResults":[32]}]]],["searchcraft-button-icon.cjs",[[1,"searchcraft-button-icon"]]],["searchcraft-button.cjs",[[1,"searchcraft-button",{"iconElement":[16],"iconOnly":[4,"icon-only"],"iconPosition":[1,"icon-position"],"label":[1],"isRequesting":[32],"theme":[32]}]]]], options);
+  return index.bootstrapLazy([["searchcraft-auto-search-form_19.cjs",[[1,"searchcraft-auto-search-form",{"autoSearchFormClass":[1,"auto-search-form-class"],"clearInput":[16],"config":[16],"customStylesForInput":[1,"custom-styles-for-input"],"inputCaptionValue":[1,"input-caption-value"],"inputIconHeight":[2,"input-icon-height"],"inputIconWidth":[2,"input-icon-width"],"labelForInput":[1,"label-for-input"],"placeholderValue":[1,"placeholder-value"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"searchContainerClass":[1,"search-container-class"],"error":[32],"isRequesting":[32],"query":[32],"searchResults":[32]}],[1,"searchcraft-base-search-results",{"adInterval":[2,"ad-interval"],"customStylesForResults":[1,"custom-styles-for-results"],"documentAttributesForDisplay":[1,"document-attributes-for-display"],"fallbackElement":[16],"formatTime":[4,"format-time"],"placeAdAtEnd":[4,"place-ad-at-end"],"placeAdAtStart":[4,"place-ad-at-start"],"placeResultImageRight":[4,"place-result-image-right"],"hasSearched":[32],"query":[32],"searchResults":[32]}],[1,"searchcraft-filters-list",{"filters":[16],"dynamicFilters":[32],"selectedFilters":[32],"query":[32],"isRequesting":[32],"resultsCount":[32]}],[1,"searchcraft-results-info",{"isRequesting":[32],"resultsCount":[32],"responseTime":[32],"query":[32]}],[1,"searchcraft-slider",{"maxYear":[2,"max-year"],"minYear":[2,"min-year"],"endYear":[32],"hasSearched":[32],"query":[32],"resultsCount":[32],"startYear":[32]}],[1,"searchcraft-toggle-button",{"type":[1],"isActive":[32],"query":[32],"resultsCount":[32]}],[1,"searchcraft-base-search-result",{"buttonText":[1,"button-text"],"customStyles":[1,"custom-styles"],"headingText":[1,"heading-text"],"imageDescription":[1,"image-description"],"imageSource":[1,"image-source"],"isInteractive":[4,"is-interactive"],"primaryContent":[1,"primary-content"],"secondaryContent":[1,"secondary-content"],"subheadingText":[1,"subheading-text"],"tertiaryContent":[1,"tertiary-content"],"themeMode":[1,"theme-mode"],"placeImageRight":[4,"place-image-right"]}],[1,"searchcraft-check-icon"],[1,"searchcraft-dash-icon"],[1,"searchcraft-input",{"customStyles":[1,"custom-styles"],"error":[4],"formClassName":[1,"form-class-name"],"inputCaptionClassName":[1,"input-caption-class-name"],"inputCaptionValue":[1,"input-caption-value"],"inputClassName":[1,"input-class-name"],"inputIconHeight":[2,"input-icon-height"],"inputIconWidth":[2,"input-icon-width"],"isRequesting":[4,"is-requesting"],"placeholderValue":[1,"placeholder-value"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"query":[1],"theme":[32]}],[1,"searchcraft-input-label",{"inputLabelClassName":[1,"input-label-class-name"],"label":[1],"theme":[32]}],[1,"searchcraft-clear-input-button",{"isRequesting":[4,"is-requesting"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"theme":[32]}],[1,"searchcraft-input-icon",{"error":[4],"height":[2],"rightToLeftOrientation":[4,"right-to-left-orientation"],"width":[2],"theme":[32]}],[1,"searchcraft-error-message",{"errorMessage":[1,"error-message"],"theme":[1]}],[1,"searchcraft-input-caption",{"error":[4],"inputCaptionClassName":[1,"input-caption-class-name"],"inputCaptionValue":[1,"input-caption-value"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"theme":[32]}],[1,"searchcraft-clear-icon-set",{"type":[1]}],[1,"searchcraft-search-icon-set",{"type":[1],"width":[2],"height":[2]}],[1,"searchcraft-spinner-light"],[1,"searchcraft-spinner-dark"]]],["searchcraft-base-search-form.cjs",[[1,"searchcraft-base-search-form",{"config":[16],"errorMessage":[1,"error-message"],"labelForInput":[1,"label-for-input"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"error":[32],"query":[32],"searchResults":[32]}]]],["searchcraft-button-icon.cjs",[[1,"searchcraft-button-icon"]]],["searchcraft-button.cjs",[[1,"searchcraft-button",{"iconElement":[16],"iconOnly":[4,"icon-only"],"iconPosition":[1,"icon-position"],"label":[1],"isRequesting":[32],"theme":[32]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{searchcraft-auto-search-form_18.cjs.entry.js → searchcraft-auto-search-form_19.cjs.entry.js}

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6c5282a0.js');
-const store = require('./store-c44c58ab.js');
-const utils = require('./utils-2dc6115c.js');
+const store = require('./store-f3bec622.js');
 const index$1 = require('./index-5b0b9d4c.js');
 
 const searchcraftAutoSearchFormModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.formLTR{font-family:var(--font-stack);text-align:left;width:100%}.formRTL{font-family:var(--font-stack);text-align:right;width:100%}";
@@ -21,23 +20,40 @@ const SearchcraftAutoSearchForm = class {
         this.handleInputChange = (event) => {
             this.query = event.detail;
             this.searchStore.setQuery(this.query);
-            this.querySubmit.emit(this.query);
+            if (this.query.trim() === '') {
+                this.searchResults = null;
+                this.searchStore.setSearchResults(null);
+            }
+            else {
+                this.querySubmit.emit(this.query);
+            }
         };
         this.handleInputKeyUp = (event) => {
             const target = event.detail;
+            if (target === this.query) {
+                return;
+            }
             this.query = target;
-            this.searchStore.setQuery(this.query);
-            this.querySubmit.emit(this.query);
             if (this.debounceTimeout) {
                 clearTimeout(this.debounceTimeout);
             }
             this.debounceTimeout = setTimeout(() => {
-                this.query.trim() !== '' && this.runSearch();
+                if (this.query.trim() === '') {
+                    this.searchResults = null;
+                    this.searchStore.setSearchResults(null);
+                }
+                else {
+                    this.searchStore.setQuery(this.query);
+                    this.querySubmit.emit(this.query);
+                    this.runSearch();
+                }
             }, this.debounceDelay);
         };
         this.handleClearInput = () => {
             this.query = '';
+            this.searchResults = null;
             this.searchStore.setQuery('');
+            this.searchStore.setSearchResults(null);
             if (typeof this.clearInput === 'function') {
                 this.clearInput();
             }
@@ -55,6 +71,7 @@ const SearchcraftAutoSearchForm = class {
             else {
                 this.error = false;
                 this.searchStore.setQuery(this.query);
+                this.searchStore.setSelectedFilters([]);
                 try {
                     await this.searchStore.search();
                 }
@@ -102,13 +119,9 @@ const SearchcraftAutoSearchForm = class {
         }
     }
     render() {
-        var _a, _b, _c;
         const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';
-        const parsedCustomStyles = utils.parseCustomStyles(this.customStylesForInput);
-        if (this.query.length > 0 && ((_c = (_b = (_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.length) === 0) {
-            this.inputClearedOrNoResults.emit();
-        }
-        return (index.h("form", { key: 'cfc0e29f0f35598c13f5d87720f38d74cba292fb', class: `${formClass}`, onSubmit: this.handleFormSubmit }, index.h("searchcraft-input-label", { key: 'fd5635505ee5f863f128912377960752d4dccd2d', label: this.labelForInput }), index.h("searchcraft-input", { key: '84c3a6da7ed48e835aa74f87ad862672d38876c7', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "input-icon-height": this.inputIconHeight, "input-icon-width": this.inputIconWidth, "is-requesting": this.isRequesting, onClearInput: this.handleClearInput, onInputKeyUp: this.handleInputKeyUp, onSearchInputChange: this.handleInputChange, "placeholder-value": this.placeholderValue, query: this.query, "right-to-left-orientation": this.rightToLeftOrientation }), this.error && (index.h("searchcraft-error-message", { key: 'bcb99f333d73ed811c7d7a6d85736ba94fb7fa56', errorMessage: 'Please enter a search query.' }))));
+        const parsedCustomStyles = store.parseCustomStyles(this.customStylesForInput);
+        return (index.h("form", { key: '2421495aa88b52a47658af9b682e172da7d23691', class: `${formClass}`, onSubmit: this.handleFormSubmit }, index.h("searchcraft-input-label", { key: '032e7e3a7f83af11422b64b023a38c2f433d3809', label: this.labelForInput }), index.h("searchcraft-input", { key: 'a3a286e6b5ade795a157a1a046278477731684b4', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "input-icon-height": this.inputIconHeight, "input-icon-width": this.inputIconWidth, "is-requesting": this.isRequesting, onClearInput: this.handleClearInput, onInputKeyUp: this.handleInputKeyUp, onSearchInputChange: this.handleInputChange, "placeholder-value": this.placeholderValue, query: this.query, "right-to-left-orientation": this.rightToLeftOrientation }), this.error && (index.h("searchcraft-error-message", { key: '4588522cf331cc8165e789bb3d58f35ef5148f11', errorMessage: 'Please enter a search query.' }))));
     }
 };
 SearchcraftAutoSearchForm.style = SearchcraftAutoSearchFormStyle0;
@@ -158,9 +171,9 @@ const SearchcraftBaseSearchResult = class {
     render() {
         const isLightTheme = this.themeMode === 'light';
         const styles = this.parseStyles();
-        const imageContainer = this.imageSource && (index.h("div", { key: 'bc2c9e7e6fdfdd7a159adeaae93ee295f3871bb1', class: 'imageContainer' }, index.h("img", { key: '403cf6f083a0fab8c0d84f858e6f799bb5e39856', alt: this.imageDescription, class: isLightTheme ? 'imageLight' : 'imageDark', src: this.imageSource, style: styles.image || {} })));
-        const contentContainer = (index.h("div", { key: 'ec56243d676a5dfbdc7d9dc5be9f2e078ab3e599', class: 'contentContainer' }, index.h("h2", { key: 'e2d73b3c6c18753fee3e3a2a8526a68c62a0a2f5', class: isLightTheme ? 'headingLight' : 'headingDark', style: styles.heading || {} }, this.headingText), index.h("h3", { key: 'fccf35b5a06c09c96150568d4cd71bacea1fe15d', class: isLightTheme ? 'subheadingLight' : 'subheadingDark', style: styles.subheading || {} }, this.subheadingText), index.h("p", { key: '95b64831fd0248f69773cafa6357133f9758748c', class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark', style: styles.primaryContent || {} }, this.primaryContent), index.h("div", { key: 'f1e597968aab316067762bca3e39bccb50f3b34a', class: 'secondaryContentContainer' }, index.h("p", { key: '05ccdbb2854cd538fa2fd9e3a6efe8fa8ea46003', class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark', style: styles.secondaryContent || {} }, this.secondaryContent), index.h("p", { key: 'ca2b96c02c9d8b073b0e0cff3e288d9eba7e3cd1', class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark', style: styles.tertiaryContent || {} }, this.tertiaryContent)), this.buttonText && (index.h("button", { key: '9d728eb6dcc2cdc2d0b438e79286795835dbf9e6', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText))));
-        return (index.h("div", { key: '44c9677d5c3c75439b9d73d8e60e5744d2ee9be0', class: this.isInteractive
+        const imageContainer = this.imageSource && (index.h("div", { key: '5446a636265cf330a7e67f7539dad7e25077ecda', class: 'imageContainer' }, index.h("img", { key: '59529cce35008eb171f4ee634ed94ff96e716dad', alt: this.imageDescription, class: isLightTheme ? 'imageLight' : 'imageDark', src: this.imageSource, style: styles.image || {} })));
+        const contentContainer = (index.h("div", { key: 'fd052ef1e3dedcf5b1467b6b0760d0be349c1faf', class: 'contentContainer' }, index.h("h2", { key: '1d1eca475651641b34d477ea7e2ea2f3eb7a2c49', class: isLightTheme ? 'headingLight' : 'headingDark', style: styles.heading || {} }, this.headingText), index.h("h3", { key: '9fcf054f634d088b72b67a2675b67a89f651285b', class: isLightTheme ? 'subheadingLight' : 'subheadingDark', style: styles.subheading || {} }, this.subheadingText), index.h("p", { key: '477078081008771a462abb042232b84f1e72ddd5', class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark', style: styles.primaryContent || {} }, this.primaryContent), index.h("div", { key: '716ea0fe1efbd18f0b6313baac80834fbab53001', class: 'secondaryContentContainer' }, index.h("p", { key: '340dad3f568e5cc2b0a1b412b92a335b9afb7a0f', class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark', style: styles.secondaryContent || {} }, this.secondaryContent), index.h("p", { key: 'b0c940aab4b48d4e560aabe7551b3c1a0a4ef3ae', class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark', style: styles.tertiaryContent || {} }, this.tertiaryContent)), this.buttonText && (index.h("button", { key: 'd9a08ff62c8bc7d2b13bb42872e2391290de0712', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText))));
+        return (index.h("div", { key: '310676a0e48c3a3d76559b3e3012db1681a55499', class: this.isInteractive
                 ? isLightTheme
                     ? 'interactiveResultContainerLight'
                     : 'interactiveResultContainerDark'
@@ -218,24 +231,22 @@ const SearchcraftBaseSearchResults = class {
             return (index.h("div", { class: 'emptyState' }, index.h("slot", { name: 'empty-search' })));
         }
         if (!((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data)) {
-            console.warn('No search results data available');
-            return index.h("div", { class: 'emptyState' }, "No results to display.");
+            return;
         }
-        const parsedSearchKeys = utils.parseSearchKeys(this.documentAttributesForDisplay);
+        const parsedSearchKeys = store.parseSearchKeys(this.documentAttributesForDisplay);
         const serializedStyles = typeof this.customStylesForResults === 'string'
             ? this.customStylesForResults
-            : utils.serializeStyles(this.customStylesForResults);
+            : store.serializeStyles(this.customStylesForResults);
         const resultsComponents = (_d = (_c = (_b = this.searchResults) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.hits) === null || _d === void 0 ? void 0 : _d.map((document, index$1) => {
             const { doc: result } = document;
-            const dynamicProperties = utils.extractDynamicProperties(result, parsedSearchKeys);
+            const dynamicProperties = store.extractDynamicProperties(result, parsedSearchKeys);
             if (this.formatTime) {
                 for (const key of parsedSearchKeys) {
                     if (dynamicProperties[key]) {
                         const value = dynamicProperties[key];
-                        // Check if the value is a valid ISO timestamp
                         if (typeof value === 'string' &&
                             !Number.isNaN(Date.parse(value))) {
-                            dynamicProperties[key] = utils.getFormattedTimeFromNow(value);
+                            dynamicProperties[key] = store.getFormattedTimeFromNow(value);
                         }
                     }
                 }
@@ -320,6 +331,15 @@ const SearchcraftClearInputButton = class {
 };
 SearchcraftClearInputButton.style = SearchcraftClearInputButtonStyle0;
 
+const SearchcraftDashIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("svg", { key: '4d0c3ab69a973ec8b1d89f52082e4b98ce17e39d', width: '14', height: '3', viewBox: '0 0 14 3', fill: 'none' }, index.h("title", { key: '99a099dcd6a163ba5b8c1f5b80f9ebfde2152778' }, "Checkbox Dash"), index.h("line", { key: '49f030f69ff1d37139f868ffb94b5f24442dce37', x1: '1.5', y1: '1.5', x2: '12.5', y2: '1.5', stroke: 'white', "stroke-width": '3', "stroke-linecap": 'round' })));
+    }
+};
+
 const searchcraftErrorMessageModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.errorMessageLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#990000}.errorMessageDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#FFB3B3}";
 const SearchcraftErrorMessageStyle0 = searchcraftErrorMessageModuleCss;
 
@@ -331,12 +351,12 @@ const SearchcraftErrorMessage = class {
     }
     render() {
         const errorMessageStyle = this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';
-        return (index.h("p", { key: 'af47ef1acca6beb5ba557f55a6f911fad9184bb7', class: index$1.classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
+        return (index.h("p", { key: '7c26f9a1b2589d57a81f7909c456e712d9b7fe79', class: index$1.classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
     }
 };
 SearchcraftErrorMessage.style = SearchcraftErrorMessageStyle0;
 
-const searchcraftFiltersListModuleCss = ".filtersList{width:100%}.checkboxLabel{align-items:center;color:#292929;display:flex;font-family:\"Source Sans Pro\";font-size:14px;font-weight:600;gap:14px;position:relative;-webkit-font-smoothing:antialiased}.checkboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:#EDEDED;border:1px solid #D9D9D9;cursor:pointer;display:flex;height:24px;justify-content:center;width:24px}.checkboxLabel input[type=checkbox]:checked{background-color:#000;position:relative}.checkboxLabel input[type=checkbox]:checked+.checkContainer{display:block}.remainingFilterListCheckbox{margin-left:16px}.childCheckboxLabel{align-items:center;color:#292929;display:flex;font-family:\"Source Sans Pro\";font-size:14px;font-weight:600;gap:12px;position:relative}.childCheckboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:#EDEDED;border:1px solid #D9D9D9;cursor:pointer;display:flex;height:24px;justify-content:center;position:relative;width:24px;-webkit-font-smoothing:antialiased}.childCheckboxLabel input[type=checkbox]:checked{background-color:#000;position:relative}.childCheckboxLabel input[type=checkbox]:checked+.checkContainer{display:block}.checkContainer{display:none;height:16px;width:16px;position:absolute;top:10px;left:7px}";
+const searchcraftFiltersListModuleCss = ".filtersList{width:100%}.checkboxLabel{align-items:center;color:#292929;display:flex;font-family:\"Source Sans Pro\";font-size:14px;font-weight:600;gap:14px;position:relative;-webkit-font-smoothing:antialiased}.checkboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:#EDEDED;border:1px solid #D9D9D9;cursor:pointer;display:flex;height:24px;justify-content:center;width:24px}.checkboxLabel input[type=checkbox]:checked{background-color:#000;position:relative}.checkboxLabel input[type=checkbox]:checked+.checkContainer{display:block}.checkboxLabel input[type=checkbox]:checked+.dashContainer{display:block}.remainingFilterListCheckbox{margin-left:16px}.childCheckboxLabel{align-items:center;color:#292929;display:flex;font-family:\"Source Sans Pro\";font-size:14px;font-weight:600;gap:12px;position:relative}.childCheckboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:#EDEDED;border:1px solid #D9D9D9;cursor:pointer;display:flex;height:24px;justify-content:center;position:relative;width:24px;-webkit-font-smoothing:antialiased}.childCheckboxLabel input[type=checkbox]:checked{background-color:#000;position:relative}.childCheckboxLabel input[type=checkbox]:checked+.checkContainer{display:block}.childCheckboxLabel input[type=checkbox]:checked+.dashContainer{display:block}.checkContainer{display:none;height:16px;width:16px;position:absolute;top:10px;left:7px}.dashContainer{display:none;height:3px;width:14px;position:absolute;top:5px;left:9px}.loading{align-items:center;display:flex;justify-content:center;margin:100px}";
 const SearchcraftFiltersListStyle0 = searchcraftFiltersListModuleCss;
 
 const SearchcraftFiltersList = class {
@@ -344,104 +364,106 @@ const SearchcraftFiltersList = class {
         index.registerInstance(this, hostRef);
         this.filtersUpdated = index.createEvent(this, "filtersUpdated", 7);
         this.searchStore = store.useSearchcraftStore.getState();
-        this.handleFilterChange = (value, checked) => {
-            if (checked) {
-                this.selectedFilters.add(value);
-            }
-            else {
-                this.selectedFilters.delete(value);
-            }
-            const deduplicatedFilters = this.deduplicatePaths(Array.from(this.selectedFilters));
-            this.filtersUpdated.emit(deduplicatedFilters);
-            this.searchStore.setSelectedFilters(deduplicatedFilters);
-            this.searchStore.search();
+        this.autoSearchFormElement = null;
+        this.handleSearchRequest = () => {
+            this.selectedFilters = [];
+            this.searchStore.setSelectedFilters([]);
+            this.emitFiltersUpdate();
         };
         this.filters = [];
         this.dynamicFilters = [];
-        this.isRequesting = false;
+        this.selectedFilters = [];
         this.query = '';
+        this.isRequesting = false;
         this.resultsCount = 0;
-        this.selectedFilters = new Set();
     }
     connectedCallback() {
         var _a;
         const state = this.searchStore;
-        if ((_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data.facets) {
-            this.populateFiltersFromFacets(state.searchResults.data.facets);
+        const facets = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data.facets;
+        if (facets) {
+            this.populateFiltersFromFacets(facets);
         }
         this.unsubscribe = store.useSearchcraftStore.subscribe((state) => {
-            var _a, _b, _c, _d;
-            if (!state.query || state.query.trim().length === 0) {
-                if (this.selectedFilters.size > 0) {
-                    this.selectedFilters.clear();
-                    this.filtersUpdated.emit([]);
-                    if (this.searchStore.selectedFilters.length > 0) {
-                        this.searchStore.setSelectedFilters([]);
-                    }
-                }
-            }
-            this.query = state.query || '';
+            var _a, _b, _c, _d, _e;
+            const query = (_a = state.query) === null || _a === void 0 ? void 0 : _a.trim();
+            const facets = (_b = state.searchResults) === null || _b === void 0 ? void 0 : _b.data.facets;
+            this.query = query || '';
             this.isRequesting = state.isRequesting;
-            this.resultsCount = ((_c = (_b = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.length) || 0;
-            if ((_d = state.searchResults) === null || _d === void 0 ? void 0 : _d.data.facets) {
-                this.populateFiltersFromFacets(state.searchResults.data.facets);
+            this.resultsCount = ((_e = (_d = (_c = state.searchResults) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.hits) === null || _e === void 0 ? void 0 : _e.length) || 0;
+            if (facets && this.selectedFilters.length === 0) {
+                this.populateFiltersFromFacets(facets);
             }
         });
+        this.autoSearchFormElement = document.querySelector('searchcraft-auto-search-form');
+        if (this.autoSearchFormElement) {
+            this.autoSearchFormElement.addEventListener('querySubmit', this.handleSearchRequest);
+        }
     }
     disconnectedCallback() {
         if (this.unsubscribe) {
             this.unsubscribe();
         }
+        if (this.autoSearchFormElement) {
+            this.autoSearchFormElement.removeEventListener('querySubmit', this.handleSearchRequest);
+        }
     }
     populateFiltersFromFacets(facets) {
         var _a;
-        const newFilters = utils.flattenFacets(((_a = facets[0]) === null || _a === void 0 ? void 0 : _a.section) || []);
-        const filtersMap = new Map();
-        this.dynamicFilters.forEach((filter) => {
-            const key = filter.value.split('/').pop() || '';
-            filtersMap.set(key, filter);
-        });
-        newFilters.forEach((filter) => {
-            const key = filter.value.split('/').pop() || '';
-            const existingFilter = filtersMap.get(key);
-            if (!existingFilter ||
-                filter.value.length < existingFilter.value.length) {
-                filtersMap.set(key, filter);
+        const flattened = store.flattenFacets(((_a = facets[0]) === null || _a === void 0 ? void 0 : _a.section) || []);
+        this.dynamicFilters = flattened.map((filter) => ({
+            label: filter.label,
+            value: filter.value,
+            count: filter.count,
+            children: filter.children || [],
+        }));
+    }
+    handleCheckboxChange(value, isChecked, isParent = false) {
+        var _a;
+        if (isParent) {
+            const parentFilter = this.dynamicFilters.find((filter) => filter.value === value);
+            const childValues = ((_a = parentFilter === null || parentFilter === void 0 ? void 0 : parentFilter.children) === null || _a === void 0 ? void 0 : _a.map((child) => child.value)) || [];
+            if (!isChecked) {
+                // Remove children from selectedFilters when parent is unchecked
+                this.selectedFilters = this.selectedFilters.filter((filter) => filter !== value && !childValues.includes(filter));
             }
-        });
-        this.dynamicFilters = Array.from(filtersMap.values());
-    }
-    deduplicatePaths(filters) {
-        const pathMap = new Map();
-        filters.forEach((path) => {
-            const key = path.split('/').pop() || '';
-            const existingPath = pathMap.get(key);
-            if (!existingPath || path.length < existingPath.length) {
-                pathMap.set(key, path);
+            else {
+                // Add parent filter to selectedFilters
+                this.selectedFilters = [...this.selectedFilters, value];
             }
-        });
-        return Array.from(pathMap.values());
+        }
+        else {
+            // Update selectedFilters for child filters
+            this.selectedFilters = isChecked
+                ? [...this.selectedFilters, value]
+                : this.selectedFilters.filter((filter) => filter !== value);
+        }
+        this.emitFiltersUpdate();
+    }
+    emitFiltersUpdate() {
+        this.filtersUpdated.emit(this.selectedFilters);
+        this.searchStore.setSelectedFilters(this.selectedFilters);
+        this.searchStore.search();
     }
-    formatLabel(label) {
-        return label
-            .replace(/-/g, ' ')
-            .split(' ')
-            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ');
+    formatLabel(label, count) {
+        return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
     }
     render() {
         if (!this.query || this.resultsCount === 0) {
             return null;
         }
-        const filtersToRender = this.dynamicFilters.filter((filter) => !filter.value.includes('/', filter.value.indexOf('/') + 1));
-        return (index.h("div", { class: 'filtersList' }, filtersToRender.map((filter) => {
-            const isChecked = this.selectedFilters.has(filter.value);
-            const children = this.dynamicFilters.filter((child) => child.value.startsWith(`${filter.value}/`) &&
-                child.value !== filter.value);
-            return (index.h("div", { key: filter.value }, index.h("label", { class: 'checkboxLabel' }, index.h("input", { class: 'filterCheckbox', checked: isChecked, onChange: (event) => this.handleFilterChange(filter.value, event.target.checked), type: 'checkbox' }), index.h("div", { class: 'checkContainer' }, index.h("searchcraft-check-icon", null)), this.formatLabel(filter.label)), children.map((child) => {
-                const isChildChecked = this.selectedFilters.has(child.value);
-                return (index.h("label", { class: 'childCheckboxLabel', key: child.value, style: { marginLeft: '20px' } }, index.h("input", { class: 'childFilterCheckbox', checked: isChildChecked, onChange: (event) => this.handleFilterChange(child.value, event.target.checked), type: 'checkbox' }), index.h("div", { class: 'checkContainer' }, index.h("searchcraft-check-icon", null)), this.formatLabel(child.label.split('/').pop() || '')));
-            })));
+        return (index.h("div", { class: 'filtersList' }, this.dynamicFilters.map((filter) => {
+            const isChildSelected = filter.children
+                ? filter.children.some((child) => this.selectedFilters.includes(child.value))
+                : false;
+            return (index.h("div", { key: filter.value, class: 'filterItem' }, index.h("label", { class: 'checkboxLabel' }, index.h("input", { type: 'checkbox', checked: this.selectedFilters.includes(filter.value), onChange: (event) => this.handleCheckboxChange(filter.value, event.target.checked, true) }), isChildSelected ? (index.h("div", { class: 'dashContainer' }, index.h("searchcraft-dash-icon", null))) : (index.h("div", { class: 'checkContainer' }, index.h("searchcraft-check-icon", null))), this.formatLabel(filter.label, filter.count)), filter.children && filter.children.length > 0 && (index.h("div", { class: 'childrenContainer' }, filter.children.map((child) => (index.h("label", { key: child.value, class: 'childCheckboxLabel', style: {
+                    marginLeft: '20px',
+                    display: this.selectedFilters.includes(filter.value)
+                        ? 'flex'
+                        : 'none',
+                } }, index.h("input", { type: 'checkbox', checked: this.selectedFilters.includes(child.value), onChange: (event) => this.handleCheckboxChange(child.value, event.target.checked) }), index.h("div", { class: 'checkContainer' }, index.h("searchcraft-check-icon", null)), this.formatLabel(child.label.includes('/')
+                ? child.label.split('/').pop() || child.label
+                : child.label, child.count))))))));
         })));
     }
 };
@@ -497,11 +519,11 @@ const SearchcraftInput = class {
             : this.isLightTheme
                 ? 'inputLightLTR'
                 : 'inputDarkLTR', 'searchcraft-input');
-        const validatedCustomStyles = utils.parseCustomStyles(this.customStyles);
+        const validatedCustomStyles = store.parseCustomStyles(this.customStyles);
         const placeholderStyle = {
             fontSize: validatedCustomStyles.placeholderFontSize || '16px',
         };
-        return (index.h("div", { key: '3c655e3572de20f333b75f85e45cc957ac0bc006', class: index$1.classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (index.h(index.Fragment, null, index.h("input", { autoComplete: 'off', class: index$1.classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), index.h("style", null, `
+        return (index.h("div", { key: '0eea589d7f78b4ae830b1950ab193f9c72797625', class: index$1.classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (index.h(index.Fragment, null, index.h("input", { autoComplete: 'off', class: index$1.classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), index.h("style", null, `
                 #searchcraft-input-id::placeholder {
                   font-size: ${placeholderStyle.fontSize};
                 }
@@ -727,7 +749,7 @@ const SearchcraftSpinnerDark = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'fbbd8b46026e1c1c83b59efd68a5cecdca7cad59', class: 'spinnerContainer' }, index.h("div", { key: '7fb274ca3ed3d9b69eef7faa77413b1e1fe68ef5', class: 'spinnerDark' })));
+        return (index.h("div", { key: 'be34b9a3ecec05fdc169145a5db5a4f37bbd404b', class: 'spinnerContainer' }, index.h("div", { key: 'b59ffd2fe8dd3ac990003bff3085cb571c08730e', class: 'spinnerDark' })));
     }
 };
 SearchcraftSpinnerDark.style = SearchcraftSpinnerDarkStyle0;
@@ -740,7 +762,7 @@ const SearchcraftSpinnerLight = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '5f8d9dbe616324b466436037581491efff818065', class: 'spinnerContainer' }, index.h("div", { key: '8152d98d48ac5a4a55c49048a385301238b54932', class: 'spinnerLight' })));
+        return (index.h("div", { key: 'a4f73eee03d4d7253c04c47995315bd121e8ded3', class: 'spinnerContainer' }, index.h("div", { key: '53e3486ef7a2fa6029a6107bae2c0655b1608a12', class: 'spinnerLight' })));
     }
 };
 SearchcraftSpinnerLight.style = SearchcraftSpinnerLightStyle0;
@@ -805,6 +827,7 @@ exports.searchcraft_base_search_results = SearchcraftBaseSearchResults;
 exports.searchcraft_check_icon = SearchcraftCheckIcon;
 exports.searchcraft_clear_icon_set = SearchcraftClearIconSet;
 exports.searchcraft_clear_input_button = SearchcraftClearInputButton;
+exports.searchcraft_dash_icon = SearchcraftDashIcon;
 exports.searchcraft_error_message = SearchcraftErrorMessage;
 exports.searchcraft_filters_list = SearchcraftFiltersList;
 exports.searchcraft_input = SearchcraftInput;
@@ -818,4 +841,4 @@ exports.searchcraft_spinner_dark = SearchcraftSpinnerDark;
 exports.searchcraft_spinner_light = SearchcraftSpinnerLight;
 exports.searchcraft_toggle_button = SearchcraftToggleButton;
 
-//# sourceMappingURL=searchcraft-auto-search-form_18.cjs.entry.js.map
+//# sourceMappingURL=searchcraft-auto-search-form_19.cjs.entry.js.map