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/components/searchcraft-base-search-results.js CHANGED Viewed

@@ -1,8 +1,9 @@
-import { p as proxyCustomElement, H, h } from './p-7498e493.js';
-import { u as useSearchcraftStore } from './p-ff049f0a.js';
-import { a as parseSearchKeys, s as serializeStyles, e as extractDynamicProperties, g as getFormattedTimeFromNow } from './p-7d1bcd2d.js';
-import { d as defineCustomElement$3 } from './p-c31274dd.js';
-import { d as defineCustomElement$2 } from './p-498c7ef9.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-6b353c3e.js';
+import { c as classNames } from './p-5cdc6210.js';
+import { u as useSearchcraftStore } from './p-727bfc38.js';
+import { a as parseSearchKeys, s as serializeStyles, e as extractDynamicProperties, g as getFormattedTimeFromNow } from './p-62c40862.js';
+import { d as defineCustomElement$3 } from './p-cd9a038a.js';
+import { d as defineCustomElement$2 } from './p-5015a359.js';
 const searchcraftBaseSearchResultsModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.resultsContainer{display:flex;flex-direction:column;justify-content:center;margin:16px 0}.resultsContainer>p{align-self:center}.resultsContainer>div{margin-bottom:20px}.resultsContainer>div img{height:300px;width:200px}.adSection{align-items:center;background-color:#F1F1F1;border:1px solid #DCDDDE;border-radius:16px;display:flex;flex-direction:column;font-size:16px;justify-content:center;margin:auto;min-height:150px;text-align:center;width:100%}.adSection p{margin-top:5px}.emptyState{text-align:center;width:100%}.errorMessageContainer{text-align:center}";
 const SearchcraftBaseSearchResultsStyle0 = searchcraftBaseSearchResultsModuleCss;
@@ -11,7 +12,7 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
+        this.noResults = createEvent(this, "noResults", 7);
         this.adInterval = 4;
         this.customStylesForResults = {};
         this.documentAttributesForDisplay = '';
@@ -20,6 +21,7 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
         this.placeAdAtEnd = false;
         this.placeAdAtStart = true;
         this.placeResultImageRight = false;
+        this.isInteractive = false;
         this.hasSearched = false;
         this.query = '';
         this.searchResults = null;
@@ -50,9 +52,9 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
         }
     }
     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;
@@ -75,17 +77,17 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
                     }
                 }
             }
-            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")));
                 }
             });
         }
@@ -93,13 +95,16 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
             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 style() { return SearchcraftBaseSearchResultsStyle0; }
