npm - @searchcraft/javascript-sdk - Versions diffs - 0.4.0 → 0.4.2 - Mend

@searchcraft/javascript-sdk 0.4.0 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (183) hide show

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

@@ -17,37 +17,45 @@ export class SearchcraftFiltersList {
             return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
         };
         this.fieldName = undefined;
+        this.baseFacetRoot = undefined;
         this.facetRoot = undefined;
         this.selectedPaths = {};
         this.lastQuery = undefined;
+        this.lastTimeTaken = undefined;
+        this.hasNewSearchTerm = false;
         this.unsubscribe = undefined;
     }
-    initFacetRootFromState(state) {
-        var _a;
+    handleStateUpdate(state) {
+        var _a, _b;
         const facetPrime = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data.facets;
-        if (facetPrime) {
-            const facetRoot = facetPrime.find((facet) => this.fieldName === Object.keys(facet)[0]);
-            if (this.facetRoot) {
-                this.facetRoot = mergeFacetRoots(this.fieldName, this.facetRoot, facetRoot);
-            }
-            else {
-                this.facetRoot = facetRoot;
+        const timeTaken = (_b = state.searchResults) === null || _b === void 0 ? void 0 : _b.data.time_taken;
+        /** Things to do when the state's search term has changed, but before the response received */
+        if (state.query !== this.lastQuery) {
+            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;
             }
-            // Clear the selected paths if the query changed
-            if (state.query !== this.lastQuery) {
-                this.selectedPaths = {};
-                // Remove the facet root if the query is empty
-                if (state.query.trim().length === 0) {
-                    this.facetRoot = undefined;
-                }
+            else if (this.baseFacetRoot) {
+                /** Data is from an existing search term, merge the facets together */
+                this.facetRoot = mergeFacetRoots(this.fieldName, this.baseFacetRoot, incomingFacetRoot);
             }
         }
         this.lastQuery = state.query;
+        this.lastTimeTaken = timeTaken;
     }
     connectedCallback() {
-        this.initFacetRootFromState(this.searchStore);
+        this.handleStateUpdate(this.searchStore);
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
-            this.initFacetRootFromState(state);
+            this.handleStateUpdate(state);
         });
     }
     disconnectedCallback() {
@@ -55,7 +63,27 @@ export class SearchcraftFiltersList {
         (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     handleCheckboxChange(path) {
-        this.selectedPaths = Object.assign(Object.assign({}, this.selectedPaths), { [path]: !this.selectedPaths[path] });
+        const isCheckboxChecked = !this.selectedPaths[path];
+        if (isCheckboxChecked) {
+            /**
+             * Checkbox Checked: Add to the selectedPaths record
+             * Uses spread operator here so UI updates.
+             */
+            this.selectedPaths = Object.assign(Object.assign({}, 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 });
@@ -63,7 +91,7 @@ export class SearchcraftFiltersList {
     render() {
         var _a;
         const firstFacet = (_a = this.facetRoot) === null || _a === void 0 ? void 0 : _a[this.fieldName];
-        return (h("div", { key: '3f7daaa4d9efdd5cfef6c254bd56aad457eceb47', class: classNames('filtersListContainer', 'searchcraft-filters-list-container') }, !firstFacet && (h("p", { key: '3f9fc14961209475b88cd4726014035dfcf62a20', class: 'searchcraft-facet-message' }, "Enter a search to view facets.")), firstFacet === null || firstFacet === void 0 ? void 0 :
+        return (h("div", { key: '3dbfa6515c9628e8eea3cddcd108403a9d51f7c1', class: classNames('filtersListContainer', 'searchcraft-filters-list-container') }, !firstFacet && (h("p", { key: 'c7c519a6a4b6d27343a0ba953d428ec892dbdc93', class: 'searchcraft-facet-message' }, "Enter a search to view facets.")), firstFacet === null || firstFacet === void 0 ? void 0 :
             firstFacet.map((facetChild) => {
                 var _a;
                 const isChildSelected = facetChild.children
@@ -112,9 +140,12 @@ export class SearchcraftFiltersList {
     }
     static get states() {
         return {
+            "baseFacetRoot": {},
             "facetRoot": {},
             "selectedPaths": {},
             "lastQuery": {},
+            "lastTimeTaken": {},
+            "hasNewSearchTerm": {},
             "unsubscribe": {}
         };
     }

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

	@@ -1 +1 @@
1	- {"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/utils';\n\n@Component({\n tag: 'searchcraft-facet-list',\n styleUrl: 'searchcraft-facet-list.module.scss',\n shadow: false,\n})\nexport class SearchcraftFiltersList {\n @Prop() fieldName: string;\n\n @Event() facetSelectionUpdated: EventEmitter<{ paths: string[] }>;\n\n @State() facetRoot: FacetRoot \| undefined;\n @State() selectedPaths: Record<string, boolean> = {};\n @State() lastQuery: string \| undefined;\n\n @State() unsubscribe: (() => void) \| undefined;\n\n private searchStore = useSearchcraftStore.getState();\n\n initFacetRootFromState(state: SearchcraftState) {\n const facetPrime = state.searchResults?.data.facets;\n\n if (facetPrime) {\n const facetRoot: FacetRoot = facetPrime.find(\n (facet) => this.fieldName === Object.keys(facet)[0],\n );\n\n if (this.facetRoot) {\n this.facetRoot = mergeFacetRoots(\n this.fieldName,\n this.facetRoot,\n facetRoot,\n );\n } else {\n this.facetRoot = facetRoot;\n }\n\n // Clear the selected paths if the query changed\n if (state.query !== this.lastQuery) {\n this.selectedPaths = {};\n\n // Remove the facet root if the query is empty\n if (state.query.trim().length === 0) {\n this.facetRoot = undefined;\n }\n }\n }\n\n this.lastQuery = state.query;\n }\n\n connectedCallback() {\n this.initFacetRootFromState(this.searchStore);\n\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n this.initFacetRootFromState(state);\n });\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n }\n\n handleCheckboxChange(path: string) {\n this.selectedPaths = {\n ...this.selectedPaths,\n [path]: !this.selectedPaths[path],\n };\n\n const paths = Object.keys(this.selectedPaths).filter(\n (path) => this.selectedPaths[path],\n );\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 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 <searchcraft-dash-icon />\n </div>\n ) : (\n <div\n class={classNames(\n 'checkContainer',\n 'searchcraft-filter-list-check-container',\n )}\n >\n <searchcraft-check-icon />\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 <searchcraft-check-icon />\n </div>\n {this.formatSubLabel(grandchild, facetChild)}\n </label>\n ))}\n </Fragment>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"searchcraft-facet-list.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-facet-list/searchcraft-facet-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,KAAK,EACL,IAAI,EACJ,KAAK,EAEL,QAAQ,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,OAAO,EAAE,mBAAmB,EAAyB,MAAM,iBAAiB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAOvE,MAAM,OAAO,sBAAsB;;QAczB,gBAAW,GAAG,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QA0FrD,gBAAW,GAAG,CAAC,UAAsB,EAAU,EAAE;YAC/C,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YACjD,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC;YAC/B,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC;QACjG,CAAC,CAAC;QAEF,mBAAc,GAAG,CACf,UAAsB,EACtB,kBAA8B,EACtB,EAAE;YACV,MAAM,cAAc,GAAG,UAAU,CAAC,IAAI,CAAC,SAAS,CAC9C,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAC/B,CAAC;YACF,MAAM,KAAK,GAAG,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAChD,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC;YAC/B,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC;QACjG,CAAC,CAAC;;;;6BAjHgD,EAAE;;;gCAGxB,KAAK;;;IAMjC,iBAAiB,CAAC,KAAuB;;QACvC,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,CAAC,MAAM,CAAC;QACpD,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,CAAC,UAAU,CAAC;QAEvD,8FAA8F;QAC9F,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;YACnC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;YACxB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC/B,CAAC;QAED,gFAAgF;QAChF,IAAI,SAAS,KAAK,IAAI,CAAC,aAAa,IAAI,UAAU,EAAE,CAAC;YACnD,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;YAC3B,MAAM,iBAAiB,GAAc,UAAU,CAAC,IAAI,CAClD,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACpD,CAAC;YAEF,qEAAqE;YACrE,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC1B,IAAI,CAAC,aAAa,GAAG,iBAAiB,CAAC;gBACvC,IAAI,CAAC,SAAS,GAAG,iBAAiB,CAAC;gBACnC,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;YAChC,CAAC;iBAAM,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBAC9B,sEAAsE;gBACtE,IAAI,CAAC,SAAS,GAAG,eAAe,CAC9B,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,aAAa,EAClB,iBAAiB,CAClB,CAAC;YACJ,CAAC;QACH,CAAC;QAED,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC;QAC7B,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;IACjC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEzC,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YACzD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,WAAW,oDAAI,CAAC;IACvB,CAAC;IAED,oBAAoB,CAAC,IAAY;QAC/B,MAAM,iBAAiB,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAEpD,IAAI,iBAAiB,EAAE,CAAC;YACtB;;;eAGG;YACH,IAAI,CAAC,aAAa,mCACb,IAAI,CAAC,aAAa,KACrB,CAAC,IAAI,CAAC,EAAE,IAAI,GACb,CAAC;QACJ,CAAC;aAAM,CAAC;YACN;;eAEG;YACH,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,CACzD,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CACvC,CAAC;YAEF,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC,MAAM,CACtC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;gBACX,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;gBAChB,OAAO,GAAG,CAAC;YACb,CAAC,EACD,EAA6B,CAC9B,CAAC;QACJ,CAAC;QAED;;WAEG;QACH,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,CAClD,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CACnC,CAAC;QACF,MAAM,2BAA2B,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAElE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,2BAA2B,EAAE,CAAC,CAAC;IAC1E,CAAC;IAoBD,MAAM;;QACJ,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,SAAS,0CAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QAEpD,OAAO,CACL,4DACE,KAAK,EAAE,UAAU,CACf,sBAAsB,EACtB,oCAAoC,CACrC;YAEA,CAAC,UAAU,IAAI,CACd,0DAAG,KAAK,EAAC,2BAA2B,qCAEhC,CACL,EACA,UAAU,aAAV,UAAU;YAAV,UAAU,CAAE,GAAG,CAAC,CAAC,UAAsB,EAAE,EAAE;;gBAC1C,MAAM,eAAe,GAAG,UAAU,CAAC,QAAQ;oBACzC,CAAC,CAAC,MAAA,UAAU,CAAC,QAAQ,0CAAE,IAAI,CACvB,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAC1C;oBACH,CAAC,CAAC,KAAK,CAAC;gBAEV,OAAO,CACL,WACE,GAAG,EAAE,UAAU,CAAC,IAAI,EACpB,KAAK,EAAE,UAAU,CAAC,+BAA+B,CAAC;oBAElD,aACE,KAAK,EAAE,UAAU,CACf,qBAAqB,EACrB,yCAAyC,CAC1C;wBAED,aACE,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,EAC5C,QAAQ,EAAE,CAAC,MAAa,EAAE,EAAE,CAC1B,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,IAAI,CAAC,EAE5C,IAAI,EAAC,UAAU,GACf;wBACD,eAAe,CAAC,CAAC,CAAC,CACjB,WACE,KAAK,EAAE,UAAU,CACf,eAAe,EACf,wCAAwC,CACzC;4BAED,gCAAyB,CACrB,CACP,CAAC,CAAC,CAAC,CACF,WACE,KAAK,EAAE,UAAU,CACf,gBAAgB,EAChB,yCAAyC,CAC1C;4BAED,iCAA0B,CACtB,CACP;wBACA,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CACvB;oBACP,UAAU,CAAC,QAAQ,IAAI,UAAU,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CACxD,EAAC,QAAQ,QACN,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CACvC,aACE,GAAG,EAAE,UAAU,CAAC,IAAI,EACpB,KAAK,EAAE,UAAU,CACf,0BAA0B,EAC1B,yCAAyC,CAC1C,EACD,KAAK,EAAE;4BACL,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC;gCAC1C,CAAC,CAAC,MAAM;gCACR,CAAC,CAAC,MAAM;yBACX;wBAED,aACE,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,EAC5C,QAAQ,EAAE,CAAC,MAAa,EAAE,EAAE;gCAC1B,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;4BAC7C,CAAC,EACD,IAAI,EAAC,UAAU,GACf;wBACF,WACE,KAAK,EAAE,UAAU,CACf,gBAAgB,EAChB,yCAAyC,CAC1C;4BAED,iCAA0B,CACtB;wBACL,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,UAAU,CAAC,CACtC,CACT,CAAC,CACO,CACZ,CACG,CACP,CAAC;YACJ,CAAC,CAAC,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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/utils';\n\n@Component({\n tag: 'searchcraft-facet-list',\n styleUrl: 'searchcraft-facet-list.module.scss',\n shadow: false,\n})\nexport class SearchcraftFiltersList {\n @Prop() fieldName: string;\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() lastQuery: string \| undefined;\n @State() lastTimeTaken: number \| undefined;\n @State() hasNewSearchTerm = false;\n\n @State() unsubscribe: (() => void) \| undefined;\n\n private searchStore = useSearchcraftStore.getState();\n\n handleStateUpdate(state: SearchcraftState) {\n const facetPrime = state.searchResults?.data.facets;\n const timeTaken = state.searchResults?.data.time_taken;\n\n /** Things to do when the state's search term has changed, but before the response received /\n if (state.query !== this.lastQuery) {\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 = 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) {\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.lastQuery = state.query;\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 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 <searchcraft-dash-icon />\n </div>\n ) : (\n <div\n class={classNames(\n 'checkContainer',\n 'searchcraft-filter-list-check-container',\n )}\n >\n <searchcraft-check-icon />\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 <searchcraft-check-icon />\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 CHANGED Viewed

@@ -4,27 +4,11 @@ import { getMillis } from "../../utils/utils";
 export class SearchcraftFilterPanel {
     constructor() {
         this.searchStore = useSearchcraftStore.getState();
-        this.setFilterItemsFromString = (itemsString) => {
-            if (itemsString) {
-                try {
-                    const parsedItems = JSON.parse(this.items);
-                    this.filterItems = parsedItems;
-                }
-                catch (_a) {
-                    console.error('Error: Invalid items passed to searchcraft-filter-panel.');
-                }
-            }
-        };
-        this.items = undefined;
+        this.items = [];
         this.unsubscribe = undefined;
         this.lastQuery = undefined;
-        this.filterItems = [];
-    }
-    onItemsChange(itemsString) {
-        this.setFilterItemsFromString(itemsString);
     }
-    connectedCallback() {
-        this.setFilterItemsFromString(this.items);
+    componentDidLoad() {
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
             if (this.lastQuery !== state.query) {
                 // A place to put actions to do when the query changes
@@ -73,10 +57,10 @@ export class SearchcraftFilterPanel {
         this.searchStore.search();
     }
     /**
-     * Iterate through filterItems and render them based on `type`
+     * Iterate through `items` and render them based on `type`
      */
     render() {
-        return (h("div", { key: 'ca5f6078a1c724e08118a2650adc933e788aee34', class: 'searchcraft-filter-panel' }, this.filterItems.map((filterItem) => {
+        return (h("div", { key: '786ebd847aa48e29d4a5c18c7a5d3313bef3904e', class: 'searchcraft-filter-panel' }, this.items.map((filterItem) => {
             switch (filterItem.type) {
                 case 'dateRange': {
                     const item = filterItem;
@@ -131,12 +115,18 @@ export class SearchcraftFilterPanel {
     static get properties() {
         return {
             "items": {
-                "type": "string",
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | undefined",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "FilterItem[]",
+                    "resolved": "FilterItem[]",
+                    "references": {
+                        "FilterItem": {
+                            "location": "import",
+                            "path": "../../types/searchcraft-filter-panel.types",
+                            "id": "src/types/searchcraft-filter-panel.types.ts::FilterItem"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -144,23 +134,15 @@ export class SearchcraftFilterPanel {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "items",
-                "reflect": false
+                "defaultValue": "[]"
             }
         };
     }
     static get states() {
         return {
             "unsubscribe": {},
-            "lastQuery": {},
-            "filterItems": {}
+            "lastQuery": {}
         };
     }
-    static get watchers() {
-        return [{
-                "propName": "items",
-                "methodName": "onItemsChange"
-            }];
-    }
 }
 //# sourceMappingURL=searchcraft-filter-panel.js.map

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

	@@ -1 +1 @@
1	- {"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, Watch } from '@stencil/core';\nimport type {\n FilterItem,\n DateRangeFilterItem,\n NumericFilterItem,\n ExactMatchToggleFilterItem,\n FacetsFilterItem,\n} from '../../types/searchcraft-filter-panel.types';\nimport { useSearchcraftStore } from '@provider/store';\nimport { getMillis } from '@utils/utils';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n detail: T;\n target: HTMLSearchcraftInputElement;\n}\n\n@Component({\n tag: 'searchcraft-filter-panel',\n styleUrl: 'searchcraft-filter-panel.module.scss',\n shadow: false,\n})\nexport class SearchcraftFilterPanel {\n @Prop() items: string \| undefined;\n\n @State() unsubscribe: (() => void) \| undefined;\n @State() lastQuery: string \| undefined;\n @State() filterItems: FilterItem[] = [];\n\n private searchStore = useSearchcraftStore.getState();\n private setFilterItemsFromString = (itemsString: string) => {\n if (itemsString) {\n try {\n const parsedItems = JSON.parse(this.items) as FilterItem[];\n this.filterItems = parsedItems;\n } catch {\n console.error(\n 'Error: Invalid items passed to searchcraft-filter-panel.',\n );\n }\n }\n };\n\n @Watch('items')\n onItemsChange(itemsString: string) {\n this.setFilterItemsFromString(itemsString);\n }\n\n connectedCallback() {\n this.setFilterItemsFromString(this.items);\n\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n if (this.lastQuery !== state.query) {\n // A place to put actions to do when the query changes\n }\n this.lastQuery = state.query \|\| '';\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 ? 'normal' : '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 filterItems and render them based on `type`\n */\n render() {\n return (\n <div class='searchcraft-filter-panel'>\n {this.filterItems.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"]}
1	+ {"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 '../../types/searchcraft-filter-panel.types';\nimport { useSearchcraftStore } from '@provider/store';\nimport { getMillis } from '@utils/utils';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n detail: T;\n target: HTMLSearchcraftInputElement;\n}\n\n@Component({\n tag: 'searchcraft-filter-panel',\n styleUrl: 'searchcraft-filter-panel.module.scss',\n shadow: false,\n})\nexport class SearchcraftFilterPanel {\n @Prop() items: FilterItem[] = [];\n\n @State() unsubscribe: (() => void) \| undefined;\n @State() lastQuery: string \| undefined;\n\n private searchStore = useSearchcraftStore.getState();\n\n componentDidLoad() {\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n if (this.lastQuery !== state.query) {\n // A place to put actions to do when the query changes\n }\n this.lastQuery = state.query \|\| '';\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 ? 'normal' : '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"]}

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

@@ -3,24 +3,36 @@ import { getMillis } from "../../utils/utils";
 import classNames from "classnames";
 export class SearchcraftSlider {
     constructor() {
-        this.updateValues = async () => {
+        this.emitUpdate = async () => {
             this.rangeChanged.emit({
                 startValue: this.startValue,
                 endValue: this.endValue,
             });
         };
-        this.handlestartValueChange = (event) => {
-            const value = Number.parseInt(event.target.value, 10);
+        this.handleStartValueChange = (event) => {
+            const inputElement = event.target;
+            const value = Number.parseInt(inputElement.value, 10);
+            this.lastFocusedHandle = 'min';
             if (value <= this.endValue) {
                 this.startValue = value;
-                this.updateValues();
+                this.emitUpdate();
+            }
+            else {
+                this.startValue = this.endValue;
+                inputElement.value = `${this.endValue}`;
             }
         };
-        this.handleendValueChange = (event) => {
-            const value = Number.parseInt(event.target.value, 10);
+        this.handleEndValueChange = (event) => {
+            const inputElement = event.target;
+            const value = Number.parseInt(inputElement.value, 10);
+            this.lastFocusedHandle = 'max';
             if (value >= this.startValue) {
                 this.endValue = value;
-                this.updateValues();
+                this.emitUpdate();
+            }
+            else {
+                this.endValue = this.startValue;
+                inputElement.value = `${this.startValue}`;
             }
         };
         this.max = 100;
@@ -29,9 +41,7 @@ export class SearchcraftSlider {
         this.dataType = 'number';
         this.endValue = this.max;
         this.startValue = this.min;
-        this.hasSearched = false;
-        this.query = '';
-        this.resultsCount = 0;
+        this.lastFocusedHandle = 'max';
     }
     componentDidLoad() {
         this.startValue = this.min;
@@ -48,10 +58,10 @@ export class SearchcraftSlider {
         const endLabel = this.dataType === 'number'
             ? this.endValue
             : new Date(this.endValue).getFullYear();
-        return (h("div", { key: '5b85ed684719fc53cb2c6d4d6b9b25dda95238c4', class: classNames('sliderContainer', 'searchcraft-slider-container') }, h("div", { key: '4222101284dc36c5fc70f033fbdd5080e4c25f41', class: classNames('rangeContainer', 'searchcraft-slider-range-container') }, h("div", { key: '8610d8fbdd7c920e93969d588d75e4b1266d24a9', class: classNames('activeRange', 'searchcraft-slider-active-range'), style: {
+        return (h("div", { key: 'f05bc14a425c9e302cd0aad174af7e80a553258e', class: 'searchcraft-slider-container' }, h("div", { key: 'e52983353639e1c5b695772d55148daa25b48845', class: 'searchcraft-slider-range-container' }, h("div", { key: '9f7d5601f056a75bfd8f5ef9053a21a4931c8b1c', class: 'searchcraft-slider-active-range', style: {
                 left: `${startPercent}%`,
                 width: `${endPercent - startPercent}%`,
-            } }), h("input", { key: 'aafc7ecf347131e8f86bce144d046ca33d3ce7a9', class: classNames('rangeSlider', 'searchcraft-slider-range-slider-start-thumb'), max: this.max, min: this.min, onInput: this.handlestartValueChange, step: this.granularity, type: 'range', value: this.startValue }), h("input", { key: '8247c65541d1fe70ac078d4f3ddf9111919750e7', class: classNames('rangeSlider', 'searchcraft-slider-range-slider-end-thumb'), max: this.max, min: this.min, onInput: this.handleendValueChange, step: this.granularity, type: 'range', value: this.endValue })), h("div", { key: '43f708034b96d7683dea2c60c95b1689bce47ad5', class: classNames('yearLabels', 'searchcraft-slider-year-label-container') }, h("span", { key: '39c5a9f41c9ddc87f81cb7fc488fdc61afd82ae6', class: classNames('yearLabel', 'searchcraft-slider-start-year-label') }, startLabel), h("span", { key: '536fb604734b109318f3b4da38743c00581f369a', class: classNames('yearLabel', 'searchcraft-slider-end-year-label') }, endLabel))));
+            } }), h("input", { key: 'c7816c75212e3573ec35171557b79c9de1da60f9', class: classNames('searchcraft-slider-input', 'searchcraft-slider-input-min-handle'), max: this.max, min: this.min, onInput: this.handleStartValueChange.bind(this), step: this.granularity, style: { zIndex: this.lastFocusedHandle === 'min' ? '2' : '1' }, type: 'range', value: this.startValue }), h("input", { key: '0fe6e721448b99899f6875d05789399f862cb82e', class: classNames('searchcraft-slider-input', 'searchcraft-slider-input-max-handle'), max: this.max, min: this.min, onInput: this.handleEndValueChange.bind(this), step: this.granularity, style: { zIndex: this.lastFocusedHandle === 'max' ? '2' : '1' }, type: 'range', value: this.endValue })), h("div", { key: 'fdf17ab7c1322824bbd94de96b223d3e2ceddfc8', class: 'searchcraft-slider-label-container' }, h("span", { key: 'e7ddfd13f5d258a995bb824e9b26a492e5ca4f32', class: 'searchcraft-slider-label' }, startLabel), h("span", { key: '67d6f9ea4e8fa7f651c9e9cafb624996df1676ea', class: 'searchcraft-slider-label' }, endLabel))));
     }
     static get is() { return "searchcraft-slider"; }
     static get originalStyleUrls() {
@@ -144,9 +154,7 @@ export class SearchcraftSlider {
         return {
             "endValue": {},
             "startValue": {},
-            "hasSearched": {},
-            "query": {},
-            "resultsCount": {}
+            "lastFocusedHandle": {}
         };
     }
     static get events() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"searchcraft-slider.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-slider/searchcraft-slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,iBAAiB;;~~QAmBpB~~,~~iBAAY~~,GAAG,KAAK,IAAI,EAAE;~~YAChC~~,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACrB,UAAU,EAAE,IAAI,CAAC,UAAU;gBAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,2BAAsB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACrD,MAAM,~~KAAK~~,GAAG,~~MAAM~~,CAAC,~~QAAQ~~,~~CAAE~~,KAAK,CAAC,~~MAA2B~~,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;~~YAC5E~~,IAAI,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC3B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;gBACxB,IAAI,CAAC,YAAY,EAAE,CAAC;~~YACtB~~,CAAC;QACH,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,KAAiB,EAAE,EAAE;YACnD,MAAM,~~KAAK~~,GAAG,~~MAAM~~,CAAC,~~QAAQ~~,~~CAAE~~,KAAK,CAAC,~~MAA2B~~,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;~~YAC5E~~,IAAI,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACtB,IAAI,CAAC,YAAY,EAAE,CAAC;~~YACtB~~,CAAC;QACH,CAAC,CAAC;~~mBAvCY~~,GAAG;mBACH,CAAC;2BACe,SAAS,CAAC,OAAO,CAAC;wBACV,QAAQ;wBAE1B,IAAI,CAAC,GAAG;0BACN,IAAI,CAAC,GAAG;~~2BACP~~,KAAK~~;qBACX,EAAE;4BACK,CAAC~~;;~~IAIzB~~,gBAAgB;QACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC;QAC3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC;IAC3B,CAAC;~~IAyBD~~,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC;QAC1B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC;QAC1B,MAAM,YAAY,GAChB,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC;QAC/D,MAAM,UAAU,GACd,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC;QAE7D,MAAM,UAAU,GACd,IAAI,CAAC,QAAQ,KAAK,QAAQ;YACxB,CAAC,CAAC,IAAI,CAAC,UAAU;YACjB,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,EAAE,CAAC;QAE9C,MAAM,QAAQ,GACZ,IAAI,CAAC,QAAQ,KAAK,QAAQ;YACxB,CAAC,CAAC,IAAI,CAAC,QAAQ;YACf,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,WAAW,EAAE,CAAC;QAE5C,OAAO,CACL,~~4DACE~~,KAAK,~~EAAE~~,~~UAAU,CAAC,iBAAiB,EAAE,~~8BAA8B~~,CAAC~~;~~YAEpE~~,~~4DACE~~,KAAK,~~EAAE~~,~~UAAU,CACf,gBAAgB,EAChB,~~oCAAoC~~,CACrC~~;~~gBAED~~,4DACE,KAAK,~~EAAE~~,~~UAAU,CAAC,aAAa,EAAE,~~iCAAiC,~~CAAC~~,~~EACnE,~~KAAK,EAAE;wBACL,IAAI,EAAE,GAAG,YAAY,GAAG;wBACxB,KAAK,EAAE,GAAG,UAAU,GAAG,YAAY,GAAG;qBACvC,GACD;gBACF,8DACE,KAAK,EAAE,UAAU,CACf,~~aAAa~~,~~EACb~~,~~6CAA6C~~,~~CAC9C~~,EACD,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB,~~EACpC~~,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,UAAU,GACtB;gBACF,8DACE,KAAK,EAAE,UAAU,CACf,~~aAAa~~,~~EACb~~,~~2CAA2C~~,~~CAC5C~~,EACD,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,OAAO,EAAE,IAAI,CAAC,oBAAoB,~~EAClC~~,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,~~EAAC~~,~~OAAO~~,~~EACZ~~,KAAK,~~EAAE~~,~~IAAI~~,CAAC,~~QAAQ~~,~~GACpB~~,~~CACE;YACN~~,~~4DACE~~,~~KAAK~~,EAAE,~~UAAU~~,~~CACf~~,~~YAAY~~,EACZ,~~yCAAyC,CAC1C;gBAED,6DACE,~~KAAK,EAAE,~~UAAU~~,~~CACf~~,~~WAAW~~,~~EACX~~,~~qCAAqC~~,~~CACtC~~,~~IAEA~~,~~UAAU~~,~~CACN~~;~~gBACP~~,~~6DACE~~,KAAK,~~EAAE~~,UAAU,~~CAAC~~,~~WAAW~~,~~EAAE~~,~~mCAAmC~~,~~CAAC~~,~~IAElE~~,QAAQ,~~CACJ~~,~~CACH~~,CACF,CACP,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {\n Component,\n Event,\n type EventEmitter,\n h,\n State,\n Prop,\n} from '@stencil/core';\nimport { getMillis } from '@utils/utils';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'searchcraft-slider',\n styleUrl: 'searchcraft-slider.module.scss',\n shadow: false,\n})\nexport class SearchcraftSlider {\n @Prop() max = 100;\n @Prop() min = 0;\n @Prop() granularity: number = getMillis('month');\n @Prop() dataType: 'number' \| 'date' = 'number';\n\n @State() endValue = this.max;\n @State() startValue = this.min;\n @State() ~~hasSearched~~ = ~~false;\n @State()~~ ~~query~~ = '';\n ~~@State() resultsCount = 0;\n~~\n @Event() rangeChanged: EventEmitter<{ startValue: number; endValue: number }>;\n\n componentDidLoad() {\n this.startValue = this.min;\n this.endValue = this.max;\n }\n\n private ~~updateValues~~ = async () => {\n this.rangeChanged.emit({\n startValue: this.startValue,\n endValue: this.endValue,\n });\n };\n\n private ~~handlestartValueChange~~ = (event: InputEvent) => {\n const ~~value~~ = ~~Number.parseInt((~~event.target as HTMLInputElement).value, 10);\n if (value <= this.endValue) {\n this.startValue = value;\n this.~~updateValues~~();\n }\n };\n\n private ~~handleendValueChange~~ = (event: InputEvent) => {\n const ~~value~~ = ~~Number.parseInt((~~event.target as HTMLInputElement).value, 10);\n if (value >= this.startValue) {\n this.endValue = value;\n this.~~updateValues~~();\n }\n };\n\n render() {\n const rangeMin = this.min;\n const rangeMax = this.max;\n const startPercent =\n ((this.startValue - rangeMin) / (rangeMax - rangeMin)) * 100;\n const endPercent =\n ((this.endValue - rangeMin) / (rangeMax - rangeMin)) * 100;\n\n const startLabel =\n this.dataType === 'number'\n ? this.startValue\n : new Date(this.startValue).getFullYear();\n\n const endLabel =\n this.dataType === 'number'\n ? this.endValue\n : new Date(this.endValue).getFullYear();\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.max}\n min={this.min}\n onInput={this.~~handlestartValueChange~~}\n step={this.granularity}\n type='range'\n value={this.startValue}\n />\n <input\n class={classNames(\n '~~rangeSlider~~',\n 'searchcraft-slider-~~range~~-~~slider~~-~~end-thumb~~',\n )}\n max={this.max}\n min={this.min}\n onInput={this.~~handleendValueChange~~}\n step={this.granularity}\n type='range'\n value={this.endValue}\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~~ {startLabel}\n </span>\n <span\n class=~~{classNames(~~'~~yearLabel', '~~searchcraft-slider-~~end-year-~~label'~~)}\n >\n~~ {endLabel}\n </span>\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"searchcraft-slider.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-slider/searchcraft-slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n type EventEmitter,\n h,\n State,\n Prop,\n} from '@stencil/core';\nimport { getMillis } from '@utils/utils';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'searchcraft-slider',\n styleUrl: 'searchcraft-slider.module.scss',\n shadow: false,\n})\nexport class SearchcraftSlider {\n @Prop() max = 100;\n @Prop() min = 0;\n @Prop() granularity: number = getMillis('month');\n @Prop() dataType: 'number' \| 'date' = 'number';\n\n @State() endValue = this.max;\n @State() startValue = this.min;\n @State() lastFocusedHandle: 'min' \| 'max' = 'max';\n\n @Event() rangeChanged: EventEmitter<{ startValue: number; endValue: number }>;\n\n componentDidLoad() {\n this.startValue = this.min;\n this.endValue = this.max;\n }\n\n private emitUpdate = async () => {\n this.rangeChanged.emit({\n startValue: this.startValue,\n endValue: this.endValue,\n });\n };\n\n private handleStartValueChange = (event: InputEvent) => {\n const inputElement = event.target as HTMLInputElement;\n const value = Number.parseInt(inputElement.value, 10);\n this.lastFocusedHandle = 'min';\n if (value <= this.endValue) {\n this.startValue = value;\n this.emitUpdate();\n } else {\n this.startValue = this.endValue;\n inputElement.value = `${this.endValue}`;\n }\n };\n\n private handleEndValueChange = (event: InputEvent) => {\n const inputElement = event.target as HTMLInputElement;\n const value = Number.parseInt(inputElement.value, 10);\n this.lastFocusedHandle = 'max';\n if (value >= this.startValue) {\n this.endValue = value;\n this.emitUpdate();\n } else {\n this.endValue = this.startValue;\n inputElement.value = `${this.startValue}`;\n }\n };\n\n render() {\n const rangeMin = this.min;\n const rangeMax = this.max;\n const startPercent =\n ((this.startValue - rangeMin) / (rangeMax - rangeMin)) * 100;\n const endPercent =\n ((this.endValue - rangeMin) / (rangeMax - rangeMin)) * 100;\n\n const startLabel =\n this.dataType === 'number'\n ? this.startValue\n : new Date(this.startValue).getFullYear();\n\n const endLabel =\n this.dataType === 'number'\n ? this.endValue\n : new Date(this.endValue).getFullYear();\n\n return (\n <div class='searchcraft-slider-container'>\n <div class='searchcraft-slider-range-container'>\n <div\n class='searchcraft-slider-active-range'\n style={{\n left: `${startPercent}%`,\n width: `${endPercent - startPercent}%`,\n }}\n />\n <input\n class={classNames(\n 'searchcraft-slider-input',\n 'searchcraft-slider-input-min-handle',\n )}\n max={this.max}\n min={this.min}\n onInput={this.handleStartValueChange.bind(this)}\n step={this.granularity}\n style={{ zIndex: this.lastFocusedHandle === 'min' ? '2' : '1' }}\n type='range'\n value={this.startValue}\n />\n <input\n class={classNames(\n 'searchcraft-slider-input',\n 'searchcraft-slider-input-max-handle',\n )}\n max={this.max}\n min={this.min}\n onInput={this.handleEndValueChange.bind(this)}\n step={this.granularity}\n style={{ zIndex: this.lastFocusedHandle === 'max' ? '2' : '1' }}\n type='range'\n value={this.endValue}\n />\n </div>\n <div class='searchcraft-slider-label-container'>\n <span class='searchcraft-slider-label'>{startLabel}</span>\n <span class='searchcraft-slider-label'>{endLabel}</span>\n </div>\n </div>\n );\n }\n}\n"]}

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

@@ -97,7 +97,7 @@
   --sc-body-small-font-weight: 400;
 }
-.sliderContainer {
+.searchcraft-slider-container {
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -105,7 +105,7 @@
   width: 100%;
 }
-.rangeContainer {
+.searchcraft-slider-range-container {
   align-items: center;
   background-color: var(--sc-surface-disabled);
   border-radius: 999px;
@@ -114,10 +114,10 @@
   height: 4px;
   width: 100%;
 }
-.rangeContainer::-webkit-slider-runnable-track {
+.searchcraft-slider-range-container::-webkit-slider-runnable-track {
   pointer-events: none;
 }
-.rangeContainer .activeRange {
+.searchcraft-slider-range-container .searchcraft-slider-active-range {
   background-color: var(--sc-surface-brand-primary);
   border-radius: 2px;
   height: 4px;
@@ -126,13 +126,13 @@
   transform: translateY(-50%);
   z-index: 0;
 }
-.rangeContainer .activeRange::-webkit-slider-runnable-track {
+.searchcraft-slider-range-container .searchcraft-slider-active-range::-webkit-slider-runnable-track {
   pointer-events: none;
 }
-.rangeContainer .activeRange::-moz-range-track {
+.searchcraft-slider-range-container .searchcraft-slider-active-range::-moz-range-track {
   pointer-events: none;
 }
-.rangeContainer .rangeSlider {
+.searchcraft-slider-range-container .searchcraft-slider-input {
   appearance: none;
   background: transparent;
   border-radius: 2px;
@@ -144,7 +144,7 @@
   width: 100%;
   -webkit-appearance: none;
 }
-.rangeContainer .rangeSlider::-webkit-slider-thumb {
+.searchcraft-slider-range-container .searchcraft-slider-input::-webkit-slider-thumb {
   background-color: var(--sc-surface-neutral-light);
   border-radius: 50%;
   border: 2px solid var(--sc-border-neutral);
@@ -154,7 +154,7 @@
   width: 20px;
   -webkit-appearance: none;
 }
-.rangeContainer .rangeSlider::-moz-range-thumb {
+.searchcraft-slider-range-container .searchcraft-slider-input::-moz-range-thumb {
   background-color: var(--sc-surface-neutral-light);
   border-radius: 50%;
   border: 2px solid var(--sc-border-neutral);
@@ -164,7 +164,7 @@
   width: 20px;
 }
-.yearLabels {
+.searchcraft-slider-label-container {
   color: var(--sc-content-primary);
   display: flex;
   font-family: "Source Sans Pro", sans-serif;
@@ -175,7 +175,7 @@
   width: 100%;
 }
-.yearLabel {
+.searchcraft-slider-label {
   min-width: 30px;
   text-align: center;
 }

package/dist/collection/components/searchcraft-toggle-button/searchcraft-toggle-button.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useSearchcraftStore } from "../../provider/store";
 import { h, } from "@stencil/core";
 import classNames from "classnames";
 export class SearchcraftToggleButton {
@@ -9,11 +10,26 @@ export class SearchcraftToggleButton {
         this.label = 'Toggle';
         this.subLabel = undefined;
         this.isActive = false;
+        this.unsubscribe = undefined;
+        this.lastQuery = undefined;
+    }
+    connectedCallback() {
+        /** When the query changes, sets toggle button state back to inactive. */
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            if (state.query !== this.lastQuery) {
+                this.isActive = false;
+                this.lastQuery = state.query;
+            }
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     render() {
-        return (h("div", { key: 'd22c50dcf65d66208bd0ee78c88f452ba94c96e1', class: 'searchcraft-toggle-button-container' }, h("div", { key: 'c7309a315b979c1bc68b140f4e3d250fdb208e37' }, h("p", { key: '2a22fc2b52f73a5fe79512c4e3ed105110a514cd', class: 'searchcraft-toggle-button-label' }, this.label), this.subLabel && (h("p", { key: '8c1670c628751c19576ff9f8cf4bad71b974fb4f', class: 'searchcraft-toggle-button-sub-label' }, this.subLabel))), h("button", { key: '10600dd271917d074bf4d1e8dea473b583c79031', class: classNames('searchcraft-toggle-button-background', {
+        return (h("div", { key: 'e6d23071452a4a01b95a45748860df7737735c83', class: 'searchcraft-toggle-button-container' }, h("div", { key: '3d87cd576368065c7fe8d3b50daef9c67c04253e' }, h("p", { key: '06d1f349c9132e6a9762d777e3f90c635852e4a1', class: 'searchcraft-toggle-button-label' }, this.label), this.subLabel && (h("p", { key: '9bf361bdb33977a089d9364822c9c11b846b59a5', class: 'searchcraft-toggle-button-sub-label' }, this.subLabel))), h("button", { key: 'bb8f27eecb9fe8d5dde237f81d04c3e79a7ec87b', class: classNames('searchcraft-toggle-button-background', {
                 active: this.isActive,
-            }), onClick: this.handleToggle, type: 'button' }, h("div", { key: '3cd18a77345001252c700d6b1ca3f34b9e7e849d', class: classNames('searchcraft-toggle-button-handle', {
+            }), onClick: this.handleToggle, type: 'button' }, h("div", { key: 'd4be7cc5fbadfc28e97c4dfada15236b7be2fda0', class: classNames('searchcraft-toggle-button-handle', {
                 active: this.isActive,
             }) }))));
     }
@@ -69,7 +85,9 @@ export class SearchcraftToggleButton {
     }
     static get states() {
         return {
-            "isActive": {}
+            "isActive": {},
+            "unsubscribe": {},
+            "lastQuery": {}
         };
     }
     static get events() {

package/dist/collection/components/searchcraft-toggle-button/searchcraft-toggle-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"searchcraft-toggle-button.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-toggle-button/searchcraft-toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EACL,CAAC,EACD,IAAI,EACJ,KAAK,GAEN,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAMpC,MAAM,OAAO,uBAAuB;;~~QAa1B~~,iBAAY,GAAG,KAAK,IAAI,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzC,CAAC,CAAC;~~qBAVc~~,QAAQ;;wBAKJ,KAAK;;~~IAOzB~~,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,qCAAqC;YAC9C;gBACE,0DAAG,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAC,KAAK,CAAK;gBAC1D,IAAI,CAAC,QAAQ,IAAI,CAChB,0DAAG,KAAK,EAAC,qCAAqC,IAAE,IAAI,CAAC,QAAQ,CAAK,CACnE,CACG;YACN,+DACE,KAAK,EAAE,UAAU,CAAC,sCAAsC,EAAE;oBACxD,MAAM,EAAE,IAAI,CAAC,QAAQ;iBACtB,CAAC,EACF,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,QAAQ;gBAEb,4DACE,KAAK,EAAE,UAAU,CAAC,kCAAkC,EAAE;wBACpD,MAAM,EAAE,IAAI,CAAC,QAAQ;qBACtB,CAAC,GACF,CACK,CACL,CACP,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {\n Component,\n Event,\n h,\n Prop,\n State,\n type EventEmitter,\n} from '@stencil/core';\nimport classNames from 'classnames';\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() label = 'Toggle';\n @Prop() subLabel: string \| undefined;\n\n @Event() toggleUpdated: EventEmitter<boolean>;\n\n @State() isActive = false;\n\n private handleToggle = async () => {\n this.isActive = !this.isActive;\n this.toggleUpdated.emit(this.isActive);\n };\n\n render() {\n return (\n <div class='searchcraft-toggle-button-container'>\n <div>\n <p class='searchcraft-toggle-button-label'>{this.label}</p>\n {this.subLabel && (\n <p class='searchcraft-toggle-button-sub-label'>{this.subLabel}</p>\n )}\n </div>\n <button\n class={classNames('searchcraft-toggle-button-background', {\n active: this.isActive,\n })}\n onClick={this.handleToggle}\n type='button'\n >\n <div\n class={classNames('searchcraft-toggle-button-handle', {\n active: this.isActive,\n })}\n />\n </button>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"searchcraft-toggle-button.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-toggle-button/searchcraft-toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EACL,SAAS,EACT,KAAK,EACL,CAAC,EACD,IAAI,EACJ,KAAK,GAEN,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAMpC,MAAM,OAAO,uBAAuB;;QAe1B,iBAAY,GAAG,KAAK,IAAI,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzC,CAAC,CAAC;qBAZc,QAAQ;;wBAKJ,KAAK;;;;IASzB,iBAAiB;QACf,yEAAyE;QACzE,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YACzD,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACtB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,WAAW,oDAAI,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,qCAAqC;YAC9C;gBACE,0DAAG,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAC,KAAK,CAAK;gBAC1D,IAAI,CAAC,QAAQ,IAAI,CAChB,0DAAG,KAAK,EAAC,qCAAqC,IAAE,IAAI,CAAC,QAAQ,CAAK,CACnE,CACG;YACN,+DACE,KAAK,EAAE,UAAU,CAAC,sCAAsC,EAAE;oBACxD,MAAM,EAAE,IAAI,CAAC,QAAQ;iBACtB,CAAC,EACF,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,QAAQ;gBAEb,4DACE,KAAK,EAAE,UAAU,CAAC,kCAAkC,EAAE;wBACpD,MAAM,EAAE,IAAI,CAAC,QAAQ;qBACtB,CAAC,GACF,CACK,CACL,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport {\n Component,\n Event,\n h,\n Prop,\n State,\n type EventEmitter,\n} from '@stencil/core';\nimport classNames from 'classnames';\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() label = 'Toggle';\n @Prop() subLabel: string \| undefined;\n\n @Event() toggleUpdated: EventEmitter<boolean>;\n\n @State() isActive = false;\n @State() unsubscribe: (() => void) \| undefined;\n @State() lastQuery: string \| undefined;\n\n private handleToggle = async () => {\n this.isActive = !this.isActive;\n this.toggleUpdated.emit(this.isActive);\n };\n\n connectedCallback() {\n /* When the query changes, sets toggle button state back to inactive. */\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n if (state.query !== this.lastQuery) {\n this.isActive = false;\n this.lastQuery = state.query;\n }\n });\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n }\n\n render() {\n return (\n <div class='searchcraft-toggle-button-container'>\n <div>\n <p class='searchcraft-toggle-button-label'>{this.label}</p>\n {this.subLabel && (\n <p class='searchcraft-toggle-button-sub-label'>{this.subLabel}</p>\n )}\n </div>\n <button\n class={classNames('searchcraft-toggle-button-background', {\n active: this.isActive,\n })}\n onClick={this.handleToggle}\n type='button'\n >\n <div\n class={classNames('searchcraft-toggle-button-handle', {\n active: this.isActive,\n })}\n />\n </button>\n </div>\n );\n }\n}\n"]}

package/dist/collection/provider/store.js CHANGED Viewed

@@ -59,11 +59,17 @@ const useSearchcraftStore = create((set, get) => {
         searchResults: null,
         facets: null,
         getSearchcraftInstance: () => searchcraft,
-        searchParams: {
-            mode: 'fuzzy',
-            sort: 'asc',
+        setQuery: (query) => {
+            /**
+             * When a new query is set, also reset the sort type, search mode, and facet paths.
+             */
+            set({
+                query,
+                facetPathsForIndexFields: {},
+                searchMode: 'fuzzy',
+                sortType: 'asc',
+            });
         },
-        setQuery: (query) => set({ query, facetPathsForIndexFields: {} }),
         setSearchResults: (results) => set({ searchResults: results }),
         setFacets: (facets) => set({ facets }),
         setIsRequesting: (isRequesting) => set({ isRequesting }),