@searchcraft/javascript-sdk 0.7.1 → 0.8.0

package/dist/esm/searchcraft-popover-form.entry.js.map

@@ -1 +1 @@
-{"file":"searchcraft-popover-form.entry.js","mappings":"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","names":[],"sources":["src/components/searchcraft-popover-form/searchcraft-popover-form.tsx"],"sourcesContent":["import { Component, Element, Prop, State, h } from '@stencil/core';\nimport classNames from 'classnames';\nimport type { SearchcraftConfig, SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport type { PopoverResultMappings } from 'types';\n\n/**\n * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-form type=\"fullscreen\" />\n * ```\n *\n * ```js\n * // index.js\n * const popoverForm = document.querySelector('searchcraft-popover-form');\n *\n * popoverForm.config = {\n *   index: [index_name_from_vektron],\n *   readKey: 'read_key_from_vektron',\n *   endpointUrl: 'enpoint_url_from_vektron',\n * };\n *\n * popoverForm.popoverResultMappings = {\n *  containerHref: {\n *   fieldNames: [\n *    {\n *      fieldName: 'canonical_link',\n *      dataType: 'text',\n *    },\n *  ],\n *  };\n * ```\n */\n@Component({\n  tag: 'searchcraft-popover-form',\n  shadow: false,\n})\nexport class SearchcraftPopoverForm {\n  /**\n   * The Searchcraft config object.\n   */\n  @Prop() config: SearchcraftConfig | undefined;\n  /**\n   * The type of popover form to render.\n   *\n   * - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content.\n   * - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component.\n   * - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.\n   */\n  @Prop() type: 'inline' | 'fullscreen' | 'modal' = 'inline';\n  /**\n   * Formats the content rendered for each result.\n   */\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n  /**\n   * The hotkey that activates the popover.\n   */\n  @Prop() hotkey = 'k';\n  /**\n   * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.\n   */\n  @Prop() hotkeyModifier: 'ctrl' | 'meta' | 'alt' | 'option' = 'meta';\n\n  @State() isPopoverVisibleInState = false;\n  @State() unsubscribe: (() => void) | undefined;\n  @State() searchResults: SearchcraftResponse | undefined;\n  @State() searchTerm: string | undefined;\n  @State() isFocused = false;\n  @State() breakpointSm = 576;\n  @State() breakpointMd = 768;\n  @State() breakpointLg = 992;\n\n  @State() modalElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  componentDidLoad() {\n    // Loads the breakpoint values into state\n    const computedStyle = getComputedStyle(document.documentElement);\n    this.breakpointSm = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-sm').trim(),\n    );\n    this.breakpointMd = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-md').trim(),\n    );\n    this.breakpointLg = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-lg').trim(),\n    );\n    // Set popover visiblity in state\n    this.isPopoverVisibleInState =\n      useSearchcraftStore.getState().isPopoverVisible;\n\n    // Add event listeners\n    document.addEventListener('click', this.handleDocumentClick);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n\n    // Subscribe to state events\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (this.isPopoverVisibleInState !== state.isPopoverVisible) {\n        this.handlePopoverVisibilityChange(state.isPopoverVisible);\n      }\n\n      this.searchResults = { ...state.searchResults } as SearchcraftResponse;\n      this.searchTerm = state.query;\n    });\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n    document.removeEventListener('click', this.handleDocumentClick);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  handleDocumentClick = (event: MouseEvent) => {\n    if (!this.hostElement.contains(event.target as Node)) {\n      this.isFocused = false;\n    }\n  };\n\n  /**\n   * Handles when popover visibility is changed in state\n   */\n  handlePopoverVisibilityChange(isVisible: boolean) {\n    this.isPopoverVisibleInState = isVisible;\n    document.body.style.overflow = isVisible ? 'hidden' : 'auto';\n  }\n\n  /**\n   * Actions to perform when various keys are pressed within the popover form.\n   */\n  handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Document-scoped actions\n    if (event.key === this.hotkey) {\n      this.handleHotkeyPressed(event);\n    }\n\n    // Document-scoped -> Popover-scoped keyboard event boundary\n    if (!this.hostElement.contains(document.activeElement)) {\n      return;\n    }\n\n    // Popover-scoped actions\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusOnNextListItem(event.key);\n        break;\n      case 'Escape':\n        useSearchcraftStore.getState().setPopoverVisibility(false);\n        break;\n      default:\n        return;\n    }\n  };\n\n  handleInputInit = () => {\n    const input = this.hostElement.querySelector('.searchcraft-input') as\n      | HTMLInputElement\n      | undefined;\n    input?.focus();\n  };\n\n  /**\n   * When popover is `inline` and the viewport is at the smallest breakpoint,\n   * focusing on the input will open a modal version of the popover form.\n   */\n  handleInputFocus() {\n    this.isFocused = true;\n\n    if (\n      this.type === 'inline' &&\n      window.visualViewport &&\n      window.visualViewport.width < this.breakpointSm\n    ) {\n      useSearchcraftStore.getState().setPopoverVisibility(true);\n\n      // Appends a popover form of type=`modal` to the body\n      if (!this.modalElement) {\n        this.modalElement = document.createElement('searchcraft-popover-form');\n        this.modalElement.config = this.config;\n        this.modalElement.popoverResultMappings = this.popoverResultMappings;\n        this.modalElement.setAttribute('type', 'fullscreen');\n        document.body.appendChild(this.modalElement);\n      }\n    }\n  }\n\n  handleModalBackdropClick(_event: MouseEvent) {\n    useSearchcraftStore.getState().setPopoverVisibility(false);\n  }\n\n  /**\n   * When a hotkey is pressed, tests if the modifiers also match.\n   * If modifiers match, toggles visibility of the popover modal.\n   */\n  handleHotkeyPressed(event: KeyboardEvent) {\n    if (\n      (event.ctrlKey && this.hotkeyModifier === 'ctrl') ||\n      (event.altKey && this.hotkeyModifier === 'alt') ||\n      (event.metaKey && this.hotkeyModifier === 'meta')\n    ) {\n      event.preventDefault();\n      if (this.type === 'inline' && !this.isPopoverVisibleInState) {\n        const hostElementInput = this.hostElement.querySelector(\n          '.searchcraft-input',\n        ) as HTMLInputElement | undefined;\n        hostElementInput?.focus();\n      } else {\n        useSearchcraftStore\n          .getState()\n          .setPopoverVisibility(!this.isPopoverVisibleInState);\n      }\n    }\n  }\n\n  handleCancelButtonClick() {\n    useSearchcraftStore.getState().setPopoverVisibility(false);\n  }\n\n  /**\n   * Moves focus to the next/previous list item in the list view. If you are at the top\n   * of the list view, it moves focus back to the input.\n   *\n   * @param direction\n   */\n  focusOnNextListItem(direction: 'ArrowDown' | 'ArrowUp') {\n    const listItems = Array.from(\n      document.querySelectorAll<HTMLAnchorElement>(\n        'a.searchcraft-popover-list-item',\n      ),\n    ).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);\n\n    const currentIndex = listItems.indexOf(\n      document.activeElement as HTMLAnchorElement,\n    );\n\n    if (direction === 'ArrowDown') {\n      listItems[(currentIndex + 1) % listItems.length]?.focus();\n    } else if (direction === 'ArrowUp') {\n      if (currentIndex >= 1) {\n        listItems[currentIndex - 1]?.focus();\n      } else {\n        const input = document.querySelector('.searchcraft-input') as\n          | HTMLInputElement\n          | undefined;\n\n        if (input) {\n          input.focus();\n          requestAnimationFrame(() => {\n            input.selectionEnd = input.value.length;\n            input.selectionStart = input.value.length;\n          });\n        }\n      }\n    }\n  }\n\n  get hasResultsToShow() {\n    return (\n      this.searchTerm &&\n      this.searchTerm?.trim()?.length > 0 &&\n      (this.searchResults?.data?.hits?.length || 0) > 0\n    );\n  }\n\n  renderInlinePopover(documents: Record<string, unknown>[]) {\n    const isListViewVisible = this.hasResultsToShow && this.isFocused;\n\n    const popoverFormClassNames = classNames(\n      'searchcraft-popover-form searchcraft-popover-form-inline',\n      {\n        'searchcraft-popover-form-active': isListViewVisible,\n      },\n    );\n\n    return (\n      <div class={popoverFormClassNames}>\n        <searchcraft-input-form\n          config={this.config}\n          onInputFocus={this.handleInputFocus.bind(this)}\n        />\n        {isListViewVisible && (\n          <div class='searchcraft-popover-inline-wrapper-outer'>\n            <div class='searchcraft-popover-inline-wrapper-inner'>\n              <searchcraft-popover-list-view\n                popoverResultMappings={this.popoverResultMappings}\n                documents={documents}\n              />\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  renderModalPopover(documents: Record<string, unknown>[]) {\n    if (this.isPopoverVisibleInState) {\n      const popoverFormClassNames = classNames('searchcraft-popover-form', {\n        'searchcraft-popover-form-active': this.hasResultsToShow,\n      });\n\n      return (\n        <div class='searchcraft-popover-form-modal'>\n          {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}\n          <div\n            class='searchcraft-popover-form-modal-backdrop'\n            onClick={this.handleModalBackdropClick}\n          />\n          <div class='searchcraft-popover-form-modal-inner'>\n            <div class={popoverFormClassNames}>\n              <div class='searchcraft-popover-form-input-wrapper'>\n                <searchcraft-input-form\n                  config={this.config}\n                  onInputFocus={this.handleInputFocus.bind(this)}\n                  onInputInit={this.handleInputInit.bind(this)}\n                />\n                <button\n                  type='button'\n                  class='searchcraft-popover-form-cancel-button'\n                  onClick={this.handleCancelButtonClick.bind(this)}\n                >\n                  Cancel\n                </button>\n              </div>\n              {this.hasResultsToShow && (\n                <searchcraft-popover-list-view\n                  popoverResultMappings={this.popoverResultMappings}\n                  documents={documents}\n                />\n              )}\n            </div>\n          </div>\n        </div>\n      );\n    }\n  }\n\n  renderFullscreenPopover(documents: Record<string, unknown>[]) {\n    if (this.isPopoverVisibleInState) {\n      return (\n        <div class='searchcraft-popover-form-fullscreen'>\n          <div class='searchcraft-popover-form'>\n            <div class='searchcraft-popover-form-input-wrapper'>\n              <searchcraft-input-form\n                config={this.config}\n                onInputFocus={this.handleInputFocus.bind(this)}\n                onInputInit={this.handleInputInit.bind(this)}\n              />\n              <button\n                type='button'\n                class='searchcraft-popover-form-cancel-button'\n                onClick={this.handleCancelButtonClick.bind(this)}\n              >\n                Cancel\n              </button>\n            </div>\n            {this.hasResultsToShow && (\n              <searchcraft-popover-list-view\n                popoverResultMappings={this.popoverResultMappings}\n                documents={documents}\n              />\n            )}\n          </div>\n        </div>\n      );\n    }\n  }\n\n  render() {\n    const documents: Record<string, unknown>[] =\n      this.searchResults?.data?.hits?.map((data, _index) => {\n        const { doc: result } = data;\n        return result;\n      }) as Record<string, unknown>[];\n\n    switch (this.type) {\n      case 'inline':\n        return this.renderInlinePopover(documents);\n      case 'modal':\n        return this.renderModalPopover(documents);\n      case 'fullscreen':\n        return this.renderFullscreenPopover(documents);\n    }\n  }\n}\n"],"version":3}
+{"file":"searchcraft-popover-form.entry.js","mappings":"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","names":[],"sources":["src/components/searchcraft-popover-form/searchcraft-popover-form.tsx"],"sourcesContent":["import { Component, Element, Prop, State, h } from '@stencil/core';\nimport classNames from 'classnames';\nimport type {\n  SearchcraftConfig,\n  SearchClientResponseItem,\n  AdClientResponseItem,\n  PopoverResultMappings,\n} from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\n/**\n * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-form type=\"fullscreen\" />\n * ```\n *\n * ```js\n * // index.js\n * const popoverForm = document.querySelector('searchcraft-popover-form');\n *\n * popoverForm.config = {\n *   index: [index_name_from_vektron],\n *   readKey: 'read_key_from_vektron',\n *   endpointUrl: 'enpoint_url_from_vektron',\n * };\n *\n * popoverForm.popoverResultMappings = {\n *  containerHref: {\n *   fieldNames: [\n *    {\n *      fieldName: 'canonical_link',\n *      dataType: 'text',\n *    },\n *  ],\n *  };\n * ```\n */\n@Component({\n  tag: 'searchcraft-popover-form',\n  shadow: false,\n})\nexport class SearchcraftPopoverForm {\n  /**\n   * The Searchcraft config object.\n   */\n  @Prop() config: SearchcraftConfig | undefined;\n  /**\n   * The type of popover form to render.\n   *\n   * - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content.\n   * - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component.\n   * - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.\n   */\n  @Prop() type: 'inline' | 'fullscreen' | 'modal' = 'inline';\n  /**\n   * Formats the content rendered for each result.\n   */\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n  /**\n   * The hotkey that activates the popover.\n   */\n  @Prop() hotkey = 'k';\n  /**\n   * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.\n   */\n  @Prop() hotkeyModifier: 'ctrl' | 'meta' | 'alt' | 'option' = 'meta';\n\n  @State() isPopoverVisibleInState = false;\n  @State() unsubscribe: (() => void) | undefined;\n  @State() searchClientResponseItems: SearchClientResponseItem[] = [];\n  @State() adClientResponseItems: AdClientResponseItem[] = [];\n  @State() searchTerm: string | undefined;\n  @State() isFocused = false;\n  @State() breakpointSm = 576;\n  @State() breakpointMd = 768;\n  @State() breakpointLg = 992;\n  @State() searchResultsPage;\n  @State() searchResultsPerPage;\n\n  @State() modalElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  componentDidLoad() {\n    // Loads the breakpoint values into state\n    const computedStyle = getComputedStyle(document.documentElement);\n    this.breakpointSm = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-sm').trim(),\n    );\n    this.breakpointMd = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-md').trim(),\n    );\n    this.breakpointLg = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-lg').trim(),\n    );\n    // Set popover visiblity in state\n    this.isPopoverVisibleInState =\n      useSearchcraftStore.getState().isPopoverVisible;\n\n    // Add event listeners\n    document.addEventListener('click', this.handleDocumentClick);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n\n    // Subscribe to state events\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (this.isPopoverVisibleInState !== state.isPopoverVisible) {\n        this.handlePopoverVisibilityChange(state.isPopoverVisible);\n      }\n\n      this.searchClientResponseItems = [...state.searchClientResponseItems];\n      this.adClientResponseItems = [...state.adClientResponseItems];\n      this.searchTerm = state.searchTerm;\n      this.searchResultsPage = state.searchResultsPage;\n      this.searchResultsPerPage = state.searchResultsPerPage;\n    });\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n    document.removeEventListener('click', this.handleDocumentClick);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  handleDocumentClick = (event: MouseEvent) => {\n    if (!this.hostElement.contains(event.target as Node)) {\n      this.isFocused = false;\n    }\n  };\n\n  /**\n   * Handles when popover visibility is changed in state\n   */\n  handlePopoverVisibilityChange(isVisible: boolean) {\n    this.isPopoverVisibleInState = isVisible;\n    document.body.style.overflow = isVisible ? 'hidden' : 'auto';\n  }\n\n  /**\n   * Actions to perform when various keys are pressed within the popover form.\n   */\n  handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Document-scoped actions\n    if (event.key === this.hotkey) {\n      this.handleHotkeyPressed(event);\n    }\n\n    // Document-scoped -> Popover-scoped keyboard event boundary\n    if (!this.hostElement.contains(document.activeElement)) {\n      return;\n    }\n\n    // Popover-scoped actions\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusOnNextListItem(event.key);\n        break;\n      case 'Escape':\n        useSearchcraftStore.getState().setPopoverVisibility(false);\n        break;\n      default:\n        return;\n    }\n  };\n\n  handleInputInit = () => {\n    const input = this.hostElement.querySelector('.searchcraft-input') as\n      | HTMLInputElement\n      | undefined;\n    input?.focus();\n  };\n\n  /**\n   * When popover is `inline` and the viewport is at the smallest breakpoint,\n   * focusing on the input will open a modal version of the popover form.\n   */\n  handleInputFocus() {\n    this.isFocused = true;\n\n    if (\n      this.type === 'inline' &&\n      window.visualViewport &&\n      window.visualViewport.width < this.breakpointSm\n    ) {\n      useSearchcraftStore.getState().setPopoverVisibility(true);\n\n      // Appends a popover form of type=`modal` to the body\n      if (!this.modalElement) {\n        this.modalElement = document.createElement('searchcraft-popover-form');\n        this.modalElement.config = this.config;\n        this.modalElement.popoverResultMappings = this.popoverResultMappings;\n        this.modalElement.setAttribute('type', 'fullscreen');\n        document.body.appendChild(this.modalElement);\n      }\n    }\n  }\n\n  handleModalBackdropClick(_event: MouseEvent) {\n    useSearchcraftStore.getState().setPopoverVisibility(false);\n  }\n\n  /**\n   * When a hotkey is pressed, tests if the modifiers also match.\n   * If modifiers match, toggles visibility of the popover modal.\n   */\n  handleHotkeyPressed(event: KeyboardEvent) {\n    if (\n      (event.ctrlKey && this.hotkeyModifier === 'ctrl') ||\n      (event.altKey && this.hotkeyModifier === 'alt') ||\n      (event.metaKey && this.hotkeyModifier === 'meta')\n    ) {\n      event.preventDefault();\n      if (this.type === 'inline' && !this.isPopoverVisibleInState) {\n        const hostElementInput = this.hostElement.querySelector(\n          '.searchcraft-input',\n        ) as HTMLInputElement | undefined;\n        hostElementInput?.focus();\n      } else {\n        useSearchcraftStore\n          .getState()\n          .setPopoverVisibility(!this.isPopoverVisibleInState);\n      }\n    }\n  }\n\n  handleCancelButtonClick() {\n    useSearchcraftStore.getState().setPopoverVisibility(false);\n  }\n\n  /**\n   * Moves focus to the next/previous list item in the list view. If you are at the top\n   * of the list view, it moves focus back to the input.\n   *\n   * @param direction\n   */\n  focusOnNextListItem(direction: 'ArrowDown' | 'ArrowUp') {\n    const listItems = Array.from(\n      document.querySelectorAll<HTMLAnchorElement>(\n        'a.searchcraft-popover-list-item',\n      ),\n    ).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);\n\n    const currentIndex = listItems.indexOf(\n      document.activeElement as HTMLAnchorElement,\n    );\n\n    if (direction === 'ArrowDown') {\n      listItems[(currentIndex + 1) % listItems.length]?.focus();\n    } else if (direction === 'ArrowUp') {\n      if (currentIndex >= 1) {\n        listItems[currentIndex - 1]?.focus();\n      } else {\n        const input = document.querySelector('.searchcraft-input') as\n          | HTMLInputElement\n          | undefined;\n\n        if (input) {\n          input.focus();\n          requestAnimationFrame(() => {\n            input.selectionEnd = input.value.length;\n            input.selectionStart = input.value.length;\n          });\n        }\n      }\n    }\n  }\n\n  get hasResultsToShow() {\n    return (\n      this.searchTerm &&\n      this.searchTerm?.trim()?.length > 0 &&\n      this.searchClientResponseItems.length > 0\n    );\n  }\n\n  renderInlinePopover() {\n    const isListViewVisible = this.hasResultsToShow && this.isFocused;\n\n    const popoverFormClassNames = classNames(\n      'searchcraft-popover-form searchcraft-popover-form-inline',\n      {\n        'searchcraft-popover-form-active': isListViewVisible,\n      },\n    );\n\n    return (\n      <div class={popoverFormClassNames}>\n        <searchcraft-input-form\n          config={this.config}\n          onInputFocus={this.handleInputFocus.bind(this)}\n        />\n        {isListViewVisible && (\n          <div class='searchcraft-popover-inline-wrapper-outer'>\n            <div class='searchcraft-popover-inline-wrapper-inner'>\n              <searchcraft-popover-list-view\n                popoverResultMappings={this.popoverResultMappings}\n                searchClientResponseItems={this.searchClientResponseItems}\n                adClientResponseItems={this.adClientResponseItems}\n                searchResultsPage={this.searchResultsPage}\n                searchResultsPerPage={this.searchResultsPerPage}\n              />\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  renderModalPopover() {\n    if (this.isPopoverVisibleInState) {\n      const popoverFormClassNames = classNames('searchcraft-popover-form', {\n        'searchcraft-popover-form-active': this.hasResultsToShow,\n      });\n\n      return (\n        <div class='searchcraft-popover-form-modal'>\n          {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}\n          <div\n            class='searchcraft-popover-form-modal-backdrop'\n            onClick={this.handleModalBackdropClick}\n          />\n          <div class='searchcraft-popover-form-modal-inner'>\n            <div class={popoverFormClassNames}>\n              <div class='searchcraft-popover-form-input-wrapper'>\n                <searchcraft-input-form\n                  config={this.config}\n                  onInputFocus={this.handleInputFocus.bind(this)}\n                  onInputInit={this.handleInputInit.bind(this)}\n                />\n                <button\n                  type='button'\n                  class='searchcraft-popover-form-cancel-button'\n                  onClick={this.handleCancelButtonClick.bind(this)}\n                >\n                  Cancel\n                </button>\n              </div>\n              {this.hasResultsToShow && (\n                <searchcraft-popover-list-view\n                  popoverResultMappings={this.popoverResultMappings}\n                  searchClientResponseItems={this.searchClientResponseItems}\n                  adClientResponseItems={this.adClientResponseItems}\n                  searchResultsPage={this.searchResultsPage}\n                  searchResultsPerPage={this.searchResultsPerPage}\n                />\n              )}\n            </div>\n          </div>\n        </div>\n      );\n    }\n  }\n\n  renderFullscreenPopover() {\n    if (this.isPopoverVisibleInState) {\n      return (\n        <div class='searchcraft-popover-form-fullscreen'>\n          <div class='searchcraft-popover-form'>\n            <div class='searchcraft-popover-form-input-wrapper'>\n              <searchcraft-input-form\n                config={this.config}\n                onInputFocus={this.handleInputFocus.bind(this)}\n                onInputInit={this.handleInputInit.bind(this)}\n              />\n              <button\n                type='button'\n                class='searchcraft-popover-form-cancel-button'\n                onClick={this.handleCancelButtonClick.bind(this)}\n              >\n                Cancel\n              </button>\n            </div>\n            {this.hasResultsToShow && (\n              <searchcraft-popover-list-view\n                popoverResultMappings={this.popoverResultMappings}\n                searchClientResponseItems={this.searchClientResponseItems}\n                adClientResponseItems={this.adClientResponseItems}\n                searchResultsPage={this.searchResultsPage}\n                searchResultsPerPage={this.searchResultsPerPage}\n              />\n            )}\n          </div>\n        </div>\n      );\n    }\n  }\n\n  render() {\n    switch (this.type) {\n      case 'inline':\n        return this.renderInlinePopover();\n      case 'modal':\n        return this.renderModalPopover();\n      case 'fullscreen':\n        return this.renderFullscreenPopover();\n    }\n  }\n}\n"],"version":3}

