@searchcraft/javascript-sdk 0.2.4 → 0.2.6

package/dist/esm/searchcraft-auto-search-form_17.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-0ac5bb53.js';
-import { u as useSearchcraftStore, g } from './store-97358312.js';
-import { p as parseCustomStyles, a as parseSearchKeys, s as serializeStyles, e as extractDynamicProperties, g as getFormattedTimeFromNow } from './utils-dbb6302b.js';
+import { u as useSearchcraftStore, g } from './store-9e0b0710.js';
+import { p as parseCustomStyles, a as parseSearchKeys, s as serializeStyles, e as extractDynamicProperties, g as getFormattedTimeFromNow, f as flattenFacets } from './utils-a3373179.js';
 import { c as classNames } from './index-72ac5051.js';
 
 const searchcraftAutoSearchFormModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.formLTR{font-family:var(--font-stack);text-align:left;width:100%}.formRTL{font-family:var(--font-stack);text-align:right;width:100%}";
@@ -109,7 +109,7 @@ const SearchcraftAutoSearchForm = class {
 };
 SearchcraftAutoSearchForm.style = SearchcraftAutoSearchFormStyle0;
 
-const searchcraftBaseSearchResultModuleCss = "@charset \"UTF-8\";:root{--font-stack:Helvetica, Arial, sans-serif}.interactiveResultContainerLight{align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;position:relative;background-color:#FAFAFA}@media (min-width: 600px){.interactiveResultContainerLight{flex-direction:row}}.interactiveResultContainerDark{align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;position:relative;background-color:#2E2E2E}@media (min-width: 600px){.interactiveResultContainerDark{flex-direction:row}}.resultContainer{align-items:flex-start;display:flex;flex-direction:column;gap:16px}@media (min-width: 600px){.resultContainer{flex-direction:row}}.interactiveIconLarge{display:inline-block;position:absolute;right:5px;top:8px}@media (max-width: 600px){.interactiveIconLarge{display:none}}.interactiveIconSmall{display:inline-block;position:absolute;right:5px;top:-2px}@media (min-width: 600px){.interactiveIconSmall{display:none}}.imageContainer{max-width:100%}.contentContainer{max-height:100%;max-width:100%}@media (min-width: 600px){.contentContainer{max-width:50%}}.secondaryContentContainer{display:flex}.imageLight{aspect-ratio:2/1;border-radius:8px;max-height:100%;max-width:100%;border:1px solid #D9D9D9}.imageDark{aspect-ratio:2/1;border-radius:8px;max-height:100%;max-width:100%;border:1px solid #333}.headingLight{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;position:relative;color:#292929}.headingDark{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;position:relative;color:#FFF}.subheadingLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#737373}.subheadingDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#BFBFBF}.primaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.primaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.secondaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.secondaryContentLight::after{content:\"•\";color:#404040;font-size:1em;margin-left:5px;margin-right:5px}.secondaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.tertiaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.tertiaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}";
+const searchcraftBaseSearchResultModuleCss = "@charset \"UTF-8\";:root{--font-stack:Helvetica, Arial, sans-serif}.interactiveResultContainerLight{align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;position:relative;background-color:#FAFAFA}@media (min-width: 600px){.interactiveResultContainerLight{flex-direction:row}}.interactiveResultContainerDark{align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;position:relative;background-color:#2E2E2E}@media (min-width: 600px){.interactiveResultContainerDark{flex-direction:row}}.resultContainer{align-items:flex-start;display:flex;flex-direction:column;gap:16px}@media (min-width: 600px){.resultContainer{flex-direction:row}}.interactiveIconLarge{display:inline-block;position:absolute;right:5px;top:8px}@media (max-width: 600px){.interactiveIconLarge{display:none}}.interactiveIconSmall{display:inline-block;position:absolute;right:5px;top:-2px}@media (min-width: 600px){.interactiveIconSmall{display:none}}.imageContainer{max-width:100%}.contentContainer{max-height:100%;max-width:100%}@media (min-width: 600px){.contentContainer{max-width:50%}}.secondaryContentContainer{display:flex}.imageLight{border-radius:8px;max-height:100%;max-width:100%;border:1px solid #D9D9D9}.imageDark{border-radius:8px;max-height:100%;max-width:100%;border:1px solid #333}.headingLight{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;position:relative;color:#292929}.headingDark{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;position:relative;color:#FFF}.subheadingLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#737373}.subheadingDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#BFBFBF}.primaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.primaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.secondaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.secondaryContentLight::after{content:\"•\";color:#404040;font-size:1em;margin-left:5px;margin-right:5px}.secondaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.tertiaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.tertiaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}";
 const SearchcraftBaseSearchResultStyle0 = searchcraftBaseSearchResultModuleCss;
 
 const SearchcraftBaseSearchResult = class {
@@ -140,6 +140,7 @@ const SearchcraftBaseSearchResult = class {
         this.subheadingText = '';
         this.tertiaryContent = '';
         this.themeMode = 'light';
+        this.placeImageRight = false;
     }
     parseStyles() {
         try {
@@ -153,11 +154,13 @@ const SearchcraftBaseSearchResult = class {
     render() {
         const isLightTheme = this.themeMode === 'light';
         const styles = this.parseStyles();
-        return (h("div", { key: '91cfc671b0b99082915df3eaafa053a9a7f77929', class: this.isInteractive
+        const imageContainer = this.imageSource && (h("div", { key: '1dee969549e02c262a9fdf050438630961d1954e', class: 'imageContainer' }, h("img", { key: '2a08fd81d563ad2f18e91d22449afefb772244c8', alt: this.imageDescription, class: isLightTheme ? 'imageLight' : 'imageDark', src: this.imageSource, style: styles.image || {} })));
+        const contentContainer = (h("div", { key: '93f350bba36c296377dc09824d86631e4f731e78', class: 'contentContainer' }, h("h2", { key: 'd630e930eba15b86c84f7e62f73d1d3539c3650d', class: isLightTheme ? 'headingLight' : 'headingDark', style: styles.heading || {} }, this.headingText), h("h3", { key: '0f8639094f2f64695d887b2de6fc1d777564cbb2', class: isLightTheme ? 'subheadingLight' : 'subheadingDark', style: styles.subheading || {} }, this.subheadingText), h("p", { key: 'e8562ca0a438f9ff0848920a5bae1e208eb3ae72', class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark', style: styles.primaryContent || {} }, this.primaryContent), h("div", { key: 'dd97fb5946a1a50ccba31ae97c8b5b6e0cac91d9', class: 'secondaryContentContainer' }, h("p", { key: '9c6d705bfbd4eccb24f5afcbaad9ec92ca6fda9f', class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark', style: styles.secondaryContent || {} }, this.secondaryContent), h("p", { key: '7147e47a9ed408066439431329cda75495567227', class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark', style: styles.tertiaryContent || {} }, this.tertiaryContent)), this.buttonText && (h("button", { key: 'e620382ea1fe2f0e60645330ec087f767ff535a0', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText))));
+        return (h("div", { key: 'a104499c8adaa7d57743aaea20ee4af7caf6bdb9', class: this.isInteractive
                 ? isLightTheme
                     ? 'interactiveResultContainerLight'
                     : 'interactiveResultContainerDark'
-                : 'resultContainer', onKeyDown: this.keyDownCallback, onClick: this.handleContainerClick, style: styles.container || {}, tabindex: '0' }, h("div", { key: 'ccda236ef60aee285472155889c5490c69a86415', class: 'imageContainer' }, h("img", { key: 'e55d743952e2997d91f6486436e3a7955ffc1dcc', alt: this.imageDescription, class: isLightTheme ? 'imageLight' : 'imageDark', src: this.imageSource, style: styles.image || {} })), h("div", { key: 'b0e831c0c7bfef46b8b6da4e84536adf3ebd7158', class: 'contentContainer' }, h("h2", { key: '54137612623a39d711f4e3c888bf2015b6fb9500', class: isLightTheme ? 'headingLight' : 'headingDark', style: styles.heading || {} }, this.headingText), h("h3", { key: 'de46df990be3d0b5d2134d272e1766e911ab094a', class: isLightTheme ? 'subheadingLight' : 'subheadingDark', style: styles.subheading || {} }, this.subheadingText), h("p", { key: 'd9e7656bc739b0dd2267f86ac51b17d9ca16da6a', class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark', style: styles.primaryContent || {} }, this.primaryContent), h("div", { key: 'd05813b3da29b8b21c2e370db9c0cbc7b48b9556', class: 'secondaryContentContainer' }, h("p", { key: 'e8d2ede937705a5bd88927779ee24e35ba2efbd8', class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark', style: styles.secondaryContent || {} }, this.secondaryContent), h("p", { key: '2f9b9f603d55bcefe8347675cb31f705b1f7a0e8', class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark', style: styles.tertiaryContent || {} }, this.tertiaryContent)), this.buttonText && (h("button", { key: '58724046c9704974cb3ae1c34335ebb7131b91ab', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText)))));
+                : 'resultContainer', onKeyDown: this.keyDownCallback, onClick: this.handleContainerClick, style: styles.container || {}, tabindex: '0' }, this.placeImageRight ? (h(Fragment, null, contentContainer, imageContainer)) : (h(Fragment, null, imageContainer, contentContainer))));
     }
 };
 SearchcraftBaseSearchResult.style = SearchcraftBaseSearchResultStyle0;
@@ -175,6 +178,7 @@ const SearchcraftBaseSearchResults = class {
         this.formatTime = true;
         this.placeAdAtEnd = false;
         this.placeAdAtStart = true;
+        this.placeResultImageRight = false;
         this.hasSearched = false;
         this.query = '';
         this.searchResults = null;
@@ -232,7 +236,7 @@ const SearchcraftBaseSearchResults = class {
                     }
                 }
             }
-            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]], "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[parsedSearchKeys.length - 1]], "is-interactive": true, key: `${document.document_id}-${index}`, "keydown-callback": () => console.log('keydown'), "heading-text": dynamicProperties[parsedSearchKeys[0]], "place-image-right": this.placeResultImageRight, "primary-content": dynamicProperties[parsedSearchKeys[2]], "result-callback": () => console.log('interactive element'), "secondary-content": dynamicProperties[parsedSearchKeys[3]], "subheading-text": dynamicProperties[parsedSearchKeys[1]], "tertiary-content": dynamicProperties[parsedSearchKeys[4]] }));
         });
         const finalComponents = [];
         if (this.placeAdAtStart) {
@@ -334,29 +338,42 @@ const SearchcraftFiltersList = class {
             else {
                 this.selectedFilters.delete(value);
             }
-            const selectedFiltersArray = Array.from(this.selectedFilters);
-            this.filtersUpdated.emit(selectedFiltersArray);
-            this.searchStore.setSelectedFilters(selectedFiltersArray);
+            const deduplicatedFilters = this.deduplicatePaths(Array.from(this.selectedFilters));
+            this.filtersUpdated.emit(deduplicatedFilters);
+            this.searchStore.setSelectedFilters(deduplicatedFilters);
             this.searchStore.search();
         };
         this.filters = [];
         this.dynamicFilters = [];
-        this.initialFilters = [];
         this.isRequesting = false;
-        this.originalFilterCounts = {};
         this.query = '';
         this.resultsCount = 0;
         this.selectedFilters = new Set();
     }
     connectedCallback() {
+        var _a;
+        const state = this.searchStore; // Fetch the initial state
+        // Initial population of facets if available
+        if ((_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data.facets) {
+            this.populateFiltersFromFacets(state.searchResults.data.facets);
+        }
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
             var _a, _b, _c, _d;
-            this.isRequesting = state.isRequesting;
+            if (!state.query || state.query.trim().length === 0) {
+                if (this.selectedFilters.size > 0) {
+                    this.selectedFilters.clear();
+                    this.filtersUpdated.emit([]);
+                    if (this.searchStore.selectedFilters.length > 0) {
+                        this.searchStore.setSelectedFilters([]);
+                    }
+                }
+            }
             this.query = state.query || '';
+            this.isRequesting = state.isRequesting;
             this.resultsCount = ((_c = (_b = (_a = state.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;
-            const facets = (_d = state.searchResults) === null || _d === void 0 ? void 0 : _d.data.facets;
-            if (facets) {
-                this.populateFiltersFromFacets(facets);
+            // Populate filters when facets are updated
+            if ((_d = state.searchResults) === null || _d === void 0 ? void 0 : _d.data.facets) {
+                this.populateFiltersFromFacets(state.searchResults.data.facets);
             }
         });
     }
@@ -367,24 +384,28 @@ const SearchcraftFiltersList = class {
     }
     populateFiltersFromFacets(facets) {
         var _a;
-        const newFilters = Object.entries(((_a = facets.section) === null || _a === void 0 ? void 0 : _a.counts) || {}).map(([key, count]) => {
-            const filterValue = key;
-            this.originalFilterCounts[filterValue] = `${count}`;
-            return {
-                label: `${key.replace(/^\//, '')} (${count})`,
-                value: filterValue,
-            };
+        const newFilters = flattenFacets(((_a = facets[0]) === null || _a === void 0 ? void 0 : _a.section) || []);
+        const filtersMap = new Map();
+        newFilters.forEach((filter) => {
+            const key = filter.value.split('/').pop() || '';
+            const existingFilter = filtersMap.get(key);
+            if (!existingFilter ||
+                filter.value.length < existingFilter.value.length) {
+                filtersMap.set(key, filter);
+            }
         });
-        // Update dynamic filters while preserving the initial filters
-        const updatedFilters = [
-            ...this.initialFilters,
-            ...newFilters.filter((filter) => !this.initialFilters.some((initial) => initial.value === filter.value)),
-        ];
-        this.dynamicFilters = updatedFilters;
-        // Store the initial filters only once
-        if (this.initialFilters.length === 0) {
-            this.initialFilters = [...updatedFilters];
-        }
+        this.dynamicFilters = Array.from(filtersMap.values());
+    }
+    deduplicatePaths(filters) {
+        const pathMap = new Map();
+        filters.forEach((path) => {
+            const key = path.split('/').pop() || '';
+            const existingPath = pathMap.get(key);
+            if (!existingPath || path.length < existingPath.length) {
+                pathMap.set(key, path);
+            }
+        });
+        return Array.from(pathMap.values());
     }
     formatLabel(label) {
         return label
@@ -397,17 +418,16 @@ const SearchcraftFiltersList = class {
         if (!this.query || this.resultsCount === 0) {
             return null;
         }
-        const filtersToRender = this.initialFilters.map((initialFilter) => {
-            const isChecked = this.selectedFilters.has(initialFilter.value);
-            const dynamicChildren = this.dynamicFilters.filter((dynamicFilter) => dynamicFilter.value.startsWith(initialFilter.value) &&
-                dynamicFilter.value !== initialFilter.value);
-            return Object.assign(Object.assign({}, initialFilter), { isChecked, children: dynamicChildren });
-        });
-        return (h("div", { class: 'filtersList' }, filtersToRender.map((filter) => (h("div", { key: filter.value }, h("label", { class: 'checkboxLabel' }, h("input", { class: 'filterCheckbox', checked: filter.isChecked, onChange: (event) => this.handleFilterChange(filter.value, event.target.checked), type: 'checkbox', value: filter.value }), this.formatLabel(filter.label)), filter.isChecked &&
-            filter.children.map((childFilter) => {
-                const childLabel = childFilter.label.split('/').pop();
-                return (h("label", { class: 'childCheckboxLabel', key: childFilter.value, style: { marginLeft: '20px' } }, h("input", { class: 'childFilterCheckbox', checked: this.selectedFilters.has(childFilter.value), onChange: (event) => this.handleFilterChange(childFilter.value, event.target.checked), type: 'checkbox', value: childFilter.value }), this.formatLabel(childLabel || '')));
-            }))))));
+        const filtersToRender = this.dynamicFilters.filter((filter) => !filter.value.includes('/', filter.value.indexOf('/') + 1));
+        return (h("div", { class: 'filtersList' }, filtersToRender.map((filter) => {
+            const isChecked = this.selectedFilters.has(filter.value);
+            const children = this.dynamicFilters.filter((child) => child.value.startsWith(`${filter.value}/`) &&
+                child.value !== filter.value);
+            return (h("div", { key: filter.value }, h("label", { class: 'checkboxLabel' }, h("input", { class: 'filterCheckbox', checked: isChecked, onChange: (event) => this.handleFilterChange(filter.value, event.target.checked), type: 'checkbox' }), this.formatLabel(filter.label)), children.map((child) => {
+                const isChildChecked = this.selectedFilters.has(child.value);
+                return (h("label", { class: 'childCheckboxLabel', key: child.value, style: { marginLeft: '20px' } }, h("input", { class: 'childFilterCheckbox', checked: isChildChecked, onChange: (event) => this.handleFilterChange(child.value, event.target.checked), type: 'checkbox' }), this.formatLabel(child.label.split('/').pop() || '')));
+            })));
+        })));
     }
 };
 SearchcraftFiltersList.style = SearchcraftFiltersListStyle0;