@searchcraft/javascript-sdk 0.8.2 → 0.9.1

package/dist/components/{p-6e2eef88.js → p-5bd5c3cb.js}

@@ -1,105 +1,19 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-5365011f.js';
-import { u as useSearchcraftStore, g as ge } from './p-38419178.js';
-import { p as parseCustomStyles } from './p-d9551738.js';
 import { c as classNames } from './p-5cdc6210.js';
+import { p as parseCustomStyles } from './p-d9551738.js';
+import { s as searchcraftStore } from './p-6d8b0ead.js';
 import { d as defineCustomElement$3 } from './p-71cc28c1.js';
 import { d as defineCustomElement$2 } from './p-0e393fe1.js';
 import { d as defineCustomElement$1 } from './p-e55a7970.js';
 
-const name = "@searchcraft/javascript-sdk";
-const version = "0.8.2";
-const description = "Searchcraft Javascript SDK";
-const author = "Searchcraft";
-const license = "Apache-2.0";
-const main = "dist/index.cjs.js";
-const module = "dist/index.js";
-const types = "dist/types/index.d.ts";
-const collection = "dist/collection/collection-manifest.json";
-const unpkg = "dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.esm.js";
-const exports = {
-	".": {
-		"import": "./dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.esm.js",
-		require: "./dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.cjs.js",
-		types: "./dist/types/index.d.ts"
-	},
-	"./components": {
-		"import": "./dist/components/index.js",
-		types: "./dist/components/index.d.ts"
-	},
-	"./loader": {
-		"import": "./dist/loader/index.js",
-		require: "./dist/loader/index.cjs",
-		types: "./dist/loader/index.d.ts"
-	},
-	"./dist/components/*": {
-		"import": "./dist/components/*",
-		types: "./dist/components/*"
-	}
-};
-const repository = {
-	type: "git",
-	url: "https://bitbucket.org/madebychalk/searchcraft-javascript-sdks/"
-};
-const files = [
-	"dist/"
-];
-const scripts = {
-	build: "stencil build && yarn docs",
-	docs: "typedoc --options typedoc.json",
-	dev: "stencil build --dev --watch",
-	test: "stencil test --spec --e2e",
-	"test.watch": "stencil test --spec --e2e --watchAll",
-	generate: "stencil generate"
-};
-const dependencies = {
-	"@stencil/vue-output-target": "^0.9.2",
-	classnames: "^2.3.2"
-};
-const devDependencies = {
-	"@searchcraft/core": "^0.8.2",
-	"@searchcraft/javascript-sdk": "*",
-	"@stencil/core": "^4.7.0",
-	"@stencil/react-output-target": "^0.8.2",
-	"@stencil/sass": "^3.0.12",
-	"@types/node": "^16.18.11",
-	zustand: "^5.0.1"
-};
-const packageJson = {
-	name: name,
-	"private": false,
-	version: version,
-	description: description,
-	author: author,
-	license: license,
-	main: main,
-	module: module,
-	types: types,
-	collection: collection,
-	"collection:main": "dist/collection/index.js",
-	unpkg: unpkg,
-	exports: exports,
-	repository: repository,
-	files: files,
-	scripts: scripts,
-	dependencies: dependencies,
-	devDependencies: devDependencies
-};
-
 const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.inputCleared = createEvent(this, "inputCleared", 7);
-        this.noResultsReceived = createEvent(this, "noResultsReceived", 7);
         this.inputFocus = createEvent(this, "inputFocus", 7);
         this.inputBlur = createEvent(this, "inputBlur", 7);
         this.inputInit = createEvent(this, "inputInit", 7);
-        this.querySubmit = createEvent(this, "querySubmit", 7);
     }
-    /**
-     * The Searchcraft config object.
-     */
-    config;
     /**
      * Whether or not to automatically submit the search term when the input changes.
      */
@@ -128,14 +42,6 @@ const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput
      * The starting value of the input element.
      */
     searchTerm = '';
