@searchcraft/javascript-sdk 0.1.0 → 0.1.2

package/dist/cjs/searchcraft-auto-search-form_13.cjs.entry.js

@@ -0,0 +1,460 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e7e9ab69.js');
+const store = require('./store-ab3978ce.js');
+const utils = require('./utils-57b6c18f.js');
+const index$1 = require('./index-5b0b9d4c.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 SearchcraftAutoSearchFormStyle0 = searchcraftAutoSearchFormModuleCss;
+
+const SearchcraftAutoSearchForm = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.querySubmit = index.createEvent(this, "querySubmit", 7);
+        this.debounceTimeout = null;
+        this.debounceDelay = 300; // 300ms debounce delay
+        this.searchStore = store.useSearchcraftStore.getState();
+        this.handleInputChange = (event) => {
+            this.query = event.detail;
+            this.querySubmit.emit(this.query);
+            // Clear the previous debounce timeout
+            if (this.debounceTimeout) {
+                clearTimeout(this.debounceTimeout);
+            }
+            // Set a new debounce timeout
+            this.debounceTimeout = setTimeout(() => {
+                console.log('Debounced search triggered');
+                this.runSearch();
+            }, this.debounceDelay);
+        };
+        this.handleClearInput = () => {
+            this.query = '';
+            console.log('Input cleared');
+            if (typeof this.clearInput === 'function') {
+                this.clearInput();
+            }
+            if (this.debounceTimeout) {
+                clearTimeout(this.debounceTimeout);
+            }
+            this.error = false;
+            this.searchResults = '';
+        };
+        this.runSearch = async () => {
+            if (this.query.trim() === '') {
+                this.error = true;
+                this.searchResults = '';
+            }
+            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.handleFormSubmit = async (event) => {
+            event.preventDefault();
+            await this.runSearch();
+        };
+        this.autoSearchFormClass = '';
+        this.clearInput = () => { };
+        this.config = {
+            apiKey: '',
+            endpointURL: '',
+            index: [],
+        };
+        this.customStylesForInput = {};
+        this.inputCaptionValue = '';
+        this.labelForInput = '';
+        this.placeholderValue = 'Search here';
+        this.rightToLeftOrientation = false;
+        this.searchContainerClass = '';
+        this.error = false;
+        this.query = '';
+        this.searchResults = '';
+    }
+    componentDidLoad() {
+        const searchcraft = new store.g(this.config);
+        this.searchStore.initialize(searchcraft, true);
+        console.log('Component initialized');
+    }
+    render() {
+        const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';
+        const parsedCustomStyles = utils.parseCustomStyles(this.customStylesForInput);
+        return (index.h("form", { key: '60978e813198af27c34232ebd1bda4ca4a6f5199', class: `${formClass}`, onSubmit: this.handleFormSubmit }, index.h("searchcraft-input-label", { key: '4418b675769d041c684f15afb2d9b919f765c133', label: this.labelForInput }), index.h("div", { key: '73581bf8fee7deee1bcf426f80493c78e92d8ada', class: 'searchContainer' }, index.h("searchcraft-input", { key: '6e90612f4fc8c773c9f98f5fcfffb303909d3c6f', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, onClearInput: this.handleClearInput, onSearchInputChange: this.handleInputChange, "placeholder-value": this.placeholderValue, query: this.query, "right-to-left-orientation": this.rightToLeftOrientation })), this.error && (index.h("searchcraft-error-message", { key: '1637aff0dcac83d975d9d53545e7fee26c41aa7f', 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:100%;max-width:50%}}.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 SearchcraftBaseSearchResultStyle0 = searchcraftBaseSearchResultModuleCss;
+
+const SearchcraftBaseSearchResult = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.buttonCallback = index.createEvent(this, "buttonCallback", 7);
+        this.keyDownCallback = index.createEvent(this, "keyDownCallback", 7);
+        this.resultCallback = index.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.imageDescription = '';
+        this.imageSource = '';
+        this.isInteractive = false;
+        this.primaryContent = '';
+        this.secondaryContent = '';
+        this.tertiaryContent = '';
+        this.headingText = '';
+        this.subheadingText = '';
+        this.themeMode = 'light';
+        this.customStyles = {};
+    }
+    render() {
+        const isLightTheme = this.themeMode === 'light';
+        const containerStyle = Object.assign({}, this.customStyles);
+        return (index.h("div", { key: '512b19a2637993cd71fe9b0ac1557106f8501cf2', class: this.isInteractive
+                ? isLightTheme
+                    ? 'interactiveResultContainerLight'
+                    : 'interactiveResultContainerDark'
+                : 'resultContainer', id: 'searchcraft-item', onClick: this.handleContainerClick, onKeyDown: this.keyDownCallback, style: containerStyle, tabindex: '0' }, this.isInteractive && (index.h("div", { key: '735b5c931e6bb209cb948d1a4834f689c836528c', class: 'interactiveIconLarge' }, isLightTheme ? (index.h("searchcraft-clear-icon-set", { type: 'arrow-light' })) : (index.h("searchcraft-clear-icon-set", { type: 'arrow-dark' })))), index.h("div", { key: 'd864f312cc779cb52f7f4529691f32b2460a38c1', class: 'imageContainer' }, index.h("img", { key: 'b705f3ebaa1c02e0a80c181c0cb9e6c5afd1b10c', alt: this.imageDescription, class: isLightTheme ? 'imageLight' : 'imageDark', src: this.imageSource })), index.h("div", { key: 'da90f1ba12456a8a25c5983e1061fba917632ebf', class: 'contentContainer' }, index.h("h2", { key: '27af1079e7b12025a96cc0ac890dc9a2516bfa4a', class: isLightTheme ? 'headingLight' : 'headingDark' }, this.headingText, this.isInteractive && (index.h("div", { key: 'da3f8e81bb039fb68b1afb8e3656ce04adc552ba', class: 'interactiveIconSmall' }, isLightTheme ? (index.h("searchcraft-clear-icon-set", { type: 'arrow-light' })) : (index.h("searchcraft-clear-icon-set", { type: 'arrow-dark' }))))), index.h("h3", { key: 'f62cd5e67cdf03286387061ed944504ac1b0e0d2', class: isLightTheme ? 'subheadingLight' : 'subheadingDark' }, this.subheadingText), index.h("p", { key: 'b8024831da3be09abfb758370e25b42a7d9e8517', class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark' }, this.primaryContent), index.h("p", { key: 'b9a847323f17b8cda2c8de170c9308359f113cfd', class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark' }, this.secondaryContent), index.h("p", { key: 'cda9259099171541f59fcf6ab4524d4ba3d40f29', class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark' }, this.tertiaryContent), this.buttonText && (index.h("button", { key: 'f527dad1a614f3bf54d8ce724f374423013f8ca2', onClick: this.handleButtonClick, 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}";
+const SearchcraftBaseSearchResultsStyle0 = searchcraftBaseSearchResultsModuleCss;
+
+const SearchcraftBaseSearchResults = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.query = '';
+        this.searchResults = null;
+        this.searchKeys = '';
+        this.customStylesForResults = {};
+    }
+    componentDidLoad() {
+        // Initialize searchKeys if not provided
+        if (!this.searchKeys || this.searchKeys.length === 0) {
+            console.warn('No searchKeys provided; using empty keys array.');
+            this.searchKeys = ''; // Ensure it's explicitly set as an empty array
+        }
+        // Subscribe to state changes
+        this.unsubscribe = store.useSearchcraftStore.subscribe((state) => {
+            this.searchResults = Object.assign({}, state.searchResults);
+            this.query = state.query;
+        });
+        // Fetch initial state
+        const { searchResults, query } = store.useSearchcraftStore.getState();
+        this.searchResults = searchResults;
+        this.query = query;
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data)) {
+            console.warn('No search results data available');
+            return index.h("div", null, "No results to display.");
+        }
+        const parsedSearchKeys = utils.parseSearchKeys(this.searchKeys);
+        const parsedCustomStyles = utils.parseCustomStyles(this.customStylesForResults);
+        return (index.h("div", { class: 'resultsContainer' }, (_d = (_c = (_b = this.searchResults) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.hits) === null || _d === void 0 ? void 0 :
+            _d.map((document, index$1) => {
+                const { doc: result } = document;
+                const dynamicProperties = utils.extractDynamicProperties(result, parsedSearchKeys);
+                // Render the custom element if present, otherwise fallback to default
+                const customElement = this.hostElement.querySelector('[slot="result-template"]');
+                if (customElement) {
+                    // Clone the custom element and pass data to it
+                    const customElementClone = customElement.cloneNode(true);
+                    customElementClone.removeAttribute('slot'); // Remove the slot attribute
+                    customElementClone.setAttribute('data-result', JSON.stringify(result));
+                    return (index.h("div", { key: `${dynamicProperties.id}-${index$1}` }, customElementClone.outerHTML));
+                }
+                // Fallback to the default element
+                return (index.h("searchcraft-base-search-result", { key: `${dynamicProperties.id}-${index$1}`, "button-callback": () => console.log('button callback'), "result-callback": () => console.log('interactive element'), "keydown-callback": () => console.log('keydown'), "is-interactive": true, "heading-text": dynamicProperties[parsedSearchKeys[0]], "subheading-text": dynamicProperties[parsedSearchKeys[1]], "primary-content": dynamicProperties[parsedSearchKeys[2]], "secondary-content": dynamicProperties[parsedSearchKeys[3]], "tertiary-content": dynamicProperties[parsedSearchKeys[4]], "image-source": dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]], customStyles: parsedCustomStyles }));
+            }), 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 && (index.h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` })), index.h("slot", { name: 'result-template' })));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+SearchcraftBaseSearchResults.style = SearchcraftBaseSearchResultsStyle0;
+
+const SearchcraftClearIconSet = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.type = 'clear-light';
+    }
+    render() {
+        switch (this.type) {
+            case 'clear-light':
+                return (index.h("svg", { width: '22', height: '22', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, index.h("title", { id: 'icon-title' }, "Searchcraft Clear Input Icon Light"), index.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 (index.h("svg", { width: '22', height: '22', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, index.h("title", { id: 'icon-title' }, "Searchcraft Clear Input Icon Dark"), index.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 (index.h("svg", { width: '20', height: '21', viewBox: '0 0 20 21', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, index.h("title", { id: 'icon-title' }, "Searchcraft Arrow Right Icon Light"), index.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 (index.h("svg", { width: '8', height: '12', viewBox: '0 0 8 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, index.h("title", { id: 'icon-title' }, "Searchcraft Arrow Right Icon Dark"), index.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: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 SearchcraftClearInputButtonStyle0 = searchcraftClearInputButtonModuleCss;
+
+const SearchcraftClearInputButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.clearInput = index.createEvent(this, "clearInput", 7);
+        // Added a click handler to emit the event
+        this.handleClearClick = (event) => {
+            event.preventDefault(); // Prevent default if necessary
+            this.clearInput.emit(); // Emit the event
+        };
+        this.isRequesting = false;
+        this.rightToLeftOrientation = false;
+        this.theme = 'light';
+    }
+    isLightTheme() {
+        return this.theme === 'light';
+    }
+    render() {
+        return this.rightToLeftOrientation ? (index.h("button", { class: index$1.classNames('inputClearButtonRTL', '.sc-clear-input-button-rtl'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (index.h("searchcraft-spinner-light", null)) : (index.h("searchcraft-spinner-dark", null))) : this.isLightTheme ? (index.h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (index.h("searchcraft-clear-icon-set", { type: 'clear-dark' })))) : (index.h("button", { class: index$1.classNames('inputClearButtonLTR', '.sc-clear-input-button-ltr'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (index.h("searchcraft-spinner-light", null)) : (index.h("searchcraft-spinner-dark", null))) : this.isLightTheme ? (index.h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (index.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) {
+        index.registerInstance(this, hostRef);
+        this.errorMessage = undefined;
+        this.theme = 'light';
+    }
+    render() {
+        const errorMessageStyle = this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';
+        return (index.h("p", { key: '4e0b94cb24f940e8c404fd752e6f02f977190043', class: index$1.classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
+    }
+};
+SearchcraftErrorMessage.style = SearchcraftErrorMessageStyle0;
+
+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) {
+        index.registerInstance(this, hostRef);
+        this.clearInput = index.createEvent(this, "clearInput", 7);
+        this.searchInputChange = index.createEvent(this, "searchInputChange", 7);
+        this.customStyles = {};
+        this.error = false;
+        this.formClassName = '';
+        this.inputCaptionClassName = '';
+        this.inputCaptionValue = '';
+        this.inputClassName = '';
+        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);
+    }
+    handleClearInput() {
+        if (this.clearInput) {
+            this.clearInput.emit();
+        }
+    }
+    render() {
+        const containerClassName = this.rightToLeftOrientation
+            ? 'inputContainerRTL'
+            : 'inputContainerLTR';
+        const inputClassName = index$1.classNames(this.error
+            ? this.isLightTheme
+                ? 'inputErrorLightRTL'
+                : 'inputErrorDarkRTL'
+            : this.isLightTheme
+                ? 'inputLightLTR'
+                : 'inputDarkLTR', 'searchcraft-input');
+        const validatedCustomStyles = utils.parseCustomStyles(this.customStyles);
+        const placeholderStyle = {
+            fontSize: validatedCustomStyles.placeholderFontSize || '16px',
+        };
+        return (index.h("div", { key: '3a3fa1335552c53967d35219819024377e726d80', class: index$1.classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (index.h(index.Fragment, null, index.h("input", { class: index$1.classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), index.h("style", null, `
+                #searchcraft-input-id::placeholder {
+                  font-size: ${placeholderStyle.fontSize};
+                }
+              `), this.inputCaptionValue && (index.h("searchcraft-input-caption", { inputCaptionClassName: this.inputCaptionClassName, inputCaptionValue: this.inputCaptionValue, rightToLeftOrientation: this.rightToLeftOrientation })), this.query.length > 0 && (index.h("searchcraft-clear-input-button", { onClearInput: this.handleClearInput, rightToLeftOrientation: this.rightToLeftOrientation })), index.h("searchcraft-input-icon", { error: this.error, rightToLeftOrientation: this.rightToLeftOrientation }))) : (index.h("div", { class: 'inputWrapper' }, index.h("searchcraft-input-icon", { error: this.error, rightToLeftOrientation: this.rightToLeftOrientation }), index.h("input", { class: index$1.classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), index.h("style", null, `
+                #searchcraft-input-id::placeholder {
+                  font-size: ${placeholderStyle.fontSize};
+                }
+              `), this.inputCaptionValue && (index.h("searchcraft-input-caption", { inputCaptionClassName: this.inputCaptionClassName, inputCaptionValue: this.inputCaptionValue, rightToLeftOrientation: this.rightToLeftOrientation })), this.query.length > 0 && (index.h("searchcraft-clear-input-button", { 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) {
+        index.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 ? (index.h("p", { class: index$1.classNames(this.error
+                ? this.isLightTheme
+                    ? 'inputCaptionErrorLightRTL'
+                    : 'inputCaptionErrorDarkRTL'
+                : this.isLightTheme
+                    ? 'inputCaptionLightRTL'
+                    : 'inputCaptionDarkRTL', this.inputCaptionClassName, '.searchcraft-input-caption') }, this.inputCaptionValue)) : (index.h("p", { class: index$1.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{height:20px;left:15px;position:absolute;top:50%;transform:translateY(-50%);width:20px}.inputIconRTL{height:20px;position:absolute;right:15px;top:50%;transform:translateY(-50%);width:20px}";
+const SearchcraftInputIconStyle0 = searchcraftInputIconModuleCss;
+
+const SearchcraftInputIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.error = undefined;
+        this.rightToLeftOrientation = false;
+        this.theme = 'light';
+    }
+    isLightTheme() {
+        return this.theme === 'light';
+    }
+    render() {
+        return this.error ? (index.h("div", { class: this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR' }, this.isLightTheme ? (index.h("searchcraft-search-icon-set", { type: 'error-light' })) : (index.h("searchcraft-search-icon-set", { type: 'error-dark' })))) : (index.h("div", { class: this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR' }, this.isLightTheme ? (index.h("searchcraft-search-icon-set", { type: 'search-light' })) : (index.h("searchcraft-search-icon-set", { type: 'search-dark' }))));
+    }
+};
+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) {
+        index.registerInstance(this, hostRef);
+        this.inputLabelClassName = '';
+        this.label = undefined;
+        this.theme = 'light';
+    }
+    isLightTheme() {
+        return this.theme === 'light';
+    }
+    render() {
+        // Render nothing if no label prop is provided
+        if (!this.label) {
+            return null;
+        }
+        const labelStyle = this.isLightTheme() ? 'labelLight' : 'labelDark';
+        return (index.h("label", { class: index$1.classNames(labelStyle, this.inputLabelClassName), htmlFor: 'searchcraft-input-id' }, this.label));
+    }
+};
+SearchcraftInputLabel.style = SearchcraftInputLabelStyle0;
+
+const SearchcraftSearchIconSet = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.type = 'search-dark';
+    }
+    render() {
+        switch (this.type) {
+            case 'search-light':
+                return (index.h("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, index.h("title", { id: 'searchcraft-title' }, "Searchcraft Search Icon Light"), index.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 (index.h("svg", { width: '18', height: '18', viewBox: '0 0 18 18', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, index.h("title", { id: 'searchcraft-title' }, "Searchcraft Search Icon Dark"), index.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 (index.h("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, index.h("title", { id: 'searchcraft-title' }, "Searchcraft Error Search Icon Light"), index.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 (index.h("svg", { width: '18', height: '18', viewBox: '0 0 18 18', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, index.h("title", { id: 'searchcraft-title' }, "Searchcraft Error Search Icon Dark"), index.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 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;
+
+const SearchcraftSpinnerDark = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("div", { key: 'fc32dd86414502f1895b157d8aa28645a5391ff9', class: 'spinnerContainer' }, index.h("div", { key: '260233361f9ff5a17d05b92e41ec2fc13adc2dbf', class: 'spinnerDark' })));
+    }
+};
+SearchcraftSpinnerDark.style = SearchcraftSpinnerDarkStyle0;
+
+const searchcraftSpinnerLightModuleCss = ".spinnerContainer{background-color:transparent;height:20px;width:20px}.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 SearchcraftSpinnerLightStyle0 = searchcraftSpinnerLightModuleCss;
+
+const SearchcraftSpinnerLight = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("div", { key: '0e0faa615a1548868153b07bb467ee85eabcdd09', class: 'spinnerContainer' }, index.h("div", { key: 'a9aac4d029d9072e01cc643da62f3338622f0ef0', class: 'spinnerLight' })));
+    }
+};
+SearchcraftSpinnerLight.style = SearchcraftSpinnerLightStyle0;
+
+exports.searchcraft_auto_search_form = SearchcraftAutoSearchForm;
+exports.searchcraft_base_search_result = SearchcraftBaseSearchResult;
+exports.searchcraft_base_search_results = SearchcraftBaseSearchResults;
+exports.searchcraft_clear_icon_set = SearchcraftClearIconSet;
+exports.searchcraft_clear_input_button = SearchcraftClearInputButton;
+exports.searchcraft_error_message = SearchcraftErrorMessage;
+exports.searchcraft_input = SearchcraftInput;
+exports.searchcraft_input_caption = SearchcraftInputCaption;
+exports.searchcraft_input_icon = SearchcraftInputIcon;
+exports.searchcraft_input_label = SearchcraftInputLabel;
+exports.searchcraft_search_icon_set = SearchcraftSearchIconSet;
+exports.searchcraft_spinner_dark = SearchcraftSpinnerDark;
+exports.searchcraft_spinner_light = SearchcraftSpinnerLight;
+
+//# sourceMappingURL=searchcraft-auto-search-form_13.cjs.entry.js.map