package/dist/esm/searchcraft-popover-list-item_2.entry.js

@@ -0,0 +1,96 @@
+import { r as registerInstance, h } from './index-3608c57d.js';
+import { u as useSearchcraftStore } from './SearchcraftStore-3cfd565a.js';
+import { a as getDocumentValueFromSearchResultMapping } from './units-daaf96f5.js';
+
+const SearchcraftPopoverListItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    item;
+    popoverResultMappings;
+    /** The document position relative to the search results (For Measure) */
+    documentPosition = 0;
+    href;
+    imageSrc;
+    imageAlt;
+    titleContent;
+    subtitleContent;
+    mapValuesFromDocument(document) {
+        this.titleContent = getDocumentValueFromSearchResultMapping(document, this.popoverResultMappings?.title);
+        this.subtitleContent = getDocumentValueFromSearchResultMapping(document, this.popoverResultMappings?.subtitle);
+        this.href = getDocumentValueFromSearchResultMapping(document, this.popoverResultMappings?.href);
+        this.imageSrc = getDocumentValueFromSearchResultMapping(document, this.popoverResultMappings?.imageSource);
+        this.imageAlt = getDocumentValueFromSearchResultMapping(document, this.popoverResultMappings?.imageAlt);
+    }
+    connectedCallback() {
+        if (this.item) {
+            this.mapValuesFromDocument(this.item.document);
+        }
+    }
+    disconnectedCallback() { }
+    handleLinkClick = () => {
+        const state = useSearchcraftStore.getState();
+        const searchcraft = state.getSearchcraftInstance();
+        if (searchcraft) {
+            const document_position = this.documentPosition;
+            const search_term = state.searchTerm;
+            const number_of_documents = state.searchClientResponseItems.length || 0;
+            searchcraft.measureClient?.sendMeasureEvent('document_clicked', {
+                document_position,
+                number_of_documents,
+                search_term,
+            });
+        }
+    };
+    render() {
+        return (h("a", { key: '77e0a59f0441c7ed717ffc0de7f335e76b7b5f5e', class: 'searchcraft-popover-list-item', href: this.href, onClick: this.handleLinkClick.bind(this) }, this.imageSrc && (h("div", { key: '70fe7167cd9baa5029b1482ac6e71bd46c3171a7', class: 'searchcraft-popover-list-item-image-wrapper' }, h("img", { key: '768f651b06005ecefb9818268664334c6bf0d333', alt: this.imageAlt, src: this.imageSrc, class: 'searchcraft-popover-list-item-image' }))), h("div", { key: 'a34b31b92d232193e9d43c5871ecad0d4ee3f59a', class: 'searchcraft-popover-list-item-info-wrapper' }, h("p", { key: 'f2bd9dab4008d200b4528fde35950be90503d66c', class: 'searchcraft-popover-list-item-title' }, this.titleContent), h("p", { key: '4231966d7c4c48dfaaf4925ad18db3428219edad', class: 'searchcraft-popover-list-item-subtitle' }, this.subtitleContent))));
+    }
+};
+
+const SearchcraftPopoverListItemAd = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    adClientResponseItem;
+    connectedCallback() {
+        if (this.adClientResponseItem?.admAd?.impression_url) {
+            fetch(this.adClientResponseItem?.admAd?.impression_url);
+        }
+    }
+    renderADMProductAd() {
+        const ad = this.adClientResponseItem?.admAd;
+        if (!ad) {
+            return;
+        }
+        return (h("a", { class: 'searchcraft-popover-list-item-ad', href: ad.click_url }, ad.image_url && (h("div", { class: 'searchcraft-popover-list-item-ad-image-wrapper' }, h("img", { alt: ad.term, src: ad.image_url, class: 'searchcraft-popover-list-item-ad-image' }))), h("div", { class: 'searchcraft-popover-list-item-ad-info-wrapper' }, h("p", { class: 'searchcraft-popover-list-item-ad-title' }, ad.term), h("p", { class: 'searchcraft-popover-list-item-ad-subtitle' }, ad.price))));
+    }
+    renderADMTextAd() {
+        const ad = this.adClientResponseItem?.admAd;
+        if (!ad) {
+            return;
+        }
+        return (h("a", { class: 'searchcraft-popover-list-item-ad', href: ad.click_url }, ad.image_url && (h("div", { class: 'searchcraft-popover-list-item-ad-image-wrapper' }, h("img", { alt: ad.term, src: ad.image_url, class: 'searchcraft-popover-list-item-ad-image' }))), h("div", { class: 'searchcraft-popover-list-item-ad-info-wrapper' }, h("p", { class: 'searchcraft-popover-list-item-ad-title' }, ad.term))));
+    }
+    renderNativoAd() { }
+    renderAdPlaceholder() {
+        return h("p", null, "Ad placeholder");
+        // return;
+    }
+    render() {
+        if (!this.adClientResponseItem) {
+            return this.renderAdPlaceholder();
+        }
+        switch (this.adClientResponseItem.type) {
+            case 'adm-product-ad':
+                return this.renderADMProductAd();
+            case 'adm-text-ad':
+                return this.renderADMTextAd();
+            case 'nativo-ad':
+                return this.renderNativoAd();
+        }
+    }
+};
+
+export { SearchcraftPopoverListItem as searchcraft_popover_list_item, SearchcraftPopoverListItemAd as searchcraft_popover_list_item_ad };
+
+//# sourceMappingURL=searchcraft-popover-list-item_2.entry.js.map

