@searchcraft/javascript-sdk 0.1.8 → 0.2.0

package/dist/esm/{searchcraft-auto-search-form_13.entry.js → searchcraft-auto-search-form_17.entry.js}

@@ -1,32 +1,39 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-e4a4f86d.js';
-import { u as useSearchcraftStore, g } from './store-03dc618f.js';
-import { p as parseCustomStyles, a as parseSearchKeys, s as serializeStyles, e as extractDynamicProperties } from './utils-7bff0c78.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-0ac5bb53.js';
+import { u as useSearchcraftStore, g } from './store-311de204.js';
+import { p as parseCustomStyles, a as parseSearchKeys, s as serializeStyles, e as extractDynamicProperties } from './utils-e2076797.js';
 import { c as classNames } from './index-72ac5051.js';
 
-const searchcraftAutoSearchFormModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.formLTR{text-align:left;width:100%}.formRTL{text-align:right;width:100%}.searchContainer{align-items:center;display:flex;width:100%}";
+const searchcraftAutoSearchFormModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.formLTR{text-align:left;width:100%}.formRTL{text-align:right;width:100%}";
 const SearchcraftAutoSearchFormStyle0 = searchcraftAutoSearchFormModuleCss;
 
 const SearchcraftAutoSearchForm = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.querySubmit = createEvent(this, "querySubmit", 7);
+        this.inputClearedOrNoResults = createEvent(this, "inputClearedOrNoResults", 7);
         this.debounceTimeout = null;
-        this.debounceDelay = 300; // 300ms debounce delay
+        this.debounceDelay = 0;
         this.searchStore = useSearchcraftStore.getState();
         this.handleInputChange = (event) => {
             this.query = event.detail;
+            this.searchStore.setQuery(this.query);
+            this.querySubmit.emit(this.query);
+        };
+        this.handleInputKeyUp = (event) => {
+            const target = event.detail;
+            this.query = target;
+            this.searchStore.setQuery(this.query);
             this.querySubmit.emit(this.query);
-            // Clear the previous debounce timeout
             if (this.debounceTimeout) {
                 clearTimeout(this.debounceTimeout);
             }
-            // Set a new debounce timeout
             this.debounceTimeout = setTimeout(() => {
-                this.runSearch();
+                this.query.trim() !== '' && this.runSearch();
             }, this.debounceDelay);
         };
         this.handleClearInput = () => {
             this.query = '';
+            this.searchStore.setQuery('');
             if (typeof this.clearInput === 'function') {
                 this.clearInput();
             }
@@ -34,22 +41,22 @@ const SearchcraftAutoSearchForm = class {
                 clearTimeout(this.debounceTimeout);
             }
             this.error = false;
-            this.searchResults = '';
+            this.inputClearedOrNoResults.emit();
         };
         this.runSearch = async () => {
             if (this.query.trim() === '') {
                 this.error = true;
-                this.searchResults = '';
+                this.inputClearedOrNoResults.emit();
             }
             else {
                 this.error = false;
                 this.searchStore.setQuery(this.query);
                 try {
                     await this.searchStore.search();
-                    this.searchResults = JSON.stringify(this.searchStore.searchResults);
                 }
                 catch (error) {
                     this.error = true;
+                    this.inputClearedOrNoResults.emit();
                 }
             }
         };
@@ -75,13 +82,14 @@ const SearchcraftAutoSearchForm = class {
         this.error = false;
         this.isRequesting = false;
         this.query = '';
-        this.searchResults = '';
+        this.searchResults = null;
     }
     componentDidLoad() {
         const searchcraft = new g(this.config);
         this.searchStore.initialize(searchcraft, true);
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
             this.isRequesting = state.isRequesting;
+            this.searchResults = Object.assign({}, state.searchResults);
         });
     }
     disconnectedCallback() {
@@ -90,14 +98,18 @@ const SearchcraftAutoSearchForm = class {
         }
     }
     render() {
+        var _a, _b, _c;
         const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';
         const parsedCustomStyles = parseCustomStyles(this.customStylesForInput);
-        return (h("form", { key: '6b735bbdba6e7ff105d176fffa32b9431d5c4e49', class: `${formClass}`, onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: 'c7284dead137677ee7cd6aedac4dbfb38fac8c4c', label: this.labelForInput }), h("div", { key: 'a59294d9b406a1df9beb6264808f6e6a43cedbdd', class: 'searchContainer' }, h("searchcraft-input", { key: 'c1faa2d11c94ec3d4d39456612209e72fd208629', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "is-requesting": this.isRequesting, "input-icon-height": this.inputIconHeight, "input-icon-width": this.inputIconWidth, onClearInput: this.handleClearInput, onSearchInputChange: this.handleInputChange, "placeholder-value": this.placeholderValue, query: this.query, "right-to-left-orientation": this.rightToLeftOrientation })), this.error && (h("searchcraft-error-message", { key: 'b8b1e5b4b212a30f07f3756c8ce33c142e520420', errorMessage: 'Please enter a search query.' }))));
+        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 (h("form", { key: '49950058e612dc1017fb56235affd3b8077b6926', class: `${formClass}`, onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: 'ce2cb4d74c139fc4f010d1ca51739c49a8e9f6c2', label: this.labelForInput }), h("searchcraft-input", { key: '8fb1eee5dca952ba472f03e768b57663528f5c84', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "is-requesting": this.isRequesting, "input-icon-height": this.inputIconHeight, "input-icon-width": this.inputIconWidth, onClearInput: this.handleClearInput, onInputKeyUp: this.handleInputKeyUp, onSearchInputChange: this.handleInputChange, "placeholder-value": this.placeholderValue, query: this.query, "right-to-left-orientation": this.rightToLeftOrientation }), this.error && (h("searchcraft-error-message", { key: 'd1c893186af4cdb927f31b086aa7d027947c1d2c', errorMessage: 'Please enter a search query.' }))));
     }
 };
 SearchcraftAutoSearchForm.style = SearchcraftAutoSearchFormStyle0;
 
-const searchcraftBaseSearchResultModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.interactiveResultContainerLight{background-color:#FAFAFA;align-items:flex-start;border-radius:16px;display:flex;position:relative;flex-direction:column;gap:16px;padding:8px}@media (min-width: 600px){.interactiveResultContainerLight{flex-direction:row}}.interactiveResultContainerDark{background-color:#2E2E2E;align-items:flex-start;border-radius:16px;display:flex;position:relative;flex-direction:column;gap:16px;padding:8px}@media (min-width: 600px){.interactiveResultContainerDark{flex-direction:row}}.resultContainer{align-items:flex-start;display:flex;flex-direction:column;gap:16px}@media (min-width: 600px){.resultContainer{flex-direction:row}}.interactiveIconLarge{display:inline-block;position:absolute;right:5px;top:8px}@media (max-width: 600px){.interactiveIconLarge{display:none}}.interactiveIconSmall{position:absolute;right:5px;top:-2px;display:inline-block}@media (min-width: 600px){.interactiveIconSmall{display:none}}.imageContainer{max-height:540px;max-width:100%}@media (min-width: 600px){.imageContainer{max-height:175px}}.contentContainer{max-height:100%;max-width:100%}@media (min-width: 600px){.contentContainer{max-width:50%}}.imageLight{aspect-ratio:2/1;border-radius:8px;max-height:100%;max-width:100%;border:1px solid #D9D9D9}.imageDark{aspect-ratio:2/1;border-radius:8px;max-height:100%;max-width:100%;border:1px solid #333}.headingLight{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0px;position:relative;color:#292929}.headingDark{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0px;position:relative;color:#FFF}.subheadingLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#737373}.subheadingDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#BFBFBF}.primaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.primaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.secondaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.secondaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.tertiaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.tertiaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}";
+const searchcraftBaseSearchResultModuleCss = "@charset \"UTF-8\";:root{--font-stack:Helvetica, Arial, sans-serif}.interactiveResultContainerLight{background-color:#FAFAFA;align-items:flex-start;border-radius:16px;display:flex;position:relative;flex-direction:column;gap:16px;padding:8px}@media (min-width: 600px){.interactiveResultContainerLight{flex-direction:row}}.interactiveResultContainerDark{background-color:#2E2E2E;align-items:flex-start;border-radius:16px;display:flex;position:relative;flex-direction:column;gap:16px;padding:8px}@media (min-width: 600px){.interactiveResultContainerDark{flex-direction:row}}.resultContainer{align-items:flex-start;display:flex;flex-direction:column;gap:16px}@media (min-width: 600px){.resultContainer{flex-direction:row}}.interactiveIconLarge{display:inline-block;position:absolute;right:5px;top:8px}@media (max-width: 600px){.interactiveIconLarge{display:none}}.interactiveIconSmall{position:absolute;right:5px;top:-2px;display:inline-block}@media (min-width: 600px){.interactiveIconSmall{display:none}}.imageContainer{max-width:100%}.contentContainer{max-height:100%;max-width:100%}@media (min-width: 600px){.contentContainer{max-width:50%}}.secondaryContentContainer{display:flex}.imageLight{aspect-ratio:2/1;border-radius:8px;max-height:100%;max-width:100%;border:1px solid #D9D9D9}.imageDark{aspect-ratio:2/1;border-radius:8px;max-height:100%;max-width:100%;border:1px solid #333}.headingLight{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0px;position:relative;color:#292929}.headingDark{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0px;position:relative;color:#FFF}.subheadingLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#737373}.subheadingDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#BFBFBF}.primaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.primaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.secondaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.secondaryContentLight::after{content:\"•\";color:#404040;font-size:1em;margin-left:5px;margin-right:5px}.secondaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.tertiaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.tertiaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}";
 const SearchcraftBaseSearchResultStyle0 = searchcraftBaseSearchResultModuleCss;
 
 const SearchcraftBaseSearchResult = class {
@@ -141,16 +153,16 @@ const SearchcraftBaseSearchResult = class {
     render() {
         const isLightTheme = this.themeMode === 'light';
         const styles = this.parseStyles();
-        return (h("div", { key: 'e16bae2d337d064e057645cfb0ebf52346229b83', class: this.isInteractive
+        return (h("div", { key: '91cfc671b0b99082915df3eaafa053a9a7f77929', class: this.isInteractive
                 ? isLightTheme
                     ? 'interactiveResultContainerLight'
                     : 'interactiveResultContainerDark'
-                : 'resultContainer', style: styles.container || {}, tabindex: '0', onClick: this.handleContainerClick, onKeyDown: this.keyDownCallback }, h("div", { key: 'f2154ce85febbe54956a7f28292b13113e3048dd', class: 'imageContainer' }, h("img", { key: '8063fa3b88ba56b9cba63ded99967c8097b8b185', alt: this.imageDescription, src: this.imageSource, style: styles.image || {}, class: isLightTheme ? 'imageLight' : 'imageDark' })), h("div", { key: 'e04a38165dc98b0d72f215e4252f7065db3664d6', class: 'contentContainer' }, h("h2", { key: '33d2d3483d7c0f4e1ae7e15ba5895a8b15b45a34', style: styles.heading || {}, class: isLightTheme ? 'headingLight' : 'headingDark' }, this.headingText), h("h3", { key: '9587d0acea25ede251eba3e79dba932a5565f51a', style: styles.subheading || {}, class: isLightTheme ? 'subheadingLight' : 'subheadingDark' }, this.subheadingText), h("p", { key: '74f55a23963d5ddc8753d68b164587865da2dd13', style: styles.primaryContent || {}, class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark' }, this.primaryContent), h("div", { key: 'db4e498b08c7075b276e90d8ed233dd48992ecdd' }, h("p", { key: 'c09d3164a15452c5fbfa23a54028f2080dd56550', style: styles.secondaryContent || {}, class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark' }, this.secondaryContent), h("p", { key: 'ae78c4f53d9b12d62cad6b408aad5caf103303db', style: styles.tertiaryContent || {}, class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark' }, this.tertiaryContent)), this.buttonText && (h("button", { key: '3ea036c680f3970e9d6f1b00b3505f11e338922c', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText)))));
+                : 'resultContainer', style: styles.container || {}, tabindex: '0', onClick: this.handleContainerClick, onKeyDown: this.keyDownCallback }, h("div", { key: 'ccda236ef60aee285472155889c5490c69a86415', class: 'imageContainer' }, h("img", { key: 'e55d743952e2997d91f6486436e3a7955ffc1dcc', alt: this.imageDescription, src: this.imageSource, style: styles.image || {}, class: isLightTheme ? 'imageLight' : 'imageDark' })), h("div", { key: 'b0e831c0c7bfef46b8b6da4e84536adf3ebd7158', class: 'contentContainer' }, h("h2", { key: '54137612623a39d711f4e3c888bf2015b6fb9500', style: styles.heading || {}, class: isLightTheme ? 'headingLight' : 'headingDark' }, this.headingText), h("h3", { key: 'de46df990be3d0b5d2134d272e1766e911ab094a', style: styles.subheading || {}, class: isLightTheme ? 'subheadingLight' : 'subheadingDark' }, this.subheadingText), h("p", { key: 'd9e7656bc739b0dd2267f86ac51b17d9ca16da6a', style: styles.primaryContent || {}, class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark' }, this.primaryContent), h("div", { key: 'd05813b3da29b8b21c2e370db9c0cbc7b48b9556', class: 'secondaryContentContainer' }, h("p", { key: 'e8d2ede937705a5bd88927779ee24e35ba2efbd8', style: styles.secondaryContent || {}, class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark' }, this.secondaryContent), h("p", { key: '2f9b9f603d55bcefe8347675cb31f705b1f7a0e8', style: styles.tertiaryContent || {}, class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark' }, this.tertiaryContent)), this.buttonText && (h("button", { key: '58724046c9704974cb3ae1c34335ebb7131b91ab', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText)))));
     }
 };
 SearchcraftBaseSearchResult.style = SearchcraftBaseSearchResultStyle0;
 
-const searchcraftBaseSearchResultsModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.resultsContainer{display:flex;flex-direction:column;justify-content:center;margin:100px 20px}.resultsContainer>p{align-self:center}.resultsContainer>div{margin-bottom:20px}.resultsContainer>div img{height:300px;width:200px}.adSection{align-items:center;border:1px solid #DCDDDE;display:flex;flex-direction:column;font-size:16px;justify-content:center;margin:auto;min-height:150px;text-align:center;width:100%}.adSection p{margin-top:5px}.emptyState{text-align:center}";
+const searchcraftBaseSearchResultsModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.resultsContainer{display:flex;flex-direction:column;justify-content:center;margin:16px 0}.resultsContainer>p{align-self:center}.resultsContainer>div{margin-bottom:20px}.resultsContainer>div img{height:300px;width:200px}.adSection{align-items:center;background-color:#F1F1F1;border:1px solid #DCDDDE;border-radius:16px;display:flex;flex-direction:column;font-size:16px;justify-content:center;margin:auto;min-height:150px;text-align:center;width:100%}.adSection p{margin-top:5px}.emptyState{width:100%;text-align:center}.errorMessageContainer{text-align:center}";
 const SearchcraftBaseSearchResultsStyle0 = searchcraftBaseSearchResultsModuleCss;
 
 const SearchcraftBaseSearchResults = class {
@@ -158,19 +170,28 @@ const SearchcraftBaseSearchResults = class {
         registerInstance(this, hostRef);
         this.query = '';
         this.searchResults = null;
-        this.searchKeys = '';
+        this.hasSearched = false;
+        this.documentAttributesForDisplay = '';
         this.customStylesForResults = {};
         this.placeAdAtStart = true;
         this.placeAdAtEnd = false;
         this.adInterval = 4;
         this.formatTime = true;
+        this.fallbackElement = null;
     }
     componentDidLoad() {
-        if (!this.searchKeys || this.searchKeys.length === 0) {
-            console.warn('No searchKeys provided; using empty keys array.');
-            this.searchKeys = '';
+        if (!this.documentAttributesForDisplay ||
+            this.documentAttributesForDisplay.length === 0) {
+            console.warn('No document attributes provided; using empty keys array.');
+            this.documentAttributesForDisplay = '';
         }
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            if (state.query.length > 0) {
+                this.hasSearched = true;
+            }
+            else {
+                this.hasSearched = false;
+            }
             this.searchResults = Object.assign({}, state.searchResults);
             this.query = state.query;
         });
@@ -204,11 +225,14 @@ const SearchcraftBaseSearchResults = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
+        if (!this.hasSearched) {
+            return (h("div", { class: 'emptyState' }, 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 h("div", { class: 'emptyState' }, "No results to display.");
         }
-        const parsedSearchKeys = parseSearchKeys(this.searchKeys);
+        const parsedSearchKeys = parseSearchKeys(this.documentAttributesForDisplay);
         const serializedStyles = typeof this.customStylesForResults === 'string'
             ? this.customStylesForResults
             : serializeStyles(this.customStylesForResults);
@@ -249,7 +273,7 @@ const SearchcraftBaseSearchResults = class {
             finalComponents.push(h("div", { key: 'ad-section-end', class: 'adSection' }, h("span", null, "##"), h("p", null, " Ad Impressions")));
         }
         return (h("div", { class: 'resultsContainer' }, finalComponents, this.query.length > 0 &&
-            ((_g = (_f = (_e = this.searchResults) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.hits) === null || _g === void 0 ? void 0 : _g.length) === 0 && (h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` }))));
+            ((_g = (_f = (_e = this.searchResults) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.hits) === null || _g === void 0 ? void 0 : _g.length) === 0 && (h("div", { class: 'errorMessageContainer' }, h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` })))));
     }
 };
 SearchcraftBaseSearchResults.style = SearchcraftBaseSearchResultsStyle0;
@@ -275,7 +299,7 @@ const SearchcraftClearIconSet = class {
     }
 };
 
-const searchcraftClearInputButtonModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputClearButtonLTR{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;padding:0;position:absolute;right:25px;top:50%;transform:translateY(-50%);width:20px}.inputClearButtonRTL{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;left:25px;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:20px}";
+const searchcraftClearInputButtonModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputClearButtonLTR{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;padding:0;position:absolute;right:0;top:50%;transform:translateY(-50%);width:20px}.inputClearButtonRTL{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;left:0px;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:20px}";
 const SearchcraftClearInputButtonStyle0 = searchcraftClearInputButtonModuleCss;
 
 const SearchcraftClearInputButton = class {
@@ -311,11 +335,104 @@ const SearchcraftErrorMessage = class {
     }
     render() {
         const errorMessageStyle = this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';
-        return (h("p", { key: 'f520ac38f2f42e9780454aef5e25576095ae5ee9', class: classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
+        return (h("p", { key: '544903d700810ed5d6efdefedab646cafed2376d', class: classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
     }
 };
 SearchcraftErrorMessage.style = SearchcraftErrorMessageStyle0;
 
+const searchcraftFiltersListModuleCss = "@charset \"UTF-8\";.filtersList{width:100%}.checkboxLabel{align-items:center;color:#292929;display:flex;font-family:\"Source Sans Pro\";font-size:14px;font-weight:600;gap:14px}.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}.checkboxLabel input[type=checkbox]:checked::before{color:#fff;content:\"✔\"}.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}.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;width:24px}.childCheckboxLabel input[type=checkbox]:checked{background-color:#000}.childCheckboxLabel input[type=checkbox]:checked::before{color:#fff;content:\"✔\"}";
+const SearchcraftFiltersListStyle0 = searchcraftFiltersListModuleCss;
+
+const SearchcraftFiltersList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.filtersUpdated = createEvent(this, "filtersUpdated", 7);
+        this.searchStore = useSearchcraftStore.getState();
+        this.handleFilterChange = (value, checked) => {
+            if (checked) {
+                this.selectedFilters.add(value);
+            }
+            else {
+                this.selectedFilters.delete(value);
+            }
+            const selectedFiltersArray = Array.from(this.selectedFilters);
+            this.filtersUpdated.emit(selectedFiltersArray);
+            this.searchStore.setSelectedFilters(selectedFiltersArray);
+            this.searchStore.search();
+        };
+        this.filters = [];
+        this.dynamicFilters = [];
+        this.initialFilters = [];
+        this.isRequesting = false;
+        this.selectedFilters = new Set();
+        this.originalFilterCounts = {};
+        this.query = '';
+        this.resultsCount = 0;
+    }
+    connectedCallback() {
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            var _a, _b, _c, _d;
+            this.isRequesting = state.isRequesting;
+            this.query = state.query || '';
+            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;
+            const facets = (_d = state.searchResults) === null || _d === void 0 ? void 0 : _d.data.facets;
+            if (facets) {
+                this.populateFiltersFromFacets(facets);
+            }
+        });
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    populateFiltersFromFacets(facets) {
+        var _a;
+        const newFilters = Object.entries(((_a = facets.section) === null || _a === void 0 ? void 0 : _a.counts) || {}).map(([key, count]) => {
+            const filterValue = key;
+            this.originalFilterCounts[filterValue] = `${count}`;
+            return {
+                label: `${key.replace(/^\//, '')} (${count})`,
+                value: filterValue,
+            };
+        });
+        // Update dynamic filters while preserving the initial filters
+        const updatedFilters = [
+            ...this.initialFilters,
+            ...newFilters.filter((filter) => !this.initialFilters.some((initial) => initial.value === filter.value)),
+        ];
+        this.dynamicFilters = updatedFilters;
+        // Store the initial filters only once
+        if (this.initialFilters.length === 0) {
+            this.initialFilters = [...updatedFilters];
+        }
+    }
+    formatLabel(label) {
+        return label
+            .replace(/-/g, ' ') // Replace dashes with spaces
+            .split(' ') // Split words
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize the first letter
+            .join(' '); // Join words back into a single string
+    }
+    render() {
+        if (!this.query || this.resultsCount === 0) {
+            return null;
+        }
+        const filtersToRender = this.initialFilters.map((initialFilter) => {
+            const isChecked = this.selectedFilters.has(initialFilter.value);
+            const dynamicChildren = this.dynamicFilters.filter((dynamicFilter) => dynamicFilter.value.startsWith(initialFilter.value) &&
+                dynamicFilter.value !== initialFilter.value);
+            return Object.assign(Object.assign({}, initialFilter), { isChecked, children: dynamicChildren });
+        });
+        return (h("div", { class: 'filtersList' }, filtersToRender.map((filter) => (h("div", { key: filter.value }, h("label", { class: 'checkboxLabel' }, h("input", { class: 'filterCheckbox', checked: filter.isChecked, onChange: (event) => this.handleFilterChange(filter.value, event.target.checked), type: 'checkbox', value: filter.value }), this.formatLabel(filter.label)), filter.isChecked &&
+            filter.children.map((childFilter) => {
+                const childLabel = childFilter.label.split('/').pop(); // Get only the part after the last '/'
+                return (h("label", { class: 'childCheckboxLabel', key: childFilter.value, style: { marginLeft: '20px' } }, h("input", { class: 'childFilterCheckbox', checked: this.selectedFilters.has(childFilter.value), onChange: (event) => this.handleFilterChange(childFilter.value, event.target.checked), type: 'checkbox', value: childFilter.value }), this.formatLabel(childLabel || '')));
+            }))))));
+    }
+};
+SearchcraftFiltersList.style = SearchcraftFiltersListStyle0;
+
 const searchcraftInputModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputContainerLTR{position:relative;width:100%}.inputContainerRTL{position:relative;width:100%;margin-left:8px}.inputLightLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;margin-right:8px;padding-left:36px;padding-right:16px}.inputLightLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputLightLTR::placeholder{color:#737373}.inputLightLTR:focus{outline:2px solid #000}.inputDarkLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;margin-right:8px;padding-left:36px;padding-right:16px}.inputDarkLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputDarkLTR::placeholder{color:#BFBFBF}.inputDarkLTR:focus{outline:2px solid #FFF}.inputErrorLightLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;outline:2px solid #c00;margin-right:8px;padding-left:36px;padding-right:16px}.inputErrorLightLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorLightLTR::placeholder{color:#737373}.inputErrorLightLTR:focus{outline:2px solid #000}.inputErrorLightLTR:focus-visible{outline:2px solid #c00}.inputErrorDarkLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;outline:2px solid #FFB3B3;margin-right:8px;padding-left:36px;padding-right:16px}.inputErrorDarkLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorDarkLTR::placeholder{color:#BFBFBF}.inputErrorDarkLTR:focus{outline:2px solid #FFF}.inputErrorDarkLTR:focus-visible{outline:2px solid #FFB3B3}.inputLightRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputLightRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputLightRTL::placeholder{color:#737373}.inputLightRTL:focus{outline:2px solid #000}.inputDarkRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputDarkRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputDarkRTL::placeholder{color:#BFBFBF}.inputDarkRTL:focus{outline:2px solid #FFF}.inputErrorLightRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;outline:2px solid #c00;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputErrorLightRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorLightRTL::placeholder{color:#737373}.inputErrorLightRTL:focus{outline:2px solid #000}.inputErrorLightRTL:focus-visible{outline:2px solid #c00}.inputErrorDarkRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;outline:2px solid #FFB3B3;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputErrorDarkRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorDarkRTL::placeholder{color:#BFBFBF}.inputErrorDarkRTL:focus{outline:2px solid #FFF}.inputErrorDarkRTL:focus-visible{outline:2px solid #FFB3B3}.inputWrapper{align-items:center;display:flex;position:relative;width:100%}";
 const SearchcraftInputStyle0 = searchcraftInputModuleCss;
 
@@ -324,6 +441,7 @@ const SearchcraftInput = class {
         registerInstance(this, hostRef);
         this.clearInput = createEvent(this, "clearInput", 7);
         this.searchInputChange = createEvent(this, "searchInputChange", 7);
+        this.inputKeyUp = createEvent(this, "inputKeyUp", 7);
         this.customStyles = {};
         this.error = false;
         this.formClassName = '';
@@ -345,6 +463,10 @@ const SearchcraftInput = class {
         const input = event.target;
         this.searchInputChange.emit(input.value);
     }
+    handleInputKeyUp(event) {
+        const input = event.target;
+        this.inputKeyUp.emit(input.value);
+    }
     handleClearInput() {
         if (this.clearInput) {
             this.clearInput.emit();
@@ -365,11 +487,11 @@ const SearchcraftInput = class {
         const placeholderStyle = {
             fontSize: validatedCustomStyles.placeholderFontSize || '16px',
         };
-        return (h("div", { key: '41f29f98e95d5811e81dd885cd282cd8f50cb776', class: classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (h(Fragment, null, h("input", { class: classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), h("style", null, `
+        return (h("div", { key: 'ca2698b808ef606d890817f6b8c133503663570e', class: classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (h(Fragment, null, h("input", { autoComplete: 'off', class: 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 }), h("style", null, `
                 #searchcraft-input-id::placeholder {
                   font-size: ${placeholderStyle.fontSize};
                 }
-              `), this.inputCaptionValue && (h("searchcraft-input-caption", { inputCaptionClassName: this.inputCaptionClassName, inputCaptionValue: this.inputCaptionValue, rightToLeftOrientation: this.rightToLeftOrientation })), this.query.length > 0 && (h("searchcraft-clear-input-button", { isRequesting: this.isRequesting, onClearInput: this.handleClearInput, rightToLeftOrientation: this.rightToLeftOrientation })), h("searchcraft-input-icon", { error: this.error, height: this.inputIconHeight, rightToLeftOrientation: this.rightToLeftOrientation, width: this.inputIconWidth }))) : (h("div", { class: 'inputWrapper' }, h("searchcraft-input-icon", { error: this.error, height: this.inputIconHeight, rightToLeftOrientation: this.rightToLeftOrientation, width: this.inputIconWidth }), h("input", { class: classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), h("style", null, `
+              `), this.inputCaptionValue && (h("searchcraft-input-caption", { inputCaptionClassName: this.inputCaptionClassName, inputCaptionValue: this.inputCaptionValue, rightToLeftOrientation: this.rightToLeftOrientation })), this.query.length > 0 && (h("searchcraft-clear-input-button", { isRequesting: this.isRequesting, onClearInput: this.handleClearInput, rightToLeftOrientation: this.rightToLeftOrientation })), h("searchcraft-input-icon", { error: this.error, height: this.inputIconHeight, rightToLeftOrientation: this.rightToLeftOrientation, width: this.inputIconWidth }))) : (h(Fragment, null, h("searchcraft-input-icon", { error: this.error, height: this.inputIconHeight, rightToLeftOrientation: this.rightToLeftOrientation, width: this.inputIconWidth }), h("input", { autoComplete: 'off', class: 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 }), h("style", null, `
                 #searchcraft-input-id::placeholder {
                   font-size: ${placeholderStyle.fontSize};
                 }
@@ -456,6 +578,40 @@ const SearchcraftInputLabel = class {
 };
 SearchcraftInputLabel.style = SearchcraftInputLabelStyle0;
 
+const searchcraftResultsInfoModuleCss = ".container{border-bottom:1px solid #D9D9D9;display:flex;justify-content:flex-start;width:100%}.resultsInfo{color:#292929;font-family:\"Brygada 1918\";font-size:18px;font-weight:600;line-height:20px;margin:0;margin-bottom:8px}";
+const SearchcraftResultsInfoStyle0 = searchcraftResultsInfoModuleCss;
+
+const SearchcraftResultsInfo = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isRequesting = false;
+        this.resultsCount = 0;
+        this.responseTime = '';
+        this.query = '';
+    }
+    connectedCallback() {
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            var _a, _b, _c, _d;
+            this.isRequesting = state.isRequesting;
+            this.resultsCount = ((_b = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.count) || 0;
+            this.responseTime = ((((_d = (_c = state.searchResults) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.time_taken) || 0) * 1000).toFixed(2);
+            this.query = state.query || ''; // Update query from store
+        });
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    render() {
+        if (!this.query || this.resultsCount === 0) {
+            return null;
+        }
+        return (h("div", { class: 'container' }, h("p", { class: 'resultsInfo' }, this.resultsCount, " results found in ", this.responseTime, "ms")));
+    }
+};
+SearchcraftResultsInfo.style = SearchcraftResultsInfoStyle0;
+
 const SearchcraftSearchIconSet = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -480,6 +636,69 @@ const SearchcraftSearchIconSet = class {
     }
 };
 
+const searchcraftSliderModuleCss = ".slider-container{display:flex;flex-direction:column;gap:10px;font-family:Arial, sans-serif;align-items:center}label{font-size:14px;font-weight:bold;margin-bottom:10px}.range-container{display:flex;width:100%;align-items:center}.range-slider{width:100%;height:4px;background:#ddd;border-radius:2px;outline:none;margin:0 -1px;position:relative}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background-color:#FFF;border-radius:50%;border:1px solid #E6E6E6;cursor:pointer;position:relative}.range-slider::-moz-range-thumb{width:20px;height:20px;background-color:#FFF;border-radius:50%;border:1px solid #E6E6E6;cursor:pointer}.range-slider:before{content:\"\";position:absolute;height:4px;background-color:#FFF;border-radius:2px;left:0;right:0;z-index:-1}.year-labels{display:flex;justify-content:space-between;width:100%;margin-top:10px;font-size:15px;font-weight:600;font-family:\"Source Sans Pro\";color:#666}.year-label{min-width:30px;text-align:center}";
+const SearchcraftSliderStyle0 = searchcraftSliderModuleCss;
+
+const SearchcraftSlider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.searchStore = useSearchcraftStore.getState();
+        this.updateYears = async () => {
+            this.searchStore.setYearsRange([this.startYear, this.endYear]);
+            try {
+                if (typeof this.query === 'string' && this.query.trim() !== '') {
+                    await this.searchStore.search();
+                }
+                else {
+                    console.warn('Query is missing or empty, skipping search request.');
+                }
+            }
+            catch (error) {
+                console.error('Search failed:', error);
+            }
+        };
+        this.handleStartYearChange = (event) => {
+            const value = Number.parseInt(event.target.value, 10);
+            this.startYear = Math.min(value, this.endYear);
+            this.updateYears();
+        };
+        this.handleEndYearChange = (event) => {
+            const value = Number.parseInt(event.target.value, 10);
+            this.endYear = Math.max(value, this.startYear);
+            this.updateYears();
+        };
+        this.minYear = 2000;
+        this.maxYear = new Date().getFullYear();
+        this.endYear = this.maxYear;
+        this.query = '';
+        this.startYear = this.minYear;
+        this.hasSearched = false;
+        this.resultsCount = 0;
+    }
+    componentDidLoad() {
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            var _a, _b, _c;
+            if (state.query.length > 0) {
+                this.hasSearched = true;
+                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;
+            }
+            this.query = state.query;
+        });
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    render() {
+        if (!this.query || this.resultsCount === 0) {
+            return null;
+        }
+        return (h("div", { class: 'slider-container' }, h("div", { class: 'range-container' }, h("input", { class: 'range-slider', max: this.maxYear, min: this.minYear, onInput: this.handleStartYearChange, step: '1', type: 'range', value: this.startYear }), h("input", { class: 'range-slider', max: this.maxYear, min: this.minYear, onInput: this.handleEndYearChange, step: '1', type: 'range', value: this.endYear })), h("div", { class: 'year-labels' }, h("span", { class: 'year-label' }, this.startYear), h("span", { class: 'year-label' }, this.endYear))));
+    }
+};
+SearchcraftSlider.style = SearchcraftSliderStyle0;
+
 const searchcraftSpinnerDarkModuleCss = ".spinnerContainer{background-color:transparent;height:20px;width:20px}.spinnerDark{height:100%;width:100%;background:conic-gradient(#000 50%, #FFFFFF);clip-path:circle(50%);mask-image:radial-gradient(circle at center, rgba(0, 0, 0, 0) 6.6666666667px, rgb(0, 0, 0) 6.6666666667px);animation:spinning 1s linear infinite}.spinnerLight{height:100%;width:100%;background:conic-gradient(#737373 50%, #FFFFFF);clip-path:circle(50%);mask-image:radial-gradient(circle at center, rgba(0, 0, 0, 0) 6.6666666667px, rgb(0, 0, 0) 6.6666666667px);animation:spinning 1s linear infinite}@keyframes spinning{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}";
 const SearchcraftSpinnerDarkStyle0 = searchcraftSpinnerDarkModuleCss;
 
@@ -488,7 +707,7 @@ const SearchcraftSpinnerDark = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '76685b09609a42adbff41ee43ecb4b4e161d4598', class: 'spinnerContainer' }, h("div", { key: '7e7a01010f21e5b95358b7385d41a45e90a5b3bd', class: 'spinnerDark' })));
+        return (h("div", { key: '60b629930c2e2795236f6768b40c95ce9390e882', class: 'spinnerContainer' }, h("div", { key: 'bfef3329f2e81ecf6538738ac0213da6259dd1c3', class: 'spinnerDark' })));
     }
 };
 SearchcraftSpinnerDark.style = SearchcraftSpinnerDarkStyle0;
@@ -501,11 +720,65 @@ const SearchcraftSpinnerLight = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '7bd4d997ef43d35ee60033a27b6bc46c6d693c33', class: 'spinnerContainer' }, h("div", { key: 'f8cc9948aa6a264719ffc54d25a10af27dc0f802', class: 'spinnerLight' })));
+        return (h("div", { key: 'ad5224c97faf7e329d2a8904488c17dfd7414b9e', class: 'spinnerContainer' }, h("div", { key: '6336ce7737af65eedac46ee290b20291ce5b6096', class: 'spinnerLight' })));
     }
 };
 SearchcraftSpinnerLight.style = SearchcraftSpinnerLightStyle0;
 
-export { SearchcraftAutoSearchForm as searchcraft_auto_search_form, SearchcraftBaseSearchResult as searchcraft_base_search_result, SearchcraftBaseSearchResults as searchcraft_base_search_results, SearchcraftClearIconSet as searchcraft_clear_icon_set, SearchcraftClearInputButton as searchcraft_clear_input_button, SearchcraftErrorMessage as searchcraft_error_message, SearchcraftInput as searchcraft_input, SearchcraftInputCaption as searchcraft_input_caption, SearchcraftInputIcon as searchcraft_input_icon, SearchcraftInputLabel as searchcraft_input_label, SearchcraftSearchIconSet as searchcraft_search_icon_set, SearchcraftSpinnerDark as searchcraft_spinner_dark, SearchcraftSpinnerLight as searchcraft_spinner_light };
+const searchcraftToggleButtonModuleCss = ".toggle-wrapper{box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05);margin-left:10px;border:none;border-radius:16px;width:44px;height:26px;background:#ddd;position:relative;cursor:pointer}.toggle-wrapper.active{box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05);background:#007DB3}.toggle-wrapper .toggle-switch{width:18px;height:18px;background:#fff;border-radius:50%;position:absolute;top:calc(50% - 9px);left:4px;transition:transform 0.3s ease}.toggle-wrapper .toggle-switch.active{transform:translateX(16px)}";
+const SearchcraftToggleButtonStyle0 = searchcraftToggleButtonModuleCss;
+
+const SearchcraftToggleButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.searchStore = useSearchcraftStore.getState();
+        this.handleToggle = async () => {
+            this.isActive = !this.isActive;
+            if (this.type === 'mode') {
+                const mode = this.isActive ? 'normal' : 'fuzzy';
+                this.searchStore.setSearchParams({
+                    mode,
+                });
+            }
+            else if (this.type === 'sort') {
+                const sort = this.isActive ? 'desc' : 'asc';
+                this.searchStore.setSearchParams({
+                    sort,
+                });
+            }
+            try {
+                await this.searchStore.search();
+            }
+            catch (error) {
+                console.error('Search failed:', error);
+            }
+        };
+        this.type = 'mode';
+        this.isActive = false;
+        this.query = '';
+        this.resultsCount = 0;
+    }
+    componentDidLoad() {
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            var _a, _b, _c;
+            this.query = state.query || '';
+            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;
+        });
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    render() {
+        if (!this.query || this.resultsCount === 0) {
+            return null;
+        }
+        return (h("button", { class: `toggle-wrapper ${this.isActive ? 'active' : ''}`, onClick: this.handleToggle, type: 'button' }, h("div", { class: `toggle-switch ${this.isActive ? 'active' : ''}` })));
+    }
+};
+SearchcraftToggleButton.style = SearchcraftToggleButtonStyle0;
+
+export { SearchcraftAutoSearchForm as searchcraft_auto_search_form, SearchcraftBaseSearchResult as searchcraft_base_search_result, SearchcraftBaseSearchResults as searchcraft_base_search_results, SearchcraftClearIconSet as searchcraft_clear_icon_set, SearchcraftClearInputButton as searchcraft_clear_input_button, SearchcraftErrorMessage as searchcraft_error_message, SearchcraftFiltersList as searchcraft_filters_list, SearchcraftInput as searchcraft_input, SearchcraftInputCaption as searchcraft_input_caption, SearchcraftInputIcon as searchcraft_input_icon, SearchcraftInputLabel as searchcraft_input_label, SearchcraftResultsInfo as searchcraft_results_info, SearchcraftSearchIconSet as searchcraft_search_icon_set, SearchcraftSlider as searchcraft_slider, SearchcraftSpinnerDark as searchcraft_spinner_dark, SearchcraftSpinnerLight as searchcraft_spinner_light, SearchcraftToggleButton as searchcraft_toggle_button };
 
-//# sourceMappingURL=searchcraft-auto-search-form_13.entry.js.map
+//# sourceMappingURL=searchcraft-auto-search-form_17.entry.js.map