@searchcraft/javascript-sdk 0.5.2 → 0.6.0

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

@@ -1,41 +1,60 @@
 import { h, } from "@stencil/core";
 import { SearchcraftCore } from "@searchcraft/core";
 import packageJson from "../../../package.json";
-import { parseCustomStyles } from "../../utils/utils";
+import { parseCustomStyles } from "../../utils/index";
 import { useSearchcraftStore } from "../../provider/store";
 import classNames from "classnames";
+/**
+ * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
+ * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
+ *
+ * ## Usage
+ * ```html
+ * <!-- index.html -->
+ * <searchcraft-input-form placeholder-value="Search here" />
+ * ```
+ *
+ * ```js
+ * // index.js
+ * const searchInputForm = document.querySelector('searchcraft-input-form');
+ *
+ * seardchInputForm.config = {
+ *   index: [],
+ *   readKey: '',
+ *   endpointUrl: '',
+ * };
+ *
+ * searchForm.addEventListener('querySubmit', (event) => {
+ *   console.log('Query submitted', event.detail);
+ * });
+ * ```
+ */
 export class SearchcraftInput {
     constructor() {
-        this.debounceTimeout = null;
         this.searchStore = useSearchcraftStore.getState();
         this.handleOnInput = (event) => {
             const input = event.target;
             this.inputValue = input.value;
             if (input.value.trim() === '') {
                 this.inputCleared.emit();
+                this.searchTerm = '';
+                this.searchStore.setQuery('');
+                this.searchStore.setSearchResults(null);
                 return;
             }
             if (!this.autoSearch) {
                 return;
             }
-            if (this.debounceDelay > 0) {
-                if (this.debounceTimeout) {
-                    clearTimeout(this.debounceTimeout);
-                }
-                this.debounceTimeout = setTimeout(() => this.performSearch(input.value), this.debounceDelay);
-            }
-            else {
-                this.performSearch(input.value);
-            }
+            this.performSearch(input.value);
         };
         this.performSearch = async (value) => {
             if (value === useSearchcraftStore.getState().query) {
                 return;
             }
-            this.querySubmit.emit(value);
             this.searchTerm = value.trim();
             this.error = false;
             this.searchStore.setQuery(this.searchTerm);
+            this.querySubmit.emit(this.searchTerm);
             try {
                 await this.searchStore.search();
             }
@@ -46,9 +65,6 @@ export class SearchcraftInput {
         };
         this.handleClearInput = () => {
             this.inputValue = '';
-            if (this.debounceTimeout) {
-                clearTimeout(this.debounceTimeout);
-            }
             this.searchTerm = '';
             this.searchStore.setQuery('');
             this.searchStore.setSearchResults(null);
@@ -69,7 +85,6 @@ export class SearchcraftInput {
         this.customStyles = {};
         this.placeholderValue = 'Enter Search';
         this.searchTerm = '';
-        this.debounceDelay = 0;
         this.inputValue = this.searchTerm;
         this.error = false;
         this.isSearchcraftInitialized = false;
@@ -82,6 +97,7 @@ export class SearchcraftInput {
             });
             this.searchStore.initialize(searchcraft, true);
             this.isSearchcraftInitialized = true;
+            this.inputInit.emit();
         }
     }
     componentDidLoad() {
@@ -98,9 +114,13 @@ export class SearchcraftInput {
             'searchcraft-input-grid-buttonRight': this.buttonPlacement === 'right',
             'searchcraft-input-grid-buttonNone': this.buttonPlacement === 'none',
         });
-        return (h("form", { key: '7f224a10ab80d70660c9db97be5d68830932570b', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, h("div", { key: '6822a21a43e5be992b11ddb6c86370ddd68e1475', class: inputGridClassNames }, h("div", { key: '6022989ca876ea46de048398a076bc43d5213554', class: 'searchcraft-input-button-wrapper' }, h("searchcraft-button", { key: 'd48b61729ef9a3f19049dfe751aefa22fdc85e9f', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), h("div", { key: '3465e467cbb965ad813b6c9c726173bb3fe828f2', class: 'searchcraft-input-label-wrapper' }, h("searchcraft-input-label", { key: '1026b7834358c6673a72ef8352830c9b4681020f', label: this.inputLabel })), this.error && (h("div", { key: 'ff0d55cd88e1895f9b0bd4c0afc917127e76afa2', class: 'searchcraft-input-error-wrapper' }, h("searchcraft-error-message", { key: '57fc160411f21f45617e1a3b8677fb4c6e96c0f0', errorMessage: 'Please enter a search query.' }))), h("div", { key: 'b2783bf86177d22d4abedb4420fdb2a1807527ef', class: 'searchcraft-input-wrapper' }, h("input", { key: 'e985da32be58ab3e200866e085b2acd25b54aa31', autoComplete: 'off', class: 'searchcraft-input', onFocus: () => this.inputFocus.emit(), onBlur: () => this.inputBlur.emit(), onInput: (event) => {
+        const shouldHaveVerticalGap = this.inputLabel || this.error;
+        const inputGridStyles = {
+            gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',
+        };
+        return (h("form", { key: 'd257962d56a583e66bdf8b55786d5dfbae231965', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, h("div", { key: 'd9a8467a4d76433bc473941bd4583d991ae38040', class: inputGridClassNames, style: inputGridStyles }, h("div", { key: 'a94eacc99593ed6a30006532c51cdd38c692c93f', class: 'searchcraft-input-button-wrapper' }, h("searchcraft-button", { key: '43de9d2cd538bbdf2a2bbc9f5165bfb969943831', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), this.inputLabel && (h("div", { key: 'b3554f81577d4526023d8b67de6837386789e9f3', class: 'searchcraft-input-label-wrapper' }, h("searchcraft-input-label", { key: '5cda67f38d0914dfe7e1ea71bee60b69524e9d5c', label: this.inputLabel }))), this.error && (h("div", { key: '22b82da9420159ebaf00fe3bb790d6b07341a79e', class: 'searchcraft-input-error-wrapper' }, h("searchcraft-error-message", { key: '2cc5c322408b976a7043ef9640c812036468435d', errorMessage: 'Something went wrong.' }))), h("div", { key: 'f2741bd0d20604327fa4661c3213e48df7a58249', class: 'searchcraft-input-wrapper' }, h("input", { key: '692822c6a38001ba4c71289b6b7fba13767742b5', 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: 'd5277758ae26262f5f3b49e8763add412661e5cf', class: 'searchcraft-input-search-icon-wrapper' }, h("svg", { key: '79792740ea1207fad40786f555c63c4a26ff3fe2', 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: '7a487bdf41babdafb802ebd79c34a6a5da300cd6', id: 'searchcraft-title' }, "Searchcraft Search Icon Light"), h("path", { key: '27c442bf412aca373cbc982b3a35a00fe7bb82ed', 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: '#404040', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), isShowingClearButton && (h("button", { key: '4c4bc21e9e87f4245ac38d7af269aae35876b6b0', type: 'button', class: 'searchcraft-input-clear-button', onClick: this.handleClearInput }, h("svg", { key: '4b82e65987a8a8c296d2b9c279474c29607727e0', 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: '9d64212798691a2f8c6c9c4f74ceca1d2fe39fd1', id: 'icon-title' }, "Searchcraft Clear Input Icon Light"), h("path", { key: '4c6c5b33fbd9ac02661996bb56e0902094e9b140', 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: 'black', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))))))));
+            }, placeholder: this.placeholderValue, style: validatedCustomStyles, type: 'text', value: this.inputValue }), h("div", { key: '58af613c048e7c072e4a976f71ea1bd7b3632a62', class: 'searchcraft-input-search-icon-wrapper' }, h("svg", { key: 'e6cf67405b45703ca7ddaf46a59adbf5ff926f0e', 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: 'fa510c85900d9a716076ba79866f5bbe4f1a20ed', id: 'searchcraft-title' }, "Searchcraft Search Icon Light"), h("path", { key: 'ac9d166c19e6644adcbc00fe665e17fcf5449b73', 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: '#404040', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), isShowingClearButton && (h("button", { key: '992cf037b6b75200c64c21809915b5ce6f970f5c', type: 'button', class: 'searchcraft-input-clear-button', onClick: this.handleClearInput }, h("svg", { key: 'f09a5f2c1007cc11d89b2df06ec189d923bc634f', 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: '92bd5162ae636aaf6c8051959ff16cd26ee98660', id: 'icon-title' }, "Searchcraft Clear Input Icon Light"), h("path", { key: '9b5a8a4113a3162035d48895f0facf6f6045f266', 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: 'black', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))))))));
     }
     static get is() { return "searchcraft-input-form"; }
     static get originalStyleUrls() {
@@ -264,24 +284,6 @@ export class SearchcraftInput {
                 "attribute": "search-term",
                 "reflect": false,
                 "defaultValue": "''"
-            },
-            "debounceDelay": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The duration to debounce the input's `inputChange` event."
-                },
-                "attribute": "debounce-delay",
-                "reflect": false,
-                "defaultValue": "0"
             }
         };
     }
@@ -301,7 +303,7 @@ export class SearchcraftInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when the input element has been cleared."
+                    "text": "When the input is cleared."
                 },
                 "complexType": {
                     "original": "void",
@@ -316,7 +318,7 @@ export class SearchcraftInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when a query returns with no results received."
+                    "text": "When no results are returned."
                 },
                 "complexType": {
                     "original": "void",
@@ -324,29 +326,29 @@ export class SearchcraftInput {
                     "references": {}
                 }
             }, {
-                "method": "querySubmit",
-                "name": "querySubmit",
+                "method": "inputFocus",
+                "name": "inputFocus",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when a new search request has been submitted."
+                    "text": "When the input becomes focused."
                 },
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "void",
+                    "resolved": "void",
                     "references": {}
                 }
             }, {
-                "method": "inputFocus",
-                "name": "inputFocus",
+                "method": "inputBlur",
+                "name": "inputBlur",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when the input has gained focus."
+                    "text": "When the input becomes unfocused."
                 },
                 "complexType": {
                     "original": "void",
@@ -354,20 +356,35 @@ export class SearchcraftInput {
                     "references": {}
                 }
             }, {
-                "method": "inputBlur",
-                "name": "inputBlur",
+                "method": "inputInit",
+                "name": "inputInit",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when the input has lost focus."
+                    "text": "Event emitted when input initializes."
                 },
                 "complexType": {
                     "original": "void",
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "querySubmit",
+                "name": "querySubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a query has been submitted."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
     static get watchers() {

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

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-input-form.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-input-form/searchcraft-input-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Event,\n  type EventEmitter,\n  Watch,\n} from '@stencil/core';\n\nimport { type SearchcraftConfig, SearchcraftCore } from '@searchcraft/core';\nimport packageJson from '../../../package.json';\n\nimport { parseCustomStyles } from '@utils/utils';\nimport { useSearchcraftStore } from '@provider/store';\nimport classNames from 'classnames';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n  detail: T;\n  target: HTMLSearchcraftInputFormElement;\n}\n\n@Component({\n  tag: 'searchcraft-input-form',\n  styleUrl: 'searchcraft-input-form.module.scss',\n  shadow: false,\n})\nexport class SearchcraftInput {\n  /**\n   * The Searchcraft config object.\n   */\n  @Prop() config: SearchcraftConfig | undefined;\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 | undefined;\n  /**\n   * The label rendered above the input.\n   */\n  @Prop() inputLabel: string | undefined;\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   * The duration to debounce the input's `inputChange` event.\n   */\n  @Prop() debounceDelay = 0;\n  /**\n   * Event emitted when the input element has been cleared.\n   */\n  @Event() inputCleared: EventEmitter<void>;\n  /**\n   * Event emitted when a query returns with no results received.\n   */\n  @Event() noResultsReceived: EventEmitter<void>;\n  /**\n   * Event emitted when a new search request has been submitted.\n   */\n  @Event() querySubmit: EventEmitter<string>;\n  /**\n   * Event emitted when the input has gained focus.\n   */\n  @Event() inputFocus: EventEmitter<void>;\n  /**\n   * Event emitted when the input has lost focus.\n   */\n  @Event() inputBlur: EventEmitter<void>;\n\n  @State() inputValue = this.searchTerm;\n  @State() error = false;\n  @State() isSearchcraftInitialized = false;\n\n  private debounceTimeout: ReturnType<typeof setTimeout> | null = null;\n  private searchStore = useSearchcraftStore.getState();\n\n  init() {\n    if (this.config && !this.isSearchcraftInitialized) {\n      const searchcraft = new SearchcraftCore(this.config, {\n        sdkName: packageJson.name,\n        sdkVersion: packageJson.version,\n      });\n      this.searchStore.initialize(searchcraft, true);\n      this.isSearchcraftInitialized = true;\n    }\n  }\n\n  componentDidLoad() {\n    this.init();\n  }\n\n  @Watch('config')\n  onConfigChange() {\n    this.init();\n  }\n\n  handleOnInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.inputValue = input.value;\n\n    if (input.value.trim() === '') {\n      this.inputCleared.emit();\n      return;\n    }\n\n    if (!this.autoSearch) {\n      return;\n    }\n\n    if (this.debounceDelay > 0) {\n      if (this.debounceTimeout) {\n        clearTimeout(this.debounceTimeout);\n      }\n\n      this.debounceTimeout = setTimeout(\n        () => this.performSearch(input.value),\n        this.debounceDelay,\n      );\n    } else {\n      this.performSearch(input.value);\n    }\n  };\n\n  private performSearch = async (value: string) => {\n    if (value === useSearchcraftStore.getState().query) {\n      return;\n    }\n    this.querySubmit.emit(value);\n    this.searchTerm = value.trim();\n    this.error = false;\n    this.searchStore.setQuery(this.searchTerm);\n\n    try {\n      await this.searchStore.search();\n    } catch (error) {\n      this.error = true;\n      this.inputCleared.emit();\n    }\n  };\n\n  handleClearInput = () => {\n    this.inputValue = '';\n\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout);\n    }\n\n    this.searchTerm = '';\n    this.searchStore.setQuery('');\n    this.searchStore.setSearchResults(null);\n    this.error = false;\n\n    if (this.inputCleared) {\n      this.inputCleared.emit();\n    }\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    return (\n      <form class='searchcraft-input-form' onSubmit={this.handleFormSubmit}>\n        <div class={inputGridClassNames}>\n          <div class='searchcraft-input-button-wrapper'>\n            <searchcraft-button\n              onButtonClick={this.handleFormSubmit}\n              label={this.buttonLabel}\n            />\n          </div>\n          <div class='searchcraft-input-label-wrapper'>\n            <searchcraft-input-label label={this.inputLabel} />\n          </div>\n          {this.error && (\n            <div class='searchcraft-input-error-wrapper'>\n              <searchcraft-error-message errorMessage='Please enter a search query.' />\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='#404040'\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='black'\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,"file":"searchcraft-input-form.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-input-form/searchcraft-input-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Event,\n  type EventEmitter,\n  Watch,\n} from '@stencil/core';\n\nimport { type SearchcraftConfig, SearchcraftCore } from '@searchcraft/core';\nimport packageJson from '../../../package.json';\n\nimport { parseCustomStyles } from '@utils';\nimport { useSearchcraftStore } from '@provider/store';\nimport classNames from 'classnames';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n  detail: T;\n  target: HTMLSearchcraftInputFormElement;\n}\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 * seardchInputForm.config = {\n *   index: [],\n *   readKey: '',\n *   endpointUrl: '',\n * };\n *\n * searchForm.addEventListener('querySubmit', (event) => {\n *   console.log('Query submitted', event.detail);\n * });\n * ```\n */\n@Component({\n  tag: 'searchcraft-input-form',\n  styleUrl: 'searchcraft-input-form.module.scss',\n  shadow: false,\n})\nexport class SearchcraftInput {\n  /**\n   * The Searchcraft config object.\n   */\n  @Prop() config: SearchcraftConfig | undefined;\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 | undefined;\n  /**\n   * The label rendered above the input.\n   */\n  @Prop() inputLabel: string | undefined;\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 is cleared.\n   */\n  @Event() inputCleared: EventEmitter<void>;\n  /**\n   * When no results are returned.\n   */\n  @Event() noResultsReceived: EventEmitter<void>;\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   * Event emitted when a query has been submitted.\n   */\n  @Event() querySubmit: EventEmitter<string>;\n\n  @State() inputValue = this.searchTerm;\n  @State() error = false;\n  @State() isSearchcraftInitialized = false;\n\n  private searchStore = useSearchcraftStore.getState();\n\n  init() {\n    if (this.config && !this.isSearchcraftInitialized) {\n      const searchcraft = new SearchcraftCore(this.config, {\n        sdkName: packageJson.name,\n        sdkVersion: packageJson.version,\n      });\n      this.searchStore.initialize(searchcraft, true);\n      this.isSearchcraftInitialized = true;\n      this.inputInit.emit();\n    }\n  }\n\n  componentDidLoad() {\n    this.init();\n  }\n\n  @Watch('config')\n  onConfigChange() {\n    this.init();\n  }\n\n  handleOnInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.inputValue = input.value;\n\n    if (input.value.trim() === '') {\n      this.inputCleared.emit();\n      this.searchTerm = '';\n      this.searchStore.setQuery('');\n      this.searchStore.setSearchResults(null);\n      return;\n    }\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 === useSearchcraftStore.getState().query) {\n      return;\n    }\n\n    this.searchTerm = value.trim();\n    this.error = false;\n    this.searchStore.setQuery(this.searchTerm);\n    this.querySubmit.emit(this.searchTerm);\n\n    try {\n      await this.searchStore.search();\n    } catch (error) {\n      this.error = true;\n      this.inputCleared.emit();\n    }\n  };\n\n  handleClearInput = () => {\n    this.inputValue = '';\n    this.searchTerm = '';\n    this.searchStore.setQuery('');\n    this.searchStore.setSearchResults(null);\n    this.error = false;\n\n    if (this.inputCleared) {\n      this.inputCleared.emit();\n    }\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='#404040'\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='black'\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"]}

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

@@ -1,12 +1,53 @@
+/** Appearance & Layout */
 :root {
-  /** Appearance & Layout */
-  --sc-spinner-size: 20px;
+  /**
+   * Border radius of the input form element.
+   */
   --sc-input-border-radius: 8px;
+  /**
+   * Icon size of the "magnifying glass" icon rendered in the input form.
+   */
   --sc-input-search-icon-size: 20px;
+  /**
+   * Icon size of the `x` button rendered in the input form.
+   */
   --sc-input-clear-icon-size: 20px;
+  /**
+   * Padding on the left side of the input form.
+   */
   --sc-input-padding-left: 44px;
+  /**
+   * Padding on the right side of the input form.
+   */
   --sc-input-padding-right: 44px;
+  /**
+   * Border radius applied to result images.
+   */
   --sc-image-border-radius: 8px;
+  /**
+   * Border radius applied to popover form containers.
+   */
+  --sc-popover-form-border-radius: 8px;
+  /**
+   * Height of the list view/results container portion of the popover form.
+   */
+  --sc-popover-list-view-height: 400px;
+  /**
+   * Size of images of list view items in the popoer list view.
+   */
+  --sc-popover-list-item-image-size: 60px;
+  /**
+   * Horizontal padding of popover list items.
+   */
+  --sc-popover-list-item-padding-horizontal: 8px;
+  /**
+   * Vertical padding of popover list items.
+   */
+  --sc-popover-list-item-padding-vertical: 8px;
+  /**
+   * Maximum width of popover forms of type `modal`.
+   */
+  --sc-popover-modal-max-width: 570px;
 }
 
 :root {
@@ -97,9 +138,13 @@
   --sc-body-small-font-weight: 400;
 }
 
-.searchcraft-input-wrapper {
-  position: relative;
-  display: flex;
+/**
+* Variables that need to be part of the preprocessor can go here.
+*/
+:root {
+  --sc-breakpoint-sm: 576px;
+  --sc-breakpoint-md: 768px;
+  --sc-breakpoint-lg: 992px;
 }
 
 .searchcraft-input-grid {
@@ -169,6 +214,11 @@
   grid-row: 2/span 1;
 }
 
+.searchcraft-input-wrapper {
+  position: relative;
+  display: flex;
+}
+
 .searchcraft-input {
   font-family: var(--sc-font-family);
   -webkit-font-smoothing: antialiased;
@@ -176,8 +226,8 @@
   font-weight: var(--sc-body-font-weight);
   line-height: var(--sc-body-line-height);
   background-color: var(--sc-surface-neutral-secondary);
-  border: none;
   border-radius: var(--sc-input-border-radius);
+  border: none;
   color: var(--sc-content-neutral-primary);
   outline: none;
   padding-left: var(--sc-input-padding-left);

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

@@ -1,15 +1,21 @@
 import { h } from "@stencil/core";
 import classNames from "classnames";
+/**
+ * This web component serves as the input label for the searchcraft-input-form component.
+ *
+ * ## Usage
+ * ```html
+ * <!-- index.html -->
+ * <searchcraft-input-label label="Search" />
+ * ```
+ */
 export class SearchcraftInputLabel {
     constructor() {
         this.inputLabelClassName = '';
         this.label = undefined;
     }
     render() {
-        if (!this.label) {
-            return null;
-        }
-        return (h("label", { class: classNames('searchcraft-input-label', this.inputLabelClassName), htmlFor: 'searchcraft-input-id' }, this.label));
+        return (h("label", { key: '4f913c1d9027ff781725a01e71e241cb5767eadb', class: classNames('searchcraft-input-label', this.inputLabelClassName), htmlFor: 'searchcraft-input-id' }, this.label));
     }
     static get is() { return "searchcraft-input-label"; }
     static get originalStyleUrls() {
@@ -36,7 +42,7 @@ export class SearchcraftInputLabel {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The classname applied to the label element."
                 },
                 "attribute": "input-label-class-name",
                 "reflect": false,
@@ -51,7 +57,7 @@ export class SearchcraftInputLabel {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""

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

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-input-label.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-input-label/searchcraft-input-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,qBAAqB;;mCACD,EAAE;;;IAGjC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CACL,aACE,KAAK,EAAE,UAAU,CAAC,yBAAyB,EAAE,IAAI,CAAC,mBAAmB,CAAC,EACtE,OAAO,EAAC,sBAAsB,IAE7B,IAAI,CAAC,KAAK,CACL,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-input-label',\n  styleUrl: 'searchcraft-input-label.module.scss',\n  shadow: false,\n})\nexport class SearchcraftInputLabel {\n  @Prop() inputLabelClassName? = '';\n  @Prop() label?: string;\n\n  render() {\n    if (!this.label) {\n      return null;\n    }\n    return (\n      <label\n        class={classNames('searchcraft-input-label', this.inputLabelClassName)}\n        htmlFor='searchcraft-input-id'\n      >\n        {this.label}\n      </label>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-input-label.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-input-label/searchcraft-input-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC;;;;;;;;GAQG;AAMH,MAAM,OAAO,qBAAqB;;mCAID,EAAE;;;IAGjC,MAAM;QACJ,OAAO,CACL,8DACE,KAAK,EAAE,UAAU,CAAC,yBAAyB,EAAE,IAAI,CAAC,mBAAmB,CAAC,EACtE,OAAO,EAAC,sBAAsB,IAE7B,IAAI,CAAC,KAAK,CACL,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component serves as the input label for the searchcraft-input-form component.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-input-label label=\"Search\" />\n * ```\n */\n@Component({\n  tag: 'searchcraft-input-label',\n  styleUrl: 'searchcraft-input-label.module.scss',\n  shadow: false,\n})\nexport class SearchcraftInputLabel {\n  /**\n   * The classname applied to the label element.\n   */\n  @Prop() inputLabelClassName? = '';\n  @Prop() label: string;\n\n  render() {\n    return (\n      <label\n        class={classNames('searchcraft-input-label', this.inputLabelClassName)}\n        htmlFor='searchcraft-input-id'\n      >\n        {this.label}\n      </label>\n    );\n  }\n}\n"]}

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

@@ -1,12 +1,53 @@
+/** Appearance & Layout */
 :root {
-  /** Appearance & Layout */
-  --sc-spinner-size: 20px;
+  /**
+   * Border radius of the input form element.
+   */
   --sc-input-border-radius: 8px;
+  /**
+   * Icon size of the "magnifying glass" icon rendered in the input form.
+   */
   --sc-input-search-icon-size: 20px;
+  /**
+   * Icon size of the `x` button rendered in the input form.
+   */
   --sc-input-clear-icon-size: 20px;
+  /**
+   * Padding on the left side of the input form.
+   */
   --sc-input-padding-left: 44px;
+  /**
+   * Padding on the right side of the input form.
+   */
   --sc-input-padding-right: 44px;
+  /**
+   * Border radius applied to result images.
+   */
   --sc-image-border-radius: 8px;
+  /**
+   * Border radius applied to popover form containers.
+   */
+  --sc-popover-form-border-radius: 8px;
+  /**
+   * Height of the list view/results container portion of the popover form.
+   */
+  --sc-popover-list-view-height: 400px;
+  /**
+   * Size of images of list view items in the popoer list view.
+   */
+  --sc-popover-list-item-image-size: 60px;
+  /**
+   * Horizontal padding of popover list items.
+   */
+  --sc-popover-list-item-padding-horizontal: 8px;
+  /**
+   * Vertical padding of popover list items.
+   */
+  --sc-popover-list-item-padding-vertical: 8px;
+  /**
+   * Maximum width of popover forms of type `modal`.
+   */
+  --sc-popover-modal-max-width: 570px;
 }
 
 :root {
@@ -97,6 +138,15 @@
   --sc-body-small-font-weight: 400;
 }
 
+/**
+* Variables that need to be part of the preprocessor can go here.
+*/
+:root {
+  --sc-breakpoint-sm: 576px;
+  --sc-breakpoint-md: 768px;
+  --sc-breakpoint-lg: 992px;
+}
+
 .searchcraft-input-label {
   font-family: var(--sc-font-family);
   -webkit-font-smoothing: antialiased;

package/dist/collection/components/searchcraft-popover-button/searchcraft-popover-button.js

@@ -0,0 +1,25 @@
+import { useSearchcraftStore } from "../../provider/store";
+import { h } from "@stencil/core";
+/**
+ * Renders a button which, when clicked, turns on popover visibility.
+ */
+export class SearchcraftPopoverButton {
+    handleOnClick() {
+        useSearchcraftStore.getState().setPopoverVisibility(true);
+    }
+    render() {
+        return (h("button", { key: '7885ca44b5ce619d572194d60c3b7e9d9f6666be', type: 'button', onClick: this.handleOnClick.bind(this) }, h("slot", { key: '0a8dc506eadbc725e3ed4c7c6987e02dfcecc229' })));
+    }
+    static get is() { return "searchcraft-popover-button"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-popover-button.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-popover-button.module.css"]
+        };
+    }
+}
+//# sourceMappingURL=searchcraft-popover-button.js.map

package/dist/collection/components/searchcraft-popover-button/searchcraft-popover-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchcraft-popover-button.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-popover-button/searchcraft-popover-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;GAEG;AAMH,MAAM,OAAO,wBAAwB;IACnC,aAAa;QACX,mBAAmB,CAAC,QAAQ,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAC5D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;YAC1D,8DAAQ,CACD,CACV,CAAC;IACJ,CAAC;;;;;;;;CACF","sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport { Component, h } from '@stencil/core';\n\n/**\n * Renders a button which, when clicked, turns on popover visibility.\n */\n@Component({\n  tag: 'searchcraft-popover-button',\n  styleUrl: 'searchcraft-popover-button.module.scss',\n  shadow: false,\n})\nexport class SearchcraftPopoverButton {\n  handleOnClick() {\n    useSearchcraftStore.getState().setPopoverVisibility(true);\n  }\n\n  render() {\n    return (\n      <button type='button' onClick={this.handleOnClick.bind(this)}>\n        <slot />\n      </button>\n    );\n  }\n}\n"]}