-}, [1, "searchcraft-base-search-results", {
+}, [4, "searchcraft-base-search-results", {
         "adInterval": [2, "ad-interval"],
         "customStylesForResults": [1, "custom-styles-for-results"],
         "documentAttributesForDisplay": [1, "document-attributes-for-display"],
@@ -108,6 +113,7 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
         "placeAdAtEnd": [4, "place-ad-at-end"],
         "placeAdAtStart": [4, "place-ad-at-start"],
         "placeResultImageRight": [4, "place-result-image-right"],
+        "isInteractive": [4, "is-interactive"],
         "hasSearched": [32],
         "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: 16px 0;\n\n & > p {\n align-self: center;\n }\n\n & > div {\n margin-bottom: 20px;\n img {\n height: 300px;\n width: 200px;\n }\n }\n}\n\n.adSection {\n align-items: center;\n background-color: #F1F1F1;\n border: 1px solid #DCDDDE;\n border-radius: 16px;\n display: flex;\n flex-direction: column;\n font-size: 16px;\n justify-content: center;\n margin: auto;\n min-height: 150px;\n text-align: center;\n width: 100%;\n\n p {\n margin-top: 5px;\n }\n}\n\n.emptyState {\n text-align: center;\n width: 100%;\n}\n\n.errorMessageContainer {\n text-align: center;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\n\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport {\n extractDynamicProperties,\n getFormattedTimeFromNow,\n parseSearchKeys,\n serializeStyles,\n} from '@utils/utils';\n\n@Component({\n tag: 'searchcraft-base-search-results',\n styleUrl: 'searchcraft-base-search-results.module.scss',\n shadow: true,\n})\nexport class SearchcraftBaseSearchResults {\n @Prop() adInterval = 4;\n @Prop() customStylesForResults:\n \| string\n \| Record<string, Record<string, string>> = {};\n @Prop() documentAttributesForDisplay = '';\n @Prop() fallbackElement: HTMLElement \| null = null;\n @Prop() formatTime = true;\n @Prop() placeAdAtEnd = false;\n @Prop() placeAdAtStart = true;\n @Prop() placeResultImageRight = false;\n\n @State() hasSearched = false;\n @State() query = '';\n @State() searchResults: SearchcraftResponse \| null = null;\n\n private unsubscribe: () => void;\n\n componentDidLoad() {\n if (\n !this.documentAttributesForDisplay \|\|\n this.documentAttributesForDisplay.length === 0\n ) {\n console.warn('No document attributes provided; using empty keys array.');\n this.documentAttributesForDisplay = '';\n }\n\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n if (state.query.length > 0) {\n this.hasSearched = true;\n } else {\n this.hasSearched = false;\n }\n this.searchResults = { ...state.searchResults };\n this.query = state.query;\n });\n\n const { searchResults, query } = useSearchcraftStore.getState();\n this.searchResults = searchResults;\n this.query = query;\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n }\n\n render() {\n if (!this.hasSearched) {\n return (\n <div class='emptyState'>\n <slot name='empty-search' />\n </div>\n );\n }\n\n if (!this.searchResults?.data) {\n return;\n }\n\n const parsedSearchKeys = parseSearchKeys(this.documentAttributesForDisplay);\n const serializedStyles =\n typeof this.customStylesForResults === 'string'\n ? this.customStylesForResults\n : serializeStyles(this.customStylesForResults);\n\n const resultsComponents = this.searchResults?.data?.hits?.map(\n (document, index) => {\n const { doc: result } = document;\n const dynamicProperties = extractDynamicProperties(\n result,\n parsedSearchKeys,\n );\n\n if (this.formatTime) {\n for (const key of parsedSearchKeys) {\n if (dynamicProperties[key]) {\n const value = dynamicProperties[key];\n if (\n typeof value === 'string' &&\n !Number.isNaN(Date.parse(value))\n ) {\n dynamicProperties[key] = getFormattedTimeFromNow(value);\n }\n }\n }\n }\n\n return (\n <searchcraft-base-search-result\n button-callback={() => console.log('button callback')}\n custom-styles={serializedStyles}\n image-source={\n dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]]\n }\n is-interactive={true}\n key={`${document.document_id}-${index}`}\n keydown-callback={() => console.log('keydown')}\n heading-text={dynamicProperties[parsedSearchKeys[0]]}\n place-image-right={this.placeResultImageRight}\n primary-content={dynamicProperties[parsedSearchKeys[2]]}\n result-callback={() => console.log('interactive element')}\n secondary-content={dynamicProperties[parsedSearchKeys[3]]}\n subheading-text={dynamicProperties[parsedSearchKeys[1]]}\n tertiary-content={dynamicProperties[parsedSearchKeys[4]]}\n />\n );\n },\n );\n\n const finalComponents: JSX.Element[] = [];\n\n if (this.placeAdAtStart) {\n finalComponents.push(\n <div key='ad-section-start' class='adSection'>\n <span>##</span>\n <p> Ad Impressions</p>\n </div>,\n );\n }\n\n if (this.adInterval > 0) {\n resultsComponents.forEach((component, index) => {\n finalComponents.push(component);\n if ((index + 1) % this.adInterval === 0) {\n finalComponents.push(\n <div key={`ad-section-${index + 1}`} class='adSection'>\n <span>##</span>\n <p> Ad Impressions</p>\n </div>,\n );\n }\n });\n } else {\n finalComponents.push(...resultsComponents);\n }\n\n if (this.placeAdAtEnd) {\n finalComponents.push(\n <div key='ad-section-end' class='adSection'>\n <span>##</span>\n <p> Ad Impressions</p>\n </div>,\n );\n }\n\n return (\n <div class='resultsContainer'>\n {finalComponents}\n {this.query.length > 0 &&\n this.searchResults?.data?.hits?.length === 0 && (\n <div class='errorMessageContainer'>\n <searchcraft-error-message\n error-message={`No search results found for \"${this.query}\" query`}\n />\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}
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","src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"sourcesContent":[":root {\n --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.resultsContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin: 16px 0;\n\n & > p {\n align-self: center;\n }\n\n & > div {\n margin-bottom: 20px;\n img {\n height: 300px;\n width: 200px;\n }\n }\n}\n\n.adSection {\n align-items: center;\n background-color: #F1F1F1;\n border: 1px solid #DCDDDE;\n border-radius: 16px;\n display: flex;\n flex-direction: column;\n font-size: 16px;\n justify-content: center;\n margin: auto;\n min-height: 150px;\n text-align: center;\n width: 100%;\n\n p {\n margin-top: 5px;\n }\n}\n\n.emptyState {\n text-align: center;\n width: 100%;\n}\n\n.errorMessageContainer {\n text-align: center;\n}\n","import {\n Component,\n h,\n Event,\n Prop,\n State,\n type EventEmitter,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport {\n extractDynamicProperties,\n getFormattedTimeFromNow,\n parseSearchKeys,\n serializeStyles,\n} from '@utils/utils';\n\n@Component({\n tag: 'searchcraft-base-search-results',\n styleUrl: 'searchcraft-base-search-results.module.scss',\n shadow: false,\n})\nexport class SearchcraftBaseSearchResults {\n @Prop() adInterval = 4;\n @Prop() customStylesForResults:\n \| string\n \| Record<string, Record<string, string>> = {};\n @Prop() documentAttributesForDisplay = '';\n @Prop() fallbackElement: HTMLElement \| null = null;\n @Prop() formatTime = true;\n @Prop() placeAdAtEnd = false;\n @Prop() placeAdAtStart = true;\n @Prop() placeResultImageRight = false;\n @Prop() isInteractive = false;\n\n @Event() noResults: EventEmitter<void>;\n\n @State() hasSearched = false;\n @State() query = '';\n @State() searchResults: SearchcraftResponse \| null = null;\n\n private unsubscribe: () => void;\n\n componentDidLoad() {\n if (\n !this.documentAttributesForDisplay \|\|\n this.documentAttributesForDisplay.length === 0\n ) {\n console.warn('No document attributes provided; using empty keys array.');\n this.documentAttributesForDisplay = '';\n }\n\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n if (state.query.length > 0) {\n this.hasSearched = true;\n } else {\n this.hasSearched = false;\n }\n this.searchResults = { ...state.searchResults };\n this.query = state.query;\n });\n\n const { searchResults, query } = useSearchcraftStore.getState();\n this.searchResults = searchResults;\n this.query = query;\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n }\n\n render() {\n if (!this.hasSearched) {\n return (\n <div\n class={classNames(\n 'emptyState',\n 'searchcraft-search-results-empty-state-container',\n )}\n >\n <slot name='empty-search' />\n </div>\n );\n }\n\n if (!this.searchResults?.data) {\n return;\n }\n\n const parsedSearchKeys = parseSearchKeys(this.documentAttributesForDisplay);\n const serializedStyles =\n typeof this.customStylesForResults === 'string'\n ? this.customStylesForResults\n : serializeStyles(this.customStylesForResults);\n\n const resultsComponents = this.searchResults?.data?.hits?.map(\n (document, index) => {\n const { doc: result } = document;\n const dynamicProperties = extractDynamicProperties(\n result,\n parsedSearchKeys,\n );\n\n if (this.formatTime) {\n for (const key of parsedSearchKeys) {\n if (dynamicProperties[key]) {\n const value = dynamicProperties[key];\n if (\n typeof value === 'string' &&\n !Number.isNaN(Date.parse(value))\n ) {\n dynamicProperties[key] = getFormattedTimeFromNow(value);\n }\n }\n }\n }\n\n return (\n <searchcraft-base-search-result\n button-callback={() => console.log('button callback')}\n custom-styles={serializedStyles}\n image-source={dynamicProperties[parsedSearchKeys[5]]}\n is-interactive={this.isInteractive}\n key={`${document.document_id}-${index}`}\n keydown-callback={() => console.log('keydown')}\n linkHref={dynamicProperties[parsedSearchKeys[6]] as string}\n place-image-right={this.placeResultImageRight}\n primary-content={dynamicProperties[parsedSearchKeys[2]]}\n result-callback={() => console.log('interactive element')}\n secondary-content={dynamicProperties[parsedSearchKeys[3]]}\n subtitle-content={dynamicProperties[parsedSearchKeys[1]]}\n tertiary-content={dynamicProperties[parsedSearchKeys[4]]}\n title-content={dynamicProperties[parsedSearchKeys[0]]}\n document-position={index}\n />\n );\n },\n );\n\n const finalComponents: JSX.Element[] = [];\n\n if (this.placeAdAtStart) {\n finalComponents.push(\n <div\n key='ad-section-start'\n class={classNames(\n 'adSection',\n 'searchcraft-beginning-injected-ad-section',\n )}\n >\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\n key={`ad-section-${index + 1}`}\n class={classNames(\n 'adSection',\n 'searchcraft-dynamic-injected-ad-section',\n )}\n >\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\n key='ad-section-end'\n class={classNames('adSection', 'searchcraft-end-injected-ad-section')}\n >\n <span>##</span>\n <p> Ad Impressions</p>\n </div>,\n );\n }\n\n if (this.query.length > 0 && this.searchResults?.data?.hits?.length === 0) {\n this.noResults.emit();\n }\n\n return (\n <div\n class={classNames(\n 'resultsContainer',\n 'searchcraft-search-results-container',\n )}\n >\n {finalComponents}\n {this.query.length > 0 &&\n this.searchResults?.data?.hits?.length === 0 && (\n <div\n class={classNames(\n 'errorMessageContainer',\n 'searchcraft-search-results-error-message-container',\n )}\n >\n <searchcraft-error-message\n error-message={`No search results found for \"${this.query}\" query`}\n />\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/searchcraft-button-icon.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-7498e493.js';
+import { p as proxyCustomElement, H, h } from './p-6b353c3e.js';
 const SearchcraftButtonIcon$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftButtonIcon extends H {
     constructor() {

package/dist/components/searchcraft-button.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftButton$1, d as defineCustomElement$1 } from './p-4468fba3.js';
+import { S as SearchcraftButton$1, d as defineCustomElement$1 } from './p-7d385ffb.js';
 const SearchcraftButton = SearchcraftButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-check-icon.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftCheckIcon$1, d as defineCustomElement$1 } from './p-d3187f5a.js';
+import { S as SearchcraftCheckIcon$1, d as defineCustomElement$1 } from './p-bbf9973a.js';
 const SearchcraftCheckIcon = SearchcraftCheckIcon$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-clear-icon-set.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftClearIconSet$1, d as defineCustomElement$1 } from './p-70722ab2.js';
+import { S as SearchcraftClearIconSet$1, d as defineCustomElement$1 } from './p-62e6b69c.js';
 const SearchcraftClearIconSet = SearchcraftClearIconSet$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-clear-input-button.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftClearInputButton$1, d as defineCustomElement$1 } from './p-07edaa9b.js';
+import { S as SearchcraftClearInputButton$1, d as defineCustomElement$1 } from './p-8524c749.js';
 const SearchcraftClearInputButton = SearchcraftClearInputButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-dash-icon.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftDashIcon$1, d as defineCustomElement$1 } from './p-e5471fcf.js';
+import { S as SearchcraftDashIcon$1, d as defineCustomElement$1 } from './p-aad03c2a.js';
 const SearchcraftDashIcon = SearchcraftDashIcon$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-error-message.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftErrorMessage$1, d as defineCustomElement$1 } from './p-498c7ef9.js';
+import { S as SearchcraftErrorMessage$1, d as defineCustomElement$1 } from './p-5015a359.js';
 const SearchcraftErrorMessage = SearchcraftErrorMessage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-filters-list.js CHANGED Viewed

