npm - @searchcraft/javascript-sdk - Versions diffs - 0.1.7 → 0.1.8 - Mend

@searchcraft/javascript-sdk 0.1.7 → 0.1.8

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 (22) hide show

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

@@ -7,8 +7,10 @@ export class SearchcraftBaseSearchResults {
         this.searchResults = null;
         this.searchKeys = '';
         this.customStylesForResults = {};
+        this.placeAdAtStart = true;
         this.placeAdAtEnd = false;
         this.adInterval = 4;
+        this.formatTime = true;
     }
     componentDidLoad() {
         if (!this.searchKeys || this.searchKeys.length === 0) {
@@ -28,11 +30,30 @@ export class SearchcraftBaseSearchResults {
             this.unsubscribe();
         }
     }
+    timeAgo(timestamp) {
+        const now = new Date();
+        const inputTime = new Date(timestamp);
+        const diffInSeconds = Math.floor((now.getTime() - inputTime.getTime()) / 1000);
+        const minutes = Math.floor(diffInSeconds / 60);
+        const hours = Math.floor(minutes / 60);
+        const days = Math.floor(hours / 24);
+        const years = Math.floor(days / 365);
+        if (minutes < 60) {
+            return `${minutes}m ago`;
+        }
+        if (hours < 24) {
+            return `${hours}h ago`;
+        }
+        if (days < 365) {
+            return `${days}d ago`;
+        }
+        return `${years}y ago`;
+    }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
         if (!((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data)) {
             console.warn('No search results data available');
-            return h("div", null, "No results to display.");
+            return h("div", { class: 'emptyState' }, "No results to display.");
         }
         const parsedSearchKeys = parseSearchKeys(this.searchKeys);
         const serializedStyles = typeof this.customStylesForResults === 'string'
@@ -41,10 +62,25 @@ export class SearchcraftBaseSearchResults {
         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);
+            // Apply timeAgo formatting if formatTime is true
+            if (this.formatTime) {
+                for (const key of parsedSearchKeys) {
+                    if (dynamicProperties[key]) {
+                        const value = dynamicProperties[key];
+                        // Check if the value is a valid ISO timestamp
+                        if (typeof value === 'string' &&
+                            !Number.isNaN(Date.parse(value))) {
+                            dynamicProperties[key] = this.timeAgo(value);
+                        }
+                    }
+                }
+            }
             return (h("searchcraft-base-search-result", { key: `${document.document_id}-${index}`, "button-callback": () => console.log('button callback'), "result-callback": () => console.log('interactive element'), "keydown-callback": () => console.log('keydown'), "is-interactive": true, "heading-text": dynamicProperties[parsedSearchKeys[0]], "subheading-text": dynamicProperties[parsedSearchKeys[1]], "primary-content": dynamicProperties[parsedSearchKeys[2]], "secondary-content": dynamicProperties[parsedSearchKeys[3]], "tertiary-content": dynamicProperties[parsedSearchKeys[4]], "image-source": dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]], "custom-styles": serializedStyles }));
         });
         const finalComponents = [];
-        // Add ads at specified intervals
+        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);
@@ -56,7 +92,6 @@ export class SearchcraftBaseSearchResults {
         else {
             finalComponents.push(...resultsComponents);
         }
-        // Add ad at the end if specified
         if (this.placeAdAtEnd) {
             finalComponents.push(h("div", { key: 'ad-section-end', class: 'adSection' }, h("span", null, "##"), h("p", null, " Ad Impressions")));
         }
@@ -89,7 +124,7 @@ export class SearchcraftBaseSearchResults {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Array of keys to dynamically extract properties from each document.\nMust be explicitly set by the parent component."
+                    "text": ""
                 },
                 "attribute": "search-keys",
                 "reflect": false,
@@ -112,12 +147,30 @@ export class SearchcraftBaseSearchResults {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom styles to apply to search results.\nExpected format: JSON string, e.g., '{\"borderRadius\": \"10px\", \"padding\": \"16px\"}'"
+                    "text": ""
                 },
                 "attribute": "custom-styles-for-results",
                 "reflect": false,
                 "defaultValue": "{}"
             },
