@searchcraft/javascript-sdk 0.2.8 → 0.2.9

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

@@ -0,0 +1,224 @@
+@charset "UTF-8";
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.interactiveResultContainerLight {
+  align-items: flex-start;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 8px;
+  position: relative;
+  background-color: #FAFAFA;
+}
+@media (min-width: 600px) {
+  .interactiveResultContainerLight {
+    flex-direction: row;
+  }
+}
+
+.interactiveResultContainerDark {
+  align-items: flex-start;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 8px;
+  position: relative;
+  background-color: #2E2E2E;
+}
+@media (min-width: 600px) {
+  .interactiveResultContainerDark {
+    flex-direction: row;
+  }
+}
+
+.resultContainer {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+@media (min-width: 600px) {
+  .resultContainer {
+    flex-direction: row;
+  }
+}
+
+.interactiveIconLarge {
+  display: inline-block;
+  position: absolute;
+  right: 5px;
+  top: 8px;
+}
+@media (max-width: 600px) {
+  .interactiveIconLarge {
+    display: none;
+  }
+}
+
+.interactiveIconSmall {
+  display: inline-block;
+  position: absolute;
+  right: 5px;
+  top: -2px;
+}
+@media (min-width: 600px) {
+  .interactiveIconSmall {
+    display: none;
+  }
+}
+
+.imageContainer {
+  max-width: 100%;
+}
+
+.contentContainer {
+  max-height: 100%;
+  max-width: 100%;
+}
+@media (min-width: 600px) {
+  .contentContainer {
+    max-width: 50%;
+  }
+}
+
+.secondaryContentContainer {
+  display: flex;
+}
+
+.imageLight {
+  border-radius: 8px;
+  max-height: 100%;
+  max-width: 100%;
+  border: 1px solid #D9D9D9;
+}
+
+.imageDark {
+  border-radius: 8px;
+  max-height: 100%;
+  max-width: 100%;
+  border: 1px solid #333;
+}
+
+.headingLight {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0;
+  position: relative;
+  -webkit-font-smoothing: antialiased;
+  color: #292929;
+}
+
+.headingDark {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0;
+  position: relative;
+  -webkit-font-smoothing: antialiased;
+  color: #FFF;
+}
+
+.subheadingLight {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  -webkit-font-smoothing: antialiased;
+  color: #737373;
+}
+
+.subheadingDark {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  -webkit-font-smoothing: antialiased;
+  color: #BFBFBF;
+}
+
+.primaryContentLight {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  -webkit-font-smoothing: antialiased;
+  color: #404040;
+}
+
+.primaryContentDark {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  -webkit-font-smoothing: antialiased;
+  color: #E6E6E6;
+}
+
+.secondaryContentLight {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  -webkit-font-smoothing: antialiased;
+  color: #404040;
+}
+
+.secondaryContentLight::after {
+  content: "•";
+  color: #404040;
+  font-size: 1em;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.secondaryContentDark {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  -webkit-font-smoothing: antialiased;
+  color: #E6E6E6;
+}
+
+.tertiaryContentLight {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  -webkit-font-smoothing: antialiased;
+  color: #404040;
+}
+
+.tertiaryContentDark {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  -webkit-font-smoothing: antialiased;
+  color: #E6E6E6;
+}

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

@@ -0,0 +1,268 @@
+import { h } from "@stencil/core";
+import { useSearchcraftStore } from "../../provider/store";
+import { extractDynamicProperties, getFormattedTimeFromNow, parseSearchKeys, serializeStyles, } from "../../utils/utils";
+export class SearchcraftBaseSearchResults {
+    constructor() {
+        this.adInterval = 4;
+        this.customStylesForResults = {};
+        this.documentAttributesForDisplay = '';
+        this.fallbackElement = null;
+        this.formatTime = true;
+        this.placeAdAtEnd = false;
+        this.placeAdAtStart = true;
+        this.placeResultImageRight = false;
+        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;
+            }
+            else {
+                this.hasSearched = false;
+            }
+            this.searchResults = Object.assign({}, state.searchResults);
+            this.query = state.query;
+        });
+        const { searchResults, query } = useSearchcraftStore.getState();
+        this.searchResults = searchResults;
+        this.query = query;
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!this.hasSearched) {
+            return (h("div", { class: 'emptyState' }, 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[parsedSearchKeys.length - 1]], "is-interactive": true, key: `${document.document_id}-${index}`, "keydown-callback": () => console.log('keydown'), "heading-text": dynamicProperties[parsedSearchKeys[0]], "place-image-right": this.placeResultImageRight, "primary-content": dynamicProperties[parsedSearchKeys[2]], "result-callback": () => console.log('interactive element'), "secondary-content": dynamicProperties[parsedSearchKeys[3]], "subheading-text": dynamicProperties[parsedSearchKeys[1]], "tertiary-content": dynamicProperties[parsedSearchKeys[4]] }));
+        });
+        const finalComponents = [];
+        if (this.placeAdAtStart) {
+            finalComponents.push(h("div", { key: 'ad-section-start', class: 'adSection' }, h("span", null, "##"), h("p", null, " Ad Impressions")));
+        }
+        if (this.adInterval > 0) {
+            resultsComponents.forEach((component, index) => {
+                finalComponents.push(component);
+                if ((index + 1) % this.adInterval === 0) {
+                    finalComponents.push(h("div", { key: `ad-section-${index + 1}`, class: 'adSection' }, h("span", null, "##"), h("p", null, " Ad Impressions")));
+                }
+            });
+        }
+        else {
+            finalComponents.push(...resultsComponents);
+        }
+        if (this.placeAdAtEnd) {
+            finalComponents.push(h("div", { key: 'ad-section-end', class: 'adSection' }, h("span", null, "##"), h("p", null, " Ad Impressions")));
+        }
+        return (h("div", { class: 'resultsContainer' }, finalComponents, 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 && (h("div", { class: 'errorMessageContainer' }, h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` })))));
+    }
+    static get is() { return "searchcraft-base-search-results"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-base-search-results.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-base-search-results.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "adInterval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "ad-interval",
+                "reflect": false,
+                "defaultValue": "4"
+            },
+            "customStylesForResults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| string\n    | Record<string, Record<string, string>>",
+                    "resolved": "string | { [x: string]: Record<string, string>; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "custom-styles-for-results",
+                "reflect": false,
+                "defaultValue": "{}"
+            },
+            "documentAttributesForDisplay": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "document-attributes-for-display",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "fallbackElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement | null",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "null"
+            },
+            "formatTime": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "format-time",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "placeAdAtEnd": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "place-ad-at-end",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "placeAdAtStart": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "place-ad-at-start",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "placeResultImageRight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "place-result-image-right",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasSearched": {},
+            "query": {},
+            "searchResults": {}
+        };
+    }
+}
+//# sourceMappingURL=searchcraft-base-search-results.js.map

package/dist/{searchcraft-javascript-sdk/searchcraft-base-search-results.entry.js.map → collection/components/searchcraft-base-search-results/searchcraft-base-search-results.js.map}

@@ -1 +1 @@
-{"file":"searchcraft-base-search-results.entry.esm.js","mappings":"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","names":[],"sources":["src/components/searchcraft-base-search-results/searchcraft-base-search-results.module.scss?tag=searchcraft-base-search-results&encapsulation=shadow","src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"sourcesContent":[":root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.resultsContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin: 16px 0;\n\n  & > p {\n    align-self: center;\n  }\n\n  & > div {\n    margin-bottom: 20px;\n    img {\n      height: 300px;\n      width: 200px;\n    }\n  }\n}\n\n.adSection {\n  align-items: center;\n  background-color: #F1F1F1;\n  border: 1px solid #DCDDDE;\n  border-radius: 16px;\n  display: flex;\n  flex-direction: column;\n  font-size: 16px;\n  justify-content: center;\n  margin: auto;\n  min-height: 150px;\n  text-align: center;\n  width: 100%;\n\n  p {\n    margin-top: 5px;\n  }\n}\n\n.emptyState {\n  text-align: center;\n  width: 100%;\n}\n\n.errorMessageContainer {\n  text-align: center;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\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: true,\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\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 class='emptyState'>\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={\n              dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]]\n            }\n            is-interactive={true}\n            key={`${document.document_id}-${index}`}\n            keydown-callback={() => console.log('keydown')}\n            heading-text={dynamicProperties[parsedSearchKeys[0]]}\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            subheading-text={dynamicProperties[parsedSearchKeys[1]]}\n            tertiary-content={dynamicProperties[parsedSearchKeys[4]]}\n          />\n        );\n      },\n    );\n\n    const finalComponents: JSX.Element[] = [];\n\n    if (this.placeAdAtStart) {\n      finalComponents.push(\n        <div key='ad-section-start' class='adSection'>\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 key={`ad-section-${index + 1}`} class='adSection'>\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 key='ad-section-end' class='adSection'>\n          <span>##</span>\n          <p> Ad Impressions</p>\n        </div>,\n      );\n    }\n\n    return (\n      <div class='resultsContainer'>\n        {finalComponents}\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <div class='errorMessageContainer'>\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}
+{"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 { Component, h, Prop, State } from '@stencil/core';\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: true,\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\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 class='emptyState'>\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={\n              dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]]\n            }\n            is-interactive={true}\n            key={`${document.document_id}-${index}`}\n            keydown-callback={() => console.log('keydown')}\n            heading-text={dynamicProperties[parsedSearchKeys[0]]}\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            subheading-text={dynamicProperties[parsedSearchKeys[1]]}\n            tertiary-content={dynamicProperties[parsedSearchKeys[4]]}\n          />\n        );\n      },\n    );\n\n    const finalComponents: JSX.Element[] = [];\n\n    if (this.placeAdAtStart) {\n      finalComponents.push(\n        <div key='ad-section-start' class='adSection'>\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 key={`ad-section-${index + 1}`} class='adSection'>\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 key='ad-section-end' class='adSection'>\n          <span>##</span>\n          <p> Ad Impressions</p>\n        </div>,\n      );\n    }\n\n    return (\n      <div class='resultsContainer'>\n        {finalComponents}\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <div class='errorMessageContainer'>\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

@@ -0,0 +1,47 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.resultsContainer {
+  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;
+}
+
+.adSection {
+  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;
+  text-align: center;
+  width: 100%;
+}
+.adSection p {
+  margin-top: 5px;
+}
+
+.emptyState {
+  text-align: center;
+  width: 100%;
+}
+
+.errorMessageContainer {
+  text-align: center;
+}