@@ -1,17 +1,17 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-7498e493.js';
-import { u as useSearchcraftStore } from './p-ff049f0a.js';
-import { f as flattenFacets } from './p-7d1bcd2d.js';
-import { d as defineCustomElement$3 } from './p-d3187f5a.js';
-import { d as defineCustomElement$2 } from './p-e5471fcf.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-6b353c3e.js';
+import { c as classNames } from './p-5cdc6210.js';
+import { u as useSearchcraftStore } from './p-727bfc38.js';
+import { f as flattenFacets } from './p-62c40862.js';
+import { d as defineCustomElement$3 } from './p-bbf9973a.js';
+import { d as defineCustomElement$2 } from './p-aad03c2a.js';
-const searchcraftFiltersListModuleCss = ".filtersList{width:100%}.checkboxLabel{align-items:center;color:#292929;display:flex;font-family:\"Source Sans Pro\";font-size:14px;font-weight:600;gap:14px;position:relative;-webkit-font-smoothing:antialiased}.checkboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:#EDEDED;border:1px solid #D9D9D9;cursor:pointer;display:flex;height:24px;justify-content:center;width:24px}.checkboxLabel input[type=checkbox]:checked{background-color:#000;position:relative}.checkboxLabel input[type=checkbox]:checked+.checkContainer{display:block}.checkboxLabel input[type=checkbox]:checked+.dashContainer{display:block}.remainingFilterListCheckbox{margin-left:16px}.childCheckboxLabel{align-items:center;color:#292929;display:flex;font-family:\"Source Sans Pro\";font-size:14px;font-weight:600;gap:12px;position:relative}.childCheckboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:#EDEDED;border:1px solid #D9D9D9;cursor:pointer;display:flex;height:24px;justify-content:center;position:relative;width:24px;-webkit-font-smoothing:antialiased}.childCheckboxLabel input[type=checkbox]:checked{background-color:#000;position:relative}.childCheckboxLabel input[type=checkbox]:checked+.checkContainer{display:block}.childCheckboxLabel input[type=checkbox]:checked+.dashContainer{display:block}.checkContainer{display:none;height:16px;width:16px;position:absolute;top:10px;left:7px}.dashContainer{display:none;height:3px;width:14px;position:absolute;top:5px;left:9px}.loading{align-items:center;display:flex;justify-content:center;margin:100px}";
+const searchcraftFiltersListModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.filtersListContainer{width:100%}.filterCheckboxLabel{align-items:center;color:#292929;display:flex;font-family:var(--font-stack);font-size:14px;font-weight:600;gap:14px;position:relative;-webkit-font-smoothing:antialiased}.filterCheckboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:#EBEBEB;border:1px solid #D9D9D9;border-radius:8px;cursor:pointer;display:flex;height:24px;justify-content:center;width:24px}.filterCheckboxLabel input[type=checkbox]:focus{outline:2px solid #000000}.filterCheckboxLabel input[type=checkbox]:checked{background-color:#000000;position:relative}.filterCheckboxLabel input[type=checkbox]:checked+.checkContainer{display:block}.filterCheckboxLabel input[type=checkbox]:checked+.dashContainer{display:block}.childFilterCheckboxLabel{align-items:center;color:#292929;display:flex;font-family:var(--font-stack);font-size:14px;font-weight:600;gap:12px;margin-left:24px;position:relative}.childFilterCheckboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:#EBEBEB;border:1px solid #D9D9D9;border-radius:8px;cursor:pointer;display:flex;height:24px;justify-content:center;position:relative;width:24px;-webkit-font-smoothing:antialiased}.childFilterCheckboxLabel input[type=checkbox]:focus{outline:2px solid #000000}.childFilterCheckboxLabel input[type=checkbox]:checked{background-color:#000000;position:relative}.childFilterCheckboxLabel input[type=checkbox]:checked+.checkContainer{display:block}.childFilterCheckboxLabel input[type=checkbox]:checked+.dashContainer{display:block}.checkContainer{display:none;height:16px;width:16px;position:absolute;top:9px;left:8px}.dashContainer{display:none;height:3px;width:14px;position:absolute;top:3px;left:9px}";
 const SearchcraftFiltersListStyle0 = searchcraftFiltersListModuleCss;
 const SearchcraftFiltersList$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftFiltersList extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.filtersUpdated = createEvent(this, "filtersUpdated", 7);
         this.searchStore = useSearchcraftStore.getState();
         this.autoSearchFormElement = null;
@@ -20,6 +20,7 @@ const SearchcraftFiltersList$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
             this.searchStore.setSelectedFilters([]);
             this.emitFiltersUpdate();
         };
