@searchcraft/javascript-sdk 0.8.1 → 0.9.0

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

@@ -1,200 +0,0 @@
-import { h, Fragment, } from "@stencil/core";
-import classNames from "classnames";
-import { useSearchcraftStore } from "../../provider/store";
-import { mergeFacetRoots, removeSubstringMatches } from "../../utils/index";
-/**
- * This web component is designed to display facets in a search interface, allowing users to refine their search results by applying filters based on various attributes.
- * It is consumed within the `searchcraft-filter-panel`.
- *
- * ## Usage
- * ```html
- * <!-- index.html -->
- * <searchcraft-facet-list field-name="title" />
- * ```
- *
- * ```js
- * // index.js
- * const facetList = document.querySelector('searchcraft-facet-list');
- *
- * facetList.addEventListener('facetSelectionUpdated', () => {
- *   console.log('Facet selection updated');
- * });
- * ```
- */
-export class SearchcraftFacetList {
-    /**
-     * The name of the field where facets are applied.
-     */
-    fieldName = '';
-    /**
-     * When the facets are updated.
-     */
-    facetSelectionUpdated;
-    baseFacetRoot;
-    facetRoot;
-    selectedPaths = {};
-    lastTimeTaken;
-    hasNewSearchTerm = false;
-    lastSearchTerm;
-    lastSearchMode;
-    lastSortType;
-    unsubscribe;
-    searchStore = useSearchcraftStore.getState();
-    handleStateUpdate(state) {
-        const facetPrime = state.searchResponseFacetPrime;
-        const timeTaken = state.searchResponseTimeTaken;
-        if (!this.fieldName) {
-            return;
-        }
-        /** Things to do when the state's search term has changed, but before the response received */
-        if (state.searchTerm !== this.lastSearchTerm ||
-            state.searchMode !== this.lastSearchMode ||
-            state.sortType !== this.lastSortType) {
-            this.selectedPaths = {};
-            this.hasNewSearchTerm = true;
-        }
-        /** Things to do when a new response with a new facet prime has been received */
-        if (timeTaken !== this.lastTimeTaken && facetPrime) {
-            this.facetRoot = undefined;
-            const incomingFacetRoot = facetPrime.find((facet) => this.fieldName === Object.keys(facet)[0]);
-            /** Data is from a new search term: completely override our facets */
-            if (this.hasNewSearchTerm) {
-                this.baseFacetRoot = incomingFacetRoot;
-                this.facetRoot = incomingFacetRoot;
-                this.hasNewSearchTerm = false;
-            }
-            else if (this.baseFacetRoot && incomingFacetRoot) {
-                /** Data is from an existing search term, merge the facets together */
-                this.facetRoot = mergeFacetRoots(this.fieldName, this.baseFacetRoot, incomingFacetRoot);
-            }
-        }
-        this.lastSearchTerm = state.searchTerm;
-        this.lastSearchMode = state.searchMode;
-        this.lastSortType = state.sortType;
-        this.lastTimeTaken = timeTaken;
-    }
-    connectedCallback() {
-        this.handleStateUpdate(this.searchStore);
-        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
-            this.handleStateUpdate(state);
-        });
-    }
-    disconnectedCallback() {
-        this.unsubscribe?.();
-    }
-    handleCheckboxChange(path) {
-        const isCheckboxChecked = !this.selectedPaths[path];
-        if (isCheckboxChecked) {
-            /**
-             * Checkbox Checked: Add to the selectedPaths record
-             * Uses spread operator here so UI updates.
-             */
-            this.selectedPaths = {
-                ...this.selectedPaths,
-                [path]: true,
-            };
-        }
-        else {
-            /**
-             * Checkbox Uncheck: Remove any paths and sub-paths
-             */
-            const updatedPaths = Object.keys(this.selectedPaths).filter((testPath) => !testPath.includes(path));
-            this.selectedPaths = updatedPaths.reduce((acc, str) => {
-                acc[str] = true;
-                return acc;
-            }, {});
-        }
-        /**
-         * Emit the paths array, with parent paths removed.
-         */
-        const paths = Object.keys(this.selectedPaths).filter((path) => this.selectedPaths[path]);
-        const pathsWithParentPathsRemoved = removeSubstringMatches(paths);
-        this.facetSelectionUpdated?.emit({ paths: pathsWithParentPathsRemoved });
-    }
-    formatLabel = (facetChild) => {
-        const label = facetChild.path.replace(/^\//, '');
-        const count = facetChild.count;
-        return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
-    };
-    formatSubLabel = (facetChild, facetChildAncestor) => {
-        const facetChildPath = facetChild.path.substring(facetChildAncestor.path.length);
-        const label = facetChildPath.replace(/^\//, '');
-        const count = facetChild.count;
-        return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
-    };
-    render() {
-        if (!this.fieldName) {
-            return;
-        }
-        const firstFacet = this.facetRoot?.[this.fieldName];
-        return (h("div", { class: classNames('filtersListContainer', 'searchcraft-filters-list-container') }, !firstFacet && (h("p", { class: 'searchcraft-facet-message' }, "Enter a search to view facets.")), firstFacet?.map((facetChild) => {
-            const isChildSelected = facetChild.children
-                ? facetChild.children?.some((child) => this.selectedPaths[child.path])
-                : false;
-            return (h("div", { key: facetChild.path, class: classNames('searchcraft-filters-list-item') }, h("label", { class: classNames('filterCheckboxLabel', 'searchcraft-filters-list-checkbox-label') }, h("input", { checked: this.selectedPaths[facetChild.path], onChange: (_event) => this.handleCheckboxChange(facetChild.path), type: 'checkbox' }), isChildSelected ? (h("div", { class: classNames('dashContainer', 'searchcraft-filter-list-dash-container') }, h("svg", { width: '14', height: '3', viewBox: '0 0 14 3', fill: 'none' }, h("title", null, "Checkbox Dash"), h("line", { x1: '1.5', y1: '1.5', x2: '12.5', y2: '1.5', stroke: 'white', "stroke-width": '3', "stroke-linecap": 'round' })))) : (h("div", { class: classNames('checkContainer', 'searchcraft-filter-list-check-container') }, h("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none' }, h("title", null, "Checkbox Check"), h("path", { d: 'M13.9999 2L5.74988 10L1.99988 6.36364', stroke: 'white', "stroke-width": '3', "stroke-linecap": 'round', "stroke-linejoin": 'round' })))), this.formatLabel(facetChild)), facetChild.children && facetChild.children.length > 0 && (h(Fragment, null, facetChild.children.map((grandchild) => (h("label", { key: grandchild.path, class: classNames('childFilterCheckboxLabel', 'searchcraft-child-filter-checkbox-label'), style: {
-                    display: this.selectedPaths[facetChild.path]
-                        ? 'flex'
-                        : 'none',
-                } }, h("input", { checked: this.selectedPaths[grandchild.path], onChange: (_event) => {
-                    this.handleCheckboxChange(grandchild.path);
-                }, type: 'checkbox' }), h("div", { class: classNames('checkContainer', 'searchcraft-filter-list-check-container') }, h("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none' }, h("title", null, "Checkbox Check"), h("path", { d: 'M13.9999 2L5.74988 10L1.99988 6.36364', stroke: 'white', "stroke-width": '3', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), this.formatSubLabel(grandchild, facetChild))))))));
-        })));
-    }
-    static get is() { return "searchcraft-facet-list"; }
-    static get properties() {
-        return {
-            "fieldName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the field where facets are applied."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "field-name",
-                "reflect": false,
-                "defaultValue": "''"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "baseFacetRoot": {},
-            "facetRoot": {},
-            "selectedPaths": {},
-            "lastTimeTaken": {},
-            "hasNewSearchTerm": {},
-            "lastSearchTerm": {},
-            "lastSearchMode": {},
-            "lastSortType": {},
-            "unsubscribe": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "facetSelectionUpdated",
-                "name": "facetSelectionUpdated",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "When the facets are updated."
-                },
-                "complexType": {
-                    "original": "{ paths: string[] }",
-                    "resolved": "{ paths: string[]; }",
-                    "references": {}
-                }
-            }];
-    }
-}
-//# sourceMappingURL=searchcraft-facet-list.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"searchcraft-facet-list.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-facet-list/searchcraft-facet-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  State,\n  Prop,\n  Event,\n  type EventEmitter,\n  Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport type { FacetChild, FacetRoot } from '@searchcraft/core';\n\nimport { useSearchcraftStore, type SearchcraftState } from '@provider/store';\nimport { mergeFacetRoots, removeSubstringMatches } from '@utils';\n\n/**\n * This web component is designed to display facets in a search interface, allowing users to refine their search results by applying filters based on various attributes.\n * It is consumed within the `searchcraft-filter-panel`.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-facet-list field-name=\"title\" />\n * ```\n *\n * ```js\n * // index.js\n * const facetList = document.querySelector('searchcraft-facet-list');\n *\n * facetList.addEventListener('facetSelectionUpdated', () => {\n *   console.log('Facet selection updated');\n * });\n * ```\n */\n@Component({\n  tag: 'searchcraft-facet-list',\n  shadow: false,\n})\nexport class SearchcraftFacetList {\n  /**\n   * The name of the field where facets are applied.\n   */\n  @Prop() fieldName = '';\n\n  /**\n   * When the facets are updated.\n   */\n  @Event() facetSelectionUpdated?: EventEmitter<{ paths: string[] }>;\n\n  @State() baseFacetRoot: FacetRoot | undefined;\n  @State() facetRoot: FacetRoot | undefined;\n  @State() selectedPaths: Record<string, boolean> = {};\n  @State() lastTimeTaken: number | undefined;\n  @State() hasNewSearchTerm = false;\n\n  @State() lastSearchTerm: string | undefined;\n  @State() lastSearchMode: string | undefined;\n  @State() lastSortType: string | undefined;\n\n  @State() unsubscribe: (() => void) | undefined;\n\n  private searchStore = useSearchcraftStore.getState();\n\n  handleStateUpdate(state: SearchcraftState) {\n    const facetPrime = state.searchResponseFacetPrime;\n    const timeTaken = state.searchResponseTimeTaken;\n\n    if (!this.fieldName) {\n      return;\n    }\n\n    /** Things to do when the state's search term has changed, but before the response received */\n    if (\n      state.searchTerm !== this.lastSearchTerm ||\n      state.searchMode !== this.lastSearchMode ||\n      state.sortType !== this.lastSortType\n    ) {\n      this.selectedPaths = {};\n      this.hasNewSearchTerm = true;\n    }\n\n    /** Things to do when a new response with a new facet prime has been received */\n    if (timeTaken !== this.lastTimeTaken && facetPrime) {\n      this.facetRoot = undefined;\n      const incomingFacetRoot: FacetRoot | undefined = facetPrime.find(\n        (facet) => this.fieldName === Object.keys(facet)[0],\n      );\n\n      /** Data is from a new search term: completely override our facets */\n      if (this.hasNewSearchTerm) {\n        this.baseFacetRoot = incomingFacetRoot;\n        this.facetRoot = incomingFacetRoot;\n        this.hasNewSearchTerm = false;\n      } else if (this.baseFacetRoot && incomingFacetRoot) {\n        /** Data is from an existing search term, merge the facets together */\n        this.facetRoot = mergeFacetRoots(\n          this.fieldName,\n          this.baseFacetRoot,\n          incomingFacetRoot,\n        );\n      }\n    }\n\n    this.lastSearchTerm = state.searchTerm;\n    this.lastSearchMode = state.searchMode;\n    this.lastSortType = state.sortType;\n    this.lastTimeTaken = timeTaken;\n  }\n\n  connectedCallback() {\n    this.handleStateUpdate(this.searchStore);\n\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.handleStateUpdate(state);\n    });\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n  }\n\n  handleCheckboxChange(path: string) {\n    const isCheckboxChecked = !this.selectedPaths[path];\n\n    if (isCheckboxChecked) {\n      /**\n       * Checkbox Checked: Add to the selectedPaths record\n       * Uses spread operator here so UI updates.\n       */\n      this.selectedPaths = {\n        ...this.selectedPaths,\n        [path]: true,\n      };\n    } else {\n      /**\n       * Checkbox Uncheck: Remove any paths and sub-paths\n       */\n      const updatedPaths = Object.keys(this.selectedPaths).filter(\n        (testPath) => !testPath.includes(path),\n      );\n\n      this.selectedPaths = updatedPaths.reduce(\n        (acc, str) => {\n          acc[str] = true;\n          return acc;\n        },\n        {} as Record<string, boolean>,\n      );\n    }\n\n    /**\n     * Emit the paths array, with parent paths removed.\n     */\n    const paths = Object.keys(this.selectedPaths).filter(\n      (path) => this.selectedPaths[path],\n    );\n    const pathsWithParentPathsRemoved = removeSubstringMatches(paths);\n\n    this.facetSelectionUpdated?.emit({ paths: pathsWithParentPathsRemoved });\n  }\n\n  formatLabel = (facetChild: FacetChild): string => {\n    const label = facetChild.path.replace(/^\\//, '');\n    const count = facetChild.count;\n    return `${label.replace(/-/g, ' ').replace(/\\b\\w/g, (char) => char.toUpperCase())} (${count})`;\n  };\n\n  formatSubLabel = (\n    facetChild: FacetChild,\n    facetChildAncestor: FacetChild,\n  ): string => {\n    const facetChildPath = facetChild.path.substring(\n      facetChildAncestor.path.length,\n    );\n    const label = facetChildPath.replace(/^\\//, '');\n    const count = facetChild.count;\n    return `${label.replace(/-/g, ' ').replace(/\\b\\w/g, (char) => char.toUpperCase())} (${count})`;\n  };\n\n  render() {\n    if (!this.fieldName) {\n      return;\n    }\n\n    const firstFacet = this.facetRoot?.[this.fieldName];\n\n    return (\n      <div\n        class={classNames(\n          'filtersListContainer',\n          'searchcraft-filters-list-container',\n        )}\n      >\n        {!firstFacet && (\n          <p class='searchcraft-facet-message'>\n            Enter a search to view facets.\n          </p>\n        )}\n        {firstFacet?.map((facetChild: FacetChild) => {\n          const isChildSelected = facetChild.children\n            ? facetChild.children?.some(\n                (child) => this.selectedPaths[child.path],\n              )\n            : false;\n\n          return (\n            <div\n              key={facetChild.path}\n              class={classNames('searchcraft-filters-list-item')}\n            >\n              <label\n                class={classNames(\n                  'filterCheckboxLabel',\n                  'searchcraft-filters-list-checkbox-label',\n                )}\n              >\n                <input\n                  checked={this.selectedPaths[facetChild.path]}\n                  onChange={(_event: Event) =>\n                    this.handleCheckboxChange(facetChild.path)\n                  }\n                  type='checkbox'\n                />\n                {isChildSelected ? (\n                  <div\n                    class={classNames(\n                      'dashContainer',\n                      'searchcraft-filter-list-dash-container',\n                    )}\n                  >\n                    <svg width='14' height='3' viewBox='0 0 14 3' fill='none'>\n                      <title>Checkbox Dash</title>\n                      <line\n                        x1='1.5'\n                        y1='1.5'\n                        x2='12.5'\n                        y2='1.5'\n                        stroke='white'\n                        stroke-width='3'\n                        stroke-linecap='round'\n                      />\n                    </svg>\n                  </div>\n                ) : (\n                  <div\n                    class={classNames(\n                      'checkContainer',\n                      'searchcraft-filter-list-check-container',\n                    )}\n                  >\n                    <svg width='16' height='16' viewBox='0 0 16 16' fill='none'>\n                      <title>Checkbox Check</title>\n                      <path\n                        d='M13.9999 2L5.74988 10L1.99988 6.36364'\n                        stroke='white'\n                        stroke-width='3'\n                        stroke-linecap='round'\n                        stroke-linejoin='round'\n                      />\n                    </svg>\n                  </div>\n                )}\n                {this.formatLabel(facetChild)}\n              </label>\n              {facetChild.children && facetChild.children.length > 0 && (\n                <Fragment>\n                  {facetChild.children.map((grandchild) => (\n                    <label\n                      key={grandchild.path}\n                      class={classNames(\n                        'childFilterCheckboxLabel',\n                        'searchcraft-child-filter-checkbox-label',\n                      )}\n                      style={{\n                        display: this.selectedPaths[facetChild.path]\n                          ? 'flex'\n                          : 'none',\n                      }}\n                    >\n                      <input\n                        checked={this.selectedPaths[grandchild.path]}\n                        onChange={(_event: Event) => {\n                          this.handleCheckboxChange(grandchild.path);\n                        }}\n                        type='checkbox'\n                      />\n                      <div\n                        class={classNames(\n                          'checkContainer',\n                          'searchcraft-filter-list-check-container',\n                        )}\n                      >\n                        <svg\n                          width='16'\n                          height='16'\n                          viewBox='0 0 16 16'\n                          fill='none'\n                        >\n                          <title>Checkbox Check</title>\n                          <path\n                            d='M13.9999 2L5.74988 10L1.99988 6.36364'\n                            stroke='white'\n                            stroke-width='3'\n                            stroke-linecap='round'\n                            stroke-linejoin='round'\n                          />\n                        </svg>\n                      </div>\n                      {this.formatSubLabel(grandchild, facetChild)}\n                    </label>\n                  ))}\n                </Fragment>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-filter-panel/searchcraft-filter-panel.js

@@ -1,149 +0,0 @@
-import { h } from "@stencil/core";
-import { useSearchcraftStore } from "../../provider/store";
-import { getMillis } from "../../utils/index";
-/**
- * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
- *
- * ## Usage
- * ```html
- * <!-- index.html -->
- * <searchcraft-filter-panel />
- * ```
- */
-export class SearchcraftFilterPanel {
-    /**
-     * The items to filter.
-     */
-    items = [];
-    unsubscribe;
-    lastSearchTerm;
-    searchStore = useSearchcraftStore.getState();
-    componentDidLoad() {
-        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
-            if (this.lastSearchTerm !== state.searchTerm) {
-                // A place to put actions to do when the query changes
-            }
-            this.lastSearchTerm = state.searchTerm || '';
-        });
-    }
-    disconnectedCallback() {
-        this.unsubscribe?.();
-    }
-    handleDateRangeChanged(fieldName, min, max) {
-        const start = new Date(min);
-        const end = new Date(max);
-        this.searchStore.addRangeValueForIndexField({
-            fieldName,
-            value: `${fieldName}:[${start.toISOString()} TO ${end.toISOString()}]`,
-        });
-        this.searchStore.search();
-    }
-    handleNumericRangeChanged(fieldName, min, max) {
-        this.searchStore.addRangeValueForIndexField({
-            fieldName,
-            value: `${fieldName}:[${min} TO ${max}]`,
-        });
-        this.searchStore.search();
-    }
-    handleFacetSelectionUpdated(fieldName, paths) {
-        if (paths.length > 0) {
-            this.searchStore.addFacetPathsForIndexField({
-                fieldName,
-                value: `${fieldName}: IN [${paths.join(' ')}]`,
-            });
-        }
-        else {
-            this.searchStore.removeFacetPathsForIndexField(fieldName);
-        }
-        this.searchStore.search();
-    }
-    handleExactMatchToggleUpdated(isActive) {
-        this.searchStore.setSearchMode(isActive ? 'exact' : 'fuzzy');
-        this.searchStore.search();
-    }
-    handleMostRecentToggleUpdated(isActive) {
-        this.searchStore.setSortType(isActive ? 'desc' : 'asc');
-        this.searchStore.search();
-    }
-    /**
-     * Iterate through `items` and render them based on `type`
-     */
-    render() {
-        return (h("div", { key: '7e3e39a09d392e6da9c387d8cd641a50171ddc59', class: 'searchcraft-filter-panel' }, this.items.map((filterItem) => {
-            switch (filterItem.type) {
-                case 'dateRange': {
-                    const item = filterItem;
-                    const min = new Date(item.options.minDate).getTime();
-                    const max = new Date(item.options.maxDate).getTime();
-                    const granularityValue = getMillis(item.options.granularity);
-                    // return date range slider
-                    return (h("div", { class: 'searchcraft-filter-panel-section' }, h("p", { class: 'searchcraft-filter-panel-label' }, filterItem.label), h("searchcraft-slider", { min: min, max: max, granularity: granularityValue, dataType: 'date', onRangeChanged: (event) => {
-                            this.handleDateRangeChanged(item.fieldName, event.detail.startValue, event.detail.endValue);
-                        } })));
-                }
-                case 'numericRange': {
-                    const item = filterItem;
-                    // return date range slider
-                    return (h("div", { class: 'searchcraft-filter-panel-section' }, h("p", { class: 'searchcraft-filter-panel-label' }, filterItem.label), h("searchcraft-slider", { min: item.options.min, max: item.options.max, granularity: item.options.granularity, onRangeChanged: (event) => {
-                            this.handleNumericRangeChanged(item.fieldName, event.detail.startValue, event.detail.endValue);
-                        } })));
-                }
-                case 'facets': {
-                    const item = filterItem;
-                    // return "filters-list"
-                    return (h("div", { class: 'searchcraft-filter-panel-section' }, h("p", { class: 'searchcraft-filter-panel-label' }, filterItem.label), h("searchcraft-facet-list", { fieldName: item.fieldName, onFacetSelectionUpdated: (event) => {
-                            this.handleFacetSelectionUpdated(item.fieldName, event.detail.paths);
-                        } })));
-                }
-                case 'exactMatchToggle': {
-                    const item = filterItem;
-                    return (h("searchcraft-toggle-button", { label: item.label, subLabel: item.options.subLabel, onToggleUpdated: (event) => {
-                            this.handleExactMatchToggleUpdated(event.detail);
-                        } }));
-                }
-                case 'mostRecentToggle': {
-                    const item = filterItem;
-                    return (h("searchcraft-toggle-button", { label: item.label, subLabel: item.options.subLabel, onToggleUpdated: (event) => {
-                            this.handleMostRecentToggleUpdated(event.detail);
-                        } }));
-                }
-            }
-        })));
-    }
-    static get is() { return "searchcraft-filter-panel"; }
-    static get properties() {
-        return {
-            "items": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "FilterItem[]",
-                    "resolved": "FilterItem[]",
-                    "references": {
-                        "FilterItem": {
-                            "location": "import",
-                            "path": "@searchcraft/core",
-                            "id": "../core-sdk/dist/index.d.ts::FilterItem"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The items to filter."
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "unsubscribe": {},
-            "lastSearchTerm": {}
-        };
-    }
-}
-//# sourceMappingURL=searchcraft-filter-panel.js.map

package/dist/collection/components/searchcraft-filter-panel/searchcraft-filter-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"searchcraft-filter-panel.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-filter-panel/searchcraft-filter-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport type {\n  FilterItem,\n  DateRangeFilterItem,\n  NumericFilterItem,\n  ExactMatchToggleFilterItem,\n  FacetsFilterItem,\n} from '@searchcraft/core';\nimport { useSearchcraftStore } from '@provider/store';\nimport { getMillis } from '@utils';\n\n/**\n * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-filter-panel />\n * ```\n */\n@Component({\n  tag: 'searchcraft-filter-panel',\n  shadow: false,\n})\nexport class SearchcraftFilterPanel {\n  /**\n   * The items to filter.\n   */\n  @Prop() items: FilterItem[] = [];\n\n  @State() unsubscribe: (() => void) | undefined;\n  @State() lastSearchTerm: string | undefined;\n\n  private searchStore = useSearchcraftStore.getState();\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (this.lastSearchTerm !== state.searchTerm) {\n        // A place to put actions to do when the query changes\n      }\n      this.lastSearchTerm = state.searchTerm || '';\n    });\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n  }\n\n  handleDateRangeChanged(fieldName: string, min: number, max: number) {\n    const start = new Date(min);\n    const end = new Date(max);\n    this.searchStore.addRangeValueForIndexField({\n      fieldName,\n      value: `${fieldName}:[${start.toISOString()} TO ${end.toISOString()}]`,\n    });\n\n    this.searchStore.search();\n  }\n\n  handleNumericRangeChanged(fieldName: string, min: number, max: number) {\n    this.searchStore.addRangeValueForIndexField({\n      fieldName,\n      value: `${fieldName}:[${min} TO ${max}]`,\n    });\n    this.searchStore.search();\n  }\n\n  handleFacetSelectionUpdated(fieldName: string, paths: string[]) {\n    if (paths.length > 0) {\n      this.searchStore.addFacetPathsForIndexField({\n        fieldName,\n        value: `${fieldName}: IN [${paths.join(' ')}]`,\n      });\n    } else {\n      this.searchStore.removeFacetPathsForIndexField(fieldName);\n    }\n    this.searchStore.search();\n  }\n\n  handleExactMatchToggleUpdated(isActive: boolean) {\n    this.searchStore.setSearchMode(isActive ? 'exact' : 'fuzzy');\n    this.searchStore.search();\n  }\n\n  handleMostRecentToggleUpdated(isActive: boolean) {\n    this.searchStore.setSortType(isActive ? 'desc' : 'asc');\n    this.searchStore.search();\n  }\n\n  /**\n   * Iterate through `items` and render them based on `type`\n   */\n  render() {\n    return (\n      <div class='searchcraft-filter-panel'>\n        {this.items.map((filterItem) => {\n          switch (filterItem.type) {\n            case 'dateRange': {\n              const item = filterItem as DateRangeFilterItem;\n              const min = new Date(item.options.minDate).getTime();\n              const max = new Date(item.options.maxDate).getTime();\n              const granularityValue = getMillis(item.options.granularity);\n              // return date range slider\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-slider\n                    min={min}\n                    max={max}\n                    granularity={granularityValue}\n                    dataType='date'\n                    onRangeChanged={(event) => {\n                      this.handleDateRangeChanged(\n                        item.fieldName,\n                        event.detail.startValue,\n                        event.detail.endValue,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'numericRange': {\n              const item = filterItem as NumericFilterItem;\n              // return date range slider\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-slider\n                    min={item.options.min}\n                    max={item.options.max}\n                    granularity={item.options.granularity}\n                    onRangeChanged={(event) => {\n                      this.handleNumericRangeChanged(\n                        item.fieldName,\n                        event.detail.startValue,\n                        event.detail.endValue,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'facets': {\n              const item = filterItem as FacetsFilterItem;\n              // return \"filters-list\"\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-facet-list\n                    fieldName={item.fieldName}\n                    onFacetSelectionUpdated={(event) => {\n                      this.handleFacetSelectionUpdated(\n                        item.fieldName,\n                        event.detail.paths,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'exactMatchToggle': {\n              const item = filterItem as ExactMatchToggleFilterItem;\n              return (\n                <searchcraft-toggle-button\n                  label={item.label}\n                  subLabel={item.options.subLabel}\n                  onToggleUpdated={(event) => {\n                    this.handleExactMatchToggleUpdated(event.detail);\n                  }}\n                />\n              );\n            }\n            case 'mostRecentToggle': {\n              const item = filterItem as ExactMatchToggleFilterItem;\n              return (\n                <searchcraft-toggle-button\n                  label={item.label}\n                  subLabel={item.options.subLabel}\n                  onToggleUpdated={(event) => {\n                    this.handleMostRecentToggleUpdated(event.detail);\n                  }}\n                />\n              );\n            }\n          }\n        })}\n      </div>\n    );\n  }\n}\n"]}