@searchcraft/javascript-sdk 0.2.3 → 0.2.5

package/dist/esm/searchcraft-auto-search-form_17.entry.js

@@ -0,0 +1,789 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-0ac5bb53.js';
+import { u as useSearchcraftStore, g } from './store-9e0b0710.js';
+import { p as parseCustomStyles, a as parseSearchKeys, s as serializeStyles, e as extractDynamicProperties, g as getFormattedTimeFromNow, f as flattenFacets } from './utils-a3373179.js';
+import { c as classNames } from './index-72ac5051.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%}";
+const SearchcraftAutoSearchFormStyle0 = searchcraftAutoSearchFormModuleCss;
+
+const SearchcraftAutoSearchForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.inputClearedOrNoResults = createEvent(this, "inputClearedOrNoResults", 7);
+        this.querySubmit = createEvent(this, "querySubmit", 7);
+        this.debounceTimeout = null;
+        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);
+            if (this.debounceTimeout) {
+                clearTimeout(this.debounceTimeout);
+            }
+            this.debounceTimeout = setTimeout(() => {
+                this.query.trim() !== '' && this.runSearch();
+            }, this.debounceDelay);
+        };
+        this.handleClearInput = () => {
+            this.query = '';
+            this.searchStore.setQuery('');
+            if (typeof this.clearInput === 'function') {
+                this.clearInput();
+            }
+            if (this.debounceTimeout) {
+                clearTimeout(this.debounceTimeout);
+            }
+            this.error = false;
+            this.inputClearedOrNoResults.emit();
+        };
+        this.runSearch = async () => {
+            if (this.query.trim() === '') {
+                this.error = true;
+                this.inputClearedOrNoResults.emit();
+            }
+            else {
+                this.error = false;
+                this.searchStore.setQuery(this.query);
+                try {
+                    await this.searchStore.search();
+                }
+                catch (error) {
+                    this.error = true;
+                    this.inputClearedOrNoResults.emit();
+                }
+            }
+        };
+        this.handleFormSubmit = async (event) => {
+            event.preventDefault();
+            await this.runSearch();
+        };
+        this.autoSearchFormClass = '';
+        this.clearInput = () => { };
+        this.config = {
+            apiKey: '',
+            endpointURL: '',
+            index: [],
+        };
+        this.customStylesForInput = {};
+        this.inputCaptionValue = '';
+        this.inputIconHeight = 20;
+        this.inputIconWidth = 20;
+        this.labelForInput = '';
+        this.placeholderValue = 'Search here';
+        this.rightToLeftOrientation = false;
+        this.searchContainerClass = '';
+        this.error = false;
+        this.isRequesting = false;
+        this.query = '';
+        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() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    render() {
+        var _a, _b, _c;
+        const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';
+        const parsedCustomStyles = 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 (h("form", { key: '1ecc90be4b39c7fbfff4a3c89c319343f6478a1e', class: `${formClass}`, onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: '82ee01912536de6a11e20f7df533856a41ebc343', label: this.labelForInput }), h("searchcraft-input", { key: 'ad00322933a20db2865cd79241056f7b0ee84a15', 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 && (h("searchcraft-error-message", { key: '588a134a1130d3c4e4fc921b09450268057b8217', errorMessage: 'Please enter a search query.' }))));
+    }
+};
+SearchcraftAutoSearchForm.style = SearchcraftAutoSearchFormStyle0;
+
+const searchcraftBaseSearchResultModuleCss = "@charset \"UTF-8\";:root{--font-stack:Helvetica, Arial, sans-serif}.interactiveResultContainerLight{align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;position:relative;background-color:#FAFAFA}@media (min-width: 600px){.interactiveResultContainerLight{flex-direction:row}}.interactiveResultContainerDark{align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;position:relative;background-color:#2E2E2E}@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{display:inline-block;position:absolute;right:5px;top:-2px}@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{border-radius:8px;max-height:100%;max-width:100%;border:1px solid #D9D9D9}.imageDark{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:0;position:relative;color:#292929}.headingDark{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;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 {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.buttonCallback = createEvent(this, "buttonCallback", 7);
+        this.keyDownCallback = createEvent(this, "keyDownCallback", 7);
+        this.resultCallback = createEvent(this, "resultCallback", 7);
+        this.buttonCallback = () => { }; // Callback for button click
+        this.keyDownCallback = () => { }; // Callback for key down event
+        this.resultCallback = () => { }; // Callback for result container click
+        this.handleButtonClick = () => {
+            this.buttonCallback();
+        };
+        this.handleContainerClick = () => {
+            if (this.isInteractive) {
+                this.resultCallback();
+            }
+        };
+        this.buttonText = '';
+        this.customStyles = '{}';
+        this.headingText = '';
+        this.imageDescription = '';
+        this.imageSource = '';
+        this.isInteractive = false;
+        this.primaryContent = '';
+        this.secondaryContent = '';
+        this.subheadingText = '';
+        this.tertiaryContent = '';
+        this.themeMode = 'light';
+        this.placeImageRight = false;
+    }
+    parseStyles() {
+        try {
+            return JSON.parse(this.customStyles);
+        }
+        catch (error) {
+            console.error('Error parsing custom styles:', error);
+            return {};
+        }
+    }
+    render() {
+        const isLightTheme = this.themeMode === 'light';
+        const styles = this.parseStyles();
+        const imageContainer = (h("div", { key: '83bd0ac730469f4004ac4024c749cd66edfbf7c7', class: 'imageContainer' }, h("img", { key: 'e379c01b45808499d6ac78557294e9c408b1734f', alt: this.imageDescription, class: isLightTheme ? 'imageLight' : 'imageDark', src: this.imageSource, style: styles.image || {} })));
+        const contentContainer = (h("div", { key: '1847892cef75ecb2179178ec17217376c523b1b2', class: 'contentContainer' }, h("h2", { key: '16f6c8dac748fa2b99575eb4b8bcf217a7452ea0', class: isLightTheme ? 'headingLight' : 'headingDark', style: styles.heading || {} }, this.headingText), h("h3", { key: '3539e9fc9b2e567d5cb088b4ae77307f03fb47d1', class: isLightTheme ? 'subheadingLight' : 'subheadingDark', style: styles.subheading || {} }, this.subheadingText), h("p", { key: '20beff8ed55ca1c18cef587f4306b50829c81775', class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark', style: styles.primaryContent || {} }, this.primaryContent), h("div", { key: 'd79107bd79de978f64906db23aa14c533132f369', class: 'secondaryContentContainer' }, h("p", { key: '978f7176d8fa3372a1360a516640d8334ffe9612', class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark', style: styles.secondaryContent || {} }, this.secondaryContent), h("p", { key: '08e70740d73f78ef10769f882ac4ddf80545fac2', class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark', style: styles.tertiaryContent || {} }, this.tertiaryContent)), this.buttonText && (h("button", { key: '3f3bfe27e824829e86764445ad9c0cd66bfeae92', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText))));
+        return (h("div", { key: 'f6dc4ad85634cef131ffc85d574ef35a862f9d77', class: this.isInteractive
+                ? isLightTheme
+                    ? 'interactiveResultContainerLight'
+                    : 'interactiveResultContainerDark'
+                : 'resultContainer', onKeyDown: this.keyDownCallback, onClick: this.handleContainerClick, style: styles.container || {}, tabindex: '0' }, this.placeImageRight ? (h(Fragment, null, contentContainer, imageContainer)) : (h(Fragment, null, imageContainer, contentContainer))));
+    }
+};
+SearchcraftBaseSearchResult.style = SearchcraftBaseSearchResultStyle0;
+
+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{text-align:center;width:100%}.errorMessageContainer{text-align:center}";
+const SearchcraftBaseSearchResultsStyle0 = searchcraftBaseSearchResultsModuleCss;
+
+const SearchcraftBaseSearchResults = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.adInterval = 4;
+        this.customStylesForResults = {};
+        this.documentAttributesForDisplay = '';
+        this.fallbackElement = null;
+        this.formatTime = true;
+        this.placeAdAtEnd = false;
+        this.placeAdAtStart = true;
+        this.placeResultImageRight = false;
+        this.hasSearched = false;
+        this.query = '';
+        this.searchResults = null;
+    }
+    componentDidLoad() {
+        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;
+        });
+        const { searchResults, query } = useSearchcraftStore.getState();
+        this.searchResults = searchResults;
+        this.query = query;
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    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.documentAttributesForDisplay);
+        const serializedStyles = typeof this.customStylesForResults === 'string'
+            ? this.customStylesForResults
+            : 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) => {
+            const { doc: result } = document;
+            const dynamicProperties = 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] = getFormattedTimeFromNow(value);
+                        }
+                    }
+                }
+            }
+            return (h("searchcraft-base-search-result", { "button-callback": () => console.log('button callback'), "custom-styles": serializedStyles, "image-source": dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]], "is-interactive": true, key: `${document.document_id}-${index}`, "keydown-callback": () => console.log('keydown'), "heading-text": dynamicProperties[parsedSearchKeys[0]], "place-image-right": this.placeResultImageRight, "primary-content": dynamicProperties[parsedSearchKeys[2]], "result-callback": () => console.log('interactive element'), "secondary-content": dynamicProperties[parsedSearchKeys[3]], "subheading-text": dynamicProperties[parsedSearchKeys[1]], "tertiary-content": dynamicProperties[parsedSearchKeys[4]] }));
+        });
+        const finalComponents = [];
+        if (this.placeAdAtStart) {
+            finalComponents.push(h("div", { key: 'ad-section-start', class: 'adSection' }, h("span", null, "##"), h("p", null, " Ad Impressions")));
+        }
+        if (this.adInterval > 0) {
+            resultsComponents.forEach((component, index) => {
+                finalComponents.push(component);
+                if ((index + 1) % this.adInterval === 0) {
+                    finalComponents.push(h("div", { key: `ad-section-${index + 1}`, class: 'adSection' }, h("span", null, "##"), h("p", null, " Ad Impressions")));
+                }
+            });
+        }
+        else {
+            finalComponents.push(...resultsComponents);
+        }
+        if (this.placeAdAtEnd) {
+            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("div", { class: 'errorMessageContainer' }, h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` })))));
+    }
+};
+SearchcraftBaseSearchResults.style = SearchcraftBaseSearchResultsStyle0;
+
+const SearchcraftClearIconSet = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.type = 'clear-light';
+    }
+    render() {
+        switch (this.type) {
+            case 'clear-light':
+                return (h("svg", { width: '22', height: '22', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { id: 'icon-title' }, "Searchcraft Clear Input Icon Light"), h("path", { 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: 'black', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })));
+            case 'clear-dark':
+                return (h("svg", { width: '22', height: '22', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { id: 'icon-title' }, "Searchcraft Clear Input Icon Dark"), h("path", { 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: 'white', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })));
+            case 'arrow-light':
+                return (h("svg", { width: '20', height: '21', viewBox: '0 0 20 21', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { id: 'icon-title' }, "Searchcraft Arrow Right Icon Light"), h("path", { d: 'M7.5 15.0444L12.5 10.0444L7.5 5.04443', stroke: '#737373', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })));
+            case 'arrow-dark':
+                return (h("svg", { width: '8', height: '12', viewBox: '0 0 8 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { id: 'icon-title' }, "Searchcraft Arrow Right Icon Dark"), h("path", { d: 'M1.5 11L6.5 6L1.5 1', stroke: '#BFBFBF', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })));
+            default:
+                return null;
+        }
+    }
+};
+
+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 {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clearInput = createEvent(this, "clearInput", 7);
+        this.handleClearClick = (event) => {
+            event.preventDefault();
+            this.clearInput.emit();
+        };
+        this.isRequesting = false;
+        this.rightToLeftOrientation = false;
+        this.theme = 'light';
+    }
+    isLightTheme() {
+        return this.theme === 'light';
+    }
+    render() {
+        return this.rightToLeftOrientation ? (h("button", { class: classNames('inputClearButtonRTL', '.sc-clear-input-button-rtl'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (h("searchcraft-spinner-light", null)) : (h("searchcraft-spinner-dark", null))) : this.isLightTheme ? (h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (h("searchcraft-clear-icon-set", { type: 'clear-dark' })))) : (h("button", { class: classNames('inputClearButtonLTR', '.sc-clear-input-button-ltr'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (h("searchcraft-spinner-light", null)) : (h("searchcraft-spinner-dark", null))) : this.isLightTheme ? (h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (h("searchcraft-clear-icon-set", { type: 'clear-dark' }))));
+    }
+};
+SearchcraftClearInputButton.style = SearchcraftClearInputButtonStyle0;
+
+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;
+
+const SearchcraftErrorMessage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.errorMessage = undefined;
+        this.theme = 'light';
+    }
+    render() {
+        const errorMessageStyle = this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';
+        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 deduplicatedFilters = this.deduplicatePaths(Array.from(this.selectedFilters));
+            this.filtersUpdated.emit(deduplicatedFilters);
+            this.searchStore.setSelectedFilters(deduplicatedFilters);
+            this.searchStore.search();
+        };
+        this.filters = [];
+        this.dynamicFilters = [];
+        this.isRequesting = false;
+        this.query = '';
+        this.resultsCount = 0;
+        this.selectedFilters = new Set();
+    }
+    connectedCallback() {
+        var _a;
+        const state = this.searchStore; // Fetch the initial state
+        // Initial population of facets if available
+        if ((_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data.facets) {
+            this.populateFiltersFromFacets(state.searchResults.data.facets);
+        }
+        this.unsubscribe = 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 || '';
+            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;
+            // Populate filters when facets are updated
+            if ((_d = state.searchResults) === null || _d === void 0 ? void 0 : _d.data.facets) {
+                this.populateFiltersFromFacets(state.searchResults.data.facets);
+            }
+        });
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    populateFiltersFromFacets(facets) {
+        var _a;
+        const newFilters = flattenFacets(((_a = facets[0]) === null || _a === void 0 ? void 0 : _a.section) || []);
+        const filtersMap = new Map();
+        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);
+            }
+        });
+        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);
+            }
+        });
+        return Array.from(pathMap.values());
+    }
+    formatLabel(label) {
+        return label
+            .replace(/-/g, ' ')
+            .split(' ')
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
+    render() {
+        if (!this.query || this.resultsCount === 0) {
+            return null;
+        }
+        const filtersToRender = this.dynamicFilters.filter((filter) => !filter.value.includes('/', filter.value.indexOf('/') + 1));
+        return (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 (h("div", { key: filter.value }, h("label", { class: 'checkboxLabel' }, h("input", { class: 'filterCheckbox', checked: isChecked, onChange: (event) => this.handleFilterChange(filter.value, event.target.checked), type: 'checkbox' }), this.formatLabel(filter.label)), children.map((child) => {
+                const isChildChecked = this.selectedFilters.has(child.value);
+                return (h("label", { class: 'childCheckboxLabel', key: child.value, style: { marginLeft: '20px' } }, h("input", { class: 'childFilterCheckbox', checked: isChildChecked, onChange: (event) => this.handleFilterChange(child.value, event.target.checked), type: 'checkbox' }), this.formatLabel(child.label.split('/').pop() || '')));
+            })));
+        })));
+    }
+};
+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;
+
+const SearchcraftInput = class {
+    constructor(hostRef) {
+        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 = '';
+        this.inputCaptionClassName = '';
+        this.inputCaptionValue = '';
+        this.inputClassName = '';
+        this.inputIconHeight = 20;
+        this.inputIconWidth = 20;
+        this.isRequesting = false;
+        this.placeholderValue = 'Enter Search';
+        this.rightToLeftOrientation = false;
+        this.query = '';
+        this.theme = 'light';
+    }
+    get isLightTheme() {
+        return this.theme === 'light';
+    }
+    handleInputChange(event) {
+        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();
+        }
+    }
+    render() {
+        const containerClassName = this.rightToLeftOrientation
+            ? 'inputContainerRTL'
+            : 'inputContainerLTR';
+        const inputClassName = classNames(this.error
+            ? this.isLightTheme
+                ? 'inputErrorLightRTL'
+                : 'inputErrorDarkRTL'
+            : this.isLightTheme
+                ? 'inputLightLTR'
+                : 'inputDarkLTR', 'searchcraft-input');
+        const validatedCustomStyles = parseCustomStyles(this.customStyles);
+        const placeholderStyle = {
+            fontSize: validatedCustomStyles.placeholderFontSize || '16px',
+        };
+        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(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};
+                }
+              `), 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 }))))));
+    }
+};
+SearchcraftInput.style = SearchcraftInputStyle0;
+
+const searchcraftInputCaptionModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputCaptionLightLTR{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#404040}.inputCaptionDarkLTR{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#E6E6E6}.inputCaptionErrorLightLTR{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#990000}.inputCaptionErrorDarkLTR{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#FFB3B3}.inputCaptionLightRTL{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#404040;text-align:right}.inputCaptionDarkRTL{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#E6E6E6;text-align:right}.inputCaptionErrorLightRTL{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#990000;text-align:right}.inputCaptionErrorDarkRTL{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#FFB3B3;text-align:right}";
+const SearchcraftInputCaptionStyle0 = searchcraftInputCaptionModuleCss;
+
+const SearchcraftInputCaption = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.error = undefined;
+        this.inputCaptionClassName = '';
+        this.inputCaptionValue = 'Enter Search';
+        this.rightToLeftOrientation = false;
+        this.theme = 'light';
+    }
+    isLightTheme() {
+        return this.theme === 'light';
+    }
+    render() {
+        return this.rightToLeftOrientation ? (h("p", { class: classNames(this.error
+                ? this.isLightTheme
+                    ? 'inputCaptionErrorLightRTL'
+                    : 'inputCaptionErrorDarkRTL'
+                : this.isLightTheme
+                    ? 'inputCaptionLightRTL'
+                    : 'inputCaptionDarkRTL', this.inputCaptionClassName, '.searchcraft-input-caption') }, this.inputCaptionValue)) : (h("p", { class: classNames(this.error
+                ? this.isLightTheme
+                    ? 'inputCaptionErrorLightLTR'
+                    : 'inputCaptionErrorDarkLTR'
+                : this.isLightTheme
+                    ? 'inputCaptionLightLTR'
+                    : 'inputCaptionDarkLTR', this.inputCaptionClassName, '.searchcraft-input-caption') }, this.inputCaptionValue));
+    }
+};
+SearchcraftInputCaption.style = SearchcraftInputCaptionStyle0;
+
+const searchcraftInputIconModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputIconLTR{left:15px;position:absolute;top:50%;transform:translateY(-50%)}.inputIconRTL{position:absolute;right:15px;top:50%;transform:translateY(-50%)}";
+const SearchcraftInputIconStyle0 = searchcraftInputIconModuleCss;
+
+const SearchcraftInputIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.error = undefined;
+        this.height = 20;
+        this.rightToLeftOrientation = false;
+        this.width = 20;
+        this.theme = 'light';
+    }
+    isLightTheme() {
+        return this.theme === 'light';
+    }
+    render() {
+        return this.error ? (h("div", { class: this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR' }, this.isLightTheme() ? (h("searchcraft-search-icon-set", { height: this.height, type: 'error-light', width: this.width })) : (h("searchcraft-search-icon-set", { height: this.height, type: 'error-dark', width: this.width })))) : (h("div", { class: this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR' }, this.isLightTheme() ? (h("searchcraft-search-icon-set", { height: this.height, type: 'search-light', width: this.width })) : (h("searchcraft-search-icon-set", { height: this.height, type: 'search-dark', width: this.width }))));
+    }
+};
+SearchcraftInputIcon.style = SearchcraftInputIconStyle0;
+
+const searchcraftInputLabelModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.labelLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#292929}.labelDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#FFF}";
+const SearchcraftInputLabelStyle0 = searchcraftInputLabelModuleCss;
+
+const SearchcraftInputLabel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.inputLabelClassName = '';
+        this.label = undefined;
+        this.theme = 'light';
+    }
+    isLightTheme() {
+        return this.theme === 'light';
+    }
+    render() {
+        if (!this.label) {
+            return null;
+        }
+        const labelStyle = this.isLightTheme() ? 'labelLight' : 'labelDark';
+        return (h("label", { class: classNames(labelStyle, this.inputLabelClassName), htmlFor: 'searchcraft-input-id' }, this.label));
+    }
+};
+SearchcraftInputLabel.style = SearchcraftInputLabelStyle0;
+
+const searchcraftResultsInfoModuleCss = ".container{border-bottom:1px solid #D9D9D9;display:flex;justify-content:flex-start;width:100%}.resultsInfo{color:#292929;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);
+        this.type = 'search-dark';
+        this.width = 20;
+        this.height = 20;
+    }
+    render() {
+        const { width, height } = this;
+        switch (this.type) {
+            case 'search-light':
+                return (h("svg", { width: width, height: height, viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, h("title", { id: 'searchcraft-title' }, "Searchcraft Search Icon Light"), h("path", { d: 'M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z', stroke: '#404040', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })));
+            case 'search-dark':
+                return (h("svg", { width: width, height: height, viewBox: '0 0 18 18', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, h("title", { id: 'searchcraft-title' }, "Searchcraft Search Icon Dark"), h("path", { d: 'M16.5 16.5L12.875 12.875M14.8333 8.16667C14.8333 11.8486 11.8486 14.8333 8.16667 14.8333C4.48477 14.8333 1.5 11.8486 1.5 8.16667C1.5 4.48477 4.48477 1.5 8.16667 1.5C11.8486 1.5 14.8333 4.48477 14.8333 8.16667Z', stroke: '#E6E6E6', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })));
+            case 'error-light':
+                return (h("svg", { width: width, height: height, viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, h("title", { id: 'searchcraft-title' }, "Searchcraft Error Search Icon Light"), h("path", { d: 'M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z', stroke: '#737373', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })));
+            case 'error-dark':
+                return (h("svg", { width: width, height: height, viewBox: '0 0 18 18', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, h("title", { id: 'searchcraft-title' }, "Searchcraft Error Search Icon Dark"), h("path", { d: 'M16.5 16.5L12.875 12.875M14.8333 8.16667C14.8333 11.8486 11.8486 14.8333 8.16667 14.8333C4.48477 14.8333 1.5 11.8486 1.5 8.16667C1.5 4.48477 4.48477 1.5 8.16667 1.5C11.8486 1.5 14.8333 4.48477 14.8333 8.16667Z', stroke: '#BFBFBF', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })));
+            default:
+                return null;
+        }
+    }
+};
+
+const searchcraftSliderModuleCss = ".sliderContainer{display:flex;flex-direction:column;gap:10px;font-family:Arial, sans-serif;align-items:center;width:100%}.rangeContainer{display:flex;position:relative;width:100%;align-items:center}.rangeContainer .activeRange{position:absolute;top:50%;transform:translateY(-50%);height:4px;background:#007DB3;z-index:0;border-radius:2px}.rangeContainer .rangeSlider{width:100%;height:4px;background:transparent;border-radius:2px;outline:none;-webkit-appearance:none;appearance:none;position:absolute;margin:0}.rangeContainer .rangeSlider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background-color:#FFF;border-radius:50%;border:2px solid #e6e6e6;cursor:pointer}.rangeContainer .rangeSlider::-moz-range-thumb{width:20px;height:20px;background-color:#FFF;border-radius:50%;border:2px solid #e6e6e6;cursor:pointer}.yearLabels{display:flex;justify-content:space-between;width:100%;margin-top:10px;font-size:15px;font-weight:600;font-family:\"Source Sans Pro\", sans-serif;color:#666}.yearLabel{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.maxYear = new Date().getFullYear();
+        this.minYear = 2014;
+        this.endYear = this.maxYear;
+        this.hasSearched = false;
+        this.query = '';
+        this.resultsCount = 0;
+        this.startYear = this.minYear;
+    }
+    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;
+        }
+        const rangeMin = this.minYear;
+        const rangeMax = this.maxYear;
+        const startPercent = ((this.startYear - rangeMin) / (rangeMax - rangeMin)) * 100;
+        const endPercent = ((this.endYear - rangeMin) / (rangeMax - rangeMin)) * 100;
+        return (h("div", { class: 'sliderContainer' }, h("div", { class: 'rangeContainer' }, h("div", { class: 'activeRange', style: {
+                left: `${startPercent}%`,
+                width: `${endPercent - startPercent}%`,
+            } }), h("input", { class: 'rangeSlider', max: this.maxYear, min: this.minYear, onInput: this.handleStartYearChange, step: '1', type: 'range', value: this.startYear }), h("input", { class: 'rangeSlider', max: this.maxYear, min: this.minYear, onInput: this.handleEndYearChange, step: '1', type: 'range', value: this.endYear })), h("div", { class: 'yearLabels' }, h("span", { class: 'yearLabel' }, this.startYear), h("span", { class: 'yearLabel' }, this.endYear))));
+    }
+};
+SearchcraftSlider.style = SearchcraftSliderStyle0;
+
+const searchcraftSpinnerDarkModuleCss = ".spinnerContainer{background-color:transparent;height:20px;width:20px}.spinnerDark{animation:spinning 1s linear infinite;background:conic-gradient(#000 50%, #FFFFFF);clip-path:circle(50%);height:100%;mask-image:radial-gradient(circle at center, rgba(0, 0, 0, 0) 6.6666666667px, rgb(0, 0, 0) 6.6666666667px);width:100%}.spinnerLight{animation:spinning 1s linear infinite;background:conic-gradient(#737373 50%, #FFFFFF);clip-path:circle(50%);height:100%;mask-image:radial-gradient(circle at center, rgba(0, 0, 0, 0) 6.6666666667px, rgb(0, 0, 0) 6.6666666667px);width:100%}@keyframes spinning{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}";
+const SearchcraftSpinnerDarkStyle0 = searchcraftSpinnerDarkModuleCss;
+
+const SearchcraftSpinnerDark = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h("div", { key: '60b629930c2e2795236f6768b40c95ce9390e882', class: 'spinnerContainer' }, h("div", { key: 'bfef3329f2e81ecf6538738ac0213da6259dd1c3', class: 'spinnerDark' })));
+    }
+};
+SearchcraftSpinnerDark.style = SearchcraftSpinnerDarkStyle0;
+
+const searchcraftSpinnerLightModuleCss = ".spinnerContainer{background-color:transparent;height:20px;width:20px}.spinnerLight{animation:spinning 1s linear infinite;background:conic-gradient(#737373 50%, #FFFFFF);clip-path:circle(50%);height:100%;mask-image:radial-gradient(circle at center, rgba(0, 0, 0, 0) 6.6666666667px, rgb(0, 0, 0) 6.6666666667px);width:100%}@keyframes spinning{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}";
+const SearchcraftSpinnerLightStyle0 = searchcraftSpinnerLightModuleCss;
+
+const SearchcraftSpinnerLight = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h("div", { key: 'ad5224c97faf7e329d2a8904488c17dfd7414b9e', class: 'spinnerContainer' }, h("div", { key: '6336ce7737af65eedac46ee290b20291ce5b6096', class: 'spinnerLight' })));
+    }
+};
+SearchcraftSpinnerLight.style = SearchcraftSpinnerLightStyle0;
+
+const searchcraftToggleButtonModuleCss = ".toggle-wrapper{background:#ddd;border:none;border-radius:16px;box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05);cursor:pointer;height:26px;margin-left:10px;position:relative;width:44px}.toggle-wrapper.active{background:#007DB3;box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05)}.toggle-wrapper .toggle-switch{background:#fff;border-radius:50%;height:18px;left:4px;position:absolute;top:calc(50% - 9px);transition:transform 0.3s ease;width:18px}.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_17.entry.js.map