@searchcraft/javascript-sdk 0.2.3 → 0.2.5

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

@@ -0,0 +1 @@
+{"version":3,"file":"searchcraft-button.js","sourceRoot":"","sources":["../../../src/components/searchcraft-button/searchcraft-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,KAAK,EACL,QAAQ,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,iBAAiB;;QAepB,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,+CAA+C;QAC1E,CAAC,CAAC;;wBAfiB,KAAK;4BACD,MAAM;qBACb,QAAQ;4BAIA,KAAK;qBACZ,OAAO;;IAEhB,cAAc;QACpB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC;IAC/D,CAAC;IAMD,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,OAAO,CACL,EAAC,QAAQ,uDACN,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,cACE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,oBAAoB,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,mCAA4B,CAC7B,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,WAAW,CACjB,CACM,CACV,CAAC,CAAC,CAAC,CACF,cACE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,oBAAoB,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ;YAEZ,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnD,WAAK,KAAK,EAAC,sBAAsB;gBAC/B,mCAA4B,CACxB,CACP,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,WAAW,CACjB;YACD,YACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,YAAY,IAAI,cAAc,EACnC,0BAA0B,CAC3B,IAEA,IAAI,CAAC,KAAK,CACN,CACA,CACV,CACQ,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  State,\n  Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-button',\n  styleUrl: 'searchcraft-button.module.scss',\n  shadow: true,\n})\nexport class SearchcraftButton {\n  @Prop() iconElement?: Element;\n  @Prop() iconOnly = false;\n  @Prop() iconPosition = 'left';\n  @Prop() label = 'Search';\n\n  @Event() buttonClick!: EventEmitter<void>;\n\n  @State() isRequesting = false;\n  @State() theme = 'light';\n\n  private getButtonStyle() {\n    return this.theme === 'light' ? 'buttonLight' : 'buttonDark';\n  }\n\n  private handleClick = () => {\n    this.buttonClick.emit(); // Emit the event instead of calling a function\n  };\n\n  render() {\n    const buttonStyle = this.getButtonStyle();\n\n    return (\n      <Fragment>\n        {this.iconOnly ? (\n          <button\n            class={classNames(buttonStyle, 'searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.isRequesting ? (\n              <searchcraft-spinner-dark />\n            ) : (\n              this.iconElement\n            )}\n          </button>\n        ) : (\n          <button\n            class={classNames(buttonStyle, 'searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.iconPosition === 'left' && this.isRequesting ? (\n              <div class='spinner-margin-right'>\n                <searchcraft-spinner-dark />\n              </div>\n            ) : (\n              this.iconElement\n            )}\n            <span\n              class={classNames(\n                this.isRequesting && 'button-label',\n                'searchcraft-button-label',\n              )}\n            >\n              {this.label}\n            </span>\n          </button>\n        )}\n      </Fragment>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,82 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.buttonLight {
+  border-radius: 8px;
+  display: flex;
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+  padding: 11px 20px;
+  position: relative;
+  background-color: #000;
+  border: 1px solid #E6E6E6;
+  color: #FFF;
+}
+.buttonLight:hover {
+  cursor: pointer;
+}
+.buttonLight:hover {
+  background-color: #2E2E2E;
+}
+.buttonLight:focus {
+  outline: 2px solid #000000;
+}
+
+.buttonDark {
+  border-radius: 8px;
+  display: flex;
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+  padding: 11px 20px;
+  position: relative;
+  background-color: #FFF;
+  border: 1px solid #404040;
+  color: #292929;
+}
+.buttonDark:hover {
+  cursor: pointer;
+}
+.buttonDark:hover {
+  background-color: #FAFAFA;
+}
+.buttonDark:focus {
+  outline: 2px solid #404040;
+}
+
+.spinnerMarginRight {
+  left: 4px;
+  margin-right: 4px;
+  position: absolute;
+}
+
+.spinnerMarginLeft {
+  left: 4px;
+  margin-left: 4px;
+  position: absolute;
+}
+
+.buttonLabel {
+  animation: right-and-back 0.2s;
+  margin-left: 4px;
+  position: relative;
+}
+
+@keyframes right-and-back {
+  0% {
+    right: -6px;
+  }
+  50% {
+    right: -12px;
+  }
+  75% {
+    right: -6px;
+  }
+  100% {
+    right: 0px;
+  }
+}

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

@@ -0,0 +1,95 @@
+import { h, } from "@stencil/core";
+import classNames from "classnames";
+export class SearchcraftClearInputButton {
+    constructor() {
+        this.handleClearClick = (event) => {
+            event.preventDefault();
+            this.clearInput.emit();
+        };
+        this.isRequesting = false;
+        this.rightToLeftOrientation = false;
+        this.theme = 'light';
+    }
+    isLightTheme() {
+        return this.theme === 'light';
+    }
+    render() {
+        return this.rightToLeftOrientation ? (h("button", { class: classNames('inputClearButtonRTL', '.sc-clear-input-button-rtl'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (h("searchcraft-spinner-light", null)) : (h("searchcraft-spinner-dark", null))) : this.isLightTheme ? (h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (h("searchcraft-clear-icon-set", { type: 'clear-dark' })))) : (h("button", { class: classNames('inputClearButtonLTR', '.sc-clear-input-button-ltr'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (h("searchcraft-spinner-light", null)) : (h("searchcraft-spinner-dark", null))) : this.isLightTheme ? (h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (h("searchcraft-clear-icon-set", { type: 'clear-dark' }))));
+    }
+    static get is() { return "searchcraft-clear-input-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-clear-input-button.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-clear-input-button.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isRequesting": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-requesting",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "rightToLeftOrientation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "right-to-left-orientation",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "theme": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clearInput",
+                "name": "clearInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=searchcraft-clear-input-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"searchcraft-clear-input-button.js","sourceRoot":"","sources":["../../../src/components/searchcraft-clear-input-button/searchcraft-clear-input-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,2BAA2B;;QAY9B,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACzB,CAAC,CAAC;4BAdsB,KAAK;sCACI,KAAK;qBAIrB,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;IAChC,CAAC;IAOD,MAAM;QACJ,OAAO,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CACnC,cACE,KAAK,EAAE,UAAU,CAAC,qBAAqB,EAAE,4BAA4B,CAAC,EACtE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAClB,oCAA6B,CAC9B,CAAC,CAAC,CAAC,CACF,mCAA4B,CAC7B,CACF,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACtB,kCAA4B,IAAI,EAAC,aAAa,GAAG,CAClD,CAAC,CAAC,CAAC,CACF,kCAA4B,IAAI,EAAC,YAAY,GAAG,CACjD,CACM,CACV,CAAC,CAAC,CAAC,CACF,cACE,KAAK,EAAE,UAAU,CAAC,qBAAqB,EAAE,4BAA4B,CAAC,EACtE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAClB,oCAA6B,CAC9B,CAAC,CAAC,CAAC,CACF,mCAA4B,CAC7B,CACF,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACtB,kCAA4B,IAAI,EAAC,aAAa,GAAG,CAClD,CAAC,CAAC,CAAC,CACF,kCAA4B,IAAI,EAAC,YAAY,GAAG,CACjD,CACM,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  State,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-clear-input-button',\n  styleUrl: 'searchcraft-clear-input-button.module.scss',\n  shadow: true,\n})\nexport class SearchcraftClearInputButton {\n  @Prop() isRequesting? = false;\n  @Prop() rightToLeftOrientation = false;\n\n  @Event() clearInput: EventEmitter<void>;\n\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  private handleClearClick = (event: MouseEvent) => {\n    event.preventDefault();\n    this.clearInput.emit();\n  };\n\n  render() {\n    return this.rightToLeftOrientation ? (\n      <button\n        class={classNames('inputClearButtonRTL', '.sc-clear-input-button-rtl')}\n        onClick={this.handleClearClick}\n        type='button'\n      >\n        {this.isRequesting ? (\n          this.isLightTheme ? (\n            <searchcraft-spinner-light />\n          ) : (\n            <searchcraft-spinner-dark />\n          )\n        ) : this.isLightTheme ? (\n          <searchcraft-clear-icon-set type='clear-light' />\n        ) : (\n          <searchcraft-clear-icon-set type='clear-dark' />\n        )}\n      </button>\n    ) : (\n      <button\n        class={classNames('inputClearButtonLTR', '.sc-clear-input-button-ltr')}\n        onClick={this.handleClearClick}\n        type='button'\n      >\n        {this.isRequesting ? (\n          this.isLightTheme ? (\n            <searchcraft-spinner-light />\n          ) : (\n            <searchcraft-spinner-dark />\n          )\n        ) : this.isLightTheme ? (\n          <searchcraft-clear-icon-set type='clear-light' />\n        ) : (\n          <searchcraft-clear-icon-set type='clear-dark' />\n        )}\n      </button>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,33 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.inputClearButtonLTR {
+  align-items: center;
+  background: none;
+  border: none;
+  display: flex;
+  height: 20px;
+  justify-content: center;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+}
+
+.inputClearButtonRTL {
+  align-items: center;
+  background: none;
+  border: none;
+  display: flex;
+  height: 20px;
+  justify-content: center;
+  left: 0px;
+  padding: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+}

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

@@ -0,0 +1,64 @@
+import { h } from "@stencil/core";
+import classNames from "classnames";
+export class SearchcraftErrorMessage {
+    constructor() {
+        this.errorMessage = undefined;
+        this.theme = 'light';
+    }
+    render() {
+        const errorMessageStyle = this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';
+        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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-error-message.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-error-message.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message to display. Defaults to a standard message if not provided."
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme, which determines the style (light or dark)."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=searchcraft-error-message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"searchcraft-error-message.js","sourceRoot":"","sources":["../../../src/components/searchcraft-error-message/searchcraft-error-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,uBAAuB;;;qBASA,OAAO;;IAEzC,MAAM;QACJ,MAAM,iBAAiB,GACrB,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,kBAAkB,CAAC;QAEpE,OAAO,CACL,0DAAG,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IACpC,IAAI,CAAC,YAAY,IAAI,0BAA0B,CAC9C,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-error-message',\n  styleUrl: 'searchcraft-error-message.module.scss',\n  shadow: true,\n})\nexport class SearchcraftErrorMessage {\n  /**\n   * The error message to display. Defaults to a standard message if not provided.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * The theme, which determines the style (light or dark).\n   */\n  @Prop() theme: 'light' | 'dark' = 'light';\n\n  render() {\n    const errorMessageStyle =\n      this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';\n\n    return (\n      <p class={classNames(errorMessageStyle)}>\n        {this.errorMessage || 'Search term is required.'}\n      </p>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-error-message/searchcraft-error-message.module.css

@@ -0,0 +1,21 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.errorMessageLight {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 4px;
+  color: #990000;
+}
+
+.errorMessageDark {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 4px;
+  color: #FFB3B3;
+}

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

@@ -0,0 +1,170 @@
+import { h, } from "@stencil/core";
+import { useSearchcraftStore } from "../../provider/store";
+import { flattenFacets } from "../../utils/utils";
+export class SearchcraftFiltersList {
+    constructor() {
+        this.searchStore = useSearchcraftStore.getState();
+        this.handleFilterChange = (value, checked) => {
+            if (checked) {
+                this.selectedFilters.add(value);
+            }
+            else {
+                this.selectedFilters.delete(value);
+            }
+            const deduplicatedFilters = this.deduplicatePaths(Array.from(this.selectedFilters));
+            this.filtersUpdated.emit(deduplicatedFilters);
+            this.searchStore.setSelectedFilters(deduplicatedFilters);
+            this.searchStore.search();
+        };
+        this.filters = [];
+        this.dynamicFilters = [];
+        this.isRequesting = false;
+        this.query = '';
+        this.resultsCount = 0;
+        this.selectedFilters = new Set();
+    }
+    connectedCallback() {
+        var _a;
+        const state = this.searchStore; // Fetch the initial state
+        // Initial population of facets if available
+        if ((_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data.facets) {
+            this.populateFiltersFromFacets(state.searchResults.data.facets);
+        }
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            var _a, _b, _c, _d;
+            if (!state.query || state.query.trim().length === 0) {
+                if (this.selectedFilters.size > 0) {
+                    this.selectedFilters.clear();
+                    this.filtersUpdated.emit([]);
+                    if (this.searchStore.selectedFilters.length > 0) {
+                        this.searchStore.setSelectedFilters([]);
+                    }
+                }
+            }
+            this.query = state.query || '';
+            this.isRequesting = state.isRequesting;
+            this.resultsCount = ((_c = (_b = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.length) || 0;
+            // Populate filters when facets are updated
+            if ((_d = state.searchResults) === null || _d === void 0 ? void 0 : _d.data.facets) {
+                this.populateFiltersFromFacets(state.searchResults.data.facets);
+            }
+        });
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    populateFiltersFromFacets(facets) {
+        var _a;
+        const newFilters = flattenFacets(((_a = facets[0]) === null || _a === void 0 ? void 0 : _a.section) || []);
+        const filtersMap = new Map();
+        newFilters.forEach((filter) => {
+            const key = filter.value.split('/').pop() || '';
+            const existingFilter = filtersMap.get(key);
+            if (!existingFilter ||
+                filter.value.length < existingFilter.value.length) {
+                filtersMap.set(key, filter);
+            }
+        });
+        this.dynamicFilters = Array.from(filtersMap.values());
+    }
+    deduplicatePaths(filters) {
+        const pathMap = new Map();
+        filters.forEach((path) => {
+            const key = path.split('/').pop() || '';
+            const existingPath = pathMap.get(key);
+            if (!existingPath || path.length < existingPath.length) {
+                pathMap.set(key, path);
+            }
+        });
+        return Array.from(pathMap.values());
+    }
+    formatLabel(label) {
+        return label
+            .replace(/-/g, ' ')
+            .split(' ')
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
+    render() {
+        if (!this.query || this.resultsCount === 0) {
+            return null;
+        }
+        const filtersToRender = this.dynamicFilters.filter((filter) => !filter.value.includes('/', filter.value.indexOf('/') + 1));
+        return (h("div", { class: 'filtersList' }, filtersToRender.map((filter) => {
+            const isChecked = this.selectedFilters.has(filter.value);
+            const children = this.dynamicFilters.filter((child) => child.value.startsWith(`${filter.value}/`) &&
+                child.value !== filter.value);
+            return (h("div", { key: filter.value }, h("label", { class: 'checkboxLabel' }, h("input", { class: 'filterCheckbox', checked: isChecked, onChange: (event) => this.handleFilterChange(filter.value, event.target.checked), type: 'checkbox' }), this.formatLabel(filter.label)), children.map((child) => {
+                const isChildChecked = this.selectedFilters.has(child.value);
+                return (h("label", { class: 'childCheckboxLabel', key: child.value, style: { marginLeft: '20px' } }, h("input", { class: 'childFilterCheckbox', checked: isChildChecked, onChange: (event) => this.handleFilterChange(child.value, event.target.checked), type: 'checkbox' }), this.formatLabel(child.label.split('/').pop() || '')));
+            })));
+        })));
+    }
+    static get is() { return "searchcraft-filters-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-filters-list.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-filters-list.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "filters": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<{ label: string; value: string }>",
+                    "resolved": "{ label: string; value: string; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dynamicFilters": {},
+            "isRequesting": {},
+            "query": {},
+            "resultsCount": {},
+            "selectedFilters": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "filtersUpdated",
+                "name": "filtersUpdated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=searchcraft-filters-list.js.map

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

@@ -0,0 +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';\n\nimport type { Facets } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { flattenFacets } from '@utils/utils';\n\n@Component({\n  tag: 'searchcraft-filters-list',\n  styleUrl: 'searchcraft-filters-list.module.scss',\n  shadow: true,\n})\nexport class SearchcraftFiltersList {\n  @Prop() filters: Array<{ label: string; value: string }> = [];\n\n  @Event() filtersUpdated: EventEmitter<string[]>;\n\n  @State() dynamicFilters: Array<{ label: string; value: string }> = [];\n  @State() isRequesting = false;\n  @State() query = '';\n  @State() resultsCount = 0;\n  @State() selectedFilters: Set<string> = new Set();\n\n  private searchStore = useSearchcraftStore.getState();\n  unsubscribe: () => void;\n\n  connectedCallback() {\n    const state = this.searchStore; // Fetch the initial state\n\n    // Initial population of facets if available\n    if (state.searchResults?.data.facets) {\n      this.populateFiltersFromFacets(state.searchResults.data.facets);\n    }\n\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (!state.query || state.query.trim().length === 0) {\n        if (this.selectedFilters.size > 0) {\n          this.selectedFilters.clear();\n          this.filtersUpdated.emit([]);\n          if (this.searchStore.selectedFilters.length > 0) {\n            this.searchStore.setSelectedFilters([]);\n          }\n        }\n      }\n      this.query = state.query || '';\n      this.isRequesting = state.isRequesting;\n      this.resultsCount = state.searchResults?.data?.hits?.length || 0;\n\n      // Populate filters when facets are updated\n      if (state.searchResults?.data.facets) {\n        this.populateFiltersFromFacets(state.searchResults.data.facets);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  populateFiltersFromFacets(facets: Facets) {\n    const newFilters = flattenFacets(facets[0]?.section || []);\n    const filtersMap = new Map<string, { label: string; value: string }>();\n\n    newFilters.forEach((filter) => {\n      const key = filter.value.split('/').pop() || '';\n      const existingFilter = filtersMap.get(key);\n      if (\n        !existingFilter ||\n        filter.value.length < existingFilter.value.length\n      ) {\n        filtersMap.set(key, filter);\n      }\n    });\n\n    this.dynamicFilters = Array.from(filtersMap.values());\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    const deduplicatedFilters = this.deduplicatePaths(\n      Array.from(this.selectedFilters),\n    );\n\n    this.filtersUpdated.emit(deduplicatedFilters);\n    this.searchStore.setSelectedFilters(deduplicatedFilters);\n    this.searchStore.search();\n  };\n\n  deduplicatePaths(filters: string[]): string[] {\n    const pathMap = new Map<string, string>();\n\n    filters.forEach((path) => {\n      const key = path.split('/').pop() || '';\n      const existingPath = pathMap.get(key);\n\n      if (!existingPath || path.length < existingPath.length) {\n        pathMap.set(key, path);\n      }\n    });\n\n    return Array.from(pathMap.values());\n  }\n\n  formatLabel(label: string): string {\n    return label\n      .replace(/-/g, ' ')\n      .split(' ')\n      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n      .join(' ');\n  }\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n\n    const filtersToRender = this.dynamicFilters.filter(\n      (filter) => !filter.value.includes('/', filter.value.indexOf('/') + 1),\n    );\n\n    return (\n      <div class='filtersList'>\n        {filtersToRender.map((filter) => {\n          const isChecked = this.selectedFilters.has(filter.value);\n          const children = this.dynamicFilters.filter(\n            (child) =>\n              child.value.startsWith(`${filter.value}/`) &&\n              child.value !== filter.value,\n          );\n\n          return (\n            <div key={filter.value}>\n              <label class='checkboxLabel'>\n                <input\n                  class='filterCheckbox'\n                  checked={isChecked}\n                  onChange={(event: Event) =>\n                    this.handleFilterChange(\n                      filter.value,\n                      (event.target as HTMLInputElement).checked,\n                    )\n                  }\n                  type='checkbox'\n                />\n                {this.formatLabel(filter.label)}\n              </label>\n              {children.map((child) => {\n                const isChildChecked = this.selectedFilters.has(child.value);\n                return (\n                  <label\n                    class='childCheckboxLabel'\n                    key={child.value}\n                    style={{ marginLeft: '20px' }}\n                  >\n                    <input\n                      class='childFilterCheckbox'\n                      checked={isChildChecked}\n                      onChange={(event: Event) =>\n                        this.handleFilterChange(\n                          child.value,\n                          (event.target as HTMLInputElement).checked,\n                        )\n                      }\n                      type='checkbox'\n                    />\n                    {this.formatLabel(child.label.split('/').pop() || '')}\n                  </label>\n                );\n              })}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,70 @@
+@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: "✔";
+}