@searchcraft/javascript-sdk 0.2.3 → 0.2.5

package/dist/components/p-ae84b899.js

@@ -0,0 +1,48 @@
+import { p as proxyCustomElement, H, h } from './p-7498e493.js';
+import { c as classNames } from './p-5cdc6210.js';
+
+const searchcraftInputLabelModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.labelLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#292929}.labelDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#FFF}";
+const SearchcraftInputLabelStyle0 = searchcraftInputLabelModuleCss;
+
+const SearchcraftInputLabel = /*@__PURE__*/ proxyCustomElement(class SearchcraftInputLabel extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.inputLabelClassName = '';
+        this.label = undefined;
+        this.theme = 'light';
+    }
+    isLightTheme() {
+        return this.theme === 'light';
+    }
+    render() {
+        if (!this.label) {
+            return null;
+        }
+        const labelStyle = this.isLightTheme() ? 'labelLight' : 'labelDark';
+        return (h("label", { class: classNames(labelStyle, this.inputLabelClassName), htmlFor: 'searchcraft-input-id' }, this.label));
+    }
+    static get style() { return SearchcraftInputLabelStyle0; }
+}, [1, "searchcraft-input-label", {
+        "inputLabelClassName": [1, "input-label-class-name"],
+        "label": [1],
+        "theme": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-input-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-input-label":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftInputLabel);
+            }
+            break;
+    } });
+}
+
+export { SearchcraftInputLabel as S, defineCustomElement as d };
+
+//# sourceMappingURL=p-ae84b899.js.map

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

@@ -0,0 +1 @@
+{"file":"p-ae84b899.js","mappings":";;;AAAA,MAAM,8BAA8B,GAAG,4RAA4R,CAAC;AACpU,oCAAe,8BAA8B;;MCOhC,qBAAqB;;;;;mCACD,EAAE;;qBAEhB,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;KAC/B;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAO,IAAI,CAAC;SACb;QACD,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,YAAY,GAAG,WAAW,CAAC;QACpE,QACE,aACE,KAAK,EAAE,UAAU,CAAC,UAAU,EAAE,IAAI,CAAC,mBAAmB,CAAC,EACvD,OAAO,EAAC,sBAAsB,IAE7B,IAAI,CAAC,KAAK,CACL,EACR;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-input-label/searchcraft-input-label.module.scss?tag=searchcraft-input-label&encapsulation=shadow","src/components/searchcraft-input-label/searchcraft-input-label.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin input-label-base {\n  font-family: var(--font-stack);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n  margin-top: 4px;\n}\n\n.labelLight {\n  @include input-label-base;\n  color: $light-input-label-color;\n}\n\n.labelDark {\n  @include input-label-base;\n  color: $dark-input-label-color;\n}","import { Component, Prop, h, State } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-input-label',\n  styleUrl: 'searchcraft-input-label.module.scss',\n  shadow: true,\n})\nexport class SearchcraftInputLabel {\n  @Prop() inputLabelClassName? = '';\n  @Prop() label?: string;\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  render() {\n    if (!this.label) {\n      return null;\n    }\n    const labelStyle = this.isLightTheme() ? 'labelLight' : 'labelDark';\n    return (\n      <label\n        class={classNames(labelStyle, this.inputLabelClassName)}\n        htmlFor='searchcraft-input-id'\n      >\n        {this.label}\n      </label>\n    );\n  }\n}\n"],"version":3}

package/dist/{searchcraft-javascript-sdk/searchcraft-input.entry.js → components/p-b5f97e04.js}

