@searchcraft/javascript-sdk 0.2.9 → 0.3.1

package/dist/components/p-cd9a038a.js

@@ -0,0 +1,105 @@
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-6b353c3e.js';
+import { u as useSearchcraftStore } from './p-727bfc38.js';
+import { c as classNames } from './p-5cdc6210.js';
+
+const searchcraftBaseSearchResultModuleCss = "@charset \"UTF-8\";:root{--font-stack:Helvetica, Arial, sans-serif}.interactiveResultContainerLight{align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;position:relative;background-color:#F7F7F7}@media (min-width: 900px){.interactiveResultContainerLight{flex-direction:row;justify-content:space-between}}.interactiveResultContainerDark{align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;position:relative;background-color:#2E2E2E}@media (min-width: 900px){.interactiveResultContainerDark{flex-direction:row;justify-content:space-between}}.resultContainer{align-items:flex-start;display:flex;flex-direction:column;gap:16px;all:unset;display:inline;color:inherit;text-decoration:none}.resultContainer:hover{cursor:pointer}@media (min-width: 900px){.resultContainer{flex-direction:row}}.interactiveIconLarge{display:inline-block;position:absolute;right:5px;top:8px}@media (max-width: 900px){.interactiveIconLarge{display:none}}.interactiveIconSmall{display:inline-block;position:absolute;right:5px;top:-2px}@media (min-width: 900px){.interactiveIconSmall{display:none}}.imageContainer{max-width:100%}@media (min-width: 900px){.imageContainer{max-width:400px}}.contentContainer{max-height:100%;max-width:100%}@media (min-width: 900px){.contentContainer{max-width:50%}}.secondaryContentContainer{display:flex}.imageLight{border-radius:8px;max-height:100%;max-width:100%}.imageDark{border-radius:8px;max-height:100%;max-width:100%}.titleLight{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;position:relative;-webkit-font-smoothing:antialiased;color:#292929}.titleDark{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;position:relative;-webkit-font-smoothing:antialiased;color:#FFFFFF}.subtitleContentLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#737373}.subtitleContentDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#BFBFBF}.primaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#404040}.primaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#E6E6E6}.secondaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#404040}.secondaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#E6E6E6}.tertiaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#404040}.tertiaryContentLight.hasContent::before{color:#404040;content:\"•\";font-size:10px;margin-left:5px;margin-right:5px}.tertiaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#E6E6E6}.tertiaryContentDark.hasContent::before{color:#404040;content:\"•\";font-size:10px;margin-left:5px;margin-right:5px}";
+const SearchcraftBaseSearchResultStyle0 = searchcraftBaseSearchResultModuleCss;
+
+const SearchcraftBaseSearchResult = /*@__PURE__*/ proxyCustomElement(class SearchcraftBaseSearchResult extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.buttonCallback = createEvent(this, "buttonCallback", 7);
+        this.keyDownCallback = createEvent(this, "keyDownCallback", 7);
+        this.resultCallback = createEvent(this, "resultCallback", 7);
+        this.buttonCallback = () => { };
+        this.keyDownCallback = () => { };
+        this.resultCallback = () => { };
+        this.searchcraftStore = useSearchcraftStore.getState();
+        this.handleButtonClick = () => {
+            this.buttonCallback();
+        };
+        this.handleClick = () => {
+            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 = () => {
+            try {
+                return JSON.parse(this.customStyles);
+            }
+            catch (error) {
+                console.error('Error parsing custom styles:', error);
+                return {};
+            }
+        };
+        this.buttonText = '';
+        this.customStyles = '{}';
+        this.titleContent = '';
+        this.imageDescription = '';
+        this.imageSource = '';
+        this.isInteractive = false;
+        this.linkHref = '';
+        this.primaryContent = '';
+        this.secondaryContent = '';
+        this.subtitleContent = '';
+        this.tertiaryContent = '';
+        this.themeMode = 'light';
+        this.placeImageRight = false;
+        this.documentPosition = 0;
+    }
+    render() {
+        const isLightTheme = this.themeMode === 'light';
+        const styles = this.parseStyles();
+        const imageStyle = isLightTheme ? 'imageLight' : 'imageDark';
+        const imageContainer = this.imageSource && (h("div", { key: '53541a311548a653d43505356b9a4f25a417093f', class: classNames('imageContainer', 'searchcraft-base-search-result-image-container') }, h("img", { key: '919a46fd856b521a548c2ce6bab8b360507469c2', alt: this.imageDescription, class: classNames(imageStyle, 'searchcraft-search-result-image'), src: this.imageSource, style: styles.image || {} })));
+        const contentContainer = (h("div", { key: '944700daf2a0b683769bad992253a8482f71f685', class: classNames('contentContainer', 'searchcraft-base-search-result-content-container') }, h("h2", { key: '623096e2c7cf5f11bac7127cb00342386866089e', class: classNames(isLightTheme ? 'titleLight' : 'titleDark', 'searchcraft-base-search-result-title'), style: styles.title || {} }, this.titleContent), h("h3", { key: '2928f4d872e90d99fac31b75c9fecfee7e2a9a41', class: classNames(isLightTheme ? 'subtitleContentLight' : 'subtitleContentDark', 'searchcraft-base-search-result-subtitle'), style: styles.subtitle || {} }, this.subtitleContent), h("p", { key: '93bd00c9482d492a2d3d6262dba33044d4470d2c', class: classNames(isLightTheme ? 'primaryContentLight' : 'primaryContentDark', 'searchcraft-base-search-result-primary-content'), style: styles.primaryContent || {} }, this.primaryContent), h("div", { key: 'dc3bce7c0f75d121ba3068b3717fd5d934036012', class: classNames('secondaryContentContainer', 'searchcraft-base-search-result-secondary-content-container') }, h("p", { key: '80624ec83a0a7086142b6a35b4ac65d1fdb76a4e', class: classNames(isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark', 'searchcraft-base-search-result-secondary-content'), style: styles.secondaryContent || {} }, this.secondaryContent), h("p", { key: '53bdb3471b16fd4a1f525d99472c3a4d5662b722', class: classNames(`${isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark'}${this.tertiaryContent ? ' hasContent' : ''}`, 'searchcraft-base-search-result-tertiary-content'), style: styles.tertiaryContent || {} }, this.tertiaryContent)), this.buttonText && (h("button", { key: '442dc9aebe748ef06710e196382a80bf006a383e', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText))));
+        return (h("a", { key: '2cf6a6d3768266f6d46e700588083aade92142f7', class: classNames(this.isInteractive
+                ? isLightTheme
+                    ? 'interactiveResultContainerLight'
+                    : 'interactiveResultContainerDark'
+                : 'resultContainer', 'searchcraft-search-result-container'), onKeyDown: this.keyDownCallback, onClick: this.handleClick, href: this.linkHref, rel: 'noreferrer', style: styles.container || {}, tabindex: '0', target: '_blank' }, this.placeImageRight ? (h(Fragment, null, contentContainer, imageContainer)) : (h(Fragment, null, imageContainer, contentContainer))));
+    }
+    static get style() { return SearchcraftBaseSearchResultStyle0; }
+}, [0, "searchcraft-base-search-result", {
+        "buttonText": [1, "button-text"],
+        "customStyles": [1, "custom-styles"],
+        "titleContent": [1, "title-content"],
+        "imageDescription": [1, "image-description"],
+        "imageSource": [1, "image-source"],
+        "isInteractive": [4, "is-interactive"],
+        "linkHref": [1, "link-href"],
+        "primaryContent": [1, "primary-content"],
+        "secondaryContent": [1, "secondary-content"],
+        "subtitleContent": [1, "subtitle-content"],
+        "tertiaryContent": [1, "tertiary-content"],
+        "themeMode": [1, "theme-mode"],
+        "placeImageRight": [4, "place-image-right"],
+        "documentPosition": [2, "document-position"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-base-search-result"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-base-search-result":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftBaseSearchResult);
+            }
+            break;
+    } });
+}
+
+export { SearchcraftBaseSearchResult as S, defineCustomElement as d };
+
+//# sourceMappingURL=p-cd9a038a.js.map

package/dist/components/p-cd9a038a.js.map

@@ -0,0 +1 @@
+{"file":"p-cd9a038a.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":["@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  flex-direction: column;\n  gap: 16px;\n  padding: 8px;\n  position: relative;\n\n  @media (min-width: 900px) {\n    flex-direction: row;\n    justify-content: space-between;\n  }\n}\n\n.interactiveResultContainerLight {\n  @include interactive-result-container-base;\n  background-color: $surface-primary-active;\n}\n\n.interactiveResultContainerDark {\n  @include interactive-result-container-base;\n  background-color: $surface-brand-primary-hover;\n}\n\n.resultContainer {\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  all: unset;\n  display: inline;\n  color: inherit;\n  text-decoration: none;\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  @media (min-width: 900px) {\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: 900px) {\n    display: none;\n  }\n}\n\n.interactiveIconSmall {\n  display: inline-block;\n  position: absolute;\n  right: 5px;\n  top: -2px;\n\n\n  @media (min-width: 900px) {\n   display: none;\n  }\n}\n\n.imageContainer {\n  max-width: 100%;\n\n  @media (min-width: 900px) {\n    max-width: 400px;\n   }\n}\n\n.contentContainer {\n  max-height: 100%;\n  max-width: 100%;\n\n  @media (min-width: 900px) {\n    max-width: 50%;\n  }\n}\n\n.secondaryContentContainer {\n  display: flex;\n\n}\n\n@mixin image-base {\n  border-radius: 8px;\n  max-height: 100%;\n  max-width: 100%;\n}\n\n.imageLight {\n  @include image-base;\n}\n\n.imageDark {\n  @include image-base;\n\n}\n\n@mixin title-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: 0;\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n}\n\n.titleLight {\n  @include title-base;\n  color: $content-primary;\n}\n\n.titleDark {\n  @include title-base;\n  color: $content-on-brand-primary;\n}\n\n@mixin subtitle-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  -webkit-font-smoothing: antialiased;\n}\n\n.subtitleContentLight {\n  @include subtitle-base;\n  color: $content-disabled;\n}\n\n.subtitleContentDark {\n  @include subtitle-base;\n  color: $content-disabled-secondary;\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  -webkit-font-smoothing: antialiased;\n}\n\n.primaryContentLight {\n  @include body-content-base;\n  color: $surface-success-secondary;\n}\n\n.primaryContentDark {\n  @include body-content-base;\n  color: $border-primary;\n}\n\n.secondaryContentLight {\n  @include body-content-base;\n  color: $surface-success-secondary;\n}\n\n.secondaryContentDark {\n  @include body-content-base;\n  color: $border-primary;\n}\n\n.tertiaryContentLight {\n  @include body-content-base;\n  color: $surface-success-secondary;\n}\n\n.tertiaryContentLight.hasContent::before {\n  color: $surface-success-secondary;\n  content: \"•\";\n  font-size: 10px;\n  margin-left: 5px;\n  margin-right: 5px;\n}\n\n.tertiaryContentDark {\n  @include body-content-base;\n  color: $border-primary;\n}\n\n.tertiaryContentDark.hasContent::before {\n  color: $surface-success-secondary;\n  content: \"•\";\n  font-size: 10px;\n  margin-left: 5px;\n  margin-right: 5px;\n}","import { useSearchcraftStore } from '@provider/store';\nimport { Component, Event, Fragment, h, Prop } from '@stencil/core';\nimport classNames from 'classnames';\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() buttonText = '';\n  @Prop() customStyles = '{}';\n  @Prop() titleContent = '';\n  @Prop() imageDescription = '';\n  @Prop() imageSource = '';\n  @Prop() isInteractive = false;\n  @Prop() linkHref = '';\n  @Prop() primaryContent = '';\n  @Prop() secondaryContent = '';\n  @Prop() subtitleContent = '';\n  @Prop() tertiaryContent = '';\n  @Prop() themeMode: 'light' | 'dark' = 'light';\n  @Prop() placeImageRight = false;\n  @Prop() documentPosition = 0;\n\n  @Event() buttonCallback: () => void = () => {};\n  @Event() keyDownCallback: () => void = () => {};\n  @Event() resultCallback: () => void = () => {};\n\n  private searchcraftStore = useSearchcraftStore.getState();\n\n  private handleButtonClick = () => {\n    this.buttonCallback();\n  };\n\n  private handleClick = () => {\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    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    const imageStyle = isLightTheme ? 'imageLight' : 'imageDark';\n    const imageContainer = this.imageSource && (\n      <div\n        class={classNames(\n          'imageContainer',\n          'searchcraft-base-search-result-image-container',\n        )}\n      >\n        <img\n          alt={this.imageDescription}\n          class={classNames(imageStyle, 'searchcraft-search-result-image')}\n          src={this.imageSource}\n          style={styles.image || {}}\n        />\n      </div>\n    );\n\n    const contentContainer = (\n      <div\n        class={classNames(\n          'contentContainer',\n          'searchcraft-base-search-result-content-container',\n        )}\n      >\n        <h2\n          class={classNames(\n            isLightTheme ? 'titleLight' : 'titleDark',\n            'searchcraft-base-search-result-title',\n          )}\n          style={styles.title || {}}\n        >\n          {this.titleContent}\n        </h2>\n        <h3\n          class={classNames(\n            isLightTheme ? 'subtitleContentLight' : 'subtitleContentDark',\n            'searchcraft-base-search-result-subtitle',\n          )}\n          style={styles.subtitle || {}}\n        >\n          {this.subtitleContent}\n        </h3>\n        <p\n          class={classNames(\n            isLightTheme ? 'primaryContentLight' : 'primaryContentDark',\n            'searchcraft-base-search-result-primary-content',\n          )}\n          style={styles.primaryContent || {}}\n        >\n          {this.primaryContent}\n        </p>\n        <div\n          class={classNames(\n            'secondaryContentContainer',\n            'searchcraft-base-search-result-secondary-content-container',\n          )}\n        >\n          <p\n            class={classNames(\n              isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark',\n              'searchcraft-base-search-result-secondary-content',\n            )}\n            style={styles.secondaryContent || {}}\n          >\n            {this.secondaryContent}\n          </p>\n          <p\n            class={classNames(\n              `${isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark'}${this.tertiaryContent ? ' hasContent' : ''}`,\n              'searchcraft-base-search-result-tertiary-content',\n            )}\n            style={styles.tertiaryContent || {}}\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    );\n\n    return (\n      <a\n        class={classNames(\n          this.isInteractive\n            ? isLightTheme\n              ? 'interactiveResultContainerLight'\n              : 'interactiveResultContainerDark'\n            : 'resultContainer',\n          'searchcraft-search-result-container',\n        )}\n        onKeyDown={this.keyDownCallback}\n        onClick={this.handleClick}\n        href={this.linkHref}\n        rel='noreferrer'\n        style={styles.container || {}}\n        tabindex='0'\n        target='_blank'\n      >\n        {this.placeImageRight ? (\n          <Fragment>\n            {contentContainer}\n            {imageContainer}\n          </Fragment>\n        ) : (\n          <Fragment>\n            {imageContainer}\n            {contentContainer}\n          </Fragment>\n        )}\n      </a>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,16 +1,16 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-7498e493.js';
-import { u as useSearchcraftStore, g } from './p-ff049f0a.js';
-import { p as parseCustomStyles } from './p-7d1bcd2d.js';
-import { d as defineCustomElement$b } from './p-70722ab2.js';
-import { d as defineCustomElement$a } from './p-07edaa9b.js';
-import { d as defineCustomElement$9 } from './p-498c7ef9.js';
-import { d as defineCustomElement$8 } from './p-dd2a4022.js';
-import { d as defineCustomElement$7 } from './p-6237f03e.js';
-import { d as defineCustomElement$6 } from './p-8c38185e.js';
-import { d as defineCustomElement$5 } from './p-ae84b899.js';
-import { d as defineCustomElement$4 } from './p-a3bd1bc8.js';
-import { d as defineCustomElement$3 } from './p-bc3f9025.js';
-import { d as defineCustomElement$2 } from './p-bfb22305.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-6b353c3e.js';
+import { c as classNames } from './p-5cdc6210.js';
+import { u as useSearchcraftStore, i as ie } from './p-727bfc38.js';
+import { p as parseCustomStyles } from './p-62c40862.js';
+import { p as packageJson } from './p-b0c1fd63.js';
+import { d as defineCustomElement$9 } from './p-62e6b69c.js';
+import { d as defineCustomElement$8 } from './p-8524c749.js';
+import { d as defineCustomElement$7 } from './p-5015a359.js';
+import { d as defineCustomElement$6 } from './p-54848b4d.js';
+import { d as defineCustomElement$5 } from './p-69ee3b9a.js';
+import { d as defineCustomElement$4 } from './p-4f939ba2.js';
+import { d as defineCustomElement$3 } from './p-b38d171d.js';
+import { d as defineCustomElement$2 } from './p-5a872bdf.js';
 
 const searchcraftAutoSearchFormModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.formLTR{font-family:var(--font-stack);text-align:left;width:100%}.formRTL{font-family:var(--font-stack);text-align:right;width:100%}";
 const SearchcraftAutoSearchFormStyle0 = searchcraftAutoSearchFormModuleCss;
@@ -19,7 +19,6 @@ const SearchcraftAutoSearchForm$1 = /*@__PURE__*/ proxyCustomElement(class Searc
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.inputClearedOrNoResults = createEvent(this, "inputClearedOrNoResults", 7);
         this.querySubmit = createEvent(this, "querySubmit", 7);
         this.debounceTimeout = null;
@@ -30,11 +29,9 @@ const SearchcraftAutoSearchForm$1 = /*@__PURE__*/ proxyCustomElement(class Searc
             this.searchStore.setQuery(this.query);
             if (this.query.trim() === '') {
                 this.searchResults = null;
+                this.inputClearedOrNoResults.emit();
                 this.searchStore.setSearchResults(null);
             }
-            else {
-                this.querySubmit.emit(this.query);
-            }
         };
         this.handleInputKeyUp = (event) => {
             const target = event.detail;
@@ -49,6 +46,7 @@ const SearchcraftAutoSearchForm$1 = /*@__PURE__*/ proxyCustomElement(class Searc
                 if (this.query.trim() === '') {
                     this.searchResults = null;
                     this.searchStore.setSearchResults(null);
+                    this.inputClearedOrNoResults.emit();
                 }
                 else {
                     this.searchStore.setQuery(this.query);
@@ -58,6 +56,9 @@ const SearchcraftAutoSearchForm$1 = /*@__PURE__*/ proxyCustomElement(class Searc
             }, this.debounceDelay);
         };
         this.handleClearInput = () => {
+            if (this.query === '' && !this.searchResults) {
+                return;
+            }
             this.query = '';
             this.searchResults = null;
             this.searchStore.setQuery('');
@@ -96,9 +97,11 @@ const SearchcraftAutoSearchForm$1 = /*@__PURE__*/ proxyCustomElement(class Searc
         this.autoSearchFormClass = '';
         this.clearInput = () => { };
         this.config = {
-            apiKey: '',
+            readKey: '',
             endpointURL: '',
             index: [],
+            organizationId: '',
+            applicationId: '',
         };
         this.customStylesForInput = {};
         this.inputCaptionValue = '';
@@ -114,7 +117,10 @@ const SearchcraftAutoSearchForm$1 = /*@__PURE__*/ proxyCustomElement(class Searc
         this.searchResults = null;
     }
     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.unsubscribe = useSearchcraftStore.subscribe((state) => {
             this.isRequesting = state.isRequesting;
@@ -129,10 +135,10 @@ const SearchcraftAutoSearchForm$1 = /*@__PURE__*/ proxyCustomElement(class Searc
     render() {
         const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';
         const parsedCustomStyles = parseCustomStyles(this.customStylesForInput);
-        return (h("form", { key: '2421495aa88b52a47658af9b682e172da7d23691', class: `${formClass}`, onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: '032e7e3a7f83af11422b64b023a38c2f433d3809', label: this.labelForInput }), h("searchcraft-input", { key: 'a3a286e6b5ade795a157a1a046278477731684b4', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "input-icon-height": this.inputIconHeight, "input-icon-width": this.inputIconWidth, "is-requesting": this.isRequesting, onClearInput: this.handleClearInput, onInputKeyUp: this.handleInputKeyUp, onSearchInputChange: this.handleInputChange, "placeholder-value": this.placeholderValue, query: this.query, "right-to-left-orientation": this.rightToLeftOrientation }), this.error && (h("searchcraft-error-message", { key: '4588522cf331cc8165e789bb3d58f35ef5148f11', errorMessage: 'Please enter a search query.' }))));
+        return (h("form", { key: '3f8e9a36e827b3f1f8d591622a1c824e7ccc6f83', class: classNames(`${formClass}`, 'searchcraft-auto-search-form'), onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: 'daf9b6aab7185e045891a975ac70a3bf3b7ff75f', label: this.labelForInput }), h("searchcraft-input", { key: '655e92d562a73dcf9857f24075c65c6bbe2215f5', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "input-icon-height": this.inputIconHeight, "input-icon-width": this.inputIconWidth, "is-requesting": this.isRequesting, onClearInput: this.handleClearInput, onInputKeyUp: this.handleInputKeyUp, onSearchInputChange: this.handleInputChange, "placeholder-value": this.placeholderValue, query: this.query, "right-to-left-orientation": this.rightToLeftOrientation }), this.error && (h("searchcraft-error-message", { key: '988624eb1ff71adde2a2e38ab8adb868a5a12469', errorMessage: 'Please enter a search query.' }))));
     }
     static get style() { return SearchcraftAutoSearchFormStyle0; }
-}, [1, "searchcraft-auto-search-form", {
+}, [0, "searchcraft-auto-search-form", {
         "autoSearchFormClass": [1, "auto-search-form-class"],
         "clearInput": [16],
         "config": [16],
@@ -153,7 +159,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["searchcraft-auto-search-form", "searchcraft-clear-icon-set", "searchcraft-clear-input-button", "searchcraft-error-message", "searchcraft-input", "searchcraft-input-caption", "searchcraft-input-icon", "searchcraft-input-label", "searchcraft-search-icon-set", "searchcraft-spinner-dark", "searchcraft-spinner-light"];
+    const components = ["searchcraft-auto-search-form", "searchcraft-clear-icon-set", "searchcraft-clear-input-button", "searchcraft-error-message", "searchcraft-input", "searchcraft-input-caption", "searchcraft-input-icon", "searchcraft-input-label", "searchcraft-search-icon-set"];
     components.forEach(tagName => { switch (tagName) {
         case "searchcraft-auto-search-form":
             if (!customElements.get(tagName)) {
@@ -161,51 +167,41 @@ function defineCustomElement$1() {
             }
             break;
         case "searchcraft-clear-icon-set":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "searchcraft-clear-input-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "searchcraft-error-message":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "searchcraft-input":
+        case "searchcraft-clear-input-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "searchcraft-input-caption":
+        case "searchcraft-error-message":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "searchcraft-input-icon":
+        case "searchcraft-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "searchcraft-input-label":
+        case "searchcraft-input-caption":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "searchcraft-search-icon-set":
+        case "searchcraft-input-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "searchcraft-spinner-dark":
+        case "searchcraft-input-label":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "searchcraft-spinner-light":
+        case "searchcraft-search-icon-set":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

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

@@ -1 +1 @@
-{"file":"searchcraft-auto-search-form.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,kCAAkC,GAAG,uLAAuL,CAAC;AACnO,wCAAe,kCAAkC;;MCyBpCA,2BAAyB;;;;;;;QAyB5B,oBAAe,GAAyC,IAAI,CAAC;QAC7D,kBAAa,GAAG,CAAC,CAAC;QAClB,gBAAW,GAAG,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QAmBrD,sBAAiB,GAAG,CAAC,KAAiC;YACpD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAEtC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAC5B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;gBAC1B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;aACzC;iBAAM;gBACL,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACnC;SACF,CAAC;QAEF,qBAAgB,GAAG,CAAC,KAAiC;YACnD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;YAC5B,IAAI,MAAM,KAAK,IAAI,CAAC,KAAK,EAAE;gBACzB,OAAO;aACR;YACD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;YAEpB,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;aACpC;YAED,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC;gBAChC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBAC5B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;oBAC1B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;iBACzC;qBAAM;oBACL,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBACtC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBAClC,IAAI,CAAC,SAAS,EAAE,CAAC;iBAClB;aACF,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;SACxB,CAAC;QAEF,qBAAgB,GAAG;YACjB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YAC9B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;YAExC,IAAI,OAAO,IAAI,CAAC,UAAU,KAAK,UAAU,EAAE;gBACzC,IAAI,CAAC,UAAU,EAAE,CAAC;aACnB;YAED,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;aACpC;YAED,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,CAAC;SACrC,CAAC;QAEM,cAAS,GAAG;YAClB,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;gBAClB,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,CAAC;aACrC;iBAAM;gBACL,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;gBACnB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACtC,IAAI,CAAC,WAAW,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC;gBAExC,IAAI;oBACF,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;iBACjC;gBAAC,OAAO,KAAK,EAAE;oBACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;oBAClB,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,CAAC;iBACrC;aACF;SACF,CAAC;QAEF,qBAAgB,GAAG,OAAO,KAAY;YACpC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;SACxB,CAAC;mCAvH4B,EAAE;0BACC,SAAQ;sBACT;YAC9B,MAAM,EAAE,EAAE;YACV,WAAW,EAAE,EAAE;YACf,KAAK,EAAE,EAAE;SACV;oCAC+D,EAAE;iCACtC,EAAE;+BACJ,EAAE;8BACH,EAAE;6BACH,EAAE;gCACC,aAAa;sCACP,KAAK;oCACP,EAAE;qBAKhB,KAAK;4BACE,KAAK;qBACZ,EAAE;6BACkC,IAAI;;IAOzD,gBAAgB;QACd,MAAM,WAAW,GAAG,IAAIC,CAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACrD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QAE/C,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;YACrD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;YACvC,IAAI,CAAC,aAAa,qBAAQ,KAAK,CAAC,aAAa,CAAE,CAAC;SACjD,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IA8ED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,sBAAsB,GAAG,SAAS,GAAG,SAAS,CAAC;QACtE,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAExE,QACE,6DAAM,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,gBAAgB,IAC1D,gFAAyB,KAAK,EAAE,IAAI,CAAC,aAAa,GAAI,EACtD,0EACE,YAAY,EAAE,kBAAkB,yBACX,IAAI,CAAC,iBAAiB,uBACxB,IAAI,CAAC,eAAe,sBACrB,IAAI,CAAC,cAAc,mBACtB,IAAI,CAAC,YAAY,EAChC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,mBAAmB,EAAE,IAAI,CAAC,iBAAiB,uBACxB,IAAI,CAAC,gBAAgB,EACxC,KAAK,EAAE,IAAI,CAAC,KAAK,+BACU,IAAI,CAAC,sBAAsB,GACtD,EACD,IAAI,CAAC,KAAK,KACT,kFAA2B,YAAY,EAAC,8BAA8B,GAAG,CAC1E,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftAutoSearchForm","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  font-family: var(--font-stack);\n  text-align: left;\n  width: 100%;\n}\n\n.formRTL {\n  font-family: var(--font-stack);\n  text-align: right;\n  width: 100%;\n}","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  type EventEmitter,\n  h,\n} from '@stencil/core';\n\nimport {\n  type CoreConfigSDK,\n  CoreSDK as SearchcraftCore,\n  type SearchcraftResponse,\n} from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { parseCustomStyles } from '@utils/utils';\n\nimport type { ScInputCustomEvent } from '@components/searchcraft-input/searchcraft-input';\n\n@Component({\n  tag: 'searchcraft-auto-search-form',\n  styleUrl: 'searchcraft-auto-search-form.module.scss',\n  shadow: true,\n})\nexport class SearchcraftAutoSearchForm {\n  @Prop() autoSearchFormClass = '';\n  @Prop() clearInput: () => void = () => {};\n  @Prop() config: CoreConfigSDK = {\n    apiKey: '',\n    endpointURL: '',\n    index: [],\n  };\n  @Prop() customStylesForInput: string | Record<string, string> = {};\n  @Prop() inputCaptionValue = '';\n  @Prop() inputIconHeight = 20;\n  @Prop() inputIconWidth = 20;\n  @Prop() labelForInput = '';\n  @Prop() placeholderValue = 'Search here';\n  @Prop() rightToLeftOrientation = false;\n  @Prop() searchContainerClass = '';\n\n  @Event() inputClearedOrNoResults: EventEmitter<void>;\n  @Event() querySubmit: EventEmitter<string>;\n\n  @State() error = false;\n  @State() isRequesting = false;\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  private debounceTimeout: ReturnType<typeof setTimeout> | null = null;\n  private debounceDelay = 0;\n  private searchStore = useSearchcraftStore.getState();\n  unsubscribe: () => void;\n\n  componentDidLoad() {\n    const searchcraft = new SearchcraftCore(this.config);\n    this.searchStore.initialize(searchcraft, true);\n\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.isRequesting = state.isRequesting;\n      this.searchResults = { ...state.searchResults };\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  handleInputChange = (event: ScInputCustomEvent<string>) => {\n    this.query = event.detail;\n    this.searchStore.setQuery(this.query);\n\n    if (this.query.trim() === '') {\n      this.searchResults = null;\n      this.searchStore.setSearchResults(null);\n    } else {\n      this.querySubmit.emit(this.query);\n    }\n  };\n\n  handleInputKeyUp = (event: ScInputCustomEvent<string>) => {\n    const target = event.detail;\n    if (target === this.query) {\n      return;\n    }\n    this.query = target;\n\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout);\n    }\n\n    this.debounceTimeout = setTimeout(() => {\n      if (this.query.trim() === '') {\n        this.searchResults = null;\n        this.searchStore.setSearchResults(null);\n      } else {\n        this.searchStore.setQuery(this.query);\n        this.querySubmit.emit(this.query);\n        this.runSearch();\n      }\n    }, this.debounceDelay);\n  };\n\n  handleClearInput = () => {\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      this.searchStore.setSelectedFilters([]);\n\n      try {\n        await this.searchStore.search();\n      } catch (error) {\n        this.error = true;\n        this.inputClearedOrNoResults.emit();\n      }\n    }\n  };\n\n  handleFormSubmit = async (event: Event) => {\n    event.preventDefault();\n    await this.runSearch();\n  };\n\n  render() {\n    const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';\n    const parsedCustomStyles = parseCustomStyles(this.customStylesForInput);\n\n    return (\n      <form class={`${formClass}`} onSubmit={this.handleFormSubmit}>\n        <searchcraft-input-label label={this.labelForInput} />\n        <searchcraft-input\n          customStyles={parsedCustomStyles}\n          input-caption-value={this.inputCaptionValue}\n          input-icon-height={this.inputIconHeight}\n          input-icon-width={this.inputIconWidth}\n          is-requesting={this.isRequesting}\n          onClearInput={this.handleClearInput}\n          onInputKeyUp={this.handleInputKeyUp}\n          onSearchInputChange={this.handleInputChange}\n          placeholder-value={this.placeholderValue}\n          query={this.query}\n          right-to-left-orientation={this.rightToLeftOrientation}\n        />\n        {this.error && (\n          <searchcraft-error-message errorMessage='Please enter a search query.' />\n        )}\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"file":"searchcraft-auto-search-form.js","mappings":"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","names":["SearchcraftAutoSearchForm","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":[":root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.formLTR {\n  font-family: var(--font-stack);\n  text-align: left;\n  width: 100%;\n}\n\n.formRTL {\n  font-family: var(--font-stack);\n  text-align: right;\n  width: 100%;\n}","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  type EventEmitter,\n  h,\n} from '@stencil/core';\nimport classNames from 'classnames';\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() config: SearchcraftConfig = {\n    readKey: '',\n    endpointURL: '',\n    index: [],\n    organizationId: '',\n    applicationId: '',\n  };\n  @Prop() customStylesForInput: string | Record<string, string> = {};\n  @Prop() inputCaptionValue = '';\n  @Prop() inputIconHeight = 20;\n  @Prop() inputIconWidth = 20;\n  @Prop() labelForInput = '';\n  @Prop() placeholderValue = 'Search here';\n  @Prop() rightToLeftOrientation = false;\n  @Prop() searchContainerClass = '';\n\n  @Event() inputClearedOrNoResults: EventEmitter<void>;\n  @Event() querySubmit: EventEmitter<string>;\n\n  @State() error = false;\n  @State() isRequesting = false;\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  private debounceTimeout: ReturnType<typeof setTimeout> | null = null;\n  private debounceDelay = 0;\n  private searchStore = useSearchcraftStore.getState();\n  unsubscribe: () => void;\n\n  componentDidLoad() {\n    const searchcraft = new SearchcraftCore(this.config, {\n      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  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  handleInputChange = (event: ScInputCustomEvent<string>) => {\n    this.query = event.detail;\n    this.searchStore.setQuery(this.query);\n    if (this.query.trim() === '') {\n      this.searchResults = null;\n      this.inputClearedOrNoResults.emit();\n      this.searchStore.setSearchResults(null);\n    }\n  };\n\n  handleInputKeyUp = (event: ScInputCustomEvent<string>) => {\n    const target = event.detail;\n    if (target === this.query) {\n      return;\n    }\n    this.query = target;\n\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout);\n    }\n\n    this.debounceTimeout = setTimeout(() => {\n      if (this.query.trim() === '') {\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(this.query);\n        this.runSearch();\n      }\n    }, this.debounceDelay);\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      this.searchStore.setSelectedFilters([]);\n\n      try {\n        await this.searchStore.search();\n      } catch (error) {\n        this.error = true;\n        this.inputClearedOrNoResults.emit();\n      }\n    }\n  };\n\n  handleFormSubmit = async (event: Event) => {\n    event.preventDefault();\n    await this.runSearch();\n  };\n\n  render() {\n    const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';\n    const parsedCustomStyles = parseCustomStyles(this.customStylesForInput);\n    return (\n      <form\n        class={classNames(`${formClass}`, '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          input-icon-height={this.inputIconHeight}\n          input-icon-width={this.inputIconWidth}\n          is-requesting={this.isRequesting}\n          onClearInput={this.handleClearInput}\n          onInputKeyUp={this.handleInputKeyUp}\n          onSearchInputChange={this.handleInputChange}\n          placeholder-value={this.placeholderValue}\n          query={this.query}\n          right-to-left-orientation={this.rightToLeftOrientation}\n        />\n        {this.error && (\n          <searchcraft-error-message errorMessage='Please enter a search query.' />\n        )}\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/searchcraft-base-search-form.js

@@ -1,16 +1,17 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-7498e493.js';
-import { u as useSearchcraftStore, a as useThemeStore, g } from './p-ff049f0a.js';
-import { d as defineCustomElement$c } from './p-4468fba3.js';
-import { d as defineCustomElement$b } from './p-70722ab2.js';
-import { d as defineCustomElement$a } from './p-07edaa9b.js';
-import { d as defineCustomElement$9 } from './p-498c7ef9.js';
-import { d as defineCustomElement$8 } from './p-dd2a4022.js';
-import { d as defineCustomElement$7 } from './p-6237f03e.js';
-import { d as defineCustomElement$6 } from './p-8c38185e.js';
-import { d as defineCustomElement$5 } from './p-ae84b899.js';
-import { d as defineCustomElement$4 } from './p-a3bd1bc8.js';
-import { d as defineCustomElement$3 } from './p-bc3f9025.js';
-import { d as defineCustomElement$2 } from './p-bfb22305.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-6b353c3e.js';
+import { c as classNames } from './p-5cdc6210.js';
+import { u as useSearchcraftStore, a as useThemeStore, i as ie } from './p-727bfc38.js';
+import { p as packageJson } from './p-b0c1fd63.js';
+import { d as defineCustomElement$b } from './p-7d385ffb.js';
+import { d as defineCustomElement$a } from './p-62e6b69c.js';
+import { d as defineCustomElement$9 } from './p-8524c749.js';
+import { d as defineCustomElement$8 } from './p-5015a359.js';
+import { d as defineCustomElement$7 } from './p-54848b4d.js';
+import { d as defineCustomElement$6 } from './p-69ee3b9a.js';
+import { d as defineCustomElement$5 } from './p-4f939ba2.js';
+import { d as defineCustomElement$4 } from './p-b38d171d.js';
+import { d as defineCustomElement$3 } from './p-5a872bdf.js';
+import { d as defineCustomElement$2 } from './p-7c280820.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 SearchcraftBaseSearchFormStyle0 = searchcraftBaseSearchFormModuleCss;
@@ -19,13 +20,15 @@ const SearchcraftBaseSearchForm$1 = /*@__PURE__*/ proxyCustomElement(class Searc
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.clearInput = createEvent(this, "clearInput", 7);
         this.clearInput = () => { };
         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) => {
@@ -51,9 +54,11 @@ const SearchcraftBaseSearchForm$1 = /*@__PURE__*/ proxyCustomElement(class Searc
             this.themeStore.toggleTheme();
         };
         this.config = {
-            apiKey: '',
+            readKey: '',
             endpointURL: '',
             index: [],
+            organizationId: '',
+            applicationId: '',
         };
         this.errorMessage = 'Search was unsuccessful';
         this.labelForInput = 'Search';
@@ -63,10 +68,11 @@ const SearchcraftBaseSearchForm$1 = /*@__PURE__*/ proxyCustomElement(class Searc
         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 }))));
+        const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';
+        return (h("form", { key: '7a0640c6646a1eefda23ceb1623a72b457be648a', class: classNames(`${formClass}`, 'searchcraft-base-search-form'), onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: '33d98e7db9af81170cb693b1f89a38da0a8234e7', label: this.labelForInput }), h("div", { key: '8764b5abbc5008d46bdd8b60b95558252ad6999c', class: classNames('searchContainer', 'searchcraft-base-search-form-input-container') }, this.rightToLeftOrientation && h("searchcraft-button", { key: 'c2a008f5da3bae24bd7417245c4e0df0aa73fd7c' }), h("searchcraft-input", { key: 'dad6c9c1e37ff05a8f032ad3f63ddb1ec234d2e5', onClearInput: this.handleClearInput, onSearchInputChange: this.handleSearchInputChange, query: this.query, rightToLeftOrientation: this.rightToLeftOrientation }), !this.rightToLeftOrientation && (h("searchcraft-button", { key: '2f2a75da81103e3435cbf3337daf605010167339', onButtonClick: this.handleFormSubmit }))), this.error && (h("searchcraft-error-message", { key: '8477fb8f5c3662587e318d8d7c9e1bbd3b7d86a5', errorMessage: this.errorMessage }))));
     }
     static get style() { return SearchcraftBaseSearchFormStyle0; }
-}, [1, "searchcraft-base-search-form", {
+}, [0, "searchcraft-base-search-form", {
         "config": [16],
         "errorMessage": [1, "error-message"],
         "labelForInput": [1, "label-for-input"],
@@ -79,7 +85,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["searchcraft-base-search-form", "searchcraft-button", "searchcraft-clear-icon-set", "searchcraft-clear-input-button", "searchcraft-error-message", "searchcraft-input", "searchcraft-input-caption", "searchcraft-input-icon", "searchcraft-input-label", "searchcraft-search-icon-set", "searchcraft-spinner-dark", "searchcraft-spinner-light"];
+    const components = ["searchcraft-base-search-form", "searchcraft-button", "searchcraft-clear-icon-set", "searchcraft-clear-input-button", "searchcraft-error-message", "searchcraft-input", "searchcraft-input-caption", "searchcraft-input-icon", "searchcraft-input-label", "searchcraft-search-icon-set", "searchcraft-spinner-dark"];
     components.forEach(tagName => { switch (tagName) {
         case "searchcraft-base-search-form":
             if (!customElements.get(tagName)) {
@@ -87,56 +93,51 @@ function defineCustomElement$1() {
             }
             break;
         case "searchcraft-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "searchcraft-clear-icon-set":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "searchcraft-clear-input-button":
+        case "searchcraft-clear-icon-set":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "searchcraft-error-message":
+        case "searchcraft-clear-input-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "searchcraft-input":
+        case "searchcraft-error-message":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "searchcraft-input-caption":
+        case "searchcraft-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "searchcraft-input-icon":
+        case "searchcraft-input-caption":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "searchcraft-input-label":
+        case "searchcraft-input-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "searchcraft-search-icon-set":
+        case "searchcraft-input-label":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "searchcraft-spinner-dark":
+        case "searchcraft-search-icon-set":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "searchcraft-spinner-light":
+        case "searchcraft-spinner-dark":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/searchcraft-base-search-form.js.map

@@ -1 +1 @@
-{"file":"searchcraft-base-search-form.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,kCAAkC,GAAG,kNAAkN,CAAC;AAC9P,wCAAe,kCAAkC;;MCepCA,2BAAyB;;;;;;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,IAAIC,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":["SearchcraftBaseSearchForm","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.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,kCAAkC,GAAG,kNAAkN,CAAC;AAC9P,wCAAe,kCAAkC;;MCepCA,2BAAyB;;;;;QAY3B,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,IAAIC,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;sBAnDkC;YAClC,OAAO,EAAE,EAAE;YACX,WAAW,EAAE,EAAE;YACf,KAAK,EAAE,EAAE;YACT,cAAc,EAAE,EAAE;YAClB,aAAa,EAAE,EAAE;SAClB;4BACsB,yBAAyB;6BACxB,QAAQ;sCACC,KAAK;qBAIrB,KAAK;qBACL,EAAE;6BACqB,IAAI;;IAsC5C,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,sBAAsB,GAAG,SAAS,GAAG,SAAS,CAAC;QACtE,QACE,6DACE,KAAK,EAAE,UAAU,CAAC,GAAG,SAAS,EAAE,EAAE,8BAA8B,CAAC,EACjE,QAAQ,EAAE,IAAI,CAAC,gBAAgB,IAE/B,gFAAyB,KAAK,EAAE,IAAI,CAAC,aAAa,GAAI,EACtD,4DACE,KAAK,EAAE,UAAU,CACf,iBAAiB,EACjB,8CAA8C,CAC/C,IAEA,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":["SearchcraftBaseSearchForm","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":[":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';\nimport classNames from 'classnames';\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    organizationId: '',\n    applicationId: '',\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      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    const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';\n    return (\n      <form\n        class={classNames(`${formClass}`, 'searchcraft-base-search-form')}\n        onSubmit={this.handleFormSubmit}\n      >\n        <searchcraft-input-label label={this.labelForInput} />\n        <div\n          class={classNames(\n            'searchContainer',\n            'searchcraft-base-search-form-input-container',\n          )}\n        >\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}

package/dist/components/searchcraft-base-search-result.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftBaseSearchResult$1, d as defineCustomElement$1 } from './p-c31274dd.js';
+import { S as SearchcraftBaseSearchResult$1, d as defineCustomElement$1 } from './p-cd9a038a.js';
 
 const SearchcraftBaseSearchResult = SearchcraftBaseSearchResult$1;
 const defineCustomElement = defineCustomElement$1;