@searchcraft/javascript-sdk 0.1.9 → 0.2.1

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

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-c9cd5533.js';
-import { u as useSearchcraftStore } from './p-5aa6335f.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-7498e493.js';
+import { u as useSearchcraftStore } from './p-99971aa9.js';
 
-const searchcraftFiltersListModuleCss = "@charset \"UTF-8\";.filtersList{padding:16px}.checkboxLabel{align-items:center;color:#292929;display:flex;font-size:14px;font-weight:600;gap:12px}.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}.checkboxLabel input[type=checkbox]:checked::before{color:#fff;content:\"✔\";font-size:14px}";
+const searchcraftFiltersListModuleCss = "@charset \"UTF-8\";.filtersList{width:100%}.checkboxLabel{align-items:center;color:#292929;display:flex;font-family:\"Source Sans Pro\";font-size:14px;font-weight:600;gap:14px}.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}.checkboxLabel input[type=checkbox]:checked::before{color:#fff;content:\"✔\"}.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}.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;width:24px}.childCheckboxLabel input[type=checkbox]:checked{background-color:#000}.childCheckboxLabel input[type=checkbox]:checked::before{color:#fff;content:\"✔\"}";
 const SearchcraftFiltersListStyle0 = searchcraftFiltersListModuleCss;
 
 const SearchcraftFiltersList$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftFiltersList extends H {
@@ -25,15 +25,20 @@ const SearchcraftFiltersList$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         };
         this.filters = [];
         this.dynamicFilters = [];
+        this.initialFilters = [];
         this.isRequesting = false;
         this.selectedFilters = new Set();
         this.originalFilterCounts = {};
+        this.query = '';
+        this.resultsCount = 0;
     }
     connectedCallback() {
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
-            var _a;
+            var _a, _b, _c, _d;
             this.isRequesting = state.isRequesting;
-            const facets = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data.facets;
+            this.query = state.query || '';
+            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);
             }