package/dist/esm/searchcraft-popover-list-item_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"searchcraft-popover-list-item.searchcraft-popover-list-item-ad.entry.js","mappings":"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","names":[],"sources":["src/components/searchcraft-popover-list-item/searchcraft-popover-list-item.tsx","src/components/searchcraft-popover-list-item-ad/searchcraft-popover-list-item-ad.tsx"],"sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport type {\n  SearchDocument,\n  SearchClientResponseItem,\n  PopoverResultMappings,\n} from '@searchcraft/core';\nimport { Component, h, Prop, State } from '@stencil/core';\nimport { getDocumentValueFromSearchResultMapping } from '@utils';\n\n/**\n * A single list item rendered in a searchcraft-popover-list-view.\n */\n@Component({\n  tag: 'searchcraft-popover-list-item',\n  shadow: false,\n})\nexport class SearchcraftPopoverListItem {\n  @Prop() item: SearchClientResponseItem | undefined;\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n  /** The document position relative to the search results (For Measure) */\n  @Prop() documentPosition = 0;\n\n  @State() href?: string;\n  @State() imageSrc?: string;\n  @State() imageAlt?: string;\n  @State() titleContent?: string;\n  @State() subtitleContent?: string;\n\n  mapValuesFromDocument(document: SearchDocument) {\n    this.titleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.title,\n    );\n    this.subtitleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.subtitle,\n    );\n    this.href = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.href,\n    );\n    this.imageSrc = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.imageSource,\n    );\n    this.imageAlt = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.imageAlt,\n    );\n  }\n\n  connectedCallback() {\n    if (this.item) {\n      this.mapValuesFromDocument(this.item.document);\n    }\n  }\n\n  disconnectedCallback() {}\n\n  handleLinkClick = () => {\n    const state = useSearchcraftStore.getState();\n    const searchcraft = state.getSearchcraftInstance();\n\n    if (searchcraft) {\n      const document_position = this.documentPosition;\n      const search_term = state.searchTerm;\n      const number_of_documents = state.searchClientResponseItems.length || 0;\n\n      searchcraft.measureClient?.sendMeasureEvent('document_clicked', {\n        document_position,\n        number_of_documents,\n        search_term,\n      });\n    }\n  };\n\n  render() {\n    return (\n      <a\n        class='searchcraft-popover-list-item'\n        href={this.href}\n        onClick={this.handleLinkClick.bind(this)}\n      >\n        {this.imageSrc && (\n          <div class='searchcraft-popover-list-item-image-wrapper'>\n            <img\n              alt={this.imageAlt}\n              src={this.imageSrc}\n              class='searchcraft-popover-list-item-image'\n            />\n          </div>\n        )}\n        <div class='searchcraft-popover-list-item-info-wrapper'>\n          <p class='searchcraft-popover-list-item-title'>{this.titleContent}</p>\n          <p class='searchcraft-popover-list-item-subtitle'>\n            {this.subtitleContent}\n          </p>\n        </div>\n      </a>\n    );\n  }\n}\n","import type {\n  AdClientResponseItem,\n  ADMProductAd,\n  ADMTextAd,\n} from '@searchcraft/core';\nimport { Component, h, Prop } from '@stencil/core';\n\n/**\n * A single list item rendered in a searchcraft-popover-list-view.\n */\n@Component({\n  tag: 'searchcraft-popover-list-item-ad',\n  shadow: false,\n})\nexport class SearchcraftPopoverListItemAd {\n  @Prop() adClientResponseItem?: AdClientResponseItem;\n\n  connectedCallback() {\n    if (this.adClientResponseItem?.admAd?.impression_url) {\n      fetch(this.adClientResponseItem?.admAd?.impression_url);\n    }\n  }\n\n  renderADMProductAd() {\n    const ad = this.adClientResponseItem?.admAd as ADMProductAd;\n    if (!ad) {\n      return;\n    }\n\n    return (\n      <a class='searchcraft-popover-list-item-ad' href={ad.click_url}>\n        {ad.image_url && (\n          <div class='searchcraft-popover-list-item-ad-image-wrapper'>\n            <img\n              alt={ad.term}\n              src={ad.image_url}\n              class='searchcraft-popover-list-item-ad-image'\n            />\n          </div>\n        )}\n        <div class='searchcraft-popover-list-item-ad-info-wrapper'>\n          <p class='searchcraft-popover-list-item-ad-title'>{ad.term}</p>\n          <p class='searchcraft-popover-list-item-ad-subtitle'>{ad.price}</p>\n        </div>\n      </a>\n    );\n  }\n\n  renderADMTextAd() {\n    const ad = this.adClientResponseItem?.admAd as ADMTextAd;\n    if (!ad) {\n      return;\n    }\n\n    return (\n      <a class='searchcraft-popover-list-item-ad' href={ad.click_url}>\n        {ad.image_url && (\n          <div class='searchcraft-popover-list-item-ad-image-wrapper'>\n            <img\n              alt={ad.term}\n              src={ad.image_url}\n              class='searchcraft-popover-list-item-ad-image'\n            />\n          </div>\n        )}\n        <div class='searchcraft-popover-list-item-ad-info-wrapper'>\n          <p class='searchcraft-popover-list-item-ad-title'>{ad.term}</p>\n        </div>\n      </a>\n    );\n  }\n\n  renderNativoAd() {}\n\n  renderAdPlaceholder() {\n    return <p>Ad placeholder</p>;\n    // return;\n  }\n\n  render() {\n    if (!this.adClientResponseItem) {\n      return this.renderAdPlaceholder();\n    }\n\n    switch (this.adClientResponseItem.type) {\n      case 'adm-product-ad':\n        return this.renderADMProductAd();\n      case 'adm-text-ad':\n        return this.renderADMTextAd();\n      case 'nativo-ad':\n        return this.renderNativoAd();\n    }\n  }\n}\n"],"version":3}

