@searchcraft/javascript-sdk 0.5.3 → 0.7.0

package/dist/collection/components/searchcraft-filter-panel/searchcraft-filter-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-filter-panel.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-filter-panel/searchcraft-filter-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport type {\n  FilterItem,\n  DateRangeFilterItem,\n  NumericFilterItem,\n  ExactMatchToggleFilterItem,\n  FacetsFilterItem,\n} from '../../types/searchcraft-filter-panel.types';\nimport { useSearchcraftStore } from '@provider/store';\nimport { getMillis } from '@utils/utils';\n\n@Component({\n  tag: 'searchcraft-filter-panel',\n  styleUrl: 'searchcraft-filter-panel.module.scss',\n  shadow: false,\n})\nexport class SearchcraftFilterPanel {\n  @Prop() items: FilterItem[] = [];\n\n  @State() unsubscribe: (() => void) | undefined;\n  @State() lastQuery: string | undefined;\n\n  private searchStore = useSearchcraftStore.getState();\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (this.lastQuery !== state.query) {\n        // A place to put actions to do when the query changes\n      }\n      this.lastQuery = state.query || '';\n    });\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n  }\n\n  handleDateRangeChanged(fieldName: string, min: number, max: number) {\n    const start = new Date(min);\n    const end = new Date(max);\n    this.searchStore.addRangeValueForIndexField({\n      fieldName,\n      value: `${fieldName}:[${start.toISOString()} TO ${end.toISOString()}]`,\n    });\n\n    this.searchStore.search();\n  }\n\n  handleNumericRangeChanged(fieldName: string, min: number, max: number) {\n    this.searchStore.addRangeValueForIndexField({\n      fieldName,\n      value: `${fieldName}:[${min} TO ${max}]`,\n    });\n    this.searchStore.search();\n  }\n\n  handleFacetSelectionUpdated(fieldName: string, paths: string[]) {\n    if (paths.length > 0) {\n      this.searchStore.addFacetPathsForIndexField({\n        fieldName,\n        value: `${fieldName}: IN [${paths.join(' ')}]`,\n      });\n    } else {\n      this.searchStore.removeFacetPathsForIndexField(fieldName);\n    }\n    this.searchStore.search();\n  }\n\n  handleExactMatchToggleUpdated(isActive: boolean) {\n    this.searchStore.setSearchMode(isActive ? 'normal' : 'fuzzy');\n    this.searchStore.search();\n  }\n\n  handleMostRecentToggleUpdated(isActive: boolean) {\n    this.searchStore.setSortType(isActive ? 'desc' : 'asc');\n    this.searchStore.search();\n  }\n\n  /**\n   * Iterate through `items` and render them based on `type`\n   */\n  render() {\n    return (\n      <div class='searchcraft-filter-panel'>\n        {this.items.map((filterItem) => {\n          switch (filterItem.type) {\n            case 'dateRange': {\n              const item = filterItem as DateRangeFilterItem;\n              const min = new Date(item.options.minDate).getTime();\n              const max = new Date(item.options.maxDate).getTime();\n              const granularityValue = getMillis(item.options.granularity);\n              // return date range slider\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-slider\n                    min={min}\n                    max={max}\n                    granularity={granularityValue}\n                    dataType='date'\n                    onRangeChanged={(event) => {\n                      this.handleDateRangeChanged(\n                        item.fieldName,\n                        event.detail.startValue,\n                        event.detail.endValue,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'numericRange': {\n              const item = filterItem as NumericFilterItem;\n              // return date range slider\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-slider\n                    min={item.options.min}\n                    max={item.options.max}\n                    granularity={item.options.granularity}\n                    onRangeChanged={(event) => {\n                      this.handleNumericRangeChanged(\n                        item.fieldName,\n                        event.detail.startValue,\n                        event.detail.endValue,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'facets': {\n              const item = filterItem as FacetsFilterItem;\n              // return \"filters-list\"\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-facet-list\n                    fieldName={item.fieldName}\n                    onFacetSelectionUpdated={(event) => {\n                      this.handleFacetSelectionUpdated(\n                        item.fieldName,\n                        event.detail.paths,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'exactMatchToggle': {\n              const item = filterItem as ExactMatchToggleFilterItem;\n              return (\n                <searchcraft-toggle-button\n                  label={item.label}\n                  subLabel={item.options.subLabel}\n                  onToggleUpdated={(event) => {\n                    this.handleExactMatchToggleUpdated(event.detail);\n                  }}\n                />\n              );\n            }\n            case 'mostRecentToggle': {\n              const item = filterItem as ExactMatchToggleFilterItem;\n              return (\n                <searchcraft-toggle-button\n                  label={item.label}\n                  subLabel={item.options.subLabel}\n                  onToggleUpdated={(event) => {\n                    this.handleMostRecentToggleUpdated(event.detail);\n                  }}\n                />\n              );\n            }\n          }\n        })}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-filter-panel.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-filter-panel/searchcraft-filter-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport type {\n  FilterItem,\n  DateRangeFilterItem,\n  NumericFilterItem,\n  ExactMatchToggleFilterItem,\n  FacetsFilterItem,\n} from '../../types/searchcraft-filter-panel.types';\nimport { useSearchcraftStore } from '@provider/store';\nimport { getMillis } from '@utils';\n\n/**\n * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-filter-panel />\n * ```\n */\n@Component({\n  tag: 'searchcraft-filter-panel',\n  styleUrl: 'searchcraft-filter-panel.module.scss',\n  shadow: false,\n})\nexport class SearchcraftFilterPanel {\n  /**\n   * The items to filter.\n   */\n  @Prop() items: FilterItem[] = [];\n\n  @State() unsubscribe: (() => void) | undefined;\n  @State() lastQuery: string | undefined;\n\n  private searchStore = useSearchcraftStore.getState();\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (this.lastQuery !== state.query) {\n        // A place to put actions to do when the query changes\n      }\n      this.lastQuery = state.query || '';\n    });\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n  }\n\n  handleDateRangeChanged(fieldName: string, min: number, max: number) {\n    const start = new Date(min);\n    const end = new Date(max);\n    this.searchStore.addRangeValueForIndexField({\n      fieldName,\n      value: `${fieldName}:[${start.toISOString()} TO ${end.toISOString()}]`,\n    });\n\n    this.searchStore.search();\n  }\n\n  handleNumericRangeChanged(fieldName: string, min: number, max: number) {\n    this.searchStore.addRangeValueForIndexField({\n      fieldName,\n      value: `${fieldName}:[${min} TO ${max}]`,\n    });\n    this.searchStore.search();\n  }\n\n  handleFacetSelectionUpdated(fieldName: string, paths: string[]) {\n    if (paths.length > 0) {\n      this.searchStore.addFacetPathsForIndexField({\n        fieldName,\n        value: `${fieldName}: IN [${paths.join(' ')}]`,\n      });\n    } else {\n      this.searchStore.removeFacetPathsForIndexField(fieldName);\n    }\n    this.searchStore.search();\n  }\n\n  handleExactMatchToggleUpdated(isActive: boolean) {\n    this.searchStore.setSearchMode(isActive ? 'exact' : 'fuzzy');\n    this.searchStore.search();\n  }\n\n  handleMostRecentToggleUpdated(isActive: boolean) {\n    this.searchStore.setSortType(isActive ? 'desc' : 'asc');\n    this.searchStore.search();\n  }\n\n  /**\n   * Iterate through `items` and render them based on `type`\n   */\n  render() {\n    return (\n      <div class='searchcraft-filter-panel'>\n        {this.items.map((filterItem) => {\n          switch (filterItem.type) {\n            case 'dateRange': {\n              const item = filterItem as DateRangeFilterItem;\n              const min = new Date(item.options.minDate).getTime();\n              const max = new Date(item.options.maxDate).getTime();\n              const granularityValue = getMillis(item.options.granularity);\n              // return date range slider\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-slider\n                    min={min}\n                    max={max}\n                    granularity={granularityValue}\n                    dataType='date'\n                    onRangeChanged={(event) => {\n                      this.handleDateRangeChanged(\n                        item.fieldName,\n                        event.detail.startValue,\n                        event.detail.endValue,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'numericRange': {\n              const item = filterItem as NumericFilterItem;\n              // return date range slider\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-slider\n                    min={item.options.min}\n                    max={item.options.max}\n                    granularity={item.options.granularity}\n                    onRangeChanged={(event) => {\n                      this.handleNumericRangeChanged(\n                        item.fieldName,\n                        event.detail.startValue,\n                        event.detail.endValue,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'facets': {\n              const item = filterItem as FacetsFilterItem;\n              // return \"filters-list\"\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-facet-list\n                    fieldName={item.fieldName}\n                    onFacetSelectionUpdated={(event) => {\n                      this.handleFacetSelectionUpdated(\n                        item.fieldName,\n                        event.detail.paths,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'exactMatchToggle': {\n              const item = filterItem as ExactMatchToggleFilterItem;\n              return (\n                <searchcraft-toggle-button\n                  label={item.label}\n                  subLabel={item.options.subLabel}\n                  onToggleUpdated={(event) => {\n                    this.handleExactMatchToggleUpdated(event.detail);\n                  }}\n                />\n              );\n            }\n            case 'mostRecentToggle': {\n              const item = filterItem as ExactMatchToggleFilterItem;\n              return (\n                <searchcraft-toggle-button\n                  label={item.label}\n                  subLabel={item.options.subLabel}\n                  onToggleUpdated={(event) => {\n                    this.handleMostRecentToggleUpdated(event.detail);\n                  }}\n                />\n              );\n            }\n          }\n        })}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-filter-panel/searchcraft-filter-panel.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-filter-panel {
   display: flex;
   flex-direction: column;

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

@@ -1,41 +1,83 @@
 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;
+        /**
+         * Whether or not to automatically submit the search term when the input changes.
+         */
+        this.autoSearch = true;
+        /**
+         * Where to place the search button.
+         */
+        this.buttonPlacement = 'none';
+        /**
+         * A custom styles object to be applied to the input element.
+         */
+        this.customStyles = {};
+        /**
+         * The input element's placeholder value.
+         */
+        this.placeholderValue = 'Enter Search';
+        /**
+         * The starting value of the input element.
+         */
+        this.searchTerm = '';
+        this.inputValue = this.searchTerm;
+        this.error = false;
+        this.isSearchcraftInitialized = false;
         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 +88,6 @@ export class SearchcraftInput {
         };
         this.handleClearInput = () => {
             this.inputValue = '';
-            if (this.debounceTimeout) {
-                clearTimeout(this.debounceTimeout);
-            }
             this.searchTerm = '';
             this.searchStore.setQuery('');
             this.searchStore.setSearchResults(null);
@@ -61,18 +100,6 @@ export class SearchcraftInput {
             event.preventDefault();
             await this.performSearch(this.searchTerm);
         };
-        this.config = undefined;
-        this.autoSearch = true;
-        this.buttonPlacement = 'none';
-        this.buttonLabel = undefined;
-        this.inputLabel = undefined;
-        this.customStyles = {};
-        this.placeholderValue = 'Enter Search';
-        this.searchTerm = '';
-        this.debounceDelay = 0;
-        this.inputValue = this.searchTerm;
-        this.error = false;
-        this.isSearchcraftInitialized = false;
     }
     init() {
         if (this.config && !this.isSearchcraftInitialized) {
@@ -82,6 +109,7 @@ export class SearchcraftInput {
             });
             this.searchStore.initialize(searchcraft, true);
             this.isSearchcraftInitialized = true;
+            this.inputInit.emit();
         }
     }
     componentDidLoad() {
@@ -98,9 +126,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() {
@@ -134,7 +166,9 @@ export class SearchcraftInput {
                 "docs": {
                     "tags": [],
                     "text": "The Searchcraft config object."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "autoSearch": {
                 "type": "boolean",
@@ -150,6 +184,8 @@ export class SearchcraftInput {
                     "tags": [],
                     "text": "Whether or not to automatically submit the search term when the input changes."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "auto-search",
                 "reflect": false,
                 "defaultValue": "true"
@@ -168,6 +204,8 @@ export class SearchcraftInput {
                     "tags": [],
                     "text": "Where to place the search button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-placement",
                 "reflect": false,
                 "defaultValue": "'none'"
@@ -186,6 +224,8 @@ export class SearchcraftInput {
                     "tags": [],
                     "text": "The label for the submit button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-label",
                 "reflect": false
             },
@@ -203,6 +243,8 @@ export class SearchcraftInput {
                     "tags": [],
                     "text": "The label rendered above the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "input-label",
                 "reflect": false
             },
@@ -225,6 +267,8 @@ export class SearchcraftInput {
                     "tags": [],
                     "text": "A custom styles object to be applied to the input element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "custom-styles",
                 "reflect": false,
                 "defaultValue": "{}"
@@ -243,6 +287,8 @@ export class SearchcraftInput {
                     "tags": [],
                     "text": "The input element's placeholder value."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placeholder-value",
                 "reflect": false,
                 "defaultValue": "'Enter Search'"
@@ -261,27 +307,11 @@ export class SearchcraftInput {
                     "tags": [],
                     "text": "The starting value of the input element."
                 },
+                "getter": false,
+                "setter": false,
                 "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 +331,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 +346,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 +354,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 +384,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);