@searchcraft/javascript-sdk 0.3.1 → 0.4.1

package/dist/collection/components/searchcraft-base-search-results/searchcraft-base-search-results.js

@@ -1,28 +1,24 @@
 import { h, } from "@stencil/core";
-import classNames from "classnames";
 import { useSearchcraftStore } from "../../provider/store";
-import { extractDynamicProperties, getFormattedTimeFromNow, parseSearchKeys, serializeStyles, } from "../../utils/utils";
+import { getDocumentValueFromSearchResultMapping, serializeStyles, } from "../../utils/utils";
 export class SearchcraftBaseSearchResults {
     constructor() {
         this.adInterval = 4;
-        this.customStylesForResults = {};
-        this.documentAttributesForDisplay = '';
-        this.fallbackElement = null;
-        this.formatTime = true;
+        this.customStylesForResults = undefined;
+        this.searchResultMappings = undefined;
         this.placeAdAtEnd = false;
         this.placeAdAtStart = true;
-        this.placeResultImageRight = false;
-        this.isInteractive = false;
+        this.resultImagePlacement = 'right';
+        this.buttonLabel = undefined;
+        this.buttonTarget = '_blank';
+        this.buttonRel = undefined;
+        this.containerTarget = '_blank';
+        this.containerRel = undefined;
         this.hasSearched = false;
         this.query = '';
         this.searchResults = null;
     }
     componentDidLoad() {
-        if (!this.documentAttributesForDisplay ||
-            this.documentAttributesForDisplay.length === 0) {
-            console.warn('No document attributes provided; using empty keys array.');
-            this.documentAttributesForDisplay = '';
-        }
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
             if (state.query.length > 0) {
                 this.hasSearched = true;
@@ -42,57 +38,58 @@ export class SearchcraftBaseSearchResults {
             this.unsubscribe();
         }
     }
+    renderDocument(document, index) {
+        /**
+         * Index field values -> Result container props mappings.
+         */
+        const titleContent = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.title);
+        const subtitleContent = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.subtitle);
+        const bodyContent = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.body);
+        const containerHref = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.containerHref);
+        const buttonHref = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.buttonHref);
+        const imageSource = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.imageSource);
+        const footerContent = getDocumentValueFromSearchResultMapping(document, this.searchResultMappings.footer);
+        const serializedStyles = typeof this.customStylesForResults === 'string'
+            ? this.customStylesForResults
+            : serializeStyles(this.customStylesForResults);
+        return (h("searchcraft-base-search-result", { key: `${document.document_id}-${index}`, "custom-styles": serializedStyles, "image-placement": this.resultImagePlacement, "container-rel": this.containerRel, "container-target": this.containerTarget, "button-label": this.buttonLabel || 'View more', "button-rel": this.buttonRel, "button-target": this.buttonTarget, "document-position": index, "title-content": titleContent, "subtitle-content": subtitleContent, "body-content": bodyContent, "footer-content": footerContent, "container-href": containerHref, "button-href": buttonHref, "image-src": imageSource }));
+    }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        if (!this.hasSearched) {
-            return (h("div", { class: classNames('emptyState', 'searchcraft-search-results-empty-state-container') }, h("slot", { name: 'empty-search' })));
+        if (this.query.trim() === '') {
+            return (h("div", { class: 'searchcraft-search-results-empty-state-container' }, h("slot", { name: 'empty-search' })));
         }
         if (!((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data)) {
             return;
         }
-        const parsedSearchKeys = parseSearchKeys(this.documentAttributesForDisplay);
-        const serializedStyles = typeof this.customStylesForResults === 'string'
-            ? this.customStylesForResults
-            : serializeStyles(this.customStylesForResults);
-        const resultsComponents = (_d = (_c = (_b = this.searchResults) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.hits) === null || _d === void 0 ? void 0 : _d.map((document, index) => {
-            const { doc: result } = document;
-            const dynamicProperties = extractDynamicProperties(result, parsedSearchKeys);
-            if (this.formatTime) {
-                for (const key of parsedSearchKeys) {
-                    if (dynamicProperties[key]) {
-                        const value = dynamicProperties[key];
-                        if (typeof value === 'string' &&
-                            !Number.isNaN(Date.parse(value))) {
-                            dynamicProperties[key] = getFormattedTimeFromNow(value);
-                        }
-                    }
-                }
-            }
-            return (h("searchcraft-base-search-result", { "button-callback": () => console.log('button callback'), "custom-styles": serializedStyles, "image-source": dynamicProperties[parsedSearchKeys[5]], "is-interactive": this.isInteractive, key: `${document.document_id}-${index}`, "keydown-callback": () => console.log('keydown'), linkHref: dynamicProperties[parsedSearchKeys[6]], "place-image-right": this.placeResultImageRight, "primary-content": dynamicProperties[parsedSearchKeys[2]], "result-callback": () => console.log('interactive element'), "secondary-content": dynamicProperties[parsedSearchKeys[3]], "subtitle-content": dynamicProperties[parsedSearchKeys[1]], "tertiary-content": dynamicProperties[parsedSearchKeys[4]], "title-content": dynamicProperties[parsedSearchKeys[0]], "document-position": index }));
+        const documents = (_d = (_c = (_b = this.searchResults) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.hits) === null || _d === void 0 ? void 0 : _d.map((data, _index) => {
+            const { doc: result } = data;
+            return result;
         });
         const finalComponents = [];
         if (this.placeAdAtStart) {
-            finalComponents.push(h("div", { key: 'ad-section-start', class: classNames('adSection', 'searchcraft-beginning-injected-ad-section') }, h("span", null, "##"), h("p", null, " Ad Impressions")));
+            finalComponents.push(h("div", { key: 'ad-section-start', class: 'searchcraft-ad-section' }, h("p", null, "Ad Section")));
         }
         if (this.adInterval > 0) {
-            resultsComponents.forEach((component, index) => {
-                finalComponents.push(component);
+            documents.forEach((document, index) => {
+                finalComponents.push(this.renderDocument(document, index));
                 if ((index + 1) % this.adInterval === 0) {
-                    finalComponents.push(h("div", { key: `ad-section-${index + 1}`, class: classNames('adSection', 'searchcraft-dynamic-injected-ad-section') }, h("span", null, "##"), h("p", null, " Ad Impressions")));
+                    finalComponents.push(h("div", { key: `ad-section-${index + 1}`, class: 'searchcraft-ad-section ' }, h("p", null, "Ad Section")));
                 }
             });
         }
         else {
-            finalComponents.push(...resultsComponents);
+            const documentElements = documents.map((document, index) => this.renderDocument(document, index));
+            finalComponents.push(...documentElements);
         }
         if (this.placeAdAtEnd) {
-            finalComponents.push(h("div", { key: 'ad-section-end', class: classNames('adSection', 'searchcraft-end-injected-ad-section') }, h("span", null, "##"), h("p", null, " Ad Impressions")));
+            finalComponents.push(h("div", { key: 'ad-section-end', class: 'searchcraft-ad-section' }, h("p", null, "Ad Section")));
         }
         if (this.query.length > 0 && ((_g = (_f = (_e = this.searchResults) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.hits) === null || _g === void 0 ? void 0 : _g.length) === 0) {
             this.noResults.emit();
         }
-        return (h("div", { class: classNames('resultsContainer', 'searchcraft-search-results-container') }, finalComponents, this.query.length > 0 &&
-            ((_k = (_j = (_h = this.searchResults) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.hits) === null || _k === void 0 ? void 0 : _k.length) === 0 && (h("div", { class: classNames('errorMessageContainer', 'searchcraft-search-results-error-message-container') }, h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` })))));
+        return (h("div", { class: 'searchcraft-search-results-container' }, finalComponents, this.query.length > 0 &&
+            ((_k = (_j = (_h = this.searchResults) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.hits) === null || _k === void 0 ? void 0 : _k.length) === 0 && (h("div", { class: 'searchcraft-search-results-error-message-container' }, h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` })))));
     }
     static get is() { return "searchcraft-base-search-results"; }
     static get originalStyleUrls() {
@@ -129,7 +126,7 @@ export class SearchcraftBaseSearchResults {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "| string\n    | Record<string, Record<string, string>>",
+                    "original": "| string\n    | Record<string, Record<string, string>>\n    | undefined",
                     "resolved": "string | { [x: string]: Record<string, string>; }",
                     "references": {
                         "Record": {
@@ -145,39 +142,36 @@ export class SearchcraftBaseSearchResults {
                     "text": ""
                 },
                 "attribute": "custom-styles-for-results",
-                "reflect": false,
-                "defaultValue": "{}"
+                "reflect": false
             },
-            "documentAttributesForDisplay": {
-                "type": "string",
+            "searchResultMappings": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "SearchResultMappings | undefined",
+                    "resolved": "{ body?: SearchResultMapping; buttonHref?: SearchResultMapping; containerHref?: SearchResultMapping; footer?: SearchResultMapping; imageSource?: SearchResultMapping; subtitle?: SearchResultMapping; title?: SearchResultMapping; }",
+                    "references": {
+                        "SearchResultMappings": {
+                            "location": "import",
+                            "path": "types",
+                            "id": "src/types/index.ts::SearchResultMappings"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
-                },
-                "attribute": "document-attributes-for-display",
-                "reflect": false,
-                "defaultValue": "''"
+                }
             },
-            "fallbackElement": {
-                "type": "unknown",
+            "placeAdAtEnd": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "HTMLElement | null",
-                    "resolved": "HTMLElement",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
@@ -185,9 +179,11 @@ export class SearchcraftBaseSearchResults {
                     "tags": [],
                     "text": ""
                 },
-                "defaultValue": "null"
+                "attribute": "place-ad-at-end",
+                "reflect": false,
+                "defaultValue": "false"
             },
-            "formatTime": {
+            "placeAdAtStart": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -201,16 +197,16 @@ export class SearchcraftBaseSearchResults {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "format-time",
+                "attribute": "place-ad-at-start",
                 "reflect": false,
                 "defaultValue": "true"
             },
-            "placeAdAtEnd": {
-                "type": "boolean",
+            "resultImagePlacement": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
                     "references": {}
                 },
                 "required": false,
@@ -219,16 +215,16 @@ export class SearchcraftBaseSearchResults {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "place-ad-at-end",
+                "attribute": "result-image-placement",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "'right'"
             },
-            "placeAdAtStart": {
-                "type": "boolean",
+            "buttonLabel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -237,16 +233,15 @@ export class SearchcraftBaseSearchResults {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "place-ad-at-start",
-                "reflect": false,
-                "defaultValue": "true"
+                "attribute": "button-label",
+                "reflect": false
             },
-            "placeResultImageRight": {
-                "type": "boolean",
+            "buttonTarget": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'_blank' | '_self' | '_top' | '_parent'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
                     "references": {}
                 },
                 "required": false,
@@ -255,16 +250,33 @@ export class SearchcraftBaseSearchResults {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "place-result-image-right",
+                "attribute": "button-target",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "'_blank'"
             },
-            "isInteractive": {
-                "type": "boolean",
+            "buttonRel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'noreferrer' | 'noopener' | 'nofollow' | undefined",
+                    "resolved": "\"nofollow\" | \"noopener\" | \"noreferrer\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "button-rel",
+                "reflect": false
+            },
+            "containerTarget": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_blank' | '_self' | '_top' | '_parent'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
                     "references": {}
                 },
                 "required": false,
@@ -273,9 +285,26 @@ export class SearchcraftBaseSearchResults {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "is-interactive",
+                "attribute": "container-target",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "'_blank'"
+            },
+            "containerRel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'noreferrer' | 'noopener' | 'nofollow' | undefined",
+                    "resolved": "\"nofollow\" | \"noopener\" | \"noreferrer\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "container-rel",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/searchcraft-base-search-results/searchcraft-base-search-results.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-base-search-results.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Event,\n  Prop,\n  State,\n  type EventEmitter,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport {\n  extractDynamicProperties,\n  getFormattedTimeFromNow,\n  parseSearchKeys,\n  serializeStyles,\n} from '@utils/utils';\n\n@Component({\n  tag: 'searchcraft-base-search-results',\n  styleUrl: 'searchcraft-base-search-results.module.scss',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchResults {\n  @Prop() adInterval = 4;\n  @Prop() customStylesForResults:\n    | string\n    | Record<string, Record<string, string>> = {};\n  @Prop() documentAttributesForDisplay = '';\n  @Prop() fallbackElement: HTMLElement | null = null;\n  @Prop() formatTime = true;\n  @Prop() placeAdAtEnd = false;\n  @Prop() placeAdAtStart = true;\n  @Prop() placeResultImageRight = false;\n  @Prop() isInteractive = false;\n\n  @Event() noResults: EventEmitter<void>;\n\n  @State() hasSearched = false;\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  private unsubscribe: () => void;\n\n  componentDidLoad() {\n    if (\n      !this.documentAttributesForDisplay ||\n      this.documentAttributesForDisplay.length === 0\n    ) {\n      console.warn('No document attributes provided; using empty keys array.');\n      this.documentAttributesForDisplay = '';\n    }\n\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (state.query.length > 0) {\n        this.hasSearched = true;\n      } else {\n        this.hasSearched = false;\n      }\n      this.searchResults = { ...state.searchResults };\n      this.query = state.query;\n    });\n\n    const { searchResults, query } = useSearchcraftStore.getState();\n    this.searchResults = searchResults;\n    this.query = query;\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.hasSearched) {\n      return (\n        <div\n          class={classNames(\n            'emptyState',\n            'searchcraft-search-results-empty-state-container',\n          )}\n        >\n          <slot name='empty-search' />\n        </div>\n      );\n    }\n\n    if (!this.searchResults?.data) {\n      return;\n    }\n\n    const parsedSearchKeys = parseSearchKeys(this.documentAttributesForDisplay);\n    const serializedStyles =\n      typeof this.customStylesForResults === 'string'\n        ? this.customStylesForResults\n        : serializeStyles(this.customStylesForResults);\n\n    const resultsComponents = this.searchResults?.data?.hits?.map(\n      (document, index) => {\n        const { doc: result } = document;\n        const dynamicProperties = extractDynamicProperties(\n          result,\n          parsedSearchKeys,\n        );\n\n        if (this.formatTime) {\n          for (const key of parsedSearchKeys) {\n            if (dynamicProperties[key]) {\n              const value = dynamicProperties[key];\n              if (\n                typeof value === 'string' &&\n                !Number.isNaN(Date.parse(value))\n              ) {\n                dynamicProperties[key] = getFormattedTimeFromNow(value);\n              }\n            }\n          }\n        }\n\n        return (\n          <searchcraft-base-search-result\n            button-callback={() => console.log('button callback')}\n            custom-styles={serializedStyles}\n            image-source={dynamicProperties[parsedSearchKeys[5]]}\n            is-interactive={this.isInteractive}\n            key={`${document.document_id}-${index}`}\n            keydown-callback={() => console.log('keydown')}\n            linkHref={dynamicProperties[parsedSearchKeys[6]] as string}\n            place-image-right={this.placeResultImageRight}\n            primary-content={dynamicProperties[parsedSearchKeys[2]]}\n            result-callback={() => console.log('interactive element')}\n            secondary-content={dynamicProperties[parsedSearchKeys[3]]}\n            subtitle-content={dynamicProperties[parsedSearchKeys[1]]}\n            tertiary-content={dynamicProperties[parsedSearchKeys[4]]}\n            title-content={dynamicProperties[parsedSearchKeys[0]]}\n            document-position={index}\n          />\n        );\n      },\n    );\n\n    const finalComponents: JSX.Element[] = [];\n\n    if (this.placeAdAtStart) {\n      finalComponents.push(\n        <div\n          key='ad-section-start'\n          class={classNames(\n            'adSection',\n            'searchcraft-beginning-injected-ad-section',\n          )}\n        >\n          <span>##</span>\n          <p> Ad Impressions</p>\n        </div>,\n      );\n    }\n\n    if (this.adInterval > 0) {\n      resultsComponents.forEach((component, index) => {\n        finalComponents.push(component);\n        if ((index + 1) % this.adInterval === 0) {\n          finalComponents.push(\n            <div\n              key={`ad-section-${index + 1}`}\n              class={classNames(\n                'adSection',\n                'searchcraft-dynamic-injected-ad-section',\n              )}\n            >\n              <span>##</span>\n              <p> Ad Impressions</p>\n            </div>,\n          );\n        }\n      });\n    } else {\n      finalComponents.push(...resultsComponents);\n    }\n\n    if (this.placeAdAtEnd) {\n      finalComponents.push(\n        <div\n          key='ad-section-end'\n          class={classNames('adSection', 'searchcraft-end-injected-ad-section')}\n        >\n          <span>##</span>\n          <p> Ad Impressions</p>\n        </div>,\n      );\n    }\n\n    if (this.query.length > 0 && this.searchResults?.data?.hits?.length === 0) {\n      this.noResults.emit();\n    }\n\n    return (\n      <div\n        class={classNames(\n          'resultsContainer',\n          'searchcraft-search-results-container',\n        )}\n      >\n        {finalComponents}\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <div\n              class={classNames(\n                'errorMessageContainer',\n                'searchcraft-search-results-error-message-container',\n              )}\n            >\n              <searchcraft-error-message\n                error-message={`No search results found for \"${this.query}\" query`}\n              />\n            </div>\n          )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-base-search-results.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Event,\n  Prop,\n  State,\n  type EventEmitter,\n} from '@stencil/core';\n\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport {\n  getDocumentValueFromSearchResultMapping,\n  serializeStyles,\n} from '@utils/utils';\nimport type { SearchResultMappings } from 'types';\n\n@Component({\n  tag: 'searchcraft-base-search-results',\n  styleUrl: 'searchcraft-base-search-results.module.scss',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchResults {\n  @Prop() adInterval = 4;\n  @Prop() customStylesForResults:\n    | string\n    | Record<string, Record<string, string>>\n    | undefined;\n  @Prop() searchResultMappings: SearchResultMappings | undefined;\n  @Prop() placeAdAtEnd = false;\n  @Prop() placeAdAtStart = true;\n  @Prop() resultImagePlacement: 'left' | 'right' = 'right';\n  @Prop() buttonLabel: string | undefined;\n  @Prop() buttonTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  @Prop() buttonRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  @Prop() containerTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  @Prop() containerRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n\n  @Event() noResults: EventEmitter<void>;\n\n  @State() hasSearched = false;\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  private unsubscribe: () => void;\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (state.query.length > 0) {\n        this.hasSearched = true;\n      } else {\n        this.hasSearched = false;\n      }\n      this.searchResults = { ...state.searchResults };\n      this.query = state.query;\n    });\n\n    const { searchResults, query } = useSearchcraftStore.getState();\n    this.searchResults = searchResults;\n    this.query = query;\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  renderDocument(document: Record<string, unknown>, index: number) {\n    /**\n     * Index field values -> Result container props mappings.\n     */\n    const titleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.title,\n    );\n    const subtitleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.subtitle,\n    );\n    const bodyContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.body,\n    );\n    const containerHref = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.containerHref,\n    );\n    const buttonHref = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.buttonHref,\n    );\n    const imageSource = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.imageSource,\n    );\n    const footerContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.searchResultMappings.footer,\n    );\n\n    const serializedStyles =\n      typeof this.customStylesForResults === 'string'\n        ? this.customStylesForResults\n        : serializeStyles(this.customStylesForResults);\n\n    return (\n      <searchcraft-base-search-result\n        key={`${document.document_id}-${index}`}\n        custom-styles={serializedStyles}\n        image-placement={this.resultImagePlacement}\n        container-rel={this.containerRel}\n        container-target={this.containerTarget}\n        button-label={this.buttonLabel || 'View more'}\n        button-rel={this.buttonRel}\n        button-target={this.buttonTarget}\n        document-position={index}\n        title-content={titleContent}\n        subtitle-content={subtitleContent}\n        body-content={bodyContent}\n        footer-content={footerContent}\n        container-href={containerHref}\n        button-href={buttonHref}\n        image-src={imageSource}\n      />\n    );\n  }\n\n  render() {\n    if (this.query.trim() === '') {\n      return (\n        <div class='searchcraft-search-results-empty-state-container'>\n          <slot name='empty-search' />\n        </div>\n      );\n    }\n\n    if (!this.searchResults?.data) {\n      return;\n    }\n\n    const documents: Record<string, unknown>[] =\n      this.searchResults?.data?.hits?.map((data, _index) => {\n        const { doc: result } = data;\n        return result;\n      });\n\n    const finalComponents: JSX.Element[] = [];\n\n    if (this.placeAdAtStart) {\n      finalComponents.push(\n        <div key='ad-section-start' class='searchcraft-ad-section'>\n          <p>Ad Section</p>\n        </div>,\n      );\n    }\n\n    if (this.adInterval > 0) {\n      documents.forEach((document, index) => {\n        finalComponents.push(this.renderDocument(document, index));\n\n        if ((index + 1) % this.adInterval === 0) {\n          finalComponents.push(\n            <div\n              key={`ad-section-${index + 1}`}\n              class='searchcraft-ad-section '\n            >\n              <p>Ad Section</p>\n            </div>,\n          );\n        }\n      });\n    } else {\n      const documentElements = documents.map((document, index) =>\n        this.renderDocument(document, index),\n      );\n      finalComponents.push(...documentElements);\n    }\n\n    if (this.placeAdAtEnd) {\n      finalComponents.push(\n        <div key='ad-section-end' class='searchcraft-ad-section'>\n          <p>Ad Section</p>\n        </div>,\n      );\n    }\n\n    if (this.query.length > 0 && this.searchResults?.data?.hits?.length === 0) {\n      this.noResults.emit();\n    }\n\n    return (\n      <div class='searchcraft-search-results-container'>\n        {finalComponents}\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <div class='searchcraft-search-results-error-message-container'>\n              <searchcraft-error-message\n                error-message={`No search results found for \"${this.query}\" query`}\n              />\n            </div>\n          )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-base-search-results/searchcraft-base-search-results.module.css

@@ -1,47 +1,129 @@
 :root {
-  --font-stack: Helvetica, Arial, sans-serif;
+  /** Appearance & Layout */
+  --sc-spinner-size: 20px;
+  --sc-input-border-radius: 8px;
+  --sc-input-search-icon-size: 20px;
+  --sc-input-clear-icon-size: 20px;
+  --sc-input-padding-left: 44px;
+  --sc-input-padding-right: 44px;
+  --sc-image-border-radius: 8px;
 }
 
-.resultsContainer {
+:root {
+  --sc-surface-disabled: #D9D9D9;
+  --sc-surface-neutral-primary: #FFFFFF;
+  --sc-surface-neutral-secondary: #F3F3F3;
+  --sc-surface-neutral-light: #FFFFFF;
+  --sc-surface-neutral-primary-hover: #FAFAFA;
+  --sc-surface-neutral-primary-active: #F7F7F7;
+  --sc-surface-neutral-secondary-hover: #EDEDED;
+  --sc-surface-neutral-secondary-active: #E6E6E6;
+  --sc-surface-brand-primary: #000000;
+  --sc-surface-brand-secondary: #E6E6E6;
+  --sc-surface-brand-primary-hover: #2E2E2E;
+  --sc-surface-brand-primary-active: #292929;
+  --sc-surface-brand-secondary-hover: #EBEBEB;
+  --sc-surface-brand-secondary-active: #E0E0E0;
+  --sc-surface-success-primary: #008000;
+  --sc-surface-success-secondary: #CCFFCC;
+  --sc-surface-success-primary-hover: #009900;
+  --sc-surface-success-primary-active: #006600;
+  --sc-surface-success-secondary-hover: #E6FFE6;
+  --sc-surface-success-secondary-active: #E6FFE6;
+  --sc-surface-caution-primary: #CC6600;
+  --sc-surface-caution-secondary: #FFD9B3;
+  --sc-surface-caution-primary-hover: #E57300;
+  --sc-surface-caution-primary-active: #B25A00;
+  --sc-surface-caution-secondary-hover: #FFE5CC;
+  --sc-surface-caution-secondary-active: #FFCC99;
+  --sc-surface-danger-primary: #CC0000;
+  --sc-surface-danger-secondary: #FFCCCC;
+  --sc-surface-danger-primary-hover: #E50000;
+  --sc-surface-danger-primary-active: #B30000;
+  --sc-surface-danger-secondary-hover: #FFE7E7;
+  --sc-surface-danger-secondary-active: #FFB3B3;
+  --sc-content-brand: #000000;
+  --sc-content-success: #008000;
+  --sc-content-caution: #994D00;
+  --sc-content-danger: #990000;
+  --sc-content-disabled: #737373;
+  --sc-content-neutral-primary: #292929;
+  --sc-content-neutral-secondary: #404040;
+  --sc-content-brand-on-primary: #FFFFFF;
+  --sc-content-success-on-primary: #FFFFFF;
+  --sc-content-caution-on-primary: #FFFFFF;
+  --sc-content-danger-on-primary: #FFFFFF;
+  --sc-content-disabled-on-disabled: #737373;
+  --sc-border-neutral: rgba(0,0,0, 0.1);
+  --sc-border-brand: #000000;
+  --sc-border-success: #008000;
+  --sc-border-caution: #CC6600;
+  --sc-border-danger: #CC0000;
+  --sc-border-disabled: #737373;
+}
+
+:root {
+  /** Typography */
+  --sc-font-family: sans-serif;
+  --sc-heading-1-font-size: 32px;
+  --sc-heading-1-line-height: 36px;
+  --sc-heading-1-font-weight: 700;
+  --sc-heading-2-font-size: 29px;
+  --sc-heading-2-line-height: 32px;
+  --sc-heading-2-font-weight: 700;
+  --sc-heading-3-font-size: 26px;
+  --sc-heading-3-line-height: 28px;
+  --sc-heading-3-font-weight: 700;
+  --sc-heading-4-font-size: 23px;
+  --sc-heading-4-line-height: 24px;
+  --sc-heading-4-font-weight: 700;
+  --sc-heading-5-font-size: 20px;
+  --sc-heading-5-line-height: 24px;
+  --sc-heading-5-font-weight: 700;
+  --sc-heading-6-font-size: 10px;
+  --sc-heading-6-line-height: 12px;
+  --sc-heading-6-font-weight: 700;
+  --sc-body-bold-font-size: 16px;
+  --sc-body-bold-line-height: 20px;
+  --sc-body-bold-font-weight: 700;
+  --sc-body-font-size: 16px;
+  --sc-body-line-height: 20px;
+  --sc-body-font-weight:400;
+  --sc-body-small-bold-font-size: 12px;
+  --sc-body-small-bold-line-height: 16px;
+  --sc-body-small-bold-font-weight: 700;
+  --sc-body-small-font-size: 12px;
+  --sc-body-small-line-height: 16px;
+  --sc-body-small-font-weight: 400;
+}
+
+.searchcraft-search-results-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin: 16px 0;
-}
-.resultsContainer > p {
-  align-self: center;
-}
-.resultsContainer > div {
-  margin-bottom: 20px;
-}
-.resultsContainer > div img {
-  height: 300px;
-  width: 200px;
+  gap: 16px;
 }
 
-.adSection {
+.searchcraft-ad-section {
   align-items: center;
   background-color: #F1F1F1;
-  border: 1px solid #DCDDDE;
   border-radius: 16px;
   display: flex;
   flex-direction: column;
   font-size: 16px;
   justify-content: center;
-  margin: auto;
-  min-height: 150px;
+  min-height: 176px;
   text-align: center;
-  width: 100%;
 }
-.adSection p {
-  margin-top: 5px;
+.searchcraft-ad-section p {
+  margin: 0;
+  color: var(--sc-content-disabled);
 }
 
-.emptyState {
+.searchcraft-search-results-empty-state-container {
   text-align: center;
-  width: 100%;
 }
 
-.errorMessageContainer {
+.searchcraft-search-results-error-message-container {
   text-align: center;
 }

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

@@ -10,14 +10,9 @@ export class SearchcraftButton {
         this.iconPosition = 'left';
         this.label = 'Search';
         this.isRequesting = false;
-        this.theme = 'light';
-    }
-    getButtonStyle() {
-        return this.theme === 'light' ? 'buttonLight' : 'buttonDark';
     }
     render() {
-        const buttonStyle = this.getButtonStyle();
-        return (h(Fragment, { key: '1c0e279606587cb454892dad1634f4a60dd42757' }, this.iconOnly ? (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.isRequesting ? (h("searchcraft-spinner-dark", null)) : (this.iconElement))) : (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.iconPosition === 'left' && this.iconElement, h("span", { class: classNames('buttonLabel', 'searchcraft-button-label') }, this.label)))));
+        return (h(Fragment, { key: '9310049798538e49e52a11b846aec6a57d4ddd58' }, 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)))));
     }
     static get is() { return "searchcraft-button"; }
     static get originalStyleUrls() {
@@ -110,8 +105,7 @@ export class SearchcraftButton {
     }
     static get states() {
         return {
-            "isRequesting": {},
-            "theme": {}
+            "isRequesting": {}
         };
     }
     static get events() {

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

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-button.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-button/searchcraft-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,KAAK,EACL,QAAQ,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,iBAAiB;;QAepB,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC;;wBAfiB,KAAK;4BACD,MAAM;qBACb,QAAQ;4BAIA,KAAK;qBACZ,OAAO;;IAEhB,cAAc;QACpB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC;IAC/D,CAAC;IAMD,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,OAAO,CACL,EAAC,QAAQ,uDACN,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,cACE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,oBAAoB,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,mCAA4B,CAC7B,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,WAAW,CACjB,CACM,CACV,CAAC,CAAC,CAAC,CACF,cACE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,oBAAoB,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ;YAEZ,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW;YACjD,YAAM,KAAK,EAAE,UAAU,CAAC,aAAa,EAAE,0BAA0B,CAAC,IAC/D,IAAI,CAAC,KAAK,CACN,CACA,CACV,CACQ,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  State,\n  Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-button',\n  styleUrl: 'searchcraft-button.module.scss',\n  shadow: false,\n})\nexport class SearchcraftButton {\n  @Prop() iconElement?: Element;\n  @Prop() iconOnly = false;\n  @Prop() iconPosition = 'left';\n  @Prop() label = 'Search';\n\n  @Event() buttonClick!: EventEmitter<void>;\n\n  @State() isRequesting = false;\n  @State() theme = 'light';\n\n  private getButtonStyle() {\n    return this.theme === 'light' ? 'buttonLight' : 'buttonDark';\n  }\n\n  private handleClick = () => {\n    this.buttonClick.emit();\n  };\n\n  render() {\n    const buttonStyle = this.getButtonStyle();\n\n    return (\n      <Fragment>\n        {this.iconOnly ? (\n          <button\n            class={classNames(buttonStyle, 'searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.isRequesting ? (\n              <searchcraft-spinner-dark />\n            ) : (\n              this.iconElement\n            )}\n          </button>\n        ) : (\n          <button\n            class={classNames(buttonStyle, 'searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.iconPosition === 'left' && this.iconElement}\n            <span class={classNames('buttonLabel', 'searchcraft-button-label')}>\n              {this.label}\n            </span>\n          </button>\n        )}\n      </Fragment>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-button.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-button/searchcraft-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,KAAK,EACL,QAAQ,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,iBAAiB;;QAUpB,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC;;wBAViB,KAAK;4BACD,MAAM;qBACb,QAAQ;4BAIA,KAAK;;IAM7B,MAAM;QACJ,OAAO,CACL,EAAC,QAAQ,uDACN,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,cACE,KAAK,EAAE,UAAU,CAAC,oBAAoB,CAAC,EACvC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,mCAA4B,CAC7B,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,WAAW,CACjB,CACM,CACV,CAAC,CAAC,CAAC,CACF,cACE,KAAK,EAAE,UAAU,CAAC,oBAAoB,CAAC,EACvC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ;YAEZ,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW;YACjD,YAAM,KAAK,EAAE,UAAU,CAAC,aAAa,EAAE,0BAA0B,CAAC,IAC/D,IAAI,CAAC,KAAK,CACN,CACA,CACV,CACQ,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  State,\n  Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-button',\n  styleUrl: 'searchcraft-button.module.scss',\n  shadow: false,\n})\nexport class SearchcraftButton {\n  @Prop() iconElement?: Element;\n  @Prop() iconOnly = false;\n  @Prop() iconPosition = 'left';\n  @Prop() label = 'Search';\n\n  @Event() buttonClick!: EventEmitter<void>;\n\n  @State() isRequesting = false;\n\n  private handleClick = () => {\n    this.buttonClick.emit();\n  };\n\n  render() {\n    return (\n      <Fragment>\n        {this.iconOnly ? (\n          <button\n            class={classNames('searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.isRequesting ? (\n              <searchcraft-spinner-dark />\n            ) : (\n              this.iconElement\n            )}\n          </button>\n        ) : (\n          <button\n            class={classNames('searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.iconPosition === 'left' && this.iconElement}\n            <span class={classNames('buttonLabel', 'searchcraft-button-label')}>\n              {this.label}\n            </span>\n          </button>\n        )}\n      </Fragment>\n    );\n  }\n}\n"]}