@searchcraft/javascript-sdk 0.10.4 → 0.10.6

package/dist/components/{p-6065aee1.js → p-a7d611cd.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-5365011f.js';
 import { c as classNames } from './p-5cdc6210.js';
-import { s as searchcraftStore } from './p-60fd824d.js';
+import { s as searchcraftStore } from './p-b54873ff.js';
 import { d as defineCustomElement$3 } from './p-acf23bab.js';
 import { d as defineCustomElement$2 } from './p-f2585cdf.js';
 import { d as defineCustomElement$1 } from './p-1adf78b9.js';
@@ -33,6 +33,12 @@ const SearchcraftInputForm = /*@__PURE__*/ proxyCustomElement(class SearchcraftI
      * The input element's placeholder value.
      */
     placeholderValue = 'Enter Search';
+    /**
+     * The placeholder's render behavior.
+     * 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus.
+     * 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.
+     */
+    placeholderBehavior;
     /**
      * When the input becomes focused.
      */
@@ -76,22 +82,18 @@ const SearchcraftInputForm = /*@__PURE__*/ proxyCustomElement(class SearchcraftI
     handleInput = (event) => {
         const input = event.target;
         this.inputValue = input.value;
+        this.searchcraftStore.setSearchTerm(input.value);
         if (!this.autoSearch) {
             return;
         }
-        this.performSearch(input.value);
+        this.performSearch();
     };
-    performSearch = async (searchTerm) => {
-        if (searchTerm === this.searchTerm) {
-            return;
-        }
-        this.searchcraftStore.setSearchTerm(searchTerm.trim());
+    performSearch = async () => {
         this.error = false;
         try {
             await this.searchcraftStore.search();
         }
         catch (error) {
-            console.error(`Search for ${searchTerm} failed:`, error);
             this.error = true;
         }
     };
@@ -106,7 +108,7 @@ const SearchcraftInputForm = /*@__PURE__*/ proxyCustomElement(class SearchcraftI
     };
     handleFormSubmit = async (event) => {
         event.preventDefault();
-        await this.performSearch(this.inputValue);
+        await this.performSearch();
     };
     render() {
         const isShowingClearButton = this.inputValue.length > 0;
@@ -119,9 +121,11 @@ const SearchcraftInputForm = /*@__PURE__*/ proxyCustomElement(class SearchcraftI
         const inputGridStyles = {
             gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',
         };
-        return (h("form", { key: '6af89b2ab634e0f3e0ef575f98f33d091602f95a', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, h("div", { key: '93fea8e2b80468afeb6014122d5b749d74bfaf35', class: inputGridClassNames, style: inputGridStyles }, h("div", { key: '1e5a416843b99aec68c4672a9c78f607347dc9d1', class: 'searchcraft-input-form-button' }, h("searchcraft-button", { key: 'c38c1df0ce20f914ed76fbc0acad5a22b40e6fff', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), this.inputLabel && (h("div", { key: '2169a4466b0fdc8075c0dc74da442aef28a84d65', class: 'searchcraft-input-form-label' }, h("searchcraft-input-label", { key: 'a263b5aa2a4d50d297f06c1fe9e6afb64763f097', label: this.inputLabel }))), this.error && (h("div", { key: '49be2ac0f2d01916e5ea533e6406ee9d4d932178', class: 'searchcraft-input-form-error-message' }, h("searchcraft-error-message", { key: '310c9aebcf580d4abe92d288c6b70a5adf083f8e' }, "Something went wrong."))), h("div", { key: 'f4702e368815e049586e97cf59541b2dc5460fc0', class: 'searchcraft-input-form-input-wrapper' }, h("input", { key: 'a8cddd5e937eee1d30fb98eaaa3dbffe96c192ce', autoComplete: 'off', class: 'searchcraft-input-form-input', onFocus: () => this.inputFocus?.emit(), onBlur: () => this.inputBlur?.emit(), onInput: (event) => {
+        return (h("form", { key: 'd0654def009278279b7edeeccc6044d999c0d5b0', class: 'searchcraft-input-form', onSubmit: this.handleFormSubmit }, h("div", { key: '27978b08e46e0f8ecdf6dc95a74c962d85f5e9ff', class: inputGridClassNames, style: inputGridStyles }, h("div", { key: '1f7cecc80a84bfc46c994971cd751d2b65af6d83', class: 'searchcraft-input-form-button' }, h("searchcraft-button", { key: 'b3f2078604c380eef895be103b2bdf5cef6bca84', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), this.inputLabel && (h("div", { key: 'b33c0d3cbb3512964c3a47a2c354a610fa6faa09', class: 'searchcraft-input-form-label' }, h("searchcraft-input-label", { key: 'e620088318c82e2e70d885bd3ee2c88ef8118e7c', label: this.inputLabel }))), this.error && (h("div", { key: 'c3a20576917aaa33cc12df5ee5b479f87d628de7', class: 'searchcraft-input-form-error-message' }, h("searchcraft-error-message", { key: 'f48e54a236b7a33fa55bab7f29d3b321be0bbb77' }, "Something went wrong."))), h("div", { key: 'ebda089a3b8698892fd6cebcbaf89582a1bb21a2', class: 'searchcraft-input-form-input-wrapper' }, h("input", { key: 'd7ea7b49f7d65067924168fc281033841a71d419', autoComplete: 'off', class: classNames('searchcraft-input-form-input', {
+                'searchcraft-placeholder-hide-on-focus': this.placeholderBehavior === 'hide-on-focus',
+            }), onFocus: () => this.inputFocus?.emit(), onBlur: () => this.inputBlur?.emit(), onInput: (event) => {
                 this.handleInput(event);
-            }, placeholder: this.placeholderValue, type: 'text', value: this.inputValue }), h("div", { key: '616b4dde1ba016cf6a2fba8594a99a3a3f584ef5', class: 'searchcraft-input-form-input-icon' }, h("svg", { key: 'daaef561677a06a76813375e429be7e053b8b122', class: 'searchcraft-input-form-input-search-icon', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, h("title", { key: 'e6d82ca64dd9bfc663813c239d11e5652aa0b9a1' }, "Search icon"), h("path", { key: '1df856c98c2063c1d0c80027255935f73b513939', d: 'M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), isShowingClearButton && (h("button", { key: '8dd6dfefe0ba909657bd436b559ce35b5004f9ae', type: 'button', class: 'searchcraft-input-form-clear-button', onClick: this.handleClearInput }, h("svg", { key: 'bcdba04d5c0949cacc8e1962d2b3cd40ad995de6', class: 'searchcraft-input-form-clear-icon', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { key: 'e01e7fb9b23daf9434520c4c68c0d7539b37d1f8' }, "Clear icon"), h("path", { key: 'ce526d332b6e352cd9cf6008ee2f7497c6769782', 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: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))))))));
+            }, placeholder: this.placeholderValue, type: 'text', value: this.inputValue }), h("div", { key: '6dd4a02322072467a104938a47626592658eaa1e', class: 'searchcraft-input-form-input-icon' }, h("svg", { key: '26a4deabe9149db6db219e49fcccbbe7688e9f0a', class: 'searchcraft-input-form-input-search-icon', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'searchcraft-title' }, h("title", { key: 'eff07788d2edaead45a60d8ac20e5d1d694c5165' }, "Search icon"), h("path", { key: '9083cf32c8f749210232b51b1f5934a3c32b109f', d: 'M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), isShowingClearButton && (h("button", { key: '0b2117ae2510fe743b11d8e638e981ee0f7e4760', type: 'button', class: 'searchcraft-input-form-clear-button', onClick: this.handleClearInput }, h("svg", { key: '3fbb57c1b6486638286e1010639751a83a75f489', class: 'searchcraft-input-form-clear-icon', viewBox: '0 0 22 22', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-labelledby": 'icon-title' }, h("title", { key: '84ce771c55c072b4339babb136639469b68a1f9b' }, "Clear icon"), h("path", { key: '811f5fc9cc708f80004f1cf50ddcd85de05f3b6b', 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: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))))))));
     }
     static get watchers() { return {
         "core": ["onCoreChange"]
@@ -132,6 +136,7 @@ const SearchcraftInputForm = /*@__PURE__*/ proxyCustomElement(class SearchcraftI
         "buttonLabel": [1, "button-label"],
         "inputLabel": [1, "input-label"],
         "placeholderValue": [1, "placeholder-value"],
+        "placeholderBehavior": [1, "placeholder-behavior"],
         "core": [16],
         "inputValue": [32],
         "searchTerm": [32],
@@ -170,4 +175,4 @@ function defineCustomElement() {
 
 export { SearchcraftInputForm as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-6065aee1.js.map
+//# sourceMappingURL=p-a7d611cd.js.map

package/dist/components/p-a7d611cd.js.map

@@ -0,0 +1 @@
+{"file":"p-a7d611cd.js","mappings":"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","names":[],"sources":["src/components/searchcraft-input-form/searchcraft-input-form.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Event,\n  type EventEmitter,\n  Watch,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport type { SearchcraftCore } from '@searchcraft/core';\n\nimport { searchcraftStore } from '@store';\n\n/**\n * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.\n * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.\n *\n * @react-import\n * ```jsx\n * import { SearchcraftInputForm } from \"@searchcraft/react-sdk\";\n * ```\n *\n * @vue-import\n * ```jsx\n * import { SearchcraftInputForm } from \"@searchcraft/vue-sdk\";\n * ```\n *\n * @js-example\n * ```html\n * <searchcraft-input-form auto-search />\n * ```\n *\n * @react-example\n * ```jsx\n * <SearchcraftInputForm autoSearch />\n * ```\n *\n * @vue-example\n * ```jsx\n * <SearchcraftInputForm autoSearch />\n * ```\n */\n@Component({\n  tag: 'searchcraft-input-form',\n  shadow: false,\n})\nexport class SearchcraftInputForm {\n  /**\n   * Whether or not to automatically submit the search term when the input changes.\n   */\n  @Prop() autoSearch?: boolean = true;\n  /**\n   * Where to place the search button.\n   */\n  @Prop() buttonPlacement?: 'left' | 'right' | 'none' = 'none';\n  /**\n   * The label for the submit button.\n   */\n  @Prop() buttonLabel?: string;\n  /**\n   * The label rendered above the input.\n   */\n  @Prop() inputLabel?: string;\n  /**\n   * The input element's placeholder value.\n   */\n  @Prop() placeholderValue?: string = 'Enter Search';\n  /**\n   * The placeholder's render behavior.\n   * 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus.\n   * 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.\n   */\n  @Prop() placeholderBehavior?: 'hide-on-focus' | 'hide-on-text-entered';\n  /**\n   * When the input becomes focused.\n   */\n  @Event() inputFocus?: EventEmitter<void>;\n  /**\n   * When the input becomes unfocused.\n   */\n  @Event() inputBlur?: EventEmitter<void>;\n  /**\n   * Event emitted when input initializes.\n   */\n  @Event() inputInit?: EventEmitter<void>;\n\n  @State() inputValue = '';\n  @State() searchTerm = '';\n  @State() error = false;\n\n  @Prop() core?: SearchcraftCore;\n\n  private searchcraftStore = searchcraftStore.getState();\n  private unsubscribe: () => void = () => {};\n\n  init() {\n    if (this.core) {\n      this.searchcraftStore.init(this.core);\n      this.inputInit?.emit();\n    }\n  }\n\n  @Watch('core')\n  onCoreChange() {\n    this.init();\n  }\n\n  connectedCallback() {\n    this.init();\n  }\n\n  componentDidLoad() {\n    this.unsubscribe = searchcraftStore.subscribe((state) => {\n      this.searchTerm = state.searchTerm;\n      this.inputValue = state.searchTerm;\n    });\n  }\n\n  disconnectedCallback() {\n    this.handleReset();\n    this.unsubscribe?.();\n  }\n\n  handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.inputValue = input.value;\n    this.searchcraftStore.setSearchTerm(input.value);\n\n    if (!this.autoSearch) {\n      return;\n    }\n\n    this.performSearch();\n  };\n\n  private performSearch = async () => {\n    this.error = false;\n\n    try {\n      await this.searchcraftStore.search();\n    } catch (error) {\n      this.error = true;\n    }\n  };\n\n  private handleReset = () => {\n    this.searchcraftStore.setSearchResultsCount(0);\n    this.searchcraftStore.setSearchTerm('');\n    this.searchcraftStore.setSearchClientResponseItems([]);\n    this.error = false;\n  };\n\n  handleClearInput = () => {\n    this.handleReset();\n  };\n\n  handleFormSubmit = async (event: Event) => {\n    event.preventDefault();\n    await this.performSearch();\n  };\n\n  render() {\n    const isShowingClearButton = this.inputValue.length > 0;\n    const inputGridClassNames = classNames('searchcraft-input-form-grid', {\n      'searchcraft-input-form-grid-button-left':\n        this.buttonPlacement === 'left',\n      'searchcraft-input-form-grid-button-right':\n        this.buttonPlacement === 'right',\n      'searchcraft-input-form-grid-button-none':\n        this.buttonPlacement === 'none',\n    });\n    const shouldHaveVerticalGap = this.inputLabel || this.error;\n    const inputGridStyles = {\n      gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',\n    };\n    return (\n      <form class='searchcraft-input-form' onSubmit={this.handleFormSubmit}>\n        <div class={inputGridClassNames} style={inputGridStyles}>\n          <div class='searchcraft-input-form-button'>\n            <searchcraft-button\n              onButtonClick={this.handleFormSubmit}\n              label={this.buttonLabel}\n            />\n          </div>\n          {this.inputLabel && (\n            <div class='searchcraft-input-form-label'>\n              <searchcraft-input-label label={this.inputLabel} />\n            </div>\n          )}\n          {this.error && (\n            <div class='searchcraft-input-form-error-message'>\n              <searchcraft-error-message>\n                Something went wrong.\n              </searchcraft-error-message>\n            </div>\n          )}\n          <div class='searchcraft-input-form-input-wrapper'>\n            <input\n              autoComplete='off'\n              class={classNames('searchcraft-input-form-input', {\n                'searchcraft-placeholder-hide-on-focus':\n                  this.placeholderBehavior === 'hide-on-focus',\n              })}\n              onFocus={() => this.inputFocus?.emit()}\n              onBlur={() => this.inputBlur?.emit()}\n              onInput={(event) => {\n                this.handleInput(event);\n              }}\n              placeholder={this.placeholderValue}\n              type='text'\n              value={this.inputValue}\n            />\n            <div class='searchcraft-input-form-input-icon'>\n              <svg\n                class='searchcraft-input-form-input-search-icon'\n                viewBox='0 0 20 20'\n                fill='none'\n                xmlns='http://www.w3.org/2000/svg'\n                aria-labelledby='searchcraft-title'\n              >\n                <title>Search icon</title>\n                <path\n                  d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n                  stroke='currentColor'\n                  stroke-width='1.5'\n                  stroke-linecap='round'\n                  stroke-linejoin='round'\n                />\n              </svg>\n            </div>\n            {isShowingClearButton && (\n              <button\n                type='button'\n                class='searchcraft-input-form-clear-button'\n                onClick={this.handleClearInput}\n              >\n                <svg\n                  class='searchcraft-input-form-clear-icon'\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>Clear icon</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='currentColor'\n                    stroke-width='1.5'\n                    stroke-linecap='round'\n                    stroke-linejoin='round'\n                  />\n                </svg>\n              </button>\n            )}\n          </div>\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-6ed5cca1.js → p-aba24c85.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h } from './p-5365011f.js';
-import { n as nanoid, d as defineCustomElement$2 } from './p-35ee16e2.js';
-import { s as searchcraftStore } from './p-60fd824d.js';
-import { d as defineCustomElement$1 } from './p-9d2e55a7.js';
+import { n as nanoid, d as defineCustomElement$2 } from './p-6e5ed641.js';
+import { s as searchcraftStore } from './p-b54873ff.js';
+import { d as defineCustomElement$1 } from './p-2735dceb.js';
 
 const SearchcraftPopoverListView = /*@__PURE__*/ proxyCustomElement(class SearchcraftPopoverListView extends H {
     constructor() {
@@ -131,4 +131,4 @@ function defineCustomElement() {
 
 export { SearchcraftPopoverListView as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-6ed5cca1.js.map
+//# sourceMappingURL=p-aba24c85.js.map

package/dist/components/{p-6ed5cca1.js.map → p-aba24c85.js.map}

@@ -1 +1 @@
-{"file":"p-6ed5cca1.js","mappings":"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","names":[],"sources":["src/components/searchcraft-popover-list-view/searchcraft-popover-list-view.tsx"],"sourcesContent":["import type {\n  AdClientResponseItem,\n  SearchClientResponseItem,\n} from '@searchcraft/core';\nimport { Component, h, Prop, type JSX } from '@stencil/core';\nimport { nanoid } from 'nanoid';\n\nimport type { PopoverResultMappings } from '@searchcraft/core';\nimport { searchcraftStore } from '@store';\n\n/**\n * This web component is designed to display a list of results within a popover interface.\n * It is consumed within the `searchcraft-popover-form` component.\n *\n * @js-example\n * ```html\n * <searchcraft-popover-list-view />\n * ```\n *\n * @internal\n */\n@Component({\n  tag: 'searchcraft-popover-list-view',\n  shadow: false,\n})\nexport class SearchcraftPopoverListView {\n  /**\n   * The mappings that define how the data in the documents are mapped to the\n   * list-view-item elements.\n   */\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n  /**\n   * The items to render in the list view.\n   */\n  @Prop() searchClientResponseItems: SearchClientResponseItem[] | undefined;\n  @Prop() adClientResponseItems: AdClientResponseItem[] | undefined;\n  @Prop() searchResultsPage!: number;\n  @Prop() searchResultsPerPage!: number;\n\n  private config = searchcraftStore.getState().core?.config;\n\n  renderWithADMAds() {\n    return (\n      <div class='searchcraft-popover-list-view'>\n        {this.adClientResponseItems?.map((item) => (\n          <searchcraft-ad\n            adClientResponseItem={item}\n            adContainerId={nanoid()}\n            adSource='adMarketplace'\n            key={item.id}\n          />\n        ))}\n        {this.searchClientResponseItems?.map((item, index) => (\n          <searchcraft-popover-list-item\n            item={item}\n            key={item.id}\n            popoverResultMappings={this.popoverResultMappings}\n            documentPosition={\n              this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n\n  renderWithCustomAds() {\n    const itemsToRender: JSX.Element[] = [];\n    const interstitialInterval = this.config?.customAdInterstitialInterval || 0;\n    const interstitialQuantity = this.config?.customAdInterstitialQuantity || 1;\n    const adStartQuantity = this.config?.customAdStartQuantity || 0;\n    const adEndQuantity = this.config?.customAdEndQuantity || 0;\n    const searchItems = this.searchClientResponseItems || [];\n\n    // Renders ads at beginning\n    for (let n = 0; n < adStartQuantity; n++) {\n      itemsToRender.push(\n        <searchcraft-ad\n          adSource='Custom'\n          adContainerId={nanoid()}\n          key={`${n}-ad`}\n        />,\n      );\n    }\n\n    // Renders search results + interstitial ads\n    searchItems.forEach((item, index) => {\n      if (\n        interstitialInterval &&\n        index % interstitialInterval === 0 &&\n        index + interstitialInterval < searchItems.length &&\n        index >= interstitialInterval\n      ) {\n        for (let n = 0; n < interstitialQuantity; n++) {\n          itemsToRender.push(\n            <searchcraft-ad\n              adSource='Custom'\n              adContainerId={nanoid()}\n              key={`${item.id}-ad-${n}`}\n            />,\n          );\n        }\n      }\n\n      itemsToRender.push(\n        <searchcraft-popover-list-item\n          item={item}\n          key={item.id}\n          popoverResultMappings={this.popoverResultMappings}\n          documentPosition={\n            this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n          }\n        />,\n      );\n    });\n\n    // Renders ads at end\n    for (let n = 0; n < adEndQuantity; n++) {\n      itemsToRender.push(\n        <searchcraft-ad\n          adSource='Custom'\n          adContainerId={nanoid()}\n          key={`${n}-ad`}\n        />,\n      );\n    }\n\n    return <div class='searchcraft-popover-list-view'>{itemsToRender}</div>;\n  }\n\n  renderWithNativoAds() {\n    const itemsToRender: JSX.Element[] = [];\n    const interstitialStartIndex =\n      this.config?.nativoAdInterstialStartIndex || 0;\n    const interstitialInterval = this.config?.nativoAdInterstitialInterval || 0;\n    const interstitialQuantity = this.config?.nativoAdInterstitialQuantity || 1;\n    const adStartQuantity = this.config?.nativoAdStartQuantity || 0;\n    const adEndQuantity = this.config?.nativoAdEndQuantity || 0;\n    const searchItems = this.searchClientResponseItems || [];\n\n    // Renders ads at beginning\n    for (let n = 0; n < adStartQuantity; n++) {\n      itemsToRender.push(\n        <searchcraft-ad\n          adSource='Nativo'\n          adContainerId={nanoid()}\n          key={`${n}-ad`}\n        />,\n      );\n    }\n\n    // Renders search results + interstitial ads\n    searchItems.forEach((item, index) => {\n      if (\n        interstitialInterval &&\n        (index + interstitialStartIndex) % interstitialInterval === 0 &&\n        index + interstitialInterval < searchItems.length &&\n        index >= interstitialInterval\n      ) {\n        for (let n = 0; n < interstitialQuantity; n++) {\n          itemsToRender.push(\n            <searchcraft-ad\n              adSource='Nativo'\n              adContainerId={nanoid()}\n              key={`${item.id}-ad-${n}`}\n            />,\n          );\n        }\n      }\n\n      itemsToRender.push(\n        <searchcraft-popover-list-item\n          item={item}\n          key={item.id}\n          popoverResultMappings={this.popoverResultMappings}\n          documentPosition={\n            this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n          }\n        />,\n      );\n    });\n\n    // Renders ads at end\n    for (let n = 0; n < adEndQuantity; n++) {\n      itemsToRender.push(\n        <searchcraft-ad\n          adSource='Nativo'\n          adContainerId={nanoid()}\n          key={`${n}-ad`}\n        />,\n      );\n    }\n\n    return <div class='searchcraft-popover-list-view'>{itemsToRender}</div>;\n  }\n\n  renderWithNoAds() {\n    return (\n      <div class='searchcraft-popover-list-view'>\n        {this.searchClientResponseItems?.map((item, index) => (\n          <searchcraft-popover-list-item\n            item={item}\n            key={item.id}\n            popoverResultMappings={this.popoverResultMappings}\n            documentPosition={\n              this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n\n  render() {\n    switch (this.config?.adSource || 'None') {\n      case 'adMarketplace':\n        return this.renderWithADMAds();\n      case 'Custom':\n        return this.renderWithCustomAds();\n      case 'Nativo':\n        return this.renderWithNativoAds();\n      default:\n        return this.renderWithNoAds();\n    }\n  }\n}\n"],"version":3}
+{"file":"p-aba24c85.js","mappings":"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","names":[],"sources":["src/components/searchcraft-popover-list-view/searchcraft-popover-list-view.tsx"],"sourcesContent":["import type {\n  AdClientResponseItem,\n  SearchClientResponseItem,\n} from '@searchcraft/core';\nimport { Component, h, Prop, type JSX } from '@stencil/core';\nimport { nanoid } from 'nanoid';\n\nimport type { PopoverResultMappings } from '@searchcraft/core';\nimport { searchcraftStore } from '@store';\n\n/**\n * This web component is designed to display a list of results within a popover interface.\n * It is consumed within the `searchcraft-popover-form` component.\n *\n * @js-example\n * ```html\n * <searchcraft-popover-list-view />\n * ```\n *\n * @internal\n */\n@Component({\n  tag: 'searchcraft-popover-list-view',\n  shadow: false,\n})\nexport class SearchcraftPopoverListView {\n  /**\n   * The mappings that define how the data in the documents are mapped to the\n   * list-view-item elements.\n   */\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n  /**\n   * The items to render in the list view.\n   */\n  @Prop() searchClientResponseItems: SearchClientResponseItem[] | undefined;\n  @Prop() adClientResponseItems: AdClientResponseItem[] | undefined;\n  @Prop() searchResultsPage!: number;\n  @Prop() searchResultsPerPage!: number;\n\n  private config = searchcraftStore.getState().core?.config;\n\n  renderWithADMAds() {\n    return (\n      <div class='searchcraft-popover-list-view'>\n        {this.adClientResponseItems?.map((item) => (\n          <searchcraft-ad\n            adClientResponseItem={item}\n            adContainerId={nanoid()}\n            adSource='adMarketplace'\n            key={item.id}\n          />\n        ))}\n        {this.searchClientResponseItems?.map((item, index) => (\n          <searchcraft-popover-list-item\n            item={item}\n            key={item.id}\n            popoverResultMappings={this.popoverResultMappings}\n            documentPosition={\n              this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n\n  renderWithCustomAds() {\n    const itemsToRender: JSX.Element[] = [];\n    const interstitialInterval = this.config?.customAdInterstitialInterval || 0;\n    const interstitialQuantity = this.config?.customAdInterstitialQuantity || 1;\n    const adStartQuantity = this.config?.customAdStartQuantity || 0;\n    const adEndQuantity = this.config?.customAdEndQuantity || 0;\n    const searchItems = this.searchClientResponseItems || [];\n\n    // Renders ads at beginning\n    for (let n = 0; n < adStartQuantity; n++) {\n      itemsToRender.push(\n        <searchcraft-ad\n          adSource='Custom'\n          adContainerId={nanoid()}\n          key={`${n}-ad`}\n        />,\n      );\n    }\n\n    // Renders search results + interstitial ads\n    searchItems.forEach((item, index) => {\n      if (\n        interstitialInterval &&\n        index % interstitialInterval === 0 &&\n        index + interstitialInterval < searchItems.length &&\n        index >= interstitialInterval\n      ) {\n        for (let n = 0; n < interstitialQuantity; n++) {\n          itemsToRender.push(\n            <searchcraft-ad\n              adSource='Custom'\n              adContainerId={nanoid()}\n              key={`${item.id}-ad-${n}`}\n            />,\n          );\n        }\n      }\n\n      itemsToRender.push(\n        <searchcraft-popover-list-item\n          item={item}\n          key={item.id}\n          popoverResultMappings={this.popoverResultMappings}\n          documentPosition={\n            this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n          }\n        />,\n      );\n    });\n\n    // Renders ads at end\n    for (let n = 0; n < adEndQuantity; n++) {\n      itemsToRender.push(\n        <searchcraft-ad\n          adSource='Custom'\n          adContainerId={nanoid()}\n          key={`${n}-ad`}\n        />,\n      );\n    }\n\n    return <div class='searchcraft-popover-list-view'>{itemsToRender}</div>;\n  }\n\n  renderWithNativoAds() {\n    const itemsToRender: JSX.Element[] = [];\n    const interstitialStartIndex =\n      this.config?.nativoAdInterstialStartIndex || 0;\n    const interstitialInterval = this.config?.nativoAdInterstitialInterval || 0;\n    const interstitialQuantity = this.config?.nativoAdInterstitialQuantity || 1;\n    const adStartQuantity = this.config?.nativoAdStartQuantity || 0;\n    const adEndQuantity = this.config?.nativoAdEndQuantity || 0;\n    const searchItems = this.searchClientResponseItems || [];\n\n    // Renders ads at beginning\n    for (let n = 0; n < adStartQuantity; n++) {\n      itemsToRender.push(\n        <searchcraft-ad\n          adSource='Nativo'\n          adContainerId={nanoid()}\n          key={`${n}-ad`}\n        />,\n      );\n    }\n\n    // Renders search results + interstitial ads\n    searchItems.forEach((item, index) => {\n      if (\n        interstitialInterval &&\n        (index + interstitialStartIndex) % interstitialInterval === 0 &&\n        index + interstitialInterval < searchItems.length &&\n        index >= interstitialInterval\n      ) {\n        for (let n = 0; n < interstitialQuantity; n++) {\n          itemsToRender.push(\n            <searchcraft-ad\n              adSource='Nativo'\n              adContainerId={nanoid()}\n              key={`${item.id}-ad-${n}`}\n            />,\n          );\n        }\n      }\n\n      itemsToRender.push(\n        <searchcraft-popover-list-item\n          item={item}\n          key={item.id}\n          popoverResultMappings={this.popoverResultMappings}\n          documentPosition={\n            this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n          }\n        />,\n      );\n    });\n\n    // Renders ads at end\n    for (let n = 0; n < adEndQuantity; n++) {\n      itemsToRender.push(\n        <searchcraft-ad\n          adSource='Nativo'\n          adContainerId={nanoid()}\n          key={`${n}-ad`}\n        />,\n      );\n    }\n\n    return <div class='searchcraft-popover-list-view'>{itemsToRender}</div>;\n  }\n\n  renderWithNoAds() {\n    return (\n      <div class='searchcraft-popover-list-view'>\n        {this.searchClientResponseItems?.map((item, index) => (\n          <searchcraft-popover-list-item\n            item={item}\n            key={item.id}\n            popoverResultMappings={this.popoverResultMappings}\n            documentPosition={\n              this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n\n  render() {\n    switch (this.config?.adSource || 'None') {\n      case 'adMarketplace':\n        return this.renderWithADMAds();\n      case 'Custom':\n        return this.renderWithCustomAds();\n      case 'Nativo':\n        return this.renderWithNativoAds();\n      default:\n        return this.renderWithNoAds();\n    }\n  }\n}\n"],"version":3}

package/dist/components/p-b194d081.js

@@ -0,0 +1,406 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-5365011f.js';
+import { s as searchcraftStore } from './p-b54873ff.js';
+import './p-a64b4cba.js';
+
+/**
+ * Helper function for getting a Node (FacetWithChildrenObject)
+ * at a given path. Traverses the node tree to get the node.
+ */
+const getFacetTreeNodeAtPath = (tree, nodePaths) => {
+    let cursor = tree;
+    for (const nodePath of nodePaths) {
+        cursor = cursor?.children[nodePath];
+    }
+    return cursor;
+};
+/**
+ * Helper function to perform a deep merge.
+ * Used for merging two branches of a facet tree together.
+ */
+const deepMergeWithSpread = (obj1, obj2) => {
+    const result = { ...obj1 };
+    for (const key in obj2) {
+        // biome-ignore lint/suspicious/noPrototypeBuiltins: <explanation>
+        if (obj2.hasOwnProperty(key)) {
+            if (obj2[key] instanceof Object && obj1[key] instanceof Object) {
+                result[key] = deepMergeWithSpread(obj1[key], obj2[key]);
+            }
+            else {
+                result[key] = obj2[key];
+            }
+        }
+    }
+    return result;
+};
+/**
+ * Given an array of facet paths, removes parent facet paths so that only the
+ * Leaf facets are sent with the search request.
+ */
+function removeSubstringMatches(arr) {
+    return arr.filter((entry, index, array) => !array.some((otherEntry, otherIndex) => otherIndex !== index && otherEntry.includes(entry)));
+}
+/**
+ * Merges a current facet tree with an incoming facet tree.
+ *
+ * At each branch, the incoming facet tree's facets override current facet tree
+ *
+ * @param currentTree
+ * @param incomingTree
+ */
+const mergeFacetTrees = (currentTree, incomingTree) => {
+    const mergedTree = structuredClone(currentTree);
+    const merge = (currentBranch, nodePath) => {
+        const mergedBranch = structuredClone(currentBranch);
+        const incomingBranch = getFacetTreeNodeAtPath(incomingTree, nodePath);
+        if (!incomingBranch) {
+            return mergedBranch;
+        }
+        for (const nodeName of Object.keys(currentBranch.children)) {
+            if (incomingBranch.children[nodeName]) {
+                mergedBranch.children[nodeName] = {
+                    ...deepMergeWithSpread(currentBranch.children[nodeName], incomingBranch.children[nodeName]),
+                    count: mergedBranch.children[nodeName]?.count || 0,
+                };
+            }
+            else if (mergedBranch.children[nodeName]) {
+                mergedBranch.children[nodeName] = merge(mergedBranch.children[nodeName], [...nodePath, nodeName]);
+            }
+        }
+        return mergedBranch;
+    };
+    return merge(mergedTree, []);
+};
+/**
+ * A function that converts a FacetWithChidrenArray to a complete FacetTree object.
+ *
+ * It uses the `path` of each Facet to build the tree.
+ *
+ * @param facetWithChildArray
+ */
+const facetWithChildrenArrayToCompleteFacetTree = (rootArray) => {
+    // 1) Start with an empty tree at root "/"
+    const tree = {
+        path: '/',
+        count: 0,
+        children: {},
+    };
+    // 2) Recursively collect all nodes except the implicit "/" itself
+    const allFacets = [];
+    const collect = (node) => {
+        if (node.path !== '/') {
+            allFacets.push({ path: node.path, count: node.count });
+        }
+        if (node.children) {
+            for (const child of node.children) {
+                collect(child);
+            }
+        }
+    };
+    collect(rootArray);
+    // 3) Insert each flat node into our tree, creating missing ancestors
+    for (const { path, count } of allFacets) {
+        const segments = path.split('/').filter(Boolean); // "/sports/outdoors" -> ["sports","outdoors"]
+        let cursor = tree; // start at the root
+        for (const segment of segments) {
+            // Build the full path of this level
+            const prefixPath = cursor.path === '/' ? `/${segment}` : `${cursor.path}/${segment}`;
+            // If this segment doesn't exist yet, create it
+            if (!cursor.children[segment]) {
+                cursor.children[segment] = {
+                    path: prefixPath,
+                    count: count,
+                    children: {},
+                };
+            }
+            // Descend to the next level deeper
+            cursor = cursor.children[segment];
+        }
+        // 4) now `cursor` is the node matching `path` — assign its real count
+        cursor.count = count;
+    }
+    return tree;
+};
+
+const SearchcraftFacetList = /*@__PURE__*/ proxyCustomElement(class SearchcraftFacetList extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.facetSelectionUpdated = createEvent(this, "facetSelectionUpdated", 7);
+    }
+    /**
+     * The name of the field where facets are applied.
+     */
+    fieldName = '';
+    /**
+     * Emitted when the facets are updated.
+     */
+    facetSelectionUpdated;
+    /**
+     * The currently selected facet paths.
+     */
+    selectedPaths = {};
+    /**
+     * A Tree representing all of the facets collected from search responses.
+     */
+    facetTreeCollectedFromSearchResponse = {
+        path: '/',
+        count: 0,
+        children: {},
+    };
+    /**
+     * A Tree representing the facet paths that are selected, but were not included
+     * in any search response.
+     */
+    facetTreeFromFacetPathsNotInSearchResponse = {
+        path: '/',
+        count: 0,
+        children: {},
+    };
+    /**
+     * The facet tree that ultimately gets rendered.
+     * This is a mergin of the facetTreeCollectedFromSearchResponse and the facetTreeFromFacetPathsNotInSearchResponse tree
+     */
+    renderedFacetTree = {
+        path: '/',
+        count: 0,
+        children: {},
+    };
+    // Internal vars used to track when to perform various facet actions.
+    lastTimeTaken;
+    lastSearchTerm;
+    lastSearchMode;
+    lastSortType;
+    lastRangeValues;
+    lastFacetValues;
+    unsubscribe;
+    get areAnyFacetPathsSelected() {
+        return Object.keys(this.selectedPaths).some((key) => this.selectedPaths[key]);
+    }
+    handleIncomingSearchResponse(state, actionType) {
+        // Look at the incoming facet root from the search response, and convert it to a FacetTree
+        const incomingFacetRoot = state.searchResponseFacetPrime?.find((facet) => this.fieldName === Object.keys(facet)[0]);
+        const incomingFacetsWithChildrenArray = incomingFacetRoot?.[this.fieldName];
+        const incomingFacetTree = facetWithChildrenArrayToCompleteFacetTree({
+            path: '/',
+            count: 0,
+            children: incomingFacetsWithChildrenArray || [],
+        });
+        // Determine what action to take to accumulate items into the `facetTreeCollectedFromSearchResponse`.
+        // This facet tree gets accumulated in different ways depending on what action type occured.
+        switch (actionType) {
+            case 'SEARCH_TERM_EMPTY':
+                this.facetTreeCollectedFromSearchResponse = {
+                    path: '/',
+                    count: 0,
+                    children: {},
+                };
+                break;
+            case 'NEW_SEARCH_TERM':
+                this.facetTreeCollectedFromSearchResponse = incomingFacetTree;
+                break;
+            case 'NEW_SEARCH_TERM_WHILE_FACETS_ACTIVE':
+            case 'EXACT_MATCH_UPDATE':
+            case 'RANGE_VALUE_UPDATE': {
+                if (state.supplementalFacetPrime) {
+                    const supplementalFacetRoot = state.supplementalFacetPrime?.find((facet) => this.fieldName === Object.keys(facet)[0]);
+                    const supplementalFacetsWithChildrenArray = supplementalFacetRoot?.[this.fieldName];
+                    const supplementalFacetTree = facetWithChildrenArrayToCompleteFacetTree({
+                        path: '/',
+                        count: 0,
+                        children: supplementalFacetsWithChildrenArray || [],
+                    });
+                    this.facetTreeCollectedFromSearchResponse = mergeFacetTrees(supplementalFacetTree, incomingFacetTree);
+                }
+                else {
+                    this.facetTreeCollectedFromSearchResponse = incomingFacetTree;
+                }
+                break;
+            }
+            case 'FACET_UPDATE':
+            case 'SORT_ORDER_UPDATE':
+                this.facetTreeCollectedFromSearchResponse = mergeFacetTrees(this.facetTreeCollectedFromSearchResponse, incomingFacetTree);
+                break;
+            default:
+                return;
+        }
+        // Determine if there are any selected facet paths not in the current tree.
+        // If there are, we add them to "facetTreeFromFacetPathsNotInSearchResponse"
+        this.facetTreeFromFacetPathsNotInSearchResponse = {
+            path: '/',
+            count: 0,
+            children: {},
+        };
+        const collectedFacetArray = {
+            path: '/',
+            count: 0,
+            children: [],
+        };
+        for (const pathName of Object.keys(this.selectedPaths).filter((path) => this.selectedPaths[path])) {
+            const nodePaths = pathName.startsWith('/')
+                ? pathName.substring(1).split('/')
+                : pathName.split('/');
+            const wasFoundInFacetTree = !!getFacetTreeNodeAtPath(this.facetTreeCollectedFromSearchResponse, nodePaths);
+            const pathKeyName = nodePaths.at(-1);
+            if (!wasFoundInFacetTree && pathKeyName) {
+                collectedFacetArray.children?.push({
+                    children: [],
+                    count: 0,
+                    path: pathName,
+                });
+            }
+        }
+        this.facetTreeFromFacetPathsNotInSearchResponse =
+            facetWithChildrenArrayToCompleteFacetTree(collectedFacetArray);
+        // Merges facetTreeCollectedFromSearchResponse with selectedFacetPathsNotInCurrentFacetTree.
+        // This results in a single, final facet tree that gets rendered in as Checkboxes
+        this.renderedFacetTree = deepMergeWithSpread(this.facetTreeFromFacetPathsNotInSearchResponse, this.facetTreeCollectedFromSearchResponse);
+    }
+    handleStateUpdate(_state) {
+        const state = { ..._state };
+        // Determine what action to take based on the current State
+        if (state.searchTerm.trim() === '') {
+            this.handleIncomingSearchResponse(state, 'SEARCH_TERM_EMPTY');
+            this.lastSearchTerm = '';
+        }
+        else if (this.lastTimeTaken !== state.searchResponseTimeTaken &&
+            state.searchClientRequest &&
+            typeof state.searchClientRequest === 'object') {
+            const request = state.searchClientRequest;
+            let actionType = 'UNKNOWN';
+            if (this.lastSearchTerm !== request.searchTerm) {
+                if (this.areAnyFacetPathsSelected) {
+                    actionType = 'NEW_SEARCH_TERM_WHILE_FACETS_ACTIVE';
+                }
+                else {
+                    actionType = 'NEW_SEARCH_TERM';
+                }
+            }
+            else if (this.lastRangeValues !==
+                JSON.stringify(request.rangeValueForIndexFields)) {
+                actionType = 'RANGE_VALUE_UPDATE';
+            }
+            else if (this.lastFacetValues !==
+                JSON.stringify(request.facetPathsForIndexFields)) {
+                actionType = 'FACET_UPDATE';
+            }
+            else if (this.lastSortType !== request.order_by) {
+                actionType = 'SORT_ORDER_UPDATE';
+            }
+            else if (this.lastSearchMode !== request.mode) {
+                actionType = 'EXACT_MATCH_UPDATE';
+            }
+            this.lastRangeValues = JSON.stringify(request.rangeValueForIndexFields);
+            this.lastFacetValues = JSON.stringify(request.facetPathsForIndexFields);
+            this.lastSortType = request.order_by;
+            this.lastSearchMode = request.mode;
+            this.lastSearchTerm = request.searchTerm;
+            this.lastTimeTaken = state.searchResponseTimeTaken;
+            // Handle the incoming response, using the action we have determined.
+            this.handleIncomingSearchResponse(state, actionType);
+        }
+    }
+    connectedCallback() {
+        this.handleStateUpdate(searchcraftStore.getState());
+        this.unsubscribe = searchcraftStore.subscribe((state) => {
+            this.handleStateUpdate(state);
+        });
+    }
+    disconnectedCallback() {
+        this.unsubscribe?.();
+    }
+    handleCheckboxChange(path) {
+        const isCheckboxChecked = !this.selectedPaths[path];
+        if (isCheckboxChecked) {
+            /**
+             * Checkbox Checked: Add to the selectedPaths record
+             * Uses spread operator here so UI updates.
+             */
+            this.selectedPaths = {
+                ...this.selectedPaths,
+                [path]: true,
+            };
+        }
+        else {
+            /**
+             * Checkbox Uncheck: Remove any paths and sub-paths
+             */
+            const updatedPaths = Object.keys(this.selectedPaths).filter((testPath) => !testPath.includes(path));
+            this.selectedPaths = updatedPaths.reduce((acc, str) => {
+                acc[str] = true;
+                return acc;
+            }, {});
+        }
+        /**
+         * Emit the paths array, with parent paths removed.
+         */
+        const paths = Object.keys(this.selectedPaths).filter((path) => this.selectedPaths[path]);
+        const pathsWithParentPathsRemoved = removeSubstringMatches(paths);
+        this.facetSelectionUpdated?.emit({ paths: pathsWithParentPathsRemoved });
+    }
+    formatFacetName = (name) => {
+        const label = name.replace(/^\//, '');
+        return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())}`;
+    };
+    renderFacet(keyName, facet) {
+        let isChildSelected = false;
+        for (const path of Object.keys(this.selectedPaths)) {
+            if (this.selectedPaths[path] &&
+                path.startsWith(facet.path) &&
+                path.length > facet.path.length) {
+                isChildSelected = true;
+            }
+        }
+        const isSelected = Object.keys(this.selectedPaths).includes(facet.path);
+        const shouldRenderChildren = (Object.keys(facet.children).length > 0 &&
+            (isSelected || isChildSelected)) ||
+            keyName === '@@root';
+        return (h("div", { class: 'searchcraft-facet-list-item' }, keyName !== '@@root' && (h("label", { class: 'searchcraft-facet-list-checkbox-label' }, h("div", { class: 'searchcraft-facet-list-checkbox-input-wrapper' }, h("input", { class: 'searchcraft-facet-list-checkbox-input', checked: this.selectedPaths[facet.path], onChange: (_event) => {
+                this.handleCheckboxChange(facet.path);
+            }, type: 'checkbox' }), isChildSelected ? (h("div", { class: 'searchcraft-facet-list-checkbox-input-dash-icon' }, h("svg", { viewBox: '0 0 14 3', fill: 'none' }, h("title", null, "Checkbox dash"), h("line", { x1: '1.5', y1: '1.5', x2: '12.5', y2: '1.5', stroke: 'white', "stroke-width": '3', "stroke-linecap": 'round' })))) : (h("div", { class: 'searchcraft-facet-list-checkbox-input-check-icon' }, h("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none' }, h("title", null, "Checkbox check"), h("path", { d: 'M13.9999 2L5.74988 10L1.99988 6.36364', stroke: 'white', "stroke-width": '3', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))))), h("span", null, this.formatFacetName(keyName), " (", facet.count, ")"))), shouldRenderChildren && (h("div", { class: 'searchcraft-facet-list', style: {
+                paddingLeft: keyName !== '@@root' ? '24px' : '0px',
+                paddingTop: keyName !== '@@root' ? '6px' : '0px',
+            } }, Object.keys(facet.children).map((key) => {
+            if (facet.children[key]) {
+                return this.renderFacet(key, facet.children[key]);
+            }
+        })))));
+    }
+    render() {
+        if (!this.fieldName) {
+            return;
+        }
+        if (Object.keys(this.facetTreeCollectedFromSearchResponse.children).length ===
+            0 &&
+            (this.lastSearchTerm || '').trim().length === 0) {
+            return;
+        }
+        if (Object.keys(this.facetTreeCollectedFromSearchResponse.children).length ===
+            0 &&
+            (this.lastSearchTerm || '').trim().length > 0) {
+            return (h("p", { class: 'searchcraft-facet-list-message' }, "No facets are available for this search query."));
+        }
+        return (h("div", { class: 'searchcraft-facet-list' }, this.renderFacet('@@root', this.renderedFacetTree)));
+    }
+}, [0, "searchcraft-facet-list", {
+        "fieldName": [1, "field-name"],
+        "selectedPaths": [32],
+        "facetTreeCollectedFromSearchResponse": [32],
+        "renderedFacetTree": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-facet-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-facet-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftFacetList);
+            }
+            break;
+    } });
+}
+
+export { SearchcraftFacetList as S, defineCustomElement as d };
+
+//# sourceMappingURL=p-b194d081.js.map