npm - @searchcraft/javascript-sdk - Versions diffs - 0.2.9 → 0.3.1 - Mend

@searchcraft/javascript-sdk 0.2.9 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (225) hide show

package/dist/collection/components/searchcraft-base-search-form/searchcraft-base-search-form.js CHANGED Viewed

@@ -1,13 +1,18 @@
 import { h } from "@stencil/core";
-import { CoreSDK as SearchcraftCore, } from "@searchcraft/core";
+import classNames from "classnames";
+import { SearchcraftCore } from "@searchcraft/core";
 import { useSearchcraftStore, useThemeStore } from "../../provider/store";
+import packageJson from "../../../package.json";
 export class SearchcraftBaseSearchForm {
     constructor() {
         this.clearInput = () => { };
         this.searchStore = useSearchcraftStore.getState();
         this.themeStore = useThemeStore.getState();
         this.componentDidLoad = () => {
-            const searchcraft = new SearchcraftCore(this.config);
+            const searchcraft = new SearchcraftCore(this.config, {
+                sdkName: packageJson.name,
+                sdkVersion: packageJson.version,
+            });
             this.searchStore.initialize(searchcraft, true);
         };
         this.handleFormSubmit = async (event) => {
@@ -33,9 +38,11 @@ export class SearchcraftBaseSearchForm {
             this.themeStore.toggleTheme();
         };
         this.config = {
-            apiKey: '',
+            readKey: '',
             endpointURL: '',
             index: [],
+            organizationId: '',
+            applicationId: '',
         };
         this.errorMessage = 'Search was unsuccessful';
         this.labelForInput = 'Search';
@@ -45,10 +52,10 @@ export class SearchcraftBaseSearchForm {
         this.searchResults = null;
     }
     render() {
-        return (h("form", { key: 'f3fa26d678324efddf3bf2bd12b130f24d8f2788', class: this.rightToLeftOrientation ? 'formRTL' : 'formLTR', onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: 'a8011d97796cbd1334e55b18b7e92b85c498e096', label: this.labelForInput }), h("div", { key: '19323cdc3b4d854987710fa45bab9d91d0046c5c', class: 'searchContainer' }, this.rightToLeftOrientation && h("searchcraft-button", { key: '0a8349e990f79ac704a477a615c6072dec5230c2' }), h("searchcraft-input", { key: '3a2a00544c5bcc4ad2e81bc68002a2a8a76bbfda', onClearInput: this.handleClearInput, onSearchInputChange: this.handleSearchInputChange, query: this.query, rightToLeftOrientation: this.rightToLeftOrientation }), !this.rightToLeftOrientation && (h("searchcraft-button", { key: '5094f79b0fccd5c44725176c8f308cc4e0c47eec', onButtonClick: this.handleFormSubmit }))), this.error && (h("searchcraft-error-message", { key: '70fc3e31319e30c9e38a158ee82b8e7c74f88e18', errorMessage: this.errorMessage }))));
+        const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';
+        return (h("form", { key: '7a0640c6646a1eefda23ceb1623a72b457be648a', class: classNames(`${formClass}`, 'searchcraft-base-search-form'), onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: '33d98e7db9af81170cb693b1f89a38da0a8234e7', label: this.labelForInput }), h("div", { key: '8764b5abbc5008d46bdd8b60b95558252ad6999c', class: classNames('searchContainer', 'searchcraft-base-search-form-input-container') }, this.rightToLeftOrientation && h("searchcraft-button", { key: 'c2a008f5da3bae24bd7417245c4e0df0aa73fd7c' }), h("searchcraft-input", { key: 'dad6c9c1e37ff05a8f032ad3f63ddb1ec234d2e5', onClearInput: this.handleClearInput, onSearchInputChange: this.handleSearchInputChange, query: this.query, rightToLeftOrientation: this.rightToLeftOrientation }), !this.rightToLeftOrientation && (h("searchcraft-button", { key: '2f2a75da81103e3435cbf3337daf605010167339', onButtonClick: this.handleFormSubmit }))), this.error && (h("searchcraft-error-message", { key: '8477fb8f5c3662587e318d8d7c9e1bbd3b7d86a5', errorMessage: this.errorMessage }))));
     }
     static get is() { return "searchcraft-base-search-form"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["searchcraft-base-search-form.module.scss"]
@@ -65,13 +72,13 @@ export class SearchcraftBaseSearchForm {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "CoreConfigSDK",
-                    "resolved": "CoreConfigSDK",
+                    "original": "SearchcraftConfig",
+                    "resolved": "SearchcraftConfig",
                     "references": {
-                        "CoreConfigSDK": {
+                        "SearchcraftConfig": {
                             "location": "import",
                             "path": "@searchcraft/core",
-                            "id": "../core-sdk/dist/index.d.ts::CoreConfigSDK"
+                            "id": "../core-sdk/dist/index.d.ts::SearchcraftConfig"
                         }
                     }
                 },
@@ -81,7 +88,7 @@ export class SearchcraftBaseSearchForm {
                     "tags": [],
                     "text": ""
                 },
-                "defaultValue": "{\n    apiKey: '',\n    endpointURL: '',\n    index: [],\n  }"
+                "defaultValue": "{\n    readKey: '',\n    endpointURL: '',\n    index: [],\n    organizationId: '',\n    applicationId: '',\n  }"
             },
             "errorMessage": {
                 "type": "string",

package/dist/collection/components/searchcraft-base-search-form/searchcraft-base-search-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"searchcraft-base-search-form.js","sourceRoot":"","sources":["~~../../../~~src/components/searchcraft-base-search-form/searchcraft-base-search-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;~~AAEjE~~,OAAO,~~EAEL~~,OAAO,~~IAAI~~,eAAe,~~GAC3B~~,MAAM,mBAAmB,CAAC;~~AAE3B~~,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;~~AASrE~~,MAAM,OAAO,yBAAyB;;~~QAU3B~~,eAAU,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;QAMvB,gBAAW,GAAG,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QAC7C,eAAU,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC;QAE9C,qBAAgB,GAAG,GAAG,EAAE;YACtB,MAAM,WAAW,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;~~YACrD~~,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QACjD,CAAC,CAAC;QAEF,qBAAgB,GAAG,KAAK,EAAE,KAAK,EAAE,EAAE;YACjC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;gBAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;gBACnB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACtC,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;gBAChC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;YACtE,CAAC;QACH,CAAC,CAAC;QAEF,4BAAuB,GAAG,CAAC,KAAiC,EAAE,EAAE;YAC9D,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,CAAC,CAAC;QAEF,qBAAgB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,EAAE,CAAC;QACrB,CAAC,CAAC;QAEF,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;QAChC,CAAC,CAAC;~~sBA9C8B~~;~~YAC9B~~,~~MAAM~~,EAAE,EAAE;~~YACV~~,WAAW,EAAE,EAAE;YACf,KAAK,EAAE,EAAE;~~SACV~~;4BACsB,yBAAyB;6BACxB,QAAQ;sCACC,KAAK;qBAIrB,KAAK;qBACL,EAAE;6BACqB,IAAI;;~~IAmC5C~~,MAAM;QACJ,~~OAAO~~,~~CACL~~,~~6DACE~~,~~KAAK,EAAE,~~IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,~~EAC1D~~,QAAQ,EAAE,IAAI,CAAC,gBAAgB;YAE/B,gFAAyB,KAAK,EAAE,IAAI,CAAC,aAAa,GAAI;YACtD,~~4DAAK~~,KAAK,~~EAAC~~,iBAAiB;~~gBACzB~~,IAAI,CAAC,sBAAsB,IAAI,4EAAsB;gBACtD,0EACE,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,mBAAmB,EAAE,IAAI,CAAC,uBAAuB,EACjD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACnD;gBACD,CAAC,IAAI,CAAC,sBAAsB,IAAI,CAC/B,2EAAoB,aAAa,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC7D,CACG;YACL,IAAI,CAAC,KAAK,IAAI,CACb,kFAA2B,YAAY,EAAE,IAAI,CAAC,YAAY,GAAI,CAC/D,CACI,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, h, Event, Prop, State } from '@stencil/core';\n\nimport {\n type ~~CoreConfigSDK,\n CoreSDK~~ as ~~SearchcraftCore,\n~~} from '@searchcraft/core';\n\nimport { useSearchcraftStore, useThemeStore } from '@provider/store';\n\nimport type { ScInputCustomEvent } from '@components/searchcraft-input/searchcraft-input';\n\n@Component({\n tag: 'searchcraft-base-search-form',\n styleUrl: 'searchcraft-base-search-form.module.scss',\n shadow: ~~true~~,\n})\nexport class SearchcraftBaseSearchForm {\n @Prop() config: ~~CoreConfigSDK~~ = {\n ~~apiKey~~: '',\n endpointURL: '',\n index: [],\n };\n @Prop() errorMessage = 'Search was unsuccessful';\n @Prop() labelForInput = 'Search';\n @Prop() rightToLeftOrientation = false;\n\n @Event() clearInput = () => {};\n\n @State() error = false;\n @State() query = '';\n @State() searchResults: string \| null = null;\n\n private searchStore = useSearchcraftStore.getState();\n private themeStore = useThemeStore.getState();\n\n componentDidLoad = () => {\n const searchcraft = new SearchcraftCore(this.config);\n this.searchStore.initialize(searchcraft, true);\n };\n\n handleFormSubmit = async (event) => {\n event.preventDefault();\n if (this.query.trim() === '') {\n this.error = true;\n } else {\n this.error = false;\n this.searchStore.setQuery(this.query);\n await this.searchStore.search();\n this.searchResults = JSON.stringify(this.searchStore.searchResults);\n }\n };\n\n handleSearchInputChange = (event: ScInputCustomEvent<string>) => {\n this.query = event.detail;\n };\n\n handleClearInput = () => {\n this.query = '';\n this?.clearInput();\n };\n\n toggleTheme = () => {\n this.themeStore.toggleTheme();\n };\n\n render() {\n ~~return~~ ~~(\n <form\n class~~={this.rightToLeftOrientation ? 'formRTL' : 'formLTR'}\n onSubmit={this.handleFormSubmit}\n >\n <searchcraft-input-label label={this.labelForInput} />\n <div class='searchContainer'>\n {this.rightToLeftOrientation && <searchcraft-button />}\n <searchcraft-input\n onClearInput={this.handleClearInput}\n onSearchInputChange={this.handleSearchInputChange}\n query={this.query}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n {!this.rightToLeftOrientation && (\n <searchcraft-button onButtonClick={this.handleFormSubmit} />\n )}\n </div>\n {this.error && (\n <searchcraft-error-message errorMessage={this.errorMessage} />\n )}\n </form>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"searchcraft-base-search-form.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-base-search-form/searchcraft-base-search-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Event, Prop, State } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { type SearchcraftConfig, SearchcraftCore } from '@searchcraft/core';\n\nimport { useSearchcraftStore, useThemeStore } from '@provider/store';\n\nimport type { ScInputCustomEvent } from '@components/searchcraft-input/searchcraft-input';\n\nimport packageJson from '../../../package.json';\n\n@Component({\n tag: 'searchcraft-base-search-form',\n styleUrl: 'searchcraft-base-search-form.module.scss',\n shadow: false,\n})\nexport class SearchcraftBaseSearchForm {\n @Prop() config: SearchcraftConfig = {\n readKey: '',\n endpointURL: '',\n index: [],\n organizationId: '',\n applicationId: '',\n };\n @Prop() errorMessage = 'Search was unsuccessful';\n @Prop() labelForInput = 'Search';\n @Prop() rightToLeftOrientation = false;\n\n @Event() clearInput = () => {};\n\n @State() error = false;\n @State() query = '';\n @State() searchResults: string \| null = null;\n\n private searchStore = useSearchcraftStore.getState();\n private themeStore = useThemeStore.getState();\n\n componentDidLoad = () => {\n const searchcraft = new SearchcraftCore(this.config, {\n sdkName: packageJson.name,\n sdkVersion: packageJson.version,\n });\n this.searchStore.initialize(searchcraft, true);\n };\n\n handleFormSubmit = async (event) => {\n event.preventDefault();\n if (this.query.trim() === '') {\n this.error = true;\n } else {\n this.error = false;\n this.searchStore.setQuery(this.query);\n await this.searchStore.search();\n this.searchResults = JSON.stringify(this.searchStore.searchResults);\n }\n };\n\n handleSearchInputChange = (event: ScInputCustomEvent<string>) => {\n this.query = event.detail;\n };\n\n handleClearInput = () => {\n this.query = '';\n this?.clearInput();\n };\n\n toggleTheme = () => {\n this.themeStore.toggleTheme();\n };\n\n render() {\n const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';\n return (\n <form\n class={classNames(`${formClass}`, 'searchcraft-base-search-form')}\n onSubmit={this.handleFormSubmit}\n >\n <searchcraft-input-label label={this.labelForInput} />\n <div\n class={classNames(\n 'searchContainer',\n 'searchcraft-base-search-form-input-container',\n )}\n >\n {this.rightToLeftOrientation && <searchcraft-button />}\n <searchcraft-input\n onClearInput={this.handleClearInput}\n onSearchInputChange={this.handleSearchInputChange}\n query={this.query}\n rightToLeftOrientation={this.rightToLeftOrientation}\n />\n {!this.rightToLeftOrientation && (\n <searchcraft-button onButtonClick={this.handleFormSubmit} />\n )}\n </div>\n {this.error && (\n <searchcraft-error-message errorMessage={this.errorMessage} />\n )}\n </form>\n );\n }\n}\n"]}

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

@@ -1,52 +1,66 @@
+import { useSearchcraftStore } from "../../provider/store";
 import { Fragment, h } from "@stencil/core";
+import classNames from "classnames";
 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.buttonCallback = () => { };
+        this.keyDownCallback = () => { };
+        this.resultCallback = () => { };
+        this.searchcraftStore = useSearchcraftStore.getState();
         this.handleButtonClick = () => {
             this.buttonCallback();
         };
-        this.handleContainerClick = () => {
-            if (this.isInteractive) {
-                this.resultCallback();
+        this.handleClick = () => {
+            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.parseStyles = () => {
+            try {
+                return JSON.parse(this.customStyles);
+            }
+            catch (error) {
+                console.error('Error parsing custom styles:', error);
+                return {};
             }
         };
         this.buttonText = '';
         this.customStyles = '{}';
-        this.headingText = '';
+        this.titleContent = '';
         this.imageDescription = '';
         this.imageSource = '';
         this.isInteractive = false;
+        this.linkHref = '';
         this.primaryContent = '';
         this.secondaryContent = '';
-        this.subheadingText = '';
+        this.subtitleContent = '';
         this.tertiaryContent = '';
         this.themeMode = 'light';
         this.placeImageRight = false;
-    }
-    parseStyles() {
-        try {
-            return JSON.parse(this.customStyles);
-        }
-        catch (error) {
-            console.error('Error parsing custom styles:', error);
-            return {};
-        }
+        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
+        const imageStyle = isLightTheme ? 'imageLight' : 'imageDark';
+        const imageContainer = this.imageSource && (h("div", { key: '53541a311548a653d43505356b9a4f25a417093f', class: classNames('imageContainer', 'searchcraft-base-search-result-image-container') }, h("img", { key: '919a46fd856b521a548c2ce6bab8b360507469c2', alt: this.imageDescription, class: classNames(imageStyle, 'searchcraft-search-result-image'), src: this.imageSource, style: styles.image || {} })));
+        const contentContainer = (h("div", { key: '944700daf2a0b683769bad992253a8482f71f685', class: classNames('contentContainer', 'searchcraft-base-search-result-content-container') }, h("h2", { key: '623096e2c7cf5f11bac7127cb00342386866089e', class: classNames(isLightTheme ? 'titleLight' : 'titleDark', 'searchcraft-base-search-result-title'), style: styles.title || {} }, this.titleContent), h("h3", { key: '2928f4d872e90d99fac31b75c9fecfee7e2a9a41', class: classNames(isLightTheme ? 'subtitleContentLight' : 'subtitleContentDark', 'searchcraft-base-search-result-subtitle'), style: styles.subtitle || {} }, this.subtitleContent), h("p", { key: '93bd00c9482d492a2d3d6262dba33044d4470d2c', class: classNames(isLightTheme ? 'primaryContentLight' : 'primaryContentDark', 'searchcraft-base-search-result-primary-content'), style: styles.primaryContent || {} }, this.primaryContent), h("div", { key: 'dc3bce7c0f75d121ba3068b3717fd5d934036012', class: classNames('secondaryContentContainer', 'searchcraft-base-search-result-secondary-content-container') }, h("p", { key: '80624ec83a0a7086142b6a35b4ac65d1fdb76a4e', class: classNames(isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark', 'searchcraft-base-search-result-secondary-content'), style: styles.secondaryContent || {} }, this.secondaryContent), h("p", { key: '53bdb3471b16fd4a1f525d99472c3a4d5662b722', class: classNames(`${isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark'}${this.tertiaryContent ? ' hasContent' : ''}`, 'searchcraft-base-search-result-tertiary-content'), style: styles.tertiaryContent || {} }, this.tertiaryContent)), this.buttonText && (h("button", { key: '442dc9aebe748ef06710e196382a80bf006a383e', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText))));
+        return (h("a", { key: '2cf6a6d3768266f6d46e700588083aade92142f7', class: classNames(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))));
+                : 'resultContainer', 'searchcraft-search-result-container'), onKeyDown: this.keyDownCallback, onClick: this.handleClick, href: this.linkHref, rel: 'noreferrer', style: styles.container || {}, tabindex: '0', target: '_blank' }, this.placeImageRight ? (h(Fragment, null, contentContainer, imageContainer)) : (h(Fragment, null, imageContainer, contentContainer))));
     }
     static get is() { return "searchcraft-base-search-result"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["searchcraft-base-search-result.module.scss"]
@@ -95,7 +109,7 @@ export class SearchcraftBaseSearchResult {
                 "reflect": false,
                 "defaultValue": "'{}'"
             },
-            "headingText": {
+            "titleContent": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -109,7 +123,7 @@ export class SearchcraftBaseSearchResult {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "heading-text",
+                "attribute": "title-content",
                 "reflect": false,
                 "defaultValue": "''"
             },
@@ -167,6 +181,24 @@ export class SearchcraftBaseSearchResult {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "linkHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "link-href",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "primaryContent": {
                 "type": "string",
                 "mutable": false,
@@ -203,7 +235,7 @@ export class SearchcraftBaseSearchResult {
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "subheadingText": {
+            "subtitleContent": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -217,7 +249,7 @@ export class SearchcraftBaseSearchResult {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "subheading-text",
+                "attribute": "subtitle-content",
                 "reflect": false,
                 "defaultValue": "''"
             },
@@ -274,6 +306,24 @@ export class SearchcraftBaseSearchResult {
                 "attribute": "place-image-right",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "documentPosition": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "document-position",
+                "reflect": false,
+                "defaultValue": "0"
             }
         };
     }

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

	@@ -1 +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":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;~~AAOpE~~,MAAM,OAAO,2BAA2B;;~~QAc7B~~,mBAAc,GAAe,GAAG,EAAE,GAAE,CAAC,CAAC~~,CAAC,4BAA4B~~;~~QACnE~~,oBAAe,GAAe,GAAG,EAAE,GAAE,CAAC,CAAC~~,CAAC,8BAA8B~~;~~QACtE~~,mBAAc,GAAe,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,~~sCAAsC~~;~~QAE9E~~,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC,CAAC;QAEM,~~yBAAoB~~,GAAG,GAAG,EAAE~~;YAClC~~,~~IAAI~~,IAAI,CAAC,~~aAAa~~,EAAE,CAAC;~~gBACvB~~,IAAI,~~CAAC~~,~~cAAc,~~EAAE,CAAC;~~YACxB~~,CAAC;~~QACH~~,CAAC,CAAC~~;0BAzBmB~~,~~EAAE~~;~~4BACA~~,IAAI;~~2BACL~~,EAAE;~~gCACG~~,~~EAAE~~;~~2BACP~~,~~EAAE~~;~~6BACA~~,~~KAAK~~;~~8BACJ~~,~~EAAE~~;~~gCACA~~,~~EAAE~~;~~8BACJ~~,~~EAAE;+BACD~~,~~EAAE~~;~~yBACU~~,~~OAAO;+BACnB~~,~~KAAK;;IAgBvB~~,~~WAAW~~;~~QACjB~~,IAAI,CAAC;~~YACH~~,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;~~QACvC~~,CAAC;~~QAAC~~,OAAO,KAAK,EAAE,CAAC;~~YACf~~,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAC;~~YACrD~~,OAAO,EAAE,CAAC;~~QACZ~~,CAAC;~~IACH~~,CAAC;~~IAED~~,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;~~QAElC~~,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,IAAI,CACzC,~~4DAAK~~,KAAK,~~EAAC~~,gBAAgB;~~YACzB~~,4DACE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAC1B,KAAK,EAAE,~~YAAY~~,CAAC,~~CAAC~~,~~CAAC~~,~~YAAY~~,CAAC,~~CAAC~~,~~CAAC,WAAW,EAChD,~~GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,EAAE,GACzB,CACE,CACP,CAAC;QAEF,MAAM,gBAAgB,GAAG,CACvB,~~4DAAK~~,KAAK,~~EAAC~~,kBAAkB;~~YAC3B~~,2DACE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,~~cAAc~~,CAAC,CAAC,CAAC,~~aAAa~~,~~EACpD~~,KAAK,EAAE,MAAM,CAAC,~~OAAO~~,IAAI,EAAE,~~IAE1B~~,IAAI,CAAC,~~WAAW~~,~~CACd~~;YACL,2DACE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,~~iBAAiB~~,CAAC,CAAC,CAAC,~~gBAAgB~~,~~EAC1D~~,KAAK,EAAE,MAAM,CAAC,~~UAAU~~,IAAI,EAAE,~~IAE7B~~,IAAI,CAAC,~~cAAc~~,~~CACjB~~;YACL,0DACE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,oBAAoB,~~EAClE~~,KAAK,EAAE,MAAM,CAAC,cAAc,IAAI,EAAE,IAEjC,IAAI,CAAC,cAAc,CAClB;YACJ,~~4DAAK~~,KAAK,~~EAAC~~,2BAA2B;~~gBACpC~~,0DACE,KAAK,~~EACH~~,YAAY,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,sBAAsB,~~EAEjE~~,KAAK,EAAE,MAAM,CAAC,gBAAgB,IAAI,EAAE,IAEnC,IAAI,CAAC,gBAAgB,CACpB;gBACJ,0DACE,KAAK,~~EACH~~,YAAY,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,qBAAqB,~~EAE/D~~,KAAK,EAAE,MAAM,CAAC,eAAe,IAAI,EAAE,IAElC,IAAI,CAAC,eAAe,CACnB,CACA;YACL,IAAI,CAAC,UAAU,IAAI,CAClB,+DACE,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,KAAK,EAAE,MAAM,CAAC,MAAM,IAAI,EAAE,EAC1B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,UAAU,CACT,CACV,CACG,CACP,CAAC;QAEF,OAAO,CACL,~~4DACE~~,KAAK,~~EACH~~,IAAI,CAAC,aAAa;gBAChB,CAAC,CAAC,YAAY;oBACZ,CAAC,CAAC,iCAAiC;oBACnC,CAAC,CAAC,gCAAgC;gBACpC,CAAC,CAAC,iBAAiB,~~EAEvB~~,SAAS,EAAE,IAAI,CAAC,eAAe,EAC/B,OAAO,EAAE,IAAI,CAAC,~~oBAAoB~~,~~EAClC~~,KAAK,EAAE,MAAM,CAAC,SAAS,IAAI,EAAE,EAC7B,QAAQ,EAAC,GAAG,~~IAEX~~,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CACtB,EAAC,QAAQ;YACN,gBAAgB;YAChB,cAAc,CACN,CACZ,CAAC,CAAC,CAAC,CACF,EAAC,QAAQ;YACN,cAAc;YACd,gBAAgB,CACR,CACZ,~~CACG~~,~~CACP~~,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}
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 { useSearchcraftStore } from '@provider/store';\nimport { Component, Event, Fragment, h, Prop } from '@stencil/core';\nimport classNames from 'classnames';\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() buttonText = '';\n @Prop() customStyles = '{}';\n @Prop() titleContent = '';\n @Prop() imageDescription = '';\n @Prop() imageSource = '';\n @Prop() isInteractive = false;\n @Prop() linkHref = '';\n @Prop() primaryContent = '';\n @Prop() secondaryContent = '';\n @Prop() subtitleContent = '';\n @Prop() tertiaryContent = '';\n @Prop() themeMode: 'light' \| 'dark' = 'light';\n @Prop() placeImageRight = false;\n @Prop() documentPosition = 0;\n\n @Event() buttonCallback: () => void = () => {};\n @Event() keyDownCallback: () => void = () => {};\n @Event() resultCallback: () => void = () => {};\n\n private searchcraftStore = useSearchcraftStore.getState();\n\n private handleButtonClick = () => {\n this.buttonCallback();\n };\n\n private handleClick = () => {\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 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 const imageStyle = isLightTheme ? 'imageLight' : 'imageDark';\n const imageContainer = this.imageSource && (\n <div\n class={classNames(\n 'imageContainer',\n 'searchcraft-base-search-result-image-container',\n )}\n >\n <img\n alt={this.imageDescription}\n class={classNames(imageStyle, 'searchcraft-search-result-image')}\n src={this.imageSource}\n style={styles.image \|\| {}}\n />\n </div>\n );\n\n const contentContainer = (\n <div\n class={classNames(\n 'contentContainer',\n 'searchcraft-base-search-result-content-container',\n )}\n >\n <h2\n class={classNames(\n isLightTheme ? 'titleLight' : 'titleDark',\n 'searchcraft-base-search-result-title',\n )}\n style={styles.title \|\| {}}\n >\n {this.titleContent}\n </h2>\n <h3\n class={classNames(\n isLightTheme ? 'subtitleContentLight' : 'subtitleContentDark',\n 'searchcraft-base-search-result-subtitle',\n )}\n style={styles.subtitle \|\| {}}\n >\n {this.subtitleContent}\n </h3>\n <p\n class={classNames(\n isLightTheme ? 'primaryContentLight' : 'primaryContentDark',\n 'searchcraft-base-search-result-primary-content',\n )}\n style={styles.primaryContent \|\| {}}\n >\n {this.primaryContent}\n </p>\n <div\n class={classNames(\n 'secondaryContentContainer',\n 'searchcraft-base-search-result-secondary-content-container',\n )}\n >\n <p\n class={classNames(\n isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark',\n 'searchcraft-base-search-result-secondary-content',\n )}\n style={styles.secondaryContent \|\| {}}\n >\n {this.secondaryContent}\n </p>\n <p\n class={classNames(\n `${isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark'}${this.tertiaryContent ? ' hasContent' : ''}`,\n 'searchcraft-base-search-result-tertiary-content',\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 <a\n class={classNames(\n this.isInteractive\n ? isLightTheme\n ? 'interactiveResultContainerLight'\n : 'interactiveResultContainerDark'\n : 'resultContainer',\n 'searchcraft-search-result-container',\n )}\n onKeyDown={this.keyDownCallback}\n onClick={this.handleClick}\n href={this.linkHref}\n rel='noreferrer'\n style={styles.container \|\| {}}\n tabindex='0'\n target='_blank'\n >\n {this.placeImageRight ? (\n <Fragment>\n {contentContainer}\n {imageContainer}\n </Fragment>\n ) : (\n <Fragment>\n {imageContainer}\n {contentContainer}\n </Fragment>\n )}\n </a>\n );\n }\n}\n"]}

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

@@ -11,11 +11,12 @@
   gap: 16px;
   padding: 8px;
   position: relative;
-  background-color: #FAFAFA;
+  background-color: #F7F7F7;
 }
-@media (min-width: 600px) {
+@media (min-width: 900px) {
   .interactiveResultContainerLight {
     flex-direction: row;
+    justify-content: space-between;
   }
 }
@@ -29,9 +30,10 @@
   position: relative;
   background-color: #2E2E2E;
 }
-@media (min-width: 600px) {
+@media (min-width: 900px) {
   .interactiveResultContainerDark {
     flex-direction: row;
+    justify-content: space-between;
   }
 }
@@ -40,8 +42,15 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+  all: unset;
+  display: inline;
+  color: inherit;
+  text-decoration: none;
 }
-@media (min-width: 600px) {
+.resultContainer:hover {
+  cursor: pointer;
+}
+@media (min-width: 900px) {
   .resultContainer {
     flex-direction: row;
   }
@@ -53,7 +62,7 @@
   right: 5px;
   top: 8px;
 }
-@media (max-width: 600px) {
+@media (max-width: 900px) {
   .interactiveIconLarge {
     display: none;
   }
@@ -65,7 +74,7 @@
   right: 5px;
   top: -2px;
 }
-@media (min-width: 600px) {
+@media (min-width: 900px) {
   .interactiveIconSmall {
     display: none;
   }
@@ -74,12 +83,17 @@
 .imageContainer {
   max-width: 100%;
 }
+@media (min-width: 900px) {
+  .imageContainer {
+    max-width: 400px;
+  }
+}
 .contentContainer {
   max-height: 100%;
   max-width: 100%;
 }
-@media (min-width: 600px) {
+@media (min-width: 900px) {
   .contentContainer {
     max-width: 50%;
   }
@@ -93,17 +107,15 @@
   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 {
+.titleLight {
   font-family: var(--font-stack);
   font-size: 16px;
   font-weight: 700;
@@ -115,7 +127,7 @@
   color: #292929;
 }
-.headingDark {
+.titleDark {
   font-family: var(--font-stack);
   font-size: 16px;
   font-weight: 700;
@@ -124,10 +136,10 @@
   margin-top: 0;
   position: relative;
   -webkit-font-smoothing: antialiased;
-  color: #FFF;
+  color: #FFFFFF;
 }
-.subheadingLight {
+.subtitleContentLight {
   font-family: var(--font-stack);
   font-size: 12px;
   font-weight: 400;
@@ -138,7 +150,7 @@
   color: #737373;
 }
-.subheadingDark {
+.subtitleContentDark {
   font-family: var(--font-stack);
   font-size: 12px;
   font-weight: 400;
@@ -182,14 +194,6 @@
   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;
@@ -212,6 +216,14 @@
   color: #404040;
 }
+.tertiaryContentLight.hasContent::before {
+  color: #404040;
+  content: "•";
+  font-size: 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+}
 .tertiaryContentDark {
   font-family: var(--font-stack);
   font-size: 16px;
@@ -221,4 +233,12 @@
   margin-top: 0px;
   -webkit-font-smoothing: antialiased;
   color: #E6E6E6;
+}
+.tertiaryContentDark.hasContent::before {
+  color: #404040;
+  content: "•";
+  font-size: 10px;
+  margin-left: 5px;
+  margin-right: 5px;
 }

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

@@ -1,4 +1,5 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
+import classNames from "classnames";
 import { useSearchcraftStore } from "../../provider/store";
 import { extractDynamicProperties, getFormattedTimeFromNow, parseSearchKeys, serializeStyles, } from "../../utils/utils";
 export class SearchcraftBaseSearchResults {
@@ -11,6 +12,7 @@ export class SearchcraftBaseSearchResults {
         this.placeAdAtEnd = false;
         this.placeAdAtStart = true;
         this.placeResultImageRight = false;
+        this.isInteractive = false;
         this.hasSearched = false;
         this.query = '';
         this.searchResults = null;
@@ -41,9 +43,9 @@ export class SearchcraftBaseSearchResults {
         }
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         if (!this.hasSearched) {
-            return (h("div", { class: 'emptyState' }, h("slot", { name: 'empty-search' })));
+            return (h("div", { class: classNames('emptyState', 'searchcraft-search-results-empty-state-container') }, h("slot", { name: 'empty-search' })));
         }
         if (!((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data)) {
             return;
@@ -66,17 +68,17 @@ export class SearchcraftBaseSearchResults {
                     }
                 }
             }
-            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]] }));
+            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 finalComponents = [];
         if (this.placeAdAtStart) {
-            finalComponents.push(h("div", { key: 'ad-section-start', class: 'adSection' }, h("span", null, "##"), h("p", null, " Ad Impressions")));
+            finalComponents.push(h("div", { key: 'ad-section-start', class: classNames('adSection', 'searchcraft-beginning-injected-ad-section') }, 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")));
+                    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")));
                 }
             });
         }
@@ -84,13 +86,15 @@ export class SearchcraftBaseSearchResults {
             finalComponents.push(...resultsComponents);
         }
         if (this.placeAdAtEnd) {
-            finalComponents.push(h("div", { key: 'ad-section-end', class: 'adSection' }, h("span", null, "##"), h("p", null, " Ad Impressions")));
+            finalComponents.push(h("div", { key: 'ad-section-end', class: classNames('adSection', 'searchcraft-end-injected-ad-section') }, 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` })))));
+        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` })))));
     }
     static get is() { return "searchcraft-base-search-results"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["searchcraft-base-search-results.module.scss"]
@@ -254,6 +258,24 @@ export class SearchcraftBaseSearchResults {
                 "attribute": "place-result-image-right",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "isInteractive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-interactive",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -264,5 +286,23 @@ export class SearchcraftBaseSearchResults {
             "searchResults": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "noResults",
+                "name": "noResults",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
 }
 //# sourceMappingURL=searchcraft-base-search-results.js.map