-    /**
-     * When the input is cleared.
-     */
-    inputCleared;
-    /**
-     * When no results are returned.
-     */
-    noResultsReceived;
     /**
      * When the input becomes focused.
      */
@@ -148,29 +54,20 @@ const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput
      * Event emitted when input initializes.
      */
     inputInit;
-    /**
-     * Event emitted when a query has been submitted.
-     */
-    querySubmit;
     inputValue = this.searchTerm;
     error = false;
-    isSearchcraftInitialized = false;
-    searchStore = useSearchcraftStore.getState();
+    core;
+    searchStore = searchcraftStore.getState();
     init() {
-        if (this.config && !this.isSearchcraftInitialized) {
-            const searchcraft = new ge(this.config, {
-                sdkName: packageJson.name,
-                sdkVersion: packageJson.version,
-            });
-            this.searchStore.initialize(searchcraft, true);
-            this.isSearchcraftInitialized = true;
+        if (this.core) {
+            this.searchStore.initialize(this.core);
             this.inputInit?.emit();
         }
     }
-    componentDidLoad() {
+    connectedCallback() {
         this.init();
     }
-    onConfigChange() {
+    onCoreChange() {
         this.init();
     }
     handleOnInput = (event) => {
@@ -179,25 +76,21 @@ const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput
         if (!this.autoSearch) {
             return;
         }
-        if (input.value.trim() === '') {
-            this.inputCleared?.emit();
-        }
         this.performSearch(input.value);
     };
     performSearch = async (value) => {
-        if (value === useSearchcraftStore.getState().searchTerm) {
+        if (value === searchcraftStore.getState().searchTerm) {
             return;
         }
         this.searchTerm = value.trim();
         this.error = false;
         this.searchStore.setSearchTerm(this.searchTerm);
-        this.querySubmit?.emit(this.searchTerm);
         try {
             await this.searchStore.search();
         }
         catch (error) {
+            console.log(error);
             this.error = true;
-            this.inputCleared?.emit();
         }
     };
     handleClearInput = () => {
@@ -206,7 +99,6 @@ const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput
         this.searchStore.setSearchTerm('');
         this.searchStore.setSearchClientResponseItems([]);
         this.error = false;
-        this.inputCleared?.emit();
     };
     handleFormSubmit = async (event) => {
         event.preventDefault();
@@ -224,15 +116,14 @@ const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput
         const inputGridStyles = {
             gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',
         };
-        return (h("form", { key: 'bc665c50db8de601a3c95266bdf063ebb988d6a8', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, h("div", { key: 'a6936858c08d866b66b887c7ae03b35961cf04a1', class: inputGridClassNames, style: inputGridStyles }, h("div", { key: '915ac892fccb771f1c5338cd2d52f16f1793615d', class: 'searchcraft-input-button-wrapper' }, h("searchcraft-button", { key: '81447da28dcb9cb80a8cdf0c6765c909c2746585', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), this.inputLabel && (h("div", { key: '939c3407d16075be25ff23bf9b379c05ba1a66d4', class: 'searchcraft-input-label-wrapper' }, h("searchcraft-input-label", { key: '9d9c4043c04132b27710cca47abf102a188a80b9', label: this.inputLabel }))), this.error && (h("div", { key: '7e309f8a5c81a41bdd593f4e4ee1ba30c531c97d', class: 'searchcraft-input-error-wrapper' }, h("searchcraft-error-message", { key: 'de947c04f0948e36786f50ac65720eeb598ae7bf', errorMessage: 'Something went wrong.' }))), h("div", { key: 'bcf774e3fa5164ab838b634badf2002495437fe7', class: 'searchcraft-input-wrapper' }, h("input", { key: 'fd9759559712a39d3493e069ddddf7c267879c84', autoComplete: 'off', class: 'searchcraft-input', onFocus: () => this.inputFocus?.emit(), onBlur: () => this.inputBlur?.emit(), onInput: (event) => {
+        return (h("form", { key: '52760b113a209c51638bcb005e0b6c3d5bf9741d', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, h("div", { key: '6b20020b8a67c9d860fca7da67150a8d75bd3313', class: inputGridClassNames, style: inputGridStyles }, h("div", { key: '67bba2889e6fde70c4f349dfbd61d9a632c08301', class: 'searchcraft-input-button-wrapper' }, h("searchcraft-button", { key: 'a839e1a67d238bfbe6d47857f6339e49d14f9560', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), this.inputLabel && (h("div", { key: 'a2a69b7dbdf1142459d6ffad90dc26a38a76276d', class: 'searchcraft-input-label-wrapper' }, h("searchcraft-input-label", { key: '621a4903821ba8c1854e3ff89d30a24dba3ed0fb', label: this.inputLabel }))), this.error && (h("div", { key: 'b4cd633a139488cac185c38123b138fc5d51cd20', class: 'searchcraft-input-error-wrapper' }, h("searchcraft-error-message", { key: 'ccadaf96ac8317b6415a83e6523816328e83eb3e', errorMessage: 'Something went wrong.' }))), h("div", { key: '0f13777c2e5f806ce12fff9680d7862a27b2e260', class: 'searchcraft-input-wrapper' }, h("input", { key: 'a9b58a486dfaadaedf3eeb9aec5e4c3c3548536b', autoComplete: 'off', class: 'searchcraft-input', onFocus: () => this.inputFocus?.emit(), onBlur: () => this.inputBlur?.emit(), onInput: (event) => {
                 this.handleOnInput(event);
-            }, placeholder: this.placeholderValue, style: validatedCustomStyles, type: 'text', value: this.inputValue }), h("div", { key: '8564b18962feeea8d9ab8bb46af4ba28a089d8f4', class: 'searchcraft-input-search-icon-wrapper' }, h("svg", { key: '90c3636ea306ed70887d76deaf058ab3ace61134', class: 'searchcraft-input-search-icon', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, h("title", { key: 'c9921263b87df28e06bab9990e324aa1bebac767', id: 'searchcraft-title' }, "Searchcraft Search Icon Light"), h("path", { key: 'bb82073fd722ff4a74e1a86c74cdf0dd9a8080b4', d: 'M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), isShowingClearButton && (h("button", { key: 'e708cb9426171bfdfb29e0a98206d086fa14e15e', type: 'button', class: 'searchcraft-input-clear-button', onClick: this.handleClearInput }, h("svg", { key: '243b6eacc68fa8cc57d5e11b9b317d7fe581406f', class: 'searchcraft-input-clear-icon', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { key: 'd8a8b44fe04345b5b27ba33ec4ba510500eab3bf', id: 'icon-title' }, "Searchcraft Clear Input Icon Light"), h("path", { key: '0602cbff7aac6755dabb496b84e6ef3e4e2ac7a6', d: 'M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))))))));
+            }, placeholder: this.placeholderValue, style: validatedCustomStyles, type: 'text', value: this.inputValue }), h("div", { key: 'a57e4f72ee1383e42158bbc9e35d47d2c468acf5', class: 'searchcraft-input-search-icon-wrapper' }, h("svg", { key: 'c7bda92af1488981d5de08af0f9ae3064c76c354', class: 'searchcraft-input-search-icon', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, h("title", { key: 'f4dc47ae6c88517eeaea574fe819423b3d6e6cb5', id: 'searchcraft-title' }, "Searchcraft Search Icon Light"), h("path", { key: 'c77497591b4f31de0f3e008baa79c006fd0a2eb9', d: 'M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), isShowingClearButton && (h("button", { key: 'e125b759eaa21dfdd4058bf36f3c10233f067835', type: 'button', class: 'searchcraft-input-clear-button', onClick: this.handleClearInput }, h("svg", { key: 'b2767658bb9edbc51efd6430e051127b08c9ab83', class: 'searchcraft-input-clear-icon', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { key: '990ff3c8f207d09192e954b0f5d059e0683db2d4', id: 'icon-title' }, "Searchcraft Clear Input Icon Light"), h("path", { key: '5322d9abb4d60a75869ca943a17157a32c502035', d: 'M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))))))));
     }
     static get watchers() { return {
-        "config": ["onConfigChange"]
+        "core": ["onCoreChange"]
     }; }
 }, [0, "searchcraft-input-form", {
-        "config": [16],
         "autoSearch": [4, "auto-search"],
         "buttonPlacement": [1, "button-placement"],
         "buttonLabel": [1, "button-label"],
@@ -240,11 +131,11 @@ const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput
         "customStyles": [1, "custom-styles"],
         "placeholderValue": [1, "placeholder-value"],
         "searchTerm": [1, "search-term"],
+        "core": [16],
         "inputValue": [32],
-        "error": [32],
-        "isSearchcraftInitialized": [32]
+        "error": [32]
     }, undefined, {
-        "config": ["onConfigChange"]
+        "core": ["onCoreChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
@@ -277,4 +168,4 @@ function defineCustomElement() {
 
 export { SearchcraftInput as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-6e2eef88.js.map
+//# sourceMappingURL=p-5bd5c3cb.js.map

package/dist/components/p-5bd5c3cb.js.map

@@ -0,0 +1 @@
+{"file":"p-5bd5c3cb.js","mappings":"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","names":[],"sources":["src/components/searchcraft-input-form/searchcraft-input-form.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Event,\n  type EventEmitter,\n  Watch,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport type { SearchcraftCore } from '@searchcraft/core';\n\nimport { parseCustomStyles } from '@utils';\nimport { searchcraftStore } from '@store';\n\n/**\n * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.\n * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-input-form placeholder-value=\"Search here\" />\n * ```\n *\n * ```js\n * // index.js\n * const searchInputForm = document.querySelector('searchcraft-input-form');\n *\n * ```\n */\n@Component({\n  tag: 'searchcraft-input-form',\n  shadow: false,\n})\nexport class SearchcraftInput {\n  /**\n   * Whether or not to automatically submit the search term when the input changes.\n   */\n  @Prop() autoSearch = true;\n  /**\n   * Where to place the search button.\n   */\n  @Prop() buttonPlacement: 'left' | 'right' | 'none' = 'none';\n  /**\n   * The label for the submit button.\n   */\n  @Prop() buttonLabel?: string;\n  /**\n   * The label rendered above the input.\n   */\n  @Prop() inputLabel?: string;\n  /**\n   * A custom styles object to be applied to the input element.\n   */\n  @Prop() customStyles: string | Record<string, string> = {};\n  /**\n   * The input element's placeholder value.\n   */\n  @Prop() placeholderValue = 'Enter Search';\n  /**\n   * The starting value of the input element.\n   */\n  @Prop() searchTerm = '';\n  /**\n   * When the input becomes focused.\n   */\n  @Event() inputFocus?: EventEmitter<void>;\n  /**\n   * When the input becomes unfocused.\n   */\n  @Event() inputBlur?: EventEmitter<void>;\n  /**\n   * Event emitted when input initializes.\n   */\n  @Event() inputInit?: EventEmitter<void>;\n\n  @State() inputValue = this.searchTerm;\n  @State() error = false;\n\n  @Prop() core?: SearchcraftCore;\n\n  private searchStore = searchcraftStore.getState();\n\n  init() {\n    if (this.core) {\n      this.searchStore.initialize(this.core);\n      this.inputInit?.emit();\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n  }\n\n  @Watch('core')\n  onCoreChange() {\n    this.init();\n  }\n\n  handleOnInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.inputValue = input.value;\n\n    if (!this.autoSearch) {\n      return;\n    }\n\n    this.performSearch(input.value);\n  };\n\n  private performSearch = async (value: string) => {\n    if (value === searchcraftStore.getState().searchTerm) {\n      return;\n    }\n\n    this.searchTerm = value.trim();\n    this.error = false;\n    this.searchStore.setSearchTerm(this.searchTerm);\n\n    try {\n      await this.searchStore.search();\n    } catch (error) {\n      console.log(error);\n      this.error = true;\n    }\n  };\n\n  handleClearInput = () => {\n    this.inputValue = '';\n    this.searchTerm = '';\n    this.searchStore.setSearchTerm('');\n    this.searchStore.setSearchClientResponseItems([]);\n    this.error = false;\n  };\n\n  handleFormSubmit = async (event: Event) => {\n    event.preventDefault();\n    await this.performSearch(this.searchTerm);\n  };\n\n  render() {\n    const validatedCustomStyles = parseCustomStyles(this.customStyles);\n\n    const isShowingClearButton = this.inputValue.length > 0;\n\n    const inputGridClassNames = classNames('searchcraft-input-grid', {\n      'searchcraft-input-grid-buttonLeft': this.buttonPlacement === 'left',\n      'searchcraft-input-grid-buttonRight': this.buttonPlacement === 'right',\n      'searchcraft-input-grid-buttonNone': this.buttonPlacement === 'none',\n    });\n\n    const shouldHaveVerticalGap = this.inputLabel || this.error;\n    const inputGridStyles = {\n      gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',\n    };\n\n    return (\n      <form class='searchcraft-input-form' onSubmit={this.handleFormSubmit}>\n        <div class={inputGridClassNames} style={inputGridStyles}>\n          <div class='searchcraft-input-button-wrapper'>\n            <searchcraft-button\n              onButtonClick={this.handleFormSubmit}\n              label={this.buttonLabel}\n            />\n          </div>\n          {this.inputLabel && (\n            <div class='searchcraft-input-label-wrapper'>\n              <searchcraft-input-label label={this.inputLabel} />\n            </div>\n          )}\n          {this.error && (\n            <div class='searchcraft-input-error-wrapper'>\n              <searchcraft-error-message errorMessage='Something went wrong.' />\n            </div>\n          )}\n          <div class='searchcraft-input-wrapper'>\n            <input\n              autoComplete='off'\n              class='searchcraft-input'\n              onFocus={() => this.inputFocus?.emit()}\n              onBlur={() => this.inputBlur?.emit()}\n              onInput={(event) => {\n                this.handleOnInput(event);\n              }}\n              placeholder={this.placeholderValue}\n              style={validatedCustomStyles}\n              type='text'\n              value={this.inputValue}\n            />\n            <div class='searchcraft-input-search-icon-wrapper'>\n              <svg\n                class='searchcraft-input-search-icon'\n                viewBox='0 0 20 20'\n                fill='none'\n                xmlns='http://www.w3.org/2000/svg'\n                aria-labelledby='searchcraft-title'\n              >\n                <title id='searchcraft-title'>\n                  Searchcraft Search Icon Light\n                </title>\n                <path\n                  d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n                  stroke='currentColor'\n                  stroke-width='1.5'\n                  stroke-linecap='round'\n                  stroke-linejoin='round'\n                />\n              </svg>\n            </div>\n            {isShowingClearButton && (\n              <button\n                type='button'\n                class='searchcraft-input-clear-button'\n                onClick={this.handleClearInput}\n              >\n                <svg\n                  class='searchcraft-input-clear-icon'\n                  viewBox='0 0 22 22'\n                  fill='none'\n                  xmlns='http://www.w3.org/2000/svg'\n                  aria-labelledby='icon-title'\n                >\n                  <title id='icon-title'>\n                    Searchcraft Clear Input Icon Light\n                  </title>\n                  <path\n                    d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n                    stroke='currentColor'\n                    stroke-width='1.5'\n                    stroke-linecap='round'\n                    stroke-linejoin='round'\n                  />\n                </svg>\n              </button>\n            )}\n          </div>\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}