@searchcraft/javascript-sdk 0.4.1 → 0.5.0

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

@@ -0,0 +1,377 @@
+import { h, } from "@stencil/core";
+import { SearchcraftCore } from "@searchcraft/core";
+import packageJson from "../../../package.json";
+import { parseCustomStyles } from "../../utils/utils";
+import { useSearchcraftStore } from "../../provider/store";
+import classNames from "classnames";
+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();
+                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 = async (value) => {
+            if (value === useSearchcraftStore.getState().query) {
+                return;
+            }
+            this.querySubmit.emit(value);
+            this.searchTerm = value.trim();
+            this.error = false;
+            this.searchStore.setQuery(this.searchTerm);
+            try {
+                await this.searchStore.search();
+            }
+            catch (error) {
+                this.error = true;
+                this.inputCleared.emit();
+            }
+        };
+        this.handleClearInput = () => {
+            this.inputValue = '';
+            if (this.debounceTimeout) {
+                clearTimeout(this.debounceTimeout);
+            }
+            this.searchTerm = '';
+            this.searchStore.setQuery('');
+            this.searchStore.setSearchResults(null);
+            this.error = false;
+            if (this.inputCleared) {
+                this.inputCleared.emit();
+            }
+        };
+        this.handleFormSubmit = async (event) => {
+            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;
+    }
+    init() {
+        if (this.config) {
+            const searchcraft = new SearchcraftCore(this.config, {
+                sdkName: packageJson.name,
+                sdkVersion: packageJson.version,
+            });
+            this.searchStore.initialize(searchcraft, true);
+        }
+    }
+    componentDidLoad() {
+        this.init();
+    }
+    onConfigChange() {
+        this.init();
+    }
+    render() {
+        const validatedCustomStyles = parseCustomStyles(this.customStyles);
+        const isShowingClearButton = this.inputValue.length > 0;
+        const inputGridClassNames = classNames('searchcraft-input-grid', {
+            'searchcraft-input-grid-buttonLeft': this.buttonPlacement === 'left',
+            'searchcraft-input-grid-buttonRight': this.buttonPlacement === 'right',
+            'searchcraft-input-grid-buttonNone': this.buttonPlacement === 'none',
+        });
+        return (h("form", { key: 'ac7eeb57d1d06df0be4354f2bb64b36d954d9cac', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, h("div", { key: '544156a87b038bd8585ea1c5613fee9f6906c973', class: inputGridClassNames }, h("div", { key: '7ff6b5150e440c45eef51f103e41314bd68dbe43', class: 'searchcraft-input-button-wrapper' }, h("searchcraft-button", { key: '3b0c6c94485133259dc247905d0bd5b224f74e4e', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), h("div", { key: '8604e917290120905a92cf948a5a76f52197e882', class: 'searchcraft-input-label-wrapper' }, h("searchcraft-input-label", { key: '376e1c3e3b84f683872e118a14da2a229e4b8eb5', label: this.inputLabel })), this.error && (h("div", { key: 'aa26f0b978e134ca026ea290eb149d6626185ac2', class: 'searchcraft-input-error-wrapper' }, h("searchcraft-error-message", { key: '87340701fd0a5fcbd0249d9798a607e920089080', errorMessage: 'Please enter a search query.' }))), h("div", { key: 'ebd7c6d07da299a7d2553ccb96fc618222e228df', class: 'searchcraft-input-wrapper' }, h("input", { key: '1961a43111858561b4d2e84935b3c47cec45397f', 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: '966ac230dd6946dad185d9f657145ebab76a262a', class: 'searchcraft-input-search-icon-wrapper' }, h("svg", { key: '12d139c60fe38055df9ea502c877fb773b38682d', 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: 'b8eea376073c55c6e0e4bf29d40230f1d2220ce7', id: 'searchcraft-title' }, "Searchcraft Search Icon Light"), h("path", { key: 'c513ef3b3cea3823e7838ac2574cd5a237e06ef1', 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: '35e056ea1d2530e045c3edae231204f9c490d10b', type: 'button', class: 'searchcraft-input-clear-button', onClick: this.handleClearInput }, h("svg", { key: '3ab21fc44269d2f13ba91c21d24becd3ea5e2728', 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: 'c9c4c5c1a5772cac63e3cf5557cc6e90f0b1a1f1', id: 'icon-title' }, "Searchcraft Clear Input Icon Light"), h("path", { key: '36740b841f8ec8e439c8e7fbefd37dafafcf5d00', 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() {
+        return {
+            "$": ["searchcraft-input-form.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-input-form.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SearchcraftConfig | undefined",
+                    "resolved": "SearchcraftConfig",
+                    "references": {
+                        "SearchcraftConfig": {
+                            "location": "import",
+                            "path": "@searchcraft/core",
+                            "id": "../core-sdk/dist/index.d.ts::SearchcraftConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The Searchcraft config object."
+                }
+            },
+            "autoSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to automatically submit the search term when the input changes."
+                },
+                "attribute": "auto-search",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "buttonPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right' | 'none'",
+                    "resolved": "\"left\" | \"none\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where to place the search button."
+                },
+                "attribute": "button-placement",
+                "reflect": false,
+                "defaultValue": "'none'"
+            },
+            "buttonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the submit button."
+                },
+                "attribute": "button-label",
+                "reflect": false
+            },
+            "inputLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label rendered above the input."
+                },
+                "attribute": "input-label",
+                "reflect": false
+            },
+            "customStyles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Record<string, string>",
+                    "resolved": "string | { [x: string]: string; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A custom styles object to be applied to the input element."
+                },
+                "attribute": "custom-styles",
+                "reflect": false,
+                "defaultValue": "{}"
+            },
+            "placeholderValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input element's placeholder value."
+                },
+                "attribute": "placeholder-value",
+                "reflect": false,
+                "defaultValue": "'Enter Search'"
+            },
+            "searchTerm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The starting value of the input element."
+                },
+                "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inputValue": {},
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "inputCleared",
+                "name": "inputCleared",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the input element has been cleared."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "noResultsReceived",
+                "name": "noResultsReceived",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a query returns with no results received."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "querySubmit",
+                "name": "querySubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a new search request has been submitted."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "inputFocus",
+                "name": "inputFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the input has gained focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "inputBlur",
+                "name": "inputBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the input has lost focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "config",
+                "methodName": "onConfigChange"
+            }];
+    }
+}
+//# sourceMappingURL=searchcraft-input-form.js.map

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

