@searchcraft/javascript-sdk 0.2.3 → 0.2.5

package/dist/collection/assets/searchcraft-search-icon-set.js

@@ -0,0 +1,84 @@
+import { h } from "@stencil/core";
+export class SearchcraftSearchIconSet {
+    constructor() {
+        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;
+        }
+    }
+    static get is() { return "searchcraft-search-icon-set"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'search-light' | 'search-dark' | 'error-light' | 'error-dark'",
+                    "resolved": "\"error-dark\" | \"error-light\" | \"search-dark\" | \"search-light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of the icon to display.\nOptions: 'search-light', 'search-dark', 'error-light', 'error-dark'"
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'search-dark'"
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "width",
+                "reflect": false,
+                "defaultValue": "20"
+            },
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "height",
+                "reflect": false,
+                "defaultValue": "20"
+            }
+        };
+    }
+}
+//# sourceMappingURL=searchcraft-search-icon-set.js.map

package/dist/collection/assets/searchcraft-search-icon-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchcraft-search-icon-set.js","sourceRoot":"","sources":["../../src/assets/searchcraft-search-icon-set.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMnD,MAAM,OAAO,wBAAwB;;oBAMjC,aAAa;qBACC,EAAE;sBACD,EAAE;;IAEnB,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QAC/B,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,cAAc;gBACjB,OAAO,CACL,WACE,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,mBAAmB;oBAEnC,aAAO,EAAE,EAAC,mBAAmB,oCAAsC;oBACnE,YACE,CAAC,EAAC,mNAAmN,EACrN,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CAAC;YACJ,KAAK,aAAa;gBAChB,OAAO,CACL,WACE,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,mBAAmB;oBAEnC,aAAO,EAAE,EAAC,mBAAmB,mCAAqC;oBAClE,YACE,CAAC,EAAC,mNAAmN,EACrN,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CAAC;YACJ,KAAK,aAAa;gBAChB,OAAO,CACL,WACE,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,mBAAmB;oBAEnC,aAAO,EAAE,EAAC,mBAAmB,0CAErB;oBACR,YACE,CAAC,EAAC,mNAAmN,EACrN,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CAAC;YACJ,KAAK,YAAY;gBACf,OAAO,CACL,WACE,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,mBAAmB;oBAEnC,aAAO,EAAE,EAAC,mBAAmB,yCAErB;oBACR,YACE,CAAC,EAAC,mNAAmN,EACrN,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CAAC;YACJ;gBACE,OAAO,IAAI,CAAC;QAChB,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-search-icon-set',\n  shadow: true,\n})\nexport class SearchcraftSearchIconSet {\n  /**\n   * Type of the icon to display.\n   * Options: 'search-light', 'search-dark', 'error-light', 'error-dark'\n   */\n  @Prop() type: 'search-light' | 'search-dark' | 'error-light' | 'error-dark' =\n    'search-dark';\n  @Prop() width = 20;\n  @Prop() height = 20;\n\n  render() {\n    const { width, height } = this;\n    switch (this.type) {\n      case 'search-light':\n        return (\n          <svg\n            width={width}\n            height={height}\n            viewBox='0 0 20 20'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='searchcraft-title'\n          >\n            <title id='searchcraft-title'>Searchcraft Search Icon Light</title>\n            <path\n              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'\n              stroke='#404040'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'search-dark':\n        return (\n          <svg\n            width={width}\n            height={height}\n            viewBox='0 0 18 18'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='searchcraft-title'\n          >\n            <title id='searchcraft-title'>Searchcraft Search Icon Dark</title>\n            <path\n              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'\n              stroke='#E6E6E6'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'error-light':\n        return (\n          <svg\n            width={width}\n            height={height}\n            viewBox='0 0 20 20'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='searchcraft-title'\n          >\n            <title id='searchcraft-title'>\n              Searchcraft Error Search Icon Light\n            </title>\n            <path\n              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'\n              stroke='#737373'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'error-dark':\n        return (\n          <svg\n            width={width}\n            height={height}\n            viewBox='0 0 18 18'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='searchcraft-title'\n          >\n            <title id='searchcraft-title'>\n              Searchcraft Error Search Icon Dark\n            </title>\n            <path\n              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'\n              stroke='#BFBFBF'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      default:\n        return null;\n    }\n  }\n}\n"]}

package/dist/collection/collection-manifest.json

@@ -0,0 +1,31 @@
+{
+  "entries": [
+    "assets/searchcraft-button-icons.js",
+    "assets/searchcraft-clear-icon-set.js",
+    "assets/searchcraft-search-icon-set.js",
+    "components/searchcraft-input/searchcraft-input.js",
+    "components/searchcraft-auto-search-form/searchcraft-auto-search-form.js",
+    "components/searchcraft-base-search-form/searchcraft-base-search-form.js",
+    "components/searchcraft-base-search-result/searchcraft-base-search-result.js",
+    "components/searchcraft-base-search-results/searchcraft-base-search-results.js",
+    "components/searchcraft-button/searchcraft-button.js",
+    "components/searchcraft-clear-input-button/searchcraft-clear-input-button.js",
+    "components/searchcraft-error-message/searchcraft-error-message.js",
+    "components/searchcraft-filters-list/searchcraft-filters-list.js",
+    "components/searchcraft-input-caption/searchcraft-input-caption.js",
+    "components/searchcraft-input-icon/searchcraft-input-icon.js",
+    "components/searchcraft-input-label/searchcraft-input-label.js",
+    "components/searchcraft-results-info/searchcraft-results-info.js",
+    "components/searchcraft-slider/searchcraft-slider.js",
+    "components/searchcraft-spinner-dark/searchcraft-spinner-dark.js",
+    "components/searchcraft-spinner-light/searchcraft-spinner-light.js",
+    "components/searchcraft-toggle-button/searchcraft-toggle-button.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.22.3",
+    "typescriptVersion": "5.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/searchcraft-auto-search-form/searchcraft-auto-search-form.js

@@ -0,0 +1,365 @@
+import { h, } from "@stencil/core";
+import { CoreSDK as SearchcraftCore, } from "@searchcraft/core";
+import { useSearchcraftStore } from "../../provider/store";
+import { parseCustomStyles } from "../../utils/utils";
+export class SearchcraftAutoSearchForm {
+    constructor() {
+        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 SearchcraftCore(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.' }))));
+    }
+    static get is() { return "searchcraft-auto-search-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-auto-search-form.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-auto-search-form.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "autoSearchFormClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "auto-search-form-class",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "clearInput": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "() => {}"
+            },
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CoreConfigSDK",
+                    "resolved": "CoreConfigSDK",
+                    "references": {
+                        "CoreConfigSDK": {
+                            "location": "import",
+                            "path": "@searchcraft/core",
+                            "id": "../core-sdk/dist/index.d.ts::CoreConfigSDK"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "{\n    apiKey: '',\n    endpointURL: '',\n    index: [],\n  }"
+            },
+            "customStylesForInput": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Record<string, string>",
+                    "resolved": "string | { [x: string]: string; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "custom-styles-for-input",
+                "reflect": false,
+                "defaultValue": "{}"
+            },
+            "inputCaptionValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-caption-value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "inputIconHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-icon-height",
+                "reflect": false,
+                "defaultValue": "20"
+            },
+            "inputIconWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-icon-width",
+                "reflect": false,
+                "defaultValue": "20"
+            },
+            "labelForInput": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label-for-input",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholderValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placeholder-value",
+                "reflect": false,
+                "defaultValue": "'Search here'"
+            },
+            "rightToLeftOrientation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "right-to-left-orientation",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "searchContainerClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "search-container-class",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "error": {},
+            "isRequesting": {},
+            "query": {},
+            "searchResults": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "inputClearedOrNoResults",
+                "name": "inputClearedOrNoResults",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "querySubmit",
+                "name": "querySubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=searchcraft-auto-search-form.js.map

package/dist/collection/components/searchcraft-auto-search-form/searchcraft-auto-search-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchcraft-auto-search-form.js","sourceRoot":"","sources":["../../../src/components/searchcraft-auto-search-form/searchcraft-auto-search-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Event,\n  type EventEmitter,\n  h,\n} from '@stencil/core';\n\nimport {\n  type CoreConfigSDK,\n  CoreSDK as SearchcraftCore,\n  type SearchcraftResponse,\n} from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { parseCustomStyles } from '@utils/utils';\n\nimport type { ScInputCustomEvent } from '@components/searchcraft-input/searchcraft-input';\n\n@Component({\n  tag: 'searchcraft-auto-search-form',\n  styleUrl: 'searchcraft-auto-search-form.module.scss',\n  shadow: true,\n})\nexport class SearchcraftAutoSearchForm {\n  @Prop() autoSearchFormClass = '';\n  @Prop() clearInput: () => void = () => {};\n  @Prop() config: CoreConfigSDK = {\n    apiKey: '',\n    endpointURL: '',\n    index: [],\n  };\n  @Prop() customStylesForInput: string | Record<string, string> = {};\n  @Prop() inputCaptionValue = '';\n  @Prop() inputIconHeight = 20;\n  @Prop() inputIconWidth = 20;\n  @Prop() labelForInput = '';\n  @Prop() placeholderValue = 'Search here';\n  @Prop() rightToLeftOrientation = false;\n  @Prop() searchContainerClass = '';\n\n  @Event() inputClearedOrNoResults: EventEmitter<void>;\n  @Event() querySubmit: EventEmitter<string>;\n\n  @State() error = false;\n  @State() isRequesting = false;\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  private debounceTimeout: ReturnType<typeof setTimeout> | null = null;\n  private debounceDelay = 0;\n  private searchStore = useSearchcraftStore.getState();\n  unsubscribe: () => void;\n\n  componentDidLoad() {\n    const searchcraft = new SearchcraftCore(this.config);\n    this.searchStore.initialize(searchcraft, true);\n\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.isRequesting = state.isRequesting;\n      this.searchResults = { ...state.searchResults };\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  handleInputChange = (event: ScInputCustomEvent<string>) => {\n    this.query = event.detail;\n    this.searchStore.setQuery(this.query);\n    this.querySubmit.emit(this.query);\n  };\n\n  handleInputKeyUp = (event: ScInputCustomEvent<string>) => {\n    const target = event.detail;\n    this.query = target;\n    this.searchStore.setQuery(this.query);\n    this.querySubmit.emit(this.query);\n\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout);\n    }\n\n    this.debounceTimeout = setTimeout(() => {\n      this.query.trim() !== '' && this.runSearch();\n    }, this.debounceDelay);\n  };\n\n  handleClearInput = () => {\n    this.query = '';\n    this.searchStore.setQuery('');\n\n    if (typeof this.clearInput === 'function') {\n      this.clearInput();\n    }\n\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout);\n    }\n\n    this.error = false;\n    this.inputClearedOrNoResults.emit();\n  };\n\n  private runSearch = async () => {\n    if (this.query.trim() === '') {\n      this.error = true;\n      this.inputClearedOrNoResults.emit();\n    } else {\n      this.error = false;\n      this.searchStore.setQuery(this.query);\n\n      try {\n        await this.searchStore.search();\n      } catch (error) {\n        this.error = true;\n        this.inputClearedOrNoResults.emit();\n      }\n    }\n  };\n\n  handleFormSubmit = async (event: Event) => {\n    event.preventDefault();\n    await this.runSearch();\n  };\n\n  render() {\n    const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';\n    const parsedCustomStyles = parseCustomStyles(this.customStylesForInput);\n    if (this.query.length > 0 && this.searchResults?.data?.hits?.length === 0) {\n      this.inputClearedOrNoResults.emit();\n    }\n\n    return (\n      <form class={`${formClass}`} onSubmit={this.handleFormSubmit}>\n        <searchcraft-input-label label={this.labelForInput} />\n        <searchcraft-input\n          customStyles={parsedCustomStyles}\n          input-caption-value={this.inputCaptionValue}\n          input-icon-height={this.inputIconHeight}\n          input-icon-width={this.inputIconWidth}\n          is-requesting={this.isRequesting}\n          onClearInput={this.handleClearInput}\n          onInputKeyUp={this.handleInputKeyUp}\n          onSearchInputChange={this.handleInputChange}\n          placeholder-value={this.placeholderValue}\n          query={this.query}\n          right-to-left-orientation={this.rightToLeftOrientation}\n        />\n        {this.error && (\n          <searchcraft-error-message errorMessage='Please enter a search query.' />\n        )}\n      </form>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-auto-search-form/searchcraft-auto-search-form.module.css

@@ -0,0 +1,15 @@
+: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%;
+}