+            "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"
+            },
             "placeAdAtEnd": {
                 "type": "boolean",
                 "mutable": false,
@@ -130,7 +183,7 @@ export class SearchcraftBaseSearchResults {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Place ad at the end of the results."
+                    "text": ""
                 },
                 "attribute": "place-ad-at-end",
                 "reflect": false,
@@ -148,11 +201,29 @@ export class SearchcraftBaseSearchResults {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Place ad every N results (e.g., every 4 results).\nDefault value: 4"
+                    "text": ""
                 },
                 "attribute": "ad-interval",
                 "reflect": false,
                 "defaultValue": "4"
+            },
+            "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"
             }
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"searchcraft-base-search-results.js","sourceRoot":"","sources":["../../../src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport {\n extractDynamicProperties,\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 @State() query = '';\n @State() searchResults: SearchcraftResponse \| null = null;\n\n /*\n Array of keys to dynamically extract properties from each document.\n * Must be explicitly set by the parent component.\n /\n @Prop() searchKeys = '';\n /\n Custom styles to apply to search results.\n * Expected format: JSON string, e.g., '{\"borderRadius\": \"10px\", \"padding\": \"16px\"}'\n /\n @Prop() customStylesForResults:\n \| string\n \| Record<string, Record<string, string>> = {};\n\n /\n Place ad at the end of the results.\n /\n @Prop() placeAdAtEnd = false;\n\n /\n Place ad every N results (e.g., every 4 results).\n * Default value: 4\n */\n @Prop() adInterval = 4;\n\n private unsubscribe: () => void;\n\n componentDidLoad() {\n if (!this.searchKeys \|\| this.searchKeys.length === 0) {\n console.warn('No searchKeys provided; using empty keys array.');\n this.searchKeys = '';\n }\n\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\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.searchResults?.data) {\n console.warn('No search results data available');\n return <div>No results to display.</div>;\n }\n\n const parsedSearchKeys = parseSearchKeys(this.searchKeys);\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 return (\n <searchcraft-base-search-result\n key={`${document.document_id}-${index}`}\n button-callback={() => console.log('button callback')}\n result-callback={() => console.log('interactive element')}\n keydown-callback={() => console.log('keydown')}\n is-interactive={true}\n heading-text={dynamicProperties[parsedSearchKeys[0]]}\n subheading-text={dynamicProperties[parsedSearchKeys[1]]}\n primary-content={dynamicProperties[parsedSearchKeys[2]]}\n secondary-content={dynamicProperties[parsedSearchKeys[3]]}\n tertiary-content={dynamicProperties[parsedSearchKeys[4]]}\n image-source={\n dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]]\n }\n custom-styles={serializedStyles}\n />\n );\n },\n );\n\n const finalComponents: JSX.Element[] = [];\n\n // Add ads at specified intervals\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 // Add ad at the end if specified\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 <searchcraft-error-message\n error-message={`No search results found for \"${this.query}\" query`}\n />\n )}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"searchcraft-base-search-results.js","sourceRoot":"","sources":["../../../src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport {\n extractDynamicProperties,\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 @State() query = '';\n @State() searchResults: SearchcraftResponse \| null = null;\n\n @Prop() searchKeys = '';\n @Prop() customStylesForResults:\n \| string\n \| Record<string, Record<string, string>> = {};\n @Prop() placeAdAtStart = true;\n @Prop() placeAdAtEnd = false;\n @Prop() adInterval = 4;\n @Prop() formatTime = true; // New Prop to enable timestamp formatting\n\n private unsubscribe: () => void;\n\n componentDidLoad() {\n if (!this.searchKeys \|\| this.searchKeys.length === 0) {\n console.warn('No searchKeys provided; using empty keys array.');\n this.searchKeys = '';\n }\n\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\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 timeAgo(timestamp: string): string {\n const now = new Date();\n const inputTime = new Date(timestamp);\n const diffInSeconds = Math.floor(\n (now.getTime() - inputTime.getTime()) / 1000,\n );\n\n const minutes = Math.floor(diffInSeconds / 60);\n const hours = Math.floor(minutes / 60);\n const days = Math.floor(hours / 24);\n const years = Math.floor(days / 365);\n\n if (minutes < 60) {\n return `${minutes}m ago`;\n }\n if (hours < 24) {\n return `${hours}h ago`;\n }\n if (days < 365) {\n return `${days}d ago`;\n }\n return `${years}y ago`;\n }\n\n render() {\n if (!this.searchResults?.data) {\n console.warn('No search results data available');\n return <div class='emptyState'>No results to display.</div>;\n }\n\n const parsedSearchKeys = parseSearchKeys(this.searchKeys);\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 // Apply timeAgo formatting if formatTime is true\n if (this.formatTime) {\n for (const key of parsedSearchKeys) {\n if (dynamicProperties[key]) {\n const value = dynamicProperties[key];\n // Check if the value is a valid ISO timestamp\n if (\n typeof value === 'string' &&\n !Number.isNaN(Date.parse(value))\n ) {\n dynamicProperties[key] = this.timeAgo(value);\n }\n }\n }\n }\n\n return (\n <searchcraft-base-search-result\n key={`${document.document_id}-${index}`}\n button-callback={() => console.log('button callback')}\n result-callback={() => console.log('interactive element')}\n keydown-callback={() => console.log('keydown')}\n is-interactive={true}\n heading-text={dynamicProperties[parsedSearchKeys[0]]}\n subheading-text={dynamicProperties[parsedSearchKeys[1]]}\n primary-content={dynamicProperties[parsedSearchKeys[2]]}\n secondary-content={dynamicProperties[parsedSearchKeys[3]]}\n tertiary-content={dynamicProperties[parsedSearchKeys[4]]}\n image-source={\n dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]]\n }\n custom-styles={serializedStyles}\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 <searchcraft-error-message\n error-message={`No search results found for \"${this.query}\" query`}\n />\n )}\n </div>\n );\n }\n}\n"]}

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

@@ -33,4 +33,8 @@
 }
 .adSection p {
   margin-top: 5px;
+}
+.emptyState {
+  text-align: center;
 }

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

@@ -4,7 +4,7 @@ import { a as parseSearchKeys, s as serializeStyles, e as extractDynamicProperti
 import { d as defineCustomElement$3 } from './p-f3af2b04.js';
 import { d as defineCustomElement$2 } from './p-c14731ca.js';
-const searchcraftBaseSearchResultsModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.resultsContainer{display:flex;flex-direction:column;justify-content:center;margin:100px 20px}.resultsContainer>p{align-self:center}.resultsContainer>div{margin-bottom:20px}.resultsContainer>div img{height:300px;width:200px}.adSection{align-items:center;border:1px solid #DCDDDE;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}";
+const searchcraftBaseSearchResultsModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.resultsContainer{display:flex;flex-direction:column;justify-content:center;margin:100px 20px}.resultsContainer>p{align-self:center}.resultsContainer>div{margin-bottom:20px}.resultsContainer>div img{height:300px;width:200px}.adSection{align-items:center;border:1px solid #DCDDDE;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}";
 const SearchcraftBaseSearchResultsStyle0 = searchcraftBaseSearchResultsModuleCss;
 const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftBaseSearchResults extends H {
@@ -16,8 +16,10 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
         this.searchResults = null;
         this.searchKeys = '';
         this.customStylesForResults = {};
+        this.placeAdAtStart = true;
         this.placeAdAtEnd = false;
         this.adInterval = 4;
+        this.formatTime = true;
     }
     componentDidLoad() {
         if (!this.searchKeys || this.searchKeys.length === 0) {
@@ -37,11 +39,30 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
             this.unsubscribe();
         }
     }
+    timeAgo(timestamp) {
+        const now = new Date();
+        const inputTime = new Date(timestamp);
+        const diffInSeconds = Math.floor((now.getTime() - inputTime.getTime()) / 1000);
+        const minutes = Math.floor(diffInSeconds / 60);
+        const hours = Math.floor(minutes / 60);
+        const days = Math.floor(hours / 24);
+        const years = Math.floor(days / 365);
+        if (minutes < 60) {
+            return `${minutes}m ago`;
+        }
+        if (hours < 24) {
+            return `${hours}h ago`;
+        }
+        if (days < 365) {
+            return `${days}d ago`;
+        }
+        return `${years}y ago`;
+    }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
         if (!((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data)) {
             console.warn('No search results data available');
-            return h("div", null, "No results to display.");
+            return h("div", { class: 'emptyState' }, "No results to display.");
         }
         const parsedSearchKeys = parseSearchKeys(this.searchKeys);
         const serializedStyles = typeof this.customStylesForResults === 'string'
@@ -50,10 +71,25 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
         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);
+            // Apply timeAgo formatting if formatTime is true
+            if (this.formatTime) {
+                for (const key of parsedSearchKeys) {
+                    if (dynamicProperties[key]) {
+                        const value = dynamicProperties[key];
+                        // Check if the value is a valid ISO timestamp
+                        if (typeof value === 'string' &&
+                            !Number.isNaN(Date.parse(value))) {
+                            dynamicProperties[key] = this.timeAgo(value);
+                        }
+                    }
+                }
+            }
             return (h("searchcraft-base-search-result", { key: `${document.document_id}-${index}`, "button-callback": () => console.log('button callback'), "result-callback": () => console.log('interactive element'), "keydown-callback": () => console.log('keydown'), "is-interactive": true, "heading-text": dynamicProperties[parsedSearchKeys[0]], "subheading-text": dynamicProperties[parsedSearchKeys[1]], "primary-content": dynamicProperties[parsedSearchKeys[2]], "secondary-content": dynamicProperties[parsedSearchKeys[3]], "tertiary-content": dynamicProperties[parsedSearchKeys[4]], "image-source": dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]], "custom-styles": serializedStyles }));
         });
         const finalComponents = [];
