@searchcraft/javascript-sdk 0.7.2 → 0.8.1

package/dist/components/{p-b4a8fcbe.js → p-97332d3e.js}

@@ -1,47 +1,14 @@
 import { p as proxyCustomElement, H, h, F as Fragment } from './p-5365011f.js';
-import { u as useSearchcraftStore } from './p-936e2ed4.js';
+import { u as useSearchcraftStore } from './p-38419178.js';
+import { a as getDocumentValueFromSearchResultMapping } from './p-6104fe5d.js';
 
 const SearchcraftBaseSearchResult = /*@__PURE__*/ proxyCustomElement(class SearchcraftBaseSearchResult extends H {
     constructor() {
         super();
         this.__registerHost();
     }
-    /**
-     * The title content.
-     */
-    titleContent;
-    /**
-     * The subtitle content.
-     */
-    subtitleContent;
-    /**
-     * The body content.
-     */
-    bodyContent;
-    /**
-     * The footer content.
-     */
-    footerContent;
-    /**
-     * The label for the button rendered when containerHref is not present.
-     */
-    buttonLabel;
-    /**
-     * The link for the button rendered when containerHref is not present.
-     */
-    buttonHref;
-    /**
-     * Where to open the link for the button rendered when containerHref is not present.
-     */
-    buttonTarget = '_blank';
-    /**
-     * The relationship between the current document and the link for the button rendered when containerHref is not present.
-     */
-    buttonRel;
-    /**
-     * The link for the containing element.
-     */
-    containerHref;
+    item;
+    searchResultMappings;
     /**
      * Where to open the link for the containing element.
      */
@@ -51,13 +18,13 @@ const SearchcraftBaseSearchResult = /*@__PURE__*/ proxyCustomElement(class Searc
      */
     containerRel;
     /**
-     * The image source.
+     * Where to open the link for the button rendered when containerHref is not present.
      */
-    imageSrc;
+    buttonTarget = '_blank';
     /**
-     * The image alternative text.
+     * The relationship between the current document and the link for the button rendered when containerHref is not present.
      */
-    imageAlt;
+    buttonRel;
     /**
      * The placement of the image.
      */
@@ -70,14 +37,37 @@ const SearchcraftBaseSearchResult = /*@__PURE__*/ proxyCustomElement(class Searc
      * The position in the document. Used with the "document_clicked" measure event.
      */
     documentPosition = 0;
+    titleContent;
+    subtitleContent;
+    bodyContent;
+    footerContent;
+    buttonLabel;
+    buttonHref;
+    containerHref;
+    imageSrc;
+    imageAlt;
     searchcraftStore = useSearchcraftStore.getState();
-    recordMeasureEvent = () => {
+    connectedCallback() {
+        if (this.item) {
+            this.mapValuesFromDocument(this.item.document);
+        }
+    }
+    mapValuesFromDocument(document) {
+        this.titleContent = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings?.title);
+        this.subtitleContent = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings?.subtitle);
+        this.bodyContent = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings?.body);
+        this.containerHref = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings?.containerHref);
+        this.buttonHref = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings?.buttonHref);
+        this.imageSrc = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings?.imageSource);
+        this.footerContent = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings?.footer);
+    }
+    handleLinkClick = () => {
         const searchcraft = this.searchcraftStore.getSearchcraftInstance();
         if (searchcraft) {
             const document_position = this.documentPosition;
-            const search_term = this.searchcraftStore.query;
-            const number_of_documents = this.searchcraftStore.searchResults?.data?.hits?.length || 0;
-            searchcraft.sendMeasureEvent('document_clicked', {
+            const search_term = this.searchcraftStore.searchTerm;
+            const number_of_documents = this.searchcraftStore.searchClientResponseItems.length;
+            searchcraft.measureClient?.sendMeasureEvent('document_clicked', {
                 document_position,
                 number_of_documents,
                 search_term,
@@ -102,28 +92,30 @@ const SearchcraftBaseSearchResult = /*@__PURE__*/ proxyCustomElement(class Searc
         const contentContainer = (h(Fragment, null, this.imageSrc && this.imagePlacement === 'left' && imageContainer, h("div", { class: 'searchcraft-base-search-result-content-container' }, this.titleContent && (h("h2", { class: 'searchcraft-base-search-result-title', style: styles.title || {} }, this.titleContent)), this.subtitleContent && (h("h3", { class: 'searchcraft-base-search-result-subtitle', style: styles.subtitle || {} }, this.subtitleContent)), this.bodyContent && (h("p", { class: 'searchcraft-base-search-result-body-content', style: styles.primaryContent || {} }, this.bodyContent)), this.footerContent && (h("p", { class: 'searchcraft-base-search-result-footer-content', style: styles.secondaryContent || {} }, this.footerContent)), this.buttonHref && !this.containerHref && this.buttonLabel && (h("a", { class: 'searchcraft-search-result-button', href: this.buttonHref, style: styles.button || {}, target: this.buttonTarget, rel: this.buttonRel }, this.buttonLabel))), this.imageSrc && this.imagePlacement === 'right' && imageContainer));
         /** Render as an anchor tag if the containerHref prop is present. */
         if (this.containerHref) {
-            return (h("a", { class: 'searchcraft-search-result-container', onClick: this.recordMeasureEvent, href: this.containerHref, rel: this.containerRel, style: styles.container || {}, tabindex: '0', target: this.containerTarget }, contentContainer));
+            return (h("a", { class: 'searchcraft-search-result-container', onClick: this.handleLinkClick, href: this.containerHref, rel: this.containerRel, style: styles.container || {}, tabindex: '0', target: this.containerTarget }, contentContainer));
         }
         /** Render as a div if no href prop. */
         return (h("div", { class: 'searchcraft-search-result-container', style: styles.container || {} }, contentContainer));
     }
 }, [0, "searchcraft-base-search-result", {
-        "titleContent": [1, "title-content"],
-        "subtitleContent": [1, "subtitle-content"],
-        "bodyContent": [1, "body-content"],
-        "footerContent": [1, "footer-content"],
-        "buttonLabel": [1, "button-label"],
-        "buttonHref": [1, "button-href"],
-        "buttonTarget": [1, "button-target"],
-        "buttonRel": [1, "button-rel"],
-        "containerHref": [1, "container-href"],
+        "item": [16],
+        "searchResultMappings": [16],
         "containerTarget": [1, "container-target"],
         "containerRel": [1, "container-rel"],
-        "imageSrc": [1, "image-src"],
-        "imageAlt": [1, "image-alt"],
+        "buttonTarget": [1, "button-target"],
+        "buttonRel": [1, "button-rel"],
         "imagePlacement": [1, "image-placement"],
         "customStyles": [1, "custom-styles"],
-        "documentPosition": [2, "document-position"]
+        "documentPosition": [2, "document-position"],
+        "titleContent": [32],
+        "subtitleContent": [32],
+        "bodyContent": [32],
+        "footerContent": [32],
+        "buttonLabel": [32],
+        "buttonHref": [32],
+        "containerHref": [32],
+        "imageSrc": [32],
+        "imageAlt": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
@@ -141,4 +133,4 @@ function defineCustomElement() {
 
 export { SearchcraftBaseSearchResult as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-b4a8fcbe.js.map
+//# sourceMappingURL=p-97332d3e.js.map

package/dist/components/p-97332d3e.js.map

@@ -0,0 +1 @@
+{"file":"p-97332d3e.js","mappings":"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","names":[],"sources":["src/components/searchcraft-base-search-result/searchcraft-base-search-result.tsx"],"sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport type {\n  SearchClientResponseItem,\n  SearchDocument,\n} from '@searchcraft/core';\nimport { Component, Fragment, h, Prop, State } from '@stencil/core';\nimport { getDocumentValueFromSearchResultMapping } from '@utils';\nimport type { SearchResultMappings } from '@searchcraft/core';\n\n/**\n * This web component is designed to display detailed information for a single search result.\n * Once a query is submitted, the component formats and presents the result.\n * It is consumed within the `searchcraft-base-search-results` component.\n */\n@Component({\n  tag: 'searchcraft-base-search-result',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchResult {\n  @Prop() item: SearchClientResponseItem | undefined;\n  @Prop() searchResultMappings: SearchResultMappings | undefined;\n  /**\n   * Where to open the link for the containing element.\n   */\n  @Prop() containerTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  /**\n   * The relationship between the current document and the link for the containing element.\n   */\n  @Prop() containerRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  /**\n   * Where to open the link for the button rendered when containerHref is not present.\n   */\n  @Prop() buttonTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  /**\n   * The relationship between the current document and the link for the button rendered when containerHref is not present.\n   */\n  @Prop() buttonRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  /**\n   * The placement of the image.\n   */\n  @Prop() imagePlacement: 'left' | 'right' = 'right';\n  /**\n   * A custom styles object.\n   */\n  @Prop() customStyles: string | undefined;\n  /**\n   * The position in the document. Used with the \"document_clicked\" measure event.\n   */\n  @Prop() documentPosition = 0;\n\n  @State() titleContent: string | undefined;\n  @State() subtitleContent: string | undefined;\n  @State() bodyContent: string | undefined;\n  @State() footerContent: string | undefined;\n  @State() buttonLabel: string | undefined;\n  @State() buttonHref: string | undefined;\n  @State() containerHref: string | undefined;\n  @State() imageSrc: string | undefined;\n  @State() imageAlt: string | undefined;\n\n  private searchcraftStore = useSearchcraftStore.getState();\n\n  connectedCallback() {\n    if (this.item) {\n      this.mapValuesFromDocument(this.item.document);\n    }\n  }\n\n  mapValuesFromDocument(document: SearchDocument) {\n    this.titleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings?.title,\n    );\n    this.subtitleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings?.subtitle,\n    );\n    this.bodyContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings?.body,\n    );\n    this.containerHref = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings?.containerHref,\n    );\n    this.buttonHref = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings?.buttonHref,\n    );\n    this.imageSrc = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings?.imageSource,\n    );\n    this.footerContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings?.footer,\n    );\n  }\n\n  private handleLinkClick = () => {\n    const searchcraft = this.searchcraftStore.getSearchcraftInstance();\n\n    if (searchcraft) {\n      const document_position = this.documentPosition;\n      const search_term = this.searchcraftStore.searchTerm;\n      const number_of_documents =\n        this.searchcraftStore.searchClientResponseItems.length;\n\n      searchcraft.measureClient?.sendMeasureEvent('document_clicked', {\n        document_position,\n        number_of_documents,\n        search_term,\n      });\n    }\n  };\n\n  private parseStyles = (): Record<string, { [key: string]: string }> => {\n    if (this.customStyles) {\n      try {\n        return JSON.parse(this.customStyles);\n      } catch (error) {\n        console.error('Error parsing custom styles:', error);\n        return {};\n      }\n    }\n    return {};\n  };\n\n  render() {\n    const styles = this.parseStyles();\n    const imageContainer = this.imageSrc && (\n      <img\n        alt={this.imageAlt}\n        class='searchcraft-search-result-image'\n        src={this.imageSrc}\n        style={styles.image || {}}\n      />\n    );\n\n    const contentContainer = (\n      <Fragment>\n        {this.imageSrc && this.imagePlacement === 'left' && imageContainer}\n        <div class='searchcraft-base-search-result-content-container'>\n          {this.titleContent && (\n            <h2\n              class='searchcraft-base-search-result-title'\n              style={styles.title || {}}\n            >\n              {this.titleContent}\n            </h2>\n          )}\n          {this.subtitleContent && (\n            <h3\n              class='searchcraft-base-search-result-subtitle'\n              style={styles.subtitle || {}}\n            >\n              {this.subtitleContent}\n            </h3>\n          )}\n          {this.bodyContent && (\n            <p\n              class='searchcraft-base-search-result-body-content'\n              style={styles.primaryContent || {}}\n            >\n              {this.bodyContent}\n            </p>\n          )}\n\n          {this.footerContent && (\n            <p\n              class='searchcraft-base-search-result-footer-content'\n              style={styles.secondaryContent || {}}\n            >\n              {this.footerContent}\n            </p>\n          )}\n          {this.buttonHref && !this.containerHref && this.buttonLabel && (\n            <a\n              class='searchcraft-search-result-button'\n              href={this.buttonHref}\n              style={styles.button || {}}\n              target={this.buttonTarget}\n              rel={this.buttonRel}\n            >\n              {this.buttonLabel}\n            </a>\n          )}\n        </div>\n        {this.imageSrc && this.imagePlacement === 'right' && imageContainer}\n      </Fragment>\n    );\n\n    /** Render as an anchor tag if the containerHref prop is present. */\n    if (this.containerHref) {\n      return (\n        <a\n          class='searchcraft-search-result-container'\n          onClick={this.handleLinkClick}\n          href={this.containerHref}\n          rel={this.containerRel}\n          style={styles.container || {}}\n          tabindex='0'\n          target={this.containerTarget}\n        >\n          {contentContainer}\n        </a>\n      );\n    }\n\n    /** Render as a div if no href prop. */\n    return (\n      <div\n        class='searchcraft-search-result-container'\n        style={styles.container || {}}\n      >\n        {contentContainer}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-960ddc89.js → p-ae78be68.js}

@@ -1,13 +1,13 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-5365011f.js';
-import { u as useSearchcraftStore, b as ae } from './p-936e2ed4.js';
+import { u as useSearchcraftStore, g as ge } from './p-38419178.js';
 import { p as parseCustomStyles } from './p-d9551738.js';
 import { c as classNames } from './p-5cdc6210.js';
-import { d as defineCustomElement$3 } from './p-521fe971.js';
-import { d as defineCustomElement$2 } from './p-a75ef832.js';
-import { d as defineCustomElement$1 } from './p-ca881e5c.js';
+import { d as defineCustomElement$3 } from './p-d19bf6ff.js';
+import { d as defineCustomElement$2 } from './p-0e393fe1.js';
+import { d as defineCustomElement$1 } from './p-e55a7970.js';
 
 const name = "@searchcraft/javascript-sdk";
-const version = "0.7.2";
+const version = "0.8.1";
 const description = "Searchcraft Javascript SDK";
 const author = "Searchcraft";
 const license = "Apache-2.0";
@@ -56,7 +56,7 @@ const dependencies = {
 	classnames: "^2.3.2"
 };
 const devDependencies = {
-	"@searchcraft/core": "^0.7.2",
+	"@searchcraft/core": "^0.8.1",
 	"@searchcraft/javascript-sdk": "*",
 	"@stencil/core": "^4.7.0",
 	"@stencil/react-output-target": "^0.8.2",
@@ -158,7 +158,7 @@ const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput
     searchStore = useSearchcraftStore.getState();
     init() {
         if (this.config && !this.isSearchcraftInitialized) {
-            const searchcraft = new ae(this.config, {
+            const searchcraft = new ge(this.config, {
                 sdkName: packageJson.name,
                 sdkVersion: packageJson.version,
             });
@@ -176,25 +176,21 @@ const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput
     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 (input.value.trim() === '') {
+            this.inputCleared?.emit();
+        }
         this.performSearch(input.value);
     };
     performSearch = async (value) => {
-        if (value === useSearchcraftStore.getState().query) {
+        if (value === useSearchcraftStore.getState().searchTerm) {
             return;
         }
         this.searchTerm = value.trim();
         this.error = false;
-        this.searchStore.setQuery(this.searchTerm);
+        this.searchStore.setSearchTerm(this.searchTerm);
         this.querySubmit?.emit(this.searchTerm);
         try {
             await this.searchStore.search();
@@ -207,8 +203,8 @@ const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput
     handleClearInput = () => {
         this.inputValue = '';
         this.searchTerm = '';
-        this.searchStore.setQuery('');
-        this.searchStore.setSearchResults(null);
+        this.searchStore.setSearchTerm('');
+        this.searchStore.setSearchClientResponseItems([]);
         this.error = false;
         this.inputCleared?.emit();
     };
@@ -228,9 +224,9 @@ const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput
         const inputGridStyles = {
             gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',
         };
-        return (h("form", { key: 'b23e712102e03332d5958b736133ac5222c571ed', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, h("div", { key: '62e1666b20e3901565241c83cb6b398afbaf14bf', class: inputGridClassNames, style: inputGridStyles }, h("div", { key: '1f78f96f48e354ba434bcd6c8eb20f6940d2281c', class: 'searchcraft-input-button-wrapper' }, h("searchcraft-button", { key: '0e89a333f3d489dccb05d978dde8622ee24a2508', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), this.inputLabel && (h("div", { key: '1b75214db1a0a9d7144e8974e3467da9a94cc845', class: 'searchcraft-input-label-wrapper' }, h("searchcraft-input-label", { key: 'd7edaa9b980eae47628747488e4966ef62fab574', label: this.inputLabel }))), this.error && (h("div", { key: '936858e238d96838caa3aa34dbb4d86b3f6ad839', class: 'searchcraft-input-error-wrapper' }, h("searchcraft-error-message", { key: '75400c0a6f9d20f5c58ef0125f70a0ba8f2da920', errorMessage: 'Something went wrong.' }))), h("div", { key: '0978f74e9a83c78604c494fca9d8a885f73b5fff', class: 'searchcraft-input-wrapper' }, h("input", { key: '4a9f69a9e21c89c97daea9e4c19e41523c71e0f2', autoComplete: 'off', class: 'searchcraft-input', onFocus: () => this.inputFocus?.emit(), onBlur: () => this.inputBlur?.emit(), onInput: (event) => {
+        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: '9c215722544c132dc9e302c522d0f7c36c205b74', class: 'searchcraft-input-search-icon-wrapper' }, h("svg", { key: '4f6dfc2a89a888eafcd4aee6d02e40635c2fb78a', 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: '6be4ba3b739aeebd27e2ba0f3b7766c1ac6cf2e3', id: 'searchcraft-title' }, "Searchcraft Search Icon Light"), h("path", { key: 'd62f785b5bb2f261a3dbf8e4d91f2db405e36dc4', 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: '8ca5193982311991eb0bf30a200b5bee25688c54', type: 'button', class: 'searchcraft-input-clear-button', onClick: this.handleClearInput }, h("svg", { key: 'a929aee41d677e850a2568ee08a047f35711b4bf', 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: '60b50c641ab494c1e8f02f3e1fa19d0a41162859', id: 'icon-title' }, "Searchcraft Clear Input Icon Light"), h("path", { key: '6d47a20770f51f069efe06ee29c1451fd78de357', 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: '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 watchers() { return {
         "config": ["onConfigChange"]
@@ -281,4 +277,4 @@ function defineCustomElement() {
 
 export { SearchcraftInput as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-960ddc89.js.map
+//# sourceMappingURL=p-ae78be68.js.map

package/dist/components/p-ae78be68.js.map

@@ -0,0 +1 @@
+{"file":"p-ae78be68.js","mappings":"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","names":["SearchcraftCore"],"sources":["src/components/searchcraft-input-form/searchcraft-input-form.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Event,\n  type EventEmitter,\n  Watch,\n} from '@stencil/core';\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"],"version":3}

package/dist/components/p-bf6a086a.js

@@ -0,0 +1,92 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-5365011f.js';
+import { c as classNames } from './p-5cdc6210.js';
+import { p as parseCustomStyles } from './p-d9551738.js';
+
+const SearchcraftSelect = /*@__PURE__*/ proxyCustomElement(class SearchcraftSelect extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.selectChange = createEvent(this, "selectChange", 7);
+    }
+    /**
+     * The caption displayed below the select input.
+     */
+    caption;
+    /**
+     * Whether the select input is disabled.
+     */
+    disabled = false;
+    /**
+     * The ID for the select input.
+     */
+    inputId;
+    /**
+     * The label of the select input.
+     */
+    label;
+    /**
+     * The ID for the label of the select input.
+     */
+    labelId;
+    /**
+     * The name of the select input.
+     */
+    name;
+    /**
+     * The options for the select input.
+     */
+    options = [];
+    /**
+     * A custom styles object.
+     */
+    customStyles;
+    /**
+     * The event fired when the select is changed.
+     */
+    selectChange;
+    searchResultsPerPage;
+    setSearchResultsPage = () => { };
+    setSearchResultsPerPage = () => { };
+    handleSelectChange = (event) => {
+        this.selectChange.emit(event.target.value);
+    };
+    handleGoToPage(page) {
+        this.setSearchResultsPage(page);
+    }
+    render() {
+        return (h("div", { key: '5024d49d89a3649a5de591d37ded304a9dfb36d9', class: classNames('searchcraft-select', parseCustomStyles(this.customStyles || {})) }, this.label && (h("label", { key: '005aea9b190e5a6c041721e20395be23f76faab6', class: 'searchcraft-select-label', id: this.labelId || `${this.inputId}-label`, htmlFor: this.inputId }, this.label)), h("div", { key: '209d56844c0bcd241e73bafcad24fac927fe7ffa', class: 'searchcraft-select-input-wrapper' }, h("select", { key: '010c9e596ef45a303f84c0ac0fa54ab67556d7b6', "aria-labelledby": this.label ? this.labelId || `${this.inputId}-label` : undefined, class: 'searchcraft-select-input', disabled: this.disabled, id: this.inputId, name: this.name, onChange: this.handleSelectChange }, (typeof this.options === 'string'
+            ? JSON.parse(this.options)
+            : this.options).map(({ label, value, selected }) => {
+            return (h("option", { key: value, value: value, selected: selected }, label));
+        })), h("svg", { key: '51d9fb79381468ee0992475ba376df5a5961116c', class: 'searchcraft-select-input-icon', width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, h("title", { key: '59186138953557764915d41708d4bcc23a9bb97f' }, "Select dropdown icon"), h("path", { key: 'ec2c962df16cb68bdaf3e2c32e57d875a63957a9', d: 'M5 7.5L10 12.5L15 7.5', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), this.caption && (h("p", { key: '742bc2dbd8371938894d49bb37d429d1b7a07d7a', class: 'searchcraft-select-caption' }, this.caption))));
+    }
+}, [0, "searchcraft-select", {
+        "caption": [1],
+        "disabled": [4],
+        "inputId": [1, "input-id"],
+        "label": [1],
+        "labelId": [1, "label-id"],
+        "name": [1],
+        "options": [1],
+        "customStyles": [1, "custom-styles"],
+        "searchResultsPerPage": [32],
+        "setSearchResultsPage": [32],
+        "setSearchResultsPerPage": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-select"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftSelect);
+            }
+            break;
+    } });
+}
+
+export { SearchcraftSelect as S, defineCustomElement as d };
+
+//# sourceMappingURL=p-bf6a086a.js.map

package/dist/components/p-bf6a086a.js.map

@@ -0,0 +1 @@
+{"file":"p-bf6a086a.js","mappings":";;;;MAmCa,iBAAiB;;;;;;;;;IAIpB,OAAO,CAAU;;;;IAIjB,QAAQ,GAAa,KAAK,CAAC;;;;IAI3B,OAAO,CAAU;;;;IAIjB,KAAK,CAAU;;;;IAIf,OAAO,CAAU;;;;IAIjB,IAAI,CAAU;;;;IAId,OAAO,GAAuC,EAAE,CAAC;;;;IAIjD,YAAY,CAAU;;;;IAIrB,YAAY,CAAwB;IAEpC,oBAAoB,CAAC;IAErB,oBAAoB,GAA2B,SAAQ,CAAC;IACxD,uBAAuB,GAA8B,SAAQ,CAAC;IAE/D,kBAAkB,GAAG,CAAC,KAAK;QACjC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KAC5C,CAAC;IAEF,cAAc,CAAC,IAAY;QACzB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;KACjC;IAED,MAAM;QACJ,QACE,4DACE,KAAK,EAAE,UAAU,CACf,oBAAoB,EACpB,iBAAiB,CAAC,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAC3C,IAEA,IAAI,CAAC,KAAK,KACT,8DACE,KAAK,EAAC,0BAA0B,EAChC,EAAE,EAAE,IAAI,CAAC,OAAO,IAAI,GAAG,IAAI,CAAC,OAAO,QAAQ,EAC3C,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,KAAK,CACL,CACT,EACD,4DAAK,KAAK,EAAC,kCAAkC,IAC3C,kFAEI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,IAAI,GAAG,IAAI,CAAC,OAAO,QAAQ,GAAG,SAAS,EAElE,KAAK,EAAC,0BAA0B,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,kBAAkB,IAEhC,CAAC,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ;cAC9B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;cACxB,IAAI,CAAC,OAAO,EACd,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE;YAC/B,QACE,cAAQ,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,IACjD,KAAK,CACC,EACT;SACH,CAAC,CACK,EACT,4DACE,KAAK,EAAC,+BAA+B,EACrC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,IAElC,uFAAmC,EACnC,6DACE,CAAC,EAAC,uBAAuB,EACzB,MAAM,EAAC,cAAc,kBACR,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACF,EACL,IAAI,CAAC,OAAO,KACX,0DAAG,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,OAAO,CAAK,CACzD,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-select/searchcraft-select.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  State,\n  Prop,\n  type EventEmitter,\n  Event,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils';\n\nexport type SearchcraftSelectOption = {\n  label: string;\n  value: string | number;\n  selected?: boolean;\n};\n\n/**\n * This web component is designed to allow users to select between a group of options.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-select\n *  inputId=\"searchcraft-select\"\n *  name=\"searchcraft-select\"\n *  options=\"[{ label: 'label', value: 'value' }]\"\n * />\n * ```\n */\n@Component({\n  tag: 'searchcraft-select',\n  shadow: false,\n})\nexport class SearchcraftSelect {\n  /**\n   * The caption displayed below the select input.\n   */\n  @Prop() caption?: string;\n  /**\n   * Whether the select input is disabled.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The ID for the select input.\n   */\n  @Prop() inputId!: string;\n  /**\n   * The label of the select input.\n   */\n  @Prop() label?: string;\n  /**\n   * The ID for the label of the select input.\n   */\n  @Prop() labelId?: string;\n  /**\n   * The name of the select input.\n   */\n  @Prop() name!: string;\n  /**\n   * The options for the select input.\n   */\n  @Prop() options: SearchcraftSelectOption[] | string = [];\n  /**\n   * A custom styles object.\n   */\n  @Prop() customStyles?: string;\n  /**\n   * The event fired when the select is changed.\n   */\n  @Event() selectChange!: EventEmitter<string>;\n\n  @State() searchResultsPerPage;\n\n  @State() setSearchResultsPage: (page: number) => void = () => {};\n  @State() setSearchResultsPerPage: (perPage: number) => void = () => {};\n\n  private handleSelectChange = (event) => {\n    this.selectChange.emit(event.target.value);\n  };\n\n  handleGoToPage(page: number) {\n    this.setSearchResultsPage(page);\n  }\n\n  render() {\n    return (\n      <div\n        class={classNames(\n          'searchcraft-select',\n          parseCustomStyles(this.customStyles || {}),\n        )}\n      >\n        {this.label && (\n          <label\n            class='searchcraft-select-label'\n            id={this.labelId || `${this.inputId}-label`}\n            htmlFor={this.inputId}\n          >\n            {this.label}\n          </label>\n        )}\n        <div class='searchcraft-select-input-wrapper'>\n          <select\n            aria-labelledby={\n              this.label ? this.labelId || `${this.inputId}-label` : undefined\n            }\n            class='searchcraft-select-input'\n            disabled={this.disabled}\n            id={this.inputId}\n            name={this.name}\n            onChange={this.handleSelectChange}\n          >\n            {(typeof this.options === 'string'\n              ? JSON.parse(this.options)\n              : this.options\n            ).map(({ label, value, selected }) => {\n              return (\n                <option key={value} value={value} selected={selected}>\n                  {label}\n                </option>\n              );\n            })}\n          </select>\n          <svg\n            class='searchcraft-select-input-icon'\n            width='20'\n            height='20'\n            viewBox='0 0 20 20'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n          >\n            <title>Select dropdown icon</title>\n            <path\n              d='M5 7.5L10 12.5L15 7.5'\n              stroke='currentColor'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        </div>\n        {this.caption && (\n          <p class='searchcraft-select-caption'>{this.caption}</p>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-bff4d3fc.js

@@ -0,0 +1,65 @@
+import { p as proxyCustomElement, H, h } from './p-5365011f.js';
+
+const SearchcraftPopoverListItemAd = /*@__PURE__*/ proxyCustomElement(class SearchcraftPopoverListItemAd extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    adClientResponseItem;
+    connectedCallback() {
+        if (this.adClientResponseItem?.admAd?.impression_url) {
+            fetch(this.adClientResponseItem?.admAd?.impression_url);
+        }
+    }
+    renderADMProductAd() {
+        const ad = this.adClientResponseItem?.admAd;
+        if (!ad) {
+            return;
+        }
+        return (h("a", { class: 'searchcraft-popover-list-item-ad', href: ad.click_url }, ad.image_url && (h("div", { class: 'searchcraft-popover-list-item-ad-image-wrapper' }, h("img", { alt: ad.term, src: ad.image_url, class: 'searchcraft-popover-list-item-ad-image' }))), h("div", { class: 'searchcraft-popover-list-item-ad-info-wrapper' }, h("p", { class: 'searchcraft-popover-list-item-ad-title' }, ad.term), h("p", { class: 'searchcraft-popover-list-item-ad-subtitle' }, ad.price))));
+    }
+    renderADMTextAd() {
+        const ad = this.adClientResponseItem?.admAd;
+        if (!ad) {
+            return;
+        }
+        return (h("a", { class: 'searchcraft-popover-list-item-ad', href: ad.click_url }, ad.image_url && (h("div", { class: 'searchcraft-popover-list-item-ad-image-wrapper' }, h("img", { alt: ad.term, src: ad.image_url, class: 'searchcraft-popover-list-item-ad-image' }))), h("div", { class: 'searchcraft-popover-list-item-ad-info-wrapper' }, h("p", { class: 'searchcraft-popover-list-item-ad-title' }, ad.term))));
+    }
+    renderNativoAd() { }
+    renderAdPlaceholder() {
+        return h("p", null, "Ad placeholder");
+        // return;
+    }
+    render() {
+        if (!this.adClientResponseItem) {
+            return this.renderAdPlaceholder();
+        }
+        switch (this.adClientResponseItem.type) {
+            case 'adm-product-ad':
+                return this.renderADMProductAd();
+            case 'adm-text-ad':
+                return this.renderADMTextAd();
+            case 'nativo-ad':
+                return this.renderNativoAd();
+        }
+    }
+}, [0, "searchcraft-popover-list-item-ad", {
+        "adClientResponseItem": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-popover-list-item-ad"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-popover-list-item-ad":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftPopoverListItemAd);
+            }
+            break;
+    } });
+}
+
+export { SearchcraftPopoverListItemAd as S, defineCustomElement as d };
+
+//# sourceMappingURL=p-bff4d3fc.js.map

package/dist/components/p-bff4d3fc.js.map

@@ -0,0 +1 @@
+{"file":"p-bff4d3fc.js","mappings":";;MAca,4BAA4B;;;;;IAC/B,oBAAoB,CAAwB;IAEpD,iBAAiB;QACf,IAAI,IAAI,CAAC,oBAAoB,EAAE,KAAK,EAAE,cAAc,EAAE;YACpD,KAAK,CAAC,IAAI,CAAC,oBAAoB,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC;SACzD;KACF;IAED,kBAAkB;QAChB,MAAM,EAAE,GAAG,IAAI,CAAC,oBAAoB,EAAE,KAAqB,CAAC;QAC5D,IAAI,CAAC,EAAE,EAAE;YACP,OAAO;SACR;QAED,QACE,SAAG,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAE,EAAE,CAAC,SAAS,IAC3D,EAAE,CAAC,SAAS,KACX,WAAK,KAAK,EAAC,gDAAgD,IACzD,WACE,GAAG,EAAE,EAAE,CAAC,IAAI,EACZ,GAAG,EAAE,EAAE,CAAC,SAAS,EACjB,KAAK,EAAC,wCAAwC,GAC9C,CACE,CACP,EACD,WAAK,KAAK,EAAC,+CAA+C,IACxD,SAAG,KAAK,EAAC,wCAAwC,IAAE,EAAE,CAAC,IAAI,CAAK,EAC/D,SAAG,KAAK,EAAC,2CAA2C,IAAE,EAAE,CAAC,KAAK,CAAK,CAC/D,CACJ,EACJ;KACH;IAED,eAAe;QACb,MAAM,EAAE,GAAG,IAAI,CAAC,oBAAoB,EAAE,KAAkB,CAAC;QACzD,IAAI,CAAC,EAAE,EAAE;YACP,OAAO;SACR;QAED,QACE,SAAG,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAE,EAAE,CAAC,SAAS,IAC3D,EAAE,CAAC,SAAS,KACX,WAAK,KAAK,EAAC,gDAAgD,IACzD,WACE,GAAG,EAAE,EAAE,CAAC,IAAI,EACZ,GAAG,EAAE,EAAE,CAAC,SAAS,EACjB,KAAK,EAAC,wCAAwC,GAC9C,CACE,CACP,EACD,WAAK,KAAK,EAAC,+CAA+C,IACxD,SAAG,KAAK,EAAC,wCAAwC,IAAE,EAAE,CAAC,IAAI,CAAK,CAC3D,CACJ,EACJ;KACH;IAED,cAAc,MAAK;IAEnB,mBAAmB;QACjB,OAAO,8BAAqB,CAAC;;KAE9B;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC9B,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;SACnC;QAED,QAAQ,IAAI,CAAC,oBAAoB,CAAC,IAAI;YACpC,KAAK,gBAAgB;gBACnB,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACnC,KAAK,aAAa;gBAChB,OAAO,IAAI,CAAC,eAAe,EAAE,CAAC;YAChC,KAAK,WAAW;gBACd,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC;SAChC;KACF;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-popover-list-item-ad/searchcraft-popover-list-item-ad.tsx"],"sourcesContent":["import type {\n  AdClientResponseItem,\n  ADMProductAd,\n  ADMTextAd,\n} from '@searchcraft/core';\nimport { Component, h, Prop } from '@stencil/core';\n\n/**\n * A single list item rendered in a searchcraft-popover-list-view.\n */\n@Component({\n  tag: 'searchcraft-popover-list-item-ad',\n  shadow: false,\n})\nexport class SearchcraftPopoverListItemAd {\n  @Prop() adClientResponseItem?: AdClientResponseItem;\n\n  connectedCallback() {\n    if (this.adClientResponseItem?.admAd?.impression_url) {\n      fetch(this.adClientResponseItem?.admAd?.impression_url);\n    }\n  }\n\n  renderADMProductAd() {\n    const ad = this.adClientResponseItem?.admAd as ADMProductAd;\n    if (!ad) {\n      return;\n    }\n\n    return (\n      <a class='searchcraft-popover-list-item-ad' href={ad.click_url}>\n        {ad.image_url && (\n          <div class='searchcraft-popover-list-item-ad-image-wrapper'>\n            <img\n              alt={ad.term}\n              src={ad.image_url}\n              class='searchcraft-popover-list-item-ad-image'\n            />\n          </div>\n        )}\n        <div class='searchcraft-popover-list-item-ad-info-wrapper'>\n          <p class='searchcraft-popover-list-item-ad-title'>{ad.term}</p>\n          <p class='searchcraft-popover-list-item-ad-subtitle'>{ad.price}</p>\n        </div>\n      </a>\n    );\n  }\n\n  renderADMTextAd() {\n    const ad = this.adClientResponseItem?.admAd as ADMTextAd;\n    if (!ad) {\n      return;\n    }\n\n    return (\n      <a class='searchcraft-popover-list-item-ad' href={ad.click_url}>\n        {ad.image_url && (\n          <div class='searchcraft-popover-list-item-ad-image-wrapper'>\n            <img\n              alt={ad.term}\n              src={ad.image_url}\n              class='searchcraft-popover-list-item-ad-image'\n            />\n          </div>\n        )}\n        <div class='searchcraft-popover-list-item-ad-info-wrapper'>\n          <p class='searchcraft-popover-list-item-ad-title'>{ad.term}</p>\n        </div>\n      </a>\n    );\n  }\n\n  renderNativoAd() {}\n\n  renderAdPlaceholder() {\n    return <p>Ad placeholder</p>;\n    // return;\n  }\n\n  render() {\n    if (!this.adClientResponseItem) {\n      return this.renderAdPlaceholder();\n    }\n\n    switch (this.adClientResponseItem.type) {\n      case 'adm-product-ad':\n        return this.renderADMProductAd();\n      case 'adm-text-ad':\n        return this.renderADMTextAd();\n      case 'nativo-ad':\n        return this.renderNativoAd();\n    }\n  }\n}\n"],"version":3}

package/dist/components/{p-521fe971.js → p-d19bf6ff.js}

@@ -7,10 +7,18 @@ const SearchcraftButton = /*@__PURE__*/ proxyCustomElement(class SearchcraftButt
         this.__registerHost();
         this.buttonClick = createEvent(this, "buttonClick", 7);
     }
+    /**
+     * Controls the visual representation of the button.
+     */
+    hierarchy = 'primary';
+    /**
+     * Whether the button is disabled.
+     */
+    disabled = false;
     /**
      * The icon element.
      */
-    iconElement;
+    icon;
     /**
      * Should the button only display an icon.
      */
@@ -24,22 +32,31 @@ const SearchcraftButton = /*@__PURE__*/ proxyCustomElement(class SearchcraftButt
      */
     label = 'Search';
     /**
-     * When the button is clicked.
+     * The type of the button.
+     */
+    type = 'button';
+    /**
+     * The event fired when the button is clicked.
      */
     buttonClick;
-    isRequesting = false;
-    handleClick = () => {
+    handleButtonClick = () => {
         this.buttonClick.emit();
     };
     render() {
-        return (h(Fragment, { key: 'af99927e7c05f06ec9a63123c7f740a0e96e734b' }, this.iconOnly ? (h("button", { class: classNames('searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.isRequesting ? (h("searchcraft-spinner-dark", null)) : (this.iconElement))) : (h("button", { class: classNames('searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.iconPosition === 'left' && this.iconElement, h("span", { class: classNames('buttonLabel', 'searchcraft-button-label') }, this.label)))));
+        return (h("button", { key: 'fc258e1c7aab54611c781789eef7facc074f02c3', class: classNames('searchcraft-button', {
+                'searchcraft-button-primary': this.hierarchy === 'primary',
+                'searchcraft-button-tertiary': this.hierarchy === 'tertiary',
+                'searchcraft-button-disabled': this.disabled,
+            }), disabled: this.disabled, onClick: this.handleButtonClick, type: this.type }, this.iconOnly ? (this.icon) : (h(Fragment, null, this.iconPosition === 'left' && this.icon, h("span", null, this.label), this.iconPosition === 'right' && this.icon))));
     }
 }, [0, "searchcraft-button", {
-        "iconElement": [16],
+        "hierarchy": [1],
+        "disabled": [4],
+        "icon": [16],
         "iconOnly": [4, "icon-only"],
         "iconPosition": [1, "icon-position"],
         "label": [1],
-        "isRequesting": [32]
+        "type": [1]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
@@ -57,4 +74,4 @@ function defineCustomElement() {
 
 export { SearchcraftButton as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-521fe971.js.map
+//# sourceMappingURL=p-d19bf6ff.js.map

package/dist/components/p-d19bf6ff.js.map

@@ -0,0 +1 @@
+{"file":"p-d19bf6ff.js","mappings":";;;MAmBa,iBAAiB;;;;;;;;;IAIpB,SAAS,GAA4B,SAAS,CAAC;;;;IAI/C,QAAQ,GAAa,KAAK,CAAC;;;;IAI3B,IAAI,CAAW;;;;IAIf,QAAQ,GAAa,KAAK,CAAC;;;;IAI3B,YAAY,GAAsB,MAAM,CAAC;;;;IAIzC,KAAK,GAAG,QAAQ,CAAC;;;;IAIjB,IAAI,GAAmC,QAAQ,CAAC;;;;IAI/C,WAAW,CAAsB;IAElC,iBAAiB,GAAG;QAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB,CAAC;IAEF,MAAM;QACJ,QACE,+DACE,KAAK,EAAE,UAAU,CAAC,oBAAoB,EAAE;gBACtC,4BAA4B,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS;gBAC1D,6BAA6B,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU;gBAC5D,6BAA6B,EAAE,IAAI,CAAC,QAAQ;aAC7C,CAAC,EACF,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,IAEd,IAAI,CAAC,QAAQ,IACZ,IAAI,CAAC,IAAI,KAET,EAAC,QAAQ,QACN,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,EAC1C,gBAAO,IAAI,CAAC,KAAK,CAAQ,EACxB,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,CAClC,CACZ,CACM,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-button/searchcraft-button.tsx"],"sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component represents a button to be consumed within the `search-input-form` component.\n * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.\n * It is consumed within the `searchcraft-input-form` component.\n */\n@Component({\n  tag: 'searchcraft-button',\n  shadow: false,\n})\nexport class SearchcraftButton {\n  /**\n   * Controls the visual representation of the button.\n   */\n  @Prop() hierarchy?: 'primary' | 'tertiary' = 'primary';\n  /**\n   * Whether the button is disabled.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The icon element.\n   */\n  @Prop() icon?: Element;\n  /**\n   * Should the button only display an icon.\n   */\n  @Prop() iconOnly?: boolean = false;\n  /**\n   * The position of the icon.\n   */\n  @Prop() iconPosition?: 'left' | 'right' = 'left';\n  /**\n   * The label for the button.\n   */\n  @Prop() label = 'Search';\n  /**\n   * The type of the button.\n   */\n  @Prop() type?: 'submit' | 'reset' | 'button' = 'button';\n  /**\n   * The event fired when the button is clicked.\n   */\n  @Event() buttonClick!: EventEmitter<void>;\n\n  private handleButtonClick = () => {\n    this.buttonClick.emit();\n  };\n\n  render() {\n    return (\n      <button\n        class={classNames('searchcraft-button', {\n          'searchcraft-button-primary': this.hierarchy === 'primary',\n          'searchcraft-button-tertiary': this.hierarchy === 'tertiary',\n          'searchcraft-button-disabled': this.disabled,\n        })}\n        disabled={this.disabled}\n        onClick={this.handleButtonClick}\n        type={this.type}\n      >\n        {this.iconOnly ? (\n          this.icon\n        ) : (\n          <Fragment>\n            {this.iconPosition === 'left' && this.icon}\n            <span>{this.label}</span>\n            {this.iconPosition === 'right' && this.icon}\n          </Fragment>\n        )}\n      </button>\n    );\n  }\n}\n"],"version":3}