@searchcraft/javascript-sdk 0.1.9 → 0.2.0

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

@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin: 100px 20px;
+  margin: 16px 0;
 }
 .resultsContainer > p {
   align-self: center;
@@ -21,7 +21,9 @@
 
 .adSection {
   align-items: center;
+  background-color: #F1F1F1;
   border: 1px solid #DCDDDE;
+  border-radius: 16px;
   display: flex;
   flex-direction: column;
   font-size: 16px;
@@ -36,5 +38,10 @@
 }
 
 .emptyState {
+  width: 100%;
+  text-align: center;
+}
+
+.errorMessageContainer {
   text-align: center;
 }

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

@@ -17,7 +17,7 @@ export class SearchcraftButton {
     }
     render() {
         const buttonStyle = this.getButtonStyle();
-        return (h(Fragment, { key: '2a29411990063b67c92c60a3f1f805818bea047f' }, this.iconOnly ? (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.isRequesting ? (h("searchcraft-spinner-dark", null)) : (this.iconElement))) : (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.iconPosition === 'left' && this.isRequesting ? (h("div", { class: 'spinner-margin-right' }, h("searchcraft-spinner-dark", null))) : (this.iconElement), h("span", { class: classNames(this.isRequesting && 'button-label', 'searchcraft-button-label') }, this.label)))));
+        return (h(Fragment, { key: 'f10a9faa6357ef626c4e5414a5c8bdc1fe0b63a1' }, this.iconOnly ? (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.isRequesting ? (h("searchcraft-spinner-dark", null)) : (this.iconElement))) : (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.iconPosition === 'left' && this.isRequesting ? (h("div", { class: 'spinner-margin-right' }, h("searchcraft-spinner-dark", null))) : (this.iconElement), h("span", { class: classNames(this.isRequesting && 'button-label', 'searchcraft-button-label') }, this.label)))));
     }
     static get is() { return "searchcraft-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/searchcraft-clear-input-button/searchcraft-clear-input-button.module.css

@@ -11,7 +11,7 @@
   justify-content: center;
   padding: 0;
   position: absolute;
-  right: 25px;
+  right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 20px;
@@ -24,7 +24,7 @@
   display: flex;
   height: 20px;
   justify-content: center;
-  left: 25px;
+  left: 0px;
   padding: 0;
   position: absolute;
   top: 50%;

package/dist/collection/components/searchcraft-error-message/searchcraft-error-message.js

@@ -7,7 +7,7 @@ export class SearchcraftErrorMessage {
     }
     render() {
         const errorMessageStyle = this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';
-        return (h("p", { key: 'f520ac38f2f42e9780454aef5e25576095ae5ee9', class: classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
+        return (h("p", { key: '544903d700810ed5d6efdefedab646cafed2376d', class: classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
     }
     static get is() { return "searchcraft-error-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,15 +17,20 @@ export class SearchcraftFiltersList {
         };
         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);
             }
@@ -37,32 +42,48 @@ export class SearchcraftFiltersList {
         }
     }
     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 is() { return "searchcraft-filters-list"; }
     static get encapsulation() { return "shadow"; }
@@ -104,9 +125,12 @@ export class SearchcraftFiltersList {
     static get states() {
         return {
             "dynamicFilters": {},
+            "initialFilters": {},
             "isRequesting": {},
             "selectedFilters": {},
-            "originalFilterCounts": {}
+            "originalFilterCounts": {},
+            "query": {},
+            "resultsCount": {}
         };
     }
     static get events() {

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

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-filters-list.js","sourceRoot":"","sources":["../../../src/components/searchcraft-filters-list/searchcraft-filters-list.tsx"],"names":[],"mappings":"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","sourcesContent":["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","sourceRoot":"","sources":["../../../src/components/searchcraft-filters-list/searchcraft-filters-list.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/searchcraft-filters-list/searchcraft-filters-list.module.css

@@ -1,15 +1,16 @@
 @charset "UTF-8";
 .filtersList {
-  padding: 16px;
+  width: 100%;
 }
 
 .checkboxLabel {
   align-items: center;
   color: #292929;
   display: flex;
+  font-family: "Source Sans Pro";
   font-size: 14px;
   font-weight: 600;
-  gap: 12px;
+  gap: 14px;
 }
 
 .checkboxLabel input[type=checkbox] {
@@ -31,5 +32,39 @@
 .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: "✔";
 }

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

@@ -48,11 +48,11 @@ export class SearchcraftInput {
         const placeholderStyle = {
             fontSize: validatedCustomStyles.placeholderFontSize || '16px',
         };
-        return (h("div", { key: 'ca2698b808ef606d890817f6b8c133503663570e', class: classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (h(Fragment, null, h("input", { class: classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), h("style", null, `
+        return (h("div", { key: 'ca2698b808ef606d890817f6b8c133503663570e', class: classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (h(Fragment, null, h("input", { autoComplete: 'off', class: classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), h("style", null, `
                 #searchcraft-input-id::placeholder {
                   font-size: ${placeholderStyle.fontSize};
                 }
-              `), this.inputCaptionValue && (h("searchcraft-input-caption", { inputCaptionClassName: this.inputCaptionClassName, inputCaptionValue: this.inputCaptionValue, rightToLeftOrientation: this.rightToLeftOrientation })), this.query.length > 0 && (h("searchcraft-clear-input-button", { isRequesting: this.isRequesting, onClearInput: this.handleClearInput, rightToLeftOrientation: this.rightToLeftOrientation })), h("searchcraft-input-icon", { error: this.error, height: this.inputIconHeight, rightToLeftOrientation: this.rightToLeftOrientation, width: this.inputIconWidth }))) : (h("div", { class: 'inputWrapper' }, h("searchcraft-input-icon", { error: this.error, height: this.inputIconHeight, rightToLeftOrientation: this.rightToLeftOrientation, width: this.inputIconWidth }), h("input", { class: classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), h("style", null, `
+              `), this.inputCaptionValue && (h("searchcraft-input-caption", { inputCaptionClassName: this.inputCaptionClassName, inputCaptionValue: this.inputCaptionValue, rightToLeftOrientation: this.rightToLeftOrientation })), this.query.length > 0 && (h("searchcraft-clear-input-button", { isRequesting: this.isRequesting, onClearInput: this.handleClearInput, rightToLeftOrientation: this.rightToLeftOrientation })), h("searchcraft-input-icon", { error: this.error, height: this.inputIconHeight, rightToLeftOrientation: this.rightToLeftOrientation, width: this.inputIconWidth }))) : (h(Fragment, null, h("searchcraft-input-icon", { error: this.error, height: this.inputIconHeight, rightToLeftOrientation: this.rightToLeftOrientation, width: this.inputIconWidth }), h("input", { autoComplete: 'off', class: classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), h("style", null, `
                 #searchcraft-input-id::placeholder {
                   font-size: ${placeholderStyle.fontSize};
                 }

package/dist/collection/components/searchcraft-input/searchcraft-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-input.js","sourceRoot":"","sources":["../../../src/components/searchcraft-input/searchcraft-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Event,\n  Fragment,\n  type EventEmitter,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils/utils';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n  detail: T;\n  target: HTMLSearchcraftInputElement;\n}\n\n@Component({\n  tag: 'searchcraft-input',\n  styleUrl: 'searchcraft-input.module.scss',\n  shadow: true,\n})\nexport class SearchcraftInput {\n  @Prop() customStyles: string | Record<string, string> = {};\n  @Prop() error = false;\n  @Prop() formClassName = '';\n  @Prop() inputCaptionClassName = '';\n  @Prop() inputCaptionValue = '';\n  @Prop() inputClassName = '';\n  @Prop() inputIconHeight = 20;\n  @Prop() inputIconWidth = 20;\n  @Prop() isRequesting = false;\n  @Prop() placeholderValue = 'Enter Search';\n  @Prop() rightToLeftOrientation = false;\n  @Prop() query = '';\n\n  @Event() clearInput: EventEmitter<void>;\n  @Event() searchInputChange: EventEmitter<string>;\n  @Event() inputKeyUp: EventEmitter<string>;\n\n  @State() theme = 'light';\n\n  private get isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  handleInputChange(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this.searchInputChange.emit(input.value);\n  }\n\n  handleInputKeyUp(event: KeyboardEvent) {\n    const input = event.target as HTMLInputElement;\n    this.inputKeyUp.emit(input.value);\n  }\n\n  handleClearInput() {\n    if (this.clearInput) {\n      this.clearInput.emit();\n    }\n  }\n\n  render() {\n    const containerClassName = this.rightToLeftOrientation\n      ? 'inputContainerRTL'\n      : 'inputContainerLTR';\n\n    const inputClassName = classNames(\n      this.error\n        ? this.isLightTheme\n          ? 'inputErrorLightRTL'\n          : 'inputErrorDarkRTL'\n        : this.isLightTheme\n          ? 'inputLightLTR'\n          : 'inputDarkLTR',\n      'searchcraft-input',\n    );\n\n    const validatedCustomStyles = parseCustomStyles(this.customStyles);\n\n    const placeholderStyle = {\n      fontSize: validatedCustomStyles.placeholderFontSize || '16px',\n    };\n    return (\n      <div\n        class={classNames(\n          containerClassName,\n          this.formClassName,\n          'searchcraft-input-form',\n        )}\n      >\n        {this.rightToLeftOrientation ? (\n          <Fragment>\n            <input\n              class={classNames(inputClassName, 'searchcraft-input')}\n              id='searchcraft-input-id'\n              onChange={this.handleInputChange.bind(this)}\n              onKeyUp={this.handleInputKeyUp.bind(this)}\n              placeholder={this.placeholderValue}\n              type='text'\n              value={this.query}\n              style={validatedCustomStyles}\n            />\n            <style>\n              {`\n                #searchcraft-input-id::placeholder {\n                  font-size: ${placeholderStyle.fontSize};\n                }\n              `}\n            </style>\n            {this.inputCaptionValue && (\n              <searchcraft-input-caption\n                inputCaptionClassName={this.inputCaptionClassName}\n                inputCaptionValue={this.inputCaptionValue}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            {this.query.length > 0 && (\n              <searchcraft-clear-input-button\n                isRequesting={this.isRequesting}\n                onClearInput={this.handleClearInput}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            <searchcraft-input-icon\n              error={this.error}\n              height={this.inputIconHeight}\n              rightToLeftOrientation={this.rightToLeftOrientation}\n              width={this.inputIconWidth}\n            />\n          </Fragment>\n        ) : (\n          <div class='inputWrapper'>\n            <searchcraft-input-icon\n              error={this.error}\n              height={this.inputIconHeight}\n              rightToLeftOrientation={this.rightToLeftOrientation}\n              width={this.inputIconWidth}\n            />\n            <input\n              class={classNames(inputClassName, 'searchcraft-input')}\n              id='searchcraft-input-id'\n              onChange={this.handleInputChange.bind(this)}\n              onKeyUp={this.handleInputKeyUp.bind(this)}\n              placeholder={this.placeholderValue}\n              type='text'\n              value={this.query}\n              style={validatedCustomStyles}\n            />\n            <style>\n              {`\n                #searchcraft-input-id::placeholder {\n                  font-size: ${placeholderStyle.fontSize};\n                }\n              `}\n            </style>\n            {this.inputCaptionValue && (\n              <searchcraft-input-caption\n                inputCaptionClassName={this.inputCaptionClassName}\n                inputCaptionValue={this.inputCaptionValue}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            {this.query.length > 0 && (\n              <searchcraft-clear-input-button\n                isRequesting={this.isRequesting}\n                onClearInput={this.handleClearInput}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-input.js","sourceRoot":"","sources":["../../../src/components/searchcraft-input/searchcraft-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Event,\n  Fragment,\n  type EventEmitter,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils/utils';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n  detail: T;\n  target: HTMLSearchcraftInputElement;\n}\n\n@Component({\n  tag: 'searchcraft-input',\n  styleUrl: 'searchcraft-input.module.scss',\n  shadow: true,\n})\nexport class SearchcraftInput {\n  @Prop() customStyles: string | Record<string, string> = {};\n  @Prop() error = false;\n  @Prop() formClassName = '';\n  @Prop() inputCaptionClassName = '';\n  @Prop() inputCaptionValue = '';\n  @Prop() inputClassName = '';\n  @Prop() inputIconHeight = 20;\n  @Prop() inputIconWidth = 20;\n  @Prop() isRequesting = false;\n  @Prop() placeholderValue = 'Enter Search';\n  @Prop() rightToLeftOrientation = false;\n  @Prop() query = '';\n\n  @Event() clearInput: EventEmitter<void>;\n  @Event() searchInputChange: EventEmitter<string>;\n  @Event() inputKeyUp: EventEmitter<string>;\n\n  @State() theme = 'light';\n\n  private get isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  handleInputChange(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this.searchInputChange.emit(input.value);\n  }\n\n  handleInputKeyUp(event: KeyboardEvent) {\n    const input = event.target as HTMLInputElement;\n    this.inputKeyUp.emit(input.value);\n  }\n\n  handleClearInput() {\n    if (this.clearInput) {\n      this.clearInput.emit();\n    }\n  }\n\n  render() {\n    const containerClassName = this.rightToLeftOrientation\n      ? 'inputContainerRTL'\n      : 'inputContainerLTR';\n\n    const inputClassName = classNames(\n      this.error\n        ? this.isLightTheme\n          ? 'inputErrorLightRTL'\n          : 'inputErrorDarkRTL'\n        : this.isLightTheme\n          ? 'inputLightLTR'\n          : 'inputDarkLTR',\n      'searchcraft-input',\n    );\n\n    const validatedCustomStyles = parseCustomStyles(this.customStyles);\n\n    const placeholderStyle = {\n      fontSize: validatedCustomStyles.placeholderFontSize || '16px',\n    };\n    return (\n      <div\n        class={classNames(\n          containerClassName,\n          this.formClassName,\n          'searchcraft-input-form',\n        )}\n      >\n        {this.rightToLeftOrientation ? (\n          <Fragment>\n            <input\n              autoComplete='off'\n              class={classNames(inputClassName, 'searchcraft-input')}\n              id='searchcraft-input-id'\n              onChange={this.handleInputChange.bind(this)}\n              onKeyUp={this.handleInputKeyUp.bind(this)}\n              placeholder={this.placeholderValue}\n              type='text'\n              value={this.query}\n              style={validatedCustomStyles}\n            />\n            <style>\n              {`\n                #searchcraft-input-id::placeholder {\n                  font-size: ${placeholderStyle.fontSize};\n                }\n              `}\n            </style>\n            {this.inputCaptionValue && (\n              <searchcraft-input-caption\n                inputCaptionClassName={this.inputCaptionClassName}\n                inputCaptionValue={this.inputCaptionValue}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            {this.query.length > 0 && (\n              <searchcraft-clear-input-button\n                isRequesting={this.isRequesting}\n                onClearInput={this.handleClearInput}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            <searchcraft-input-icon\n              error={this.error}\n              height={this.inputIconHeight}\n              rightToLeftOrientation={this.rightToLeftOrientation}\n              width={this.inputIconWidth}\n            />\n          </Fragment>\n        ) : (\n          <Fragment>\n            <searchcraft-input-icon\n              error={this.error}\n              height={this.inputIconHeight}\n              rightToLeftOrientation={this.rightToLeftOrientation}\n              width={this.inputIconWidth}\n            />\n            <input\n              autoComplete='off'\n              class={classNames(inputClassName, 'searchcraft-input')}\n              id='searchcraft-input-id'\n              onChange={this.handleInputChange.bind(this)}\n              onKeyUp={this.handleInputKeyUp.bind(this)}\n              placeholder={this.placeholderValue}\n              type='text'\n              value={this.query}\n              style={validatedCustomStyles}\n            />\n            <style>\n              {`\n                #searchcraft-input-id::placeholder {\n                  font-size: ${placeholderStyle.fontSize};\n                }\n              `}\n            </style>\n            {this.inputCaptionValue && (\n              <searchcraft-input-caption\n                inputCaptionClassName={this.inputCaptionClassName}\n                inputCaptionValue={this.inputCaptionValue}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            {this.query.length > 0 && (\n              <searchcraft-clear-input-button\n                isRequesting={this.isRequesting}\n                onClearInput={this.handleClearInput}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n          </Fragment>\n        )}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,51 @@
+import { h } from "@stencil/core";
+import { useSearchcraftStore } from "../../provider/store";
+export class SearchcraftResultsInfo {
+    constructor() {
+        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 is() { return "searchcraft-results-info"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-results-info.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-results-info.module.css"]
+        };
+    }
+    static get states() {
+        return {
+            "isRequesting": {},
+            "resultsCount": {},
+            "responseTime": {},
+            "query": {}
+        };
+    }
+}
+//# sourceMappingURL=searchcraft-results-info.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"searchcraft-results-info.js","sourceRoot":"","sources":["../../../src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAOtD,MAAM,OAAO,sBAAsB;;4BACT,KAAK;4BACL,CAAC;4BACD,EAAE;qBACT,EAAE;;IAInB,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;;YACzD,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,CAAC,GAAG,IAAI,CACpD,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,0BAA0B;QAC5D,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE,CAAC;YAC3C,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,WAAK,KAAK,EAAC,WAAW;YACpB,SAAG,KAAK,EAAC,aAAa;gBACnB,IAAI,CAAC,YAAY;;gBAAoB,IAAI,CAAC,YAAY;qBACrD,CACA,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/searchcraft-results-info/searchcraft-results-info.module.css

@@ -0,0 +1,16 @@
+.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;
+}

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

@@ -4,14 +4,14 @@ export class SearchcraftSlider {
     constructor() {
         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);
@@ -29,11 +29,32 @@ export class SearchcraftSlider {
         };
         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 is() { return "searchcraft-slider"; }
     static get encapsulation() { return "shadow"; }
@@ -89,8 +110,11 @@ export class SearchcraftSlider {
     }
     static get states() {
         return {
+            "endYear": {},
+            "query": {},
             "startYear": {},
-            "endYear": {}
+            "hasSearched": {},
+            "resultsCount": {}
         };
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-slider.js","sourceRoot":"","sources":["../../../src/components/searchcraft-slider/searchcraft-slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAOtD,MAAM,OAAO,iBAAiB;;QAOpB,gBAAW,GAAG,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QAE7C,gBAAW,GAAG,KAAK,IAAI,EAAE;YAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,+BAA+B;YACrE,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;YAE/D,IAAI,CAAC;gBACH,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;oBAClC,OAAO,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAC;oBACxD,OAAO;gBACT,CAAC;gBACD,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;YAClC,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;YACzC,CAAC;QACH,CAAC,CAAC;QAEM,0BAAqB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACpD,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;QACrB,CAAC,CAAC;QAEM,wBAAmB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAClD,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;QACrB,CAAC,CAAC;uBAjCgB,IAAI;uBACJ,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;yBAErB,IAAI,CAAC,OAAO;uBACd,IAAI,CAAC,OAAO;;IA+B/B,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,kBAAkB;YAC3B,iFAA6B;YAC7B,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,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;gBACF,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;YACN,4DAAK,KAAK,EAAC,aAAa;gBACtB,6DAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,SAAS,CAAQ;gBAChD,6DAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,OAAO,CAAQ,CAC1C,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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","sourceRoot":"","sources":["../../../src/components/searchcraft-slider/searchcraft-slider.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/searchcraft-slider/searchcraft-slider.module.css

@@ -33,9 +33,9 @@ label {
   appearance: none;
   width: 20px;
   height: 20px;
-  background: #007bff;
+  background-color: #FFF;
   border-radius: 50%;
-  border: 2px solid #fff;
+  border: 1px solid #E6E6E6;
   cursor: pointer;
   position: relative;
 }
@@ -43,9 +43,9 @@ label {
 .range-slider::-moz-range-thumb {
   width: 20px;
   height: 20px;
-  background: #007bff;
+  background-color: #FFF;
   border-radius: 50%;
-  border: 2px solid #fff;
+  border: 1px solid #E6E6E6;
   cursor: pointer;
 }
 
@@ -53,7 +53,7 @@ label {
   content: "";
   position: absolute;
   height: 4px;
-  background: #007bff;
+  background-color: #FFF;
   border-radius: 2px;
   left: 0;
   right: 0;
@@ -65,8 +65,10 @@ label {
   justify-content: space-between;
   width: 100%;
   margin-top: 10px;
-  font-size: 12px;
-  color: #555;
+  font-size: 15px;
+  font-weight: 600;
+  font-family: "Source Sans Pro";
+  color: #666;
 }
 
 .year-label {

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SearchcraftSpinnerDark {
     render() {
-        return (h("div", { key: 'fa6235c4bf182daac64d41cd04a995aa3476b59a', class: 'spinnerContainer' }, h("div", { key: '68532114a4f25a5d12c8514e5c6d2984a68573af', class: 'spinnerDark' })));
+        return (h("div", { key: '60b629930c2e2795236f6768b40c95ce9390e882', class: 'spinnerContainer' }, h("div", { key: 'bfef3329f2e81ecf6538738ac0213da6259dd1c3', class: 'spinnerDark' })));
     }
     static get is() { return "searchcraft-spinner-dark"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SearchcraftSpinnerLight {
     render() {
-        return (h("div", { key: 'f1c941149c07dac7ee09eff1ae98dca00dcdf924', class: 'spinnerContainer' }, h("div", { key: '2f93e299ef12f4f382d189ab58c743ee9e981ce2', class: 'spinnerLight' })));
+        return (h("div", { key: 'ad5224c97faf7e329d2a8904488c17dfd7414b9e', class: 'spinnerContainer' }, h("div", { key: '6336ce7737af65eedac46ee290b20291ce5b6096', class: 'spinnerLight' })));
     }
     static get is() { return "searchcraft-spinner-light"; }
     static get encapsulation() { return "shadow"; }