@searchcraft/javascript-sdk 0.1.4 → 0.1.5

package/dist/{esm/index-72ac5051.js → searchcraft-javascript-sdk/index-d6567b9c.js}

@@ -1,3 +1,5 @@
+import './_commonjsHelpers-63cbe26c.js';
+
 var classnames = {exports: {}};
 
 /*!
@@ -10,6 +12,7 @@ var classnames = {exports: {}};
 /* global define */
 
 (function () {
+	'use strict';
 
 	var hasOwn = {}.hasOwnProperty;
 
@@ -66,9 +69,14 @@ var classnames = {exports: {}};
 		return value + newClass;
 	}
 
-	if (module.exports) {
+	if ('object' !== 'undefined' && module.exports) {
 		classNames.default = classNames;
 		module.exports = classNames;
+	} else if (typeof undefined === 'function' && typeof undefined.amd === 'object' && undefined.amd) {
+		// register as 'classnames', consistent with npm package name
+		undefined('classnames', [], function () {
+			return classNames;
+		});
 	} else {
 		window.classNames = classNames;
 	}
@@ -79,4 +87,4 @@ const classNames = classnames.exports;
 
 export { classNames as c };
 
-//# sourceMappingURL=index-72ac5051.js.map
+//# sourceMappingURL=index-d6567b9c.js.map

package/dist/searchcraft-javascript-sdk/index-d6567b9c.js.map

@@ -0,0 +1 @@
+{"file":"index-d6567b9c.js","mappings":";;;;;;;;;;;AAKA;AACA;AACA,CAAC,YAAY;AACb,CAAC,YAAY,CAAC;AACd;AACA,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC,cAAc,CAAC;AAChC;AACA,CAAC,SAAS,UAAU,IAAI;AACxB,EAAE,IAAI,OAAO,GAAG,EAAE,CAAC;AACnB;AACA,EAAE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC7C,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AAC1B,GAAG,IAAI,GAAG,EAAE;AACZ,IAAI,OAAO,GAAG,WAAW,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,IAAI;AACJ,GAAG;AACH;AACA,EAAE,OAAO,OAAO,CAAC;AACjB,EAAE;AACF;AACA,CAAC,SAAS,UAAU,EAAE,GAAG,EAAE;AAC3B,EAAE,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AAC1D,GAAG,OAAO,GAAG,CAAC;AACd,GAAG;AACH;AACA,EAAE,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AAC/B,GAAG,OAAO,EAAE,CAAC;AACb,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;AAC1B,GAAG,OAAO,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;AACtC,GAAG;AACH;AACA,EAAE,IAAI,GAAG,CAAC,QAAQ,KAAK,MAAM,CAAC,SAAS,CAAC,QAAQ,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;AACxG,GAAG,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAC;AACzB,GAAG;AACH;AACA,EAAE,IAAI,OAAO,GAAG,EAAE,CAAC;AACnB;AACA,EAAE,KAAK,IAAI,GAAG,IAAI,GAAG,EAAE;AACvB,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE;AAC1C,IAAI,OAAO,GAAG,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AACxC,IAAI;AACJ,GAAG;AACH;AACA,EAAE,OAAO,OAAO,CAAC;AACjB,EAAE;AACF;AACA,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE;AACxC,EAAE,IAAI,CAAC,QAAQ,EAAE;AACjB,GAAG,OAAO,KAAK,CAAC;AAChB,GAAG;AACH;AACA,EAAE,IAAI,KAAK,EAAE;AACb,GAAG,OAAO,KAAK,GAAG,GAAG,GAAG,QAAQ,CAAC;AACjC,GAAG;AACH;AACA,EAAE,OAAO,KAAK,GAAG,QAAQ,CAAC;AAC1B,EAAE;AACF;AACA,CAAC,IAAI,QAAa,KAAK,WAAW,IAAI,MAAM,CAAC,OAAO,EAAE;AACtD,EAAE,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC;AAClC,EAAE,iBAAiB,UAAU,CAAC;AAC9B,EAAE,MAAM,IAAI,OAAOA,SAAM,KAAK,UAAU,IAAI,OAAOA,SAAM,CAAC,GAAG,KAAK,QAAQ,IAAIA,SAAM,CAAC,GAAG,EAAE;AAC1F;AACA,EAAEA,SAAM,CAAC,YAAY,EAAE,EAAE,EAAE,YAAY;AACvC,GAAG,OAAO,UAAU,CAAC;AACrB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM;AACR,EAAE,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC;AACjC,EAAE;AACF,CAAC,EAAE;;;;;;;","names":["define"],"sources":["../../node_modules/classnames/index.js"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n"],"version":3}

package/dist/searchcraft-javascript-sdk/index.esm.js

@@ -1,2 +1,15 @@
-export{e as extractDynamicProperties,p as parseCustomStyles,a as parseSearchKeys,s as serializeStyles}from"./p-17c94ac1.js";export{u as useSearchcraftStore,a as useThemeStore}from"./p-36c95064.js";
+export { e as extractDynamicProperties, p as parseCustomStyles, a as parseSearchKeys, s as serializeStyles } from './utils-7bff0c78.js';
+export { u as useSearchcraftStore, a as useThemeStore } from './store-7a83a5d7.js';
+import './_commonjsHelpers-63cbe26c.js';
+
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+
 //# sourceMappingURL=index.esm.js.map

package/dist/searchcraft-javascript-sdk/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}
+{"file":"index.esm.js","mappings":";;;;AAAA;;;;;;;;","names":[],"sources":["src/index.ts"],"sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport type * from './components';\n\n// Export utility functions\nexport {\n  extractDynamicProperties,\n  parseCustomStyles,\n  parseSearchKeys,\n  serializeStyles,\n} from './utils/utils';\n\n// Export Zustand store and useTheme hook\nexport { useSearchcraftStore, useThemeStore } from './provider/store';\n"],"version":3}

package/dist/searchcraft-javascript-sdk/searchcraft-auto-search-form.entry.js

@@ -0,0 +1,101 @@
+import { r as registerInstance, a as createEvent, h } from './index-2e19f875.js';
+import { u as useSearchcraftStore, g } from './store-7a83a5d7.js';
+import { p as parseCustomStyles } from './utils-7bff0c78.js';
+import './_commonjsHelpers-63cbe26c.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 SearchcraftAutoSearchForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.querySubmit = createEvent(this, "querySubmit", 7);
+        this.debounceTimeout = null;
+        this.debounceDelay = 300; // 300ms debounce delay
+        this.searchStore = 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(() => {
+                this.runSearch();
+            }, this.debounceDelay);
+        };
+        this.handleClearInput = () => {
+            this.query = '';
+            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.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 = '';
+    }
+    componentDidLoad() {
+        const searchcraft = new g(this.config);
+        this.searchStore.initialize(searchcraft, true);
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            this.isRequesting = state.isRequesting;
+        });
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    render() {
+        const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';
+        const parsedCustomStyles = parseCustomStyles(this.customStylesForInput);
+        return (h("form", { key: '6b735bbdba6e7ff105d176fffa32b9431d5c4e49', class: `${formClass}`, onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: 'c7284dead137677ee7cd6aedac4dbfb38fac8c4c', label: this.labelForInput }), h("div", { key: 'a59294d9b406a1df9beb6264808f6e6a43cedbdd', class: 'searchContainer' }, h("searchcraft-input", { key: 'c1faa2d11c94ec3d4d39456612209e72fd208629', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "is-requesting": this.isRequesting, "input-icon-height": this.inputIconHeight, "input-icon-width": this.inputIconWidth, onClearInput: this.handleClearInput, onSearchInputChange: this.handleInputChange, "placeholder-value": this.placeholderValue, query: this.query, "right-to-left-orientation": this.rightToLeftOrientation })), this.error && (h("searchcraft-error-message", { key: 'b8b1e5b4b212a30f07f3756c8ce33c142e520420', errorMessage: 'Please enter a search query.' }))));
+    }
+};
+SearchcraftAutoSearchForm.style = searchcraftAutoSearchFormModuleCss;
+
+export { SearchcraftAutoSearchForm as searchcraft_auto_search_form };
+
+//# sourceMappingURL=searchcraft-auto-search-form.entry.js.map

