@searchcraft/javascript-sdk 0.2.8 → 0.2.9

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

@@ -0,0 +1,137 @@
+import { h, Fragment, } from "@stencil/core";
+import classNames from "classnames";
+export class SearchcraftButton {
+    constructor() {
+        this.handleClick = () => {
+            this.buttonClick.emit(); // Emit the event instead of calling a function
+        };
+        this.iconElement = undefined;
+        this.iconOnly = false;
+        this.iconPosition = 'left';
+        this.label = 'Search';
+        this.isRequesting = false;
+        this.theme = 'light';
+    }
+    getButtonStyle() {
+        return this.theme === 'light' ? 'buttonLight' : 'buttonDark';
+    }
+    render() {
+        const buttonStyle = this.getButtonStyle();
+        return (h(Fragment, { key: '31e65bdc250d9e87848b6d0c59798ded2855de79' }, this.iconOnly ? (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.isRequesting ? (h("searchcraft-spinner-dark", null)) : (this.iconElement))) : (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.iconPosition === 'left' && this.isRequesting ? (h("div", { class: 'spinner-margin-right' }, h("searchcraft-spinner-dark", null))) : (this.iconElement), h("span", { class: classNames(this.isRequesting && 'button-label', 'searchcraft-button-label') }, this.label)))));
+    }
+    static get is() { return "searchcraft-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-button.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-button.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "iconElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Element",
+                    "resolved": "Element",
+                    "references": {
+                        "Element": {
+                            "location": "global",
+                            "id": "global::Element"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-position",
+                "reflect": false,
+                "defaultValue": "'left'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'Search'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isRequesting": {},
+            "theme": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "buttonClick",
+                "name": "buttonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=searchcraft-button.js.map

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

@@ -0,0 +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;;QAepB,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,+CAA+C;QAC1E,CAAC,CAAC;;wBAfiB,KAAK;4BACD,MAAM;qBACb,QAAQ;4BAIA,KAAK;qBACZ,OAAO;;IAEhB,cAAc;QACpB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC;IAC/D,CAAC;IAMD,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,OAAO,CACL,EAAC,QAAQ,uDACN,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,cACE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,oBAAoB,CAAC,EACpD,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,WAAW,EAAE,oBAAoB,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ;YAEZ,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnD,WAAK,KAAK,EAAC,sBAAsB;gBAC/B,mCAA4B,CACxB,CACP,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,WAAW,CACjB;YACD,YACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,YAAY,IAAI,cAAc,EACnC,0BAA0B,CAC3B,IAEA,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: true,\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  @State() theme = 'light';\n\n  private getButtonStyle() {\n    return this.theme === 'light' ? 'buttonLight' : 'buttonDark';\n  }\n\n  private handleClick = () => {\n    this.buttonClick.emit(); // Emit the event instead of calling a function\n  };\n\n  render() {\n    const buttonStyle = this.getButtonStyle();\n\n    return (\n      <Fragment>\n        {this.iconOnly ? (\n          <button\n            class={classNames(buttonStyle, '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(buttonStyle, 'searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.iconPosition === 'left' && this.isRequesting ? (\n              <div class='spinner-margin-right'>\n                <searchcraft-spinner-dark />\n              </div>\n            ) : (\n              this.iconElement\n            )}\n            <span\n              class={classNames(\n                this.isRequesting && 'button-label',\n                'searchcraft-button-label',\n              )}\n            >\n              {this.label}\n            </span>\n          </button>\n        )}\n      </Fragment>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,82 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.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;
+}
+.buttonLight:focus {
+  outline: 2px solid #000000;
+}
+
+.buttonDark {
+  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: #FFF;
+  border: 1px solid #404040;
+  color: #292929;
+}
+.buttonDark:hover {
+  cursor: pointer;
+}
+.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;
+}
+
+.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-clear-input-button/searchcraft-clear-input-button.js

@@ -0,0 +1,95 @@
+import { h, } from "@stencil/core";
+import classNames from "classnames";
+export class SearchcraftClearInputButton {
+    constructor() {
+        this.handleClearClick = (event) => {
+            event.preventDefault();
+            this.clearInput.emit();
+        };
+        this.isRequesting = false;
+        this.rightToLeftOrientation = false;
+        this.theme = 'light';
+    }
+    isLightTheme() {
+        return this.theme === 'light';
+    }
+    render() {
+        return this.rightToLeftOrientation ? (h("button", { class: classNames('inputClearButtonRTL', '.sc-clear-input-button-rtl'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (h("searchcraft-spinner-light", null)) : (h("searchcraft-spinner-dark", null))) : this.isLightTheme ? (h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (h("searchcraft-clear-icon-set", { type: 'clear-dark' })))) : (h("button", { class: classNames('inputClearButtonLTR', '.sc-clear-input-button-ltr'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (h("searchcraft-spinner-light", null)) : (h("searchcraft-spinner-dark", null))) : this.isLightTheme ? (h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (h("searchcraft-clear-icon-set", { type: 'clear-dark' }))));
+    }
+    static get is() { return "searchcraft-clear-input-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-clear-input-button.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-clear-input-button.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isRequesting": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-requesting",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "rightToLeftOrientation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "right-to-left-orientation",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "theme": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clearInput",
+                "name": "clearInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=searchcraft-clear-input-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"searchcraft-clear-input-button.js","sourceRoot":"","sources":["../../../src/components/searchcraft-clear-input-button/searchcraft-clear-input-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,2BAA2B;;QAY9B,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACzB,CAAC,CAAC;4BAdsB,KAAK;sCACI,KAAK;qBAIrB,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;IAChC,CAAC;IAOD,MAAM;QACJ,OAAO,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CACnC,cACE,KAAK,EAAE,UAAU,CAAC,qBAAqB,EAAE,4BAA4B,CAAC,EACtE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAClB,oCAA6B,CAC9B,CAAC,CAAC,CAAC,CACF,mCAA4B,CAC7B,CACF,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACtB,kCAA4B,IAAI,EAAC,aAAa,GAAG,CAClD,CAAC,CAAC,CAAC,CACF,kCAA4B,IAAI,EAAC,YAAY,GAAG,CACjD,CACM,CACV,CAAC,CAAC,CAAC,CACF,cACE,KAAK,EAAE,UAAU,CAAC,qBAAqB,EAAE,4BAA4B,CAAC,EACtE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAClB,oCAA6B,CAC9B,CAAC,CAAC,CAAC,CACF,mCAA4B,CAC7B,CACF,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACtB,kCAA4B,IAAI,EAAC,aAAa,GAAG,CAClD,CAAC,CAAC,CAAC,CACF,kCAA4B,IAAI,EAAC,YAAY,GAAG,CACjD,CACM,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  State,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-clear-input-button',\n  styleUrl: 'searchcraft-clear-input-button.module.scss',\n  shadow: true,\n})\nexport class SearchcraftClearInputButton {\n  @Prop() isRequesting? = false;\n  @Prop() rightToLeftOrientation = false;\n\n  @Event() clearInput: EventEmitter<void>;\n\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  private handleClearClick = (event: MouseEvent) => {\n    event.preventDefault();\n    this.clearInput.emit();\n  };\n\n  render() {\n    return this.rightToLeftOrientation ? (\n      <button\n        class={classNames('inputClearButtonRTL', '.sc-clear-input-button-rtl')}\n        onClick={this.handleClearClick}\n        type='button'\n      >\n        {this.isRequesting ? (\n          this.isLightTheme ? (\n            <searchcraft-spinner-light />\n          ) : (\n            <searchcraft-spinner-dark />\n          )\n        ) : this.isLightTheme ? (\n          <searchcraft-clear-icon-set type='clear-light' />\n        ) : (\n          <searchcraft-clear-icon-set type='clear-dark' />\n        )}\n      </button>\n    ) : (\n      <button\n        class={classNames('inputClearButtonLTR', '.sc-clear-input-button-ltr')}\n        onClick={this.handleClearClick}\n        type='button'\n      >\n        {this.isRequesting ? (\n          this.isLightTheme ? (\n            <searchcraft-spinner-light />\n          ) : (\n            <searchcraft-spinner-dark />\n          )\n        ) : this.isLightTheme ? (\n          <searchcraft-clear-icon-set type='clear-light' />\n        ) : (\n          <searchcraft-clear-icon-set type='clear-dark' />\n        )}\n      </button>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,33 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.inputClearButtonLTR {
+  align-items: center;
+  background: none;
+  border: none;
+  display: flex;
+  height: 20px;
+  justify-content: center;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+}
+
+.inputClearButtonRTL {
+  align-items: center;
+  background: none;
+  border: none;
+  display: flex;
+  height: 20px;
+  justify-content: center;
+  left: 0px;
+  padding: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+}

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

@@ -0,0 +1,64 @@
+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.'));
+    }
+    static get is() { return "searchcraft-error-message"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-error-message.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-error-message.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message to display. Defaults to a standard message if not provided."
+                },
+                "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'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=searchcraft-error-message.js.map

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

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

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

@@ -0,0 +1,21 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.errorMessageLight {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 4px;
+  color: #990000;
+}
+
+.errorMessageDark {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 4px;
+  color: #FFB3B3;
+}

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

@@ -0,0 +1,174 @@
+import { h, } from "@stencil/core";
+import { useSearchcraftStore } from "../../provider/store";
+import { flattenFacets } from "../../utils/utils";
+export class SearchcraftFiltersList {
+    constructor() {
+        this.searchStore = useSearchcraftStore.getState();
+        this.autoSearchFormElement = null;
+        this.handleSearchRequest = () => {
+            this.selectedFilters = [];
+            this.searchStore.setSelectedFilters([]);
+            this.emitFiltersUpdate();
+        };
+        this.filters = [];
+        this.dynamicFilters = [];
+        this.selectedFilters = [];
+        this.query = '';
+        this.isRequesting = false;
+        this.resultsCount = 0;
+    }
+    connectedCallback() {
+        var _a;
+        const state = this.searchStore;
+        const facets = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data.facets;
+        if (facets) {
+            this.populateFiltersFromFacets(facets);
+        }
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            var _a, _b, _c, _d, _e;
+            const query = (_a = state.query) === null || _a === void 0 ? void 0 : _a.trim();
+            const facets = (_b = state.searchResults) === null || _b === void 0 ? void 0 : _b.data.facets;
+            this.query = query || '';
+            this.isRequesting = state.isRequesting;
+            this.resultsCount = ((_e = (_d = (_c = state.searchResults) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.hits) === null || _e === void 0 ? void 0 : _e.length) || 0;
+            if (facets && this.selectedFilters.length === 0) {
+                this.populateFiltersFromFacets(facets);
+            }
+        });
+        this.autoSearchFormElement = document.querySelector('searchcraft-auto-search-form');
+        if (this.autoSearchFormElement) {
+            this.autoSearchFormElement.addEventListener('querySubmit', this.handleSearchRequest);
+        }
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+        if (this.autoSearchFormElement) {
+            this.autoSearchFormElement.removeEventListener('querySubmit', this.handleSearchRequest);
+        }
+    }
+    populateFiltersFromFacets(facets) {
+        var _a;
+        const flattened = flattenFacets(((_a = facets[0]) === null || _a === void 0 ? void 0 : _a.section) || []);
+        this.dynamicFilters = flattened.map((filter) => ({
+            label: filter.label,
+            value: filter.value,
+            count: filter.count,
+            children: filter.children || [],
+        }));
+    }
+    handleCheckboxChange(value, isChecked, isParent = false) {
+        var _a;
+        if (isParent) {
+            const parentFilter = this.dynamicFilters.find((filter) => filter.value === value);
+            const childValues = ((_a = parentFilter === null || parentFilter === void 0 ? void 0 : parentFilter.children) === null || _a === void 0 ? void 0 : _a.map((child) => child.value)) || [];
+            if (!isChecked) {
+                // Remove children from selectedFilters when parent is unchecked
+                this.selectedFilters = this.selectedFilters.filter((filter) => filter !== value && !childValues.includes(filter));
+            }
+            else {
+                // Add parent filter to selectedFilters
+                this.selectedFilters = [...this.selectedFilters, value];
+            }
+        }
+        else {
+            // Update selectedFilters for child filters
+            this.selectedFilters = isChecked
+                ? [...this.selectedFilters, value]
+                : this.selectedFilters.filter((filter) => filter !== value);
+        }
+        this.emitFiltersUpdate();
+    }
+    emitFiltersUpdate() {
+        this.filtersUpdated.emit(this.selectedFilters);
+        this.searchStore.setSelectedFilters(this.selectedFilters);
+        this.searchStore.search();
+    }
+    formatLabel(label, count) {
+        return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
+    }
+    render() {
+        if (!this.query || this.resultsCount === 0) {
+            return null;
+        }
+        return (h("div", { class: 'filtersList' }, this.dynamicFilters.map((filter) => {
+            const isChildSelected = filter.children
+                ? filter.children.some((child) => this.selectedFilters.includes(child.value))
+                : false;
+            return (h("div", { key: filter.value, class: 'filterItem' }, h("label", { class: 'checkboxLabel' }, h("input", { type: 'checkbox', checked: this.selectedFilters.includes(filter.value), onChange: (event) => this.handleCheckboxChange(filter.value, event.target.checked, true) }), isChildSelected ? (h("div", { class: 'dashContainer' }, h("searchcraft-dash-icon", null))) : (h("div", { class: 'checkContainer' }, h("searchcraft-check-icon", null))), this.formatLabel(filter.label, filter.count)), filter.children && filter.children.length > 0 && (h("div", { class: 'childrenContainer' }, filter.children.map((child) => (h("label", { key: child.value, class: 'childCheckboxLabel', style: {
+                    marginLeft: '20px',
+                    display: this.selectedFilters.includes(filter.value)
+                        ? 'flex'
+                        : 'none',
+                } }, h("input", { type: 'checkbox', checked: this.selectedFilters.includes(child.value), onChange: (event) => this.handleCheckboxChange(child.value, event.target.checked) }), h("div", { class: 'checkContainer' }, h("searchcraft-check-icon", null)), this.formatLabel(child.label.includes('/')
+                ? child.label.split('/').pop() || child.label
+                : child.label, child.count))))))));
+        })));
+    }
+    static get is() { return "searchcraft-filters-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-filters-list.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-filters-list.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "filters": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<{ label: string; value: string }>",
+                    "resolved": "{ label: string; value: string; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dynamicFilters": {},
+            "selectedFilters": {},
+            "query": {},
+            "isRequesting": {},
+            "resultsCount": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "filtersUpdated",
+                "name": "filtersUpdated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=searchcraft-filters-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"searchcraft-filters-list.js","sourceRoot":"","sources":["../../../src/components/searchcraft-filters-list/searchcraft-filters-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  State,\n  Prop,\n  Event,\n  type EventEmitter,\n} from '@stencil/core';\n\nimport type { Facets } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { flattenFacets } from '@utils/utils';\n\n@Component({\n  tag: 'searchcraft-filters-list',\n  styleUrl: 'searchcraft-filters-list.module.scss',\n  shadow: true,\n})\nexport class SearchcraftFiltersList {\n  @Prop() filters: Array<{ label: string; value: string }> = [];\n\n  @Event() filtersUpdated: EventEmitter<string[]>;\n\n  @State() dynamicFilters: Array<{\n    label: string;\n    value: string;\n    count: number;\n    children?: Array<{\n      label: string;\n      value: string;\n      count: number;\n    }>;\n  }> = [];\n  @State() selectedFilters: string[] = [];\n  @State() query = '';\n  @State() isRequesting = false;\n  @State() resultsCount = 0;\n\n  private searchStore = useSearchcraftStore.getState();\n  private autoSearchFormElement: HTMLElement | null = null;\n  unsubscribe: () => void;\n\n  connectedCallback() {\n    const state = this.searchStore;\n    const facets = state.searchResults?.data.facets;\n\n    if (facets) {\n      this.populateFiltersFromFacets(facets);\n    }\n\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      const query = state.query?.trim();\n      const facets = state.searchResults?.data.facets;\n      this.query = query || '';\n      this.isRequesting = state.isRequesting;\n      this.resultsCount = state.searchResults?.data?.hits?.length || 0;\n\n      if (facets && this.selectedFilters.length === 0) {\n        this.populateFiltersFromFacets(facets);\n      }\n    });\n\n    this.autoSearchFormElement = document.querySelector(\n      'searchcraft-auto-search-form',\n    );\n    if (this.autoSearchFormElement) {\n      this.autoSearchFormElement.addEventListener(\n        'querySubmit',\n        this.handleSearchRequest,\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n\n    if (this.autoSearchFormElement) {\n      this.autoSearchFormElement.removeEventListener(\n        'querySubmit',\n        this.handleSearchRequest,\n      );\n    }\n  }\n\n  handleSearchRequest = () => {\n    this.selectedFilters = [];\n    this.searchStore.setSelectedFilters([]);\n    this.emitFiltersUpdate();\n  };\n\n  populateFiltersFromFacets(facets: Facets) {\n    const flattened = flattenFacets(facets[0]?.section || []);\n    this.dynamicFilters = flattened.map((filter) => ({\n      label: filter.label,\n      value: filter.value,\n      count: filter.count,\n      children: filter.children || [],\n    }));\n  }\n\n  handleCheckboxChange(value: string, isChecked: boolean, isParent = false) {\n    if (isParent) {\n      const parentFilter = this.dynamicFilters.find(\n        (filter) => filter.value === value,\n      );\n      const childValues =\n        parentFilter?.children?.map((child) => child.value) || [];\n\n      if (!isChecked) {\n        // Remove children from selectedFilters when parent is unchecked\n        this.selectedFilters = this.selectedFilters.filter(\n          (filter) => filter !== value && !childValues.includes(filter),\n        );\n      } else {\n        // Add parent filter to selectedFilters\n        this.selectedFilters = [...this.selectedFilters, value];\n      }\n    } else {\n      // Update selectedFilters for child filters\n      this.selectedFilters = isChecked\n        ? [...this.selectedFilters, value]\n        : this.selectedFilters.filter((filter) => filter !== value);\n    }\n    this.emitFiltersUpdate();\n  }\n\n  emitFiltersUpdate() {\n    this.filtersUpdated.emit(this.selectedFilters);\n    this.searchStore.setSelectedFilters(this.selectedFilters);\n    this.searchStore.search();\n  }\n\n  formatLabel(label: string, count: number): string {\n    return `${label.replace(/-/g, ' ').replace(/\\b\\w/g, (char) => char.toUpperCase())} (${count})`;\n  }\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n    return (\n      <div class='filtersList'>\n        {this.dynamicFilters.map((filter) => {\n          const isChildSelected = filter.children\n            ? filter.children.some((child) =>\n                this.selectedFilters.includes(child.value),\n              )\n            : false;\n\n          return (\n            <div key={filter.value} class='filterItem'>\n              <label class='checkboxLabel'>\n                <input\n                  type='checkbox'\n                  checked={this.selectedFilters.includes(filter.value)}\n                  onChange={(event: Event) =>\n                    this.handleCheckboxChange(\n                      filter.value,\n                      (event.target as HTMLInputElement).checked,\n                      true,\n                    )\n                  }\n                />\n                {isChildSelected ? (\n                  <div class='dashContainer'>\n                    <searchcraft-dash-icon />\n                  </div>\n                ) : (\n                  <div class='checkContainer'>\n                    <searchcraft-check-icon />\n                  </div>\n                )}\n                {this.formatLabel(filter.label, filter.count)}\n              </label>\n              {filter.children && filter.children.length > 0 && (\n                <div class='childrenContainer'>\n                  {filter.children.map((child) => (\n                    <label\n                      key={child.value}\n                      class='childCheckboxLabel'\n                      style={{\n                        marginLeft: '20px',\n                        display: this.selectedFilters.includes(filter.value)\n                          ? 'flex'\n                          : 'none',\n                      }}\n                    >\n                      <input\n                        type='checkbox'\n                        checked={this.selectedFilters.includes(child.value)}\n                        onChange={(event: Event) =>\n                          this.handleCheckboxChange(\n                            child.value,\n                            (event.target as HTMLInputElement).checked,\n                          )\n                        }\n                      />\n                      <div class='checkContainer'>\n                        <searchcraft-check-icon />\n                      </div>\n                      {this.formatLabel(\n                        child.label.includes('/')\n                          ? child.label.split('/').pop() || child.label\n                          : child.label,\n                        child.count,\n                      )}\n                    </label>\n                  ))}\n                </div>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"]}