package/dist/esm/searchcraft-results-info.entry.js

@@ -1,22 +1,56 @@
 import { r as registerInstance, h } from './index-3608c57d.js';
-import { u as useSearchcraftStore } from './store-aa071d9c.js';
-import { f as formatNumberWithCommas } from './units-b6eba560.js';
+import { c as classNames } from './index-72ac5051.js';
+import { u as useSearchcraftStore } from './SearchcraftStore-3cfd565a.js';
+import { f as formatNumberWithCommas } from './units-daaf96f5.js';
+import { p as parseCustomStyles } from './styles-961644ef.js';
 
 const SearchcraftResultsInfo = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
-    isRequesting = false;
-    resultsCount = 0;
-    responseTime = '';
-    query = '';
+    /**
+     * The custom formatter for the resulting string.
+     *
+     * @example
+     * ```ts
+     *  resultsInfo.customFormatter = (range, count, responseTime) =>
+     *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+     * ```
+     */
+    customFormatter;
+    /**
+     * The custom styles object.
+     */
+    customStyles;
+    // store vars
+    searchTerm;
+    searchResultsPage;
+    searchResultsPerPage;
+    searchResultsCount;
+    // local vars
+    count = 0;
+    range = [0, 0];
+    responseTime = '0';
     unsubscribe = () => { };
     connectedCallback() {
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
-            this.isRequesting = state.isRequesting;
-            this.resultsCount = state.searchResults?.data?.count || 0;
-            this.responseTime = ((state.searchResults?.data?.time_taken || 0) * 1000).toFixed(2);
-            this.query = state.query || '';
+            // store vars
+            this.searchTerm = state.searchTerm;
+            this.searchResultsPage = state.searchResultsPage;
+            this.searchResultsPerPage = state.searchResultsPerPage;
+            this.searchResultsCount = state.searchResultsCount;
+            // local vars
+            this.count = this.searchResultsCount;
+            this.range[0] =
+                this.searchResultsPage <= 1
+                    ? 1
+                    : this.searchResultsPerPage * (this.searchResultsPage - 1);
+            this.range[1] = this.searchResultsPerPage * this.searchResultsPage;
+            this.range[1] =
+                this.range[1] > this.searchResultsCount
+                    ? this.searchResultsCount
+                    : this.range[1];
+            this.responseTime = ((state.searchResponseTimeTaken || 0) * 1000).toFixed(2);
         });
     }
     disconnectedCallback() {
@@ -25,11 +59,15 @@ const SearchcraftResultsInfo = class {
         }
     }
     render() {
-        if (!this.query || this.resultsCount === 0) {
+        if (!this.searchTerm || this.searchResultsCount === 0) {
             return null;
         }
-        const formattedResults = formatNumberWithCommas(this.resultsCount);
-        return (h("div", { class: 'searchcraft-results-info-container' }, h("p", { class: 'searchcraft-results-info-content' }, formattedResults, " results found in ", this.responseTime, "ms")));
+        return (h("p", { class: classNames('searchcraft-results-info', parseCustomStyles(this.customStyles || {})) }, this.customFormatter
+            ? this.customFormatter([
+                formatNumberWithCommas(this.range[0]),
+                formatNumberWithCommas(this.range[1]),
+            ], formatNumberWithCommas(this.count), this.responseTime)
+            : `${this.count} results found in ${this.responseTime}ms`));
     }
 };
 