package/dist/searchcraft-javascript-sdk/searchcraft-auto-search-form.entry.js.map

@@ -0,0 +1 @@
+{"file":"searchcraft-auto-search-form.entry.esm.js","mappings":"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","names":["SearchcraftCore"],"sources":["src/components/searchcraft-auto-search-form/searchcraft-auto-search-form.module.scss?tag=searchcraft-auto-search-form&encapsulation=shadow","src/components/searchcraft-auto-search-form/searchcraft-auto-search-form.tsx"],"sourcesContent":[":root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.formLTR {\n  text-align: left;\n  width: 100%;\n}\n\n.formRTL {\n  text-align: right;\n  width: 100%;\n}\n\n.searchContainer {\n  align-items: center;\n  display: flex;\n  width: 100%;\n}","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  type EventEmitter,\n  h,\n} from '@stencil/core';\nimport {\n  type CoreConfigSDK,\n  CoreSDK as SearchcraftCore,\n} from '@searchcraft/core';\n\nimport type { ScInputCustomEvent } from '@components/searchcraft-input/searchcraft-input';\nimport { parseCustomStyles } from '@utils/utils';\nimport { useSearchcraftStore } from '@provider/store';\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() querySubmit: EventEmitter<string>;\n\n  @State() error = false;\n  @State() isRequesting = false;\n  @State() query = '';\n  @State() searchResults = '';\n\n  private debounceTimeout: ReturnType<typeof setTimeout> | null = null;\n  private debounceDelay = 300; // 300ms debounce delay\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    });\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.querySubmit.emit(this.query);\n\n    // Clear the previous debounce timeout\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout);\n    }\n\n    // Set a new debounce timeout\n    this.debounceTimeout = setTimeout(() => {\n      this.runSearch();\n    }, this.debounceDelay);\n  };\n\n  handleClearInput = () => {\n    this.query = '';\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.searchResults = '';\n  };\n\n  private runSearch = async () => {\n    if (this.query.trim() === '') {\n      this.error = true;\n      this.searchResults = '';\n    } else {\n      this.error = false;\n      this.searchStore.setQuery(this.query);\n\n      try {\n        await this.searchStore.search();\n        this.searchResults = JSON.stringify(this.searchStore.searchResults);\n      } catch (error) {\n        this.error = true;\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    return (\n      <form class={`${formClass}`} onSubmit={this.handleFormSubmit}>\n        <searchcraft-input-label label={this.labelForInput} />\n        <div class='searchContainer'>\n          <searchcraft-input\n            customStyles={parsedCustomStyles}\n            input-caption-value={this.inputCaptionValue}\n            is-requesting={this.isRequesting}\n            input-icon-height={this.inputIconHeight}\n            input-icon-width={this.inputIconWidth}\n            onClearInput={this.handleClearInput}\n            onSearchInputChange={this.handleInputChange}\n            placeholder-value={this.placeholderValue}\n            query={this.query}\n            right-to-left-orientation={this.rightToLeftOrientation}\n          />\n        </div>\n        {this.error && (\n          <searchcraft-error-message errorMessage='Please enter a search query.' />\n        )}\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/{esm → searchcraft-javascript-sdk}/searchcraft-base-search-form.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h } from './index-0d9f850d.js';
-import { u as useSearchcraftStore, a as useThemeStore, g } from './store-e55b12aa.js';
+import { r as registerInstance, a as createEvent, h } from './index-2e19f875.js';
+import { u as useSearchcraftStore, a as useThemeStore, g } from './store-7a83a5d7.js';
+import './_commonjsHelpers-63cbe26c.js';
 
 const searchcraftBaseSearchFormModuleCss = ".formLTR{font-family:Helvetica, Arial, sans-serif;text-align:left}.formRTL{font-family:Helvetica, Arial, sans-serif;text-align:right}.searchContainer{align-items:center;display:flex}";
-const SearchcraftBaseSearchFormStyle0 = searchcraftBaseSearchFormModuleCss;
 
 const SearchcraftBaseSearchForm = class {
     constructor(hostRef) {
@@ -53,7 +53,7 @@ const SearchcraftBaseSearchForm = class {
         return (h("form", { key: '6460e91d9c4a48c40476c18762b8b4873c157653', class: this.rightToLeftOrientation ? 'formRTL' : 'formLTR', onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: '9d0a89868c4dafae20e7437101c5639466fc2ffa', label: this.labelForInput }), h("div", { key: '441c0923111995fc0b04b0acb799ade4b2018be0', class: 'searchContainer' }, this.rightToLeftOrientation && h("searchcraft-button", { key: '2a0dc24c906917cd1ec5bd605e25a0a67bffee21' }), h("searchcraft-input", { key: '6744a36c97e03fbd10cc354653e32f0f7eac1c00', onClearInput: this.handleClearInput, rightToLeftOrientation: this.rightToLeftOrientation, onSearchInputChange: this.handleSearchInputChange, query: this.query }), !this.rightToLeftOrientation && (h("searchcraft-button", { key: '50ea437efebe7a62d6122fb6a76942861003884a', onButtonClick: this.handleFormSubmit }))), this.error && (h("searchcraft-error-message", { key: 'ae4b2fa7d874771af0b88757244abe5d50679d55', errorMessage: this.errorMessage }))));
     }
 };
-SearchcraftBaseSearchForm.style = SearchcraftBaseSearchFormStyle0;
+SearchcraftBaseSearchForm.style = searchcraftBaseSearchFormModuleCss;
 
 export { SearchcraftBaseSearchForm as searchcraft_base_search_form };
 

package/dist/searchcraft-javascript-sdk/searchcraft-base-search-form.entry.js.map

@@ -0,0 +1 @@
+{"file":"searchcraft-base-search-form.entry.esm.js","mappings":";;;;AAAA,MAAM,kCAAkC,GAAG,wLAAwL;;MCetN,yBAAyB;;;;QAU3B,eAAU,GAAG,SAAQ,CAAC;QAMvB,gBAAW,GAAG,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QAC7C,eAAU,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC;QAE9C,qBAAgB,GAAG;YACjB,MAAM,WAAW,GAAG,IAAIA,CAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACrD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;SAChD,CAAC;QAEF,qBAAgB,GAAG,OAAO,KAAK;YAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;aACnB;iBAAM;gBACL,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;gBACnB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACtC,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;gBAChC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;aACrE;SACF,CAAC;QAEF,4BAAuB,GAAG,CAAC,KAAiC;YAC1D,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;SAC3B,CAAC;QAEF,qBAAgB,GAAG;YACjB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,EAAE,CAAC;SACpB,CAAC;QAEF,gBAAW,GAAG;YACZ,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;SAC/B,CAAC;sBA9C8B;YAC9B,MAAM,EAAE,EAAE;YACV,WAAW,EAAE,EAAE;YACf,KAAK,EAAE,EAAE;SACV;4BACsB,yBAAyB;6BACxB,QAAQ;sCACC,KAAK;qBAIrB,KAAK;qBACL,EAAE;6BACqB,IAAI;;IAmC5C,MAAM;QACJ,QACE,6DACE,KAAK,EAAE,IAAI,CAAC,sBAAsB,GAAG,SAAS,GAAG,SAAS,EAC1D,QAAQ,EAAE,IAAI,CAAC,gBAAgB,IAE/B,gFAAyB,KAAK,EAAE,IAAI,CAAC,aAAa,GAAI,EACtD,4DAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,sBAAsB,IAAI,4EAAsB,EACtD,0EACE,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,EACnD,mBAAmB,EAAE,IAAI,CAAC,uBAAuB,EACjD,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACD,CAAC,IAAI,CAAC,sBAAsB,KAC3B,2EAAoB,aAAa,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC7D,CACG,EACL,IAAI,CAAC,KAAK,KACT,kFAA2B,YAAY,EAAE,IAAI,CAAC,YAAY,GAAI,CAC/D,CACI,EACP;KACH;;;;;;","names":["SearchcraftCore"],"sources":["src/components/searchcraft-base-search-form/searchcraft-base-search-form.module.scss?tag=searchcraft-base-search-form&encapsulation=shadow","src/components/searchcraft-base-search-form/searchcraft-base-search-form.tsx"],"sourcesContent":[".formLTR {\n  font-family: Helvetica, Arial, sans-serif;\n  text-align: left;\n}\n\n.formRTL {\n  font-family: Helvetica, Arial, sans-serif;\n  text-align: right;\n}\n\n.searchContainer {\n  align-items: center;\n  display: flex;\n}","import { Component, h, Event, Prop, State } from '@stencil/core';\nimport {\n  type CoreConfigSDK,\n  CoreSDK as SearchcraftCore,\n} from '@searchcraft/core';\n\nimport { useSearchcraftStore, useThemeStore } from '@provider/store';\n\nimport type { ScInputCustomEvent } from '@components/searchcraft-input/searchcraft-input';\n\n@Component({\n  tag: 'searchcraft-base-search-form',\n  styleUrl: 'searchcraft-base-search-form.module.scss',\n  shadow: true,\n})\nexport class SearchcraftBaseSearchForm {\n  @Prop() config: CoreConfigSDK = {\n    apiKey: '',\n    endpointURL: '',\n    index: [],\n  };\n  @Prop() errorMessage = 'Search was unsuccessful';\n  @Prop() labelForInput = 'Search';\n  @Prop() rightToLeftOrientation = false;\n\n  @Event() clearInput = () => {};\n\n  @State() error = false;\n  @State() query = '';\n  @State() searchResults: string | null = null;\n\n  private searchStore = useSearchcraftStore.getState();\n  private themeStore = useThemeStore.getState();\n\n  componentDidLoad = () => {\n    const searchcraft = new SearchcraftCore(this.config);\n    this.searchStore.initialize(searchcraft, true);\n  };\n\n  handleFormSubmit = async (event) => {\n    event.preventDefault();\n    if (this.query.trim() === '') {\n      this.error = true;\n    } else {\n      this.error = false;\n      this.searchStore.setQuery(this.query);\n      await this.searchStore.search();\n      this.searchResults = JSON.stringify(this.searchStore.searchResults);\n    }\n  };\n\n  handleSearchInputChange = (event: ScInputCustomEvent<string>) => {\n    this.query = event.detail;\n  };\n\n  handleClearInput = () => {\n    this.query = '';\n    this?.clearInput();\n  };\n\n  toggleTheme = () => {\n    this.themeStore.toggleTheme();\n  };\n\n  render() {\n    return (\n      <form\n        class={this.rightToLeftOrientation ? 'formRTL' : 'formLTR'}\n        onSubmit={this.handleFormSubmit}\n      >\n        <searchcraft-input-label label={this.labelForInput} />\n        <div class='searchContainer'>\n          {this.rightToLeftOrientation && <searchcraft-button />}\n          <searchcraft-input\n            onClearInput={this.handleClearInput}\n            rightToLeftOrientation={this.rightToLeftOrientation}\n            onSearchInputChange={this.handleSearchInputChange}\n            query={this.query}\n          />\n          {!this.rightToLeftOrientation && (\n            <searchcraft-button onButtonClick={this.handleFormSubmit} />\n          )}\n        </div>\n        {this.error && (\n          <searchcraft-error-message errorMessage={this.errorMessage} />\n        )}\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/searchcraft-javascript-sdk/searchcraft-base-search-result.entry.js

@@ -0,0 +1,57 @@
+import { r as registerInstance, a as createEvent, h } from './index-2e19f875.js';
+
+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:175px;max-width:100%}}.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 SearchcraftBaseSearchResult = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.buttonCallback = createEvent(this, "buttonCallback", 7);
+        this.keyDownCallback = createEvent(this, "keyDownCallback", 7);
+        this.resultCallback = createEvent(this, "resultCallback", 7);
+        this.buttonCallback = () => { }; // Callback for button click
+        this.keyDownCallback = () => { }; // Callback for key down event
+        this.resultCallback = () => { }; // Callback for result container click
+        this.handleButtonClick = () => {
+            this.buttonCallback();
+        };
+        this.handleContainerClick = () => {
+            if (this.isInteractive) {
+                this.resultCallback();
+            }
+        };
+        this.buttonText = '';
+        this.imageDescription = '';
+        this.imageSource = '';
+        this.isInteractive = false;
+        this.primaryContent = '';
+        this.secondaryContent = '';
+        this.tertiaryContent = '';
+        this.headingText = '';
+        this.subheadingText = '';
+        this.themeMode = 'light';
+        this.customStyles = '{}';
+    }
+    parseStyles() {
+        try {
+            return JSON.parse(this.customStyles);
+        }
+        catch (error) {
+            console.error('Error parsing custom styles:', error);
+            return {};
+        }
+    }
+    render() {
+        const isLightTheme = this.themeMode === 'light';
+        const styles = this.parseStyles();
+        return (h("div", { key: 'e16bae2d337d064e057645cfb0ebf52346229b83', class: this.isInteractive
+                ? isLightTheme
+                    ? 'interactiveResultContainerLight'
+                    : 'interactiveResultContainerDark'
+                : 'resultContainer', style: styles.container || {}, tabindex: '0', onClick: this.handleContainerClick, onKeyDown: this.keyDownCallback }, h("div", { key: 'f2154ce85febbe54956a7f28292b13113e3048dd', class: 'imageContainer' }, h("img", { key: '8063fa3b88ba56b9cba63ded99967c8097b8b185', alt: this.imageDescription, src: this.imageSource, style: styles.image || {}, class: isLightTheme ? 'imageLight' : 'imageDark' })), h("div", { key: 'e04a38165dc98b0d72f215e4252f7065db3664d6', class: 'contentContainer' }, h("h2", { key: '33d2d3483d7c0f4e1ae7e15ba5895a8b15b45a34', style: styles.heading || {}, class: isLightTheme ? 'headingLight' : 'headingDark' }, this.headingText), h("h3", { key: '9587d0acea25ede251eba3e79dba932a5565f51a', style: styles.subheading || {}, class: isLightTheme ? 'subheadingLight' : 'subheadingDark' }, this.subheadingText), h("p", { key: '74f55a23963d5ddc8753d68b164587865da2dd13', style: styles.primaryContent || {}, class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark' }, this.primaryContent), h("div", { key: 'db4e498b08c7075b276e90d8ed233dd48992ecdd' }, h("p", { key: 'c09d3164a15452c5fbfa23a54028f2080dd56550', style: styles.secondaryContent || {}, class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark' }, this.secondaryContent), h("p", { key: 'ae78c4f53d9b12d62cad6b408aad5caf103303db', style: styles.tertiaryContent || {}, class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark' }, this.tertiaryContent)), this.buttonText && (h("button", { key: '3ea036c680f3970e9d6f1b00b3505f11e338922c', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText)))));
+    }
+};
+SearchcraftBaseSearchResult.style = searchcraftBaseSearchResultModuleCss;
+
+export { SearchcraftBaseSearchResult as searchcraft_base_search_result };
+
+//# sourceMappingURL=searchcraft-base-search-result.entry.js.map

package/dist/searchcraft-javascript-sdk/searchcraft-base-search-result.entry.js.map

@@ -0,0 +1 @@
+{"file":"searchcraft-base-search-result.entry.esm.js","mappings":";;AAAA,MAAM,oCAAoC,GAAG,y0FAAy0F;;MCOz2F,2BAA2B;;;;;;QAa7B,mBAAc,GAAe,SAAQ,CAAC;QACtC,oBAAe,GAAe,SAAQ,CAAC;QACvC,mBAAc,GAAe,SAAQ,CAAC;QAEvC,sBAAiB,GAAG;YAC1B,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB,CAAC;QAEM,yBAAoB,GAAG;YAC7B,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB;SACF,CAAC;0BAxBmB,EAAE;gCACI,EAAE;2BACP,EAAE;6BACA,KAAK;8BACJ,EAAE;gCACA,EAAE;+BACH,EAAE;2BACN,EAAE;8BACC,EAAE;yBACW,OAAO;4BACtB,IAAI;;IAgBnB,WAAW;QACjB,IAAI;YACF,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACtC;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAC;YACrD,OAAO,EAAE,CAAC;SACX;KACF;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAElC,QACE,4DACE,KAAK,EACH,IAAI,CAAC,aAAa;kBACd,YAAY;sBACV,iCAAiC;sBACjC,gCAAgC;kBAClC,iBAAiB,EAEvB,KAAK,EAAE,MAAM,CAAC,SAAS,IAAI,EAAE,EAC7B,QAAQ,EAAC,GAAG,EACZ,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,SAAS,EAAE,IAAI,CAAC,eAAe,IAE/B,4DAAK,KAAK,EAAC,gBAAgB,IACzB,4DACE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAC1B,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,EAAE,EACzB,KAAK,EAAE,YAAY,GAAG,YAAY,GAAG,WAAW,GAChD,CACE,EACN,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,2DACE,KAAK,EAAE,MAAM,CAAC,OAAO,IAAI,EAAE,EAC3B,KAAK,EAAE,YAAY,GAAG,cAAc,GAAG,aAAa,IAEnD,IAAI,CAAC,WAAW,CACd,EACL,2DACE,KAAK,EAAE,MAAM,CAAC,UAAU,IAAI,EAAE,EAC9B,KAAK,EAAE,YAAY,GAAG,iBAAiB,GAAG,gBAAgB,IAEzD,IAAI,CAAC,cAAc,CACjB,EACL,0DACE,KAAK,EAAE,MAAM,CAAC,cAAc,IAAI,EAAE,EAClC,KAAK,EAAE,YAAY,GAAG,qBAAqB,GAAG,oBAAoB,IAEjE,IAAI,CAAC,cAAc,CAClB,EACJ,8DACE,0DACE,KAAK,EAAE,MAAM,CAAC,gBAAgB,IAAI,EAAE,EACpC,KAAK,EACH,YAAY,GAAG,uBAAuB,GAAG,sBAAsB,IAGhE,IAAI,CAAC,gBAAgB,CACpB,EACJ,0DACE,KAAK,EAAE,MAAM,CAAC,eAAe,IAAI,EAAE,EACnC,KAAK,EACH,YAAY,GAAG,sBAAsB,GAAG,qBAAqB,IAG9D,IAAI,CAAC,eAAe,CACnB,CACA,EACL,IAAI,CAAC,UAAU,KACd,+DACE,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,KAAK,EAAE,MAAM,CAAC,MAAM,IAAI,EAAE,EAC1B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,UAAU,CACT,CACV,CACG,CACF,EACN;KACH;;;;;;","names":[],"sources":["src/components/searchcraft-base-search-result/searchcraft-base-search-result.module.scss?tag=searchcraft-base-search-result&encapsulation=shadow","src/components/searchcraft-base-search-result/searchcraft-base-search-result.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin interactive-result-container-base {\n  align-items: flex-start;\n  border-radius: 16px;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: 16px;\n  padding: 8px;\n\n  @media (min-width: 600px) {\n    flex-direction: row;\n  }\n}\n\n.interactiveResultContainerLight {\n  background-color: $light-search-result-container-background;\n  @include interactive-result-container-base;\n}\n\n.interactiveResultContainerDark {\n  background-color: $dark-search-result-container-background;\n  @include interactive-result-container-base;\n}\n\n.resultContainer {\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n\n  @media (min-width: 600px) {\n    flex-direction: row;\n  }\n}\n\n.interactiveIconLarge {\n  display: inline-block;\n  position: absolute;\n  right: 5px;\n  top: 8px;\n\n\n  @media (max-width: 600px) {\n   display: none;\n  }\n}\n\n.interactiveIconSmall {\n  position: absolute;\n  right: 5px;\n  top: -2px;\n  display: inline-block;\n\n\n  @media (min-width: 600px) {\n   display: none;\n  }\n}\n\n.imageContainer {\n  max-height: 540px;\n  max-width: 100%;\n\n  @media (min-width: 600px) {\n    max-height: 175px;\n    max-width: 100%;\n  }\n}\n\n.contentContainer {\n  max-height: 100%;\n  max-width: 100%;\n\n  @media (min-width: 600px) {\n    max-width: 50%;\n  }\n}\n\n@mixin image-base {\n  aspect-ratio: 2 / 1;\n  border-radius: 8px;\n  max-height: 100%;\n  max-width: 100%;\n}\n\n.imageLight {\n  @include image-base;\n  border: 1px solid $light-search-result-image-border;\n}\n\n.imageDark {\n  @include image-base;\n  border: 1px solid $dark-search-result-image-border;\n}\n\n@mixin heading-base {\n  font-family: var(--font-stack);\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 20px;\n  margin-bottom: 4px;\n  margin-top: 0px;\n  position: relative;\n}\n\n.headingLight {\n  @include heading-base;\n  color: $light-search-result-heading-color;\n}\n\n.headingDark {\n  @include heading-base;\n  color: $dark-search-result-heading-color;\n}\n\n@mixin subheading-base {\n  font-family: var(--font-stack);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n  margin-bottom: 4px;\n  margin-top: 0px;\n}\n\n.subheadingLight {\n  @include subheading-base;\n  color: $light-search-result-subheading-color;\n}\n\n.subheadingDark {\n  @include subheading-base;\n  color: $dark-search-result-subheading-color\n}\n\n@mixin body-content-base {\n  font-family: var(--font-stack);\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 4px;\n  margin-top: 0px;\n}\n\n.primaryContentLight {\n  @include body-content-base;\n  color: $light-search-result-body-content-color;\n}\n\n.primaryContentDark {\n  @include body-content-base;\n  color: $dark-search-result-body-content-color;\n}\n\n.secondaryContentLight {\n  @include body-content-base;\n  color: $light-search-result-body-content-color;\n}\n\n.secondaryContentDark {\n  @include body-content-base;\n  color: $dark-search-result-body-content-color;\n}\n\n.tertiaryContentLight {\n  @include body-content-base;\n  color: $light-search-result-body-content-color;\n}\n\n.tertiaryContentDark {\n  @include body-content-base;\n  color: $dark-search-result-body-content-color;\n}","import { Component, Event, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-base-search-result',\n  styleUrl: 'searchcraft-base-search-result.module.scss',\n  shadow: true,\n})\nexport class SearchcraftBaseSearchResult {\n  @Prop() buttonText = ''; // Label for the button\n  @Prop() imageDescription = ''; // Alternative text for the image\n  @Prop() imageSource = ''; // Source URL for the image\n  @Prop() isInteractive = false; // Determines if the result is interactive\n  @Prop() primaryContent = ''; // Primary body content\n  @Prop() secondaryContent = ''; // Secondary body content\n  @Prop() tertiaryContent = ''; // Tertiary body content\n  @Prop() headingText = ''; // Text for the heading\n  @Prop() subheadingText = ''; // Text for the subheading\n  @Prop() themeMode: 'light' | 'dark' = 'light'; // Light or dark theme context\n  @Prop() customStyles = '{}'; // New string prop for serialized styles.\n\n  @Event() buttonCallback: () => void = () => {}; // Callback for button click\n  @Event() keyDownCallback: () => void = () => {}; // Callback for key down event\n  @Event() resultCallback: () => void = () => {}; // Callback for result container click\n\n  private handleButtonClick = () => {\n    this.buttonCallback();\n  };\n\n  private handleContainerClick = () => {\n    if (this.isInteractive) {\n      this.resultCallback();\n    }\n  };\n\n  private parseStyles(): Record<string, { [key: string]: string }> {\n    try {\n      return JSON.parse(this.customStyles);\n    } catch (error) {\n      console.error('Error parsing custom styles:', error);\n      return {};\n    }\n  }\n\n  render() {\n    const isLightTheme = this.themeMode === 'light';\n    const styles = this.parseStyles();\n\n    return (\n      <div\n        class={\n          this.isInteractive\n            ? isLightTheme\n              ? 'interactiveResultContainerLight'\n              : 'interactiveResultContainerDark'\n            : 'resultContainer'\n        }\n        style={styles.container || {}}\n        tabindex='0'\n        onClick={this.handleContainerClick}\n        onKeyDown={this.keyDownCallback}\n      >\n        <div class='imageContainer'>\n          <img\n            alt={this.imageDescription}\n            src={this.imageSource}\n            style={styles.image || {}}\n            class={isLightTheme ? 'imageLight' : 'imageDark'}\n          />\n        </div>\n        <div class='contentContainer'>\n          <h2\n            style={styles.heading || {}}\n            class={isLightTheme ? 'headingLight' : 'headingDark'}\n          >\n            {this.headingText}\n          </h2>\n          <h3\n            style={styles.subheading || {}}\n            class={isLightTheme ? 'subheadingLight' : 'subheadingDark'}\n          >\n            {this.subheadingText}\n          </h3>\n          <p\n            style={styles.primaryContent || {}}\n            class={isLightTheme ? 'primaryContentLight' : 'primaryContentDark'}\n          >\n            {this.primaryContent}\n          </p>\n          <div>\n            <p\n              style={styles.secondaryContent || {}}\n              class={\n                isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark'\n              }\n            >\n              {this.secondaryContent}\n            </p>\n            <p\n              style={styles.tertiaryContent || {}}\n              class={\n                isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark'\n              }\n            >\n              {this.tertiaryContent}\n            </p>\n          </div>\n          {this.buttonText && (\n            <button\n              onClick={this.handleButtonClick}\n              style={styles.button || {}}\n              type='button'\n            >\n              {this.buttonText}\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/searchcraft-javascript-sdk/searchcraft-base-search-results.entry.js

@@ -0,0 +1,76 @@
+import { r as registerInstance, h } from './index-2e19f875.js';
+import { u as useSearchcraftStore } from './store-7a83a5d7.js';
+import { a as parseSearchKeys, s as serializeStyles, e as extractDynamicProperties } from './utils-7bff0c78.js';
+import './_commonjsHelpers-63cbe26c.js';
+
+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}.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}";
+
+const SearchcraftBaseSearchResults = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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` }))));
+    }
+};
+SearchcraftBaseSearchResults.style = searchcraftBaseSearchResultsModuleCss;
+
+export { SearchcraftBaseSearchResults as searchcraft_base_search_results };
+
+//# sourceMappingURL=searchcraft-base-search-results.entry.js.map

package/dist/searchcraft-javascript-sdk/searchcraft-base-search-results.entry.js.map

@@ -0,0 +1 @@
+{"file":"searchcraft-base-search-results.entry.esm.js","mappings":"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","names":[],"sources":["src/components/searchcraft-base-search-results/searchcraft-base-search-results.module.scss?tag=searchcraft-base-search-results&encapsulation=shadow","src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"sourcesContent":[":root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.resultsContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin: 100px 20px;\n\n  & > p {\n    align-self: center;\n  }\n\n  & > div {\n    margin-bottom: 20px;\n    img {\n      height: 300px;\n      width: 200px;\n    }\n  }\n}\n\n.adSection {\n  align-items: center;\n  border: 1px solid #DCDDDE;\n  display: flex;\n  flex-direction: column;\n  font-size: 16px;\n  justify-content: center;\n  margin: auto;\n  min-height: 150px;\n  text-align: center;\n  width: 100%;\n\n  p {\n    margin-top: 5px;\n  }\n}\n","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"],"version":3}

package/dist/{esm → searchcraft-javascript-sdk}/searchcraft-button-icon.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-0d9f850d.js';
+import { r as registerInstance, h } from './index-2e19f875.js';
 
 const SearchcraftButtonIcon = class {
     constructor(hostRef) {

package/dist/searchcraft-javascript-sdk/searchcraft-button-icon.entry.js.map

@@ -0,0 +1 @@
+{"file":"searchcraft-button-icon.entry.esm.js","mappings":";;MAMa,qBAAqB;;;;IAChC,MAAM;QACJ,QACE,4DACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,mBAAmB,IAEnC,8DAAO,EAAE,EAAC,mBAAmB,8BAAgC,EAC7D,6DACE,CAAC,EAAC,8rBAA8rB,EAChsB,MAAM,EAAC,OAAO,kBACD,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;KACH;;;;;","names":[],"sources":["src/assets/searchcraft-button-icons.tsx"],"sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-button-icon',\n  shadow: true,\n})\nexport class SearchcraftButtonIcon {\n  render() {\n    return (\n      <svg\n        width='20'\n        height='20'\n        viewBox='0 0 20 20'\n        fill='none'\n        xmlns='http://www.w3.org/2000/svg'\n        aria-labelledby='button-icon-title'\n      >\n        <title id='button-icon-title'>Searchcraft Button Icon</title>\n        <path\n          d='M2.725 5.79959L10 10.0079L17.275 5.79959M10 18.3996V9.99959M17.5 13.3329V6.66626C17.4997 6.37399 17.4225 6.08693 17.2763 5.8339C17.13 5.58086 16.9198 5.37073 16.6667 5.22459L10.8333 1.89126C10.58 1.74498 10.2926 1.66797 10 1.66797C9.70744 1.66797 9.42003 1.74498 9.16667 1.89126L3.33333 5.22459C3.08022 5.37073 2.86998 5.58086 2.72372 5.8339C2.57745 6.08693 2.5003 6.37399 2.5 6.66626V13.3329C2.5003 13.6252 2.57745 13.9123 2.72372 14.1653C2.86998 14.4183 3.08022 14.6285 3.33333 14.7746L9.16667 18.1079C9.42003 18.2542 9.70744 18.3312 10 18.3312C10.2926 18.3312 10.58 18.2542 10.8333 18.1079L16.6667 14.7746C16.9198 14.6285 17.13 14.4183 17.2763 14.1653C17.4225 13.9123 17.4997 13.6252 17.5 13.3329Z'\n          stroke='white'\n          stroke-width='1.5'\n          stroke-linecap='round'\n          stroke-linejoin='round'\n        />\n      </svg>\n    );\n  }\n}\n"],"version":3}

package/dist/{esm → searchcraft-javascript-sdk}/searchcraft-button.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-0d9f850d.js';
-import { c as classNames } from './index-72ac5051.js';
+import { r as registerInstance, a as createEvent, h, F as Fragment } from './index-2e19f875.js';
+import { c as classNames } from './index-d6567b9c.js';
+import './_commonjsHelpers-63cbe26c.js';
 
 const searchcraftButtonModuleCss = ":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}}";
-const SearchcraftButtonStyle0 = searchcraftButtonModuleCss;
 
 const SearchcraftButton = class {
     constructor(hostRef) {
@@ -23,10 +23,10 @@ const SearchcraftButton = class {
     }
     render() {
         const buttonStyle = this.getButtonStyle();
-        return (h(Fragment, { key: 'f10a9faa6357ef626c4e5414a5c8bdc1fe0b63a1' }, 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)))));
+        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)))));
     }
 };
-SearchcraftButton.style = SearchcraftButtonStyle0;
+SearchcraftButton.style = searchcraftButtonModuleCss;
 
 export { SearchcraftButton as searchcraft_button };
 

package/dist/searchcraft-javascript-sdk/searchcraft-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"searchcraft-button.entry.esm.js","mappings":";;;;AAAA,MAAM,0BAA0B,GAAG,y/BAAy/B;;MCgB/gC,iBAAiB;;;;QAepB,gBAAW,GAAG;YACpB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SACzB,CAAC;;wBAfiB,KAAK;4BACD,MAAM;qBACb,QAAQ;4BAIA,KAAK;qBACZ,OAAO;;IAEhB,cAAc;QACpB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,aAAa,GAAG,YAAY,CAAC;KAC9D;IAMD,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,QACE,EAAC,QAAQ,uDACN,IAAI,CAAC,QAAQ,IACZ,cACE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,oBAAoB,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,IAChB,mCAA4B,KAE5B,IAAI,CAAC,WAAW,CACjB,CACM,KAET,cACE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,oBAAoB,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,IAChD,WAAK,KAAK,EAAC,sBAAsB,IAC/B,mCAA4B,CACxB,KAEN,IAAI,CAAC,WAAW,CACjB,EACD,YACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,YAAY,IAAI,cAAc,EACnC,0BAA0B,CAC3B,IAEA,IAAI,CAAC,KAAK,CACN,CACA,CACV,CACQ,EACX;KACH;;;;;;","names":[],"sources":["src/components/searchcraft-button/searchcraft-button.module.scss?tag=searchcraft-button&encapsulation=shadow","src/components/searchcraft-button/searchcraft-button.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin button-base {\n  border-radius: 8px;\n  display: flex;\n  font-family: var(--font-stack);\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 20px;\n  padding: 11px 20px;\n  position: relative;\n\n  &:hover {\n    cursor: pointer;\n  }\n}\n\n.buttonLight {\n  @include button-base;\n  background-color: $light-background;\n  border: 1px solid $light-button-border;\n  color: $light-button-color;\n\n  &:hover {\n    background-color: $light-button-hover;\n  }\n\n  &:focus {\n    outline: 2px solid $light-button-outline-focus;\n  }\n}\n\n.buttonDark {\n  @include button-base;\n  background-color: $dark-background;\n  border: 1px solid $dark-button-border;\n  color: $dark-button-color;\n\n  &:hover {\n    background-color: $dark-button-hover;\n  }\n\n  &:focus {\n    outline: 2px solid $dark-button-outline-focus;\n  }\n}\n\n.spinnerMarginRight {\n  left: 4px;\n  margin-right: 4px;\n  position: absolute;\n}\n\n.spinnerMarginLeft {\n  left: 4px;\n  margin-left: 4px;\n  position: absolute;\n}\n\n.buttonLabel {\n  animation: right-and-back .2s;\n  margin-left: 4px;\n  position: relative;\n}\n\n@keyframes right-and-back {\n  0% { right: -6px; }\n  50% { right: -12px; }\n  75% { right: -6px; }\n  100% {right: 0px; }\n}","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"],"version":3}

package/dist/{components/p-155f7a59.js → searchcraft-javascript-sdk/searchcraft-clear-icon-set.entry.js}

@@ -1,10 +1,8 @@
-import { p as proxyCustomElement, H, h } from './p-c69651f6.js';
+import { r as registerInstance, h } from './index-2e19f875.js';
 
-const SearchcraftClearIconSet = /*@__PURE__*/ proxyCustomElement(class SearchcraftClearIconSet extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
+const SearchcraftClearIconSet = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
         this.type = 'clear-light';
     }
     render() {
@@ -21,24 +19,8 @@ const SearchcraftClearIconSet = /*@__PURE__*/ proxyCustomElement(class Searchcra
                 return null;
         }
     }
-}, [1, "searchcraft-clear-icon-set", {
-        "type": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["searchcraft-clear-icon-set"];
-    components.forEach(tagName => { switch (tagName) {
-        case "searchcraft-clear-icon-set":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SearchcraftClearIconSet);
-            }
-            break;
-    } });
-}
-defineCustomElement();
+};
 
-export { SearchcraftClearIconSet as S, defineCustomElement as d };
+export { SearchcraftClearIconSet as searchcraft_clear_icon_set };
 
-//# sourceMappingURL=p-155f7a59.js.map
+//# sourceMappingURL=searchcraft-clear-icon-set.entry.js.map

package/dist/searchcraft-javascript-sdk/searchcraft-clear-icon-set.entry.js.map

@@ -0,0 +1 @@
+{"file":"searchcraft-clear-icon-set.entry.esm.js","mappings":";;MAMa,uBAAuB;;;oBAMhC,aAAa;;IAEf,MAAM;QACJ,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,aAAa;gBAChB,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,aAAO,EAAE,EAAC,YAAY,yCAA2C,EACjE,YACE,CAAC,EAAC,uIAAuI,EACzI,MAAM,EAAC,OAAO,kBACD,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,YAAY;gBACf,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,aAAO,EAAE,EAAC,YAAY,wCAA0C,EAChE,YACE,CAAC,EAAC,uIAAuI,EACzI,MAAM,EAAC,OAAO,kBACD,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,aAAa;gBAChB,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,aAAO,EAAE,EAAC,YAAY,yCAA2C,EACjE,YACE,CAAC,EAAC,uCAAuC,EACzC,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,YAAY;gBACf,QACE,WACE,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,aAAO,EAAE,EAAC,YAAY,wCAA0C,EAChE,YACE,CAAC,EAAC,qBAAqB,EACvB,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YAEJ;gBACE,OAAO,IAAI,CAAC;SACf;KACF;;;;;","names":[],"sources":["src/assets/searchcraft-clear-icon-set.tsx"],"sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-clear-icon-set',\n  shadow: true,\n})\nexport class SearchcraftClearIconSet {\n  /**\n   * Type of the icon to display.\n   * Options: 'clear-light', 'clear-dark', 'arrow-light', 'arrow-dark'\n   */\n  @Prop() type: 'clear-light' | 'clear-dark' | 'arrow-light' | 'arrow-dark' =\n    'clear-light';\n\n  render() {\n    switch (this.type) {\n      case 'clear-light':\n        return (\n          <svg\n            width='22'\n            height='22'\n            viewBox='0 0 22 22'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='icon-title'\n          >\n            <title id='icon-title'>Searchcraft Clear Input Icon Light</title>\n            <path\n              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'\n              stroke='black'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'clear-dark':\n        return (\n          <svg\n            width='22'\n            height='22'\n            viewBox='0 0 22 22'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='icon-title'\n          >\n            <title id='icon-title'>Searchcraft Clear Input Icon Dark</title>\n            <path\n              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'\n              stroke='white'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'arrow-light':\n        return (\n          <svg\n            width='20'\n            height='21'\n            viewBox='0 0 20 21'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='icon-title'\n          >\n            <title id='icon-title'>Searchcraft Arrow Right Icon Light</title>\n            <path\n              d='M7.5 15.0444L12.5 10.0444L7.5 5.04443'\n              stroke='#737373'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'arrow-dark':\n        return (\n          <svg\n            width='8'\n            height='12'\n            viewBox='0 0 8 12'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='icon-title'\n          >\n            <title id='icon-title'>Searchcraft Arrow Right Icon Dark</title>\n            <path\n              d='M1.5 11L6.5 6L1.5 1'\n              stroke='#BFBFBF'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n\n      default:\n        return null;\n    }\n  }\n}\n"],"version":3}

package/dist/searchcraft-javascript-sdk/searchcraft-clear-input-button.entry.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, a as createEvent, h } from './index-2e19f875.js';
+import { c as classNames } from './index-d6567b9c.js';
+import './_commonjsHelpers-63cbe26c.js';
+
+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 SearchcraftClearInputButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clearInput = 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 ? (h("button", { class: classNames('inputClearButtonRTL', '.sc-clear-input-button-rtl'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (h("searchcraft-spinner-light", null)) : (h("searchcraft-spinner-dark", null))) : this.isLightTheme ? (h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (h("searchcraft-clear-icon-set", { type: 'clear-dark' })))) : (h("button", { class: classNames('inputClearButtonLTR', '.sc-clear-input-button-ltr'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (h("searchcraft-spinner-light", null)) : (h("searchcraft-spinner-dark", null))) : this.isLightTheme ? (h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (h("searchcraft-clear-icon-set", { type: 'clear-dark' }))));
+    }
+};
+SearchcraftClearInputButton.style = searchcraftClearInputButtonModuleCss;
+
+export { SearchcraftClearInputButton as searchcraft_clear_input_button };
+
+//# sourceMappingURL=searchcraft-clear-input-button.entry.js.map

package/dist/searchcraft-javascript-sdk/searchcraft-clear-input-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"searchcraft-clear-input-button.entry.esm.js","mappings":";;;;AAAA,MAAM,oCAAoC,GAAG,mcAAmc;;MCene,2BAA2B;;;;;QAc9B,qBAAgB,GAAG,CAAC,KAAiB;YAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;SACxB,CAAC;4BAhBsB,KAAK;sCACI,KAAK;qBAKrB,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;KAC/B;IAQD,MAAM;QACJ,OAAO,IAAI,CAAC,sBAAsB,IAChC,cACE,KAAK,EAAE,UAAU,CAAC,qBAAqB,EAAE,4BAA4B,CAAC,EACtE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,IAChB,IAAI,CAAC,YAAY,IACf,oCAA6B,KAE7B,mCAA4B,CAC7B,IACC,IAAI,CAAC,YAAY,IACnB,kCAA4B,IAAI,EAAC,aAAa,GAAG,KAEjD,kCAA4B,IAAI,EAAC,YAAY,GAAG,CACjD,CACM,KAET,cACE,KAAK,EAAE,UAAU,CAAC,qBAAqB,EAAE,4BAA4B,CAAC,EACtE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,IAChB,IAAI,CAAC,YAAY,IACf,oCAA6B,KAE7B,mCAA4B,CAC7B,IACC,IAAI,CAAC,YAAY,IACnB,kCAA4B,IAAI,EAAC,aAAa,GAAG,KAEjD,kCAA4B,IAAI,EAAC,YAAY,GAAG,CACjD,CACM,CACV,CAAC;KACH;;;;;;","names":[],"sources":["src/components/searchcraft-clear-input-button/searchcraft-clear-input-button.module.scss?tag=searchcraft-clear-input-button&encapsulation=shadow","src/components/searchcraft-clear-input-button/searchcraft-clear-input-button.tsx"],"sourcesContent":[":root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.inputClearButtonLTR {\n  align-items: center;\n  background: none;\n  border: none;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0;\n  position: absolute;\n  right: 25px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 20px;\n}\n\n.inputClearButtonRTL {\n  align-items: center;\n  background: none;\n  border: none;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  left: 25px;\n  padding: 0;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 20px;\n}","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"],"version":3}

package/dist/searchcraft-javascript-sdk/searchcraft-error-message.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h } from './index-2e19f875.js';
+import { c as classNames } from './index-d6567b9c.js';
+import './_commonjsHelpers-63cbe26c.js';
+
+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 SearchcraftErrorMessage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.errorMessage = undefined;
+        this.theme = 'light';
+    }
+    render() {
+        const errorMessageStyle = this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';
+        return (h("p", { key: 'f520ac38f2f42e9780454aef5e25576095ae5ee9', class: classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
+    }
+};
+SearchcraftErrorMessage.style = searchcraftErrorMessageModuleCss;
+
+export { SearchcraftErrorMessage as searchcraft_error_message };
+
+//# sourceMappingURL=searchcraft-error-message.entry.js.map

package/dist/searchcraft-javascript-sdk/searchcraft-error-message.entry.js.map

@@ -0,0 +1 @@
+{"file":"searchcraft-error-message.entry.esm.js","mappings":";;;;AAAA,MAAM,gCAAgC,GAAG,6SAA6S;;MCQzU,uBAAuB;;;;qBASA,OAAO;;IAEzC,MAAM;QACJ,MAAM,iBAAiB,GACrB,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;QAEpE,QACE,0DAAG,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IACpC,IAAI,CAAC,YAAY,IAAI,0BAA0B,CAC9C,EACJ;KACH;;;;;;","names":[],"sources":["src/components/searchcraft-error-message/searchcraft-error-message.module.scss?tag=searchcraft-error-message&encapsulation=shadow","src/components/searchcraft-error-message/searchcraft-error-message.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin error-message-base {\n  font-family: var(--font-stack);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n  margin-top: 4px;\n}\n\n.errorMessageLight {\n  @include error-message-base;\n  color: $light-input-caption-color-error;\n}\n\n.errorMessageDark {\n  @include error-message-base;\n  color: $dark-input-caption-color-error;\n}","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"],"version":3}