@searchcraft/javascript-sdk 0.3.0 → 0.4.0

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

@@ -1,82 +1,124 @@
 :root {
-  --font-stack: Helvetica, Arial, sans-serif;
+  /** Appearance & Layout */
+  --sc-spinner-size: 20px;
+  --sc-input-border-radius: 8px;
+  --sc-input-search-icon-size: 20px;
+  --sc-input-clear-icon-size: 20px;
+  --sc-input-padding-left: 44px;
+  --sc-input-padding-right: 44px;
+  --sc-image-border-radius: 8px;
 }
 
-.buttonLight {
-  border-radius: 8px;
-  display: flex;
-  font-family: var(--font-stack);
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 20px;
-  padding: 11px 20px;
-  position: relative;
-  background-color: #000;
-  border: 1px solid #E6E6E6;
-  color: #FFF;
-}
-.buttonLight:hover {
-  cursor: pointer;
-}
-.buttonLight:hover {
-  background-color: #2E2E2E;
+:root {
+  --sc-surface-disabled: #D9D9D9;
+  --sc-surface-neutral-primary: #FFFFFF;
+  --sc-surface-neutral-secondary: #F3F3F3;
+  --sc-surface-neutral-light: #FFFFFF;
+  --sc-surface-neutral-primary-hover: #FAFAFA;
+  --sc-surface-neutral-primary-active: #F7F7F7;
+  --sc-surface-neutral-secondary-hover: #EDEDED;
+  --sc-surface-neutral-secondary-active: #E6E6E6;
+  --sc-surface-brand-primary: #000000;
+  --sc-surface-brand-secondary: #E6E6E6;
+  --sc-surface-brand-primary-hover: #2E2E2E;
+  --sc-surface-brand-primary-active: #292929;
+  --sc-surface-brand-secondary-hover: #EBEBEB;
+  --sc-surface-brand-secondary-active: #E0E0E0;
+  --sc-surface-success-primary: #008000;
+  --sc-surface-success-secondary: #CCFFCC;
+  --sc-surface-success-primary-hover: #009900;
+  --sc-surface-success-primary-active: #006600;
+  --sc-surface-success-secondary-hover: #E6FFE6;
+  --sc-surface-success-secondary-active: #E6FFE6;
+  --sc-surface-caution-primary: #CC6600;
+  --sc-surface-caution-secondary: #FFD9B3;
+  --sc-surface-caution-primary-hover: #E57300;
+  --sc-surface-caution-primary-active: #B25A00;
+  --sc-surface-caution-secondary-hover: #FFE5CC;
+  --sc-surface-caution-secondary-active: #FFCC99;
+  --sc-surface-danger-primary: #CC0000;
+  --sc-surface-danger-secondary: #FFCCCC;
+  --sc-surface-danger-primary-hover: #E50000;
+  --sc-surface-danger-primary-active: #B30000;
+  --sc-surface-danger-secondary-hover: #FFE7E7;
+  --sc-surface-danger-secondary-active: #FFB3B3;
+  --sc-content-brand: #000000;
+  --sc-content-success: #008000;
+  --sc-content-caution: #994D00;
+  --sc-content-danger: #990000;
+  --sc-content-disabled: #737373;
+  --sc-content-neutral-primary: #292929;
+  --sc-content-neutral-secondary: #404040;
+  --sc-content-brand-on-primary: #FFFFFF;
+  --sc-content-success-on-primary: #FFFFFF;
+  --sc-content-caution-on-primary: #FFFFFF;
+  --sc-content-danger-on-primary: #FFFFFF;
+  --sc-content-disabled-on-disabled: #737373;
+  --sc-border-neutral: rgba(0,0,0, 0.1);
+  --sc-border-brand: #000000;
+  --sc-border-success: #008000;
+  --sc-border-caution: #CC6600;
+  --sc-border-danger: #CC0000;
+  --sc-border-disabled: #737373;
 }
-.buttonLight:focus {
-  outline: 2px solid #000000;
+
+:root {
+  /** Typography */
+  --sc-font-family: sans-serif;
+  --sc-heading-1-font-size: 32px;
+  --sc-heading-1-line-height: 36px;
+  --sc-heading-1-font-weight: 700;
+  --sc-heading-2-font-size: 29px;
+  --sc-heading-2-line-height: 32px;
+  --sc-heading-2-font-weight: 700;
+  --sc-heading-3-font-size: 26px;
+  --sc-heading-3-line-height: 28px;
+  --sc-heading-3-font-weight: 700;
+  --sc-heading-4-font-size: 23px;
+  --sc-heading-4-line-height: 24px;
+  --sc-heading-4-font-weight: 700;
+  --sc-heading-5-font-size: 20px;
+  --sc-heading-5-line-height: 24px;
+  --sc-heading-5-font-weight: 700;
+  --sc-heading-6-font-size: 10px;
+  --sc-heading-6-line-height: 12px;
+  --sc-heading-6-font-weight: 700;
+  --sc-body-bold-font-size: 16px;
+  --sc-body-bold-line-height: 20px;
+  --sc-body-bold-font-weight: 700;
+  --sc-body-font-size: 16px;
+  --sc-body-line-height: 20px;
+  --sc-body-font-weight:400;
+  --sc-body-small-bold-font-size: 12px;
+  --sc-body-small-bold-line-height: 16px;
+  --sc-body-small-bold-font-weight: 700;
+  --sc-body-small-font-size: 12px;
+  --sc-body-small-line-height: 16px;
+  --sc-body-small-font-weight: 400;
 }
 
-.buttonDark {
+.searchcraft-button {
+  font-family: var(--sc-font-family);
+  -webkit-font-smoothing: antialiased;
+  font-size: var(--sc-body-bold-font-size);
+  font-weight: var(--sc-body-bold-font-weight);
+  line-height: var(--sc-body-bold-line-height);
   border-radius: 8px;
   display: flex;
-  font-family: var(--font-stack);
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 20px;
-  padding: 11px 20px;
+  padding: 12px 20px;
   position: relative;
-  background-color: #FFF;
-  border: 1px solid #404040;
-  color: #292929;
+  background-color: var(--sc-surface-brand-primary);
+  border: 1px solid var(--sc-border-primary);
+  color: var(--sc-content-brand-on-primary);
 }
-.buttonDark:hover {
+.searchcraft-button:hover {
   cursor: pointer;
+  background-color: var(--sc-surface-brand-primary-hover);
 }
-.buttonDark:hover {
-  background-color: #FAFAFA;
-}
-.buttonDark:focus {
-  outline: 2px solid #404040;
-}
-
-.spinnerMarginRight {
-  left: 4px;
-  margin-right: 4px;
-  position: absolute;
-}
-
-.spinnerMarginLeft {
-  left: 4px;
-  margin-left: 4px;
-  position: absolute;
+.searchcraft-button:focus {
+  outline: 2px solid var(--sc-surface-brand-primary);
 }
 
 .buttonLabel {
-  animation: right-and-back 0.2s;
-  margin-left: 4px;
   position: relative;
-}
-
-@keyframes right-and-back {
-  0% {
-    right: -6px;
-  }
-  50% {
-    right: -12px;
-  }
-  75% {
-    right: -6px;
-  }
-  100% {
-    right: 0px;
-  }
 }

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

@@ -1,16 +1,12 @@
 import { h } from "@stencil/core";
-import classNames from "classnames";
 export class SearchcraftErrorMessage {
     constructor() {
         this.errorMessage = undefined;
-        this.theme = 'light';
     }
     render() {
-        const errorMessageStyle = this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';
-        return (h("p", { key: '7c26f9a1b2589d57a81f7909c456e712d9b7fe79', class: classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
+        return (h("p", { key: '07a5a9e83a30988018aa9d3d3ece9d0894923399', class: 'searchcraft-error-message' }, this.errorMessage || 'Search term is required.'));
     }
     static get is() { return "searchcraft-error-message"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["searchcraft-error-message.module.scss"]
@@ -35,28 +31,10 @@ export class SearchcraftErrorMessage {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The error message to display. Defaults to a standard message if not provided."
+                    "text": ""
                 },
                 "attribute": "error-message",
                 "reflect": false
-            },
-            "theme": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'light' | 'dark'",
-                    "resolved": "\"dark\" | \"light\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The theme, which determines the style (light or dark)."
-                },
-                "attribute": "theme",
-                "reflect": false,
-                "defaultValue": "'light'"
             }
         };
     }

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

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

@@ -1,21 +1,107 @@
 :root {
-  --font-stack: Helvetica, Arial, sans-serif;
+  /** Appearance & Layout */
+  --sc-spinner-size: 20px;
+  --sc-input-border-radius: 8px;
+  --sc-input-search-icon-size: 20px;
+  --sc-input-clear-icon-size: 20px;
+  --sc-input-padding-left: 44px;
+  --sc-input-padding-right: 44px;
+  --sc-image-border-radius: 8px;
 }
 
-.errorMessageLight {
-  font-family: var(--font-stack);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  margin-top: 4px;
-  color: #990000;
+:root {
+  --sc-surface-disabled: #D9D9D9;
+  --sc-surface-neutral-primary: #FFFFFF;
+  --sc-surface-neutral-secondary: #F3F3F3;
+  --sc-surface-neutral-light: #FFFFFF;
+  --sc-surface-neutral-primary-hover: #FAFAFA;
+  --sc-surface-neutral-primary-active: #F7F7F7;
+  --sc-surface-neutral-secondary-hover: #EDEDED;
+  --sc-surface-neutral-secondary-active: #E6E6E6;
+  --sc-surface-brand-primary: #000000;
+  --sc-surface-brand-secondary: #E6E6E6;
+  --sc-surface-brand-primary-hover: #2E2E2E;
+  --sc-surface-brand-primary-active: #292929;
+  --sc-surface-brand-secondary-hover: #EBEBEB;
+  --sc-surface-brand-secondary-active: #E0E0E0;
+  --sc-surface-success-primary: #008000;
+  --sc-surface-success-secondary: #CCFFCC;
+  --sc-surface-success-primary-hover: #009900;
+  --sc-surface-success-primary-active: #006600;
+  --sc-surface-success-secondary-hover: #E6FFE6;
+  --sc-surface-success-secondary-active: #E6FFE6;
+  --sc-surface-caution-primary: #CC6600;
+  --sc-surface-caution-secondary: #FFD9B3;
+  --sc-surface-caution-primary-hover: #E57300;
+  --sc-surface-caution-primary-active: #B25A00;
+  --sc-surface-caution-secondary-hover: #FFE5CC;
+  --sc-surface-caution-secondary-active: #FFCC99;
+  --sc-surface-danger-primary: #CC0000;
+  --sc-surface-danger-secondary: #FFCCCC;
+  --sc-surface-danger-primary-hover: #E50000;
+  --sc-surface-danger-primary-active: #B30000;
+  --sc-surface-danger-secondary-hover: #FFE7E7;
+  --sc-surface-danger-secondary-active: #FFB3B3;
+  --sc-content-brand: #000000;
+  --sc-content-success: #008000;
+  --sc-content-caution: #994D00;
+  --sc-content-danger: #990000;
+  --sc-content-disabled: #737373;
+  --sc-content-neutral-primary: #292929;
+  --sc-content-neutral-secondary: #404040;
+  --sc-content-brand-on-primary: #FFFFFF;
+  --sc-content-success-on-primary: #FFFFFF;
+  --sc-content-caution-on-primary: #FFFFFF;
+  --sc-content-danger-on-primary: #FFFFFF;
+  --sc-content-disabled-on-disabled: #737373;
+  --sc-border-neutral: rgba(0,0,0, 0.1);
+  --sc-border-brand: #000000;
+  --sc-border-success: #008000;
+  --sc-border-caution: #CC6600;
+  --sc-border-danger: #CC0000;
+  --sc-border-disabled: #737373;
+}
+
+:root {
+  /** Typography */
+  --sc-font-family: sans-serif;
+  --sc-heading-1-font-size: 32px;
+  --sc-heading-1-line-height: 36px;
+  --sc-heading-1-font-weight: 700;
+  --sc-heading-2-font-size: 29px;
+  --sc-heading-2-line-height: 32px;
+  --sc-heading-2-font-weight: 700;
+  --sc-heading-3-font-size: 26px;
+  --sc-heading-3-line-height: 28px;
+  --sc-heading-3-font-weight: 700;
+  --sc-heading-4-font-size: 23px;
+  --sc-heading-4-line-height: 24px;
+  --sc-heading-4-font-weight: 700;
+  --sc-heading-5-font-size: 20px;
+  --sc-heading-5-line-height: 24px;
+  --sc-heading-5-font-weight: 700;
+  --sc-heading-6-font-size: 10px;
+  --sc-heading-6-line-height: 12px;
+  --sc-heading-6-font-weight: 700;
+  --sc-body-bold-font-size: 16px;
+  --sc-body-bold-line-height: 20px;
+  --sc-body-bold-font-weight: 700;
+  --sc-body-font-size: 16px;
+  --sc-body-line-height: 20px;
+  --sc-body-font-weight:400;
+  --sc-body-small-bold-font-size: 12px;
+  --sc-body-small-bold-line-height: 16px;
+  --sc-body-small-bold-font-weight: 700;
+  --sc-body-small-font-size: 12px;
+  --sc-body-small-line-height: 16px;
+  --sc-body-small-font-weight: 400;
 }
 
-.errorMessageDark {
-  font-family: var(--font-stack);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  margin-top: 4px;
-  color: #FFB3B3;
+.searchcraft-error-message {
+  font-family: var(--sc-font-family);
+  -webkit-font-smoothing: antialiased;
+  font-size: var(--sc-body-small-font-size);
+  font-weight: var(--sc-body-small-font-weight);
+  line-height: var(--sc-body-small-line-height);
+  color: var(--sc-content-danger);
 }

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

@@ -0,0 +1,140 @@
+import { h, Fragment, } from "@stencil/core";
+import classNames from "classnames";
+import { useSearchcraftStore } from "../../provider/store";
+import { mergeFacetRoots, removeSubstringMatches } from "../../utils/utils";
+export class SearchcraftFiltersList {
+    constructor() {
+        this.searchStore = useSearchcraftStore.getState();
+        this.formatLabel = (facetChild) => {
+            const label = facetChild.path.replace(/^\//, '');
+            const count = facetChild.count;
+            return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
+        };
+        this.formatSubLabel = (facetChild, facetChildAncestor) => {
+            const facetChildPath = facetChild.path.substring(facetChildAncestor.path.length);
+            const label = facetChildPath.replace(/^\//, '');
+            const count = facetChild.count;
+            return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
+        };
+        this.fieldName = undefined;
+        this.facetRoot = undefined;
+        this.selectedPaths = {};
+        this.lastQuery = undefined;
+        this.unsubscribe = undefined;
+    }
+    initFacetRootFromState(state) {
+        var _a;
+        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;
+            }
+            // 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;
+                }
+            }
+        }
+        this.lastQuery = state.query;
+    }
+    connectedCallback() {
+        this.initFacetRootFromState(this.searchStore);
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            this.initFacetRootFromState(state);
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_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 paths = Object.keys(this.selectedPaths).filter((path) => this.selectedPaths[path]);
+        const pathsWithParentPathsRemoved = removeSubstringMatches(paths);
+        this.facetSelectionUpdated.emit({ paths: pathsWithParentPathsRemoved });
+    }
+    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 :
+            firstFacet.map((facetChild) => {
+                var _a;
+                const isChildSelected = facetChild.children
+                    ? (_a = facetChild.children) === null || _a === void 0 ? void 0 : _a.some((child) => this.selectedPaths[child.path])
+                    : false;
+                return (h("div", { key: facetChild.path, class: classNames('searchcraft-filters-list-item') }, h("label", { class: classNames('filterCheckboxLabel', 'searchcraft-filters-list-checkbox-label') }, h("input", { checked: this.selectedPaths[facetChild.path], onChange: (_event) => this.handleCheckboxChange(facetChild.path), type: 'checkbox' }), isChildSelected ? (h("div", { class: classNames('dashContainer', 'searchcraft-filter-list-dash-container') }, h("searchcraft-dash-icon", null))) : (h("div", { class: classNames('checkContainer', 'searchcraft-filter-list-check-container') }, h("searchcraft-check-icon", null))), this.formatLabel(facetChild)), facetChild.children && facetChild.children.length > 0 && (h(Fragment, null, facetChild.children.map((grandchild) => (h("label", { key: grandchild.path, class: classNames('childFilterCheckboxLabel', 'searchcraft-child-filter-checkbox-label'), style: {
+                        display: this.selectedPaths[facetChild.path]
+                            ? 'flex'
+                            : 'none',
+                    } }, h("input", { checked: this.selectedPaths[grandchild.path], onChange: (_event) => {
+                        this.handleCheckboxChange(grandchild.path);
+                    }, type: 'checkbox' }), h("div", { class: classNames('checkContainer', 'searchcraft-filter-list-check-container') }, h("searchcraft-check-icon", null)), this.formatSubLabel(grandchild, facetChild))))))));
+            })));
+    }
+    static get is() { return "searchcraft-facet-list"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-facet-list.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-facet-list.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "fieldName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "field-name",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "facetRoot": {},
+            "selectedPaths": {},
+            "lastQuery": {},
+            "unsubscribe": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "facetSelectionUpdated",
+                "name": "facetSelectionUpdated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ paths: string[] }",
+                    "resolved": "{ paths: string[]; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=searchcraft-facet-list.js.map

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

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