npm - @searchcraft/javascript-sdk - Versions diffs - 0.5.2 → 0.6.0 - Mend

@searchcraft/javascript-sdk 0.5.2 → 0.6.0

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 (314) hide show

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

@@ -1,12 +1,53 @@
+/** Appearance & Layout */
 :root {
-  /** Appearance & Layout */
-  --sc-spinner-size: 20px;
+  /**
+   * Border radius of the input form element.
+   */
   --sc-input-border-radius: 8px;
+  /**
+   * Icon size of the "magnifying glass" icon rendered in the input form.
+   */
   --sc-input-search-icon-size: 20px;
+  /**
+   * Icon size of the `x` button rendered in the input form.
+   */
   --sc-input-clear-icon-size: 20px;
+  /**
+   * Padding on the left side of the input form.
+   */
   --sc-input-padding-left: 44px;
+  /**
+   * Padding on the right side of the input form.
+   */
   --sc-input-padding-right: 44px;
+  /**
+   * Border radius applied to result images.
+   */
   --sc-image-border-radius: 8px;
+  /**
+   * Border radius applied to popover form containers.
+   */
+  --sc-popover-form-border-radius: 8px;
+  /**
+   * Height of the list view/results container portion of the popover form.
+   */
+  --sc-popover-list-view-height: 400px;
+  /**
+   * Size of images of list view items in the popoer list view.
+   */
+  --sc-popover-list-item-image-size: 60px;
+  /**
+   * Horizontal padding of popover list items.
+   */
+  --sc-popover-list-item-padding-horizontal: 8px;
+  /**
+   * Vertical padding of popover list items.
+   */
+  --sc-popover-list-item-padding-vertical: 8px;
+  /**
+   * Maximum width of popover forms of type `modal`.
+   */
+  --sc-popover-modal-max-width: 570px;
 }
 :root {
@@ -97,6 +138,15 @@
   --sc-body-small-font-weight: 400;
 }