-        // Add ads at specified intervals
+        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);
@@ -65,7 +101,6 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
         else {
             finalComponents.push(...resultsComponents);
         }
-        // Add ad at the end if specified
         if (this.placeAdAtEnd) {
             finalComponents.push(h("div", { key: 'ad-section-end', class: 'adSection' }, h("span", null, "##"), h("p", null, " Ad Impressions")));
         }
@@ -76,8 +111,10 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
 }, [1, "searchcraft-base-search-results", {
         "searchKeys": [1, "search-keys"],
         "customStylesForResults": [1, "custom-styles-for-results"],
+        "placeAdAtStart": [4, "place-ad-at-start"],
         "placeAdAtEnd": [4, "place-ad-at-end"],
         "adInterval": [2, "ad-interval"],
+        "formatTime": [4, "format-time"],
         "query": [32],
         "searchResults": [32]
     }]);

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

	@@ -1 +1 @@
1	- {"file":"searchcraft-base-search-results.js","mappings":"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","names":["SearchcraftBaseSearchResults"],"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: 100px 20px;\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 border: 1px solid #DCDDDE;\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","import { Component, h, Prop, State } from '@stencil/core';\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport {\n extractDynamicProperties,\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 @State() query = '';\n @State() searchResults: SearchcraftResponse \| null = null;\n\n /*\n Array of keys to dynamically extract properties from each document.\n * Must be explicitly set by the parent component.\n /\n @Prop() searchKeys = '';\n /\n Custom styles to apply to search results.\n * Expected format: JSON string, e.g., '{\"borderRadius\": \"10px\", \"padding\": \"16px\"}'\n /\n @Prop() customStylesForResults:\n \| string\n \| Record<string, Record<string, string>> = {};\n\n /\n Place ad at the end of the results.\n /\n @Prop() placeAdAtEnd = false;\n\n /\n Place ad every N results (e.g., every 4 results).\n * Default value: 4\n */\n @Prop() adInterval = 4;\n\n private unsubscribe: () => void;\n\n componentDidLoad() {\n if (!this.searchKeys \|\| this.searchKeys.length === 0) {\n console.warn('No searchKeys provided; using empty keys array.');\n this.searchKeys = '';\n }\n\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\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.searchResults?.data) {\n console.warn('No search results data available');\n return <div>No results to display.</div>;\n }\n\n const parsedSearchKeys = parseSearchKeys(this.searchKeys);\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 return (\n <searchcraft-base-search-result\n key={`${document.document_id}-${index}`}\n button-callback={() => console.log('button callback')}\n result-callback={() => console.log('interactive element')}\n keydown-callback={() => console.log('keydown')}\n is-interactive={true}\n heading-text={dynamicProperties[parsedSearchKeys[0]]}\n subheading-text={dynamicProperties[parsedSearchKeys[1]]}\n primary-content={dynamicProperties[parsedSearchKeys[2]]}\n secondary-content={dynamicProperties[parsedSearchKeys[3]]}\n tertiary-content={dynamicProperties[parsedSearchKeys[4]]}\n image-source={\n dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]]\n }\n custom-styles={serializedStyles}\n />\n );\n },\n );\n\n const finalComponents: JSX.Element[] = [];\n\n // Add ads at specified intervals\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 // Add ad at the end if specified\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 <searchcraft-error-message\n error-message={`No search results found for \"${this.query}\" query`}\n />\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"searchcraft-base-search-results.js","mappings":"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","names":["SearchcraftBaseSearchResults"],"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: 100px 20px;\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 border: 1px solid #DCDDDE;\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}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport {\n extractDynamicProperties,\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 @State() query = '';\n @State() searchResults: SearchcraftResponse \| null = null;\n\n @Prop() searchKeys = '';\n @Prop() customStylesForResults:\n \| string\n \| Record<string, Record<string, string>> = {};\n @Prop() placeAdAtStart = true;\n @Prop() placeAdAtEnd = false;\n @Prop() adInterval = 4;\n @Prop() formatTime = true; // New Prop to enable timestamp formatting\n\n private unsubscribe: () => void;\n\n componentDidLoad() {\n if (!this.searchKeys \|\| this.searchKeys.length === 0) {\n console.warn('No searchKeys provided; using empty keys array.');\n this.searchKeys = '';\n }\n\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\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 timeAgo(timestamp: string): string {\n const now = new Date();\n const inputTime = new Date(timestamp);\n const diffInSeconds = Math.floor(\n (now.getTime() - inputTime.getTime()) / 1000,\n );\n\n const minutes = Math.floor(diffInSeconds / 60);\n const hours = Math.floor(minutes / 60);\n const days = Math.floor(hours / 24);\n const years = Math.floor(days / 365);\n\n if (minutes < 60) {\n return `${minutes}m ago`;\n }\n if (hours < 24) {\n return `${hours}h ago`;\n }\n if (days < 365) {\n return `${days}d ago`;\n }\n return `${years}y ago`;\n }\n\n render() {\n if (!this.searchResults?.data) {\n console.warn('No search results data available');\n return <div class='emptyState'>No results to display.</div>;\n }\n\n const parsedSearchKeys = parseSearchKeys(this.searchKeys);\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 // Apply timeAgo formatting if formatTime is true\n if (this.formatTime) {\n for (const key of parsedSearchKeys) {\n if (dynamicProperties[key]) {\n const value = dynamicProperties[key];\n // Check if the value is a valid ISO timestamp\n if (\n typeof value === 'string' &&\n !Number.isNaN(Date.parse(value))\n ) {\n dynamicProperties[key] = this.timeAgo(value);\n }\n }\n }\n }\n\n return (\n <searchcraft-base-search-result\n key={`${document.document_id}-${index}`}\n button-callback={() => console.log('button callback')}\n result-callback={() => console.log('interactive element')}\n keydown-callback={() => console.log('keydown')}\n is-interactive={true}\n heading-text={dynamicProperties[parsedSearchKeys[0]]}\n subheading-text={dynamicProperties[parsedSearchKeys[1]]}\n primary-content={dynamicProperties[parsedSearchKeys[2]]}\n secondary-content={dynamicProperties[parsedSearchKeys[3]]}\n tertiary-content={dynamicProperties[parsedSearchKeys[4]]}\n image-source={\n dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]]\n }\n custom-styles={serializedStyles}\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 <searchcraft-error-message\n error-message={`No search results found for \"${this.query}\" query`}\n />\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/loader.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["searchcraft-auto-search-form_13",[[1,"searchcraft-auto-search-form",{"autoSearchFormClass":[1,"auto-search-form-class"],"clearInput":[16],"config":[16],"customStylesForInput":[1,"custom-styles-for-input"],"inputCaptionValue":[1,"input-caption-value"],"inputIconHeight":[2,"input-icon-height"],"inputIconWidth":[2,"input-icon-width"],"labelForInput":[1,"label-for-input"],"placeholderValue":[1,"placeholder-value"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"searchContainerClass":[1,"search-container-class"],"error":[32],"isRequesting":[32],"query":[32],"searchResults":[32]}],[1,"searchcraft-base-search-results",{"searchKeys":[1,"search-keys"],"customStylesForResults":[1,"custom-styles-for-results"],"placeAdAtEnd":[4,"place-ad-at-end"],"adInterval":[2,"ad-interval"],"query":[32],"searchResults":[32]}],[1,"searchcraft-base-search-result",{"buttonText":[1,"button-text"],"imageDescription":[1,"image-description"],"imageSource":[1,"image-source"],"isInteractive":[4,"is-interactive"],"primaryContent":[1,"primary-content"],"secondaryContent":[1,"secondary-content"],"tertiaryContent":[1,"tertiary-content"],"headingText":[1,"heading-text"],"subheadingText":[1,"subheading-text"],"themeMode":[1,"theme-mode"],"customStyles":[1,"custom-styles"]}],[1,"searchcraft-input",{"customStyles":[1,"custom-styles"],"error":[4],"formClassName":[1,"form-class-name"],"inputCaptionClassName":[1,"input-caption-class-name"],"inputCaptionValue":[1,"input-caption-value"],"inputClassName":[1,"input-class-name"],"inputIconHeight":[2,"input-icon-height"],"inputIconWidth":[2,"input-icon-width"],"isRequesting":[4,"is-requesting"],"placeholderValue":[1,"placeholder-value"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"query":[1],"theme":[32]}],[1,"searchcraft-input-label",{"inputLabelClassName":[1,"input-label-class-name"],"label":[1],"theme":[32]}],[1,"searchcraft-clear-input-button",{"isRequesting":[4,"is-requesting"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"theme":[32]}],[1,"searchcraft-input-icon",{"error":[4],"rightToLeftOrientation":[4,"right-to-left-orientation"],"height":[2],"width":[2],"theme":[32]}],[1,"searchcraft-error-message",{"errorMessage":[1,"error-message"],"theme":[1]}],[1,"searchcraft-input-caption",{"error":[4],"inputCaptionClassName":[1,"input-caption-class-name"],"inputCaptionValue":[1,"input-caption-value"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"theme":[32]}],[1,"searchcraft-clear-icon-set",{"type":[1]}],[1,"searchcraft-search-icon-set",{"type":[1],"width":[2],"height":[2]}],[1,"searchcraft-spinner-light"],[1,"searchcraft-spinner-dark"]]],["searchcraft-base-search-form",[[1,"searchcraft-base-search-form",{"config":[16],"errorMessage":[1,"error-message"],"labelForInput":[1,"label-for-input"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"error":[32],"query":[32],"searchResults":[32]}]]],["searchcraft-button-icon",[[1,"searchcraft-button-icon"]]],["searchcraft-button",[[1,"searchcraft-button",{"iconElement":[16],"iconOnly":[4,"icon-only"],"iconPosition":[1,"icon-position"],"label":[1],"isRequesting":[32],"theme":[32]}]]]], options);
+  return bootstrapLazy([["searchcraft-auto-search-form_13",[[1,"searchcraft-auto-search-form",{"autoSearchFormClass":[1,"auto-search-form-class"],"clearInput":[16],"config":[16],"customStylesForInput":[1,"custom-styles-for-input"],"inputCaptionValue":[1,"input-caption-value"],"inputIconHeight":[2,"input-icon-height"],"inputIconWidth":[2,"input-icon-width"],"labelForInput":[1,"label-for-input"],"placeholderValue":[1,"placeholder-value"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"searchContainerClass":[1,"search-container-class"],"error":[32],"isRequesting":[32],"query":[32],"searchResults":[32]}],[1,"searchcraft-base-search-results",{"searchKeys":[1,"search-keys"],"customStylesForResults":[1,"custom-styles-for-results"],"placeAdAtStart":[4,"place-ad-at-start"],"placeAdAtEnd":[4,"place-ad-at-end"],"adInterval":[2,"ad-interval"],"formatTime":[4,"format-time"],"query":[32],"searchResults":[32]}],[1,"searchcraft-base-search-result",{"buttonText":[1,"button-text"],"imageDescription":[1,"image-description"],"imageSource":[1,"image-source"],"isInteractive":[4,"is-interactive"],"primaryContent":[1,"primary-content"],"secondaryContent":[1,"secondary-content"],"tertiaryContent":[1,"tertiary-content"],"headingText":[1,"heading-text"],"subheadingText":[1,"subheading-text"],"themeMode":[1,"theme-mode"],"customStyles":[1,"custom-styles"]}],[1,"searchcraft-input",{"customStyles":[1,"custom-styles"],"error":[4],"formClassName":[1,"form-class-name"],"inputCaptionClassName":[1,"input-caption-class-name"],"inputCaptionValue":[1,"input-caption-value"],"inputClassName":[1,"input-class-name"],"inputIconHeight":[2,"input-icon-height"],"inputIconWidth":[2,"input-icon-width"],"isRequesting":[4,"is-requesting"],"placeholderValue":[1,"placeholder-value"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"query":[1],"theme":[32]}],[1,"searchcraft-input-label",{"inputLabelClassName":[1,"input-label-class-name"],"label":[1],"theme":[32]}],[1,"searchcraft-clear-input-button",{"isRequesting":[4,"is-requesting"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"theme":[32]}],[1,"searchcraft-input-icon",{"error":[4],"rightToLeftOrientation":[4,"right-to-left-orientation"],"height":[2],"width":[2],"theme":[32]}],[1,"searchcraft-error-message",{"errorMessage":[1,"error-message"],"theme":[1]}],[1,"searchcraft-input-caption",{"error":[4],"inputCaptionClassName":[1,"input-caption-class-name"],"inputCaptionValue":[1,"input-caption-value"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"theme":[32]}],[1,"searchcraft-clear-icon-set",{"type":[1]}],[1,"searchcraft-search-icon-set",{"type":[1],"width":[2],"height":[2]}],[1,"searchcraft-spinner-light"],[1,"searchcraft-spinner-dark"]]],["searchcraft-base-search-form",[[1,"searchcraft-base-search-form",{"config":[16],"errorMessage":[1,"error-message"],"labelForInput":[1,"label-for-input"],"rightToLeftOrientation":[4,"right-to-left-orientation"],"error":[32],"query":[32],"searchResults":[32]}]]],["searchcraft-button-icon",[[1,"searchcraft-button-icon"]]],["searchcraft-button",[[1,"searchcraft-button",{"iconElement":[16],"iconOnly":[4,"icon-only"],"iconPosition":[1,"icon-position"],"label":[1],"isRequesting":[32],"theme":[32]}]]]], options);
 };
 export { defineCustomElements };

package/dist/esm/searchcraft-auto-search-form_13.entry.js CHANGED Viewed

@@ -150,7 +150,7 @@ const SearchcraftBaseSearchResult = class {
 };
 SearchcraftBaseSearchResult.style = SearchcraftBaseSearchResultStyle0;
-const searchcraftBaseSearchResultsModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.resultsContainer{display:flex;flex-direction:column;justify-content:center;margin:100px 20px}.resultsContainer>p{align-self:center}.resultsContainer>div{margin-bottom:20px}.resultsContainer>div img{height:300px;width:200px}.adSection{align-items:center;border:1px solid #DCDDDE;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}";
+const searchcraftBaseSearchResultsModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.resultsContainer{display:flex;flex-direction:column;justify-content:center;margin:100px 20px}.resultsContainer>p{align-self:center}.resultsContainer>div{margin-bottom:20px}.resultsContainer>div img{height:300px;width:200px}.adSection{align-items:center;border:1px solid #DCDDDE;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}";
 const SearchcraftBaseSearchResultsStyle0 = searchcraftBaseSearchResultsModuleCss;
 const SearchcraftBaseSearchResults = class {
@@ -160,8 +160,10 @@ const SearchcraftBaseSearchResults = class {
         this.searchResults = null;
         this.searchKeys = '';
         this.customStylesForResults = {};
+        this.placeAdAtStart = true;
         this.placeAdAtEnd = false;
         this.adInterval = 4;
+        this.formatTime = true;
     }
     componentDidLoad() {
         if (!this.searchKeys || this.searchKeys.length === 0) {
@@ -181,11 +183,30 @@ const SearchcraftBaseSearchResults = class {
             this.unsubscribe();
         }
     }
+    timeAgo(timestamp) {
+        const now = new Date();
+        const inputTime = new Date(timestamp);
+        const diffInSeconds = Math.floor((now.getTime() - inputTime.getTime()) / 1000);
+        const minutes = Math.floor(diffInSeconds / 60);
+        const hours = Math.floor(minutes / 60);
+        const days = Math.floor(hours / 24);
+        const years = Math.floor(days / 365);
+        if (minutes < 60) {
+            return `${minutes}m ago`;
+        }
+        if (hours < 24) {
+            return `${hours}h ago`;
+        }
+        if (days < 365) {
+            return `${days}d ago`;
+        }
+        return `${years}y ago`;
+    }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
         if (!((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data)) {
             console.warn('No search results data available');
-            return h("div", null, "No results to display.");
+            return h("div", { class: 'emptyState' }, "No results to display.");
         }
         const parsedSearchKeys = parseSearchKeys(this.searchKeys);
         const serializedStyles = typeof this.customStylesForResults === 'string'
@@ -194,10 +215,25 @@ const SearchcraftBaseSearchResults = class {
         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);
+            // Apply timeAgo formatting if formatTime is true
+            if (this.formatTime) {
+                for (const key of parsedSearchKeys) {
+                    if (dynamicProperties[key]) {
+                        const value = dynamicProperties[key];
+                        // Check if the value is a valid ISO timestamp
+                        if (typeof value === 'string' &&
+                            !Number.isNaN(Date.parse(value))) {
+                            dynamicProperties[key] = this.timeAgo(value);
+                        }
+                    }
+                }
+            }
             return (h("searchcraft-base-search-result", { key: `${document.document_id}-${index}`, "button-callback": () => console.log('button callback'), "result-callback": () => console.log('interactive element'), "keydown-callback": () => console.log('keydown'), "is-interactive": true, "heading-text": dynamicProperties[parsedSearchKeys[0]], "subheading-text": dynamicProperties[parsedSearchKeys[1]], "primary-content": dynamicProperties[parsedSearchKeys[2]], "secondary-content": dynamicProperties[parsedSearchKeys[3]], "tertiary-content": dynamicProperties[parsedSearchKeys[4]], "image-source": dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]], "custom-styles": serializedStyles }));
         });
         const finalComponents = [];
-        // Add ads at specified intervals
+        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);
@@ -209,7 +245,6 @@ const SearchcraftBaseSearchResults = class {
         else {
             finalComponents.push(...resultsComponents);
         }
-        // Add ad at the end if specified
         if (this.placeAdAtEnd) {
             finalComponents.push(h("div", { key: 'ad-section-end', class: 'adSection' }, h("span", null, "##"), h("p", null, " Ad Impressions")));
         }