@@ -45,40 +50,59 @@ const SearchcraftFiltersList$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         }
     }
     populateFiltersFromFacets(facets) {
-        const newFilters = Object.entries(facets).flatMap(([facetKey, facetData]) => Object.entries(facetData.counts).map(([value, count]) => {
-            const filterValue = `${facetKey}:${value}`;
-            this.originalFilterCounts[filterValue] = `${count}`; // Store the original count
+        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: `${facetKey}: ${value.replace(/^\//, '')} (${count})`,
+                label: `${key.replace(/^\//, '')} (${count})`,
                 value: filterValue,
             };
-        }));
-        this.dynamicFilters = newFilters;
+        });
+        // 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];
+        }
+    }
+    formatLabel(label) {
+        return label
+            .replace(/-/g, ' ') // Replace dashes with spaces
+            .split(' ') // Split words
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize the first letter
+            .join(' '); // Join words back into a single string
     }
     render() {
-        const checkedFilters = Array.from(this.selectedFilters).map((value) => {
-            const count = this.originalFilterCounts[value] || '0';
-            return {
-                label: `${value.split(':')[1]} (${count})`,
-                value,
-            };
-        });
-        const remainingDynamicFilters = this.dynamicFilters.filter((filter) => !this.selectedFilters.has(filter.value));
-        if (this.isRequesting) {
-            return h("div", null, "Loading facets");
+        if (!this.query || this.resultsCount === 0) {
+            return null;
         }
-        return (h("div", { class: 'filtersList' }, checkedFilters.map((filter) => (h("label", { class: 'checkboxLabel', key: filter.value }, h("input", { class: 'filterListCheckbox', checked: true, onChange: (event) => this.handleFilterChange(filter.value, event.target.checked), type: 'checkbox', value: filter.value }), filter.label))), remainingDynamicFilters.map((filter) => {
-            const filterLabel = filter.label.split(':')[1] || filter.label;
-            return (h("label", { class: 'checkboxLabel', key: filter.value }, h("input", { class: 'filterListCheckbox', checked: this.selectedFilters.has(filter.value), onChange: (event) => this.handleFilterChange(filter.value, event.target.checked), type: 'checkbox', value: filter.value }), filterLabel));
-        })));
+        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(); // Get only the part after the last '/'
+                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 || '')));
+            }))))));
     }
     static get style() { return SearchcraftFiltersListStyle0; }
 }, [1, "searchcraft-filters-list", {
         "filters": [16],
         "dynamicFilters": [32],
+        "initialFilters": [32],
         "isRequesting": [32],
         "selectedFilters": [32],
-        "originalFilterCounts": [32]
+        "originalFilterCounts": [32],
+        "query": [32],
+        "resultsCount": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -93,7 +117,6 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1();
 
 const SearchcraftFiltersList = SearchcraftFiltersList$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"searchcraft-filters-list.js","mappings":";;;AAAA,MAAM,+BAA+B,GAAG,qfAAqf,CAAC;AAC9hB,qCAAe,+BAA+B;;MCejCA,wBAAsB;;;;;;QASzB,gBAAW,GAAG,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QAiCrD,uBAAkB,GAAG,CAAC,KAAa,EAAE,OAAgB;YACnD,IAAI,OAAO,EAAE;gBACX,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;aACjC;iBAAM;gBACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;aACpC;YAED,MAAM,oBAAoB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAC9D,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;YAC/C,IAAI,CAAC,WAAW,CAAC,kBAAkB,CAAC,oBAAoB,CAAC,CAAC;YAC1D,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;SAC3B,CAAC;uBApDyD,EAAE;8BAGM,EAAE;4BAC7C,KAAK;+BACW,IAAI,GAAG,EAAE;oCACO,EAAE;;IAK1D,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;;YACrD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;YACvC,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,CAAC,MAAM,CAAC;YAChD,IAAI,MAAM,EAAE;gBACV,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,CAAC;aACxC;SACF,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,yBAAyB,CAAC,MAAc;QACtC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,KACtE,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC;YAClD,MAAM,WAAW,GAAG,GAAG,QAAQ,IAAI,KAAK,EAAE,CAAC;YAC3C,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAAC,GAAG,GAAG,KAAK,EAAE,CAAC;YACpD,OAAO;gBACL,KAAK,EAAE,GAAG,QAAQ,KAAK,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,GAAG;gBAC5D,KAAK,EAAE,WAAW;aACnB,CAAC;SACH,CAAC,CACH,CAAC;QACF,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC;KAClC;IAeD,MAAM;QACJ,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK;YAChE,MAAM,KAAK,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC;YACtD,OAAO;gBACL,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,GAAG;gBAC1C,KAAK;aACN,CAAC;SACH,CAAC,CAAC;QAEH,MAAM,uBAAuB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CACxD,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CACpD,CAAC;QAEF,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,OAAO,gCAAyB,CAAC;SAClC;QAED,QACE,WAAK,KAAK,EAAC,aAAa,IACrB,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,MACzB,aAAO,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,MAAM,CAAC,KAAK,IAC5C,aACE,KAAK,EAAC,oBAAoB,EAC1B,OAAO,QACP,QAAQ,EAAE,CAAC,KAAY,KACrB,IAAI,CAAC,kBAAkB,CACrB,MAAM,CAAC,KAAK,EACX,KAAK,CAAC,MAA2B,CAAC,OAAO,CAC3C,EAEH,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,MAAM,CAAC,KAAK,GACnB,EACD,MAAM,CAAC,KAAK,CACP,CACT,CAAC,EACD,uBAAuB,CAAC,GAAG,CAAC,CAAC,MAAM;YAClC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC;YAC/D,QACE,aAAO,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,MAAM,CAAC,KAAK,IAC5C,aACE,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,EAC/C,QAAQ,EAAE,CAAC,KAAY,KACrB,IAAI,CAAC,kBAAkB,CACrB,MAAM,CAAC,KAAK,EACX,KAAK,CAAC,MAA2B,CAAC,OAAO,CAC3C,EAEH,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,MAAM,CAAC,KAAK,GACnB,EACD,WAAW,CACN,EACR;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  padding: 16px;\n}\n\n.checkboxLabel {\n  align-items: center;\n  color: #292929;\n  display: flex;\n  font-size: 14px;\n  font-weight: 600;\n  gap: 12px;\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}\n\n.checkboxLabel input[type=\"checkbox\"]:checked::before {\n  color: #fff;\n  content: '✔';\n  font-size: 14px;\n}","import {\n  Component,\n  h,\n  State,\n  Prop,\n  Event,\n  type EventEmitter,\n} from '@stencil/core';\nimport { useSearchcraftStore } from '@provider/store';\nimport type { Facets } from '@searchcraft/core';\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  @Event() filtersUpdated: EventEmitter<string[]>;\n\n  @State() dynamicFilters: Array<{ label: string; value: string }> = [];\n  @State() isRequesting = false;\n  @State() selectedFilters: Set<string> = new Set();\n  @State() originalFilterCounts: Record<string, string> = {};\n\n  private searchStore = useSearchcraftStore.getState();\n  unsubscribe: () => void;\n\n  connectedCallback() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.isRequesting = state.isRequesting;\n      const facets = state.searchResults?.data.facets;\n      if (facets) {\n        this.populateFiltersFromFacets(facets);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  populateFiltersFromFacets(facets: Facets) {\n    const newFilters = Object.entries(facets).flatMap(([facetKey, facetData]) =>\n      Object.entries(facetData.counts).map(([value, count]) => {\n        const filterValue = `${facetKey}:${value}`;\n        this.originalFilterCounts[filterValue] = `${count}`; // Store the original count\n        return {\n          label: `${facetKey}: ${value.replace(/^\\//, '')} (${count})`,\n          value: filterValue,\n        };\n      }),\n    );\n    this.dynamicFilters = newFilters;\n  }\n\n  handleFilterChange = (value: string, checked: boolean) => {\n    if (checked) {\n      this.selectedFilters.add(value);\n    } else {\n      this.selectedFilters.delete(value);\n    }\n\n    const selectedFiltersArray = Array.from(this.selectedFilters);\n    this.filtersUpdated.emit(selectedFiltersArray);\n    this.searchStore.setSelectedFilters(selectedFiltersArray);\n    this.searchStore.search();\n  };\n\n  render() {\n    const checkedFilters = Array.from(this.selectedFilters).map((value) => {\n      const count = this.originalFilterCounts[value] || '0';\n      return {\n        label: `${value.split(':')[1]} (${count})`,\n        value,\n      };\n    });\n\n    const remainingDynamicFilters = this.dynamicFilters.filter(\n      (filter) => !this.selectedFilters.has(filter.value),\n    );\n\n    if (this.isRequesting) {\n      return <div>Loading facets</div>;\n    }\n\n    return (\n      <div class='filtersList'>\n        {checkedFilters.map((filter) => (\n          <label class='checkboxLabel' key={filter.value}>\n            <input\n              class='filterListCheckbox'\n              checked\n              onChange={(event: Event) =>\n                this.handleFilterChange(\n                  filter.value,\n                  (event.target as HTMLInputElement).checked,\n                )\n              }\n              type='checkbox'\n              value={filter.value}\n            />\n            {filter.label}\n          </label>\n        ))}\n        {remainingDynamicFilters.map((filter) => {\n          const filterLabel = filter.label.split(':')[1] || filter.label;\n          return (\n            <label class='checkboxLabel' key={filter.value}>\n              <input\n                class='filterListCheckbox'\n                checked={this.selectedFilters.has(filter.value)}\n                onChange={(event: Event) =>\n                  this.handleFilterChange(\n                    filter.value,\n                    (event.target as HTMLInputElement).checked,\n                  )\n                }\n                type='checkbox'\n                value={filter.value}\n              />\n              {filterLabel}\n            </label>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"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&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}\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}\n\n.checkboxLabel input[type=\"checkbox\"]:checked::before {\n  color: #fff;\n  content: '✔';\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}\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  width: 24px;\n}\n\n.childCheckboxLabel input[type=\"checkbox\"]:checked {\n  background-color: #000;\n}\n\n.childCheckboxLabel input[type=\"checkbox\"]:checked::before {\n  color: #fff;\n  content: '✔';\n}","import {\n  Component,\n  h,\n  State,\n  Prop,\n  Event,\n  type EventEmitter,\n} from '@stencil/core';\nimport { useSearchcraftStore } from '@provider/store';\nimport type { Facets } from '@searchcraft/core';\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  @Event() filtersUpdated: EventEmitter<string[]>;\n\n  @State() dynamicFilters: Array<{ label: string; value: string }> = [];\n  @State() initialFilters: Array<{ label: string; value: string }> = [];\n  @State() isRequesting = false;\n  @State() selectedFilters: Set<string> = new Set();\n  @State() originalFilterCounts: Record<string, string> = {};\n  @State() query = '';\n  @State() resultsCount = 0;\n\n  private searchStore = useSearchcraftStore.getState();\n  unsubscribe: () => void;\n\n  connectedCallback() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.isRequesting = state.isRequesting;\n      this.query = state.query || '';\n      this.resultsCount = state.searchResults?.data?.hits?.length || 0;\n\n      const facets = state.searchResults?.data.facets;\n      if (facets) {\n        this.populateFiltersFromFacets(facets);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  populateFiltersFromFacets(facets: Facets) {\n    const newFilters = Object.entries(facets.section?.counts || {}).map(\n      ([key, count]) => {\n        const filterValue = key;\n        this.originalFilterCounts[filterValue] = `${count}`;\n        return {\n          label: `${key.replace(/^\\//, '')} (${count})`,\n          value: filterValue,\n        };\n      },\n    );\n\n    // Update dynamic filters while preserving the initial filters\n    const updatedFilters = [\n      ...this.initialFilters,\n      ...newFilters.filter(\n        (filter) =>\n          !this.initialFilters.some(\n            (initial) => initial.value === filter.value,\n          ),\n      ),\n    ];\n\n    this.dynamicFilters = updatedFilters;\n\n    // Store the initial filters only once\n    if (this.initialFilters.length === 0) {\n      this.initialFilters = [...updatedFilters];\n    }\n  }\n\n  handleFilterChange = (value: string, checked: boolean) => {\n    if (checked) {\n      this.selectedFilters.add(value);\n    } else {\n      this.selectedFilters.delete(value);\n    }\n\n    const selectedFiltersArray = Array.from(this.selectedFilters);\n\n    this.filtersUpdated.emit(selectedFiltersArray);\n    this.searchStore.setSelectedFilters(selectedFiltersArray);\n    this.searchStore.search();\n  };\n\n  formatLabel(label: string): string {\n    return label\n      .replace(/-/g, ' ') // Replace dashes with spaces\n      .split(' ') // Split words\n      .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize the first letter\n      .join(' '); // Join words back into a single string\n  }\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n\n    const filtersToRender = this.initialFilters.map((initialFilter) => {\n      const isChecked = this.selectedFilters.has(initialFilter.value);\n      const dynamicChildren = this.dynamicFilters.filter(\n        (dynamicFilter) =>\n          dynamicFilter.value.startsWith(initialFilter.value) &&\n          dynamicFilter.value !== initialFilter.value, // Exclude parent itself\n      );\n      return {\n        ...initialFilter,\n        isChecked,\n        children: dynamicChildren,\n      };\n    });\n\n    return (\n      <div class='filtersList'>\n        {filtersToRender.map((filter) => (\n          <div key={filter.value}>\n            {/* Render the parent filter */}\n            <label class='checkboxLabel'>\n              <input\n                class='filterCheckbox'\n                checked={filter.isChecked}\n                onChange={(event: Event) =>\n                  this.handleFilterChange(\n                    filter.value,\n                    (event.target as HTMLInputElement).checked,\n                  )\n                }\n                type='checkbox'\n                value={filter.value}\n              />\n              {this.formatLabel(filter.label)}\n            </label>\n\n            {/* Render dynamic child filters underneath the checked parent */}\n            {filter.isChecked &&\n              filter.children.map((childFilter) => {\n                const childLabel = childFilter.label.split('/').pop(); // Get only the part after the last '/'\n                return (\n                  <label\n                    class='childCheckboxLabel'\n                    key={childFilter.value}\n                    style={{ marginLeft: '20px' }} // Add indentation for child filters\n                  >\n                    <input\n                      class='childFilterCheckbox'\n                      checked={this.selectedFilters.has(childFilter.value)}\n                      onChange={(event: Event) =>\n                        this.handleFilterChange(\n                          childFilter.value,\n                          (event.target as HTMLInputElement).checked,\n                        )\n                      }\n                      type='checkbox'\n                      value={childFilter.value}\n                    />\n                    {this.formatLabel(childLabel || '')}\n                  </label>\n                );\n              })}\n          </div>\n        ))}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

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

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

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

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

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

package/dist/components/searchcraft-input.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftInput$1, d as defineCustomElement$1 } from './p-37df2122.js';
+import { S as SearchcraftInput$1, d as defineCustomElement$1 } from './p-2350c0ab.js';
 
 const SearchcraftInput = SearchcraftInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-results-info.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SearchcraftResultsInfo extends Components.SearchcraftResultsInfo, HTMLElement {}