@@ -1,13 +1,22 @@
-import { r as registerInstance, a as createEvent, h, F as Fragment } from './index-8211f330.js';
-import { c as classNames } from './index-d6567b9c.js';
-import { p as parseCustomStyles } from './utils-dbb6302b.js';
-import './_commonjsHelpers-63cbe26c.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-7498e493.js';
+import { c as classNames } from './p-5cdc6210.js';
+import { p as parseCustomStyles } from './p-2bda632c.js';
+import { d as defineCustomElement$7 } from './p-70722ab2.js';
+import { d as defineCustomElement$6 } from './p-1c377190.js';
+import { d as defineCustomElement$5 } from './p-6237f03e.js';
+import { d as defineCustomElement$4 } from './p-8c38185e.js';
+import { d as defineCustomElement$3 } from './p-a3bd1bc8.js';
+import { d as defineCustomElement$2 } from './p-3fece4e2.js';
+import { d as defineCustomElement$1 } from './p-25f18f2e.js';
 
 const searchcraftInputModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputContainerLTR{position:relative;width:100%}.inputContainerRTL{position:relative;width:100%;margin-left:8px}.inputLightLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;margin-right:8px;padding-left:36px;padding-right:16px}.inputLightLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputLightLTR::placeholder{color:#737373}.inputLightLTR:focus{outline:2px solid #000}.inputDarkLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;margin-right:8px;padding-left:36px;padding-right:16px}.inputDarkLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputDarkLTR::placeholder{color:#BFBFBF}.inputDarkLTR:focus{outline:2px solid #FFF}.inputErrorLightLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;outline:2px solid #c00;margin-right:8px;padding-left:36px;padding-right:16px}.inputErrorLightLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorLightLTR::placeholder{color:#737373}.inputErrorLightLTR:focus{outline:2px solid #000}.inputErrorLightLTR:focus-visible{outline:2px solid #c00}.inputErrorDarkLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;outline:2px solid #FFB3B3;margin-right:8px;padding-left:36px;padding-right:16px}.inputErrorDarkLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorDarkLTR::placeholder{color:#BFBFBF}.inputErrorDarkLTR:focus{outline:2px solid #FFF}.inputErrorDarkLTR:focus-visible{outline:2px solid #FFB3B3}.inputLightRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputLightRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputLightRTL::placeholder{color:#737373}.inputLightRTL:focus{outline:2px solid #000}.inputDarkRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputDarkRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputDarkRTL::placeholder{color:#BFBFBF}.inputDarkRTL:focus{outline:2px solid #FFF}.inputErrorLightRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;outline:2px solid #c00;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputErrorLightRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorLightRTL::placeholder{color:#737373}.inputErrorLightRTL:focus{outline:2px solid #000}.inputErrorLightRTL:focus-visible{outline:2px solid #c00}.inputErrorDarkRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;outline:2px solid #FFB3B3;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputErrorDarkRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorDarkRTL::placeholder{color:#BFBFBF}.inputErrorDarkRTL:focus{outline:2px solid #FFF}.inputErrorDarkRTL:focus-visible{outline:2px solid #FFB3B3}.inputWrapper{align-items:center;display:flex;position:relative;width:100%}";
+const SearchcraftInputStyle0 = searchcraftInputModuleCss;
 
-const SearchcraftInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.clearInput = createEvent(this, "clearInput", 7);
         this.searchInputChange = createEvent(this, "searchInputChange", 7);
         this.inputKeyUp = createEvent(this, "inputKeyUp", 7);
@@ -56,7 +65,7 @@ const SearchcraftInput = class {
         const placeholderStyle = {
             fontSize: validatedCustomStyles.placeholderFontSize || '16px',
         };
-        return (h("div", { key: '80b683ed9ed141f5e74b06f63dabab10e17b9de2', class: classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (h(Fragment, null, h("input", { autoComplete: 'off', class: classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), h("style", null, `
+        return (h("div", { key: 'ca2698b808ef606d890817f6b8c133503663570e', class: classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (h(Fragment, null, h("input", { autoComplete: 'off', class: classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), h("style", null, `
                 #searchcraft-input-id::placeholder {
                   font-size: ${placeholderStyle.fontSize};
                 }
@@ -66,9 +75,71 @@ const SearchcraftInput = class {
                 }
               `), this.inputCaptionValue && (h("searchcraft-input-caption", { inputCaptionClassName: this.inputCaptionClassName, inputCaptionValue: this.inputCaptionValue, rightToLeftOrientation: this.rightToLeftOrientation })), this.query.length > 0 && (h("searchcraft-clear-input-button", { isRequesting: this.isRequesting, onClearInput: this.handleClearInput, rightToLeftOrientation: this.rightToLeftOrientation }))))));
     }
-};
-SearchcraftInput.style = searchcraftInputModuleCss;
+    static get style() { return SearchcraftInputStyle0; }
+}, [1, "searchcraft-input", {
+        "customStyles": [1, "custom-styles"],
+        "error": [4],
+        "formClassName": [1, "form-class-name"],
+        "inputCaptionClassName": [1, "input-caption-class-name"],
+        "inputCaptionValue": [1, "input-caption-value"],
+        "inputClassName": [1, "input-class-name"],
+        "inputIconHeight": [2, "input-icon-height"],
+        "inputIconWidth": [2, "input-icon-width"],
+        "isRequesting": [4, "is-requesting"],
+        "placeholderValue": [1, "placeholder-value"],
+        "rightToLeftOrientation": [4, "right-to-left-orientation"],
+        "query": [1],
+        "theme": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-input", "searchcraft-clear-icon-set", "searchcraft-clear-input-button", "searchcraft-input-caption", "searchcraft-input-icon", "searchcraft-search-icon-set", "searchcraft-spinner-dark", "searchcraft-spinner-light"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftInput);
+            }
+            break;
+        case "searchcraft-clear-icon-set":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "searchcraft-clear-input-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "searchcraft-input-caption":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "searchcraft-input-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "searchcraft-search-icon-set":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "searchcraft-spinner-dark":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "searchcraft-spinner-light":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
 
-export { SearchcraftInput as searchcraft_input };
+export { SearchcraftInput as S, defineCustomElement as d };
 
-//# sourceMappingURL=searchcraft-input.entry.js.map
+//# sourceMappingURL=p-b5f97e04.js.map

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

@@ -0,0 +1 @@
+{"file":"p-b5f97e04.js","mappings":"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","names":[],"sources":["src/components/searchcraft-input/searchcraft-input.module.scss?tag=searchcraft-input&encapsulation=shadow","src/components/searchcraft-input/searchcraft-input.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin input-container-base {\n  position: relative;\n  width: 100%;\n}\n\n@mixin input-base {\n  border: none;\n  border-radius: 8px;\n  font-family: var(--font-stack);\n  outline: none;\n  padding-bottom: 15px;\n  padding-top: 15px;\n  width: 100%;\n\n  &::placeholder {\n    font-family: var(--font-stack);\n    font-size: 16px;\n  }\n}\n\n@mixin input-base-light {\n  @include input-base;\n  background-color: $light-input-background-color;\n  color: $light-input-label-color;\n\n  &::placeholder {\n    color: $light-input-placeholder-color;\n  }\n\n  &:focus {\n    outline: 2px solid $light-input-outline-focus;\n  }\n}\n\n@mixin input-base-dark {\n  @include input-base;\n  background-color: $dark-input-background-color;\n  color: $dark-input-label-color;\n\n  &::placeholder {\n    color: $dark-input-placeholder-color;\n  }\n\n  &:focus {\n    outline: 2px solid $dark-input-outline-focus;\n  }\n}\n\n@mixin input-error-base-light {\n  @include input-base-light;\n  outline: 2px solid $light-input-error-outline;\n\n  &:focus-visible {\n    outline: 2px solid $light-input-error-outline,\n  }\n}\n\n@mixin input-error-base-dark {\n  @include input-base-dark;\n  outline: 2px solid $dark-input-error-outline;\n\n  &:focus-visible {\n    outline: 2px solid $dark-input-error-outline;\n  }\n}\n\n.inputContainerLTR {\n  @include input-container-base;\n}\n\n.inputContainerRTL {\n  @include input-container-base;\n  margin-left: 8px;\n}\n\n@mixin align-LTR {\n  margin-right: 8px;\n  padding-left: 36px;\n  padding-right: 16px;\n}\n\n.inputLightLTR {\n  @include input-base-light;\n  @include align-LTR;\n}\n\n.inputDarkLTR {\n  @include input-base-dark;\n  @include align-LTR;\n}\n\n.inputErrorLightLTR {\n  @include input-error-base-light;\n  @include align-LTR;\n}\n\n.inputErrorDarkLTR {\n  @include input-error-base-dark;\n  @include align-LTR;\n}\n\n@mixin align-RTL {\n  margin-left: 8px;\n  padding-left: 16px;\n  padding-right: 36px;\n  text-align: right;\n}\n\n.inputLightRTL {\n  @include input-base-light;\n  @include align-RTL;\n}\n\n.inputDarkRTL {\n  @include input-base-dark;\n  @include align-RTL;\n}\n\n.inputErrorLightRTL {\n  @include input-error-base-light;\n  @include align-RTL;\n}\n\n.inputErrorDarkRTL {\n  @include input-error-base-dark;\n  @include align-RTL;\n}\n\n.inputWrapper {\n  align-items: center;\n  display: flex;\n  position: relative;\n  width: 100%;\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Event,\n  Fragment,\n  type EventEmitter,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils/utils';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n  detail: T;\n  target: HTMLSearchcraftInputElement;\n}\n\n@Component({\n  tag: 'searchcraft-input',\n  styleUrl: 'searchcraft-input.module.scss',\n  shadow: true,\n})\nexport class SearchcraftInput {\n  @Prop() customStyles: string | Record<string, string> = {};\n  @Prop() error = false;\n  @Prop() formClassName = '';\n  @Prop() inputCaptionClassName = '';\n  @Prop() inputCaptionValue = '';\n  @Prop() inputClassName = '';\n  @Prop() inputIconHeight = 20;\n  @Prop() inputIconWidth = 20;\n  @Prop() isRequesting = false;\n  @Prop() placeholderValue = 'Enter Search';\n  @Prop() rightToLeftOrientation = false;\n  @Prop() query = '';\n\n  @Event() clearInput: EventEmitter<void>;\n  @Event() searchInputChange: EventEmitter<string>;\n  @Event() inputKeyUp: EventEmitter<string>;\n\n  @State() theme = 'light';\n\n  private get isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  handleInputChange(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this.searchInputChange.emit(input.value);\n  }\n\n  handleInputKeyUp(event: KeyboardEvent) {\n    const input = event.target as HTMLInputElement;\n    this.inputKeyUp.emit(input.value);\n  }\n\n  handleClearInput() {\n    if (this.clearInput) {\n      this.clearInput.emit();\n    }\n  }\n\n  render() {\n    const containerClassName = this.rightToLeftOrientation\n      ? 'inputContainerRTL'\n      : 'inputContainerLTR';\n\n    const inputClassName = classNames(\n      this.error\n        ? this.isLightTheme\n          ? 'inputErrorLightRTL'\n          : 'inputErrorDarkRTL'\n        : this.isLightTheme\n          ? 'inputLightLTR'\n          : 'inputDarkLTR',\n      'searchcraft-input',\n    );\n\n    const validatedCustomStyles = parseCustomStyles(this.customStyles);\n\n    const placeholderStyle = {\n      fontSize: validatedCustomStyles.placeholderFontSize || '16px',\n    };\n    return (\n      <div\n        class={classNames(\n          containerClassName,\n          this.formClassName,\n          'searchcraft-input-form',\n        )}\n      >\n        {this.rightToLeftOrientation ? (\n          <Fragment>\n            <input\n              autoComplete='off'\n              class={classNames(inputClassName, 'searchcraft-input')}\n              id='searchcraft-input-id'\n              onChange={this.handleInputChange.bind(this)}\n              onKeyUp={this.handleInputKeyUp.bind(this)}\n              placeholder={this.placeholderValue}\n              type='text'\n              value={this.query}\n              style={validatedCustomStyles}\n            />\n            <style>\n              {`\n                #searchcraft-input-id::placeholder {\n                  font-size: ${placeholderStyle.fontSize};\n                }\n              `}\n            </style>\n            {this.inputCaptionValue && (\n              <searchcraft-input-caption\n                inputCaptionClassName={this.inputCaptionClassName}\n                inputCaptionValue={this.inputCaptionValue}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            {this.query.length > 0 && (\n              <searchcraft-clear-input-button\n                isRequesting={this.isRequesting}\n                onClearInput={this.handleClearInput}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            <searchcraft-input-icon\n              error={this.error}\n              height={this.inputIconHeight}\n              rightToLeftOrientation={this.rightToLeftOrientation}\n              width={this.inputIconWidth}\n            />\n          </Fragment>\n        ) : (\n          <Fragment>\n            <searchcraft-input-icon\n              error={this.error}\n              height={this.inputIconHeight}\n              rightToLeftOrientation={this.rightToLeftOrientation}\n              width={this.inputIconWidth}\n            />\n            <input\n              autoComplete='off'\n              class={classNames(inputClassName, 'searchcraft-input')}\n              id='searchcraft-input-id'\n              onChange={this.handleInputChange.bind(this)}\n              onKeyUp={this.handleInputKeyUp.bind(this)}\n              placeholder={this.placeholderValue}\n              type='text'\n              value={this.query}\n              style={validatedCustomStyles}\n            />\n            <style>\n              {`\n                #searchcraft-input-id::placeholder {\n                  font-size: ${placeholderStyle.fontSize};\n                }\n              `}\n            </style>\n            {this.inputCaptionValue && (\n              <searchcraft-input-caption\n                inputCaptionClassName={this.inputCaptionClassName}\n                inputCaptionValue={this.inputCaptionValue}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            {this.query.length > 0 && (\n              <searchcraft-clear-input-button\n                isRequesting={this.isRequesting}\n                onClearInput={this.handleClearInput}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n          </Fragment>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-bdf281cc.js

@@ -0,0 +1,89 @@
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-7498e493.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:#FAFAFA}@media (min-width: 600px){.interactiveResultContainerLight{flex-direction:row}}.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: 600px){.interactiveResultContainerDark{flex-direction:row}}.resultContainer{align-items:flex-start;display:flex;flex-direction:column;gap:16px}@media (min-width: 600px){.resultContainer{flex-direction:row}}.interactiveIconLarge{display:inline-block;position:absolute;right:5px;top:8px}@media (max-width: 600px){.interactiveIconLarge{display:none}}.interactiveIconSmall{display:inline-block;position:absolute;right:5px;top:-2px}@media (min-width: 600px){.interactiveIconSmall{display:none}}.imageContainer{max-width:100%}.contentContainer{max-height:100%;max-width:100%}@media (min-width: 600px){.contentContainer{max-width:50%}}.secondaryContentContainer{display:flex}.imageLight{border-radius:8px;max-height:100%;max-width:100%;border:1px solid #D9D9D9}.imageDark{border-radius:8px;max-height:100%;max-width:100%;border:1px solid #333}.headingLight{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;position:relative;color:#292929}.headingDark{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;position:relative;color:#FFF}.subheadingLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#737373}.subheadingDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#BFBFBF}.primaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.primaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.secondaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.secondaryContentLight::after{content:\"•\";color:#404040;font-size:1em;margin-left:5px;margin-right:5px}.secondaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.tertiaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.tertiaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}";
+const SearchcraftBaseSearchResultStyle0 = searchcraftBaseSearchResultModuleCss;
+
+const SearchcraftBaseSearchResult = /*@__PURE__*/ proxyCustomElement(class SearchcraftBaseSearchResult extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.buttonCallback = createEvent(this, "buttonCallback", 7);
+        this.keyDownCallback = createEvent(this, "keyDownCallback", 7);
+        this.resultCallback = createEvent(this, "resultCallback", 7);
+        this.buttonCallback = () => { }; // Callback for button click
+        this.keyDownCallback = () => { }; // Callback for key down event
+        this.resultCallback = () => { }; // Callback for result container click
+        this.handleButtonClick = () => {
+            this.buttonCallback();
+        };
+        this.handleContainerClick = () => {
+            if (this.isInteractive) {
+                this.resultCallback();
+            }
+        };
+        this.buttonText = '';
+        this.customStyles = '{}';
+        this.headingText = '';
+        this.imageDescription = '';
+        this.imageSource = '';
+        this.isInteractive = false;
+        this.primaryContent = '';
+        this.secondaryContent = '';
+        this.subheadingText = '';
+        this.tertiaryContent = '';
+        this.themeMode = 'light';
+        this.placeImageRight = false;
+    }
+    parseStyles() {
+        try {
+            return JSON.parse(this.customStyles);
+        }
+        catch (error) {
+            console.error('Error parsing custom styles:', error);
+            return {};
+        }
+    }
+    render() {
+        const isLightTheme = this.themeMode === 'light';
+        const styles = this.parseStyles();
+        const imageContainer = (h("div", { key: '83bd0ac730469f4004ac4024c749cd66edfbf7c7', class: 'imageContainer' }, h("img", { key: 'e379c01b45808499d6ac78557294e9c408b1734f', alt: this.imageDescription, class: isLightTheme ? 'imageLight' : 'imageDark', src: this.imageSource, style: styles.image || {} })));
+        const contentContainer = (h("div", { key: '1847892cef75ecb2179178ec17217376c523b1b2', class: 'contentContainer' }, h("h2", { key: '16f6c8dac748fa2b99575eb4b8bcf217a7452ea0', class: isLightTheme ? 'headingLight' : 'headingDark', style: styles.heading || {} }, this.headingText), h("h3", { key: '3539e9fc9b2e567d5cb088b4ae77307f03fb47d1', class: isLightTheme ? 'subheadingLight' : 'subheadingDark', style: styles.subheading || {} }, this.subheadingText), h("p", { key: '20beff8ed55ca1c18cef587f4306b50829c81775', class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark', style: styles.primaryContent || {} }, this.primaryContent), h("div", { key: 'd79107bd79de978f64906db23aa14c533132f369', class: 'secondaryContentContainer' }, h("p", { key: '978f7176d8fa3372a1360a516640d8334ffe9612', class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark', style: styles.secondaryContent || {} }, this.secondaryContent), h("p", { key: '08e70740d73f78ef10769f882ac4ddf80545fac2', class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark', style: styles.tertiaryContent || {} }, this.tertiaryContent)), this.buttonText && (h("button", { key: '3f3bfe27e824829e86764445ad9c0cd66bfeae92', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText))));
+        return (h("div", { key: 'f6dc4ad85634cef131ffc85d574ef35a862f9d77', class: this.isInteractive
+                ? isLightTheme
+                    ? 'interactiveResultContainerLight'
+                    : 'interactiveResultContainerDark'
+                : 'resultContainer', onKeyDown: this.keyDownCallback, onClick: this.handleContainerClick, style: styles.container || {}, tabindex: '0' }, this.placeImageRight ? (h(Fragment, null, contentContainer, imageContainer)) : (h(Fragment, null, imageContainer, contentContainer))));
+    }
+    static get style() { return SearchcraftBaseSearchResultStyle0; }
+}, [1, "searchcraft-base-search-result", {
+        "buttonText": [1, "button-text"],
+        "customStyles": [1, "custom-styles"],
+        "headingText": [1, "heading-text"],
+        "imageDescription": [1, "image-description"],
+        "imageSource": [1, "image-source"],
+        "isInteractive": [4, "is-interactive"],
+        "primaryContent": [1, "primary-content"],
+        "secondaryContent": [1, "secondary-content"],
+        "subheadingText": [1, "subheading-text"],
+        "tertiaryContent": [1, "tertiary-content"],
+        "themeMode": [1, "theme-mode"],
+        "placeImageRight": [4, "place-image-right"]
+    }]);
+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-bdf281cc.js.map

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

@@ -0,0 +1 @@
+{"file":"p-bdf281cc.js","mappings":";;AAAA,MAAM,oCAAoC,GAAG,22FAA22F,CAAC;AACz5F,0CAAe,oCAAoC;;MCMtC,2BAA2B;;;;;;;;QAc7B,mBAAc,GAAe,SAAQ,CAAC;QACtC,oBAAe,GAAe,SAAQ,CAAC;QACvC,mBAAc,GAAe,SAAQ,CAAC;QAEvC,sBAAiB,GAAG;YAC1B,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB,CAAC;QAEM,yBAAoB,GAAG;YAC7B,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB;SACF,CAAC;0BAzBmB,EAAE;4BACA,IAAI;2BACL,EAAE;gCACG,EAAE;2BACP,EAAE;6BACA,KAAK;8BACJ,EAAE;gCACA,EAAE;8BACJ,EAAE;+BACD,EAAE;yBACU,OAAO;+BACnB,KAAK;;IAgBvB,WAAW;QACjB,IAAI;YACF,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACtC;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAC;YACrD,OAAO,EAAE,CAAC;SACX;KACF;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAElC,MAAM,cAAc,IAClB,4DAAK,KAAK,EAAC,gBAAgB,IACzB,4DACE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAC1B,KAAK,EAAE,YAAY,GAAG,YAAY,GAAG,WAAW,EAChD,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,EAAE,GACzB,CACE,CACP,CAAC;QAEF,MAAM,gBAAgB,IACpB,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,2DACE,KAAK,EAAE,YAAY,GAAG,cAAc,GAAG,aAAa,EACpD,KAAK,EAAE,MAAM,CAAC,OAAO,IAAI,EAAE,IAE1B,IAAI,CAAC,WAAW,CACd,EACL,2DACE,KAAK,EAAE,YAAY,GAAG,iBAAiB,GAAG,gBAAgB,EAC1D,KAAK,EAAE,MAAM,CAAC,UAAU,IAAI,EAAE,IAE7B,IAAI,CAAC,cAAc,CACjB,EACL,0DACE,KAAK,EAAE,YAAY,GAAG,qBAAqB,GAAG,oBAAoB,EAClE,KAAK,EAAE,MAAM,CAAC,cAAc,IAAI,EAAE,IAEjC,IAAI,CAAC,cAAc,CAClB,EACJ,4DAAK,KAAK,EAAC,2BAA2B,IACpC,0DACE,KAAK,EACH,YAAY,GAAG,uBAAuB,GAAG,sBAAsB,EAEjE,KAAK,EAAE,MAAM,CAAC,gBAAgB,IAAI,EAAE,IAEnC,IAAI,CAAC,gBAAgB,CACpB,EACJ,0DACE,KAAK,EACH,YAAY,GAAG,sBAAsB,GAAG,qBAAqB,EAE/D,KAAK,EAAE,MAAM,CAAC,eAAe,IAAI,EAAE,IAElC,IAAI,CAAC,eAAe,CACnB,CACA,EACL,IAAI,CAAC,UAAU,KACd,+DACE,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,KAAK,EAAE,MAAM,CAAC,MAAM,IAAI,EAAE,EAC1B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,UAAU,CACT,CACV,CACG,CACP,CAAC;QAEF,QACE,4DACE,KAAK,EACH,IAAI,CAAC,aAAa;kBACd,YAAY;sBACV,iCAAiC;sBACjC,gCAAgC;kBAClC,iBAAiB,EAEvB,SAAS,EAAE,IAAI,CAAC,eAAe,EAC/B,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,KAAK,EAAE,MAAM,CAAC,SAAS,IAAI,EAAE,EAC7B,QAAQ,EAAC,GAAG,IAEX,IAAI,CAAC,eAAe,IACnB,EAAC,QAAQ,QACN,gBAAgB,EAChB,cAAc,CACN,KAEX,EAAC,QAAQ,QACN,cAAc,EACd,gBAAgB,CACR,CACZ,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-base-search-result/searchcraft-base-search-result.module.scss?tag=searchcraft-base-search-result&encapsulation=shadow","src/components/searchcraft-base-search-result/searchcraft-base-search-result.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin interactive-result-container-base {\n  align-items: flex-start;\n  border-radius: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 8px;\n  position: relative;\n\n  @media (min-width: 600px) {\n    flex-direction: row;\n  }\n}\n\n.interactiveResultContainerLight {\n  @include interactive-result-container-base;\n  background-color: $light-search-result-container-background;\n}\n\n.interactiveResultContainerDark {\n  @include interactive-result-container-base;\n  background-color: $dark-search-result-container-background;\n}\n\n.resultContainer {\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n\n  @media (min-width: 600px) {\n    flex-direction: row;\n  }\n}\n\n.interactiveIconLarge {\n  display: inline-block;\n  position: absolute;\n  right: 5px;\n  top: 8px;\n\n\n  @media (max-width: 600px) {\n    display: none;\n  }\n}\n\n.interactiveIconSmall {\n  display: inline-block;\n  position: absolute;\n  right: 5px;\n  top: -2px;\n\n\n  @media (min-width: 600px) {\n   display: none;\n  }\n}\n\n.imageContainer {\n  max-width: 100%;\n}\n\n.contentContainer {\n  max-height: 100%;\n  max-width: 100%;\n\n  @media (min-width: 600px) {\n    max-width: 50%;\n  }\n}\n\n.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  border: 1px solid $light-search-result-image-border;\n}\n\n.imageDark {\n  @include image-base;\n  border: 1px solid $dark-search-result-image-border;\n}\n\n@mixin heading-base {\n  font-family: var(--font-stack);\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 20px;\n  margin-bottom: 4px;\n  margin-top: 0;\n  position: relative;\n}\n\n.headingLight {\n  @include heading-base;\n  color: $light-search-result-heading-color;\n}\n\n.headingDark {\n  @include heading-base;\n  color: $dark-search-result-heading-color;\n}\n\n@mixin subheading-base {\n  font-family: var(--font-stack);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n  margin-bottom: 4px;\n  margin-top: 0px;\n}\n\n.subheadingLight {\n  @include subheading-base;\n  color: $light-search-result-subheading-color;\n}\n\n.subheadingDark {\n  @include subheading-base;\n  color: $dark-search-result-subheading-color\n}\n\n@mixin body-content-base {\n  font-family: var(--font-stack);\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 4px;\n  margin-top: 0px;\n}\n\n.primaryContentLight {\n  @include body-content-base;\n  color: $light-search-result-body-content-color;\n}\n\n.primaryContentDark {\n  @include body-content-base;\n  color: $dark-search-result-body-content-color;\n}\n\n.secondaryContentLight {\n  @include body-content-base;\n  color: $light-search-result-body-content-color;\n}\n\n.secondaryContentLight::after {\n  content: \"•\";\n  color: $light-search-result-body-content-color;\n  font-size: 1em;\n  margin-left: 5px;\n  margin-right: 5px;\n}\n\n.secondaryContentDark {\n  @include body-content-base;\n  color: $dark-search-result-body-content-color;\n}\n\n.tertiaryContentLight {\n  @include body-content-base;\n  color: $light-search-result-body-content-color;\n}\n\n.tertiaryContentDark {\n  @include body-content-base;\n  color: $dark-search-result-body-content-color;\n}","import { Component, Event, 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: true,\n})\nexport class SearchcraftBaseSearchResult {\n  @Prop() buttonText = ''; // Label for the button\n  @Prop() customStyles = '{}'; // New string prop for serialized styles.\n  @Prop() headingText = ''; // Text for the heading\n  @Prop() imageDescription = ''; // Alternative text for the image\n  @Prop() imageSource = ''; // Source URL for the image\n  @Prop() isInteractive = false; // Determines if the result is interactive\n  @Prop() primaryContent = ''; // Primary body content\n  @Prop() secondaryContent = ''; // Secondary body content\n  @Prop() subheadingText = ''; // Text for the subheading\n  @Prop() tertiaryContent = ''; // Tertiary body content\n  @Prop() themeMode: 'light' | 'dark' = 'light'; // Light or dark theme context\n  @Prop() placeImageRight = false; // Determines the placement of the image container\n\n  @Event() buttonCallback: () => void = () => {}; // Callback for button click\n  @Event() keyDownCallback: () => void = () => {}; // Callback for key down event\n  @Event() resultCallback: () => void = () => {}; // Callback for result container click\n\n  private handleButtonClick = () => {\n    this.buttonCallback();\n  };\n\n  private handleContainerClick = () => {\n    if (this.isInteractive) {\n      this.resultCallback();\n    }\n  };\n\n  private parseStyles(): Record<string, { [key: string]: string }> {\n    try {\n      return JSON.parse(this.customStyles);\n    } catch (error) {\n      console.error('Error parsing custom styles:', error);\n      return {};\n    }\n  }\n\n  render() {\n    const isLightTheme = this.themeMode === 'light';\n    const styles = this.parseStyles();\n\n    const imageContainer = (\n      <div class='imageContainer'>\n        <img\n          alt={this.imageDescription}\n          class={isLightTheme ? 'imageLight' : 'imageDark'}\n          src={this.imageSource}\n          style={styles.image || {}}\n        />\n      </div>\n    );\n\n    const contentContainer = (\n      <div class='contentContainer'>\n        <h2\n          class={isLightTheme ? 'headingLight' : 'headingDark'}\n          style={styles.heading || {}}\n        >\n          {this.headingText}\n        </h2>\n        <h3\n          class={isLightTheme ? 'subheadingLight' : 'subheadingDark'}\n          style={styles.subheading || {}}\n        >\n          {this.subheadingText}\n        </h3>\n        <p\n          class={isLightTheme ? 'primaryContentLight' : 'primaryContentDark'}\n          style={styles.primaryContent || {}}\n        >\n          {this.primaryContent}\n        </p>\n        <div class='secondaryContentContainer'>\n          <p\n            class={\n              isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark'\n            }\n            style={styles.secondaryContent || {}}\n          >\n            {this.secondaryContent}\n          </p>\n          <p\n            class={\n              isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark'\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      <div\n        class={\n          this.isInteractive\n            ? isLightTheme\n              ? 'interactiveResultContainerLight'\n              : 'interactiveResultContainerDark'\n            : 'resultContainer'\n        }\n        onKeyDown={this.keyDownCallback}\n        onClick={this.handleContainerClick}\n        style={styles.container || {}}\n        tabindex='0'\n      >\n        {this.placeImageRight ? (\n          <Fragment>\n            {contentContainer}\n            {imageContainer}\n          </Fragment>\n        ) : (\n          <Fragment>\n            {imageContainer}\n            {contentContainer}\n          </Fragment>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,207 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-7498e493.js';
+import { u as useSearchcraftStore, g } from './p-157e5b1a.js';
+import { p as parseCustomStyles } from './p-2bda632c.js';
+import { d as defineCustomElement$b } from './p-70722ab2.js';
+import { d as defineCustomElement$a } from './p-1c377190.js';
+import { d as defineCustomElement$9 } from './p-848301b7.js';
+import { d as defineCustomElement$8 } from './p-b5f97e04.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-3fece4e2.js';
+import { d as defineCustomElement$2 } from './p-25f18f2e.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;
+
+const SearchcraftAutoSearchForm$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftAutoSearchForm extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.inputClearedOrNoResults = createEvent(this, "inputClearedOrNoResults", 7);
+        this.querySubmit = createEvent(this, "querySubmit", 7);
+        this.debounceTimeout = null;
+        this.debounceDelay = 0;
+        this.searchStore = useSearchcraftStore.getState();
+        this.handleInputChange = (event) => {
+            this.query = event.detail;
+            this.searchStore.setQuery(this.query);
+            this.querySubmit.emit(this.query);
+        };
+        this.handleInputKeyUp = (event) => {
+            const target = event.detail;
+            this.query = target;
+            this.searchStore.setQuery(this.query);
+            this.querySubmit.emit(this.query);
+            if (this.debounceTimeout) {
+                clearTimeout(this.debounceTimeout);
+            }
+            this.debounceTimeout = setTimeout(() => {
+                this.query.trim() !== '' && this.runSearch();
+            }, this.debounceDelay);
+        };
+        this.handleClearInput = () => {
+            this.query = '';
+            this.searchStore.setQuery('');
+            if (typeof this.clearInput === 'function') {
+                this.clearInput();
+            }
+            if (this.debounceTimeout) {
+                clearTimeout(this.debounceTimeout);
+            }
+            this.error = false;
+            this.inputClearedOrNoResults.emit();
+        };
+        this.runSearch = async () => {
+            if (this.query.trim() === '') {
+                this.error = true;
+                this.inputClearedOrNoResults.emit();
+            }
+            else {
+                this.error = false;
+                this.searchStore.setQuery(this.query);
+                try {
+                    await this.searchStore.search();
+                }
+                catch (error) {
+                    this.error = true;
+                    this.inputClearedOrNoResults.emit();
+                }
+            }
+        };
+        this.handleFormSubmit = async (event) => {
+            event.preventDefault();
+            await this.runSearch();
+        };
+        this.autoSearchFormClass = '';
+        this.clearInput = () => { };
+        this.config = {
+            apiKey: '',
+            endpointURL: '',
+            index: [],
+        };
+        this.customStylesForInput = {};
+        this.inputCaptionValue = '';
+        this.inputIconHeight = 20;
+        this.inputIconWidth = 20;
+        this.labelForInput = '';
+        this.placeholderValue = 'Search here';
+        this.rightToLeftOrientation = false;
+        this.searchContainerClass = '';
+        this.error = false;
+        this.isRequesting = false;
+        this.query = '';
+        this.searchResults = null;
+    }
+    componentDidLoad() {
+        const searchcraft = new g(this.config);
+        this.searchStore.initialize(searchcraft, true);
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            this.isRequesting = state.isRequesting;
+            this.searchResults = Object.assign({}, state.searchResults);
+        });
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    render() {
+        var _a, _b, _c;
+        const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';
+        const parsedCustomStyles = parseCustomStyles(this.customStylesForInput);
+        if (this.query.length > 0 && ((_c = (_b = (_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.length) === 0) {
+            this.inputClearedOrNoResults.emit();
+        }
+        return (h("form", { key: '1ecc90be4b39c7fbfff4a3c89c319343f6478a1e', class: `${formClass}`, onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: '82ee01912536de6a11e20f7df533856a41ebc343', label: this.labelForInput }), h("searchcraft-input", { key: 'ad00322933a20db2865cd79241056f7b0ee84a15', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "input-icon-height": this.inputIconHeight, "input-icon-width": this.inputIconWidth, "is-requesting": this.isRequesting, onClearInput: this.handleClearInput, onInputKeyUp: this.handleInputKeyUp, onSearchInputChange: this.handleInputChange, "placeholder-value": this.placeholderValue, query: this.query, "right-to-left-orientation": this.rightToLeftOrientation }), this.error && (h("searchcraft-error-message", { key: '588a134a1130d3c4e4fc921b09450268057b8217', errorMessage: 'Please enter a search query.' }))));
+    }
+    static get style() { return SearchcraftAutoSearchFormStyle0; }
+}, [1, "searchcraft-auto-search-form", {
+        "autoSearchFormClass": [1, "auto-search-form-class"],
+        "clearInput": [16],
+        "config": [16],
+        "customStylesForInput": [1, "custom-styles-for-input"],
+        "inputCaptionValue": [1, "input-caption-value"],
+        "inputIconHeight": [2, "input-icon-height"],
+        "inputIconWidth": [2, "input-icon-width"],
+        "labelForInput": [1, "label-for-input"],
+        "placeholderValue": [1, "placeholder-value"],
+        "rightToLeftOrientation": [4, "right-to-left-orientation"],
+        "searchContainerClass": [1, "search-container-class"],
+        "error": [32],
+        "isRequesting": [32],
+        "query": [32],
+        "searchResults": [32]
+    }]);
+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"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-auto-search-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftAutoSearchForm$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":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "searchcraft-input-caption":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "searchcraft-input-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "searchcraft-input-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "searchcraft-search-icon-set":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "searchcraft-spinner-dark":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "searchcraft-spinner-light":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SearchcraftAutoSearchForm = SearchcraftAutoSearchForm$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SearchcraftAutoSearchForm, defineCustomElement };
+
+//# sourceMappingURL=searchcraft-auto-search-form.js.map

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

@@ -0,0 +1 @@
+{"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&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    this.querySubmit.emit(this.query);\n  };\n\n  handleInputKeyUp = (event: ScInputCustomEvent<string>) => {\n    const target = event.detail;\n    this.query = target;\n    this.searchStore.setQuery(this.query);\n    this.querySubmit.emit(this.query);\n\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout);\n    }\n\n    this.debounceTimeout = setTimeout(() => {\n      this.query.trim() !== '' && this.runSearch();\n    }, this.debounceDelay);\n  };\n\n  handleClearInput = () => {\n    this.query = '';\n    this.searchStore.setQuery('');\n\n    if (typeof this.clearInput === 'function') {\n      this.clearInput();\n    }\n\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout);\n    }\n\n    this.error = false;\n    this.inputClearedOrNoResults.emit();\n  };\n\n  private runSearch = async () => {\n    if (this.query.trim() === '') {\n      this.error = true;\n      this.inputClearedOrNoResults.emit();\n    } else {\n      this.error = false;\n      this.searchStore.setQuery(this.query);\n\n      try {\n        await this.searchStore.search();\n      } catch (error) {\n        this.error = true;\n        this.inputClearedOrNoResults.emit();\n      }\n    }\n  };\n\n  handleFormSubmit = async (event: Event) => {\n    event.preventDefault();\n    await this.runSearch();\n  };\n\n  render() {\n    const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';\n    const parsedCustomStyles = parseCustomStyles(this.customStylesForInput);\n    if (this.query.length > 0 && this.searchResults?.data?.hits?.length === 0) {\n      this.inputClearedOrNoResults.emit();\n    }\n\n    return (\n      <form class={`${formClass}`} onSubmit={this.handleFormSubmit}>\n        <searchcraft-input-label label={this.labelForInput} />\n        <searchcraft-input\n          customStyles={parsedCustomStyles}\n          input-caption-value={this.inputCaptionValue}\n          input-icon-height={this.inputIconHeight}\n          input-icon-width={this.inputIconWidth}\n          is-requesting={this.isRequesting}\n          onClearInput={this.handleClearInput}\n          onInputKeyUp={this.handleInputKeyUp}\n          onSearchInputChange={this.handleInputChange}\n          placeholder-value={this.placeholderValue}\n          query={this.query}\n          right-to-left-orientation={this.rightToLeftOrientation}\n        />\n        {this.error && (\n          <searchcraft-error-message errorMessage='Please enter a search query.' />\n        )}\n      </form>\n    );\n  }\n}\n"],"version":3}