@searchcraft/javascript-sdk 0.5.3 → 0.7.0

package/dist/collection/components/searchcraft-base-search-results/searchcraft-base-search-results.module.css

@@ -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-search-results-container {
   display: flex;
   flex-direction: column;

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

@@ -1,18 +1,31 @@
 import { h, Fragment, } from "@stencil/core";
 import classNames from "classnames";
+/**
+ * This web component represents a button to be consumed within the `search-input-form` component.
+ * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.
+ * It is consumed within the `searchcraft-input-form` component.
+ */
 export class SearchcraftButton {
     constructor() {
-        this.handleClick = () => {
-            this.buttonClick.emit();
-        };
-        this.iconElement = undefined;
+        /**
+         * Should the button only display an icon.
+         */
         this.iconOnly = false;
+        /**
+         * The position of the icon.
+         */
         this.iconPosition = 'left';
+        /**
+         * The label for the button.
+         */
         this.label = 'Search';
         this.isRequesting = false;
+        this.handleClick = () => {
+            this.buttonClick.emit();
+        };
     }
     render() {
-        return (h(Fragment, { key: '8ea823d757ceca459ef80affa8dfdf7e96076c32' }, this.iconOnly ? (h("button", { class: classNames('searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.isRequesting ? (h("searchcraft-spinner-dark", null)) : (this.iconElement))) : (h("button", { class: classNames('searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.iconPosition === 'left' && this.iconElement, h("span", { class: classNames('buttonLabel', 'searchcraft-button-label') }, this.label)))));
+        return (h(Fragment, { key: '52b95f09f5da9f281b250285623e150c5d952dce' }, this.iconOnly ? (h("button", { class: classNames('searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.isRequesting ? (h("searchcraft-spinner-dark", null)) : (this.iconElement))) : (h("button", { class: classNames('searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.iconPosition === 'left' && this.iconElement, h("span", { class: classNames('buttonLabel', 'searchcraft-button-label') }, this.label)))));
     }
     static get is() { return "searchcraft-button"; }
     static get originalStyleUrls() {
@@ -44,8 +57,10 @@ export class SearchcraftButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
-                }
+                    "text": "The icon element."
+                },
+                "getter": false,
+                "setter": false
             },
             "iconOnly": {
                 "type": "boolean",
@@ -59,8 +74,10 @@ export class SearchcraftButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Should the button only display an icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon-only",
                 "reflect": false,
                 "defaultValue": "false"
@@ -77,8 +94,10 @@ export class SearchcraftButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The position of the icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon-position",
                 "reflect": false,
                 "defaultValue": "'left'"
@@ -95,8 +114,10 @@ export class SearchcraftButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The label for the button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "'Search'"
@@ -117,7 +138,7 @@ export class SearchcraftButton {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "When the button is clicked."
                 },
                 "complexType": {
                     "original": "void",

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

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-button.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-button/searchcraft-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,KAAK,EACL,QAAQ,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,iBAAiB;;QAUpB,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC;;wBAViB,KAAK;4BACD,MAAM;qBACb,QAAQ;4BAIA,KAAK;;IAM7B,MAAM;QACJ,OAAO,CACL,EAAC,QAAQ,uDACN,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,cACE,KAAK,EAAE,UAAU,CAAC,oBAAoB,CAAC,EACvC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,mCAA4B,CAC7B,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,WAAW,CACjB,CACM,CACV,CAAC,CAAC,CAAC,CACF,cACE,KAAK,EAAE,UAAU,CAAC,oBAAoB,CAAC,EACvC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ;YAEZ,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW;YACjD,YAAM,KAAK,EAAE,UAAU,CAAC,aAAa,EAAE,0BAA0B,CAAC,IAC/D,IAAI,CAAC,KAAK,CACN,CACA,CACV,CACQ,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  State,\n  Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-button',\n  styleUrl: 'searchcraft-button.module.scss',\n  shadow: false,\n})\nexport class SearchcraftButton {\n  @Prop() iconElement?: Element;\n  @Prop() iconOnly = false;\n  @Prop() iconPosition = 'left';\n  @Prop() label = 'Search';\n\n  @Event() buttonClick!: EventEmitter<void>;\n\n  @State() isRequesting = false;\n\n  private handleClick = () => {\n    this.buttonClick.emit();\n  };\n\n  render() {\n    return (\n      <Fragment>\n        {this.iconOnly ? (\n          <button\n            class={classNames('searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.isRequesting ? (\n              <searchcraft-spinner-dark />\n            ) : (\n              this.iconElement\n            )}\n          </button>\n        ) : (\n          <button\n            class={classNames('searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.iconPosition === 'left' && this.iconElement}\n            <span class={classNames('buttonLabel', 'searchcraft-button-label')}>\n              {this.label}\n            </span>\n          </button>\n        )}\n      </Fragment>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-button.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-button/searchcraft-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,KAAK,EACL,QAAQ,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC;;;;GAIG;AAMH,MAAM,OAAO,iBAAiB;IAL9B;QAUE;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QACzB;;WAEG;QACK,iBAAY,GAAG,MAAM,CAAC;QAC9B;;WAEG;QACK,UAAK,GAAG,QAAQ,CAAC;QAOhB,iBAAY,GAAG,KAAK,CAAC;QAEtB,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC;KAgCH;IA9BC,MAAM;QACJ,OAAO,CACL,EAAC,QAAQ,uDACN,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,cACE,KAAK,EAAE,UAAU,CAAC,oBAAoB,CAAC,EACvC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,mCAA4B,CAC7B,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,WAAW,CACjB,CACM,CACV,CAAC,CAAC,CAAC,CACF,cACE,KAAK,EAAE,UAAU,CAAC,oBAAoB,CAAC,EACvC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ;YAEZ,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW;YACjD,YAAM,KAAK,EAAE,UAAU,CAAC,aAAa,EAAE,0BAA0B,CAAC,IAC/D,IAAI,CAAC,KAAK,CACN,CACA,CACV,CACQ,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  State,\n  Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component represents a button to be consumed within the `search-input-form` component.\n * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.\n * It is consumed within the `searchcraft-input-form` component.\n */\n@Component({\n  tag: 'searchcraft-button',\n  styleUrl: 'searchcraft-button.module.scss',\n  shadow: false,\n})\nexport class SearchcraftButton {\n  /**\n   * The icon element.\n   */\n  @Prop() iconElement?: Element;\n  /**\n   * Should the button only display an icon.\n   */\n  @Prop() iconOnly = false;\n  /**\n   * The position of the icon.\n   */\n  @Prop() iconPosition = 'left';\n  /**\n   * The label for the button.\n   */\n  @Prop() label = 'Search';\n\n  /**\n   * When the button is clicked.\n   */\n  @Event() buttonClick!: EventEmitter<void>;\n\n  @State() isRequesting = false;\n\n  private handleClick = () => {\n    this.buttonClick.emit();\n  };\n\n  render() {\n    return (\n      <Fragment>\n        {this.iconOnly ? (\n          <button\n            class={classNames('searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.isRequesting ? (\n              <searchcraft-spinner-dark />\n            ) : (\n              this.iconElement\n            )}\n          </button>\n        ) : (\n          <button\n            class={classNames('searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.iconPosition === 'left' && this.iconElement}\n            <span class={classNames('buttonLabel', 'searchcraft-button-label')}>\n              {this.label}\n            </span>\n          </button>\n        )}\n      </Fragment>\n    );\n  }\n}\n"]}

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

@@ -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-button {
   font-family: var(--sc-font-family);
   -webkit-font-smoothing: antialiased;

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

@@ -1,10 +1,16 @@
 import { h } from "@stencil/core";
+/**
+ * This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.
+ *
+ * ## Usage
+ * ```html
+ * <!-- index.html -->
+ * <searchcraft-error-message error-message="No search results found for query" />
+ * ```
+ */
 export class SearchcraftErrorMessage {
-    constructor() {
-        this.errorMessage = undefined;
-    }
     render() {
-        return (h("p", { key: '68c4058c43418e96729a91e6a2a9a106303c8bc0', class: 'searchcraft-error-message' }, this.errorMessage || 'Search term is required.'));
+        return (h("p", { key: '5bdc428adf6f239d66a9b0f946ee6e582de41e86', class: 'searchcraft-error-message' }, this.errorMessage || 'Search term is required.'));
     }
     static get is() { return "searchcraft-error-message"; }
     static get originalStyleUrls() {
@@ -31,8 +37,10 @@ export class SearchcraftErrorMessage {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The error message."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "error-message",
                 "reflect": false
             }

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

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-error-message.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-error-message/searchcraft-error-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,uBAAuB;;;;IAGlC,MAAM;QACJ,OAAO,CACL,0DAAG,KAAK,EAAC,2BAA2B,IACjC,IAAI,CAAC,YAAY,IAAI,0BAA0B,CAC9C,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-error-message',\n  styleUrl: 'searchcraft-error-message.module.scss',\n  shadow: false,\n})\nexport class SearchcraftErrorMessage {\n  @Prop() errorMessage?: string;\n\n  render() {\n    return (\n      <p class='searchcraft-error-message'>\n        {this.errorMessage || 'Search term is required.'}\n      </p>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-error-message.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-error-message/searchcraft-error-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;GAQG;AAMH,MAAM,OAAO,uBAAuB;IAMlC,MAAM;QACJ,OAAO,CACL,0DAAG,KAAK,EAAC,2BAA2B,IACjC,IAAI,CAAC,YAAY,IAAI,0BAA0B,CAC9C,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n/**\n * This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-error-message error-message=\"No search results found for query\" />\n * ```\n */\n@Component({\n  tag: 'searchcraft-error-message',\n  styleUrl: 'searchcraft-error-message.module.scss',\n  shadow: false,\n})\nexport class SearchcraftErrorMessage {\n  /**\n   * The error message.\n   */\n  @Prop() errorMessage?: string;\n\n  render() {\n    return (\n      <p class='searchcraft-error-message'>\n        {this.errorMessage || 'Search term is required.'}\n      </p>\n    );\n  }\n}\n"]}

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

@@ -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

@@ -1,9 +1,30 @@
 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.selectedPaths = {};
+        this.hasNewSearchTerm = false;
         this.searchStore = useSearchcraftStore.getState();
         this.formatLabel = (facetChild) => {
             const label = facetChild.path.replace(/^\//, '');
@@ -16,16 +37,6 @@ export class SearchcraftFacetList {
             const count = facetChild.count;
             return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
         };
-        this.fieldName = undefined;
-        this.baseFacetRoot = undefined;
-        this.facetRoot = undefined;
-        this.selectedPaths = {};
-        this.lastTimeTaken = undefined;
-        this.hasNewSearchTerm = false;
-        this.lastQuery = undefined;
-        this.lastSearchMode = undefined;
-        this.lastSortType = undefined;
-        this.unsubscribe = undefined;
     }
     handleStateUpdate(state) {
         var _a, _b;
@@ -97,7 +108,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,8 +148,10 @@ export class SearchcraftFacetList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The name of the field where facets are applied."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "field-name",
                 "reflect": false
             }
@@ -166,7 +179,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

@@ -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"]}
+{"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

@@ -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

@@ -1,12 +1,22 @@
 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();
+        /**
+         * The items to filter.
+         */
         this.items = [];
-        this.unsubscribe = undefined;
-        this.lastQuery = undefined;
+        this.searchStore = useSearchcraftStore.getState();
     }
     componentDidLoad() {
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
@@ -49,7 +59,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 +70,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,8 +142,10 @@ export class SearchcraftFilterPanel {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The items to filter."
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "[]"
             }
         };