@searchcraft/javascript-sdk 0.3.0 → 0.4.0

package/dist/esm/searchcraft-auto-search-form.entry.js

@@ -0,0 +1,156 @@
+import { r as registerInstance, c as createEvent, h } from './index-88dc5f88.js';
+import { u as useSearchcraftStore, i as ie } from './store-52436995.js';
+import { p as parseCustomStyles } from './utils-89a02921.js';
+import { p as packageJson } from './package-ee16f835.js';
+
+const searchcraftAutoSearchFormModuleCss = ":root{--sc-spinner-size:20px;--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}.searchcraft-auto-search-form{display:flex;flex-direction:column;gap:4px}";
+const SearchcraftAutoSearchFormStyle0 = searchcraftAutoSearchFormModuleCss;
+
+const SearchcraftAutoSearchForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.inputClearedOrNoResults = createEvent(this, "inputClearedOrNoResults", 7);
+        this.querySubmit = createEvent(this, "querySubmit", 7);
+        this.debounceTimeout = null;
+        this.debounceDelay = 0;
+        this.searchStore = useSearchcraftStore.getState();
+        this.setConfigFromString = (configString) => {
+            if (configString) {
+                try {
+                    const parsedConfig = JSON.parse(configString);
+                    this.config = parsedConfig;
+                }
+                catch (_a) {
+                    console.error('Error: Invalid config passed to searchcraft-auto-search-form.');
+                }
+            }
+        };
+        this.handleInputChange = (event) => {
+            const target = event.detail;
+            if (target === this.query) {
+                return;
+            }
+            this.query = target;
+            // TODO: When input changes, reset any active filters
+            // this.searchStore.resetAllFilters();
+            const performSearchActions = () => {
+                if (this.query.trim() === '') {
+                    this.searchStore.setQuery('');
+                    this.searchResults = null;
+                    this.searchStore.setSearchResults(null);
+                    this.inputClearedOrNoResults.emit();
+                }
+                else {
+                    this.searchStore.setQuery(this.query);
+                    this.querySubmit.emit();
+                    this.runSearch();
+                }
+            };
+            // Only set a timeout if debounceDelay > 0
+            if (this.debounceDelay > 0) {
+                if (this.debounceTimeout) {
+                    clearTimeout(this.debounceTimeout);
+                }
+                this.debounceTimeout = setTimeout(performSearchActions, this.debounceDelay);
+            }
+            else {
+                // Otherwise just call search actions directly
+                performSearchActions();
+            }
+        };
+        this.handleClearInput = () => {
+            if (this.query === '' && !this.searchResults) {
+                return;
+            }
+            this.query = '';
+            this.searchResults = null;
+            this.searchStore.setQuery('');
+            this.searchStore.setSearchResults(null);
+            if (typeof this.clearInput === 'function') {
+                this.clearInput();
+            }
+            if (this.debounceTimeout) {
+                clearTimeout(this.debounceTimeout);
+            }
+            this.error = false;
+            this.inputClearedOrNoResults.emit();
+        };
+        this.runSearch = async () => {
+            if (this.query.trim() === '') {
+                this.error = true;
+                this.inputClearedOrNoResults.emit();
+            }
+            else {
+                this.error = false;
+                this.searchStore.setQuery(this.query);
+                try {
+                    await this.searchStore.search();
+                }
+                catch (error) {
+                    this.error = true;
+                    this.inputClearedOrNoResults.emit();
+                }
+            }
+        };
+        this.handleFormSubmit = async (event) => {
+            event.preventDefault();
+            await this.runSearch();
+        };
+        this.autoSearchFormClass = '';
+        this.clearInput = () => { };
+        this.configString = '';
+        this.customStylesForInput = {};
+        this.inputCaptionValue = '';
+        this.labelForInput = '';
+        this.placeholderValue = 'Search here';
+        this.searchContainerClass = '';
+        this.config = {
+            readKey: '',
+            endpointURL: '',
+            index: [],
+        };
+        this.error = false;
+        this.isRequesting = false;
+        this.query = '';
+        this.searchResults = null;
+    }
+    init(configString) {
+        this.setConfigFromString(configString);
+        const searchcraft = new ie(this.config, {
+            sdkName: packageJson.name,
+            sdkVersion: packageJson.version,
+        });
+        this.searchStore.initialize(searchcraft, true);
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            this.isRequesting = state.isRequesting;
+            this.searchResults = Object.assign({}, state.searchResults);
+        });
+    }
+    connectedCallback() {
+        if (this.configString) {
+            this.init(this.configString);
+        }
+    }
+    onConfigChange(configString) {
+        if (configString) {
+            this.init(configString);
+        }
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    render() {
+        const parsedCustomStyles = parseCustomStyles(this.customStylesForInput);
+        return (h("form", { key: 'db78fbc63d2982cc39b54bdecce7d88828540d79', class: 'searchcraft-auto-search-form', onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: 'a7c81bc96652fa062cc99b9743c3db248f17127b', label: this.labelForInput }), h("searchcraft-input", { key: '04b77daaf3e0ae35e38b4f7cf6d1318a349fe7cb', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "is-requesting": this.isRequesting, onClearInput: this.handleClearInput, onInputChange: this.handleInputChange.bind(this), "placeholder-value": this.placeholderValue, query: this.query }), this.error && (h("searchcraft-error-message", { key: '4752c7ea9066e955f3b7dc00fd8cbf99c8113a54', errorMessage: 'Please enter a search query.' }))));
+    }
+    static get watchers() { return {
+        "configString": ["onConfigChange"]
+    }; }
+};
+SearchcraftAutoSearchForm.style = SearchcraftAutoSearchFormStyle0;
+
+export { SearchcraftAutoSearchForm as searchcraft_auto_search_form };
+
+//# sourceMappingURL=searchcraft-auto-search-form.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"searchcraft-auto-search-form.entry.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","src/components/searchcraft-auto-search-form/searchcraft-auto-search-form.tsx"],"sourcesContent":[".searchcraft-auto-search-form {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  type EventEmitter,\n  h,\n  Watch,\n} from '@stencil/core';\n\nimport {\n  type SearchcraftConfig,\n  SearchcraftCore,\n  type SearchcraftResponse,\n} from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport { parseCustomStyles } from '@utils/utils';\nimport type { ScInputCustomEvent } from '@components/searchcraft-input/searchcraft-input';\n\nimport packageJson from '../../../package.json';\n\n@Component({\n  tag: 'searchcraft-auto-search-form',\n  styleUrl: 'searchcraft-auto-search-form.module.scss',\n  shadow: false,\n})\nexport class SearchcraftAutoSearchForm {\n  @Prop() autoSearchFormClass = '';\n  @Prop() clearInput: () => void = () => {};\n  @Prop() configString = '';\n  @Prop() customStylesForInput: string | Record<string, string> = {};\n  @Prop() inputCaptionValue = '';\n  @Prop() labelForInput = '';\n  @Prop() placeholderValue = 'Search here';\n  @Prop() searchContainerClass = '';\n\n  @Event() inputClearedOrNoResults: EventEmitter<void>;\n  @Event() querySubmit: EventEmitter<string>;\n\n  @State() config: SearchcraftConfig = {\n    readKey: '',\n    endpointURL: '',\n    index: [],\n  };\n  @State() error = false;\n  @State() isRequesting = false;\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  private debounceTimeout: ReturnType<typeof setTimeout> | null = null;\n  private debounceDelay = 0;\n  private searchStore = useSearchcraftStore.getState();\n  unsubscribe: () => void;\n\n  private setConfigFromString = (configString: string) => {\n    if (configString) {\n      try {\n        const parsedConfig = JSON.parse(configString) as SearchcraftConfig;\n        this.config = parsedConfig;\n      } catch {\n        console.error(\n          'Error: Invalid config passed to searchcraft-auto-search-form.',\n        );\n      }\n    }\n  };\n\n  init(configString: string) {\n    this.setConfigFromString(configString);\n    const searchcraft = new SearchcraftCore(this.config, {\n      sdkName: packageJson.name,\n      sdkVersion: packageJson.version,\n    });\n    this.searchStore.initialize(searchcraft, true);\n\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.isRequesting = state.isRequesting;\n      this.searchResults = { ...state.searchResults };\n    });\n  }\n\n  connectedCallback() {\n    if (this.configString) {\n      this.init(this.configString);\n    }\n  }\n\n  @Watch('configString')\n  onConfigChange(configString: string) {\n    if (configString) {\n      this.init(configString);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  handleInputChange = (event: ScInputCustomEvent<string>) => {\n    const target = event.detail;\n    if (target === this.query) {\n      return;\n    }\n    this.query = target;\n    // TODO: When input changes, reset any active filters\n    // this.searchStore.resetAllFilters();\n\n    const performSearchActions = () => {\n      if (this.query.trim() === '') {\n        this.searchStore.setQuery('');\n        this.searchResults = null;\n        this.searchStore.setSearchResults(null);\n        this.inputClearedOrNoResults.emit();\n      } else {\n        this.searchStore.setQuery(this.query);\n        this.querySubmit.emit();\n        this.runSearch();\n      }\n    };\n\n    // Only set a timeout if debounceDelay > 0\n    if (this.debounceDelay > 0) {\n      if (this.debounceTimeout) {\n        clearTimeout(this.debounceTimeout);\n      }\n      this.debounceTimeout = setTimeout(\n        performSearchActions,\n        this.debounceDelay,\n      );\n    } else {\n      // Otherwise just call search actions directly\n      performSearchActions();\n    }\n  };\n\n  handleClearInput = () => {\n    if (this.query === '' && !this.searchResults) {\n      return;\n    }\n    this.query = '';\n    this.searchResults = null;\n    this.searchStore.setQuery('');\n    this.searchStore.setSearchResults(null);\n\n    if (typeof this.clearInput === 'function') {\n      this.clearInput();\n    }\n\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout);\n    }\n\n    this.error = false;\n    this.inputClearedOrNoResults.emit();\n  };\n\n  private runSearch = async () => {\n    if (this.query.trim() === '') {\n      this.error = true;\n      this.inputClearedOrNoResults.emit();\n    } else {\n      this.error = false;\n      this.searchStore.setQuery(this.query);\n\n      try {\n        await this.searchStore.search();\n      } catch (error) {\n        this.error = true;\n        this.inputClearedOrNoResults.emit();\n      }\n    }\n  };\n\n  handleFormSubmit = async (event: Event) => {\n    event.preventDefault();\n    await this.runSearch();\n  };\n\n  render() {\n    const parsedCustomStyles = parseCustomStyles(this.customStylesForInput);\n    return (\n      <form\n        class='searchcraft-auto-search-form'\n        onSubmit={this.handleFormSubmit}\n      >\n        <searchcraft-input-label label={this.labelForInput} />\n        <searchcraft-input\n          customStyles={parsedCustomStyles}\n          input-caption-value={this.inputCaptionValue}\n          is-requesting={this.isRequesting}\n          onClearInput={this.handleClearInput}\n          onInputChange={this.handleInputChange.bind(this)}\n          placeholder-value={this.placeholderValue}\n          query={this.query}\n        />\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-base-search-form.entry.js