+        this.formatLabel = (label, count) => `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
         this.filters = [];
         this.dynamicFilters = [];
         this.selectedFilters = [];
@@ -74,16 +75,13 @@ const SearchcraftFiltersList$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
             const parentFilter = this.dynamicFilters.find((filter) => filter.value === value);
             const childValues = ((_a = parentFilter === null || parentFilter === void 0 ? void 0 : parentFilter.children) === null || _a === void 0 ? void 0 : _a.map((child) => child.value)) || [];
             if (!isChecked) {
-                // Remove children from selectedFilters when parent is unchecked
                 this.selectedFilters = this.selectedFilters.filter((filter) => filter !== value && !childValues.includes(filter));
             }
             else {
-                // Add parent filter to selectedFilters
                 this.selectedFilters = [...this.selectedFilters, value];
             }
         }
         else {
-            // Update selectedFilters for child filters
             this.selectedFilters = isChecked
                 ? [...this.selectedFilters, value]
                 : this.selectedFilters.filter((filter) => filter !== value);
@@ -95,29 +93,25 @@ const SearchcraftFiltersList$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         this.searchStore.setSelectedFilters(this.selectedFilters);
         this.searchStore.search();
     }
-    formatLabel(label, count) {
-        return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
-    }
     render() {
         if (!this.query || this.resultsCount === 0) {
             return null;
         }
-        return (h("div", { class: 'filtersList' }, this.dynamicFilters.map((filter) => {
+        return (h("div", { class: classNames('filtersListContainer', 'searchcraft-filters-list-container') }, this.dynamicFilters.map((filter) => {
             const isChildSelected = filter.children
                 ? filter.children.some((child) => this.selectedFilters.includes(child.value))
                 : false;
-            return (h("div", { key: filter.value, class: 'filterItem' }, h("label", { class: 'checkboxLabel' }, h("input", { type: 'checkbox', checked: this.selectedFilters.includes(filter.value), onChange: (event) => this.handleCheckboxChange(filter.value, event.target.checked, true) }), isChildSelected ? (h("div", { class: 'dashContainer' }, h("searchcraft-dash-icon", null))) : (h("div", { class: 'checkContainer' }, h("searchcraft-check-icon", null))), this.formatLabel(filter.label, filter.count)), filter.children && filter.children.length > 0 && (h("div", { class: 'childrenContainer' }, filter.children.map((child) => (h("label", { key: child.value, class: 'childCheckboxLabel', style: {
-                    marginLeft: '20px',
+            return (h("div", { key: filter.value, class: classNames('searchcraft-filters-list-item') }, h("label", { class: classNames('filterCheckboxLabel', 'searchcraft-filters-list-checkbox-label') }, h("input", { checked: this.selectedFilters.includes(filter.value), onChange: (event) => this.handleCheckboxChange(filter.value, event.target.checked, true), type: 'checkbox' }), isChildSelected ? (h("div", { class: classNames('dashContainer', 'searchcraft-filter-list-dash-container') }, h("searchcraft-dash-icon", null))) : (h("div", { class: classNames('checkContainer', 'searchcraft-filter-list-check-container') }, h("searchcraft-check-icon", null))), this.formatLabel(filter.label, filter.count)), filter.children && filter.children.length > 0 && (h(Fragment, null, filter.children.map((child) => (h("label", { key: child.value, class: classNames('childFilterCheckboxLabel', 'searchcraft-child-filter-checkbox-label'), style: {
                     display: this.selectedFilters.includes(filter.value)
                         ? 'flex'
                         : 'none',
-                } }, h("input", { type: 'checkbox', checked: this.selectedFilters.includes(child.value), onChange: (event) => this.handleCheckboxChange(child.value, event.target.checked) }), h("div", { class: 'checkContainer' }, h("searchcraft-check-icon", null)), this.formatLabel(child.label.includes('/')
+                } }, h("input", { checked: this.selectedFilters.includes(child.value), onChange: (event) => this.handleCheckboxChange(child.value, event.target.checked), type: 'checkbox' }), h("div", { class: classNames('checkContainer', 'searchcraft-filter-list-check-container') }, h("searchcraft-check-icon", null)), this.formatLabel(child.label.includes('/')
                 ? child.label.split('/').pop() || child.label
                 : child.label, child.count))))))));
         })));
     }
     static get style() { return SearchcraftFiltersListStyle0; }
-}, [1, "searchcraft-filters-list", {
+}, [0, "searchcraft-filters-list", {
         "filters": [16],
         "dynamicFilters": [32],
         "selectedFilters": [32],

package/dist/components/searchcraft-filters-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"searchcraft-filters-list.js","mappings":";;;;;;AAAA,MAAM,+BAA+B,GAAG,qjDAAqjD,CAAC;AAC9lD,qCAAe,+BAA+B;;MCmBjCA,wBAAsB;;;;;;QAoBzB,gBAAW,GAAG,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QAC7C,0BAAqB,GAAuB,IAAI,CAAC;QA+CzD,wBAAmB,GAAG;YACpB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC;YACxC,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B,CAAC;uBAvEyD,EAAE;8BAaxD,EAAE;+BAC8B,EAAE;qBACtB,EAAE;4BACK,KAAK;4BACL,CAAC;;IAMzB,iBAAiB;;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;QAC/B,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,CAAC,MAAM,CAAC;QAEhD,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,CAAC;SACxC;QAED,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;;YACrD,MAAM,KAAK,GAAG,MAAA,KAAK,CAAC,KAAK,0CAAE,IAAI,EAAE,CAAC;YAClC,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,CAAC,MAAM,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;YACzB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;YACvC,IAAI,CAAC,YAAY,GAAG,CAAA,MAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,IAAI,0CAAE,MAAM,KAAI,CAAC,CAAC;YAEjE,IAAI,MAAM,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC/C,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,CAAC;aACxC;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CACjD,8BAA8B,CAC/B,CAAC;QACF,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC9B,IAAI,CAAC,qBAAqB,CAAC,gBAAgB,CACzC,aAAa,EACb,IAAI,CAAC,mBAAmB,CACzB,CAAC;SACH;KACF;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;QAED,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC9B,IAAI,CAAC,qBAAqB,CAAC,mBAAmB,CAC5C,aAAa,EACb,IAAI,CAAC,mBAAmB,CACzB,CAAC;SACH;KACF;IAQD,yBAAyB,CAAC,MAAc;;QACtC,MAAM,SAAS,GAAG,aAAa,CAAC,CAAA,MAAA,MAAM,CAAC,CAAC,CAAC,0CAAE,OAAO,KAAI,EAAE,CAAC,CAAC;QAC1D,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,MAAM,MAAM;YAC/C,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAI,EAAE;SAChC,CAAC,CAAC,CAAC;KACL;IAED,oBAAoB,CAAC,KAAa,EAAE,SAAkB,EAAE,QAAQ,GAAG,KAAK;;QACtE,IAAI,QAAQ,EAAE;YACZ,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAC3C,CAAC,MAAM,KAAK,MAAM,CAAC,KAAK,KAAK,KAAK,CACnC,CAAC;YACF,MAAM,WAAW,GACf,CAAA,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,QAAQ,0CAAE,GAAG,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,KAAI,EAAE,CAAC;YAE5D,IAAI,CAAC,SAAS,EAAE;;gBAEd,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAChD,CAAC,MAAM,KAAK,MAAM,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,CAC9D,CAAC;aACH;iBAAM;;gBAEL,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;aACzD;SACF;aAAM;;YAEL,IAAI,CAAC,eAAe,GAAG,SAAS;kBAC5B,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC;kBAChC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,MAAM,KAAK,KAAK,CAAC,CAAC;SAC/D;QACD,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAC/C,IAAI,CAAC,WAAW,CAAC,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAC1D,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;KAC3B;IAED,WAAW,CAAC,KAAa,EAAE,KAAa;QACtC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC;KAChG;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;YAC1C,OAAO,IAAI,CAAC;SACb;QACD,QACE,WAAK,KAAK,EAAC,aAAa,IACrB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM;YAC9B,MAAM,eAAe,GAAG,MAAM,CAAC,QAAQ;kBACnC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,KACzB,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAC3C;kBACD,KAAK,CAAC;YAEV,QACE,WAAK,GAAG,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,EAAC,YAAY,IACxC,aAAO,KAAK,EAAC,eAAe,IAC1B,aACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACpD,QAAQ,EAAE,CAAC,KAAY,KACrB,IAAI,CAAC,oBAAoB,CACvB,MAAM,CAAC,KAAK,EACX,KAAK,CAAC,MAA2B,CAAC,OAAO,EAC1C,IAAI,CACL,GAEH,EACD,eAAe,IACd,WAAK,KAAK,EAAC,eAAe,IACxB,gCAAyB,CACrB,KAEN,WAAK,KAAK,EAAC,gBAAgB,IACzB,iCAA0B,CACtB,CACP,EACA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CACvC,EACP,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,KAC5C,WAAK,KAAK,EAAC,mBAAmB,IAC3B,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,MACzB,aACE,GAAG,EAAE,KAAK,CAAC,KAAK,EAChB,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAE;oBACL,UAAU,EAAE,MAAM;oBAClB,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC;0BAChD,MAAM;0BACN,MAAM;iBACX,IAED,aACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EACnD,QAAQ,EAAE,CAAC,KAAY,KACrB,IAAI,CAAC,oBAAoB,CACvB,KAAK,CAAC,KAAK,EACV,KAAK,CAAC,MAA2B,CAAC,OAAO,CAC3C,GAEH,EACF,WAAK,KAAK,EAAC,gBAAgB,IACzB,iCAA0B,CACtB,EACL,IAAI,CAAC,WAAW,CACf,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC;kBACrB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,CAAC,KAAK;kBAC3C,KAAK,CAAC,KAAK,EACf,KAAK,CAAC,KAAK,CACZ,CACK,CACT,CAAC,CACE,CACP,CACG,EACN;SACH,CAAC,CACE,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftFiltersList"],"sources":["src/components/searchcraft-filters-list/searchcraft-filters-list.module.scss?tag=searchcraft-filters-list&encapsulation=shadow","src/components/searchcraft-filters-list/searchcraft-filters-list.tsx"],"sourcesContent":[".filtersList {\n width: 100%;\n}\n\n.checkboxLabel {\n align-items: center;\n color: #292929;\n display: flex;\n font-family: 'Source Sans Pro';\n font-size: 14px;\n font-weight: 600;\n gap: 14px;\n position: relative;\n -webkit-font-smoothing: antialiased;\n}\n\n.checkboxLabel input[type=\"checkbox\"] {\n align-items: center;\n appearance: none;\n background-color: #EDEDED;\n border: 1px solid #D9D9D9;\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n width: 24px;\n}\n\n.checkboxLabel input[type=\"checkbox\"]:checked {\n background-color: #000;\n position: relative;\n}\n\n.checkboxLabel input[type=\"checkbox\"]:checked + .checkContainer {\n display: block;\n}\n\n.checkboxLabel input[type=\"checkbox\"]:checked + .dashContainer {\n display: block;\n}\n\n.remainingFilterListCheckbox {\n margin-left: 16px;\n}\n\n.childCheckboxLabel {\n align-items: center;\n color: #292929;\n display: flex;\n font-family: 'Source Sans Pro';\n font-size: 14px;\n font-weight: 600;\n gap: 12px;\n position: relative;\n}\n\n.childCheckboxLabel input[type=\"checkbox\"] {\n align-items: center;\n appearance: none;\n background-color: #EDEDED;\n border: 1px solid #D9D9D9;\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n position: relative;\n width: 24px;\n -webkit-font-smoothing: antialiased;\n}\n\n.childCheckboxLabel input[type=\"checkbox\"]:checked {\n background-color: #000;\n position: relative;\n}\n\n.childCheckboxLabel input[type=\"checkbox\"]:checked + .checkContainer {\n display: block;\n}\n\n.childCheckboxLabel input[type=\"checkbox\"]:checked + .dashContainer {\n display: block;\n}\n\n.checkContainer {\n display: none;\n height: 16px;\n width: 16px;\n position: absolute;\n top: 10px;\n left: 7px;\n}\n\n.dashContainer {\n display: none;\n height: 3px;\n width: 14px;\n position: absolute;\n top: 5px;\n left: 9px;\n}\n\n.loading {\n align-items: center;\n display: flex;\n justify-content: center;\n margin: 100px;\n}","import {\n Component,\n h,\n State,\n Prop,\n Event,\n type EventEmitter,\n} from '@stencil/core';\n\nimport type { Facets } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { flattenFacets } from '@utils/utils';\n\n@Component({\n tag: 'searchcraft-filters-list',\n styleUrl: 'searchcraft-filters-list.module.scss',\n shadow: true,\n})\nexport class SearchcraftFiltersList {\n @Prop() filters: Array<{ label: string; value: string }> = [];\n\n @Event() filtersUpdated: EventEmitter<string[]>;\n\n @State() dynamicFilters: Array<{\n label: string;\n value: string;\n count: number;\n children?: Array<{\n label: string;\n value: string;\n count: number;\n }>;\n }> = [];\n @State() selectedFilters: string[] = [];\n @State() query = '';\n @State() isRequesting = false;\n @State() resultsCount = 0;\n\n private searchStore = useSearchcraftStore.getState();\n private autoSearchFormElement: HTMLElement \| null = null;\n unsubscribe: () => void;\n\n connectedCallback() {\n const state = this.searchStore;\n const facets = state.searchResults?.data.facets;\n\n if (facets) {\n this.populateFiltersFromFacets(facets);\n }\n\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n const query = state.query?.trim();\n const facets = state.searchResults?.data.facets;\n this.query = query \|\| '';\n this.isRequesting = state.isRequesting;\n this.resultsCount = state.searchResults?.data?.hits?.length \|\| 0;\n\n if (facets && this.selectedFilters.length === 0) {\n this.populateFiltersFromFacets(facets);\n }\n });\n\n this.autoSearchFormElement = document.querySelector(\n 'searchcraft-auto-search-form',\n );\n if (this.autoSearchFormElement) {\n this.autoSearchFormElement.addEventListener(\n 'querySubmit',\n this.handleSearchRequest,\n );\n }\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n\n if (this.autoSearchFormElement) {\n this.autoSearchFormElement.removeEventListener(\n 'querySubmit',\n this.handleSearchRequest,\n );\n }\n }\n\n handleSearchRequest = () => {\n this.selectedFilters = [];\n this.searchStore.setSelectedFilters([]);\n this.emitFiltersUpdate();\n };\n\n populateFiltersFromFacets(facets: Facets) {\n const flattened = flattenFacets(facets[0]?.section \|\| []);\n this.dynamicFilters = flattened.map((filter) => ({\n label: filter.label,\n value: filter.value,\n count: filter.count,\n children: filter.children \|\| [],\n }));\n }\n\n handleCheckboxChange(value: string, isChecked: boolean, isParent = false) {\n if (isParent) {\n const parentFilter = this.dynamicFilters.find(\n (filter) => filter.value === value,\n );\n const childValues =\n parentFilter?.children?.map((child) => child.value) \|\| [];\n\n if (!isChecked) {\n // Remove children from selectedFilters when parent is unchecked\n this.selectedFilters = this.selectedFilters.filter(\n (filter) => filter !== value && !childValues.includes(filter),\n );\n } else {\n // Add parent filter to selectedFilters\n this.selectedFilters = [...this.selectedFilters, value];\n }\n } else {\n // Update selectedFilters for child filters\n this.selectedFilters = isChecked\n ? [...this.selectedFilters, value]\n : this.selectedFilters.filter((filter) => filter !== value);\n }\n this.emitFiltersUpdate();\n }\n\n emitFiltersUpdate() {\n this.filtersUpdated.emit(this.selectedFilters);\n this.searchStore.setSelectedFilters(this.selectedFilters);\n this.searchStore.search();\n }\n\n formatLabel(label: string, count: number): string {\n return `${label.replace(/-/g, ' ').replace(/\\b\\w/g, (char) => char.toUpperCase())} (${count})`;\n }\n\n render() {\n if (!this.query \|\| this.resultsCount === 0) {\n return null;\n }\n return (\n <div class='filtersList'>\n {this.dynamicFilters.map((filter) => {\n const isChildSelected = filter.children\n ? filter.children.some((child) =>\n this.selectedFilters.includes(child.value),\n )\n : false;\n\n return (\n <div key={filter.value} class='filterItem'>\n <label class='checkboxLabel'>\n <input\n type='checkbox'\n checked={this.selectedFilters.includes(filter.value)}\n onChange={(event: Event) =>\n this.handleCheckboxChange(\n filter.value,\n (event.target as HTMLInputElement).checked,\n true,\n )\n }\n />\n {isChildSelected ? (\n <div class='dashContainer'>\n <searchcraft-dash-icon />\n </div>\n ) : (\n <div class='checkContainer'>\n <searchcraft-check-icon />\n </div>\n )}\n {this.formatLabel(filter.label, filter.count)}\n </label>\n {filter.children && filter.children.length > 0 && (\n <div class='childrenContainer'>\n {filter.children.map((child) => (\n <label\n key={child.value}\n class='childCheckboxLabel'\n style={{\n marginLeft: '20px',\n display: this.selectedFilters.includes(filter.value)\n ? 'flex'\n : 'none',\n }}\n >\n <input\n type='checkbox'\n checked={this.selectedFilters.includes(child.value)}\n onChange={(event: Event) =>\n this.handleCheckboxChange(\n child.value,\n (event.target as HTMLInputElement).checked,\n )\n }\n />\n <div class='checkContainer'>\n <searchcraft-check-icon />\n </div>\n {this.formatLabel(\n child.label.includes('/')\n ? child.label.split('/').pop() \|\| child.label\n : child.label,\n child.count,\n )}\n </label>\n ))}\n </div>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"searchcraft-filters-list.js","mappings":"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","names":["SearchcraftFiltersList"],"sources":["src/components/searchcraft-filters-list/searchcraft-filters-list.module.scss?tag=searchcraft-filters-list","src/components/searchcraft-filters-list/searchcraft-filters-list.tsx"],"sourcesContent":[":root {\n --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.filtersListContainer {\n width: 100%;\n}\n\n.filterCheckboxLabel {\n align-items: center;\n color: $content-primary;\n display: flex;\n font-family: var(--font-stack);\n font-size: 14px;\n font-weight: 600;\n gap: 14px;\n position: relative;\n -webkit-font-smoothing: antialiased;\n}\n\n.filterCheckboxLabel input[type=\"checkbox\"] {\n align-items: center;\n appearance: none;\n background-color: $surface-brand-secondary-hover;\n border: 1px solid $surface-disabled;\n border-radius: 8px;\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n width: 24px;\n}\n\n.filterCheckboxLabel input[type=\"checkbox\"]:focus {\n outline: 2px solid $surface-brand-primary;\n}\n\n.filterCheckboxLabel input[type=\"checkbox\"]:checked {\n background-color: $surface-brand-primary;\n position: relative;\n}\n\n.filterCheckboxLabel input[type=\"checkbox\"]:checked + .checkContainer {\n display: block;\n}\n\n.filterCheckboxLabel input[type=\"checkbox\"]:checked + .dashContainer {\n display: block;\n}\n\n.childFilterCheckboxLabel {\n align-items: center;\n color: $content-primary;\n display: flex;\n font-family: var(--font-stack);\n font-size: 14px;\n font-weight: 600;\n gap: 12px;\n margin-left: 24px;\n position: relative;\n}\n\n.childFilterCheckboxLabel input[type=\"checkbox\"] {\n align-items: center;\n appearance: none;\n background-color: $surface-brand-secondary-hover;\n border: 1px solid $surface-disabled;\n border-radius: 8px;\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n position: relative;\n width: 24px;\n -webkit-font-smoothing: antialiased;\n}\n\n.childFilterCheckboxLabel input[type=\"checkbox\"]:focus {\n outline: 2px solid $surface-brand-primary;\n}\n\n.childFilterCheckboxLabel input[type=\"checkbox\"]:checked {\n background-color: $surface-brand-primary;\n position: relative;\n}\n\n.childFilterCheckboxLabel input[type=\"checkbox\"]:checked + .checkContainer {\n display: block;\n}\n\n.childFilterCheckboxLabel input[type=\"checkbox\"]:checked + .dashContainer {\n display: block;\n}\n\n.checkContainer {\n display: none;\n height: 16px;\n width: 16px;\n position: absolute;\n top: 9px;\n left: 8px;\n}\n\n.dashContainer {\n display: none;\n height: 3px;\n width: 14px;\n position: absolute;\n top: 3px;\n left: 9px;\n}","import {\n Component,\n h,\n State,\n Prop,\n Event,\n type EventEmitter,\n Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport type { Facets } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { flattenFacets } from '@utils/utils';\n\n@Component({\n tag: 'searchcraft-filters-list',\n styleUrl: 'searchcraft-filters-list.module.scss',\n shadow: false,\n})\nexport class SearchcraftFiltersList {\n @Prop() filters: Array<{ label: string; value: string }> = [];\n\n @Event() filtersUpdated: EventEmitter<string[]>;\n\n @State() dynamicFilters: Array<{\n label: string;\n value: string;\n count: number;\n children?: Array<{\n label: string;\n value: string;\n count: number;\n }>;\n }> = [];\n @State() selectedFilters: string[] = [];\n @State() query = '';\n @State() isRequesting = false;\n @State() resultsCount = 0;\n\n private searchStore = useSearchcraftStore.getState();\n private autoSearchFormElement: HTMLElement \| null = null;\n unsubscribe: () => void;\n\n connectedCallback() {\n const state = this.searchStore;\n const facets = state.searchResults?.data.facets;\n\n if (facets) {\n this.populateFiltersFromFacets(facets);\n }\n\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n const query = state.query?.trim();\n const facets = state.searchResults?.data.facets;\n this.query = query \|\| '';\n this.isRequesting = state.isRequesting;\n this.resultsCount = state.searchResults?.data?.hits?.length \|\| 0;\n\n if (facets && this.selectedFilters.length === 0) {\n this.populateFiltersFromFacets(facets);\n }\n });\n\n this.autoSearchFormElement = document.querySelector(\n 'searchcraft-auto-search-form',\n );\n if (this.autoSearchFormElement) {\n this.autoSearchFormElement.addEventListener(\n 'querySubmit',\n this.handleSearchRequest,\n );\n }\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n\n if (this.autoSearchFormElement) {\n this.autoSearchFormElement.removeEventListener(\n 'querySubmit',\n this.handleSearchRequest,\n );\n }\n }\n\n handleSearchRequest = () => {\n this.selectedFilters = [];\n this.searchStore.setSelectedFilters([]);\n this.emitFiltersUpdate();\n };\n\n populateFiltersFromFacets(facets: Facets) {\n const flattened = flattenFacets(facets[0]?.section \|\| []);\n this.dynamicFilters = flattened.map((filter) => ({\n label: filter.label,\n value: filter.value,\n count: filter.count,\n children: filter.children \|\| [],\n }));\n }\n\n handleCheckboxChange(value: string, isChecked: boolean, isParent = false) {\n if (isParent) {\n const parentFilter = this.dynamicFilters.find(\n (filter) => filter.value === value,\n );\n const childValues =\n parentFilter?.children?.map((child) => child.value) \|\| [];\n\n if (!isChecked) {\n this.selectedFilters = this.selectedFilters.filter(\n (filter) => filter !== value && !childValues.includes(filter),\n );\n } else {\n this.selectedFilters = [...this.selectedFilters, value];\n }\n } else {\n this.selectedFilters = isChecked\n ? [...this.selectedFilters, value]\n : this.selectedFilters.filter((filter) => filter !== value);\n }\n this.emitFiltersUpdate();\n }\n\n emitFiltersUpdate() {\n this.filtersUpdated.emit(this.selectedFilters);\n this.searchStore.setSelectedFilters(this.selectedFilters);\n this.searchStore.search();\n }\n\n formatLabel = (label: string, count: number): string =>\n `${label.replace(/-/g, ' ').replace(/\\b\\w/g, (char) => char.toUpperCase())} (${count})`;\n\n render() {\n if (!this.query \|\| this.resultsCount === 0) {\n return null;\n }\n return (\n <div\n class={classNames(\n 'filtersListContainer',\n 'searchcraft-filters-list-container',\n )}\n >\n {this.dynamicFilters.map((filter) => {\n const isChildSelected = filter.children\n ? filter.children.some((child) =>\n this.selectedFilters.includes(child.value),\n )\n : false;\n\n return (\n <div\n key={filter.value}\n class={classNames('searchcraft-filters-list-item')}\n >\n <label\n class={classNames(\n 'filterCheckboxLabel',\n 'searchcraft-filters-list-checkbox-label',\n )}\n >\n <input\n checked={this.selectedFilters.includes(filter.value)}\n onChange={(event: Event) =>\n this.handleCheckboxChange(\n filter.value,\n (event.target as HTMLInputElement).checked,\n true,\n )\n }\n type='checkbox'\n />\n {isChildSelected ? (\n <div\n class={classNames(\n 'dashContainer',\n 'searchcraft-filter-list-dash-container',\n )}\n >\n <searchcraft-dash-icon />\n </div>\n ) : (\n <div\n class={classNames(\n 'checkContainer',\n 'searchcraft-filter-list-check-container',\n )}\n >\n <searchcraft-check-icon />\n </div>\n )}\n {this.formatLabel(filter.label, filter.count)}\n </label>\n {filter.children && filter.children.length > 0 && (\n <Fragment>\n {filter.children.map((child) => (\n <label\n key={child.value}\n class={classNames(\n 'childFilterCheckboxLabel',\n 'searchcraft-child-filter-checkbox-label',\n )}\n style={{\n display: this.selectedFilters.includes(filter.value)\n ? 'flex'\n : 'none',\n }}\n >\n <input\n checked={this.selectedFilters.includes(child.value)}\n onChange={(event: Event) =>\n this.handleCheckboxChange(\n child.value,\n (event.target as HTMLInputElement).checked,\n )\n }\n type='checkbox'\n />\n <div\n class={classNames(\n 'checkContainer',\n 'searchcraft-filter-list-check-container',\n )}\n >\n <searchcraft-check-icon />\n </div>\n {this.formatLabel(\n child.label.includes('/')\n ? child.label.split('/').pop() \|\| child.label\n : child.label,\n child.count,\n )}\n </label>\n ))}\n </Fragment>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/searchcraft-input-caption.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftInputCaption$1, d as defineCustomElement$1 } from './p-6237f03e.js';
+import { S as SearchcraftInputCaption$1, d as defineCustomElement$1 } from './p-69ee3b9a.js';
 const SearchcraftInputCaption = SearchcraftInputCaption$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-input-icon.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftInputIcon$1, d as defineCustomElement$1 } from './p-8c38185e.js';
+import { S as SearchcraftInputIcon$1, d as defineCustomElement$1 } from './p-4f939ba2.js';
 const SearchcraftInputIcon = SearchcraftInputIcon$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-input-label.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftInputLabel$1, d as defineCustomElement$1 } from './p-ae84b899.js';
+import { S as SearchcraftInputLabel$1, d as defineCustomElement$1 } from './p-b38d171d.js';
 const SearchcraftInputLabel = SearchcraftInputLabel$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-input.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftInput$1, d as defineCustomElement$1 } from './p-dd2a4022.js';
+import { S as SearchcraftInput$1, d as defineCustomElement$1 } from './p-54848b4d.js';
 const SearchcraftInput = SearchcraftInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-results-info.js CHANGED Viewed

@@ -1,14 +1,15 @@
-import { p as proxyCustomElement, H, h } from './p-7498e493.js';
-import { u as useSearchcraftStore } from './p-ff049f0a.js';
+import { p as proxyCustomElement, H, h } from './p-6b353c3e.js';
+import { c as classNames } from './p-5cdc6210.js';
+import { u as useSearchcraftStore } from './p-727bfc38.js';
+import { b as formatNumberWithCommas } from './p-62c40862.js';
-const searchcraftResultsInfoModuleCss = ".container{border-bottom:1px solid #D9D9D9;display:flex;justify-content:flex-start;width:100%}.resultsInfo{color:#292929;font-size:18px;font-weight:600;line-height:20px;margin:0;margin-bottom:8px}";
+const searchcraftResultsInfoModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.resultsInfoContainer{border-bottom:1px solid #D9D9D9;display:flex;justify-content:flex-start;width:100%}.resultsInfoContent{color:#292929;font-family:var(--font-stack);font-size:18px;font-weight:600;line-height:20px;margin:24px 0 8px}@media (max-width: 900px){.resultsInfoContent{margin:0;margin-bottom:8px}}";
 const SearchcraftResultsInfoStyle0 = searchcraftResultsInfoModuleCss;
 const SearchcraftResultsInfo$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftResultsInfo extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.isRequesting = false;
         this.resultsCount = 0;
         this.responseTime = '';
@@ -20,7 +21,7 @@ const SearchcraftResultsInfo$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
             this.isRequesting = state.isRequesting;
             this.resultsCount = ((_b = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.count) || 0;
             this.responseTime = ((((_d = (_c = state.searchResults) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.time_taken) || 0) * 1000).toFixed(2);
-            this.query = state.query || ''; // Update query from store
+            this.query = state.query || '';
         });
     }
     disconnectedCallback() {
@@ -32,10 +33,11 @@ const SearchcraftResultsInfo$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         if (!this.query || this.resultsCount === 0) {
             return null;
         }
-        return (h("div", { class: 'container' }, h("p", { class: 'resultsInfo' }, this.resultsCount, " results found in ", this.responseTime, "ms")));
+        const formattedResults = formatNumberWithCommas(this.resultsCount);
+        return (h("div", { class: classNames('resultsInfoContainer', 'searchcraft-results-info-container') }, h("p", { class: classNames('resultsInfoContent', 'searchcraft-results-info-content') }, formattedResults, " results found in ", this.responseTime, "ms")));
     }
     static get style() { return SearchcraftResultsInfoStyle0; }
-}, [1, "searchcraft-results-info", {
+}, [0, "searchcraft-results-info", {
         "isRequesting": [32],
         "resultsCount": [32],
         "responseTime": [32],

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

	@@ -1 +1 @@
1	- {"file":"searchcraft-results-info.js","mappings":"~~;;;~~AAAA,MAAM,+BAA+B,GAAG,~~sMAAsM~~,CAAC;~~AAC/O~~,qCAAe,+BAA+B;;~~MCOjCA~~,wBAAsB~~;;;;;~~4BACT,KAAK;4BACL,CAAC;4BACD,EAAE;qBACT,EAAE;;IAInB,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;;YACrD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;YACvC,IAAI,CAAC,YAAY,GAAG,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,KAAK,KAAI,CAAC,CAAC;YAC1D,IAAI,CAAC,YAAY,GAAG,CAClB,CAAC,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,UAAU,KAAI,CAAC,IAAI,IAAI,EACnD,OAAO,CAAC,CAAC,CAAC,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;SAChC,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;YAC1C,OAAO,IAAI,CAAC;SACb;~~QAED~~,QACE,~~WAAK~~,KAAK,~~EAAC~~,~~WAAW~~,~~IACpB~~,~~SAAG~~,KAAK,~~EAAC~~,~~aAAa~~,~~IACnB~~,~~IAAI~~,~~CAAC~~,~~YAAY~~,wBAAoB,IAAI,CAAC,YAAY,~~OACrD~~,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftResultsInfo"],"sources":["src/components/searchcraft-results-info/searchcraft-results-info.module.scss?tag=searchcraft-results-info~~&encapsulation=shadow~~","src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"sourcesContent":[".~~container~~ {\n border-bottom: 1px solid ~~#D9D9D9~~;\n display: flex;\n justify-content: flex-start;\n width: 100%;\n}\n\n.~~resultsInfo~~ {\n color: ~~#292929~~;\n font-size: 18px;\n font-weight: 600;\n line-height: 20px;\n margin: 0;\n margin-bottom: 8px;\n}","import { Component, h, State } from '@stencil/core';\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n tag: 'searchcraft-results-info',\n styleUrl: 'searchcraft-results-info.module.scss',\n shadow: ~~true~~,\n})\nexport class SearchcraftResultsInfo {\n @State() isRequesting = false;\n @State() resultsCount = 0;\n @State() responseTime = '';\n @State() query = ''~~; // Track the query\~~n\n unsubscribe: () => void;\n\n connectedCallback() {\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n this.isRequesting = state.isRequesting;\n this.resultsCount = state.searchResults?.data?.count \|\| 0;\n this.responseTime = (\n (state.searchResults?.data?.time_taken \|\| 0) * 1000\n ).toFixed(2);\n this.query = state.query \|\| ''~~; // Update query from store\~~n });\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n }\n\n render() {\n if (!this.query \|\| this.resultsCount === 0) {\n return null;\n }\n\n return (\n <div class='container'>\n <p class='~~resultsInfo~~'>\n {~~this.resultsCount~~} results found in {this.responseTime}ms\n </p>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"searchcraft-results-info.js","mappings":";;;;;AAAA,MAAM,+BAA+B,GAAG,uWAAuW,CAAC;AAChZ,qCAAe,+BAA+B;;MCWjCA,wBAAsB;;;;4BACT,KAAK;4BACL,CAAC;4BACD,EAAE;qBACT,EAAE;;IAInB,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;;YACrD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;YACvC,IAAI,CAAC,YAAY,GAAG,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,KAAK,KAAI,CAAC,CAAC;YAC1D,IAAI,CAAC,YAAY,GAAG,CAClB,CAAC,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,UAAU,KAAI,CAAC,IAAI,IAAI,EACnD,OAAO,CAAC,CAAC,CAAC,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;SAChC,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;YAC1C,OAAO,IAAI,CAAC;SACb;QACD,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACnE,QACE,WACE,KAAK,EAAE,UAAU,CACf,sBAAsB,EACtB,oCAAoC,CACrC,IAED,SACE,KAAK,EAAE,UAAU,CACf,oBAAoB,EACpB,kCAAkC,CACnC,IAEA,gBAAgB,wBAAoB,IAAI,CAAC,YAAY,OACpD,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftResultsInfo"],"sources":["src/components/searchcraft-results-info/searchcraft-results-info.module.scss?tag=searchcraft-results-info","src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.resultsInfoContainer {\n border-bottom: 1px solid $surface-disabled;\n display: flex;\n justify-content: flex-start;\n width: 100%;\n}\n\n.resultsInfoContent {\n color: $content-primary;\n font-family: var(--font-stack);\n font-size: 18px;\n font-weight: 600;\n line-height: 20px;\n margin: 24px 0 8px;\n\n @media (max-width: 900px) {\n margin: 0;\n margin-bottom: 8px;\n }\n}","import { Component, h, State } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { formatNumberWithCommas } from '@utils/utils';\n\n@Component({\n tag: 'searchcraft-results-info',\n styleUrl: 'searchcraft-results-info.module.scss',\n shadow: false,\n})\nexport class SearchcraftResultsInfo {\n @State() isRequesting = false;\n @State() resultsCount = 0;\n @State() responseTime = '';\n @State() query = '';\n\n unsubscribe: () => void;\n\n connectedCallback() {\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n this.isRequesting = state.isRequesting;\n this.resultsCount = state.searchResults?.data?.count \|\| 0;\n this.responseTime = (\n (state.searchResults?.data?.time_taken \|\| 0) * 1000\n ).toFixed(2);\n this.query = state.query \|\| '';\n });\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n }\n\n render() {\n if (!this.query \|\| this.resultsCount === 0) {\n return null;\n }\n const formattedResults = formatNumberWithCommas(this.resultsCount);\n return (\n <div\n class={classNames(\n 'resultsInfoContainer',\n 'searchcraft-results-info-container',\n )}\n >\n <p\n class={classNames(\n 'resultsInfoContent',\n 'searchcraft-results-info-content',\n )}\n >\n {formattedResults} results found in {this.responseTime}ms\n </p>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/searchcraft-search-icon-set.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftSearchIconSet$1, d as defineCustomElement$1 } from './p-a3bd1bc8.js';
+import { S as SearchcraftSearchIconSet$1, d as defineCustomElement$1 } from './p-5a872bdf.js';
 const SearchcraftSearchIconSet = SearchcraftSearchIconSet$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-slider.js CHANGED Viewed

@@ -1,17 +1,22 @@
-import { p as proxyCustomElement, H, h } from './p-7498e493.js';
-import { u as useSearchcraftStore } from './p-ff049f0a.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-6b353c3e.js';
+import { c as classNames } from './p-5cdc6210.js';
+import { u as useSearchcraftStore } from './p-727bfc38.js';
-const searchcraftSliderModuleCss = ".sliderContainer{display:flex;flex-direction:column;gap:10px;font-family:Arial, sans-serif;align-items:center;width:100%}.rangeContainer{display:flex;position:relative;width:100%;align-items:center}.rangeContainer .activeRange{position:absolute;top:50%;transform:translateY(-50%);height:4px;background:#007DB3;z-index:0;border-radius:2px}.rangeContainer .rangeSlider{width:100%;height:4px;background:transparent;border-radius:2px;outline:none;-webkit-appearance:none;appearance:none;position:absolute;margin:0}.rangeContainer .rangeSlider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background-color:#FFF;border-radius:50%;border:2px solid #e6e6e6;cursor:pointer}.rangeContainer .rangeSlider::-moz-range-thumb{width:20px;height:20px;background-color:#FFF;border-radius:50%;border:2px solid #e6e6e6;cursor:pointer}.yearLabels{display:flex;justify-content:space-between;width:100%;margin-top:10px;font-size:15px;font-weight:600;font-family:\"Source Sans Pro\", sans-serif;color:#666}.yearLabel{min-width:30px;text-align:center}";
+const searchcraftSliderModuleCss = ".sliderContainer{align-items:center;display:flex;flex-direction:column;gap:10px;width:100%}.rangeContainer{align-items:center;background-color:#D9D9D9;border-radius:999px;display:flex;position:relative;height:4px;width:100%}.rangeContainer::-webkit-slider-runnable-track{pointer-events:none}.rangeContainer .activeRange{background-color:#000000;border-radius:2px;height:4px;position:absolute;top:50%;transform:translateY(-50%);z-index:0}.rangeContainer .activeRange::-webkit-slider-runnable-track{pointer-events:none}.rangeContainer .activeRange::-moz-range-track{pointer-events:none}.rangeContainer .rangeSlider{appearance:none;background:transparent;border-radius:2px;height:4px;margin:0;outline:none;pointer-events:none;position:absolute;width:100%;-webkit-appearance:none}.rangeContainer .rangeSlider::-webkit-slider-thumb{background-color:#FFFFFF;border-radius:50%;border:2px solid #E6E6E6;cursor:pointer;height:20px;pointer-events:all;width:20px;-webkit-appearance:none}.rangeContainer .rangeSlider::-moz-range-thumb{background-color:#FFFFFF;border-radius:50%;border:2px solid #E6E6E6;cursor:pointer;height:20px;pointer-events:all;width:20px}.yearLabels{color:#292929;display:flex;font-family:\"Source Sans Pro\", sans-serif;font-size:15px;font-weight:600;justify-content:space-between;margin-top:10px;width:100%}.yearLabel{min-width:30px;text-align:center}";
 const SearchcraftSliderStyle0 = searchcraftSliderModuleCss;
 const SearchcraftSlider$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftSlider extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
+        this.rangeChanged = createEvent(this, "rangeChanged", 7);
         this.searchStore = useSearchcraftStore.getState();
         this.updateYears = async () => {
             this.searchStore.setYearsRange([this.startYear, this.endYear]);
+            this.rangeChanged.emit({
+                startYear: this.startYear,
+                endYear: this.endYear,
+            });
             try {
                 if (typeof this.query === 'string' && this.query.trim() !== '') {
                     await this.searchStore.search();
@@ -26,13 +31,17 @@ const SearchcraftSlider$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftSl
         };
         this.handleStartYearChange = (event) => {
             const value = Number.parseInt(event.target.value, 10);
-            this.startYear = Math.min(value, this.endYear);
-            this.updateYears();
+            if (value <= this.endYear) {
+                this.startYear = value;
+                this.updateYears();
+            }
         };
         this.handleEndYearChange = (event) => {
             const value = Number.parseInt(event.target.value, 10);
-            this.endYear = Math.max(value, this.startYear);
-            this.updateYears();
+            if (value >= this.startYear) {
+                this.endYear = value;
+                this.updateYears();
+            }
         };
         this.maxYear = new Date().getFullYear();
         this.minYear = 2014;
@@ -65,13 +74,13 @@ const SearchcraftSlider$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftSl
         const rangeMax = this.maxYear;
         const startPercent = ((this.startYear - rangeMin) / (rangeMax - rangeMin)) * 100;
         const endPercent = ((this.endYear - rangeMin) / (rangeMax - rangeMin)) * 100;
-        return (h("div", { class: 'sliderContainer' }, h("div", { class: 'rangeContainer' }, h("div", { class: 'activeRange', style: {
+        return (h("div", { class: classNames('sliderContainer', 'searchcraft-slider-container') }, h("div", { class: classNames('rangeContainer', 'searchcraft-slider-range-container') }, h("div", { class: classNames('activeRange', 'searchcraft-slider-active-range'), style: {
                 left: `${startPercent}%`,
                 width: `${endPercent - startPercent}%`,
-            } }), h("input", { class: 'rangeSlider', max: this.maxYear, min: this.minYear, onInput: this.handleStartYearChange, step: '1', type: 'range', value: this.startYear }), h("input", { class: 'rangeSlider', max: this.maxYear, min: this.minYear, onInput: this.handleEndYearChange, step: '1', type: 'range', value: this.endYear })), h("div", { class: 'yearLabels' }, h("span", { class: 'yearLabel' }, this.startYear), h("span", { class: 'yearLabel' }, this.endYear))));
+            } }), h("input", { class: classNames('rangeSlider', 'searchcraft-slider-range-slider-start-thumb'), max: this.maxYear, min: this.minYear, onInput: this.handleStartYearChange, step: '1', type: 'range', value: this.startYear }), h("input", { class: classNames('rangeSlider', 'searchcraft-slider-range-slider-end-thumb'), max: this.maxYear, min: this.minYear, onInput: this.handleEndYearChange, step: '1', type: 'range', value: this.endYear })), h("div", { class: classNames('yearLabels', 'searchcraft-slider-year-label-container') }, h("span", { class: classNames('yearLabel', 'searchcraft-slider-start-year-label') }, this.startYear), h("span", { class: classNames('yearLabel', 'searchcraft-slider-end-year-label') }, this.endYear))));
     }
     static get style() { return SearchcraftSliderStyle0; }
-}, [1, "searchcraft-slider", {
+}, [0, "searchcraft-slider", {
         "maxYear": [2, "max-year"],
         "minYear": [2, "min-year"],
         "endYear": [32],