+export const SearchcraftResultsInfo: {
+    prototype: SearchcraftResultsInfo;
+    new (): SearchcraftResultsInfo;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,63 @@
+import { p as proxyCustomElement, H, h } from './p-7498e493.js';
+import { u as useSearchcraftStore } from './p-99971aa9.js';
+
+const searchcraftResultsInfoModuleCss = ".container{border-bottom:1px solid #D9D9D9;display:flex;justify-content:flex-start;width:100%}.resultsInfo{color:#292929;font-family:\"Brygada 1918\";font-size:18px;font-weight:600;line-height:20px;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 = '';
+        this.query = '';
+    }
+    connectedCallback() {
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            var _a, _b, _c, _d;
+            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
+        });
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    render() {
+        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")));
+    }
+    static get style() { return SearchcraftResultsInfoStyle0; }
+}, [1, "searchcraft-results-info", {
+        "isRequesting": [32],
+        "resultsCount": [32],
+        "responseTime": [32],
+        "query": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-results-info"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-results-info":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftResultsInfo$1);
+            }
+            break;
+    } });
+}
+
+const SearchcraftResultsInfo = SearchcraftResultsInfo$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SearchcraftResultsInfo, defineCustomElement };
+
+//# sourceMappingURL=searchcraft-results-info.js.map

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

