@searchcraft/javascript-sdk 0.2.3 → 0.2.4

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: '544903d700810ed5d6efdefedab646cafed2376d', 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,155 @@
+import { h, } from "@stencil/core";
+import { useSearchcraftStore } from "../../provider/store";
+export class SearchcraftFiltersList {
+    constructor() {
+        this.searchStore = useSearchcraftStore.getState();
+        this.handleFilterChange = (value, checked) => {
+            if (checked) {
+                this.selectedFilters.add(value);
+            }
+            else {
+                this.selectedFilters.delete(value);
+            }
+            const selectedFiltersArray = Array.from(this.selectedFilters);
+            this.filtersUpdated.emit(selectedFiltersArray);
+            this.searchStore.setSelectedFilters(selectedFiltersArray);
+            this.searchStore.search();
+        };
+        this.filters = [];
+        this.dynamicFilters = [];
+        this.initialFilters = [];
+        this.isRequesting = false;
+        this.originalFilterCounts = {};
+        this.query = '';
+        this.resultsCount = 0;
+        this.selectedFilters = new Set();
+    }
+    connectedCallback() {
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            var _a, _b, _c, _d;
+            this.isRequesting = state.isRequesting;
+            this.query = state.query || '';
+            this.resultsCount = ((_c = (_b = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.length) || 0;
+            const facets = (_d = state.searchResults) === null || _d === void 0 ? void 0 : _d.data.facets;
+            if (facets) {
+                this.populateFiltersFromFacets(facets);
+            }
+        });
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    populateFiltersFromFacets(facets) {
+        var _a;
+        const newFilters = Object.entries(((_a = facets.section) === null || _a === void 0 ? void 0 : _a.counts) || {}).map(([key, count]) => {
+            const filterValue = key;
+            this.originalFilterCounts[filterValue] = `${count}`;
+            return {
+                label: `${key.replace(/^\//, '')} (${count})`,
+                value: filterValue,
+            };
+        });
+        // Update dynamic filters while preserving the initial filters
+        const updatedFilters = [
+            ...this.initialFilters,
+            ...newFilters.filter((filter) => !this.initialFilters.some((initial) => initial.value === filter.value)),
+        ];
+        this.dynamicFilters = updatedFilters;
+        // Store the initial filters only once
+        if (this.initialFilters.length === 0) {
+            this.initialFilters = [...updatedFilters];
+        }
+    }
+    formatLabel(label) {
+        return label
+            .replace(/-/g, ' ')
+            .split(' ')
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
+    render() {
+        if (!this.query || this.resultsCount === 0) {
+            return null;
+        }
+        const filtersToRender = this.initialFilters.map((initialFilter) => {
+            const isChecked = this.selectedFilters.has(initialFilter.value);
+            const dynamicChildren = this.dynamicFilters.filter((dynamicFilter) => dynamicFilter.value.startsWith(initialFilter.value) &&
+                dynamicFilter.value !== initialFilter.value);
+            return Object.assign(Object.assign({}, initialFilter), { isChecked, children: dynamicChildren });
+        });
+        return (h("div", { class: 'filtersList' }, filtersToRender.map((filter) => (h("div", { key: filter.value }, h("label", { class: 'checkboxLabel' }, h("input", { class: 'filterCheckbox', checked: filter.isChecked, onChange: (event) => this.handleFilterChange(filter.value, event.target.checked), type: 'checkbox', value: filter.value }), this.formatLabel(filter.label)), filter.isChecked &&
+            filter.children.map((childFilter) => {
+                const childLabel = childFilter.label.split('/').pop();
+                return (h("label", { class: 'childCheckboxLabel', key: childFilter.value, style: { marginLeft: '20px' } }, h("input", { class: 'childFilterCheckbox', checked: this.selectedFilters.has(childFilter.value), onChange: (event) => this.handleFilterChange(childFilter.value, event.target.checked), type: 'checkbox', value: childFilter.value }), this.formatLabel(childLabel || '')));
+            }))))));
+    }
+    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": {},
+            "initialFilters": {},
+            "isRequesting": {},
+            "originalFilterCounts": {},
+            "query": {},
+            "resultsCount": {},
+            "selectedFilters": {}
+        };
+    }
+    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\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<{ label: string; value: string }> = [];\n  @State() initialFilters: Array<{ label: string; value: string }> = [];\n  @State() isRequesting = false;\n  @State() originalFilterCounts: Record<string, string> = {};\n  @State() query = '';\n  @State() resultsCount = 0;\n  @State() selectedFilters: Set<string> = new Set();\n\n  private searchStore = useSearchcraftStore.getState();\n  unsubscribe: () => void;\n\n  connectedCallback() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.isRequesting = state.isRequesting;\n      this.query = state.query || '';\n      this.resultsCount = state.searchResults?.data?.hits?.length || 0;\n\n      const facets = state.searchResults?.data.facets;\n      if (facets) {\n        this.populateFiltersFromFacets(facets);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  populateFiltersFromFacets(facets: Facets) {\n    const newFilters = Object.entries(facets.section?.counts || {}).map(\n      ([key, count]) => {\n        const filterValue = key;\n        this.originalFilterCounts[filterValue] = `${count}`;\n        return {\n          label: `${key.replace(/^\\//, '')} (${count})`,\n          value: filterValue,\n        };\n      },\n    );\n\n    // Update dynamic filters while preserving the initial filters\n    const updatedFilters = [\n      ...this.initialFilters,\n      ...newFilters.filter(\n        (filter) =>\n          !this.initialFilters.some(\n            (initial) => initial.value === filter.value,\n          ),\n      ),\n    ];\n\n    this.dynamicFilters = updatedFilters;\n\n    // Store the initial filters only once\n    if (this.initialFilters.length === 0) {\n      this.initialFilters = [...updatedFilters];\n    }\n  }\n\n  handleFilterChange = (value: string, checked: boolean) => {\n    if (checked) {\n      this.selectedFilters.add(value);\n    } else {\n      this.selectedFilters.delete(value);\n    }\n\n    const selectedFiltersArray = Array.from(this.selectedFilters);\n\n    this.filtersUpdated.emit(selectedFiltersArray);\n    this.searchStore.setSelectedFilters(selectedFiltersArray);\n    this.searchStore.search();\n  };\n\n  formatLabel(label: string): string {\n    return label\n      .replace(/-/g, ' ')\n      .split(' ')\n      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n      .join(' ');\n  }\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n\n    const filtersToRender = this.initialFilters.map((initialFilter) => {\n      const isChecked = this.selectedFilters.has(initialFilter.value);\n      const dynamicChildren = this.dynamicFilters.filter(\n        (dynamicFilter) =>\n          dynamicFilter.value.startsWith(initialFilter.value) &&\n          dynamicFilter.value !== initialFilter.value, // Exclude parent itself\n      );\n      return {\n        ...initialFilter,\n        isChecked,\n        children: dynamicChildren,\n      };\n    });\n\n    return (\n      <div class='filtersList'>\n        {filtersToRender.map((filter) => (\n          <div key={filter.value}>\n            {/* Render the parent filter */}\n            <label class='checkboxLabel'>\n              <input\n                class='filterCheckbox'\n                checked={filter.isChecked}\n                onChange={(event: Event) =>\n                  this.handleFilterChange(\n                    filter.value,\n                    (event.target as HTMLInputElement).checked,\n                  )\n                }\n                type='checkbox'\n                value={filter.value}\n              />\n              {this.formatLabel(filter.label)}\n            </label>\n            {filter.isChecked &&\n              filter.children.map((childFilter) => {\n                const childLabel = childFilter.label.split('/').pop();\n                return (\n                  <label\n                    class='childCheckboxLabel'\n                    key={childFilter.value}\n                    style={{ marginLeft: '20px' }}\n                  >\n                    <input\n                      class='childFilterCheckbox'\n                      checked={this.selectedFilters.has(childFilter.value)}\n                      onChange={(event: Event) =>\n                        this.handleFilterChange(\n                          childFilter.value,\n                          (event.target as HTMLInputElement).checked,\n                        )\n                      }\n                      type='checkbox'\n                      value={childFilter.value}\n                    />\n                    {this.formatLabel(childLabel || '')}\n                  </label>\n                );\n              })}\n          </div>\n        ))}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-filters-list/searchcraft-filters-list.module.css

@@ -0,0 +1,70 @@
+@charset "UTF-8";
+.filtersList {
+  width: 100%;
+}
+
+.checkboxLabel {
+  align-items: center;
+  color: #292929;
+  display: flex;
+  font-family: "Source Sans Pro";
+  font-size: 14px;
+  font-weight: 600;
+  gap: 14px;
+}
+
+.checkboxLabel input[type=checkbox] {
+  align-items: center;
+  appearance: none;
+  background-color: #EDEDED;
+  border: 1px solid #D9D9D9;
+  cursor: pointer;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+
+.checkboxLabel input[type=checkbox]:checked {
+  background-color: #000;
+}
+
+.checkboxLabel input[type=checkbox]:checked::before {
+  color: #fff;
+  content: "✔";
+}
+
+.remainingFilterListCheckbox {
+  margin-left: 16px;
+}
+
+.childCheckboxLabel {
+  align-items: center;
+  color: #292929;
+  display: flex;
+  font-family: "Source Sans Pro";
+  font-size: 14px;
+  font-weight: 600;
+  gap: 12px;
+}
+
+.childCheckboxLabel input[type=checkbox] {
+  align-items: center;
+  appearance: none;
+  background-color: #EDEDED;
+  border: 1px solid #D9D9D9;
+  cursor: pointer;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+
+.childCheckboxLabel input[type=checkbox]:checked {
+  background-color: #000;
+}
+
+.childCheckboxLabel input[type=checkbox]:checked::before {
+  color: #fff;
+  content: "✔";
+}