@searchcraft/javascript-sdk 0.8.1 → 0.9.0

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

@@ -1,443 +0,0 @@
-import { h, } from "@stencil/core";
-import { SearchcraftCore } from "@searchcraft/core";
-import packageJson from "../../../package.json";
-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');
- *
- * searchInputForm.config = {
- *   index: [],
- *   readKey: '',
- *   endpointUrl: '',
- * };
- *
- * searchForm.addEventListener('querySubmit', (event) => {
- *   console.log('Query submitted', event.detail);
- * });
- * ```
- */
-export class SearchcraftInput {
-    /**
-     * The Searchcraft config object.
-     */
-    config;
-    /**
-     * Whether or not to automatically submit the search term when the input changes.
-     */
-    autoSearch = true;
-    /**
-     * Where to place the search button.
-     */
-    buttonPlacement = 'none';
-    /**
-     * The label for the submit button.
-     */
-    buttonLabel;
-    /**
-     * The label rendered above the input.
-     */
-    inputLabel;
-    /**
-     * A custom styles object to be applied to the input element.
-     */
-    customStyles = {};
-    /**
-     * The input element's placeholder value.
-     */
-    placeholderValue = 'Enter Search';
-    /**
-     * The starting value of the input element.
-     */
-    searchTerm = '';
-    /**
-     * When the input is cleared.
-     */
-    inputCleared;
-    /**
-     * When no results are returned.
-     */
-    noResultsReceived;
-    /**
-     * When the input becomes focused.
-     */
-    inputFocus;
-    /**
-     * When the input becomes unfocused.
-     */
-    inputBlur;
-    /**
-     * Event emitted when input initializes.
-     */
-    inputInit;
-    /**
-     * Event emitted when a query has been submitted.
-     */
-    querySubmit;
-    inputValue = this.searchTerm;
-    error = false;
-    isSearchcraftInitialized = false;
-    searchStore = useSearchcraftStore.getState();
-    init() {
-        if (this.config && !this.isSearchcraftInitialized) {
-            const searchcraft = new SearchcraftCore(this.config, {
-                sdkName: packageJson.name,
-                sdkVersion: packageJson.version,
-            });
-            this.searchStore.initialize(searchcraft, true);
-            this.isSearchcraftInitialized = true;
-            this.inputInit?.emit();
-        }
-    }
-    componentDidLoad() {
-        this.init();
-    }
-    onConfigChange() {
-        this.init();
-    }
-    handleOnInput = (event) => {
-        const input = event.target;
-        this.inputValue = input.value;
-        if (!this.autoSearch) {
-            return;
-        }
-        if (input.value.trim() === '') {
-            this.inputCleared?.emit();
-        }
-        this.performSearch(input.value);
-    };
-    performSearch = async (value) => {
-        if (value === useSearchcraftStore.getState().searchTerm) {
-            return;
-        }
-        this.searchTerm = value.trim();
-        this.error = false;
-        this.searchStore.setSearchTerm(this.searchTerm);
-        this.querySubmit?.emit(this.searchTerm);
-        try {
-            await this.searchStore.search();
-        }
-        catch (error) {
-            this.error = true;
-            this.inputCleared?.emit();
-        }
-    };
-    handleClearInput = () => {
-        this.inputValue = '';
-        this.searchTerm = '';
-        this.searchStore.setSearchTerm('');
-        this.searchStore.setSearchClientResponseItems([]);
-        this.error = false;
-        this.inputCleared?.emit();
-    };
-    handleFormSubmit = async (event) => {
-        event.preventDefault();
-        await this.performSearch(this.searchTerm);
-    };
-    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',
-        });
-        const shouldHaveVerticalGap = this.inputLabel || this.error;
-        const inputGridStyles = {
-            gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',
-        };
-        return (h("form", { key: 'bc665c50db8de601a3c95266bdf063ebb988d6a8', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, h("div", { key: 'a6936858c08d866b66b887c7ae03b35961cf04a1', class: inputGridClassNames, style: inputGridStyles }, h("div", { key: '915ac892fccb771f1c5338cd2d52f16f1793615d', class: 'searchcraft-input-button-wrapper' }, h("searchcraft-button", { key: '81447da28dcb9cb80a8cdf0c6765c909c2746585', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), this.inputLabel && (h("div", { key: '939c3407d16075be25ff23bf9b379c05ba1a66d4', class: 'searchcraft-input-label-wrapper' }, h("searchcraft-input-label", { key: '9d9c4043c04132b27710cca47abf102a188a80b9', label: this.inputLabel }))), this.error && (h("div", { key: '7e309f8a5c81a41bdd593f4e4ee1ba30c531c97d', class: 'searchcraft-input-error-wrapper' }, h("searchcraft-error-message", { key: 'de947c04f0948e36786f50ac65720eeb598ae7bf', errorMessage: 'Something went wrong.' }))), h("div", { key: 'bcf774e3fa5164ab838b634badf2002495437fe7', class: 'searchcraft-input-wrapper' }, h("input", { key: 'fd9759559712a39d3493e069ddddf7c267879c84', autoComplete: 'off', class: 'searchcraft-input', onFocus: () => this.inputFocus?.emit(), onBlur: () => this.inputBlur?.emit(), onInput: (event) => {
-                this.handleOnInput(event);
-            }, placeholder: this.placeholderValue, style: validatedCustomStyles, type: 'text', value: this.inputValue }), h("div", { key: '8564b18962feeea8d9ab8bb46af4ba28a089d8f4', class: 'searchcraft-input-search-icon-wrapper' }, h("svg", { key: '90c3636ea306ed70887d76deaf058ab3ace61134', class: 'searchcraft-input-search-icon', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, h("title", { key: 'c9921263b87df28e06bab9990e324aa1bebac767', id: 'searchcraft-title' }, "Searchcraft Search Icon Light"), h("path", { key: 'bb82073fd722ff4a74e1a86c74cdf0dd9a8080b4', d: 'M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), isShowingClearButton && (h("button", { key: 'e708cb9426171bfdfb29e0a98206d086fa14e15e', type: 'button', class: 'searchcraft-input-clear-button', onClick: this.handleClearInput }, h("svg", { key: '243b6eacc68fa8cc57d5e11b9b317d7fe581406f', class: 'searchcraft-input-clear-icon', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { key: 'd8a8b44fe04345b5b27ba33ec4ba510500eab3bf', id: 'icon-title' }, "Searchcraft Clear Input Icon Light"), h("path", { key: '0602cbff7aac6755dabb496b84e6ef3e4e2ac7a6', d: 'M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))))))));
-    }
-    static get is() { return "searchcraft-input-form"; }
-    static get properties() {
-        return {
-            "config": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SearchcraftConfig | undefined",
-                    "resolved": "SearchcraftConfig | undefined",
-                    "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."
-                },
-                "getter": false,
-                "setter": false
-            },
-            "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."
-                },
-                "getter": false,
-                "setter": false,
-                "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."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "button-placement",
-                "reflect": false,
-                "defaultValue": "'none'"
-            },
-            "buttonLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | undefined",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The label for the submit button."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "button-label",
-                "reflect": false
-            },
-            "inputLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | undefined",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The label rendered above the input."
-                },
-                "getter": false,
-                "setter": false,
-                "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."
-                },
-                "getter": false,
-                "setter": false,
-                "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."
-                },
-                "getter": false,
-                "setter": false,
-                "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."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "search-term",
-                "reflect": false,
-                "defaultValue": "''"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "inputValue": {},
-            "error": {},
-            "isSearchcraftInitialized": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "inputCleared",
-                "name": "inputCleared",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "When the input is cleared."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "noResultsReceived",
-                "name": "noResultsReceived",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "When no results are returned."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "inputFocus",
-                "name": "inputFocus",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "When the input becomes focused."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "inputBlur",
-                "name": "inputBlur",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "When the input becomes unfocused."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "inputInit",
-                "name": "inputInit",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "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() {
-        return [{
-                "propName": "config",
-                "methodName": "onConfigChange"
-            }];
-    }
-}
-//# sourceMappingURL=searchcraft-input-form.js.map

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

@@ -1 +0,0 @@
-{"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\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 * searchInputForm.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  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 (!this.autoSearch) {\n      return;\n    }\n\n    if (input.value.trim() === '') {\n      this.inputCleared?.emit();\n    }\n\n    this.performSearch(input.value);\n  };\n\n  private performSearch = async (value: string) => {\n    if (value === useSearchcraftStore.getState().searchTerm) {\n      return;\n    }\n\n    this.searchTerm = value.trim();\n    this.error = false;\n    this.searchStore.setSearchTerm(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.setSearchTerm('');\n    this.searchStore.setSearchClientResponseItems([]);\n    this.error = false;\n\n    this.inputCleared?.emit();\n  };\n\n  handleFormSubmit = async (event: Event) => {\n    event.preventDefault();\n    await this.performSearch(this.searchTerm);\n  };\n\n  render() {\n    const validatedCustomStyles = parseCustomStyles(this.customStyles);\n\n    const isShowingClearButton = this.inputValue.length > 0;\n\n    const inputGridClassNames = classNames('searchcraft-input-grid', {\n      'searchcraft-input-grid-buttonLeft': this.buttonPlacement === 'left',\n      'searchcraft-input-grid-buttonRight': this.buttonPlacement === 'right',\n      'searchcraft-input-grid-buttonNone': this.buttonPlacement === 'none',\n    });\n\n    const shouldHaveVerticalGap = this.inputLabel || this.error;\n    const inputGridStyles = {\n      gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',\n    };\n\n    return (\n      <form class='searchcraft-input-form' onSubmit={this.handleFormSubmit}>\n        <div class={inputGridClassNames} style={inputGridStyles}>\n          <div class='searchcraft-input-button-wrapper'>\n            <searchcraft-button\n              onButtonClick={this.handleFormSubmit}\n              label={this.buttonLabel}\n            />\n          </div>\n          {this.inputLabel && (\n            <div class='searchcraft-input-label-wrapper'>\n              <searchcraft-input-label label={this.inputLabel} />\n            </div>\n          )}\n          {this.error && (\n            <div class='searchcraft-input-error-wrapper'>\n              <searchcraft-error-message errorMessage='Something went wrong.' />\n            </div>\n          )}\n          <div class='searchcraft-input-wrapper'>\n            <input\n              autoComplete='off'\n              class='searchcraft-input'\n              onFocus={() => this.inputFocus?.emit()}\n              onBlur={() => this.inputBlur?.emit()}\n              onInput={(event) => {\n                this.handleOnInput(event);\n              }}\n              placeholder={this.placeholderValue}\n              style={validatedCustomStyles}\n              type='text'\n              value={this.inputValue}\n            />\n            <div class='searchcraft-input-search-icon-wrapper'>\n              <svg\n                class='searchcraft-input-search-icon'\n                viewBox='0 0 20 20'\n                fill='none'\n                xmlns='http://www.w3.org/2000/svg'\n                aria-labelledby='searchcraft-title'\n              >\n                <title id='searchcraft-title'>\n                  Searchcraft Search Icon Light\n                </title>\n                <path\n                  d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n                  stroke='currentColor'\n                  stroke-width='1.5'\n                  stroke-linecap='round'\n                  stroke-linejoin='round'\n                />\n              </svg>\n            </div>\n            {isShowingClearButton && (\n              <button\n                type='button'\n                class='searchcraft-input-clear-button'\n                onClick={this.handleClearInput}\n              >\n                <svg\n                  class='searchcraft-input-clear-icon'\n                  viewBox='0 0 22 22'\n                  fill='none'\n                  xmlns='http://www.w3.org/2000/svg'\n                  aria-labelledby='icon-title'\n                >\n                  <title id='icon-title'>\n                    Searchcraft Clear Input Icon Light\n                  </title>\n                  <path\n                    d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n                    stroke='currentColor'\n                    stroke-width='1.5'\n                    stroke-linecap='round'\n                    stroke-linejoin='round'\n                  />\n                </svg>\n              </button>\n            )}\n          </div>\n        </div>\n      </form>\n    );\n  }\n}\n"]}

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

@@ -1,67 +0,0 @@
-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 {
-    /**
-     * The classname applied to the label element.
-     */
-    inputLabelClassName = '';
-    label = '';
-    render() {
-        return (h("label", { key: '528396d4be9f22ff0c02d95d8bcea056576aed41', class: classNames('searchcraft-input-label', this.inputLabelClassName), htmlFor: 'searchcraft-input-id' }, this.label));
-    }
-    static get is() { return "searchcraft-input-label"; }
-    static get properties() {
-        return {
-            "inputLabelClassName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | undefined",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The classname applied to the label element."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "input-label-class-name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "label",
-                "reflect": false,
-                "defaultValue": "''"
-            }
-        };
-    }
-}
-//# sourceMappingURL=searchcraft-input-label.js.map

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

@@ -1 +0,0 @@
-{"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;AAKH,MAAM,OAAO,qBAAqB;IAChC;;OAEG;IACK,mBAAmB,GAAI,EAAE,CAAC;IAC1B,KAAK,GAAG,EAAE,CAAC;IAEnB,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  shadow: false,\n})\nexport class SearchcraftInputLabel {\n  /**\n   * The classname applied to the label element.\n   */\n  @Prop() inputLabelClassName? = '';\n  @Prop() label = '';\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"]}