@@ -0,0 +1 @@
+{"file":"searchcraft-results-info.js","mappings":";;;AAAA,MAAM,+BAA+B,GAAG,mOAAmO,CAAC;AAC5Q,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-family: 'Brygada 1918';\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}

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

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

package/dist/components/searchcraft-slider.js

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h } from './p-c9cd5533.js';
-import { u as useSearchcraftStore } from './p-5aa6335f.js';
+import { p as proxyCustomElement, H, h } from './p-7498e493.js';
+import { u as useSearchcraftStore } from './p-99971aa9.js';
 
-const searchcraftSliderModuleCss = ".slider-container{display:flex;flex-direction:column;gap:10px;font-family:Arial, sans-serif;align-items:center}label{font-size:14px;font-weight:bold;margin-bottom:10px}.range-container{display:flex;width:100%;align-items:center}.range-slider{width:100%;height:4px;background:#ddd;border-radius:2px;outline:none;margin:0 -1px;position:relative}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#007bff;border-radius:50%;border:2px solid #fff;cursor:pointer;position:relative}.range-slider::-moz-range-thumb{width:20px;height:20px;background:#007bff;border-radius:50%;border:2px solid #fff;cursor:pointer}.range-slider:before{content:\"\";position:absolute;height:4px;background:#007bff;border-radius:2px;left:0;right:0;z-index:-1}.year-labels{display:flex;justify-content:space-between;width:100%;margin-top:10px;font-size:12px;color:#555}.year-label{min-width:30px;text-align:center}";
+const searchcraftSliderModuleCss = ".slider-container{display:flex;flex-direction:column;gap:10px;font-family:Arial, sans-serif;align-items:center}label{font-size:14px;font-weight:bold;margin-bottom:10px}.range-container{display:flex;width:100%;align-items:center}.range-slider{width:100%;height:4px;background:#ddd;border-radius:2px;outline:none;margin:0 -1px;position:relative}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background-color:#FFF;border-radius:50%;border:1px solid #E6E6E6;cursor:pointer;position:relative}.range-slider::-moz-range-thumb{width:20px;height:20px;background-color:#FFF;border-radius:50%;border:1px solid #E6E6E6;cursor:pointer}.range-slider:before{content:\"\";position:absolute;height:4px;background-color:#FFF;border-radius:2px;left:0;right:0;z-index:-1}.year-labels{display:flex;justify-content:space-between;width:100%;margin-top:10px;font-size:15px;font-weight:600;font-family:\"Source Sans Pro\";color:#666}.year-label{min-width:30px;text-align:center}";
 const SearchcraftSliderStyle0 = searchcraftSliderModuleCss;
 
 const SearchcraftSlider$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftSlider extends H {
@@ -11,14 +11,14 @@ const SearchcraftSlider$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftSl
         this.__attachShadow();
         this.searchStore = useSearchcraftStore.getState();
         this.updateYears = async () => {
-            const query = this.searchStore.query; // Get the query from the store
             this.searchStore.setYearsRange([this.startYear, this.endYear]);
             try {
-                if (!query || query.trim() === '') {
-                    console.warn('No query value, search request skipped.');
-                    return;
+                if (typeof this.query === 'string' && this.query.trim() !== '') {
+                    await this.searchStore.search();
+                }
+                else {
+                    console.warn('Query is missing or empty, skipping search request.');
                 }
-                await this.searchStore.search();
             }
             catch (error) {
                 console.error('Search failed:', error);
@@ -36,18 +36,42 @@ const SearchcraftSlider$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftSl
         };
         this.minYear = 2000;
         this.maxYear = new Date().getFullYear();
-        this.startYear = this.minYear;
         this.endYear = this.maxYear;
+        this.query = '';
+        this.startYear = this.minYear;
+        this.hasSearched = false;
+        this.resultsCount = 0;
+    }
+    componentDidLoad() {
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            var _a, _b, _c;
+            if (state.query.length > 0) {
+                this.hasSearched = true;
+                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;
+            }
+            this.query = state.query;
+        });
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
     }
     render() {
-        return (h("div", { key: 'cc50ae827183ec2cbf1ab16f4a3514fbd581cf01', class: 'slider-container' }, h("label", { key: '96df103d7a04aa5e0364ddf51e13af653984b8a6' }, "Filter by Year"), h("div", { key: 'dc0b68f7cd3b9a3e2fd37b6204e1542ee9fb0478', class: 'range-container' }, h("input", { key: '8ed75b7de77448d8340a76224609345309c20fe4', type: 'range', min: this.minYear, max: this.maxYear, value: this.startYear, step: '1', onInput: this.handleStartYearChange, class: 'range-slider' }), h("input", { key: '12a3612f9245d6ea290007d094668625907c183d', type: 'range', min: this.minYear, max: this.maxYear, value: this.endYear, step: '1', onInput: this.handleEndYearChange, class: 'range-slider' })), h("div", { key: '3bf225797efb2c5e1d97275e2f012faba14d2550', class: 'year-labels' }, h("span", { key: '524c7f49dc52d68059373ecc1e95b425892f0144', class: 'year-label' }, this.startYear), h("span", { key: 'e7464b4154ab8d26a969b338a5a733a206502f29', class: 'year-label' }, this.endYear))));
+        if (!this.query || this.resultsCount === 0) {
+            return null;
+        }
+        return (h("div", { class: 'slider-container' }, h("div", { class: 'range-container' }, h("input", { class: 'range-slider', max: this.maxYear, min: this.minYear, onInput: this.handleStartYearChange, step: '1', type: 'range', value: this.startYear }), h("input", { class: 'range-slider', max: this.maxYear, min: this.minYear, onInput: this.handleEndYearChange, step: '1', type: 'range', value: this.endYear })), h("div", { class: 'year-labels' }, h("span", { class: 'year-label' }, this.startYear), h("span", { class: 'year-label' }, this.endYear))));
     }
     static get style() { return SearchcraftSliderStyle0; }
 }, [1, "searchcraft-slider", {
         "minYear": [2, "min-year"],
         "maxYear": [2, "max-year"],
+        "endYear": [32],
+        "query": [32],
         "startYear": [32],
-        "endYear": [32]
+        "hasSearched": [32],
+        "resultsCount": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -62,7 +86,6 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1();
 
 const SearchcraftSlider = SearchcraftSlider$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-slider.js.map

@@ -1 +1 @@
-{"file":"searchcraft-slider.js","mappings":";;;AAAA,MAAM,0BAA0B,GAAG,i7BAAi7B,CAAC;AACr9B,gCAAe,0BAA0B;;MCO5BA,mBAAiB;;;;;QAOpB,gBAAW,GAAG,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QAE7C,gBAAW,GAAG;YACpB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;YACrC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;YAE/D,IAAI;gBACF,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBACjC,OAAO,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAC;oBACxD,OAAO;iBACR;gBACD,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;aACjC;YAAC,OAAO,KAAK,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;aACxC;SACF,CAAC;QAEM,0BAAqB,GAAG,CAAC,KAAiB;YAChD,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC5E,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YAC/C,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB,CAAC;QAEM,wBAAmB,GAAG,CAAC,KAAiB;YAC9C,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC5E,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YAC/C,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB,CAAC;uBAjCgB,IAAI;uBACJ,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;yBAErB,IAAI,CAAC,OAAO;uBACd,IAAI,CAAC,OAAO;;IA+B/B,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,iFAA6B,EAC7B,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,IAAI,CAAC,qBAAqB,EACnC,KAAK,EAAC,cAAc,GACpB,EACF,8DACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,KAAK,EAAC,cAAc,GACpB,CACE,EACN,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,SAAS,CAAQ,EAChD,6DAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,OAAO,CAAQ,CAC1C,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftSlider"],"sources":["src/components/searchcraft-slider/searchcraft-slider.module.scss?tag=searchcraft-slider&encapsulation=shadow","src/components/searchcraft-slider/searchcraft-slider.tsx"],"sourcesContent":[".slider-container {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  font-family: Arial, sans-serif;\n  align-items: center;\n}\n\nlabel {\n  font-size: 14px;\n  font-weight: bold;\n  margin-bottom: 10px;\n}\n\n.range-container {\n  display: flex;\n  width: 100%;\n  align-items: center;\n}\n\n.range-slider {\n  width: 100%;\n  height: 4px;\n  background: #ddd;\n  border-radius: 2px;\n  outline: none;\n  margin: 0 -1px;\n  position: relative;\n}\n\n.range-slider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 20px;\n  height: 20px;\n  background: #007bff;\n  border-radius: 50%;\n  border: 2px solid #fff;\n  cursor: pointer;\n  position: relative;\n}\n\n.range-slider::-moz-range-thumb {\n  width: 20px;\n  height: 20px;\n  background: #007bff;\n  border-radius: 50%;\n  border: 2px solid #fff;\n  cursor: pointer;\n}\n\n.range-slider:before {\n  content: '';\n  position: absolute;\n  height: 4px;\n  background: #007bff;\n  border-radius: 2px;\n  left: 0;\n  right: 0;\n  z-index: -1;\n}\n\n.year-labels {\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 10px;\n  font-size: 12px;\n  color: #555;\n}\n\n.year-label {\n  min-width: 30px;\n  text-align: center;\n}","import { Component, h, State, Prop } from '@stencil/core';\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n  tag: 'searchcraft-slider',\n  styleUrl: 'searchcraft-slider.module.scss',\n  shadow: true,\n})\nexport class SearchcraftSlider {\n  @Prop() minYear = 2000;\n  @Prop() maxYear = new Date().getFullYear();\n\n  @State() startYear = this.minYear;\n  @State() endYear = this.maxYear;\n\n  private searchStore = useSearchcraftStore.getState();\n\n  private updateYears = async () => {\n    const query = this.searchStore.query; // Get the query from the store\n    this.searchStore.setYearsRange([this.startYear, this.endYear]);\n\n    try {\n      if (!query || query.trim() === '') {\n        console.warn('No query value, search request skipped.');\n        return;\n      }\n      await this.searchStore.search();\n    } catch (error) {\n      console.error('Search failed:', error);\n    }\n  };\n\n  private handleStartYearChange = (event: InputEvent) => {\n    const value = Number.parseInt((event.target as HTMLInputElement).value, 10);\n    this.startYear = Math.min(value, this.endYear);\n    this.updateYears();\n  };\n\n  private handleEndYearChange = (event: InputEvent) => {\n    const value = Number.parseInt((event.target as HTMLInputElement).value, 10);\n    this.endYear = Math.max(value, this.startYear);\n    this.updateYears();\n  };\n\n  render() {\n    return (\n      <div class='slider-container'>\n        <label>Filter by Year</label>\n        <div class='range-container'>\n          <input\n            type='range'\n            min={this.minYear}\n            max={this.maxYear}\n            value={this.startYear}\n            step='1'\n            onInput={this.handleStartYearChange}\n            class='range-slider'\n          />\n          <input\n            type='range'\n            min={this.minYear}\n            max={this.maxYear}\n            value={this.endYear}\n            step='1'\n            onInput={this.handleEndYearChange}\n            class='range-slider'\n          />\n        </div>\n        <div class='year-labels'>\n          <span class='year-label'>{this.startYear}</span>\n          <span class='year-label'>{this.endYear}</span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"searchcraft-slider.js","mappings":"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","names":["SearchcraftSlider"],"sources":["src/components/searchcraft-slider/searchcraft-slider.module.scss?tag=searchcraft-slider&encapsulation=shadow","src/components/searchcraft-slider/searchcraft-slider.tsx"],"sourcesContent":[".slider-container {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  font-family: Arial, sans-serif;\n  align-items: center;\n}\n\nlabel {\n  font-size: 14px;\n  font-weight: bold;\n  margin-bottom: 10px;\n}\n\n.range-container {\n  display: flex;\n  width: 100%;\n  align-items: center;\n}\n\n.range-slider {\n  width: 100%;\n  height: 4px;\n  background: #ddd;\n  border-radius: 2px;\n  outline: none;\n  margin: 0 -1px;\n  position: relative;\n}\n\n.range-slider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 20px;\n  height: 20px;\n  background-color: #FFF;\n  border-radius: 50%;\n  border: 1px solid #E6E6E6;\n  cursor: pointer;\n  position: relative;\n}\n\n.range-slider::-moz-range-thumb {\n  width: 20px;\n  height: 20px;\n  background-color: #FFF;\n  border-radius: 50%;\n  border: 1px solid #E6E6E6;\n  cursor: pointer;\n}\n\n.range-slider:before {\n  content: '';\n  position: absolute;\n  height: 4px;\n  background-color: #FFF;\n  border-radius: 2px;\n  left: 0;\n  right: 0;\n  z-index: -1;\n}\n\n.year-labels {\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  margin-top: 10px;\n  font-size: 15px;\n  font-weight: 600;\n  font-family: 'Source Sans Pro';\n  color: #666;\n}\n\n.year-label {\n  min-width: 30px;\n  text-align: center;\n}","import { Component, h, State, Prop } from '@stencil/core';\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n  tag: 'searchcraft-slider',\n  styleUrl: 'searchcraft-slider.module.scss',\n  shadow: true,\n})\nexport class SearchcraftSlider {\n  @Prop() minYear = 2000;\n  @Prop() maxYear = new Date().getFullYear();\n\n  @State() endYear = this.maxYear;\n  @State() query = '';\n  @State() startYear = this.minYear;\n  @State() hasSearched = false;\n  unsubscribe: () => void;\n  private searchStore = useSearchcraftStore.getState();\n  @State() resultsCount = 0; // Track the count of search results\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (state.query.length > 0) {\n        this.hasSearched = true;\n        this.resultsCount = state.searchResults?.data?.hits?.length || 0;\n      }\n      this.query = state.query;\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  private updateYears = async () => {\n    this.searchStore.setYearsRange([this.startYear, this.endYear]);\n\n    try {\n      if (typeof this.query === 'string' && this.query.trim() !== '') {\n        await this.searchStore.search();\n      } else {\n        console.warn('Query is missing or empty, skipping search request.');\n      }\n    } catch (error) {\n      console.error('Search failed:', error);\n    }\n  };\n\n  private handleStartYearChange = (event: InputEvent) => {\n    const value = Number.parseInt((event.target as HTMLInputElement).value, 10);\n    this.startYear = Math.min(value, this.endYear);\n    this.updateYears();\n  };\n\n  private handleEndYearChange = (event: InputEvent) => {\n    const value = Number.parseInt((event.target as HTMLInputElement).value, 10);\n    this.endYear = Math.max(value, this.startYear);\n    this.updateYears();\n  };\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n    return (\n      <div class='slider-container'>\n        <div class='range-container'>\n          <input\n            class='range-slider'\n            max={this.maxYear}\n            min={this.minYear}\n            onInput={this.handleStartYearChange}\n            step='1'\n            type='range'\n            value={this.startYear}\n          />\n          <input\n            class='range-slider'\n            max={this.maxYear}\n            min={this.minYear}\n            onInput={this.handleEndYearChange}\n            step='1'\n            type='range'\n            value={this.endYear}\n          />\n        </div>\n        <div class='year-labels'>\n          <span class='year-label'>{this.startYear}</span>\n          <span class='year-label'>{this.endYear}</span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/searchcraft-spinner-dark.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftSpinnerDark$1, d as defineCustomElement$1 } from './p-50ca3fe4.js';
+import { S as SearchcraftSpinnerDark$1, d as defineCustomElement$1 } from './p-15dd4fe4.js';
 
 const SearchcraftSpinnerDark = SearchcraftSpinnerDark$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-spinner-light.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftSpinnerLight$1, d as defineCustomElement$1 } from './p-e0e0fc94.js';
+import { S as SearchcraftSpinnerLight$1, d as defineCustomElement$1 } from './p-c815eb98.js';
 
 const SearchcraftSpinnerLight = SearchcraftSpinnerLight$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-toggle-button.js

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h } from './p-c9cd5533.js';
-import { u as useSearchcraftStore } from './p-5aa6335f.js';
+import { p as proxyCustomElement, H, h } from './p-7498e493.js';
+import { u as useSearchcraftStore } from './p-99971aa9.js';
 
-const searchcraftToggleButtonModuleCss = ".toggle-container{display:flex;align-items:center;font-size:14px;color:#333}.toggle-wrapper{box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05);margin-left:10px;border:none;border-radius:16px;width:44px;height:26px;background:#ddd;position:relative;cursor:pointer}.toggle-wrapper.active{box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05);background:#007DB3}.toggle-wrapper .toggle-switch{width:18px;height:18px;background:#fff;border-radius:50%;position:absolute;top:calc(50% - 9px);left:4px;transition:transform 0.3s ease}.toggle-wrapper .toggle-switch.active{transform:translateX(16px)}";
+const searchcraftToggleButtonModuleCss = ".toggle-wrapper{box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05);margin-left:10px;border:none;border-radius:16px;width:44px;height:26px;background:#ddd;position:relative;cursor:pointer}.toggle-wrapper.active{box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05);background:#007DB3}.toggle-wrapper .toggle-switch{width:18px;height:18px;background:#fff;border-radius:50%;position:absolute;top:calc(50% - 9px);left:4px;transition:transform 0.3s ease}.toggle-wrapper .toggle-switch.active{transform:translateX(16px)}";
 const SearchcraftToggleButtonStyle0 = searchcraftToggleButtonModuleCss;
 
 const SearchcraftToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftToggleButton extends H {
@@ -9,7 +9,6 @@ const SearchcraftToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class Searchc
         super();
         this.__registerHost();
         this.__attachShadow();
-        // Zustand store hook
         this.searchStore = useSearchcraftStore.getState();
         this.handleToggle = async () => {
             this.isActive = !this.isActive;
@@ -20,7 +19,7 @@ const SearchcraftToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class Searchc
                 });
             }
             else if (this.type === 'sort') {
-                const sort = this.isActive ? 'asc' : 'desc';
+                const sort = this.isActive ? 'desc' : 'asc';
                 this.searchStore.setSearchParams({
                     sort,
                 });
@@ -34,19 +33,33 @@ const SearchcraftToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class Searchc
         };
         this.type = 'mode';
         this.isActive = false;
+        this.query = '';
+        this.resultsCount = 0;
+    }
+    componentDidLoad() {
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            var _a, _b, _c;
+            this.query = state.query || '';
+            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;
+        });
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
     }
     render() {
-        const label = this.type === 'mode'
-            ? 'Exact Match'
-            : this.type === 'sort'
-                ? 'Sort Order'
-                : '';
-        return (h("div", { key: '8bfbd9cf161d3dc285d7309ada79e9fb68624a45', class: 'toggle-container' }, h("span", { key: '99b5f67e53e45ebf97fef2bb2a52e50c804dec4d' }, label), h("button", { key: 'c6444cfcd24ef3558d0d93ebe0d4dcd4ceb8b29e', class: `toggle-wrapper ${this.isActive ? 'active' : ''}`, onClick: this.handleToggle, type: 'button' }, h("div", { key: '801f2e99c695449e161699fc874aa05ee1cf1e07', class: `toggle-switch ${this.isActive ? 'active' : ''}` }))));
+        if (!this.query || this.resultsCount === 0) {
+            return null;
+        }
+        return (h("button", { class: `toggle-wrapper ${this.isActive ? 'active' : ''}`, onClick: this.handleToggle, type: 'button' }, h("div", { class: `toggle-switch ${this.isActive ? 'active' : ''}` })));
     }
     static get style() { return SearchcraftToggleButtonStyle0; }
 }, [1, "searchcraft-toggle-button", {
         "type": [1],
-        "isActive": [32]
+        "isActive": [32],
+        "query": [32],
+        "resultsCount": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -61,7 +74,6 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1();
 
 const SearchcraftToggleButton = SearchcraftToggleButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-toggle-button.js.map

@@ -1 +1 @@
-{"file":"searchcraft-toggle-button.js","mappings":";;;AAAA,MAAM,gCAAgC,GAAG,qkBAAqkB,CAAC;AAC/mB,sCAAe,gCAAgC;;MCOlCA,yBAAuB;;;;;;QAW1B,gBAAW,GAAG,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QAE7C,iBAAY,GAAG;YACrB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAE/B,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;gBACxB,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;gBAChD,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC;oBAC/B,IAAI;iBACL,CAAC,CAAC;aACJ;iBAAM,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;gBAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;gBAC5C,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC;oBAC/B,IAAI;iBACL,CAAC,CAAC;aACJ;YAED,IAAI;gBACF,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;aACjC;YAAC,OAAO,KAAK,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;aACxC;SACF,CAAC;oBA3B8B,MAAM;wBAElB,KAAK;;IA2BzB,MAAM;QACJ,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,MAAM;cAChB,aAAa;cACb,IAAI,CAAC,IAAI,KAAK,MAAM;kBAClB,YAAY;kBACZ,EAAE,CAAC;QAEX,QACE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,+DAAO,KAAK,CAAQ,EACpB,+DACE,KAAK,EAAE,kBAAkB,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,EAAE,EAAE,EACxD,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,QAAQ,IAEb,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,EAAE,EAAE,GAAI,CACzD,CACL,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftToggleButton"],"sources":["src/components/searchcraft-toggle-button/searchcraft-toggle-button.module.scss?tag=searchcraft-toggle-button&encapsulation=shadow","src/components/searchcraft-toggle-button/searchcraft-toggle-button.tsx"],"sourcesContent":[".toggle-container {\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  color: #333;\n}\n\n.toggle-wrapper {\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05);\n  margin-left: 10px;\n  border: none;\n  border-radius: 16px;\n  width: 44px;\n  height: 26px;\n  background: #ddd;\n  position: relative;\n  cursor: pointer;\n}\n\n.toggle-wrapper.active {\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05);\n  background: #007DB3;\n}\n\n.toggle-wrapper .toggle-switch {\n  width: 18px;\n  height: 18px;\n  background: #fff;\n  border-radius: 50%;\n  position: absolute;\n  top: calc(50% - 18px/2);\n  left: 4px;\n  transition: transform 0.3s ease;\n}\n\n.toggle-wrapper .toggle-switch.active {\n  transform: translateX(16px);\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n  tag: 'searchcraft-toggle-button',\n  styleUrl: 'searchcraft-toggle-button.module.scss',\n  shadow: true,\n})\nexport class SearchcraftToggleButton {\n  /**\n   * Type of the toggle - determines what it controls\n   * 'mode': toggles between 'fuzzy' and 'normal'\n   * 'sort': toggles between 'asc' and 'desc'\n   */\n  @Prop() type: 'mode' | 'sort' = 'mode';\n\n  @State() isActive = false;\n\n  // Zustand store hook\n  private searchStore = useSearchcraftStore.getState();\n\n  private handleToggle = async () => {\n    this.isActive = !this.isActive;\n\n    if (this.type === 'mode') {\n      const mode = this.isActive ? 'normal' : 'fuzzy';\n      this.searchStore.setSearchParams({\n        mode,\n      });\n    } else if (this.type === 'sort') {\n      const sort = this.isActive ? 'asc' : 'desc';\n      this.searchStore.setSearchParams({\n        sort,\n      });\n    }\n\n    try {\n      await this.searchStore.search();\n    } catch (error) {\n      console.error('Search failed:', error);\n    }\n  };\n\n  render() {\n    const label =\n      this.type === 'mode'\n        ? 'Exact Match'\n        : this.type === 'sort'\n          ? 'Sort Order'\n          : '';\n\n    return (\n      <div class='toggle-container'>\n        <span>{label}</span>\n        <button\n          class={`toggle-wrapper ${this.isActive ? 'active' : ''}`}\n          onClick={this.handleToggle}\n          type='button'\n        >\n          <div class={`toggle-switch ${this.isActive ? 'active' : ''}`} />\n        </button>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"searchcraft-toggle-button.js","mappings":";;;AAAA,MAAM,gCAAgC,GAAG,yfAAyf,CAAC;AACniB,sCAAe,gCAAgC;;MCOlCA,yBAAuB;;;;;QAa1B,gBAAW,GAAG,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QAe7C,iBAAY,GAAG;YACrB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAE/B,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;gBACxB,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;gBAChD,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC;oBAC/B,IAAI;iBACL,CAAC,CAAC;aACJ;iBAAM,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;gBAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAC;gBAC5C,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC;oBAC/B,IAAI;iBACL,CAAC,CAAC;aACJ;YAED,IAAI;gBACF,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;aACjC;YAAC,OAAO,KAAK,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;aACxC;SACF,CAAC;oBA1C8B,MAAM;wBAElB,KAAK;qBACR,EAAE;4BACK,CAAC;;IAKzB,gBAAgB;QACd,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;;YACrD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;YAC/B,IAAI,CAAC,YAAY,GAAG,CAAA,MAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,IAAI,0CAAE,MAAM,KAAI,CAAC,CAAC;SAClE,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAwBD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;YAC1C,OAAO,IAAI,CAAC;SACb;QAED,QACE,cACE,KAAK,EAAE,kBAAkB,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,EAAE,EAAE,EACxD,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,QAAQ,IAEb,WAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,EAAE,EAAE,GAAI,CACzD,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftToggleButton"],"sources":["src/components/searchcraft-toggle-button/searchcraft-toggle-button.module.scss?tag=searchcraft-toggle-button&encapsulation=shadow","src/components/searchcraft-toggle-button/searchcraft-toggle-button.tsx"],"sourcesContent":[".toggle-wrapper {\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05);\n  margin-left: 10px;\n  border: none;\n  border-radius: 16px;\n  width: 44px;\n  height: 26px;\n  background: #ddd;\n  position: relative;\n  cursor: pointer;\n}\n\n.toggle-wrapper.active {\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05);\n  background: #007DB3;\n}\n\n.toggle-wrapper .toggle-switch {\n  width: 18px;\n  height: 18px;\n  background: #fff;\n  border-radius: 50%;\n  position: absolute;\n  top: calc(50% - 18px/2);\n  left: 4px;\n  transition: transform 0.3s ease;\n}\n\n.toggle-wrapper .toggle-switch.active {\n  transform: translateX(16px);\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n  tag: 'searchcraft-toggle-button',\n  styleUrl: 'searchcraft-toggle-button.module.scss',\n  shadow: true,\n})\nexport class SearchcraftToggleButton {\n  /**\n   * Type of the toggle - determines what it controls\n   * 'mode': toggles between 'fuzzy' and 'normal'\n   * 'sort': toggles between 'asc' and 'desc'\n   */\n  @Prop() type: 'mode' | 'sort' = 'mode';\n\n  @State() isActive = false;\n  @State() query = ''; // Track the query\n  @State() resultsCount = 0; // Track the count of search results\n\n  private unsubscribe: () => void;\n  private searchStore = useSearchcraftStore.getState();\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.query = state.query || '';\n      this.resultsCount = state.searchResults?.data?.hits?.length || 0;\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  private handleToggle = async () => {\n    this.isActive = !this.isActive;\n\n    if (this.type === 'mode') {\n      const mode = this.isActive ? 'normal' : 'fuzzy';\n      this.searchStore.setSearchParams({\n        mode,\n      });\n    } else if (this.type === 'sort') {\n      const sort = this.isActive ? 'desc' : 'asc';\n      this.searchStore.setSearchParams({\n        sort,\n      });\n    }\n\n    try {\n      await this.searchStore.search();\n    } catch (error) {\n      console.error('Search failed:', error);\n    }\n  };\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n\n    return (\n      <button\n        class={`toggle-wrapper ${this.isActive ? 'active' : ''}`}\n        onClick={this.handleToggle}\n        type='button'\n      >\n        <div class={`toggle-switch ${this.isActive ? 'active' : ''}`} />\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/{index-92040c37.js → index-0ac5bb53.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'searchcraft-javascript-sdk';
-const BUILD = /* searchcraft-javascript-sdk */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: false };
+const BUILD = /* searchcraft-javascript-sdk */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: false };
 
 /*
  Stencil Client Platform v4.22.3 | MIT Licensed | https://stenciljs.com
@@ -720,7 +720,7 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
       isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
     }
     {
-      {
+      if (tag === "slot" && !useNativeShadowDom) ; else {
         updateElement(oldVNode, newVNode2, isSvgMode);
       }
     }
@@ -1248,4 +1248,4 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 
 export { Fragment as F, bootstrapLazy as b, createEvent as c, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-92040c37.js.map
+//# sourceMappingURL=index-0ac5bb53.js.map