package/dist/esm/searchcraft-results-info.entry.js.map

@@ -1 +1 @@
-{"file":"searchcraft-results-info.entry.js","mappings":";;;;MAoBa,sBAAsB;;;;IACxB,YAAY,GAAG,KAAK,CAAC;IACrB,YAAY,GAAG,CAAC,CAAC;IACjB,YAAY,GAAG,EAAE,CAAC;IAClB,KAAK,GAAG,EAAE,CAAC;IAEpB,WAAW,GAAe,SAAQ,CAAC;IAEnC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;YACrD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;YACvC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC;YAC1D,IAAI,CAAC,YAAY,GAAG,CAClB,CAAC,KAAK,CAAC,aAAa,EAAE,IAAI,EAAE,UAAU,IAAI,CAAC,IAAI,IAAI,EACnD,OAAO,CAAC,CAAC,CAAC,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;SAChC,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;YAC1C,OAAO,IAAI,CAAC;SACb;QACD,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACnE,QACE,WAAK,KAAK,EAAC,oCAAoC,IAC7C,SAAG,KAAK,EAAC,kCAAkC,IACxC,gBAAgB,wBAAoB,IAAI,CAAC,YAAY,OACpD,CACA,EACN;KACH;;;;;","names":[],"sources":["src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"sourcesContent":["import { Component, h, State } from '@stencil/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { formatNumberWithCommas } from '@utils';\n\n/**\n * This web component is designed to display the number of results returned from a search query.\n * It provides users with real-time feedback on the scale of the results, such as the total number of items found.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-results-info />\n * ```\n */\n@Component({\n  tag: 'searchcraft-results-info',\n  shadow: false,\n})\nexport class SearchcraftResultsInfo {\n  @State() isRequesting = false;\n  @State() resultsCount = 0;\n  @State() responseTime = '';\n  @State() query = '';\n\n  unsubscribe: () => void = () => {};\n\n  connectedCallback() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.isRequesting = state.isRequesting;\n      this.resultsCount = state.searchResults?.data?.count || 0;\n      this.responseTime = (\n        (state.searchResults?.data?.time_taken || 0) * 1000\n      ).toFixed(2);\n      this.query = state.query || '';\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n    const formattedResults = formatNumberWithCommas(this.resultsCount);\n    return (\n      <div class='searchcraft-results-info-container'>\n        <p class='searchcraft-results-info-content'>\n          {formattedResults} results found in {this.responseTime}ms\n        </p>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"searchcraft-results-info.entry.js","mappings":";;;;;;MA0Ba,sBAAsB;;;;;;;;;;;;;IAUzB,eAAe,CAIb;;;;IAIF,YAAY,CAAU;;IAGrB,UAAU,CAAC;IACX,iBAAiB,CAAC;IAClB,oBAAoB,CAAC;IACrB,kBAAkB,CAAC;;IAGnB,KAAK,GAAG,CAAC,CAAC;IACV,KAAK,GAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzB,YAAY,GAAG,GAAG,CAAC;IAE5B,WAAW,GAAe,SAAQ,CAAC;IAEnC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;;YAErD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;YACnC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC;YACjD,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,oBAAoB,CAAC;YACvD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,kBAAkB,CAAC;;YAGnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC;YACrC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBACX,IAAI,CAAC,iBAAiB,IAAI,CAAC;sBACvB,CAAC;sBACD,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC;YAC/D,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,CAAC;YACnE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBACX,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,kBAAkB;sBACnC,IAAI,CAAC,kBAAkB;sBACvB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACpB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,uBAAuB,IAAI,CAAC,IAAI,IAAI,EAAE,OAAO,CACvE,CAAC,CACF,CAAC;SACH,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,kBAAkB,KAAK,CAAC,EAAE;YACrD,OAAO,IAAI,CAAC;SACb;QAED,QACE,SACE,KAAK,EAAE,UAAU,CACf,0BAA0B,EAC1B,iBAAiB,CAAC,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAC3C,IAEA,IAAI,CAAC,eAAe;cACjB,IAAI,CAAC,eAAe,CAClB;gBACE,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBACrC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;aACtC,EACD,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,EAClC,IAAI,CAAC,YAAY,CAClB;cACD,GAAG,IAAI,CAAC,KAAK,qBAAqB,IAAI,CAAC,YAAY,IAAI,CACzD,EACJ;KACH;;;;;","names":[],"sources":["src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"sourcesContent":["import { Component, h, State, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { formatNumberWithCommas, parseCustomStyles } from '@utils';\n\n/**\n * This web component is designed to display the number of results returned from a search query.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <script>\n *  const resultsInfo = document.querySelector('searchcraft-results-info');\n *  resultsInfo.customFormatter = (range, count, responseTime) =>\n *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;\n * </script>\n *\n * <searchcraft-results-info />\n * ```\n */\n@Component({\n  tag: 'searchcraft-results-info',\n  shadow: false,\n})\nexport class SearchcraftResultsInfo {\n  /**\n   * The custom formatter for the resulting string.\n   *\n   * @example\n   * ```ts\n   *  resultsInfo.customFormatter = (range, count, responseTime) =>\n   *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;\n   * ```\n   */\n  @Prop() customFormatter?: (\n    range: [string, string],\n    count: string,\n    responseTime: string,\n  ) => void;\n  /**\n   * The custom styles object.\n   */\n  @Prop() customStyles?: string;\n\n  // store vars\n  @State() searchTerm;\n  @State() searchResultsPage;\n  @State() searchResultsPerPage;\n  @State() searchResultsCount;\n\n  // local vars\n  @State() count = 0;\n  @State() range: number[] = [0, 0];\n  @State() responseTime = '0';\n\n  unsubscribe: () => void = () => {};\n\n  connectedCallback() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      // store vars\n      this.searchTerm = state.searchTerm;\n      this.searchResultsPage = state.searchResultsPage;\n      this.searchResultsPerPage = state.searchResultsPerPage;\n      this.searchResultsCount = state.searchResultsCount;\n\n      // local vars\n      this.count = this.searchResultsCount;\n      this.range[0] =\n        this.searchResultsPage <= 1\n          ? 1\n          : this.searchResultsPerPage * (this.searchResultsPage - 1);\n      this.range[1] = this.searchResultsPerPage * this.searchResultsPage;\n      this.range[1] =\n        this.range[1] > this.searchResultsCount\n          ? this.searchResultsCount\n          : this.range[1];\n      this.responseTime = ((state.searchResponseTimeTaken || 0) * 1000).toFixed(\n        2,\n      );\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.searchTerm || this.searchResultsCount === 0) {\n      return null;\n    }\n\n    return (\n      <p\n        class={classNames(\n          'searchcraft-results-info',\n          parseCustomStyles(this.customStyles || {}),\n        )}\n      >\n        {this.customFormatter\n          ? this.customFormatter(\n              [\n                formatNumberWithCommas(this.range[0]),\n                formatNumberWithCommas(this.range[1]),\n              ],\n              formatNumberWithCommas(this.count),\n              this.responseTime,\n            )\n          : `${this.count} results found in ${this.responseTime}ms`}\n      </p>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/searchcraft-search-results-per-page.entry.js

@@ -0,0 +1,71 @@
+import { r as registerInstance, h } from './index-3608c57d.js';
+import { u as useSearchcraftStore } from './SearchcraftStore-3cfd565a.js';
+import { c as classNames } from './index-72ac5051.js';
+import { p as parseCustomStyles } from './styles-961644ef.js';
+
+const SearchcraftSearchResultsPerPage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * The amount the options will increase (e.g. 20 = [20, 40, 60, 80, 100]).
+     * The base value is defined by the `searchResultsPerPage` option in the configuration.
+     */
+    increment = 20;
+    /**
+     * The custom styles object.
+     */
+    customStyles;
+    // store vars
+    searchTerm;
+    searchResultsPage;
+    searchResultsPerPage;
+    searchResultsCount;
+    searchResultsPagesCount;
+    // local vars
+    initialSearchResultsPerPage;
+    // store functions
+    setSearchResultsPerPage = () => { };
+    setSearchResultsPage = () => { };
+    unsubscribe = () => { };
+    componentDidLoad() {
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            // store vars
+            this.searchTerm = state.searchTerm;
+            this.searchResultsPerPage = state.searchResultsPerPage;
+            this.searchResultsPage = state.searchResultsPage;
+            this.searchResultsCount = state.searchResultsCount;
+            // local vars
+            this.searchResultsPagesCount = Math.ceil(this.searchResultsCount / this.searchResultsPerPage);
+            // store functions
+            this.setSearchResultsPage = state.setSearchResultsPage;
+            this.setSearchResultsPerPage = state.setSearchResultsPerPage;
+        });
+        this.initialSearchResultsPerPage =
+            useSearchcraftStore.getState().searchResultsPerPage;
+    }
+    disconnectedCallback() {
+        this.unsubscribe?.();
+    }
+    render() {
+        // early return if there isn't a searchTerm or there is 1 or fewer pages of results
+        if (!this.searchTerm || this.searchResultsPagesCount <= 1) {
+            return;
+        }
+        return (h("div", { class: classNames('searchcraft-search-results-per-page', parseCustomStyles(this.customStyles || {})) }, h("div", { class: 'searchcraft-search-results-per-page-select' }, h("label", { class: 'searchcraft-search-results-per-page-select-label', htmlFor: 'searchcraft-search-results-per-page-select-input' }, "Results Per Page"), h("div", { class: 'searchcraft-search-results-per-page-select-input' }, h("searchcraft-select", { inputId: 'searchcraft-search-results-per-page-select-input', name: 'results-per-page', options: [...Array(5)].map((_, index) => {
+                const value = this.initialSearchResultsPerPage +
+                    Number(this.increment) * index;
+                return {
+                    label: `${value}`,
+                    value,
+                };
+            }), onSelectChange: (event) => {
+                this.setSearchResultsPerPage(Number(event.detail));
+                this.setSearchResultsPage(1);
+            } })))));
+    }
+};
+
+export { SearchcraftSearchResultsPerPage as searchcraft_search_results_per_page };
+
+//# sourceMappingURL=searchcraft-search-results-per-page.entry.js.map

