@searchcraft/javascript-sdk 0.3.0 → 0.4.0

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

@@ -1,18 +1,104 @@
 :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;
 }
 
-.formLTR {
-  font-family: var(--font-stack);
-  text-align: left;
+: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;
 }
 
-.formRTL {
-  font-family: var(--font-stack);
-  text-align: right;
+: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;
 }
 
-.searchContainer {
+.searchcraft-base-search-form-input-container {
   align-items: center;
   display: flex;
+  gap: 8px;
 }

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

@@ -1,52 +1,63 @@
+import { useSearchcraftStore } from "../../provider/store";
 import { Fragment, h } from "@stencil/core";
 export class SearchcraftBaseSearchResult {
     constructor() {
-        this.buttonCallback = () => { }; // Callback for button click
-        this.keyDownCallback = () => { }; // Callback for key down event
-        this.resultCallback = () => { }; // Callback for result container click
-        this.handleButtonClick = () => {
-            this.buttonCallback();
-        };
-        this.handleContainerClick = () => {
-            if (this.isInteractive) {
-                this.resultCallback();
+        this.searchcraftStore = useSearchcraftStore.getState();
+        this.recordMeasureEvent = () => {
+            var _a, _b, _c;
+            const searchcraft = this.searchcraftStore.getSearchcraftInstance();
+            if (searchcraft) {
+                const document_position = this.documentPosition;
+                const search_term = this.searchcraftStore.query;
+                const number_of_documents = ((_c = (_b = (_a = this.searchcraftStore.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.length) || 0;
+                searchcraft.sendMeasureEvent('document_clicked', {
+                    document_position,
+                    number_of_documents,
+                    search_term,
+                });
             }
         };
-        this.buttonText = '';
-        this.customStyles = '{}';
-        this.headingText = '';
-        this.imageDescription = '';
-        this.imageSource = '';
-        this.isInteractive = false;
-        this.primaryContent = '';
-        this.secondaryContent = '';
-        this.subheadingText = '';
-        this.tertiaryContent = '';
-        this.themeMode = 'light';
-        this.placeImageRight = false;
-    }
-    parseStyles() {
-        try {
-            return JSON.parse(this.customStyles);
-        }
-        catch (error) {
-            console.error('Error parsing custom styles:', error);
+        this.parseStyles = () => {
+            if (this.customStyles) {
+                try {
+                    return JSON.parse(this.customStyles);
+                }
+                catch (error) {
+                    console.error('Error parsing custom styles:', error);
+                    return {};
+                }
+            }
             return {};
-        }
+        };
+        this.titleContent = undefined;
+        this.subtitleContent = undefined;
+        this.bodyContent = undefined;
+        this.footerContent = undefined;
+        this.buttonLabel = undefined;
+        this.buttonHref = undefined;
+        this.buttonTarget = '_blank';
+        this.buttonRel = undefined;
+        this.containerHref = undefined;
+        this.containerTarget = '_blank';
+        this.containerRel = undefined;
+        this.imageSrc = undefined;
+        this.imageAlt = undefined;
+        this.imagePlacement = undefined;
+        this.customStyles = undefined;
+        this.documentPosition = 0;
     }
     render() {
-        const isLightTheme = this.themeMode === 'light';
         const styles = this.parseStyles();
-        const imageContainer = this.imageSource && (h("div", { key: '5446a636265cf330a7e67f7539dad7e25077ecda', class: 'imageContainer' }, h("img", { key: '59529cce35008eb171f4ee634ed94ff96e716dad', alt: this.imageDescription, class: isLightTheme ? 'imageLight' : 'imageDark', src: this.imageSource, style: styles.image || {} })));
-        const contentContainer = (h("div", { key: 'fd052ef1e3dedcf5b1467b6b0760d0be349c1faf', class: 'contentContainer' }, h("h2", { key: '1d1eca475651641b34d477ea7e2ea2f3eb7a2c49', class: isLightTheme ? 'headingLight' : 'headingDark', style: styles.heading || {} }, this.headingText), h("h3", { key: '9fcf054f634d088b72b67a2675b67a89f651285b', class: isLightTheme ? 'subheadingLight' : 'subheadingDark', style: styles.subheading || {} }, this.subheadingText), h("p", { key: '477078081008771a462abb042232b84f1e72ddd5', class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark', style: styles.primaryContent || {} }, this.primaryContent), h("div", { key: '716ea0fe1efbd18f0b6313baac80834fbab53001', class: 'secondaryContentContainer' }, h("p", { key: '340dad3f568e5cc2b0a1b412b92a335b9afb7a0f', class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark', style: styles.secondaryContent || {} }, this.secondaryContent), h("p", { key: 'b0c940aab4b48d4e560aabe7551b3c1a0a4ef3ae', class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark', style: styles.tertiaryContent || {} }, this.tertiaryContent)), this.buttonText && (h("button", { key: 'd9a08ff62c8bc7d2b13bb42872e2391290de0712', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText))));
-        return (h("div", { key: '310676a0e48c3a3d76559b3e3012db1681a55499', class: this.isInteractive
-                ? isLightTheme
-                    ? 'interactiveResultContainerLight'
-                    : 'interactiveResultContainerDark'
-                : 'resultContainer', onKeyDown: this.keyDownCallback, onClick: this.handleContainerClick, style: styles.container || {}, tabindex: '0' }, this.placeImageRight ? (h(Fragment, null, contentContainer, imageContainer)) : (h(Fragment, null, imageContainer, contentContainer))));
+        const imageContainer = this.imageSrc && (h("img", { alt: this.imageAlt, class: 'searchcraft-search-result-image', src: this.imageSrc, style: styles.image || {} }));
+        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));
+        }
+        /** Render as a div if no href prop. */
+        return (h("div", { class: 'searchcraft-search-result-container', style: styles.container || {} }, contentContainer));
     }
     static get is() { return "searchcraft-base-search-result"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["searchcraft-base-search-result.module.scss"]
@@ -59,11 +70,11 @@ export class SearchcraftBaseSearchResult {
     }
     static get properties() {
         return {
-            "buttonText": {
+            "titleContent": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
+                    "original": "string | undefined",
                     "resolved": "string",
                     "references": {}
                 },
@@ -73,15 +84,14 @@ export class SearchcraftBaseSearchResult {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "button-text",
-                "reflect": false,
-                "defaultValue": "''"
+                "attribute": "title-content",
+                "reflect": false
             },
-            "customStyles": {
+            "subtitleContent": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
+                    "original": "string | undefined",
                     "resolved": "string",
                     "references": {}
                 },
@@ -91,15 +101,14 @@ export class SearchcraftBaseSearchResult {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "custom-styles",
-                "reflect": false,
-                "defaultValue": "'{}'"
+                "attribute": "subtitle-content",
+                "reflect": false
             },
-            "headingText": {
+            "bodyContent": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
+                    "original": "string | undefined",
                     "resolved": "string",
                     "references": {}
                 },
@@ -109,15 +118,14 @@ export class SearchcraftBaseSearchResult {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "heading-text",
-                "reflect": false,
-                "defaultValue": "''"
+                "attribute": "body-content",
+                "reflect": false
             },
-            "imageDescription": {
+            "footerContent": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
+                    "original": "string | undefined",
                     "resolved": "string",
                     "references": {}
                 },
@@ -127,15 +135,14 @@ export class SearchcraftBaseSearchResult {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "image-description",
-                "reflect": false,
-                "defaultValue": "''"
+                "attribute": "footer-content",
+                "reflect": false
             },
-            "imageSource": {
+            "buttonLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
+                    "original": "string | undefined",
                     "resolved": "string",
                     "references": {}
                 },
@@ -145,16 +152,15 @@ export class SearchcraftBaseSearchResult {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "image-source",
-                "reflect": false,
-                "defaultValue": "''"
+                "attribute": "button-label",
+                "reflect": false
             },
-            "isInteractive": {
-                "type": "boolean",
+            "buttonHref": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -163,16 +169,15 @@ export class SearchcraftBaseSearchResult {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "is-interactive",
-                "reflect": false,
-                "defaultValue": "false"
+                "attribute": "button-href",
+                "reflect": false
             },
-            "primaryContent": {
+            "buttonTarget": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'_blank' | '_self' | '_top' | '_parent'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
                     "references": {}
                 },
                 "required": false,
@@ -181,16 +186,16 @@ export class SearchcraftBaseSearchResult {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "primary-content",
+                "attribute": "button-target",
                 "reflect": false,
-                "defaultValue": "''"
+                "defaultValue": "'_blank'"
             },
-            "secondaryContent": {
+            "buttonRel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'noreferrer' | 'noopener' | 'nofollow' | undefined",
+                    "resolved": "\"nofollow\" | \"noopener\" | \"noreferrer\"",
                     "references": {}
                 },
                 "required": false,
@@ -199,15 +204,14 @@ export class SearchcraftBaseSearchResult {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "secondary-content",
-                "reflect": false,
-                "defaultValue": "''"
+                "attribute": "button-rel",
+                "reflect": false
             },
-            "subheadingText": {
+            "containerHref": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
+                    "original": "string | undefined",
                     "resolved": "string",
                     "references": {}
                 },
@@ -217,16 +221,15 @@ export class SearchcraftBaseSearchResult {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "subheading-text",
-                "reflect": false,
-                "defaultValue": "''"
+                "attribute": "container-href",
+                "reflect": false
             },
-            "tertiaryContent": {
+            "containerTarget": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'_blank' | '_self' | '_top' | '_parent'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
                     "references": {}
                 },
                 "required": false,
@@ -235,16 +238,16 @@ export class SearchcraftBaseSearchResult {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "tertiary-content",
+                "attribute": "container-target",
                 "reflect": false,
-                "defaultValue": "''"
+                "defaultValue": "'_blank'"
             },
-            "themeMode": {
+            "containerRel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'light' | 'dark'",
-                    "resolved": "\"dark\" | \"light\"",
+                    "original": "'noreferrer' | 'noopener' | 'nofollow' | undefined",
+                    "resolved": "\"nofollow\" | \"noopener\" | \"noreferrer\"",
                     "references": {}
                 },
                 "required": false,
@@ -253,16 +256,15 @@ export class SearchcraftBaseSearchResult {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "theme-mode",
-                "reflect": false,
-                "defaultValue": "'light'"
+                "attribute": "container-rel",
+                "reflect": false
             },
-            "placeImageRight": {
-                "type": "boolean",
+            "imageSrc": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -271,59 +273,79 @@ export class SearchcraftBaseSearchResult {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "place-image-right",
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "buttonCallback",
-                "name": "buttonCallback",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
+                "attribute": "image-src",
+                "reflect": false
+            },
+            "imageAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
+                "attribute": "image-alt",
+                "reflect": false
+            },
+            "imagePlacement": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
                     "references": {}
-                }
-            }, {
-                "method": "keyDownCallback",
-                "name": "keyDownCallback",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
+                },
+                "required": false,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
+                "attribute": "image-placement",
+                "reflect": false
+            },
+            "customStyles": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string | undefined",
+                    "resolved": "string",
                     "references": {}
-                }
-            }, {
-                "method": "resultCallback",
-                "name": "resultCallback",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
+                },
+                "required": false,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
+                "attribute": "custom-styles",
+                "reflect": false
+            },
+            "documentPosition": {
+                "type": "number",
+                "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
-                }
-            }];
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "document-position",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
     }
 }
 //# sourceMappingURL=searchcraft-base-search-result.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-base-search-result.js","sourceRoot":"","sources":["../../../src/components/searchcraft-base-search-result/searchcraft-base-search-result.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, Fragment, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-base-search-result',\n  styleUrl: 'searchcraft-base-search-result.module.scss',\n  shadow: true,\n})\nexport class SearchcraftBaseSearchResult {\n  @Prop() buttonText = ''; // Label for the button\n  @Prop() customStyles = '{}'; // New string prop for serialized styles.\n  @Prop() headingText = ''; // Text for the heading\n  @Prop() imageDescription = ''; // Alternative text for the image\n  @Prop() imageSource = ''; // Source URL for the image\n  @Prop() isInteractive = false; // Determines if the result is interactive\n  @Prop() primaryContent = ''; // Primary body content\n  @Prop() secondaryContent = ''; // Secondary body content\n  @Prop() subheadingText = ''; // Text for the subheading\n  @Prop() tertiaryContent = ''; // Tertiary body content\n  @Prop() themeMode: 'light' | 'dark' = 'light'; // Light or dark theme context\n  @Prop() placeImageRight = false; // Determines the placement of the image container\n\n  @Event() buttonCallback: () => void = () => {}; // Callback for button click\n  @Event() keyDownCallback: () => void = () => {}; // Callback for key down event\n  @Event() resultCallback: () => void = () => {}; // Callback for result container click\n\n  private handleButtonClick = () => {\n    this.buttonCallback();\n  };\n\n  private handleContainerClick = () => {\n    if (this.isInteractive) {\n      this.resultCallback();\n    }\n  };\n\n  private parseStyles(): Record<string, { [key: string]: string }> {\n    try {\n      return JSON.parse(this.customStyles);\n    } catch (error) {\n      console.error('Error parsing custom styles:', error);\n      return {};\n    }\n  }\n\n  render() {\n    const isLightTheme = this.themeMode === 'light';\n    const styles = this.parseStyles();\n\n    const imageContainer = this.imageSource && (\n      <div class='imageContainer'>\n        <img\n          alt={this.imageDescription}\n          class={isLightTheme ? 'imageLight' : 'imageDark'}\n          src={this.imageSource}\n          style={styles.image || {}}\n        />\n      </div>\n    );\n\n    const contentContainer = (\n      <div class='contentContainer'>\n        <h2\n          class={isLightTheme ? 'headingLight' : 'headingDark'}\n          style={styles.heading || {}}\n        >\n          {this.headingText}\n        </h2>\n        <h3\n          class={isLightTheme ? 'subheadingLight' : 'subheadingDark'}\n          style={styles.subheading || {}}\n        >\n          {this.subheadingText}\n        </h3>\n        <p\n          class={isLightTheme ? 'primaryContentLight' : 'primaryContentDark'}\n          style={styles.primaryContent || {}}\n        >\n          {this.primaryContent}\n        </p>\n        <div class='secondaryContentContainer'>\n          <p\n            class={\n              isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark'\n            }\n            style={styles.secondaryContent || {}}\n          >\n            {this.secondaryContent}\n          </p>\n          <p\n            class={\n              isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark'\n            }\n            style={styles.tertiaryContent || {}}\n          >\n            {this.tertiaryContent}\n          </p>\n        </div>\n        {this.buttonText && (\n          <button\n            onClick={this.handleButtonClick}\n            style={styles.button || {}}\n            type='button'\n          >\n            {this.buttonText}\n          </button>\n        )}\n      </div>\n    );\n\n    return (\n      <div\n        class={\n          this.isInteractive\n            ? isLightTheme\n              ? 'interactiveResultContainerLight'\n              : 'interactiveResultContainerDark'\n            : 'resultContainer'\n        }\n        onKeyDown={this.keyDownCallback}\n        onClick={this.handleContainerClick}\n        style={styles.container || {}}\n        tabindex='0'\n      >\n        {this.placeImageRight ? (\n          <Fragment>\n            {contentContainer}\n            {imageContainer}\n          </Fragment>\n        ) : (\n          <Fragment>\n            {imageContainer}\n            {contentContainer}\n          </Fragment>\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-base-search-result.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-base-search-result/searchcraft-base-search-result.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport { Component, Fragment, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-base-search-result',\n  styleUrl: 'searchcraft-base-search-result.module.scss',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchResult {\n  @Prop() titleContent: string | undefined;\n  @Prop() subtitleContent: string | undefined;\n  @Prop() bodyContent: string | undefined;\n  @Prop() footerContent: string | undefined;\n  @Prop() buttonLabel: string | undefined;\n  @Prop() buttonHref: string | undefined;\n  @Prop() buttonTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  @Prop() buttonRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  @Prop() containerHref: string | undefined;\n  @Prop() containerTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  @Prop() containerRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  @Prop() imageSrc: string | undefined;\n  @Prop() imageAlt: string | undefined;\n  @Prop() imagePlacement: 'left' | 'right';\n  @Prop() customStyles: string | undefined;\n  @Prop() documentPosition = 0;\n\n  private searchcraftStore = useSearchcraftStore.getState();\n\n  private recordMeasureEvent = () => {\n    const searchcraft = this.searchcraftStore.getSearchcraftInstance();\n\n    if (searchcraft) {\n      const document_position = this.documentPosition;\n      const search_term = this.searchcraftStore.query;\n      const number_of_documents =\n        this.searchcraftStore.searchResults?.data?.hits?.length || 0;\n\n      searchcraft.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.recordMeasureEvent}\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"]}