@searchcraft/javascript-sdk 0.2.1 → 0.2.3

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

@@ -1,352 +0,0 @@
-import { h, Fragment, } from "@stencil/core";
-import classNames from "classnames";
-import { parseCustomStyles } from "../../utils/utils";
-export class SearchcraftInput {
-    constructor() {
-        this.customStyles = {};
-        this.error = false;
-        this.formClassName = '';
-        this.inputCaptionClassName = '';
-        this.inputCaptionValue = '';
-        this.inputClassName = '';
-        this.inputIconHeight = 20;
-        this.inputIconWidth = 20;
-        this.isRequesting = false;
-        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);
-    }
-    handleInputKeyUp(event) {
-        const input = event.target;
-        this.inputKeyUp.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');
-        const validatedCustomStyles = parseCustomStyles(this.customStyles);
-        const placeholderStyle = {
-            fontSize: validatedCustomStyles.placeholderFontSize || '16px',
-        };
-        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};
-                }
-              `), 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 })), h("searchcraft-input-icon", { error: this.error, height: this.inputIconHeight, rightToLeftOrientation: this.rightToLeftOrientation, width: this.inputIconWidth }))) : (h(Fragment, null, h("searchcraft-input-icon", { error: this.error, height: this.inputIconHeight, rightToLeftOrientation: this.rightToLeftOrientation, width: this.inputIconWidth }), 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};
-                }
-              `), 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 }))))));
-    }
-    static get is() { return "searchcraft-input"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["searchcraft-input.module.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["searchcraft-input.module.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "customStyles": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | Record<string, string>",
-                    "resolved": "string | { [x: string]: string; }",
-                    "references": {
-                        "Record": {
-                            "location": "global",
-                            "id": "global::Record"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "custom-styles",
-                "reflect": false,
-                "defaultValue": "{}"
-            },
-            "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": "''"
-            },
-            "inputIconHeight": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "input-icon-height",
-                "reflect": false,
-                "defaultValue": "20"
-            },
-            "inputIconWidth": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "input-icon-width",
-                "reflect": false,
-                "defaultValue": "20"
-            },
-            "isRequesting": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "is-requesting",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "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": "clearInput",
-                "name": "clearInput",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "searchInputChange",
-                "name": "searchInputChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }, {
-                "method": "inputKeyUp",
-                "name": "inputKeyUp",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }];
-    }
-}
-//# sourceMappingURL=searchcraft-input.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"searchcraft-input.js","sourceRoot":"","sources":["../../../src/components/searchcraft-input/searchcraft-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\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"]}

package/dist/collection/components/searchcraft-input/searchcraft-input.module.css

@@ -1,241 +0,0 @@
-: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%;
-}