@searchcraft/javascript-sdk 0.1.2 → 0.1.3

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

@@ -1,460 +0,0 @@
-'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