@@ -1,7 +1,8 @@
-import { r as registerInstance, c as createEvent, h } from './index-0ac5bb53.js';
-import { u as useSearchcraftStore, b as useThemeStore, g } from './store-6af9ea01.js';
+import { r as registerInstance, c as createEvent, h } from './index-88dc5f88.js';
+import { u as useSearchcraftStore, a as useThemeStore, i as ie } from './store-52436995.js';
+import { p as packageJson } from './package-ee16f835.js';
 
-const searchcraftBaseSearchFormModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.formLTR{font-family:var(--font-stack);text-align:left}.formRTL{font-family:var(--font-stack);text-align:right}.searchContainer{align-items:center;display:flex}";
+const searchcraftBaseSearchFormModuleCss = ":root{--sc-spinner-size:20px;--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}.searchcraft-base-search-form-input-container{align-items:center;display:flex;gap:8px}";
 const SearchcraftBaseSearchFormStyle0 = searchcraftBaseSearchFormModuleCss;
 
 const SearchcraftBaseSearchForm = class {
@@ -12,7 +13,10 @@ const SearchcraftBaseSearchForm = class {
         this.searchStore = useSearchcraftStore.getState();
         this.themeStore = useThemeStore.getState();
         this.componentDidLoad = () => {
-            const searchcraft = new g(this.config);
+            const searchcraft = new ie(this.config, {
+                sdkName: packageJson.name,
+                sdkVersion: packageJson.version,
+            });
             this.searchStore.initialize(searchcraft, true);
         };
         this.handleFormSubmit = async (event) => {
@@ -38,19 +42,20 @@ const SearchcraftBaseSearchForm = class {
             this.themeStore.toggleTheme();
         };
         this.config = {
-            apiKey: '',
+            readKey: '',
             endpointURL: '',
             index: [],
         };
         this.errorMessage = 'Search was unsuccessful';
-        this.labelForInput = 'Search';
-        this.rightToLeftOrientation = false;
+        this.inputLabel = 'Search';
+        this.buttonLabel = 'Find';
+        this.buttonPlacement = 'right';
         this.error = false;
         this.query = '';
         this.searchResults = null;
     }
     render() {
-        return (h("form", { key: 'f3fa26d678324efddf3bf2bd12b130f24d8f2788', class: this.rightToLeftOrientation ? 'formRTL' : 'formLTR', onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: 'a8011d97796cbd1334e55b18b7e92b85c498e096', label: this.labelForInput }), h("div", { key: '19323cdc3b4d854987710fa45bab9d91d0046c5c', class: 'searchContainer' }, this.rightToLeftOrientation && h("searchcraft-button", { key: '0a8349e990f79ac704a477a615c6072dec5230c2' }), h("searchcraft-input", { key: '3a2a00544c5bcc4ad2e81bc68002a2a8a76bbfda', onClearInput: this.handleClearInput, onSearchInputChange: this.handleSearchInputChange, query: this.query, rightToLeftOrientation: this.rightToLeftOrientation }), !this.rightToLeftOrientation && (h("searchcraft-button", { key: '5094f79b0fccd5c44725176c8f308cc4e0c47eec', onButtonClick: this.handleFormSubmit }))), this.error && (h("searchcraft-error-message", { key: '70fc3e31319e30c9e38a158ee82b8e7c74f88e18', errorMessage: this.errorMessage }))));
+        return (h("form", { key: '3200182783a9612326e4350beda3e0facc3abd83', class: 'searchcraft-base-search-form', onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: '51fbd74cab7f82435b21edcee9855fe570199d5a', label: this.inputLabel }), h("div", { key: '245a6e8fd2abf14f379e8dee9a2012a7a0fa7636', class: 'searchcraft-base-search-form-input-container' }, this.buttonPlacement === 'left' && (h("searchcraft-button", { key: '53b09c93f5ebaf548b6954923eaa5eb0e8c6ba18', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), h("searchcraft-input", { key: 'b8154b313b93cbd043bf141bdb505f8fc874428b', onClearInput: this.handleClearInput, onInputChange: this.handleSearchInputChange, query: this.query }), this.buttonPlacement === 'right' && (h("searchcraft-button", { key: '534fbb59f038a670f2a65293fa5dd6a9a3cba92d', onButtonClick: this.handleFormSubmit, label: this.buttonLabel }))), this.error && (h("searchcraft-error-message", { key: '8ed98aa322c4104346ac3dcb578133d8e2758866', errorMessage: this.errorMessage }))));
     }
 };
 SearchcraftBaseSearchForm.style = SearchcraftBaseSearchFormStyle0;

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

@@ -1 +1 @@
-{"file":"searchcraft-base-search-form.entry.js","mappings":";;;AAAA,MAAM,kCAAkC,GAAG,kNAAkN,CAAC;AAC9P,wCAAe,kCAAkC;;MCepC,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,mBAAmB,EAAE,IAAI,CAAC,uBAAuB,EACjD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACnD,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":[":root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.formLTR {\n  font-family: var(--font-stack);\n  text-align: left;\n}\n\n.formRTL {\n  font-family: var(--font-stack);\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';\n\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            onSearchInputChange={this.handleSearchInputChange}\n            query={this.query}\n            rightToLeftOrientation={this.rightToLeftOrientation}\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}
+{"file":"searchcraft-base-search-form.entry.js","mappings":";;;;AAAA,MAAM,kCAAkC,GAAG,inGAAinG,CAAC;AAC7pG,wCAAe,kCAAkC;;MCcpC,yBAAyB;;;;QAW3B,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,EAAe,CAAC,IAAI,CAAC,MAAM,EAAE;gBACnD,OAAO,EAAE,WAAW,CAAC,IAAI;gBACzB,UAAU,EAAE,WAAW,CAAC,OAAO;aAChC,CAAC,CAAC;YACH,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;sBAlDkC;YAClC,OAAO,EAAE,EAAE;YACX,WAAW,EAAE,EAAE;YACf,KAAK,EAAE,EAAE;SACV;4BACsB,yBAAyB;0BAC3B,QAAQ;2BACP,MAAM;+BACgB,OAAO;qBAIlC,KAAK;qBACL,EAAE;6BACqB,IAAI;;IAsC5C,MAAM;QACJ,QACE,6DACE,KAAK,EAAC,8BAA8B,EACpC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,IAE/B,gFAAyB,KAAK,EAAE,IAAI,CAAC,UAAU,GAAI,EACnD,4DAAK,KAAK,EAAC,8CAA8C,IACtD,IAAI,CAAC,eAAe,KAAK,MAAM,KAC9B,2EACE,aAAa,EAAE,IAAI,CAAC,gBAAgB,EACpC,KAAK,EAAE,IAAI,CAAC,WAAW,GACvB,CACH,EACD,0EACE,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,aAAa,EAAE,IAAI,CAAC,uBAAuB,EAC3C,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACD,IAAI,CAAC,eAAe,KAAK,OAAO,KAC/B,2EACE,aAAa,EAAE,IAAI,CAAC,gBAAgB,EACpC,KAAK,EAAE,IAAI,CAAC,WAAW,GACvB,CACH,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","src/components/searchcraft-base-search-form/searchcraft-base-search-form.tsx"],"sourcesContent":[".searchcraft-base-search-form {\n\n}\n\n.searchcraft-base-search-form-input-container {\n  align-items: center;\n  display: flex;\n  gap: 8px;\n}","import { Component, h, Event, Prop, State } from '@stencil/core';\n\nimport { type SearchcraftConfig, SearchcraftCore } from '@searchcraft/core';\n\nimport { useSearchcraftStore, useThemeStore } from '@provider/store';\n\nimport type { ScInputCustomEvent } from '@components/searchcraft-input/searchcraft-input';\n\nimport packageJson from '../../../package.json';\n\n@Component({\n  tag: 'searchcraft-base-search-form',\n  styleUrl: 'searchcraft-base-search-form.module.scss',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchForm {\n  @Prop() config: SearchcraftConfig = {\n    readKey: '',\n    endpointURL: '',\n    index: [],\n  };\n  @Prop() errorMessage = 'Search was unsuccessful';\n  @Prop() inputLabel = 'Search';\n  @Prop() buttonLabel = 'Find';\n  @Prop() buttonPlacement: 'right' | 'left' = 'right';\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      sdkName: packageJson.name,\n      sdkVersion: packageJson.version,\n    });\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='searchcraft-base-search-form'\n        onSubmit={this.handleFormSubmit}\n      >\n        <searchcraft-input-label label={this.inputLabel} />\n        <div class='searchcraft-base-search-form-input-container'>\n          {this.buttonPlacement === 'left' && (\n            <searchcraft-button\n              onButtonClick={this.handleFormSubmit}\n              label={this.buttonLabel}\n            />\n          )}\n          <searchcraft-input\n            onClearInput={this.handleClearInput}\n            onInputChange={this.handleSearchInputChange}\n            query={this.query}\n          />\n          {this.buttonPlacement === 'right' && (\n            <searchcraft-button\n              onButtonClick={this.handleFormSubmit}\n              label={this.buttonLabel}\n            />\n          )}\n        </div>\n        {this.error && (\n          <searchcraft-error-message errorMessage={this.errorMessage} />\n        )}\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/searchcraft-base-search-result.entry.js

@@ -0,0 +1,70 @@
+import { r as registerInstance, h, F as Fragment } from './index-88dc5f88.js';
+import { u as useSearchcraftStore } from './store-52436995.js';
+
+const searchcraftBaseSearchResultModuleCss = ":root{--sc-spinner-size:20px;--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}.searchcraft-search-result-container{all:unset;align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;color:inherit;background-color:var(--sc-surface-neutral-primary)}@media (min-width: 900px){.searchcraft-search-result-container{flex-direction:row}}a.searchcraft-search-result-container{cursor:pointer;transition:background-color 100ms}.searchcraft-base-search-result-content-container{flex:1;display:flex;flex-direction:column;gap:8px}.searchcraft-search-result-image{border-radius:var(--sc-image-border-radius);width:100%}@media (min-width: 900px){.searchcraft-search-result-image{width:200px}}.searchcraft-base-search-result-title{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-bold-font-size);font-weight:var(--sc-body-bold-font-weight);line-height:var(--sc-body-bold-line-height);margin:0;color:var(--sc-content-neutral-primary)}.searchcraft-base-search-result-subtitle{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-font-size);font-weight:var(--sc-body-small-font-weight);line-height:var(--sc-body-small-line-height);margin:0;color:var(--sc-content-disabled)}.searchcraft-base-search-result-body-content{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);margin:0;color:var(--sc-content-neutral-secondary)}.searchcraft-base-search-result-footer-content{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);margin:0;color:var(--sc-content-disabled)}";
+const SearchcraftBaseSearchResultStyle0 = searchcraftBaseSearchResultModuleCss;
+
+const SearchcraftBaseSearchResult = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.searchcraftStore = useSearchcraftStore.getState();
+        this.recordMeasureEvent = () => {
+            var _a, _b, _c;
+            const searchcraft = this.searchcraftStore.getSearchcraftInstance();
+            if (searchcraft) {
+                const document_position = this.documentPosition;
+                const search_term = this.searchcraftStore.query;
+                const number_of_documents = ((_c = (_b = (_a = this.searchcraftStore.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.length) || 0;
+                searchcraft.sendMeasureEvent('document_clicked', {
+                    document_position,
+                    number_of_documents,
+                    search_term,
+                });
+            }
+        };
+        this.parseStyles = () => {
+            if (this.customStyles) {
+                try {
+                    return JSON.parse(this.customStyles);
+                }
+                catch (error) {
+                    console.error('Error parsing custom styles:', error);
+                    return {};
+                }
+            }
+            return {};
+        };
+        this.titleContent = undefined;
+        this.subtitleContent = undefined;
+        this.bodyContent = undefined;
+        this.footerContent = undefined;
+        this.buttonLabel = undefined;
+        this.buttonHref = undefined;
+        this.buttonTarget = '_blank';
+        this.buttonRel = undefined;
+        this.containerHref = undefined;
+        this.containerTarget = '_blank';
+        this.containerRel = undefined;
+        this.imageSrc = undefined;
+        this.imageAlt = undefined;
+        this.imagePlacement = undefined;
+        this.customStyles = undefined;
+        this.documentPosition = 0;
+    }
+    render() {
+        const styles = this.parseStyles();
+        const imageContainer = this.imageSrc && (h("img", { alt: this.imageAlt, class: 'searchcraft-search-result-image', src: this.imageSrc, style: styles.image || {} }));
+        const contentContainer = (h(Fragment, null, this.imageSrc && this.imagePlacement === 'left' && imageContainer, h("div", { class: 'searchcraft-base-search-result-content-container' }, this.titleContent && (h("h2", { class: 'searchcraft-base-search-result-title', style: styles.title || {} }, this.titleContent)), this.subtitleContent && (h("h3", { class: 'searchcraft-base-search-result-subtitle', style: styles.subtitle || {} }, this.subtitleContent)), this.bodyContent && (h("p", { class: 'searchcraft-base-search-result-body-content', style: styles.primaryContent || {} }, this.bodyContent)), this.footerContent && (h("p", { class: 'searchcraft-base-search-result-footer-content', style: styles.secondaryContent || {} }, this.footerContent)), this.buttonHref && !this.containerHref && this.buttonLabel && (h("a", { class: 'searchcraft-search-result-button', href: this.buttonHref, style: styles.button || {}, target: this.buttonTarget, rel: this.buttonRel }, this.buttonLabel))), this.imageSrc && this.imagePlacement === 'right' && imageContainer));
+        /** Render as an anchor tag if the containerHref prop is present. */
+        if (this.containerHref) {
+            return (h("a", { class: 'searchcraft-search-result-container', onClick: this.recordMeasureEvent, href: this.containerHref, rel: this.containerRel, style: styles.container || {}, tabindex: '0', target: this.containerTarget }, contentContainer));
+        }
+        /** Render as a div if no href prop. */
+        return (h("div", { class: 'searchcraft-search-result-container', style: styles.container || {} }, contentContainer));
+    }
+};
+SearchcraftBaseSearchResult.style = SearchcraftBaseSearchResultStyle0;
+
+export { SearchcraftBaseSearchResult as searchcraft_base_search_result };
+
+//# sourceMappingURL=searchcraft-base-search-result.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"searchcraft-base-search-result.entry.js","mappings":"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","names":[],"sources":["src/components/searchcraft-base-search-result/searchcraft-base-search-result.module.scss?tag=searchcraft-base-search-result","src/components/searchcraft-base-search-result/searchcraft-base-search-result.tsx"],"sourcesContent":["\n.searchcraft-search-result-container {\n  all: unset;\n  align-items: flex-start;\n  border-radius: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 8px;\n  color: inherit;\n\n  background-color: var(--sc-surface-neutral-primary);\n\n  @media (min-width: 900px) {\n    flex-direction: row;\n  }\n}\n\na.searchcraft-search-result-container {\n  cursor: pointer;\n  transition: background-color 100ms;\n}\n\n.searchcraft-base-search-result-content-container {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.searchcraft-search-result-image {\n  border-radius: var(--sc-image-border-radius);\n  width: 100%;\n\n  @media (min-width: 900px) {\n    width: 200px;\n  }\n}\n\n.searchcraft-base-search-result-title {\n  @include body-bold();\n  margin: 0;\n  color: var(--sc-content-neutral-primary);\n}\n\n.searchcraft-base-search-result-subtitle {\n  @include body-small();\n  margin: 0;\n  color: var(--sc-content-disabled);\n}\n\n.searchcraft-base-search-result-body-content {\n  @include body();\n  margin: 0;\n  color: var(--sc-content-neutral-secondary);\n}\n\n.searchcraft-base-search-result-footer-content {\n  @include body();\n  margin: 0;\n  color: var(--sc-content-disabled);\n}\n","import { useSearchcraftStore } from '@provider/store';\nimport { Component, Fragment, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-base-search-result',\n  styleUrl: 'searchcraft-base-search-result.module.scss',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchResult {\n  @Prop() titleContent: string | undefined;\n  @Prop() subtitleContent: string | undefined;\n  @Prop() bodyContent: string | undefined;\n  @Prop() footerContent: string | undefined;\n  @Prop() buttonLabel: string | undefined;\n  @Prop() buttonHref: string | undefined;\n  @Prop() buttonTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  @Prop() buttonRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  @Prop() containerHref: string | undefined;\n  @Prop() containerTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  @Prop() containerRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  @Prop() imageSrc: string | undefined;\n  @Prop() imageAlt: string | undefined;\n  @Prop() imagePlacement: 'left' | 'right';\n  @Prop() customStyles: string | undefined;\n  @Prop() documentPosition = 0;\n\n  private searchcraftStore = useSearchcraftStore.getState();\n\n  private recordMeasureEvent = () => {\n    const searchcraft = this.searchcraftStore.getSearchcraftInstance();\n\n    if (searchcraft) {\n      const document_position = this.documentPosition;\n      const search_term = this.searchcraftStore.query;\n      const number_of_documents =\n        this.searchcraftStore.searchResults?.data?.hits?.length || 0;\n\n      searchcraft.sendMeasureEvent('document_clicked', {\n        document_position,\n        number_of_documents,\n        search_term,\n      });\n    }\n  };\n\n  private parseStyles = (): Record<string, { [key: string]: string }> => {\n    if (this.customStyles) {\n      try {\n        return JSON.parse(this.customStyles);\n      } catch (error) {\n        console.error('Error parsing custom styles:', error);\n        return {};\n      }\n    }\n    return {};\n  };\n\n  render() {\n    const styles = this.parseStyles();\n    const imageContainer = this.imageSrc && (\n      <img\n        alt={this.imageAlt}\n        class='searchcraft-search-result-image'\n        src={this.imageSrc}\n        style={styles.image || {}}\n      />\n    );\n\n    const contentContainer = (\n      <Fragment>\n        {this.imageSrc && this.imagePlacement === 'left' && imageContainer}\n        <div class='searchcraft-base-search-result-content-container'>\n          {this.titleContent && (\n            <h2\n              class='searchcraft-base-search-result-title'\n              style={styles.title || {}}\n            >\n              {this.titleContent}\n            </h2>\n          )}\n          {this.subtitleContent && (\n            <h3\n              class='searchcraft-base-search-result-subtitle'\n              style={styles.subtitle || {}}\n            >\n              {this.subtitleContent}\n            </h3>\n          )}\n          {this.bodyContent && (\n            <p\n              class='searchcraft-base-search-result-body-content'\n              style={styles.primaryContent || {}}\n            >\n              {this.bodyContent}\n            </p>\n          )}\n\n          {this.footerContent && (\n            <p\n              class='searchcraft-base-search-result-footer-content'\n              style={styles.secondaryContent || {}}\n            >\n              {this.footerContent}\n            </p>\n          )}\n          {this.buttonHref && !this.containerHref && this.buttonLabel && (\n            <a\n              class='searchcraft-search-result-button'\n              href={this.buttonHref}\n              style={styles.button || {}}\n              target={this.buttonTarget}\n              rel={this.buttonRel}\n            >\n              {this.buttonLabel}\n            </a>\n          )}\n        </div>\n        {this.imageSrc && this.imagePlacement === 'right' && imageContainer}\n      </Fragment>\n    );\n\n    /** Render as an anchor tag if the containerHref prop is present. */\n    if (this.containerHref) {\n      return (\n        <a\n          class='searchcraft-search-result-container'\n          onClick={this.recordMeasureEvent}\n          href={this.containerHref}\n          rel={this.containerRel}\n          style={styles.container || {}}\n          tabindex='0'\n          target={this.containerTarget}\n        >\n          {contentContainer}\n        </a>\n      );\n    }\n\n    /** Render as a div if no href prop. */\n    return (\n      <div\n        class='searchcraft-search-result-container'\n        style={styles.container || {}}\n      >\n        {contentContainer}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/searchcraft-base-search-results.entry.js

@@ -0,0 +1,125 @@
+import { r as registerInstance, c as createEvent, h } from './index-88dc5f88.js';
+import { u as useSearchcraftStore } from './store-52436995.js';
+import { g as getDocumentValueFromSearchResultMapping, s as serializeStyles } from './utils-89a02921.js';
+
+const searchcraftBaseSearchResultsModuleCss = ":root{--sc-spinner-size:20px;--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}.searchcraft-search-results-container{display:flex;flex-direction:column;justify-content:center;gap:16px}.searchcraft-ad-section{align-items:center;background-color:#F1F1F1;border-radius:16px;display:flex;flex-direction:column;font-size:16px;justify-content:center;min-height:176px;text-align:center}.searchcraft-ad-section p{margin:0;color:var(--sc-content-disabled)}.searchcraft-search-results-empty-state-container{text-align:center}.searchcraft-search-results-error-message-container{text-align:center}";
+const SearchcraftBaseSearchResultsStyle0 = searchcraftBaseSearchResultsModuleCss;
+
+const SearchcraftBaseSearchResults = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.noResults = createEvent(this, "noResults", 7);
+        this.parseSearchResultMappings = (mappingString) => {
+            if (mappingString) {
+                try {
+                    this.parsedMappings = JSON.parse(this.searchResultMappings);
+                }
+                catch (_a) {
+                    console.error('Error: Invalid searchResultsMappings passed to searchcraft-base-search-results.');
+                }
+            }
+        };
+        this.adInterval = 4;
+        this.customStylesForResults = undefined;
+        this.searchResultMappings = undefined;
+        this.placeAdAtEnd = false;
+        this.placeAdAtStart = true;
+        this.resultImagePlacement = 'right';
+        this.buttonLabel = undefined;
+        this.buttonTarget = '_blank';
+        this.buttonRel = undefined;
+        this.containerTarget = '_blank';
+        this.containerRel = undefined;
+        this.hasSearched = false;
+        this.query = '';
+        this.searchResults = null;
+        this.parsedMappings = undefined;
+    }
+    onItemsChange(searchResultMappings) {
+        this.parseSearchResultMappings(searchResultMappings);
+    }
+    connectedCallback() {
+        this.parseSearchResultMappings(this.searchResultMappings);
+    }
+    componentDidLoad() {
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            if (state.query.length > 0) {
+                this.hasSearched = true;
+            }
+            else {
+                this.hasSearched = false;
+            }
+            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();
+        }
+    }
+    renderDocument(document, index) {
+        /**
+         * Index field values -> Result container props mappings.
+         */
+        const titleContent = getDocumentValueFromSearchResultMapping(document, this.parsedMappings.title);
+        const subtitleContent = getDocumentValueFromSearchResultMapping(document, this.parsedMappings.subtitle);
+        const bodyContent = getDocumentValueFromSearchResultMapping(document, this.parsedMappings.body);
+        const containerHref = getDocumentValueFromSearchResultMapping(document, this.parsedMappings.containerHref);
+        const buttonHref = getDocumentValueFromSearchResultMapping(document, this.parsedMappings.buttonHref);
+        const imageSource = getDocumentValueFromSearchResultMapping(document, this.parsedMappings.imageSource);
+        const footerContent = getDocumentValueFromSearchResultMapping(document, this.parsedMappings.footer);
+        const serializedStyles = typeof this.customStylesForResults === 'string'
+            ? this.customStylesForResults
+            : serializeStyles(this.customStylesForResults);
+        return (h("searchcraft-base-search-result", { key: `${document.document_id}-${index}`, "custom-styles": serializedStyles, "image-placement": this.resultImagePlacement, "container-rel": this.containerRel, "container-target": this.containerTarget, "button-label": this.buttonLabel || 'View more', "button-rel": this.buttonRel, "button-target": this.buttonTarget, "document-position": index, "title-content": titleContent, "subtitle-content": subtitleContent, "body-content": bodyContent, "footer-content": footerContent, "container-href": containerHref, "button-href": buttonHref, "image-src": imageSource }));
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (this.query.trim() === '') {
+            return (h("div", { class: 'searchcraft-search-results-empty-state-container' }, h("slot", { name: 'empty-search' })));
+        }
+        if (!((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data)) {
+            return;
+        }
+        const documents = (_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((data, _index) => {
+            const { doc: result } = data;
+            return result;
+        });
+        const finalComponents = [];
+        if (this.placeAdAtStart) {
+            finalComponents.push(h("div", { key: 'ad-section-start', class: 'searchcraft-ad-section' }, h("p", null, "Ad Section")));
+        }
+        if (this.adInterval > 0) {
+            documents.forEach((document, index) => {
+                finalComponents.push(this.renderDocument(document, index));
+                if ((index + 1) % this.adInterval === 0) {
+                    finalComponents.push(h("div", { key: `ad-section-${index + 1}`, class: 'searchcraft-ad-section ' }, h("p", null, "Ad Section")));
+                }
+            });
+        }
+        else {
+            const documentElements = documents.map((document, index) => this.renderDocument(document, index));
+            finalComponents.push(...documentElements);
+        }
+        if (this.placeAdAtEnd) {
+            finalComponents.push(h("div", { key: 'ad-section-end', class: 'searchcraft-ad-section' }, h("p", null, "Ad Section")));
+        }
+        if (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) {
+            this.noResults.emit();
+        }
+        return (h("div", { class: 'searchcraft-search-results-container' }, finalComponents, this.query.length > 0 &&
+            ((_k = (_j = (_h = this.searchResults) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.hits) === null || _k === void 0 ? void 0 : _k.length) === 0 && (h("div", { class: 'searchcraft-search-results-error-message-container' }, h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` })))));
+    }
+    static get watchers() { return {
+        "searchResultMappings": ["onItemsChange"]
+    }; }
+};
+SearchcraftBaseSearchResults.style = SearchcraftBaseSearchResultsStyle0;
+
+export { SearchcraftBaseSearchResults as searchcraft_base_search_results };
+
+//# sourceMappingURL=searchcraft-base-search-results.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"searchcraft-base-search-results.entry.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","src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"sourcesContent":[".searchcraft-search-results-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 16px;\n}\n\n.searchcraft-ad-section {\n  align-items: center;\n  background-color: #F1F1F1;\n  border-radius: 16px;\n  display: flex;\n  flex-direction: column;\n  font-size: 16px;\n  justify-content: center;\n  min-height: 176px;\n  text-align: center;\n\n  p {\n    margin: 0;\n    color: var(--sc-content-disabled);\n  }\n}\n\n.searchcraft-search-results-empty-state-container {\n  text-align: center;\n}\n\n.searchcraft-search-results-error-message-container {\n  text-align: center;\n}\n","import {\n  Component,\n  h,\n  Event,\n  Prop,\n  State,\n  type EventEmitter,\n  Watch,\n} from '@stencil/core';\n\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport {\n  getDocumentValueFromSearchResultMapping,\n  serializeStyles,\n} from '@utils/utils';\nimport type { SearchResultMappings } from 'types';\n\n@Component({\n  tag: 'searchcraft-base-search-results',\n  styleUrl: 'searchcraft-base-search-results.module.scss',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchResults {\n  @Prop() adInterval = 4;\n  @Prop() customStylesForResults:\n    | string\n    | Record<string, Record<string, string>>\n    | undefined;\n  @Prop() searchResultMappings: string | undefined;\n  @Prop() placeAdAtEnd = false;\n  @Prop() placeAdAtStart = true;\n  @Prop() resultImagePlacement: 'left' | 'right' = 'right';\n  @Prop() buttonLabel: string | undefined;\n  @Prop() buttonTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  @Prop() buttonRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  @Prop() containerTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  @Prop() containerRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n\n  @Event() noResults: EventEmitter<void>;\n\n  @State() hasSearched = false;\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n  /** The parsed `searchResultMappings` prop.  */\n  @State() parsedMappings: SearchResultMappings | undefined;\n\n  private unsubscribe: () => void;\n\n  private parseSearchResultMappings = (mappingString: string | undefined) => {\n    if (mappingString) {\n      try {\n        this.parsedMappings = JSON.parse(\n          this.searchResultMappings,\n        ) as SearchResultMappings;\n      } catch {\n        console.error(\n          'Error: Invalid searchResultsMappings passed to searchcraft-base-search-results.',\n        );\n      }\n    }\n  };\n\n  @Watch('searchResultMappings')\n  onItemsChange(searchResultMappings: string) {\n    this.parseSearchResultMappings(searchResultMappings);\n  }\n\n  connectedCallback() {\n    this.parseSearchResultMappings(this.searchResultMappings);\n  }\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (state.query.length > 0) {\n        this.hasSearched = true;\n      } else {\n        this.hasSearched = false;\n      }\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  renderDocument(document: Record<string, unknown>, index: number) {\n    /**\n     * Index field values -> Result container props mappings.\n     */\n    const titleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.parsedMappings.title,\n    );\n    const subtitleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.parsedMappings.subtitle,\n    );\n    const bodyContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.parsedMappings.body,\n    );\n    const containerHref = getDocumentValueFromSearchResultMapping(\n      document,\n      this.parsedMappings.containerHref,\n    );\n    const buttonHref = getDocumentValueFromSearchResultMapping(\n      document,\n      this.parsedMappings.buttonHref,\n    );\n    const imageSource = getDocumentValueFromSearchResultMapping(\n      document,\n      this.parsedMappings.imageSource,\n    );\n    const footerContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.parsedMappings.footer,\n    );\n\n    const serializedStyles =\n      typeof this.customStylesForResults === 'string'\n        ? this.customStylesForResults\n        : serializeStyles(this.customStylesForResults);\n\n    return (\n      <searchcraft-base-search-result\n        key={`${document.document_id}-${index}`}\n        custom-styles={serializedStyles}\n        image-placement={this.resultImagePlacement}\n        container-rel={this.containerRel}\n        container-target={this.containerTarget}\n        button-label={this.buttonLabel || 'View more'}\n        button-rel={this.buttonRel}\n        button-target={this.buttonTarget}\n        document-position={index}\n        title-content={titleContent}\n        subtitle-content={subtitleContent}\n        body-content={bodyContent}\n        footer-content={footerContent}\n        container-href={containerHref}\n        button-href={buttonHref}\n        image-src={imageSource}\n      />\n    );\n  }\n\n  render() {\n    if (this.query.trim() === '') {\n      return (\n        <div class='searchcraft-search-results-empty-state-container'>\n          <slot name='empty-search' />\n        </div>\n      );\n    }\n\n    if (!this.searchResults?.data) {\n      return;\n    }\n\n    const documents: Record<string, unknown>[] =\n      this.searchResults?.data?.hits?.map((data, _index) => {\n        const { doc: result } = data;\n        return result;\n      });\n\n    const finalComponents: JSX.Element[] = [];\n\n    if (this.placeAdAtStart) {\n      finalComponents.push(\n        <div key='ad-section-start' class='searchcraft-ad-section'>\n          <p>Ad Section</p>\n        </div>,\n      );\n    }\n\n    if (this.adInterval > 0) {\n      documents.forEach((document, index) => {\n        finalComponents.push(this.renderDocument(document, index));\n\n        if ((index + 1) % this.adInterval === 0) {\n          finalComponents.push(\n            <div\n              key={`ad-section-${index + 1}`}\n              class='searchcraft-ad-section '\n            >\n              <p>Ad Section</p>\n            </div>,\n          );\n        }\n      });\n    } else {\n      const documentElements = documents.map((document, index) =>\n        this.renderDocument(document, index),\n      );\n      finalComponents.push(...documentElements);\n    }\n\n    if (this.placeAdAtEnd) {\n      finalComponents.push(\n        <div key='ad-section-end' class='searchcraft-ad-section'>\n          <p>Ad Section</p>\n        </div>,\n      );\n    }\n\n    if (this.query.length > 0 && this.searchResults?.data?.hits?.length === 0) {\n      this.noResults.emit();\n    }\n\n    return (\n      <div class='searchcraft-search-results-container'>\n        {finalComponents}\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <div class='searchcraft-search-results-error-message-container'>\n              <searchcraft-error-message\n                error-message={`No search results found for \"${this.query}\" query`}\n              />\n            </div>\n          )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/searchcraft-button-icon.entry.js

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

package/dist/esm/searchcraft-button.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-0ac5bb53.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-88dc5f88.js';
 import { c as classNames } from './index-72ac5051.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 searchcraftButtonModuleCss = ":root{--sc-spinner-size:20px;--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}.searchcraft-button{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-bold-font-size);font-weight:var(--sc-body-bold-font-weight);line-height:var(--sc-body-bold-line-height);border-radius:8px;display:flex;padding:12px 20px;position:relative;background-color:var(--sc-surface-brand-primary);border:1px solid var(--sc-border-primary);color:var(--sc-content-brand-on-primary)}.searchcraft-button:hover{cursor:pointer;background-color:var(--sc-surface-brand-primary-hover)}.searchcraft-button:focus{outline:2px solid var(--sc-surface-brand-primary)}.buttonLabel{position:relative}";
 const SearchcraftButtonStyle0 = searchcraftButtonModuleCss;
 
 const SearchcraftButton = class {
@@ -9,21 +9,16 @@ const SearchcraftButton = class {
         registerInstance(this, hostRef);
         this.buttonClick = createEvent(this, "buttonClick", 7);
         this.handleClick = () => {
-            this.buttonClick.emit(); // Emit the event instead of calling a function
+            this.buttonClick.emit();
         };
         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: '31e65bdc250d9e87848b6d0c59798ded2855de79' }, 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: '9310049798538e49e52a11b846aec6a57d4ddd58' }, this.iconOnly ? (h("button", { class: classNames('searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.isRequesting ? (h("searchcraft-spinner-dark", null)) : (this.iconElement))) : (h("button", { class: classNames('searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.iconPosition === 'left' && this.iconElement, h("span", { class: classNames('buttonLabel', 'searchcraft-button-label') }, this.label)))));
     }
 };
 SearchcraftButton.style = SearchcraftButtonStyle0;