@searchcraft/javascript-sdk 0.2.9 → 0.3.1

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

@@ -1 +1 @@
-{"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":[".sliderContainer {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  font-family: Arial, sans-serif;\n  align-items: center;\n  width: 100%;\n}\n\n.rangeContainer {\n  display: flex;\n  position: relative;\n  width: 100%;\n  align-items: center;\n\n  .activeRange {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 4px;\n    background: #007DB3;\n    z-index: 0;\n    border-radius: 2px;\n  }\n\n  .rangeSlider {\n    width: 100%;\n    height: 4px;\n    background: transparent;\n    border-radius: 2px;\n    outline: none;\n    -webkit-appearance: none;\n    appearance: none;\n    position: absolute;\n    margin: 0;\n\n    &::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 20px;\n      height: 20px;\n      background-color: #FFF;\n      border-radius: 50%;\n      border: 2px solid #e6e6e6;\n      cursor: pointer;\n    }\n\n    &::-moz-range-thumb {\n      width: 20px;\n      height: 20px;\n      background-color: #FFF;\n      border-radius: 50%;\n      border: 2px solid #e6e6e6;\n      cursor: pointer;\n    }\n  }\n}\n\n.yearLabels {\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', sans-serif;\n  color: #666;\n}\n\n.yearLabel {\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() maxYear = new Date().getFullYear();\n  @Prop() minYear = 2014;\n\n  @State() endYear = this.maxYear;\n  @State() hasSearched = false;\n  @State() query = '';\n  @State() resultsCount = 0;\n  @State() startYear = this.minYear;\n\n  private searchStore = useSearchcraftStore.getState();\n\n  unsubscribe: () => void;\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\n    const rangeMin = this.minYear;\n    const rangeMax = this.maxYear;\n    const startPercent =\n      ((this.startYear - rangeMin) / (rangeMax - rangeMin)) * 100;\n    const endPercent =\n      ((this.endYear - rangeMin) / (rangeMax - rangeMin)) * 100;\n\n    return (\n      <div class='sliderContainer'>\n        <div class='rangeContainer'>\n          <div\n            class='activeRange'\n            style={{\n              left: `${startPercent}%`,\n              width: `${endPercent - startPercent}%`,\n            }}\n          />\n          <input\n            class='rangeSlider'\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='rangeSlider'\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='yearLabels'>\n          <span class='yearLabel'>{this.startYear}</span>\n          <span class='yearLabel'>{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","src/components/searchcraft-slider/searchcraft-slider.tsx"],"sourcesContent":[".sliderContainer {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 100%;\n}\n\n.rangeContainer {\n  align-items: center;\n  background-color: $surface-disabled;\n  border-radius: 999px;\n  display: flex;\n  position: relative;\n  height: 4px;\n  width: 100%;\n\n  &::-webkit-slider-runnable-track {\n    pointer-events: none;\n   }\n\n  .activeRange {\n    background-color: $surface-brand-primary;\n    border-radius: 2px;\n    height: 4px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 0;\n\n    &::-webkit-slider-runnable-track {\n      pointer-events: none;\n     }\n\n     &::-moz-range-track {\n      pointer-events: none;\n     }\n  }\n\n  .rangeSlider {\n    appearance: none;\n    background: transparent;\n    border-radius: 2px;\n    height: 4px;\n    margin: 0;\n    outline: none;\n    pointer-events: none;\n    position: absolute;\n    width: 100%;\n    -webkit-appearance: none;\n\n    &::-webkit-slider-thumb {\n      background-color: $content-on-brand-primary;\n      border-radius: 50%;\n      border: 2px solid $border-primary;\n      cursor: pointer;\n      height: 20px;\n      pointer-events: all;\n      width: 20px;\n      -webkit-appearance: none;\n    }\n\n    &::-moz-range-thumb {\n      background-color: $content-on-brand-primary;\n      border-radius: 50%;\n      border: 2px solid $border-primary;\n      cursor: pointer;\n      height: 20px;\n      pointer-events: all;\n      width: 20px;\n    }\n  }\n}\n\n.yearLabels {\n  color: $content-primary;\n  display: flex;\n  font-family: 'Source Sans Pro', sans-serif;\n  font-size: 15px;\n  font-weight: 600;\n  justify-content: space-between;\n  margin-top: 10px;\n  width: 100%;\n}\n\n.yearLabel {\n  min-width: 30px;\n  text-align: center;\n}","import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  State,\n  Prop,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n  tag: 'searchcraft-slider',\n  styleUrl: 'searchcraft-slider.module.scss',\n  shadow: false,\n})\nexport class SearchcraftSlider {\n  @Prop() maxYear = new Date().getFullYear();\n  @Prop() minYear = 2014;\n\n  @State() endYear = this.maxYear;\n  @State() hasSearched = false;\n  @State() query = '';\n  @State() resultsCount = 0;\n  @State() startYear = this.minYear;\n\n  @Event() rangeChanged: EventEmitter<{ startYear: number; endYear: number }>;\n\n  private searchStore = useSearchcraftStore.getState();\n\n  unsubscribe: () => void;\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    this.rangeChanged.emit({\n      startYear: this.startYear,\n      endYear: this.endYear,\n    });\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    if (value <= this.endYear) {\n      this.startYear = value;\n      this.updateYears();\n    }\n  };\n\n  private handleEndYearChange = (event: InputEvent) => {\n    const value = Number.parseInt((event.target as HTMLInputElement).value, 10);\n    if (value >= this.startYear) {\n      this.endYear = value;\n      this.updateYears();\n    }\n  };\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n\n    const rangeMin = this.minYear;\n    const rangeMax = this.maxYear;\n    const startPercent =\n      ((this.startYear - rangeMin) / (rangeMax - rangeMin)) * 100;\n    const endPercent =\n      ((this.endYear - rangeMin) / (rangeMax - rangeMin)) * 100;\n\n    return (\n      <div\n        class={classNames('sliderContainer', 'searchcraft-slider-container')}\n      >\n        <div\n          class={classNames(\n            'rangeContainer',\n            'searchcraft-slider-range-container',\n          )}\n        >\n          <div\n            class={classNames('activeRange', 'searchcraft-slider-active-range')}\n            style={{\n              left: `${startPercent}%`,\n              width: `${endPercent - startPercent}%`,\n            }}\n          />\n          <input\n            class={classNames(\n              'rangeSlider',\n              'searchcraft-slider-range-slider-start-thumb',\n            )}\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={classNames(\n              'rangeSlider',\n              'searchcraft-slider-range-slider-end-thumb',\n            )}\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\n          class={classNames(\n            'yearLabels',\n            'searchcraft-slider-year-label-container',\n          )}\n        >\n          <span\n            class={classNames(\n              'yearLabel',\n              'searchcraft-slider-start-year-label',\n            )}\n          >\n            {this.startYear}\n          </span>\n          <span\n            class={classNames('yearLabel', 'searchcraft-slider-end-year-label')}\n          >\n            {this.endYear}\n          </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-bc3f9025.js';
+import { S as SearchcraftSpinnerDark$1, d as defineCustomElement$1 } from './p-7c280820.js';
 
 const SearchcraftSpinnerDark = SearchcraftSpinnerDark$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,32 @@
-import { S as SearchcraftSpinnerLight$1, d as defineCustomElement$1 } from './p-bfb22305.js';
+import { p as proxyCustomElement, H, h } from './p-6b353c3e.js';
+
+const searchcraftSpinnerLightModuleCss = ".spinnerContainer{background-color:transparent;height:20px;width:20px}.spinnerLight{animation:spinning 1s linear infinite;background:conic-gradient(#737373 50%, #FFFFFF);clip-path:circle(50%);height:100%;mask-image:radial-gradient(circle at center, rgba(0, 0, 0, 0) 6.6666666667px, rgb(0, 0, 0) 6.6666666667px);width:100%}@keyframes spinning{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}";
+const SearchcraftSpinnerLightStyle0 = searchcraftSpinnerLightModuleCss;
+
+const SearchcraftSpinnerLight$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftSpinnerLight extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h("div", { key: 'a4f73eee03d4d7253c04c47995315bd121e8ded3', class: 'spinnerContainer' }, h("div", { key: '53e3486ef7a2fa6029a6107bae2c0655b1608a12', class: 'spinnerLight' })));
+    }
+    static get style() { return SearchcraftSpinnerLightStyle0; }
+}, [1, "searchcraft-spinner-light"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-spinner-light"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-spinner-light":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftSpinnerLight$1);
+            }
+            break;
+    } });
+}
 
 const SearchcraftSpinnerLight = SearchcraftSpinnerLight$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"searchcraft-spinner-light.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"searchcraft-spinner-light.js","mappings":";;AAAA,MAAM,gCAAgC,GAAG,8aAA8a,CAAC;AACxd,sCAAe,gCAAgC;;MCMlCA,yBAAuB;;;;;;IAClC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,cAAc,GAAG,CACxB,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftSpinnerLight"],"sources":["src/components/searchcraft-spinner-light/searchcraft-spinner-light.module.scss?tag=searchcraft-spinner-light&encapsulation=shadow","src/components/searchcraft-spinner-light/searchcraft-spinner-light.tsx"],"sourcesContent":["$spinner-size: 20px;\n\n.spinnerContainer {\n  background-color: transparent;\n  height: $spinner-size;\n  width: $spinner-size;\n}\n\n.spinnerLight {\n  animation: spinning 1s linear infinite;\n  background: conic-gradient(#737373 50%, #FFFFFF);\n  clip-path: circle(50%);\n  height: 100%;\n  mask-image: radial-gradient(circle at center, rgba(0,0,0,0) calc($spinner-size/3), rgba(0,0,0,1) calc($spinner-size/3));\n  width: 100%;\n}\n\n@keyframes spinning {\n  0% { transform: rotate(0deg); }\n  50% {transform: rotate(180deg);}\n  100% { transform: rotate(360deg); }\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-spinner-light',\n  styleUrl: 'searchcraft-spinner-light.module.scss',\n  shadow: true,\n})\nexport class SearchcraftSpinnerLight {\n  render() {\n    return (\n      <div class='spinnerContainer'>\n        <div class='spinnerLight' />\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,15 +1,23 @@
-import { p as proxyCustomElement, H, h } from './p-7498e493.js';
-import { u as useSearchcraftStore } from './p-ff049f0a.js';
+import { p as proxyCustomElement, H, h } from './p-6b353c3e.js';
+import { c as classNames } from './p-5cdc6210.js';
+import { u as useSearchcraftStore } from './p-727bfc38.js';
 
-const searchcraftToggleButtonModuleCss = ".toggle-wrapper{background:#ddd;border:none;border-radius:16px;box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05);cursor:pointer;height:26px;margin-left:10px;position:relative;width:44px}.toggle-wrapper.active{background:#007DB3;box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05)}.toggle-wrapper .toggle-switch{background:#fff;border-radius:50%;height:18px;left:4px;position:absolute;top:calc(50% - 9px);transition:transform 0.3s ease;width:18px}.toggle-wrapper .toggle-switch.active{transform:translateX(16px)}";
+const searchcraftToggleButtonModuleCss = ".toggleWrapper{background:#D9D9D9;border:none;border-radius:16px;box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05);cursor:pointer;height:26px;margin-left:10px;position:relative;width:44px}.toggleWrapper.active{background:#000000;box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05)}.toggleWrapper .toggleSwitch{background:#FFFFFF;border-radius:50%;height:18px;left:4px;position:absolute;top:calc(50% - 9px);transition:transform 0.3s ease;width:18px}.toggleWrapper .toggleSwitch.active{transform:translateX(16px)}";
 const SearchcraftToggleButtonStyle0 = searchcraftToggleButtonModuleCss;
 
 const SearchcraftToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftToggleButton extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
+        this.autoSearchFormElement = null;
         this.searchStore = useSearchcraftStore.getState();
+        this.handleSearchRequest = () => {
+            this.isActive = false;
+            this.searchStore.setSearchParams({
+                mode: 'fuzzy',
+                sort: 'asc',
+            });
+        };
         this.handleToggle = async () => {
             this.isActive = !this.isActive;
             if (this.type === 'mode') {
@@ -42,20 +50,29 @@ const SearchcraftToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class Searchc
             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;
         });
+        this.autoSearchFormElement = document.querySelector('searchcraft-auto-search-form');
+        if (this.autoSearchFormElement) {
+            this.autoSearchFormElement.addEventListener('querySubmit', this.handleSearchRequest);
+        }
     }
     disconnectedCallback() {
         if (this.unsubscribe) {
             this.unsubscribe();
         }
+        if (this.autoSearchFormElement) {
+            this.autoSearchFormElement.addEventListener('querySubmit', this.handleSearchRequest);
+        }
     }
     render() {
         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' : ''}` })));
+        const toggleContainerStyle = `toggleWrapper ${this.isActive ? 'active' : ''}`;
+        const toggleSwitchStyle = `toggleSwitch ${this.isActive ? 'active' : ''}`;
+        return (h("button", { class: classNames(toggleContainerStyle, 'searchcraft-toggle-button-container'), onClick: this.handleToggle, type: 'button' }, h("div", { class: classNames(toggleSwitchStyle, 'searchcraft-toggle-switch') })));
     }
     static get style() { return SearchcraftToggleButtonStyle0; }
-}, [1, "searchcraft-toggle-button", {
+}, [0, "searchcraft-toggle-button", {
         "type": [1],
         "isActive": [32],
         "query": [32],

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

@@ -1 +1 @@
-{"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  background: #ddd;\n  border: none;\n  border-radius: 16px;\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05);\n  cursor: pointer;\n  height: 26px;\n  margin-left: 10px;\n  position: relative;\n  width: 44px;\n}\n\n.toggle-wrapper.active {\n  background: #007DB3;\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05);\n}\n\n.toggle-wrapper .toggle-switch {\n  background: #fff;\n  border-radius: 50%;\n  height: 18px;\n  left: 4px;\n  position: absolute;\n  top: calc(50% - 18px/2);\n  transition: transform 0.3s ease;\n  width: 18px;\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}
+{"file":"searchcraft-toggle-button.js","mappings":"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","names":["SearchcraftToggleButton"],"sources":["src/components/searchcraft-toggle-button/searchcraft-toggle-button.module.scss?tag=searchcraft-toggle-button","src/components/searchcraft-toggle-button/searchcraft-toggle-button.tsx"],"sourcesContent":[".toggleWrapper {\n  background: $surface-disabled;\n  border: none;\n  border-radius: 16px;\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05);\n  cursor: pointer;\n  height: 26px;\n  margin-left: 10px;\n  position: relative;\n  width: 44px;\n}\n\n.toggleWrapper.active {\n  background: $surface-brand-primary;\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05);\n}\n\n.toggleWrapper .toggleSwitch {\n  background: $content-on-brand-primary;\n  border-radius: 50%;\n  height: 18px;\n  left: 4px;\n  position: absolute;\n  top: calc(50% - 18px/2);\n  transition: transform 0.3s ease;\n  width: 18px;\n}\n\n.toggleWrapper .toggleSwitch.active {\n  transform: translateX(16px);\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n  tag: 'searchcraft-toggle-button',\n  styleUrl: 'searchcraft-toggle-button.module.scss',\n  shadow: false,\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 autoSearchFormElement: HTMLElement | null = null;\n  private searchStore = useSearchcraftStore.getState();\n  private unsubscribe: () => void;\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    this.autoSearchFormElement = document.querySelector(\n      'searchcraft-auto-search-form',\n    );\n    if (this.autoSearchFormElement) {\n      this.autoSearchFormElement.addEventListener(\n        'querySubmit',\n        this.handleSearchRequest,\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n    if (this.autoSearchFormElement) {\n      this.autoSearchFormElement.addEventListener(\n        'querySubmit',\n        this.handleSearchRequest,\n      );\n    }\n  }\n\n  handleSearchRequest = () => {\n    this.isActive = false;\n    this.searchStore.setSearchParams({\n      mode: 'fuzzy',\n      sort: 'asc',\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    const toggleContainerStyle = `toggleWrapper ${this.isActive ? 'active' : ''}`;\n    const toggleSwitchStyle = `toggleSwitch ${this.isActive ? 'active' : ''}`;\n\n    return (\n      <button\n        class={classNames(\n          toggleContainerStyle,\n          'searchcraft-toggle-button-container',\n        )}\n        onClick={this.handleToggle}\n        type='button'\n      >\n        <div\n          class={classNames(toggleSwitchStyle, 'searchcraft-toggle-switch')}\n        />\n      </button>\n    );\n  }\n}\n"],"version":3}