@searchcraft/javascript-sdk 0.1.5 → 0.1.7

package/dist/collection/components/searchcraft-base-search-results/searchcraft-base-search-results.js

@@ -0,0 +1,166 @@
+import { h } from "@stencil/core";
+import { useSearchcraftStore } from "../../provider/store";
+import { extractDynamicProperties, parseSearchKeys, serializeStyles, } from "../../utils/utils";
+export class SearchcraftBaseSearchResults {
+    constructor() {
+        this.query = '';
+        this.searchResults = null;
+        this.searchKeys = '';
+        this.customStylesForResults = {};
+        this.placeAdAtEnd = false;
+        this.adInterval = 4;
+    }
+    componentDidLoad() {
+        if (!this.searchKeys || this.searchKeys.length === 0) {
+            console.warn('No searchKeys provided; using empty keys array.');
+            this.searchKeys = '';
+        }
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            this.searchResults = Object.assign({}, state.searchResults);
+            this.query = state.query;
+        });
+        const { searchResults, query } = useSearchcraftStore.getState();
+        this.searchResults = searchResults;
+        this.query = query;
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data)) {
+            console.warn('No search results data available');
+            return h("div", null, "No results to display.");
+        }
+        const parsedSearchKeys = parseSearchKeys(this.searchKeys);
+        const serializedStyles = typeof this.customStylesForResults === 'string'
+            ? this.customStylesForResults
+            : serializeStyles(this.customStylesForResults);
+        const resultsComponents = (_d = (_c = (_b = this.searchResults) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.hits) === null || _d === void 0 ? void 0 : _d.map((document, index) => {
+            const { doc: result } = document;
+            const dynamicProperties = extractDynamicProperties(result, parsedSearchKeys);
+            return (h("searchcraft-base-search-result", { key: `${document.document_id}-${index}`, "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]], "custom-styles": serializedStyles }));
+        });
+        const finalComponents = [];
+        // Add ads at specified intervals
+        if (this.adInterval > 0) {
+            resultsComponents.forEach((component, index) => {
+                finalComponents.push(component);
+                if ((index + 1) % this.adInterval === 0) {
+                    finalComponents.push(h("div", { key: `ad-section-${index + 1}`, class: 'adSection' }, h("span", null, "##"), h("p", null, " Ad Impressions")));
+                }
+            });
+        }
+        else {
+            finalComponents.push(...resultsComponents);
+        }
+        // Add ad at the end if specified
+        if (this.placeAdAtEnd) {
+            finalComponents.push(h("div", { key: 'ad-section-end', class: 'adSection' }, h("span", null, "##"), h("p", null, " Ad Impressions")));
+        }
+        return (h("div", { class: 'resultsContainer' }, finalComponents, this.query.length > 0 &&
+            ((_g = (_f = (_e = this.searchResults) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.hits) === null || _g === void 0 ? void 0 : _g.length) === 0 && (h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` }))));
+    }
+    static get is() { return "searchcraft-base-search-results"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-base-search-results.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-base-search-results.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "searchKeys": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of keys to dynamically extract properties from each document.\nMust be explicitly set by the parent component."
+                },
+                "attribute": "search-keys",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "customStylesForResults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| string\n    | Record<string, Record<string, string>>",
+                    "resolved": "string | { [x: string]: Record<string, string>; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom styles to apply to search results.\nExpected format: JSON string, e.g., '{\"borderRadius\": \"10px\", \"padding\": \"16px\"}'"
+                },
+                "attribute": "custom-styles-for-results",
+                "reflect": false,
+                "defaultValue": "{}"
+            },
+            "placeAdAtEnd": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Place ad at the end of the results."
+                },
+                "attribute": "place-ad-at-end",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "adInterval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Place ad every N results (e.g., every 4 results).\nDefault value: 4"
+                },
+                "attribute": "ad-interval",
+                "reflect": false,
+                "defaultValue": "4"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "query": {},
+            "searchResults": {}
+        };
+    }
+}
+//# sourceMappingURL=searchcraft-base-search-results.js.map

package/dist/collection/components/searchcraft-base-search-results/searchcraft-base-search-results.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchcraft-base-search-results.js","sourceRoot":"","sources":["../../../src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport {\n  extractDynamicProperties,\n  parseSearchKeys,\n  serializeStyles,\n} from '@utils/utils';\n\n@Component({\n  tag: 'searchcraft-base-search-results',\n  styleUrl: 'searchcraft-base-search-results.module.scss',\n  shadow: true,\n})\nexport class SearchcraftBaseSearchResults {\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  /**\n   * Array of keys to dynamically extract properties from each document.\n   * Must be explicitly set by the parent component.\n   */\n  @Prop() searchKeys = '';\n  /**\n   * Custom styles to apply to search results.\n   * Expected format: JSON string, e.g., '{\"borderRadius\": \"10px\", \"padding\": \"16px\"}'\n   */\n  @Prop() customStylesForResults:\n    | string\n    | Record<string, Record<string, string>> = {};\n\n  /**\n   * Place ad at the end of the results.\n   */\n  @Prop() placeAdAtEnd = false;\n\n  /**\n   * Place ad every N results (e.g., every 4 results).\n   * Default value: 4\n   */\n  @Prop() adInterval = 4;\n\n  private unsubscribe: () => void;\n\n  componentDidLoad() {\n    if (!this.searchKeys || this.searchKeys.length === 0) {\n      console.warn('No searchKeys provided; using empty keys array.');\n      this.searchKeys = '';\n    }\n\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.searchResults = { ...state.searchResults };\n      this.query = state.query;\n    });\n\n    const { searchResults, query } = useSearchcraftStore.getState();\n    this.searchResults = searchResults;\n    this.query = query;\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.searchResults?.data) {\n      console.warn('No search results data available');\n      return <div>No results to display.</div>;\n    }\n\n    const parsedSearchKeys = parseSearchKeys(this.searchKeys);\n    const serializedStyles =\n      typeof this.customStylesForResults === 'string'\n        ? this.customStylesForResults\n        : serializeStyles(this.customStylesForResults);\n\n    const resultsComponents = this.searchResults?.data?.hits?.map(\n      (document, index) => {\n        const { doc: result } = document;\n        const dynamicProperties = extractDynamicProperties(\n          result,\n          parsedSearchKeys,\n        );\n\n        return (\n          <searchcraft-base-search-result\n            key={`${document.document_id}-${index}`}\n            button-callback={() => console.log('button callback')}\n            result-callback={() => console.log('interactive element')}\n            keydown-callback={() => console.log('keydown')}\n            is-interactive={true}\n            heading-text={dynamicProperties[parsedSearchKeys[0]]}\n            subheading-text={dynamicProperties[parsedSearchKeys[1]]}\n            primary-content={dynamicProperties[parsedSearchKeys[2]]}\n            secondary-content={dynamicProperties[parsedSearchKeys[3]]}\n            tertiary-content={dynamicProperties[parsedSearchKeys[4]]}\n            image-source={\n              dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]]\n            }\n            custom-styles={serializedStyles}\n          />\n        );\n      },\n    );\n\n    const finalComponents: JSX.Element[] = [];\n\n    // Add ads at specified intervals\n    if (this.adInterval > 0) {\n      resultsComponents.forEach((component, index) => {\n        finalComponents.push(component);\n        if ((index + 1) % this.adInterval === 0) {\n          finalComponents.push(\n            <div key={`ad-section-${index + 1}`} class='adSection'>\n              <span>##</span>\n              <p> Ad Impressions</p>\n            </div>,\n          );\n        }\n      });\n    } else {\n      finalComponents.push(...resultsComponents);\n    }\n\n    // Add ad at the end if specified\n    if (this.placeAdAtEnd) {\n      finalComponents.push(\n        <div key='ad-section-end' class='adSection'>\n          <span>##</span>\n          <p> Ad Impressions</p>\n        </div>,\n      );\n    }\n\n    return (\n      <div class='resultsContainer'>\n        {finalComponents}\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <searchcraft-error-message\n              error-message={`No search results found for \"${this.query}\" query`}\n            />\n          )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-base-search-results/searchcraft-base-search-results.module.css

@@ -0,0 +1,36 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.resultsContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 100px 20px;
+}
+.resultsContainer > p {
+  align-self: center;
+}
+.resultsContainer > div {
+  margin-bottom: 20px;
+}
+.resultsContainer > div img {
+  height: 300px;
+  width: 200px;
+}
+
+.adSection {
+  align-items: center;
+  border: 1px solid #DCDDDE;
+  display: flex;
+  flex-direction: column;
+  font-size: 16px;
+  justify-content: center;
+  margin: auto;
+  min-height: 150px;
+  text-align: center;
+  width: 100%;
+}
+.adSection p {
+  margin-top: 5px;
+}

package/dist/collection/components/searchcraft-button/searchcraft-button.js

@@ -0,0 +1,137 @@
+import { h, Fragment, } from "@stencil/core";
+import classNames from "classnames";
+export class SearchcraftButton {
+    constructor() {
+        this.handleClick = () => {
+            this.buttonClick.emit(); // Emit the event instead of calling a function
+        };
+        this.iconElement = undefined;
+        this.iconOnly = false;
+        this.iconPosition = 'left';
+        this.label = 'Search';
+        this.isRequesting = false;
+        this.theme = 'light';
+    }
+    getButtonStyle() {
+        return this.theme === 'light' ? 'buttonLight' : 'buttonDark';
+    }
+    render() {
+        const buttonStyle = this.getButtonStyle();
+        return (h(Fragment, { key: '2a29411990063b67c92c60a3f1f805818bea047f' }, this.iconOnly ? (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.isRequesting ? (h("searchcraft-spinner-dark", null)) : (this.iconElement))) : (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.iconPosition === 'left' && this.isRequesting ? (h("div", { class: 'spinner-margin-right' }, h("searchcraft-spinner-dark", null))) : (this.iconElement), h("span", { class: classNames(this.isRequesting && 'button-label', 'searchcraft-button-label') }, this.label)))));
+    }
+    static get is() { return "searchcraft-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-button.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-button.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "iconElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Element",
+                    "resolved": "Element",
+                    "references": {
+                        "Element": {
+                            "location": "global",
+                            "id": "global::Element"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-position",
+                "reflect": false,
+                "defaultValue": "'left'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'Search'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isRequesting": {},
+            "theme": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "buttonClick",
+                "name": "buttonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=searchcraft-button.js.map

package/dist/collection/components/searchcraft-button/searchcraft-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchcraft-button.js","sourceRoot":"","sources":["../../../src/components/searchcraft-button/searchcraft-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,KAAK,EACL,QAAQ,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,iBAAiB;;QAepB,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,+CAA+C;QAC1E,CAAC,CAAC;;wBAfiB,KAAK;4BACD,MAAM;qBACb,QAAQ;4BAIA,KAAK;qBACZ,OAAO;;IAEhB,cAAc;QACpB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC;IAC/D,CAAC;IAMD,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,OAAO,CACL,EAAC,QAAQ,uDACN,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,cACE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,oBAAoB,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,mCAA4B,CAC7B,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,WAAW,CACjB,CACM,CACV,CAAC,CAAC,CAAC,CACF,cACE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,oBAAoB,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ;YAEZ,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnD,WAAK,KAAK,EAAC,sBAAsB;gBAC/B,mCAA4B,CACxB,CACP,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,WAAW,CACjB;YACD,YACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,YAAY,IAAI,cAAc,EACnC,0BAA0B,CAC3B,IAEA,IAAI,CAAC,KAAK,CACN,CACA,CACV,CACQ,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  State,\n  Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-button',\n  styleUrl: 'searchcraft-button.module.scss',\n  shadow: true,\n})\nexport class SearchcraftButton {\n  @Prop() iconElement?: Element;\n  @Prop() iconOnly = false;\n  @Prop() iconPosition = 'left';\n  @Prop() label = 'Search';\n\n  @Event() buttonClick!: EventEmitter<void>;\n\n  @State() isRequesting = false;\n  @State() theme = 'light';\n\n  private getButtonStyle() {\n    return this.theme === 'light' ? 'buttonLight' : 'buttonDark';\n  }\n\n  private handleClick = () => {\n    this.buttonClick.emit(); // Emit the event instead of calling a function\n  };\n\n  render() {\n    const buttonStyle = this.getButtonStyle();\n\n    return (\n      <Fragment>\n        {this.iconOnly ? (\n          <button\n            class={classNames(buttonStyle, 'searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.isRequesting ? (\n              <searchcraft-spinner-dark />\n            ) : (\n              this.iconElement\n            )}\n          </button>\n        ) : (\n          <button\n            class={classNames(buttonStyle, 'searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.iconPosition === 'left' && this.isRequesting ? (\n              <div class='spinner-margin-right'>\n                <searchcraft-spinner-dark />\n              </div>\n            ) : (\n              this.iconElement\n            )}\n            <span\n              class={classNames(\n                this.isRequesting && 'button-label',\n                'searchcraft-button-label',\n              )}\n            >\n              {this.label}\n            </span>\n          </button>\n        )}\n      </Fragment>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-button/searchcraft-button.module.css

@@ -0,0 +1,82 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.buttonLight {
+  border-radius: 8px;
+  display: flex;
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+  padding: 11px 20px;
+  position: relative;
+  background-color: #000;
+  border: 1px solid #E6E6E6;
+  color: #FFF;
+}
+.buttonLight:hover {
+  cursor: pointer;
+}
+.buttonLight:hover {
+  background-color: #2E2E2E;
+}
+.buttonLight:focus {
+  outline: 2px solid #000000;
+}
+
+.buttonDark {
+  border-radius: 8px;
+  display: flex;
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+  padding: 11px 20px;
+  position: relative;
+  background-color: #FFF;
+  border: 1px solid #404040;
+  color: #292929;
+}
+.buttonDark:hover {
+  cursor: pointer;
+}
+.buttonDark:hover {
+  background-color: #FAFAFA;
+}
+.buttonDark:focus {
+  outline: 2px solid #404040;
+}
+
+.spinnerMarginRight {
+  left: 4px;
+  margin-right: 4px;
+  position: absolute;
+}
+
+.spinnerMarginLeft {
+  left: 4px;
+  margin-left: 4px;
+  position: absolute;
+}
+
+.buttonLabel {
+  animation: right-and-back 0.2s;
+  margin-left: 4px;
+  position: relative;
+}
+
+@keyframes right-and-back {
+  0% {
+    right: -6px;
+  }
+  50% {
+    right: -12px;
+  }
+  75% {
+    right: -6px;
+  }
+  100% {
+    right: 0px;
+  }
+}

package/dist/collection/components/searchcraft-clear-input-button/searchcraft-clear-input-button.js

@@ -0,0 +1,96 @@
+import { h, } from "@stencil/core";
+import classNames from "classnames";
+export class SearchcraftClearInputButton {
+    constructor() {
+        // 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 ? (h("button", { class: classNames('inputClearButtonRTL', '.sc-clear-input-button-rtl'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (h("searchcraft-spinner-light", null)) : (h("searchcraft-spinner-dark", null))) : this.isLightTheme ? (h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (h("searchcraft-clear-icon-set", { type: 'clear-dark' })))) : (h("button", { class: classNames('inputClearButtonLTR', '.sc-clear-input-button-ltr'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (h("searchcraft-spinner-light", null)) : (h("searchcraft-spinner-dark", null))) : this.isLightTheme ? (h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (h("searchcraft-clear-icon-set", { type: 'clear-dark' }))));
+    }
+    static get is() { return "searchcraft-clear-input-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-clear-input-button.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-clear-input-button.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isRequesting": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-requesting",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "theme": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clearInput",
+                "name": "clearInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=searchcraft-clear-input-button.js.map

package/dist/collection/components/searchcraft-clear-input-button/searchcraft-clear-input-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchcraft-clear-input-button.js","sourceRoot":"","sources":["../../../src/components/searchcraft-clear-input-button/searchcraft-clear-input-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,2BAA2B;;QAatC,0CAA0C;QAClC,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,+BAA+B;YACvD,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC,iBAAiB;QAC3C,CAAC,CAAC;4BAhBsB,KAAK;sCACI,KAAK;qBAKrB,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;IAChC,CAAC;IAQD,MAAM;QACJ,OAAO,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CACnC,cACE,KAAK,EAAE,UAAU,CAAC,qBAAqB,EAAE,4BAA4B,CAAC,EACtE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAClB,oCAA6B,CAC9B,CAAC,CAAC,CAAC,CACF,mCAA4B,CAC7B,CACF,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACtB,kCAA4B,IAAI,EAAC,aAAa,GAAG,CAClD,CAAC,CAAC,CAAC,CACF,kCAA4B,IAAI,EAAC,YAAY,GAAG,CACjD,CACM,CACV,CAAC,CAAC,CAAC,CACF,cACE,KAAK,EAAE,UAAU,CAAC,qBAAqB,EAAE,4BAA4B,CAAC,EACtE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAClB,oCAA6B,CAC9B,CAAC,CAAC,CAAC,CACF,mCAA4B,CAC7B,CACF,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACtB,kCAA4B,IAAI,EAAC,aAAa,GAAG,CAClD,CAAC,CAAC,CAAC,CACF,kCAA4B,IAAI,EAAC,YAAY,GAAG,CACjD,CACM,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  State,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-clear-input-button',\n  styleUrl: 'searchcraft-clear-input-button.module.scss',\n  shadow: true,\n})\nexport class SearchcraftClearInputButton {\n  @Prop() isRequesting? = false;\n  @Prop() rightToLeftOrientation = false;\n\n  // Updated `clearInput` to an EventEmitter\n  @Event() clearInput: EventEmitter<void>;\n\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  // Added a click handler to emit the event\n  private handleClearClick = (event: MouseEvent) => {\n    event.preventDefault(); // Prevent default if necessary\n    this.clearInput.emit(); // Emit the event\n  };\n\n  render() {\n    return this.rightToLeftOrientation ? (\n      <button\n        class={classNames('inputClearButtonRTL', '.sc-clear-input-button-rtl')}\n        onClick={this.handleClearClick}\n        type='button'\n      >\n        {this.isRequesting ? (\n          this.isLightTheme ? (\n            <searchcraft-spinner-light />\n          ) : (\n            <searchcraft-spinner-dark />\n          )\n        ) : this.isLightTheme ? (\n          <searchcraft-clear-icon-set type='clear-light' />\n        ) : (\n          <searchcraft-clear-icon-set type='clear-dark' />\n        )}\n      </button>\n    ) : (\n      <button\n        class={classNames('inputClearButtonLTR', '.sc-clear-input-button-ltr')}\n        onClick={this.handleClearClick}\n        type='button'\n      >\n        {this.isRequesting ? (\n          this.isLightTheme ? (\n            <searchcraft-spinner-light />\n          ) : (\n            <searchcraft-spinner-dark />\n          )\n        ) : this.isLightTheme ? (\n          <searchcraft-clear-icon-set type='clear-light' />\n        ) : (\n          <searchcraft-clear-icon-set type='clear-dark' />\n        )}\n      </button>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-clear-input-button/searchcraft-clear-input-button.module.css

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

package/dist/collection/components/searchcraft-error-message/searchcraft-error-message.js

@@ -0,0 +1,64 @@
+import { h } from "@stencil/core";
+import classNames from "classnames";
+export class SearchcraftErrorMessage {
+    constructor() {
+        this.errorMessage = undefined;
+        this.theme = 'light';
+    }
+    render() {
+        const errorMessageStyle = this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';
+        return (h("p", { key: 'f520ac38f2f42e9780454aef5e25576095ae5ee9', class: classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
+    }
+    static get is() { return "searchcraft-error-message"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-error-message.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-error-message.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message to display. Defaults to a standard message if not provided."
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme, which determines the style (light or dark)."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=searchcraft-error-message.js.map

package/dist/collection/components/searchcraft-error-message/searchcraft-error-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchcraft-error-message.js","sourceRoot":"","sources":["../../../src/components/searchcraft-error-message/searchcraft-error-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,uBAAuB;;;qBASA,OAAO;;IAEzC,MAAM;QACJ,MAAM,iBAAiB,GACrB,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,kBAAkB,CAAC;QAEpE,OAAO,CACL,0DAAG,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IACpC,IAAI,CAAC,YAAY,IAAI,0BAA0B,CAC9C,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-error-message',\n  styleUrl: 'searchcraft-error-message.module.scss',\n  shadow: true,\n})\nexport class SearchcraftErrorMessage {\n  /**\n   * The error message to display. Defaults to a standard message if not provided.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * The theme, which determines the style (light or dark).\n   */\n  @Prop() theme: 'light' | 'dark' = 'light';\n\n  render() {\n    const errorMessageStyle =\n      this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';\n\n    return (\n      <p class={classNames(errorMessageStyle)}>\n        {this.errorMessage || 'Search term is required.'}\n      </p>\n    );\n  }\n}\n"]}