@searchcraft/javascript-sdk 0.3.1 → 0.4.0

package/dist/components/searchcraft-base-search-results.js

@@ -1,11 +1,10 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-6b353c3e.js';
-import { c as classNames } from './p-5cdc6210.js';
-import { u as useSearchcraftStore } from './p-727bfc38.js';
-import { a as parseSearchKeys, s as serializeStyles, e as extractDynamicProperties, g as getFormattedTimeFromNow } from './p-62c40862.js';
-import { d as defineCustomElement$3 } from './p-cd9a038a.js';
-import { d as defineCustomElement$2 } from './p-5015a359.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-5639be85.js';
+import { u as useSearchcraftStore } from './p-be63dcac.js';
+import { g as getDocumentValueFromSearchResultMapping, s as serializeStyles } from './p-0deddac7.js';
+import { d as defineCustomElement$3 } from './p-b1a59f07.js';
+import { d as defineCustomElement$2 } from './p-ace4e6a0.js';
 
-const searchcraftBaseSearchResultsModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.resultsContainer{display:flex;flex-direction:column;justify-content:center;margin:16px 0}.resultsContainer>p{align-self:center}.resultsContainer>div{margin-bottom:20px}.resultsContainer>div img{height:300px;width:200px}.adSection{align-items:center;background-color:#F1F1F1;border:1px solid #DCDDDE;border-radius:16px;display:flex;flex-direction:column;font-size:16px;justify-content:center;margin:auto;min-height:150px;text-align:center;width:100%}.adSection p{margin-top:5px}.emptyState{text-align:center;width:100%}.errorMessageContainer{text-align:center}";
+const searchcraftBaseSearchResultsModuleCss = ":root{--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}: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{--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}.searchcraft-search-results-container{display:flex;flex-direction:column;justify-content:center;gap:16px}.searchcraft-ad-section{align-items:center;background-color:#F1F1F1;border-radius:16px;display:flex;flex-direction:column;font-size:16px;justify-content:center;min-height:176px;text-align:center}.searchcraft-ad-section p{margin:0;color:var(--sc-content-disabled)}.searchcraft-search-results-empty-state-container{text-align:center}.searchcraft-search-results-error-message-container{text-align:center}";
 const SearchcraftBaseSearchResultsStyle0 = searchcraftBaseSearchResultsModuleCss;
 
 const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftBaseSearchResults extends H {
@@ -13,25 +12,39 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
         super();
         this.__registerHost();
         this.noResults = createEvent(this, "noResults", 7);
+        this.parseSearchResultMappings = (mappingString) => {
+            if (mappingString) {
+                try {
+                    this.parsedMappings = JSON.parse(this.searchResultMappings);
+                }
+                catch (_a) {
+                    console.error('Error: Invalid searchResultsMappings passed to searchcraft-base-search-results.');
+                }
+            }
+        };
         this.adInterval = 4;
-        this.customStylesForResults = {};
-        this.documentAttributesForDisplay = '';
-        this.fallbackElement = null;
-        this.formatTime = true;
+        this.customStylesForResults = undefined;
+        this.searchResultMappings = undefined;
         this.placeAdAtEnd = false;
         this.placeAdAtStart = true;
-        this.placeResultImageRight = false;
-        this.isInteractive = false;
+        this.resultImagePlacement = 'right';
+        this.buttonLabel = undefined;
+        this.buttonTarget = '_blank';
+        this.buttonRel = undefined;
+        this.containerTarget = '_blank';
+        this.containerRel = undefined;
         this.hasSearched = false;
         this.query = '';
         this.searchResults = null;
+        this.parsedMappings = undefined;
+    }
+    onItemsChange(searchResultMappings) {
+        this.parseSearchResultMappings(searchResultMappings);
+    }
+    connectedCallback() {
+        this.parseSearchResultMappings(this.searchResultMappings);
     }
     componentDidLoad() {
-        if (!this.documentAttributesForDisplay ||
-            this.documentAttributesForDisplay.length === 0) {
-            console.warn('No document attributes provided; using empty keys array.');
-            this.documentAttributesForDisplay = '';
-        }
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
             if (state.query.length > 0) {
                 this.hasSearched = true;
@@ -51,72 +64,81 @@ const SearchcraftBaseSearchResults$1 = /*@__PURE__*/ proxyCustomElement(class Se
             this.unsubscribe();
         }
     }
+    renderDocument(document, index) {
+        /**
+         * Index field values -> Result container props mappings.
+         */
+        const titleContent = getDocumentValueFromSearchResultMapping(document, this.parsedMappings.title);
+        const subtitleContent = getDocumentValueFromSearchResultMapping(document, this.parsedMappings.subtitle);
+        const bodyContent = getDocumentValueFromSearchResultMapping(document, this.parsedMappings.body);
+        const containerHref = getDocumentValueFromSearchResultMapping(document, this.parsedMappings.containerHref);
+        const buttonHref = getDocumentValueFromSearchResultMapping(document, this.parsedMappings.buttonHref);
+        const imageSource = getDocumentValueFromSearchResultMapping(document, this.parsedMappings.imageSource);
+        const footerContent = getDocumentValueFromSearchResultMapping(document, this.parsedMappings.footer);
+        const serializedStyles = typeof this.customStylesForResults === 'string'
+            ? this.customStylesForResults
+            : serializeStyles(this.customStylesForResults);
+        return (h("searchcraft-base-search-result", { key: `${document.document_id}-${index}`, "custom-styles": serializedStyles, "image-placement": this.resultImagePlacement, "container-rel": this.containerRel, "container-target": this.containerTarget, "button-label": this.buttonLabel || 'View more', "button-rel": this.buttonRel, "button-target": this.buttonTarget, "document-position": index, "title-content": titleContent, "subtitle-content": subtitleContent, "body-content": bodyContent, "footer-content": footerContent, "container-href": containerHref, "button-href": buttonHref, "image-src": imageSource }));
+    }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        if (!this.hasSearched) {
-            return (h("div", { class: classNames('emptyState', 'searchcraft-search-results-empty-state-container') }, h("slot", { name: 'empty-search' })));
+        if (this.query.trim() === '') {
+            return (h("div", { class: 'searchcraft-search-results-empty-state-container' }, h("slot", { name: 'empty-search' })));
         }
         if (!((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data)) {
             return;
         }
-        const parsedSearchKeys = parseSearchKeys(this.documentAttributesForDisplay);
-        const serializedStyles = typeof this.customStylesForResults === 'string'
-            ? this.customStylesForResults
-            : serializeStyles(this.customStylesForResults);
-        const resultsComponents = (_d = (_c = (_b = this.searchResults) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.hits) === null || _d === void 0 ? void 0 : _d.map((document, index) => {
-            const { doc: result } = document;
-            const dynamicProperties = extractDynamicProperties(result, parsedSearchKeys);
-            if (this.formatTime) {
-                for (const key of parsedSearchKeys) {
-                    if (dynamicProperties[key]) {
-                        const value = dynamicProperties[key];
-                        if (typeof value === 'string' &&
-                            !Number.isNaN(Date.parse(value))) {
-                            dynamicProperties[key] = getFormattedTimeFromNow(value);
-                        }
-                    }
-                }
-            }
-            return (h("searchcraft-base-search-result", { "button-callback": () => console.log('button callback'), "custom-styles": serializedStyles, "image-source": dynamicProperties[parsedSearchKeys[5]], "is-interactive": this.isInteractive, key: `${document.document_id}-${index}`, "keydown-callback": () => console.log('keydown'), linkHref: dynamicProperties[parsedSearchKeys[6]], "place-image-right": this.placeResultImageRight, "primary-content": dynamicProperties[parsedSearchKeys[2]], "result-callback": () => console.log('interactive element'), "secondary-content": dynamicProperties[parsedSearchKeys[3]], "subtitle-content": dynamicProperties[parsedSearchKeys[1]], "tertiary-content": dynamicProperties[parsedSearchKeys[4]], "title-content": dynamicProperties[parsedSearchKeys[0]], "document-position": index }));
+        const documents = (_d = (_c = (_b = this.searchResults) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.hits) === null || _d === void 0 ? void 0 : _d.map((data, _index) => {
+            const { doc: result } = data;
+            return result;
         });
         const finalComponents = [];
         if (this.placeAdAtStart) {
-            finalComponents.push(h("div", { key: 'ad-section-start', class: classNames('adSection', 'searchcraft-beginning-injected-ad-section') }, h("span", null, "##"), h("p", null, " Ad Impressions")));
+            finalComponents.push(h("div", { key: 'ad-section-start', class: 'searchcraft-ad-section' }, h("p", null, "Ad Section")));
         }
         if (this.adInterval > 0) {
-            resultsComponents.forEach((component, index) => {
-                finalComponents.push(component);
+            documents.forEach((document, index) => {
+                finalComponents.push(this.renderDocument(document, index));
                 if ((index + 1) % this.adInterval === 0) {
-                    finalComponents.push(h("div", { key: `ad-section-${index + 1}`, class: classNames('adSection', 'searchcraft-dynamic-injected-ad-section') }, h("span", null, "##"), h("p", null, " Ad Impressions")));
+                    finalComponents.push(h("div", { key: `ad-section-${index + 1}`, class: 'searchcraft-ad-section ' }, h("p", null, "Ad Section")));
                 }
             });
         }
         else {
-            finalComponents.push(...resultsComponents);
+            const documentElements = documents.map((document, index) => this.renderDocument(document, index));
+            finalComponents.push(...documentElements);
         }
         if (this.placeAdAtEnd) {
-            finalComponents.push(h("div", { key: 'ad-section-end', class: classNames('adSection', 'searchcraft-end-injected-ad-section') }, h("span", null, "##"), h("p", null, " Ad Impressions")));
+            finalComponents.push(h("div", { key: 'ad-section-end', class: 'searchcraft-ad-section' }, h("p", null, "Ad Section")));
         }
         if (this.query.length > 0 && ((_g = (_f = (_e = this.searchResults) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.hits) === null || _g === void 0 ? void 0 : _g.length) === 0) {
             this.noResults.emit();
         }
-        return (h("div", { class: classNames('resultsContainer', 'searchcraft-search-results-container') }, finalComponents, this.query.length > 0 &&
-            ((_k = (_j = (_h = this.searchResults) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.hits) === null || _k === void 0 ? void 0 : _k.length) === 0 && (h("div", { class: classNames('errorMessageContainer', 'searchcraft-search-results-error-message-container') }, h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` })))));
+        return (h("div", { class: 'searchcraft-search-results-container' }, finalComponents, this.query.length > 0 &&
+            ((_k = (_j = (_h = this.searchResults) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.hits) === null || _k === void 0 ? void 0 : _k.length) === 0 && (h("div", { class: 'searchcraft-search-results-error-message-container' }, h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` })))));
     }
+    static get watchers() { return {
+        "searchResultMappings": ["onItemsChange"]
+    }; }
     static get style() { return SearchcraftBaseSearchResultsStyle0; }
 }, [4, "searchcraft-base-search-results", {
         "adInterval": [2, "ad-interval"],
         "customStylesForResults": [1, "custom-styles-for-results"],
-        "documentAttributesForDisplay": [1, "document-attributes-for-display"],
-        "fallbackElement": [16],
-        "formatTime": [4, "format-time"],
+        "searchResultMappings": [1, "search-result-mappings"],
         "placeAdAtEnd": [4, "place-ad-at-end"],
         "placeAdAtStart": [4, "place-ad-at-start"],
-        "placeResultImageRight": [4, "place-result-image-right"],
-        "isInteractive": [4, "is-interactive"],
+        "resultImagePlacement": [1, "result-image-placement"],
+        "buttonLabel": [1, "button-label"],
+        "buttonTarget": [1, "button-target"],
+        "buttonRel": [1, "button-rel"],
+        "containerTarget": [1, "container-target"],
+        "containerRel": [1, "container-rel"],
         "hasSearched": [32],
         "query": [32],
-        "searchResults": [32]
+        "searchResults": [32],
+        "parsedMappings": [32]
+    }, undefined, {
+        "searchResultMappings": ["onItemsChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/searchcraft-base-search-results.js.map

@@ -1 +1 @@
-{"file":"searchcraft-base-search-results.js","mappings":"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","names":["SearchcraftBaseSearchResults"],"sources":["src/components/searchcraft-base-search-results/searchcraft-base-search-results.module.scss?tag=searchcraft-base-search-results","src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"sourcesContent":[":root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.resultsContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin: 16px 0;\n\n  & > p {\n    align-self: center;\n  }\n\n  & > div {\n    margin-bottom: 20px;\n    img {\n      height: 300px;\n      width: 200px;\n    }\n  }\n}\n\n.adSection {\n  align-items: center;\n  background-color: #F1F1F1;\n  border: 1px solid #DCDDDE;\n  border-radius: 16px;\n  display: flex;\n  flex-direction: column;\n  font-size: 16px;\n  justify-content: center;\n  margin: auto;\n  min-height: 150px;\n  text-align: center;\n  width: 100%;\n\n  p {\n    margin-top: 5px;\n  }\n}\n\n.emptyState {\n  text-align: center;\n  width: 100%;\n}\n\n.errorMessageContainer {\n  text-align: center;\n}\n","import {\n  Component,\n  h,\n  Event,\n  Prop,\n  State,\n  type EventEmitter,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport {\n  extractDynamicProperties,\n  getFormattedTimeFromNow,\n  parseSearchKeys,\n  serializeStyles,\n} from '@utils/utils';\n\n@Component({\n  tag: 'searchcraft-base-search-results',\n  styleUrl: 'searchcraft-base-search-results.module.scss',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchResults {\n  @Prop() adInterval = 4;\n  @Prop() customStylesForResults:\n    | string\n    | Record<string, Record<string, string>> = {};\n  @Prop() documentAttributesForDisplay = '';\n  @Prop() fallbackElement: HTMLElement | null = null;\n  @Prop() formatTime = true;\n  @Prop() placeAdAtEnd = false;\n  @Prop() placeAdAtStart = true;\n  @Prop() placeResultImageRight = false;\n  @Prop() isInteractive = false;\n\n  @Event() noResults: EventEmitter<void>;\n\n  @State() hasSearched = false;\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  private unsubscribe: () => void;\n\n  componentDidLoad() {\n    if (\n      !this.documentAttributesForDisplay ||\n      this.documentAttributesForDisplay.length === 0\n    ) {\n      console.warn('No document attributes provided; using empty keys array.');\n      this.documentAttributesForDisplay = '';\n    }\n\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (state.query.length > 0) {\n        this.hasSearched = true;\n      } else {\n        this.hasSearched = false;\n      }\n      this.searchResults = { ...state.searchResults };\n      this.query = state.query;\n    });\n\n    const { searchResults, query } = useSearchcraftStore.getState();\n    this.searchResults = searchResults;\n    this.query = query;\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.hasSearched) {\n      return (\n        <div\n          class={classNames(\n            'emptyState',\n            'searchcraft-search-results-empty-state-container',\n          )}\n        >\n          <slot name='empty-search' />\n        </div>\n      );\n    }\n\n    if (!this.searchResults?.data) {\n      return;\n    }\n\n    const parsedSearchKeys = parseSearchKeys(this.documentAttributesForDisplay);\n    const serializedStyles =\n      typeof this.customStylesForResults === 'string'\n        ? this.customStylesForResults\n        : serializeStyles(this.customStylesForResults);\n\n    const resultsComponents = this.searchResults?.data?.hits?.map(\n      (document, index) => {\n        const { doc: result } = document;\n        const dynamicProperties = extractDynamicProperties(\n          result,\n          parsedSearchKeys,\n        );\n\n        if (this.formatTime) {\n          for (const key of parsedSearchKeys) {\n            if (dynamicProperties[key]) {\n              const value = dynamicProperties[key];\n              if (\n                typeof value === 'string' &&\n                !Number.isNaN(Date.parse(value))\n              ) {\n                dynamicProperties[key] = getFormattedTimeFromNow(value);\n              }\n            }\n          }\n        }\n\n        return (\n          <searchcraft-base-search-result\n            button-callback={() => console.log('button callback')}\n            custom-styles={serializedStyles}\n            image-source={dynamicProperties[parsedSearchKeys[5]]}\n            is-interactive={this.isInteractive}\n            key={`${document.document_id}-${index}`}\n            keydown-callback={() => console.log('keydown')}\n            linkHref={dynamicProperties[parsedSearchKeys[6]] as string}\n            place-image-right={this.placeResultImageRight}\n            primary-content={dynamicProperties[parsedSearchKeys[2]]}\n            result-callback={() => console.log('interactive element')}\n            secondary-content={dynamicProperties[parsedSearchKeys[3]]}\n            subtitle-content={dynamicProperties[parsedSearchKeys[1]]}\n            tertiary-content={dynamicProperties[parsedSearchKeys[4]]}\n            title-content={dynamicProperties[parsedSearchKeys[0]]}\n            document-position={index}\n          />\n        );\n      },\n    );\n\n    const finalComponents: JSX.Element[] = [];\n\n    if (this.placeAdAtStart) {\n      finalComponents.push(\n        <div\n          key='ad-section-start'\n          class={classNames(\n            'adSection',\n            'searchcraft-beginning-injected-ad-section',\n          )}\n        >\n          <span>##</span>\n          <p> Ad Impressions</p>\n        </div>,\n      );\n    }\n\n    if (this.adInterval > 0) {\n      resultsComponents.forEach((component, index) => {\n        finalComponents.push(component);\n        if ((index + 1) % this.adInterval === 0) {\n          finalComponents.push(\n            <div\n              key={`ad-section-${index + 1}`}\n              class={classNames(\n                'adSection',\n                'searchcraft-dynamic-injected-ad-section',\n              )}\n            >\n              <span>##</span>\n              <p> Ad Impressions</p>\n            </div>,\n          );\n        }\n      });\n    } else {\n      finalComponents.push(...resultsComponents);\n    }\n\n    if (this.placeAdAtEnd) {\n      finalComponents.push(\n        <div\n          key='ad-section-end'\n          class={classNames('adSection', 'searchcraft-end-injected-ad-section')}\n        >\n          <span>##</span>\n          <p> Ad Impressions</p>\n        </div>,\n      );\n    }\n\n    if (this.query.length > 0 && this.searchResults?.data?.hits?.length === 0) {\n      this.noResults.emit();\n    }\n\n    return (\n      <div\n        class={classNames(\n          'resultsContainer',\n          'searchcraft-search-results-container',\n        )}\n      >\n        {finalComponents}\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <div\n              class={classNames(\n                'errorMessageContainer',\n                'searchcraft-search-results-error-message-container',\n              )}\n            >\n              <searchcraft-error-message\n                error-message={`No search results found for \"${this.query}\" query`}\n              />\n            </div>\n          )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"searchcraft-base-search-results.js","mappings":"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","names":["SearchcraftBaseSearchResults"],"sources":["src/components/searchcraft-base-search-results/searchcraft-base-search-results.module.scss?tag=searchcraft-base-search-results","src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"sourcesContent":[".searchcraft-search-results-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 16px;\n}\n\n.searchcraft-ad-section {\n  align-items: center;\n  background-color: #F1F1F1;\n  border-radius: 16px;\n  display: flex;\n  flex-direction: column;\n  font-size: 16px;\n  justify-content: center;\n  min-height: 176px;\n  text-align: center;\n\n  p {\n    margin: 0;\n    color: var(--sc-content-disabled);\n  }\n}\n\n.searchcraft-search-results-empty-state-container {\n  text-align: center;\n}\n\n.searchcraft-search-results-error-message-container {\n  text-align: center;\n}\n","import {\n  Component,\n  h,\n  Event,\n  Prop,\n  State,\n  type EventEmitter,\n  Watch,\n} from '@stencil/core';\n\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport {\n  getDocumentValueFromSearchResultMapping,\n  serializeStyles,\n} from '@utils/utils';\nimport type { SearchResultMappings } from 'types';\n\n@Component({\n  tag: 'searchcraft-base-search-results',\n  styleUrl: 'searchcraft-base-search-results.module.scss',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchResults {\n  @Prop() adInterval = 4;\n  @Prop() customStylesForResults:\n    | string\n    | Record<string, Record<string, string>>\n    | undefined;\n  @Prop() searchResultMappings: string | undefined;\n  @Prop() placeAdAtEnd = false;\n  @Prop() placeAdAtStart = true;\n  @Prop() resultImagePlacement: 'left' | 'right' = 'right';\n  @Prop() buttonLabel: string | undefined;\n  @Prop() buttonTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  @Prop() buttonRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n  @Prop() containerTarget: '_blank' | '_self' | '_top' | '_parent' = '_blank';\n  @Prop() containerRel: 'noreferrer' | 'noopener' | 'nofollow' | undefined;\n\n  @Event() noResults: EventEmitter<void>;\n\n  @State() hasSearched = false;\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n  /** The parsed `searchResultMappings` prop.  */\n  @State() parsedMappings: SearchResultMappings | undefined;\n\n  private unsubscribe: () => void;\n\n  private parseSearchResultMappings = (mappingString: string | undefined) => {\n    if (mappingString) {\n      try {\n        this.parsedMappings = JSON.parse(\n          this.searchResultMappings,\n        ) as SearchResultMappings;\n      } catch {\n        console.error(\n          'Error: Invalid searchResultsMappings passed to searchcraft-base-search-results.',\n        );\n      }\n    }\n  };\n\n  @Watch('searchResultMappings')\n  onItemsChange(searchResultMappings: string) {\n    this.parseSearchResultMappings(searchResultMappings);\n  }\n\n  connectedCallback() {\n    this.parseSearchResultMappings(this.searchResultMappings);\n  }\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (state.query.length > 0) {\n        this.hasSearched = true;\n      } else {\n        this.hasSearched = false;\n      }\n      this.searchResults = { ...state.searchResults };\n      this.query = state.query;\n    });\n\n    const { searchResults, query } = useSearchcraftStore.getState();\n    this.searchResults = searchResults;\n    this.query = query;\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  renderDocument(document: Record<string, unknown>, index: number) {\n    /**\n     * Index field values -> Result container props mappings.\n     */\n    const titleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.parsedMappings.title,\n    );\n    const subtitleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.parsedMappings.subtitle,\n    );\n    const bodyContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.parsedMappings.body,\n    );\n    const containerHref = getDocumentValueFromSearchResultMapping(\n      document,\n      this.parsedMappings.containerHref,\n    );\n    const buttonHref = getDocumentValueFromSearchResultMapping(\n      document,\n      this.parsedMappings.buttonHref,\n    );\n    const imageSource = getDocumentValueFromSearchResultMapping(\n      document,\n      this.parsedMappings.imageSource,\n    );\n    const footerContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.parsedMappings.footer,\n    );\n\n    const serializedStyles =\n      typeof this.customStylesForResults === 'string'\n        ? this.customStylesForResults\n        : serializeStyles(this.customStylesForResults);\n\n    return (\n      <searchcraft-base-search-result\n        key={`${document.document_id}-${index}`}\n        custom-styles={serializedStyles}\n        image-placement={this.resultImagePlacement}\n        container-rel={this.containerRel}\n        container-target={this.containerTarget}\n        button-label={this.buttonLabel || 'View more'}\n        button-rel={this.buttonRel}\n        button-target={this.buttonTarget}\n        document-position={index}\n        title-content={titleContent}\n        subtitle-content={subtitleContent}\n        body-content={bodyContent}\n        footer-content={footerContent}\n        container-href={containerHref}\n        button-href={buttonHref}\n        image-src={imageSource}\n      />\n    );\n  }\n\n  render() {\n    if (this.query.trim() === '') {\n      return (\n        <div class='searchcraft-search-results-empty-state-container'>\n          <slot name='empty-search' />\n        </div>\n      );\n    }\n\n    if (!this.searchResults?.data) {\n      return;\n    }\n\n    const documents: Record<string, unknown>[] =\n      this.searchResults?.data?.hits?.map((data, _index) => {\n        const { doc: result } = data;\n        return result;\n      });\n\n    const finalComponents: JSX.Element[] = [];\n\n    if (this.placeAdAtStart) {\n      finalComponents.push(\n        <div key='ad-section-start' class='searchcraft-ad-section'>\n          <p>Ad Section</p>\n        </div>,\n      );\n    }\n\n    if (this.adInterval > 0) {\n      documents.forEach((document, index) => {\n        finalComponents.push(this.renderDocument(document, index));\n\n        if ((index + 1) % this.adInterval === 0) {\n          finalComponents.push(\n            <div\n              key={`ad-section-${index + 1}`}\n              class='searchcraft-ad-section '\n            >\n              <p>Ad Section</p>\n            </div>,\n          );\n        }\n      });\n    } else {\n      const documentElements = documents.map((document, index) =>\n        this.renderDocument(document, index),\n      );\n      finalComponents.push(...documentElements);\n    }\n\n    if (this.placeAdAtEnd) {\n      finalComponents.push(\n        <div key='ad-section-end' class='searchcraft-ad-section'>\n          <p>Ad Section</p>\n        </div>,\n      );\n    }\n\n    if (this.query.length > 0 && this.searchResults?.data?.hits?.length === 0) {\n      this.noResults.emit();\n    }\n\n    return (\n      <div class='searchcraft-search-results-container'>\n        {finalComponents}\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <div class='searchcraft-search-results-error-message-container'>\n              <searchcraft-error-message\n                error-message={`No search results found for \"${this.query}\" query`}\n              />\n            </div>\n          )}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-6b353c3e.js';
+import { p as proxyCustomElement, H, h } from './p-5639be85.js';
 
 const SearchcraftButtonIcon$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftButtonIcon extends H {
     constructor() {

package/dist/components/searchcraft-button.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftButton$1, d as defineCustomElement$1 } from './p-7d385ffb.js';
+import { S as SearchcraftButton$1, d as defineCustomElement$1 } from './p-37f54c0b.js';
 
 const SearchcraftButton = SearchcraftButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-check-icon.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftCheckIcon$1, d as defineCustomElement$1 } from './p-bbf9973a.js';
+import { S as SearchcraftCheckIcon$1, d as defineCustomElement$1 } from './p-04d13314.js';
 
 const SearchcraftCheckIcon = SearchcraftCheckIcon$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-clear-icon-set.js

@@ -1,4 +1,42 @@
-import { S as SearchcraftClearIconSet$1, d as defineCustomElement$1 } from './p-62e6b69c.js';
+import { p as proxyCustomElement, H, h } from './p-5639be85.js';
+
+const SearchcraftClearIconSet$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftClearIconSet extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.type = 'clear-light';
+    }
+    render() {
+        switch (this.type) {
+            case 'clear-light':
+                return (h("svg", { width: '22', height: '22', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { id: 'icon-title' }, "Searchcraft Clear Input Icon Light"), h("path", { d: 'M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z', stroke: 'black', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })));
+            case 'clear-dark':
+                return (h("svg", { width: '22', height: '22', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { id: 'icon-title' }, "Searchcraft Clear Input Icon Dark"), h("path", { d: 'M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z', stroke: 'white', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })));
+            case 'arrow-light':
+                return (h("svg", { width: '20', height: '21', viewBox: '0 0 20 21', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { id: 'icon-title' }, "Searchcraft Arrow Right Icon Light"), h("path", { d: 'M7.5 15.0444L12.5 10.0444L7.5 5.04443', stroke: '#737373', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })));
+            case 'arrow-dark':
+                return (h("svg", { width: '8', height: '12', viewBox: '0 0 8 12', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { id: 'icon-title' }, "Searchcraft Arrow Right Icon Dark"), h("path", { d: 'M1.5 11L6.5 6L1.5 1', stroke: '#BFBFBF', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })));
+            default:
+                return null;
+        }
+    }
+}, [1, "searchcraft-clear-icon-set", {
+        "type": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-clear-icon-set"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-clear-icon-set":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftClearIconSet$1);
+            }
+            break;
+    } });
+}
 
 const SearchcraftClearIconSet = SearchcraftClearIconSet$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-clear-icon-set.js.map

@@ -1 +1 @@
-{"file":"searchcraft-clear-icon-set.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"searchcraft-clear-icon-set.js","mappings":";;MAMaA,yBAAuB;;;;;oBAMhC,aAAa;;IAEf,MAAM;QACJ,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,aAAa;gBAChB,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,aAAO,EAAE,EAAC,YAAY,yCAA2C,EACjE,YACE,CAAC,EAAC,uIAAuI,EACzI,MAAM,EAAC,OAAO,kBACD,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,YAAY;gBACf,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,aAAO,EAAE,EAAC,YAAY,wCAA0C,EAChE,YACE,CAAC,EAAC,uIAAuI,EACzI,MAAM,EAAC,OAAO,kBACD,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,aAAa;gBAChB,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,aAAO,EAAE,EAAC,YAAY,yCAA2C,EACjE,YACE,CAAC,EAAC,uCAAuC,EACzC,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,YAAY;gBACf,QACE,WACE,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,aAAO,EAAE,EAAC,YAAY,wCAA0C,EAChE,YACE,CAAC,EAAC,qBAAqB,EACvB,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YAEJ;gBACE,OAAO,IAAI,CAAC;SACf;KACF;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftClearIconSet"],"sources":["src/assets/searchcraft-clear-icon-set.tsx"],"sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-clear-icon-set',\n  shadow: true,\n})\nexport class SearchcraftClearIconSet {\n  /**\n   * Type of the icon to display.\n   * Options: 'clear-light', 'clear-dark', 'arrow-light', 'arrow-dark'\n   */\n  @Prop() type: 'clear-light' | 'clear-dark' | 'arrow-light' | 'arrow-dark' =\n    'clear-light';\n\n  render() {\n    switch (this.type) {\n      case 'clear-light':\n        return (\n          <svg\n            width='22'\n            height='22'\n            viewBox='0 0 22 22'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='icon-title'\n          >\n            <title id='icon-title'>Searchcraft Clear Input Icon Light</title>\n            <path\n              d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n              stroke='black'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'clear-dark':\n        return (\n          <svg\n            width='22'\n            height='22'\n            viewBox='0 0 22 22'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='icon-title'\n          >\n            <title id='icon-title'>Searchcraft Clear Input Icon Dark</title>\n            <path\n              d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n              stroke='white'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'arrow-light':\n        return (\n          <svg\n            width='20'\n            height='21'\n            viewBox='0 0 20 21'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='icon-title'\n          >\n            <title id='icon-title'>Searchcraft Arrow Right Icon Light</title>\n            <path\n              d='M7.5 15.0444L12.5 10.0444L7.5 5.04443'\n              stroke='#737373'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'arrow-dark':\n        return (\n          <svg\n            width='8'\n            height='12'\n            viewBox='0 0 8 12'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='icon-title'\n          >\n            <title id='icon-title'>Searchcraft Arrow Right Icon Dark</title>\n            <path\n              d='M1.5 11L6.5 6L1.5 1'\n              stroke='#BFBFBF'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n\n      default:\n        return null;\n    }\n  }\n}\n"],"version":3}

package/dist/components/searchcraft-dash-icon.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftDashIcon$1, d as defineCustomElement$1 } from './p-aad03c2a.js';
+import { S as SearchcraftDashIcon$1, d as defineCustomElement$1 } from './p-de50441f.js';
 
 const SearchcraftDashIcon = SearchcraftDashIcon$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { S as SearchcraftErrorMessage$1, d as defineCustomElement$1 } from './p-5015a359.js';
+import { S as SearchcraftErrorMessage$1, d as defineCustomElement$1 } from './p-ace4e6a0.js';
 
 const SearchcraftErrorMessage = SearchcraftErrorMessage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-facet-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SearchcraftFacetList extends Components.SearchcraftFacetList, HTMLElement {}
+export const SearchcraftFacetList: {
+    prototype: SearchcraftFacetList;
+    new (): SearchcraftFacetList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,8 @@
+import { S as SearchcraftFiltersList, d as defineCustomElement$1 } from './p-68897c11.js';
+
+const SearchcraftFacetList = SearchcraftFiltersList;
+const defineCustomElement = defineCustomElement$1;
+
+export { SearchcraftFacetList, defineCustomElement };
+
+//# sourceMappingURL=searchcraft-facet-list.js.map

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

@@ -0,0 +1 @@
+{"file":"searchcraft-facet-list.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/searchcraft-filter-panel.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SearchcraftFilterPanel extends Components.SearchcraftFilterPanel, HTMLElement {}
+export const SearchcraftFilterPanel: {
+    prototype: SearchcraftFilterPanel;
+    new (): SearchcraftFilterPanel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/searchcraft-filter-panel.js

@@ -0,0 +1,184 @@
+import { p as proxyCustomElement, H, h } from './p-5639be85.js';
+import { u as useSearchcraftStore } from './p-be63dcac.js';
+import { a as getMillis } from './p-0deddac7.js';
+import { d as defineCustomElement$6 } from './p-04d13314.js';
+import { d as defineCustomElement$5 } from './p-de50441f.js';
+import { d as defineCustomElement$4 } from './p-68897c11.js';
+import { d as defineCustomElement$3 } from './p-e3c8b1ef.js';
+import { d as defineCustomElement$2 } from './p-ebf021b5.js';
+
+const searchcraftFilterPanelModuleCss = ":root{--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}: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{--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}.searchcraft-filter-panel{display:flex;flex-direction:column;gap:16px}.searchcraft-filter-panel-section{display:flex;flex-direction:column;gap:8px}.searchcraft-filter-panel-label{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-bold-font-size);font-weight:var(--sc-body-small-bold-font-weight);line-height:var(--sc-body-small-bold-line-height)}";
+const SearchcraftFilterPanelStyle0 = searchcraftFilterPanelModuleCss;
+
+const SearchcraftFilterPanel$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftFilterPanel extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.searchStore = useSearchcraftStore.getState();
+        this.setFilterItemsFromString = (itemsString) => {
+            if (itemsString) {
+                try {
+                    const parsedItems = JSON.parse(this.items);
+                    this.filterItems = parsedItems;
+                }
+                catch (_a) {
+                    console.error('Error: Invalid items passed to searchcraft-filter-panel.');
+                }
+            }
+        };
+        this.items = undefined;
+        this.unsubscribe = undefined;
+        this.lastQuery = undefined;
+        this.filterItems = [];
+    }
+    onItemsChange(itemsString) {
+        this.setFilterItemsFromString(itemsString);
+    }
+    connectedCallback() {
+        this.setFilterItemsFromString(this.items);
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            this.lastQuery = state.query || '';
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    handleDateRangeChanged(fieldName, min, max) {
+        const start = new Date(min);
+        const end = new Date(max);
+        this.searchStore.addRangeValueForIndexField({
+            fieldName,
+            value: `${fieldName}:[${start.toISOString()} TO ${end.toISOString()}]`,
+        });
+        this.searchStore.search();
+    }
+    handleNumericRangeChanged(fieldName, min, max) {
+        this.searchStore.addRangeValueForIndexField({
+            fieldName,
+            value: `${fieldName}:[${min} TO ${max}]`,
+        });
+        this.searchStore.search();
+    }
+    handleFacetSelectionUpdated(fieldName, paths) {
+        if (paths.length > 0) {
+            this.searchStore.addFacetPathsForIndexField({
+                fieldName,
+                value: `${fieldName}: IN [${paths.join(' ')}]`,
+            });
+        }
+        else {
+            this.searchStore.removeFacetPathsForIndexField(fieldName);
+        }
+        this.searchStore.search();
+    }
+    handleExactMatchToggleUpdated(isActive) {
+        this.searchStore.setSearchMode(isActive ? 'normal' : 'fuzzy');
+        this.searchStore.search();
+    }
+    handleMostRecentToggleUpdated(isActive) {
+        this.searchStore.setSortType(isActive ? 'desc' : 'asc');
+        this.searchStore.search();
+    }
+    /**
+     * Iterate through filterItems and render them based on `type`
+     */
+    render() {
+        return (h("div", { key: 'ca5f6078a1c724e08118a2650adc933e788aee34', class: 'searchcraft-filter-panel' }, this.filterItems.map((filterItem) => {
+            switch (filterItem.type) {
+                case 'dateRange': {
+                    const item = filterItem;
+                    const min = new Date(item.options.minDate).getTime();
+                    const max = new Date(item.options.maxDate).getTime();
+                    const granularityValue = getMillis(item.options.granularity);
+                    // return date range slider
+                    return (h("div", { class: 'searchcraft-filter-panel-section' }, h("p", { class: 'searchcraft-filter-panel-label' }, filterItem.label), h("searchcraft-slider", { min: min, max: max, granularity: granularityValue, dataType: 'date', onRangeChanged: (event) => {
+                            this.handleDateRangeChanged(item.fieldName, event.detail.startValue, event.detail.endValue);
+                        } })));
+                }
+                case 'numericRange': {
+                    const item = filterItem;
+                    // return date range slider
+                    return (h("div", { class: 'searchcraft-filter-panel-section' }, h("p", { class: 'searchcraft-filter-panel-label' }, filterItem.label), h("searchcraft-slider", { min: item.options.min, max: item.options.max, granularity: item.options.granularity, onRangeChanged: (event) => {
+                            this.handleNumericRangeChanged(item.fieldName, event.detail.startValue, event.detail.endValue);
+                        } })));
+                }
+                case 'facets': {
+                    const item = filterItem;
+                    // return "filters-list"
+                    return (h("div", { class: 'searchcraft-filter-panel-section' }, h("p", { class: 'searchcraft-filter-panel-label' }, filterItem.label), h("searchcraft-facet-list", { fieldName: item.fieldName, onFacetSelectionUpdated: (event) => {
+                            this.handleFacetSelectionUpdated(item.fieldName, event.detail.paths);
+                        } })));
+                }
+                case 'exactMatchToggle': {
+                    const item = filterItem;
+                    return (h("searchcraft-toggle-button", { label: item.label, subLabel: item.options.subLabel, onToggleUpdated: (event) => {
+                            this.handleExactMatchToggleUpdated(event.detail);
+                        } }));
+                }
+                case 'mostRecentToggle': {
+                    const item = filterItem;
+                    return (h("searchcraft-toggle-button", { label: item.label, subLabel: item.options.subLabel, onToggleUpdated: (event) => {
+                            this.handleMostRecentToggleUpdated(event.detail);
+                        } }));
+                }
+            }
+        })));
+    }
+    static get watchers() { return {
+        "items": ["onItemsChange"]
+    }; }
+    static get style() { return SearchcraftFilterPanelStyle0; }
+}, [0, "searchcraft-filter-panel", {
+        "items": [1],
+        "unsubscribe": [32],
+        "lastQuery": [32],
+        "filterItems": [32]
+    }, undefined, {
+        "items": ["onItemsChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-filter-panel", "searchcraft-check-icon", "searchcraft-dash-icon", "searchcraft-facet-list", "searchcraft-slider", "searchcraft-toggle-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-filter-panel":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftFilterPanel$1);
+            }
+            break;
+        case "searchcraft-check-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "searchcraft-dash-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "searchcraft-facet-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "searchcraft-slider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "searchcraft-toggle-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SearchcraftFilterPanel = SearchcraftFilterPanel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SearchcraftFilterPanel, defineCustomElement };
+
+//# sourceMappingURL=searchcraft-filter-panel.js.map

package/dist/components/searchcraft-filter-panel.js.map

@@ -0,0 +1 @@
+{"file":"searchcraft-filter-panel.js","mappings":"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","names":["SearchcraftFilterPanel"],"sources":["src/components/searchcraft-filter-panel/searchcraft-filter-panel.module.scss?tag=searchcraft-filter-panel","src/components/searchcraft-filter-panel/searchcraft-filter-panel.tsx"],"sourcesContent":[".searchcraft-filter-panel {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.searchcraft-filter-panel-section {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.searchcraft-filter-panel-label {\n  @include body-small-bold();\n}\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport type {\n  FilterItem,\n  DateRangeFilterItem,\n  NumericFilterItem,\n  ExactMatchToggleFilterItem,\n  FacetsFilterItem,\n} from '../../types/searchcraft-filter-panel.types';\nimport { useSearchcraftStore } from '@provider/store';\nimport { getMillis } from '@utils/utils';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n  detail: T;\n  target: HTMLSearchcraftInputElement;\n}\n\n@Component({\n  tag: 'searchcraft-filter-panel',\n  styleUrl: 'searchcraft-filter-panel.module.scss',\n  shadow: false,\n})\nexport class SearchcraftFilterPanel {\n  @Prop() items: string | undefined;\n\n  @State() unsubscribe: (() => void) | undefined;\n  @State() lastQuery: string | undefined;\n  @State() filterItems: FilterItem[] = [];\n\n  private searchStore = useSearchcraftStore.getState();\n  private setFilterItemsFromString = (itemsString: string) => {\n    if (itemsString) {\n      try {\n        const parsedItems = JSON.parse(this.items) as FilterItem[];\n        this.filterItems = parsedItems;\n      } catch {\n        console.error(\n          'Error: Invalid items passed to searchcraft-filter-panel.',\n        );\n      }\n    }\n  };\n\n  @Watch('items')\n  onItemsChange(itemsString: string) {\n    this.setFilterItemsFromString(itemsString);\n  }\n\n  connectedCallback() {\n    this.setFilterItemsFromString(this.items);\n\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (this.lastQuery !== state.query) {\n        // A place to put actions to do when the query changes\n      }\n      this.lastQuery = state.query || '';\n    });\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n  }\n\n  handleDateRangeChanged(fieldName: string, min: number, max: number) {\n    const start = new Date(min);\n    const end = new Date(max);\n    this.searchStore.addRangeValueForIndexField({\n      fieldName,\n      value: `${fieldName}:[${start.toISOString()} TO ${end.toISOString()}]`,\n    });\n\n    this.searchStore.search();\n  }\n\n  handleNumericRangeChanged(fieldName: string, min: number, max: number) {\n    this.searchStore.addRangeValueForIndexField({\n      fieldName,\n      value: `${fieldName}:[${min} TO ${max}]`,\n    });\n    this.searchStore.search();\n  }\n\n  handleFacetSelectionUpdated(fieldName: string, paths: string[]) {\n    if (paths.length > 0) {\n      this.searchStore.addFacetPathsForIndexField({\n        fieldName,\n        value: `${fieldName}: IN [${paths.join(' ')}]`,\n      });\n    } else {\n      this.searchStore.removeFacetPathsForIndexField(fieldName);\n    }\n    this.searchStore.search();\n  }\n\n  handleExactMatchToggleUpdated(isActive: boolean) {\n    this.searchStore.setSearchMode(isActive ? 'normal' : 'fuzzy');\n    this.searchStore.search();\n  }\n\n  handleMostRecentToggleUpdated(isActive: boolean) {\n    this.searchStore.setSortType(isActive ? 'desc' : 'asc');\n    this.searchStore.search();\n  }\n\n  /**\n   * Iterate through filterItems and render them based on `type`\n   */\n  render() {\n    return (\n      <div class='searchcraft-filter-panel'>\n        {this.filterItems.map((filterItem) => {\n          switch (filterItem.type) {\n            case 'dateRange': {\n              const item = filterItem as DateRangeFilterItem;\n              const min = new Date(item.options.minDate).getTime();\n              const max = new Date(item.options.maxDate).getTime();\n              const granularityValue = getMillis(item.options.granularity);\n              // return date range slider\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-slider\n                    min={min}\n                    max={max}\n                    granularity={granularityValue}\n                    dataType='date'\n                    onRangeChanged={(event) => {\n                      this.handleDateRangeChanged(\n                        item.fieldName,\n                        event.detail.startValue,\n                        event.detail.endValue,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'numericRange': {\n              const item = filterItem as NumericFilterItem;\n              // return date range slider\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-slider\n                    min={item.options.min}\n                    max={item.options.max}\n                    granularity={item.options.granularity}\n                    onRangeChanged={(event) => {\n                      this.handleNumericRangeChanged(\n                        item.fieldName,\n                        event.detail.startValue,\n                        event.detail.endValue,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'facets': {\n              const item = filterItem as FacetsFilterItem;\n              // return \"filters-list\"\n              return (\n                <div class='searchcraft-filter-panel-section'>\n                  <p class='searchcraft-filter-panel-label'>\n                    {filterItem.label}\n                  </p>\n                  <searchcraft-facet-list\n                    fieldName={item.fieldName}\n                    onFacetSelectionUpdated={(event) => {\n                      this.handleFacetSelectionUpdated(\n                        item.fieldName,\n                        event.detail.paths,\n                      );\n                    }}\n                  />\n                </div>\n              );\n            }\n            case 'exactMatchToggle': {\n              const item = filterItem as ExactMatchToggleFilterItem;\n              return (\n                <searchcraft-toggle-button\n                  label={item.label}\n                  subLabel={item.options.subLabel}\n                  onToggleUpdated={(event) => {\n                    this.handleExactMatchToggleUpdated(event.detail);\n                  }}\n                />\n              );\n            }\n            case 'mostRecentToggle': {\n              const item = filterItem as ExactMatchToggleFilterItem;\n              return (\n                <searchcraft-toggle-button\n                  label={item.label}\n                  subLabel={item.options.subLabel}\n                  onToggleUpdated={(event) => {\n                    this.handleMostRecentToggleUpdated(event.detail);\n                  }}\n                />\n              );\n            }\n          }\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/searchcraft-input-label.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftInputLabel$1, d as defineCustomElement$1 } from './p-b38d171d.js';
+import { S as SearchcraftInputLabel$1, d as defineCustomElement$1 } from './p-c8bc1e4f.js';
 
 const SearchcraftInputLabel = SearchcraftInputLabel$1;
 const defineCustomElement = defineCustomElement$1;