+/**
+* Variables that need to be part of the preprocessor can go here.
+*/
+:root {
+  --sc-breakpoint-sm: 576px;
+  --sc-breakpoint-md: 768px;
+  --sc-breakpoint-lg: 992px;
+}
 .searchcraft-error-message {
   font-family: var(--sc-font-family);
   -webkit-font-smoothing: antialiased;

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

@@ -1,7 +1,26 @@
 import { h, Fragment, } from "@stencil/core";
 import classNames from "classnames";
 import { useSearchcraftStore } from "../../provider/store";
-import { mergeFacetRoots, removeSubstringMatches } from "../../utils/utils";
+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 {
     constructor() {
         this.searchStore = useSearchcraftStore.getState();
@@ -97,7 +116,7 @@ export class SearchcraftFacetList {
     render() {
         var _a;
         const firstFacet = (_a = this.facetRoot) === null || _a === void 0 ? void 0 : _a[this.fieldName];
-        return (h("div", { key: 'c7b6a2c7bbb48d0835745b4bcae43a283ade4139', class: classNames('filtersListContainer', 'searchcraft-filters-list-container') }, !firstFacet && (h("p", { key: 'a682f57ff51fdcfec670744ef84930c90c9b9c20', class: 'searchcraft-facet-message' }, "Enter a search to view facets.")), firstFacet === null || firstFacet === void 0 ? void 0 :
+        return (h("div", { key: '709834d9f86b75257ae0c67e9340c0fea4131035', class: classNames('filtersListContainer', 'searchcraft-filters-list-container') }, !firstFacet && (h("p", { key: 'a6e2ced40fcc0762ae8ea835c9d6c573aceeb1f1', 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
@@ -137,7 +156,7 @@ export class SearchcraftFacetList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The name of the field where facets are applied."
                 },
                 "attribute": "field-name",
                 "reflect": false
@@ -166,7 +185,7 @@ export class SearchcraftFacetList {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "When the facets are updated."
                 },
                 "complexType": {
                     "original": "{ paths: string[] }",

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 SearchcraftFacetList {\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() lastTimeTaken: number \| undefined;\n @State() hasNewSearchTerm = false;\n\n @State() lastQuery: 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.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 (\n state.query !== this.lastQuery \|\|\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 = 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.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 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":"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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 styleUrl: 'searchcraft-facet-list.module.scss',\n shadow: false,\n})\nexport class SearchcraftFacetList {\n /\n The name of the field where facets are applied.\n /\n @Prop() fieldName: string;\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() lastQuery: 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.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 (\n state.query !== this.lastQuery \|\|\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 = 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.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 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-facet-list/searchcraft-facet-list.module.css CHANGED Viewed

@@ -1,12 +1,53 @@
+/** Appearance & Layout */
 :root {
-  /** Appearance & Layout */
-  --sc-spinner-size: 20px;
+  /**
+   * Border radius of the input form element.
+   */
   --sc-input-border-radius: 8px;
+  /**
+   * Icon size of the "magnifying glass" icon rendered in the input form.
+   */
   --sc-input-search-icon-size: 20px;
+  /**
+   * Icon size of the `x` button rendered in the input form.
+   */
   --sc-input-clear-icon-size: 20px;
+  /**
+   * Padding on the left side of the input form.
+   */
   --sc-input-padding-left: 44px;
+  /**
+   * Padding on the right side of the input form.
+   */
   --sc-input-padding-right: 44px;
+  /**
+   * Border radius applied to result images.
+   */
   --sc-image-border-radius: 8px;
+  /**
+   * Border radius applied to popover form containers.
+   */
+  --sc-popover-form-border-radius: 8px;
+  /**
+   * Height of the list view/results container portion of the popover form.
+   */
+  --sc-popover-list-view-height: 400px;
+  /**
+   * Size of images of list view items in the popoer list view.
+   */
+  --sc-popover-list-item-image-size: 60px;
+  /**
+   * Horizontal padding of popover list items.
+   */
+  --sc-popover-list-item-padding-horizontal: 8px;
+  /**
+   * Vertical padding of popover list items.
+   */
+  --sc-popover-list-item-padding-vertical: 8px;
+  /**
+   * Maximum width of popover forms of type `modal`.
+   */
+  --sc-popover-modal-max-width: 570px;
 }
 :root {
@@ -97,6 +138,15 @@
   --sc-body-small-font-weight: 400;
 }
+/**
+* Variables that need to be part of the preprocessor can go here.
+*/
+:root {
+  --sc-breakpoint-sm: 576px;
+  --sc-breakpoint-md: 768px;
+  --sc-breakpoint-lg: 992px;
+}
 .filtersListContainer {
   width: 100%;
 }

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

@@ -1,6 +1,15 @@
 import { h } from "@stencil/core";
 import { useSearchcraftStore } from "../../provider/store";
-import { getMillis } from "../../utils/utils";
+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 {
     constructor() {
         this.searchStore = useSearchcraftStore.getState();
@@ -49,7 +58,7 @@ export class SearchcraftFilterPanel {
         this.searchStore.search();
     }
     handleExactMatchToggleUpdated(isActive) {
-        this.searchStore.setSearchMode(isActive ? 'normal' : 'fuzzy');
+        this.searchStore.setSearchMode(isActive ? 'exact' : 'fuzzy');
         this.searchStore.search();
     }
     handleMostRecentToggleUpdated(isActive) {
@@ -60,7 +69,7 @@ export class SearchcraftFilterPanel {
      * Iterate through `items` and render them based on `type`
      */
     render() {
-        return (h("div", { key: '45bcbe509465b8fe3720f3a535902906acfac2ea', class: 'searchcraft-filter-panel' }, this.items.map((filterItem) => {
+        return (h("div", { key: '43bb83b1616c00f46727c7baff2cbc013f88e111', class: 'searchcraft-filter-panel' }, this.items.map((filterItem) => {
             switch (filterItem.type) {
                 case 'dateRange': {
                     const item = filterItem;
@@ -132,7 +141,7 @@ export class SearchcraftFilterPanel {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The items to filter."
                 },
                 "defaultValue": "[]"
             }

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 } 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\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"]}
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';\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 styleUrl: 'searchcraft-filter-panel.module.scss',\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() 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 ? '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"]}

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

@@ -1,12 +1,53 @@
+/** Appearance & Layout */
 :root {
-  /** Appearance & Layout */
-  --sc-spinner-size: 20px;
+  /**
+   * Border radius of the input form element.
+   */
   --sc-input-border-radius: 8px;
+  /**
+   * Icon size of the "magnifying glass" icon rendered in the input form.
+   */
   --sc-input-search-icon-size: 20px;
+  /**
+   * Icon size of the `x` button rendered in the input form.
+   */
   --sc-input-clear-icon-size: 20px;
+  /**
+   * Padding on the left side of the input form.
+   */
   --sc-input-padding-left: 44px;
+  /**
+   * Padding on the right side of the input form.
+   */
   --sc-input-padding-right: 44px;
+  /**
+   * Border radius applied to result images.
+   */
   --sc-image-border-radius: 8px;
+  /**
+   * Border radius applied to popover form containers.
+   */
+  --sc-popover-form-border-radius: 8px;
+  /**
+   * Height of the list view/results container portion of the popover form.
+   */
+  --sc-popover-list-view-height: 400px;
+  /**
+   * Size of images of list view items in the popoer list view.
+   */
+  --sc-popover-list-item-image-size: 60px;
+  /**
+   * Horizontal padding of popover list items.
+   */
+  --sc-popover-list-item-padding-horizontal: 8px;
+  /**
+   * Vertical padding of popover list items.
+   */
+  --sc-popover-list-item-padding-vertical: 8px;
+  /**
+   * Maximum width of popover forms of type `modal`.
+   */
+  --sc-popover-modal-max-width: 570px;
 }
 :root {
@@ -97,6 +138,15 @@
   --sc-body-small-font-weight: 400;
 }
+/**
+* Variables that need to be part of the preprocessor can go here.
+*/
+:root {
+  --sc-breakpoint-sm: 576px;
+  --sc-breakpoint-md: 768px;
+  --sc-breakpoint-lg: 992px;
+}
 .searchcraft-filter-panel {
   display: flex;
   flex-direction: column;