package/dist/esm/searchcraft-search-results-per-page.entry.js.map

@@ -0,0 +1 @@
+{"file":"searchcraft-search-results-per-page.entry.js","mappings":";;;;;MAmBa,+BAA+B;;;;;;;;IAKlC,SAAS,GAAoB,EAAE,CAAC;;;;IAIhC,YAAY,CAAU;;IAGrB,UAAU,CAAC;IACX,iBAAiB,CAAC;IAClB,oBAAoB,CAAC;IACrB,kBAAkB,CAAC;IACnB,uBAAuB,CAAC;;IAGxB,2BAA2B,CAAC;;IAG5B,uBAAuB,GAA8B,SAAQ,CAAC;IAC9D,oBAAoB,GAA2B,SAAQ,CAAC;IAEzD,WAAW,GAAe,SAAQ,CAAC;IAE3C,gBAAgB;QACd,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;;YAErD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;YACnC,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,oBAAoB,CAAC;YACvD,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC;YACjD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,kBAAkB,CAAC;;YAGnD,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,IAAI,CACtC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,CACpD,CAAC;;YAGF,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,oBAAoB,CAAC;YACvD,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC,uBAAuB,CAAC;SAC9D,CAAC,CAAC;QAEH,IAAI,CAAC,2BAA2B;YAC9B,mBAAmB,CAAC,QAAQ,EAAE,CAAC,oBAAoB,CAAC;KACvD;IAED,oBAAoB;QAClB,IAAI,CAAC,WAAW,IAAI,CAAC;KACtB;IAED,MAAM;;QAEJ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,uBAAuB,IAAI,CAAC,EAAE;YACzD,OAAO;SACR;QAED,QACE,WACE,KAAK,EAAE,UAAU,CACf,qCAAqC,EACrC,iBAAiB,CAAC,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAC3C,IAED,WAAK,KAAK,EAAC,4CAA4C,IACrD,aACE,KAAK,EAAC,kDAAkD,EACxD,OAAO,EAAC,kDAAkD,uBAGpD,EACR,WAAK,KAAK,EAAC,kDAAkD,IAC3D,0BACE,OAAO,EAAC,kDAAkD,EAC1D,IAAI,EAAC,kBAAkB,EACvB,OAAO,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK;gBAClC,MAAM,KAAK,GACT,IAAI,CAAC,2BAA2B;oBAChC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;gBACjC,OAAO;oBACL,KAAK,EAAE,GAAG,KAAK,EAAE;oBACjB,KAAK;iBACN,CAAC;aACH,CAAC,EACF,cAAc,EAAE,CAAC,KAAK;gBACpB,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;gBACnD,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;aAC9B,GACD,CACE,CACF,CACF,EACN;KACH;;;;;","names":[],"sources":["src/components/searchcraft-search-results-per-page/searchcraft-search-results-per-page.tsx"],"sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport { Component, h, State, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils';\n\n/**\n * This web component is designed to choose the number of search results displayed.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-search-results-per-page increment=\"20\" />\n * ```\n */\n@Component({\n  tag: 'searchcraft-search-results-per-page',\n  shadow: false,\n})\nexport class SearchcraftSearchResultsPerPage {\n  /**\n   * The amount the options will increase (e.g. 20 = [20, 40, 60, 80, 100]).\n   * The base value is defined by the `searchResultsPerPage` option in the configuration.\n   */\n  @Prop() increment: string | number = 20;\n  /**\n   * The custom styles object.\n   */\n  @Prop() customStyles?: string;\n\n  // store vars\n  @State() searchTerm;\n  @State() searchResultsPage;\n  @State() searchResultsPerPage;\n  @State() searchResultsCount;\n  @State() searchResultsPagesCount;\n\n  // local vars\n  @State() initialSearchResultsPerPage;\n\n  // store functions\n  @State() setSearchResultsPerPage: (perPage: number) => void = () => {};\n  @State() setSearchResultsPage: (page: number) => void = () => {};\n\n  private unsubscribe: () => void = () => {};\n\n  componentDidLoad() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      // store vars\n      this.searchTerm = state.searchTerm;\n      this.searchResultsPerPage = state.searchResultsPerPage;\n      this.searchResultsPage = state.searchResultsPage;\n      this.searchResultsCount = state.searchResultsCount;\n\n      // local vars\n      this.searchResultsPagesCount = Math.ceil(\n        this.searchResultsCount / this.searchResultsPerPage,\n      );\n\n      // store functions\n      this.setSearchResultsPage = state.setSearchResultsPage;\n      this.setSearchResultsPerPage = state.setSearchResultsPerPage;\n    });\n\n    this.initialSearchResultsPerPage =\n      useSearchcraftStore.getState().searchResultsPerPage;\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n  }\n\n  render() {\n    // early return if there isn't a searchTerm or there is 1 or fewer pages of results\n    if (!this.searchTerm || this.searchResultsPagesCount <= 1) {\n      return;\n    }\n\n    return (\n      <div\n        class={classNames(\n          'searchcraft-search-results-per-page',\n          parseCustomStyles(this.customStyles || {}),\n        )}\n      >\n        <div class='searchcraft-search-results-per-page-select'>\n          <label\n            class='searchcraft-search-results-per-page-select-label'\n            htmlFor='searchcraft-search-results-per-page-select-input'\n          >\n            Results Per Page\n          </label>\n          <div class='searchcraft-search-results-per-page-select-input'>\n            <searchcraft-select\n              inputId='searchcraft-search-results-per-page-select-input'\n              name='results-per-page'\n              options={[...Array(5)].map((_, index) => {\n                const value =\n                  this.initialSearchResultsPerPage +\n                  Number(this.increment) * index;\n                return {\n                  label: `${value}`,\n                  value,\n                };\n              })}\n              onSelectChange={(event) => {\n                this.setSearchResultsPerPage(Number(event.detail));\n                this.setSearchResultsPage(1);\n              }}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/searchcraft-select.entry.js

@@ -0,0 +1,66 @@
+import { r as registerInstance, c as createEvent, h } from './index-3608c57d.js';
+import { c as classNames } from './index-72ac5051.js';
+import { p as parseCustomStyles } from './styles-961644ef.js';
+
+const SearchcraftSelect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selectChange = createEvent(this, "selectChange", 7);
+    }
+    /**
+     * The caption displayed below the select input.
+     */
+    caption;
+    /**
+     * Whether the select input is disabled.
+     */
+    disabled = false;
+    /**
+     * The ID for the select input.
+     */
+    inputId;
+    /**
+     * The label of the select input.
+     */
+    label;
+    /**
+     * The ID for the label of the select input.
+     */
+    labelId;
+    /**
+     * The name of the select input.
+     */
+    name;
+    /**
+     * The options for the select input.
+     */
+    options = [];
+    /**
+     * A custom styles object.
+     */
+    customStyles;
+    /**
+     * The event fired when the select is changed.
+     */
+    selectChange;
+    searchResultsPerPage;
+    setSearchResultsPage = () => { };
+    setSearchResultsPerPage = () => { };
+    handleSelectChange = (event) => {
+        this.selectChange.emit(event.target.value);
+    };
+    handleGoToPage(page) {
+        this.setSearchResultsPage(page);
+    }
+    render() {
+        return (h("div", { key: '5024d49d89a3649a5de591d37ded304a9dfb36d9', class: classNames('searchcraft-select', parseCustomStyles(this.customStyles || {})) }, this.label && (h("label", { key: '005aea9b190e5a6c041721e20395be23f76faab6', class: 'searchcraft-select-label', id: this.labelId || `${this.inputId}-label`, htmlFor: this.inputId }, this.label)), h("div", { key: '209d56844c0bcd241e73bafcad24fac927fe7ffa', class: 'searchcraft-select-input-wrapper' }, h("select", { key: '010c9e596ef45a303f84c0ac0fa54ab67556d7b6', "aria-labelledby": this.label ? this.labelId || `${this.inputId}-label` : undefined, class: 'searchcraft-select-input', disabled: this.disabled, id: this.inputId, name: this.name, onChange: this.handleSelectChange }, (typeof this.options === 'string'
+            ? JSON.parse(this.options)
+            : this.options).map(({ label, value, selected }) => {
+            return (h("option", { key: value, value: value, selected: selected }, label));
+        })), h("svg", { key: '51d9fb79381468ee0992475ba376df5a5961116c', class: 'searchcraft-select-input-icon', width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, h("title", { key: '59186138953557764915d41708d4bcc23a9bb97f' }, "Select dropdown icon"), h("path", { key: 'ec2c962df16cb68bdaf3e2c32e57d875a63957a9', d: 'M5 7.5L10 12.5L15 7.5', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' }))), this.caption && (h("p", { key: '742bc2dbd8371938894d49bb37d429d1b7a07d7a', class: 'searchcraft-select-caption' }, this.caption))));
+    }
+};
+
+export { SearchcraftSelect as searchcraft_select };
+
+//# sourceMappingURL=searchcraft-select.entry.js.map

package/dist/esm/searchcraft-select.entry.js.map

@@ -0,0 +1 @@
+{"file":"searchcraft-select.entry.js","mappings":";;;;MAmCa,iBAAiB;;;;;;;;IAIpB,OAAO,CAAU;;;;IAIjB,QAAQ,GAAa,KAAK,CAAC;;;;IAI3B,OAAO,CAAU;;;;IAIjB,KAAK,CAAU;;;;IAIf,OAAO,CAAU;;;;IAIjB,IAAI,CAAU;;;;IAId,OAAO,GAAuC,EAAE,CAAC;;;;IAIjD,YAAY,CAAU;;;;IAIrB,YAAY,CAAwB;IAEpC,oBAAoB,CAAC;IAErB,oBAAoB,GAA2B,SAAQ,CAAC;IACxD,uBAAuB,GAA8B,SAAQ,CAAC;IAE/D,kBAAkB,GAAG,CAAC,KAAK;QACjC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KAC5C,CAAC;IAEF,cAAc,CAAC,IAAY;QACzB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;KACjC;IAED,MAAM;QACJ,QACE,4DACE,KAAK,EAAE,UAAU,CACf,oBAAoB,EACpB,iBAAiB,CAAC,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAC3C,IAEA,IAAI,CAAC,KAAK,KACT,8DACE,KAAK,EAAC,0BAA0B,EAChC,EAAE,EAAE,IAAI,CAAC,OAAO,IAAI,GAAG,IAAI,CAAC,OAAO,QAAQ,EAC3C,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,KAAK,CACL,CACT,EACD,4DAAK,KAAK,EAAC,kCAAkC,IAC3C,kFAEI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,IAAI,GAAG,IAAI,CAAC,OAAO,QAAQ,GAAG,SAAS,EAElE,KAAK,EAAC,0BAA0B,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,kBAAkB,IAEhC,CAAC,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ;cAC9B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;cACxB,IAAI,CAAC,OAAO,EACd,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE;YAC/B,QACE,cAAQ,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,IACjD,KAAK,CACC,EACT;SACH,CAAC,CACK,EACT,4DACE,KAAK,EAAC,+BAA+B,EACrC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,IAElC,uFAAmC,EACnC,6DACE,CAAC,EAAC,uBAAuB,EACzB,MAAM,EAAC,cAAc,kBACR,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACF,EACL,IAAI,CAAC,OAAO,KACX,0DAAG,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,OAAO,CAAK,CACzD,CACG,EACN;KACH;;;;;","names":[],"sources":["src/components/searchcraft-select/searchcraft-select.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  State,\n  Prop,\n  type EventEmitter,\n  Event,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils';\n\nexport type SearchcraftSelectOption = {\n  label: string;\n  value: string | number;\n  selected?: boolean;\n};\n\n/**\n * This web component is designed to allow users to select between a group of options.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-select\n *  inputId=\"searchcraft-select\"\n *  name=\"searchcraft-select\"\n *  options=\"[{ label: 'label', value: 'value' }]\"\n * />\n * ```\n */\n@Component({\n  tag: 'searchcraft-select',\n  shadow: false,\n})\nexport class SearchcraftSelect {\n  /**\n   * The caption displayed below the select input.\n   */\n  @Prop() caption?: string;\n  /**\n   * Whether the select input is disabled.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The ID for the select input.\n   */\n  @Prop() inputId!: string;\n  /**\n   * The label of the select input.\n   */\n  @Prop() label?: string;\n  /**\n   * The ID for the label of the select input.\n   */\n  @Prop() labelId?: string;\n  /**\n   * The name of the select input.\n   */\n  @Prop() name!: string;\n  /**\n   * The options for the select input.\n   */\n  @Prop() options: SearchcraftSelectOption[] | string = [];\n  /**\n   * A custom styles object.\n   */\n  @Prop() customStyles?: string;\n  /**\n   * The event fired when the select is changed.\n   */\n  @Event() selectChange!: EventEmitter<string>;\n\n  @State() searchResultsPerPage;\n\n  @State() setSearchResultsPage: (page: number) => void = () => {};\n  @State() setSearchResultsPerPage: (perPage: number) => void = () => {};\n\n  private handleSelectChange = (event) => {\n    this.selectChange.emit(event.target.value);\n  };\n\n  handleGoToPage(page: number) {\n    this.setSearchResultsPage(page);\n  }\n\n  render() {\n    return (\n      <div\n        class={classNames(\n          'searchcraft-select',\n          parseCustomStyles(this.customStyles || {}),\n        )}\n      >\n        {this.label && (\n          <label\n            class='searchcraft-select-label'\n            id={this.labelId || `${this.inputId}-label`}\n            htmlFor={this.inputId}\n          >\n            {this.label}\n          </label>\n        )}\n        <div class='searchcraft-select-input-wrapper'>\n          <select\n            aria-labelledby={\n              this.label ? this.labelId || `${this.inputId}-label` : undefined\n            }\n            class='searchcraft-select-input'\n            disabled={this.disabled}\n            id={this.inputId}\n            name={this.name}\n            onChange={this.handleSelectChange}\n          >\n            {(typeof this.options === 'string'\n              ? JSON.parse(this.options)\n              : this.options\n            ).map(({ label, value, selected }) => {\n              return (\n                <option key={value} value={value} selected={selected}>\n                  {label}\n                </option>\n              );\n            })}\n          </select>\n          <svg\n            class='searchcraft-select-input-icon'\n            width='20'\n            height='20'\n            viewBox='0 0 20 20'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n          >\n            <title>Select dropdown icon</title>\n            <path\n              d='M5 7.5L10 12.5L15 7.5'\n              stroke='currentColor'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        </div>\n        {this.caption && (\n          <p class='searchcraft-select-caption'>{this.caption}</p>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}