@@ -0,0 +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\n  private debounceTimeout: ReturnType<typeof setTimeout> | null = null;\n  private searchStore = useSearchcraftStore.getState();\n\n  init() {\n    if (this.config) {\n      const searchcraft = new SearchcraftCore(this.config, {\n        sdkName: packageJson.name,\n        sdkVersion: packageJson.version,\n      });\n      this.searchStore.initialize(searchcraft, 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"]}

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

@@ -97,24 +97,76 @@
   --sc-body-small-font-weight: 400;
 }
 
-searchcraft-input {
+.searchcraft-input-wrapper {
+  position: relative;
   display: flex;
-  flex: 1;
 }
 
-.searchcraft-input-wrapper {
-  display: inline-block;
-  position: relative;
-  cursor: text;
+.searchcraft-input-grid {
+  display: grid;
+  gap: 4px 8px;
 }
 
-.searchcraft-input-wrapper-flex {
-  display: flex;
-  flex: 1;
+.searchcraft-input-grid-buttonLeft {
+  grid-template-rows: repeat(3, auto);
+  grid-template-columns: auto 1fr;
+}
+.searchcraft-input-grid-buttonLeft .searchcraft-input-button-wrapper {
+  grid-column: 1/span 1;
+  grid-row: 2/span 1;
+}
+.searchcraft-input-grid-buttonLeft .searchcraft-input-label-wrapper {
+  grid-column: 2/span 1;
+  grid-row: 1/span 1;
+}
+.searchcraft-input-grid-buttonLeft .searchcraft-input-error-wrapper {
+  grid-column: 2/span 1;
+  grid-row: 3/span 1;
+}
+.searchcraft-input-grid-buttonLeft .searchcraft-input-wrapper {
+  grid-column: 2/span 1;
+  grid-row: 2/span 1;
 }
 
-.searchcraft-input-flex {
-  flex: 1;
+.searchcraft-input-grid-buttonRight {
+  grid-template-rows: repeat(3, auto);
+  grid-template-columns: 1fr auto;
+}
+.searchcraft-input-grid-buttonRight .searchcraft-input-button-wrapper {
+  grid-column: 2/span 1;
+  grid-row: 2/span 1;
+}
+.searchcraft-input-grid-buttonRight .searchcraft-input-label-wrapper {
+  grid-column: 1/span 1;
+  grid-row: 1/span 1;
+}
+.searchcraft-input-grid-buttonRight .searchcraft-input-error-wrapper {
+  grid-column: 1/span 1;
+  grid-row: 3/span 1;
+}
+.searchcraft-input-grid-buttonRight .searchcraft-input-wrapper {
+  grid-column: 1/span 1;
+  grid-row: 2/span 1;
+}
+
+.searchcraft-input-grid-buttonNone {
+  grid-template-rows: repeat(3, auto);
+  grid-template-columns: auto;
+}
+.searchcraft-input-grid-buttonNone .searchcraft-input-button-wrapper {
+  display: none;
+}
+.searchcraft-input-grid-buttonNone .searchcraft-input-label-wrapper {
+  grid-column: 1/span 1;
+  grid-row: 1/span 1;
+}
+.searchcraft-input-grid-buttonNone .searchcraft-input-error-wrapper {
+  grid-column: 1/span 1;
+  grid-row: 3/span 1;
+}
+.searchcraft-input-grid-buttonNone .searchcraft-input-wrapper {
+  grid-column: 1/span 1;
+  grid-row: 2/span 1;
 }
 
 .searchcraft-input {
@@ -132,6 +184,7 @@ searchcraft-input {
   padding-right: var(--sc-input-padding-right);
   padding-top: 12px;
   padding-bottom: 12px;
+  flex: 1;
 }
 .searchcraft-input::placeholder {
   color: var(--sc-content-disabled);

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import classNames from "classnames";
 export class SearchcraftInputLabel {
     constructor() {
         this.inputLabelClassName = '';
@@ -8,7 +9,7 @@ export class SearchcraftInputLabel {
         if (!this.label) {
             return null;
         }
-        return (h("label", { class: 'searchcraft-input-label', htmlFor: 'searchcraft-input-id' }, this.label));
+        return (h("label", { class: classNames('searchcraft-input-label', this.inputLabelClassName), htmlFor: 'searchcraft-input-id' }, this.label));
     }
     static get is() { return "searchcraft-input-label"; }
     static get originalStyleUrls() {

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;AAOnD,MAAM,OAAO,qBAAqB;;mCACD,EAAE;;;IAGjC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CACL,aAAO,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAC,sBAAsB,IAClE,IAAI,CAAC,KAAK,CACL,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\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 class='searchcraft-input-label' htmlFor='searchcraft-input-id'>\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;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"]}

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

@@ -0,0 +1,87 @@
+import { h } from "@stencil/core";
+export class SearchcraftPopoverForm {
+    constructor() {
+        this.config = undefined;
+        this.type = 'inline';
+        this.popoverResultMappings = undefined;
+    }
+    render() {
+        return (h("div", { key: 'a0a5602203dc33f66fd950187e8f9761a13e5bdc', style: { display: 'flex', flexDirection: 'column', flex: '1' } }, h("searchcraft-input", { key: 'b8f9b0d86e66a17f8ddd9966e577e16c4834d1cb', onInputFocus: () => console.log('focused'), onInputBlur: () => console.log('blurred') }), h("searchcraft-popover-list-view", { key: 'a6f5bf1118cd759f28e634e3dadbe64fe3470b6b', popoverResultMappings: this.popoverResultMappings })));
+    }
+    static get is() { return "searchcraft-popover-form"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-popover-form.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-popover-form.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SearchcraftConfig | undefined",
+                    "resolved": "SearchcraftConfig",
+                    "references": {
+                        "SearchcraftConfig": {
+                            "location": "import",
+                            "path": "@searchcraft/core",
+                            "id": "../core-sdk/dist/index.d.ts::SearchcraftConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'inline' | 'fullscreen' | 'modal'",
+                    "resolved": "\"fullscreen\" | \"inline\" | \"modal\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'inline'"
+            },
+            "popoverResultMappings": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PopoverResultMappings | undefined",
+                    "resolved": "{ title?: SearchResultMapping; subtitle?: SearchResultMapping; imageSource?: SearchResultMapping; href?: SearchResultMapping; }",
+                    "references": {
+                        "PopoverResultMappings": {
+                            "location": "import",
+                            "path": "types",
+                            "id": "src/types/index.ts::PopoverResultMappings"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=searchcraft-popover-form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"searchcraft-popover-form.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-popover-form/searchcraft-popover-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAWnD,MAAM,OAAO,sBAAsB;;;oBAEiB,QAAQ;;;IAG1D,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE;YACjE,0EACE,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAC1C,WAAW,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,GACzC;YACF,sFACE,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,GACjD,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\nimport type { SearchcraftConfig } from '@searchcraft/core';\n\nimport type { PopoverResultMappings } from 'types';\n\n@Component({\n  tag: 'searchcraft-popover-form',\n  styleUrl: 'searchcraft-popover-form.module.scss',\n  shadow: false,\n})\nexport class SearchcraftPopoverForm {\n  @Prop() config: SearchcraftConfig | undefined;\n  @Prop() type: 'inline' | 'fullscreen' | 'modal' = 'inline';\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n\n  render() {\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', flex: '1' }}>\n        <searchcraft-input\n          onInputFocus={() => console.log('focused')}\n          onInputBlur={() => console.log('blurred')}\n        />\n        <searchcraft-popover-list-view\n          popoverResultMappings={this.popoverResultMappings}\n        />\n      </div>\n    );\n  }\n}\n"]}