@searchcraft/javascript-sdk 0.1.0

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

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

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

@@ -0,0 +1,99 @@
+import { h, } from "@stencil/core";
+import classNames from "classnames";
+import { ClearInputIconLight, ClearInputIconDark, } from "../../assets/ClearInputIcon";
+import { ScSpinnerDark } from "../sc-spinner-dark/sc-spinner-dark";
+import { ScSpinnerLight } from "../sc-spinner-light/sc-spinner-light";
+export class ScClearInputButton {
+    constructor() {
+        // Added a click handler to emit the event
+        this.handleClearClick = (event) => {
+            event.preventDefault(); // Prevent default if necessary
+            this.clearInput.emit(); // Emit the event
+        };
+        this.isRequesting = false;
+        this.rightToLeftOrientation = false;
+        this.theme = 'light';
+    }
+    isLightTheme() {
+        return this.theme === 'light';
+    }
+    render() {
+        return this.rightToLeftOrientation ? (h("button", { class: classNames('inputClearButtonRTL', '.sc-clear-input-button-rtl'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (h(ScSpinnerLight, null)) : (h(ScSpinnerDark, null))) : this.isLightTheme ? (h(ClearInputIconLight, null)) : (h(ClearInputIconDark, null)))) : (h("button", { class: classNames('inputClearButtonLTR', '.sc-clear-input-button-ltr'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (h(ScSpinnerLight, null)) : (h(ScSpinnerDark, null))) : this.isLightTheme ? (h(ClearInputIconLight, null)) : (h(ClearInputIconDark, null))));
+    }
+    static get is() { return "sc-clear-input-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sc-clear-input-button.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sc-clear-input-button.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isRequesting": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-requesting",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "rightToLeftOrientation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "right-to-left-orientation",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "theme": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clearInput",
+                "name": "clearInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sc-clear-input-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sc-clear-input-button.js","sourceRoot":"","sources":["../../../src/components/sc-clear-input-button/sc-clear-input-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EACL,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAO/E,MAAM,OAAO,kBAAkB;;QAa7B,0CAA0C;QAClC,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,+BAA+B;YACvD,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC,iBAAiB;QAC3C,CAAC,CAAC;4BAhBsB,KAAK;sCACI,KAAK;qBAKrB,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;IAChC,CAAC;IAQD,MAAM;QACJ,OAAO,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CACnC,cACE,KAAK,EAAE,UAAU,CAAC,qBAAqB,EAAE,4BAA4B,CAAC,EACtE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAClB,EAAC,cAAc,OAAG,CACnB,CAAC,CAAC,CAAC,CACF,EAAC,aAAa,OAAG,CAClB,CACF,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACtB,EAAC,mBAAmB,OAAG,CACxB,CAAC,CAAC,CAAC,CACF,EAAC,kBAAkB,OAAG,CACvB,CACM,CACV,CAAC,CAAC,CAAC,CACF,cACE,KAAK,EAAE,UAAU,CAAC,qBAAqB,EAAE,4BAA4B,CAAC,EACtE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAClB,EAAC,cAAc,OAAG,CACnB,CAAC,CAAC,CAAC,CACF,EAAC,aAAa,OAAG,CAClB,CACF,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACtB,EAAC,mBAAmB,OAAG,CACxB,CAAC,CAAC,CAAC,CACF,EAAC,kBAAkB,OAAG,CACvB,CACM,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  State,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport {\n  ClearInputIconLight,\n  ClearInputIconDark,\n} from '@assets/ClearInputIcon';\n\nimport { ScSpinnerDark } from '@components/sc-spinner-dark/sc-spinner-dark';\nimport { ScSpinnerLight } from '@components/sc-spinner-light/sc-spinner-light';\n\n@Component({\n  tag: 'sc-clear-input-button',\n  styleUrl: 'sc-clear-input-button.module.scss',\n  shadow: true,\n})\nexport class ScClearInputButton {\n  @Prop() isRequesting? = false;\n  @Prop() rightToLeftOrientation = false;\n\n  // Updated `clearInput` to an EventEmitter\n  @Event() clearInput: EventEmitter<void>;\n\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  // Added a click handler to emit the event\n  private handleClearClick = (event: MouseEvent) => {\n    event.preventDefault(); // Prevent default if necessary\n    this.clearInput.emit(); // Emit the event\n  };\n\n  render() {\n    return this.rightToLeftOrientation ? (\n      <button\n        class={classNames('inputClearButtonRTL', '.sc-clear-input-button-rtl')}\n        onClick={this.handleClearClick} // Use the handler\n        type='button'\n      >\n        {this.isRequesting ? (\n          this.isLightTheme ? (\n            <ScSpinnerLight />\n          ) : (\n            <ScSpinnerDark />\n          )\n        ) : this.isLightTheme ? (\n          <ClearInputIconLight />\n        ) : (\n          <ClearInputIconDark />\n        )}\n      </button>\n    ) : (\n      <button\n        class={classNames('inputClearButtonLTR', '.sc-clear-input-button-ltr')}\n        onClick={this.handleClearClick} // Use the handler\n        type='button'\n      >\n        {this.isRequesting ? (\n          this.isLightTheme ? (\n            <ScSpinnerLight />\n          ) : (\n            <ScSpinnerDark />\n          )\n        ) : this.isLightTheme ? (\n          <ClearInputIconLight />\n        ) : (\n          <ClearInputIconDark />\n        )}\n      </button>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,31 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.inputClearButtonLTR {
+  align-items: center;
+  background: none;
+  border: none;
+  display: flex;
+  height: 20px;
+  justify-content: center;
+  padding: 0;
+  position: absolute;
+  right: 25px;
+  top: 11px;
+  width: 20px;
+}
+
+.inputClearButtonRTL {
+  align-items: center;
+  background: none;
+  border: none;
+  display: flex;
+  height: 20px;
+  justify-content: center;
+  left: 25px;
+  padding: 0;
+  position: absolute;
+  top: 11px;
+  width: 20px;
+}

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

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

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

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

package/dist/collection/components/sc-error-message/sc-error-message.module.css

@@ -0,0 +1,21 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.errorMessageLight {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 4px;
+  color: #990000;
+}
+
+.errorMessageDark {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 4px;
+  color: #FFB3B3;
+}

package/dist/collection/components/sc-input/sc-input.js

@@ -0,0 +1,251 @@
+import { h, Fragment, } from "@stencil/core";
+import classNames from "classnames";
+export class ScInput {
+    constructor() {
+        this.error = false;
+        this.formClassName = '';
+        this.inputCaptionClassName = '';
+        this.inputCaptionValue = '';
+        this.inputClassName = '';
+        this.placeholderValue = 'Enter Search';
+        this.rightToLeftOrientation = false;
+        this.query = '';
+        this.theme = 'light';
+    }
+    get isLightTheme() {
+        return this.theme === 'light';
+    }
+    handleInputChange(event) {
+        const input = event.target;
+        this.searchInputChange.emit(input.value);
+    }
+    handleClearInput() {
+        if (this.clearInput) {
+            this.clearInput.emit();
+        }
+    }
+    render() {
+        const containerClassName = this.rightToLeftOrientation
+            ? 'inputContainerRTL'
+            : 'inputContainerLTR';
+        const inputClassName = classNames(this.error
+            ? this.isLightTheme
+                ? 'inputErrorLightRTL'
+                : 'inputErrorDarkRTL'
+            : this.isLightTheme
+                ? 'inputLightLTR'
+                : 'inputDarkLTR', 'searchcraft-input');
+        return (h("div", { key: '0257fcbab8d8f78439506f609784ef089f9b2784', class: classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (h(Fragment, null, h("input", { class: classNames(this.error
+                ? this.isLightTheme
+                    ? 'inputErrorLightRTL'
+                    : 'inputErrorDarkRTL'
+                : this.isLightTheme
+                    ? 'inputLightRTL'
+                    : 'inputDarkRTL', inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query }), this.inputCaptionValue && (h("sc-input-caption", { inputCaptionClassName: this.inputCaptionClassName, inputCaptionValue: this.inputCaptionValue, rightToLeftOrientation: this.rightToLeftOrientation })), this.query.length > 0 && (h("sc-clear-input-button", { onClearInput: this.handleClearInput, rightToLeftOrientation: this.rightToLeftOrientation })), h("sc-input-icon", { error: this.error, rightToLeftOrientation: this.rightToLeftOrientation }))) : (h(Fragment, null, h("input", { class: classNames(this.error
+                ? this.isLightTheme
+                    ? 'inputErrorLightLTR'
+                    : 'inputErrorDarkLTR'
+                : this.isLightTheme
+                    ? 'inputLightLTR'
+                    : 'inputDarkLTR', inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query }), this.inputCaptionValue && (h("sc-input-caption", { inputCaptionClassName: this.inputCaptionClassName, inputCaptionValue: this.inputCaptionValue, rightToLeftOrientation: this.rightToLeftOrientation })), this.query.length > 0 && (h("sc-clear-input-button", { onClearInput: this.handleClearInput, rightToLeftOrientation: this.rightToLeftOrientation }))))));
+    }
+    static get is() { return "sc-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sc-input.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sc-input.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "formClassName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "form-class-name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "inputCaptionClassName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-caption-class-name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "inputCaptionValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-caption-value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "inputClassName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-class-name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholderValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placeholder-value",
+                "reflect": false,
+                "defaultValue": "'Enter Search'"
+            },
+            "rightToLeftOrientation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "right-to-left-orientation",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "query": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "query",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "theme": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "searchInputChange",
+                "name": "searchInputChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "clearInput",
+                "name": "clearInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sc-input.js.map

package/dist/collection/components/sc-input/sc-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sc-input.js","sourceRoot":"","sources":["../../../src/components/sc-input/sc-input.tsx"],"names":[],"mappings":"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","sourcesContent":["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\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n  detail: T;\n  target: HTMLScInputElement;\n}\n\n@Component({\n  tag: 'sc-input',\n  styleUrl: 'sc-input.module.scss',\n  shadow: true,\n})\nexport class ScInput {\n  @Prop() error = false;\n  @Prop() formClassName = '';\n  @Prop() inputCaptionClassName = '';\n  @Prop() inputCaptionValue = '';\n  @Prop() inputClassName = '';\n  @Prop() placeholderValue = 'Enter Search';\n  @Prop() rightToLeftOrientation = false;\n  @Prop() query = '';\n\n  @Event() searchInputChange: EventEmitter<string>;\n  @Event() clearInput: EventEmitter<void>;\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  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    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              class={classNames(\n                this.error\n                  ? this.isLightTheme\n                    ? 'inputErrorLightRTL'\n                    : 'inputErrorDarkRTL'\n                  : this.isLightTheme\n                    ? 'inputLightRTL'\n                    : 'inputDarkRTL',\n                inputClassName,\n                'searchcraft-input',\n              )}\n              id='searchcraft-input-id'\n              onChange={this.handleInputChange.bind(this)}\n              placeholder={this.placeholderValue}\n              type='text'\n              value={this.query}\n            />\n            {this.inputCaptionValue && (\n              <sc-input-caption\n                inputCaptionClassName={this.inputCaptionClassName}\n                inputCaptionValue={this.inputCaptionValue}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            {this.query.length > 0 && (\n              <sc-clear-input-button\n                onClearInput={this.handleClearInput}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            <sc-input-icon\n              error={this.error}\n              rightToLeftOrientation={this.rightToLeftOrientation}\n            />\n          </Fragment>\n        ) : (\n          <Fragment>\n            <input\n              class={classNames(\n                this.error\n                  ? this.isLightTheme\n                    ? 'inputErrorLightLTR'\n                    : 'inputErrorDarkLTR'\n                  : this.isLightTheme\n                    ? 'inputLightLTR'\n                    : 'inputDarkLTR',\n                inputClassName,\n                'searchcraft-input',\n              )}\n              id='searchcraft-input-id'\n              onChange={this.handleInputChange.bind(this)}\n              placeholder={this.placeholderValue}\n              type='text'\n              value={this.query}\n            />\n            {this.inputCaptionValue && (\n              <sc-input-caption\n                inputCaptionClassName={this.inputCaptionClassName}\n                inputCaptionValue={this.inputCaptionValue}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            {this.query.length > 0 && (\n              <sc-clear-input-button\n                onClearInput={this.handleClearInput}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n          </Fragment>\n        )}\n      </div>\n    );\n  }\n}\n"]}