@searchcraft/javascript-sdk 0.8.2 → 0.9.1

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

@@ -1,141 +0,0 @@
-import { useSearchcraftStore } from "../../provider/store";
-import { h } from "@stencil/core";
-import classNames from "classnames";
-import { parseCustomStyles } from "../../utils/index";
-/**
- * This web component is designed to facilitate pagination of search results.
- * Once a query is submitted, calculates the number for pages.
- *
- * ## Usage
- * ```html
- * <!-- index.html -->
- * <searchcraft-pagination />
- * ```
- */
-export class SearchcraftPagination {
-    /**
-     * The custom styles object.
-     */
-    customStyles;
-    // store vars
-    searchTerm;
-    searchResultsPerPage;
-    searchResultsPage;
-    searchResultsCount;
-    // local vars
-    searchResultsPagesCount = 1;
-    searchResultsRangeMin = 1;
-    searchResultsRangeMax = 1;
-    // store functions
-    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);
-            this.searchResultsRangeMin =
-                (this.searchResultsPage - 1) * this.searchResultsPerPage + 1;
-            this.searchResultsRangeMax =
-                (this.searchResultsPerPage - 1) * this.searchResultsPerPage +
-                    this.searchResultsPerPage;
-            // store functions
-            this.setSearchResultsPage = state.setSearchResultsPage;
-        });
-    }
-    disconnectedCallback() {
-        this.unsubscribe?.();
-    }
-    handleGoToPage(page) {
-        this.setSearchResultsPage(page);
-    }
-    renderOddPaginationItem(page) {
-        return (h("li", null, h("button", { class: classNames('searchcraft-pagination-item', {
-                'searchcraft-pagination-item-active': this.searchResultsPage === page,
-            }), onClick: () => this.handleGoToPage(page), type: 'button' }, page)));
-    }
-    renderEvenPaginationItem(page) {
-        if (this.searchResultsPagesCount <= page) {
-            return;
-        }
-        if (this.searchResultsPagesCount <= 5 ||
-            page < Math.ceil(this.searchResultsPagesCount / 2) // is the first or second even pagination item
-            ? this.searchResultsPage <= page + 1
-            : this.searchResultsPage >= page - 1) {
-            return (h("li", null, h("button", { class: classNames('searchcraft-pagination-item', {
-                    'searchcraft-pagination-item-active': this.searchResultsPage === page,
-                }), onClick: () => this.handleGoToPage(page), type: 'button' }, page)));
-        }
-        return (h("li", null, h("span", { class: 'searchcraft-pagination-item' }, "...")));
-    }
-    renderMiddlePaginationItem() {
-        if (this.searchResultsPagesCount <= 3) {
-            return;
-        }
-        if (this.searchResultsPagesCount <= 5 ||
-            this.searchResultsPage <= 3 ||
-            this.searchResultsPage >= this.searchResultsPagesCount - 2) {
-            return (h("li", null, h("button", { class: classNames('searchcraft-pagination-item', {
-                    'searchcraft-pagination-item-active': this.searchResultsPage === 3 ||
-                        this.searchResultsPage === this.searchResultsPagesCount - 2,
-                }), type: 'button', onClick: () => this.handleGoToPage(this.searchResultsPage >= this.searchResultsPagesCount - 2
-                    ? this.searchResultsPagesCount - 2
-                    : 3) }, this.searchResultsPage >= this.searchResultsPagesCount - 2
-                ? this.searchResultsPagesCount - 2
-                : 3)));
-        }
-        return (h("li", null, h("span", { class: 'searchcraft-pagination-item searchcraft-pagination-item-active' }, this.searchResultsPage)));
-    }
-    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-pagination', parseCustomStyles(this.customStyles || {})) }, h("div", { class: 'searchcraft-pagination-control' }, h("searchcraft-button", { disabled: this.searchResultsPage === 1, hierarchy: 'tertiary', onButtonClick: () => this.handleGoToPage(Math.max(1, this.searchResultsPage - 1)), label: 'Previous', iconPosition: 'left', icon: h("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, h("title", null, "Previous page icon"), h("path", { d: 'M12.5 15L7.5 10L12.5 5', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })), iconOnly: true })), h("ul", { class: 'searchcraft-pagination-list' }, this.renderOddPaginationItem(1), this.renderEvenPaginationItem(2), this.renderMiddlePaginationItem(), this.renderEvenPaginationItem(this.searchResultsPagesCount > 4
-            ? this.searchResultsPagesCount - 1
-            : 4), this.renderOddPaginationItem(this.searchResultsPagesCount)), h("div", { class: 'searchcraft-pagination-control' }, h("searchcraft-button", { disabled: this.searchResultsPage === this.searchResultsPagesCount, hierarchy: 'tertiary', onButtonClick: () => {
-                this.handleGoToPage(Math.min(this.searchResultsPagesCount, this.searchResultsPage + 1));
-            }, label: 'Next', iconPosition: 'right', icon: h("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, h("title", null, "Next page icon"), h("path", { d: 'M7.5 15L12.5 10L7.5 5', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })), iconOnly: true }))));
-    }
-    static get is() { return "searchcraft-pagination"; }
-    static get properties() {
-        return {
-            "customStyles": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The custom styles object."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "custom-styles",
-                "reflect": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "searchTerm": {},
-            "searchResultsPerPage": {},
-            "searchResultsPage": {},
-            "searchResultsCount": {},
-            "searchResultsPagesCount": {},
-            "searchResultsRangeMin": {},
-            "searchResultsRangeMax": {},
-            "setSearchResultsPage": {}
-        };
-    }
-}
-//# sourceMappingURL=searchcraft-pagination.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"searchcraft-pagination.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-pagination/searchcraft-pagination.tsx"],"names":[],"mappings":"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","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 facilitate pagination of search results.\n * Once a query is submitted, calculates the number for pages.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-pagination />\n * ```\n */\n@Component({\n  tag: 'searchcraft-pagination',\n  shadow: false,\n})\nexport class SearchcraftPagination {\n  /**\n   * The custom styles object.\n   */\n  @Prop() customStyles?: string;\n\n  // store vars\n  @State() searchTerm;\n  @State() searchResultsPerPage;\n  @State() searchResultsPage;\n  @State() searchResultsCount;\n\n  // local vars\n  @State() searchResultsPagesCount = 1;\n  @State() searchResultsRangeMin = 1;\n  @State() searchResultsRangeMax = 1;\n\n  // store functions\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      this.searchResultsRangeMin =\n        (this.searchResultsPage - 1) * this.searchResultsPerPage + 1;\n      this.searchResultsRangeMax =\n        (this.searchResultsPerPage - 1) * this.searchResultsPerPage +\n        this.searchResultsPerPage;\n\n      // store functions\n      this.setSearchResultsPage = state.setSearchResultsPage;\n    });\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n  }\n\n  handleGoToPage(page: number) {\n    this.setSearchResultsPage(page);\n  }\n\n  renderOddPaginationItem(page: number) {\n    return (\n      <li>\n        <button\n          class={classNames('searchcraft-pagination-item', {\n            'searchcraft-pagination-item-active':\n              this.searchResultsPage === page,\n          })}\n          onClick={() => this.handleGoToPage(page)}\n          type='button'\n        >\n          {page}\n        </button>\n      </li>\n    );\n  }\n\n  renderEvenPaginationItem(page: number) {\n    if (this.searchResultsPagesCount <= page) {\n      return;\n    }\n\n    if (\n      this.searchResultsPagesCount <= 5 ||\n      page < Math.ceil(this.searchResultsPagesCount / 2) // is the first or second even pagination item\n        ? this.searchResultsPage <= page + 1\n        : this.searchResultsPage >= page - 1\n    ) {\n      return (\n        <li>\n          <button\n            class={classNames('searchcraft-pagination-item', {\n              'searchcraft-pagination-item-active':\n                this.searchResultsPage === page,\n            })}\n            onClick={() => this.handleGoToPage(page)}\n            type='button'\n          >\n            {page}\n          </button>\n        </li>\n      );\n    }\n\n    return (\n      <li>\n        <span class='searchcraft-pagination-item'>...</span>\n      </li>\n    );\n  }\n\n  renderMiddlePaginationItem() {\n    if (this.searchResultsPagesCount <= 3) {\n      return;\n    }\n\n    if (\n      this.searchResultsPagesCount <= 5 ||\n      this.searchResultsPage <= 3 ||\n      this.searchResultsPage >= this.searchResultsPagesCount - 2\n    ) {\n      return (\n        <li>\n          <button\n            class={classNames('searchcraft-pagination-item', {\n              'searchcraft-pagination-item-active':\n                this.searchResultsPage === 3 ||\n                this.searchResultsPage === this.searchResultsPagesCount - 2,\n            })}\n            type='button'\n            onClick={() =>\n              this.handleGoToPage(\n                this.searchResultsPage >= this.searchResultsPagesCount - 2\n                  ? this.searchResultsPagesCount - 2\n                  : 3,\n              )\n            }\n          >\n            {this.searchResultsPage >= this.searchResultsPagesCount - 2\n              ? this.searchResultsPagesCount - 2\n              : 3}\n          </button>\n        </li>\n      );\n    }\n\n    return (\n      <li>\n        <span class='searchcraft-pagination-item searchcraft-pagination-item-active'>\n          {this.searchResultsPage}\n        </span>\n      </li>\n    );\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-pagination',\n          parseCustomStyles(this.customStyles || {}),\n        )}\n      >\n        <div class='searchcraft-pagination-control'>\n          <searchcraft-button\n            disabled={this.searchResultsPage === 1}\n            hierarchy='tertiary'\n            onButtonClick={() =>\n              this.handleGoToPage(Math.max(1, this.searchResultsPage - 1))\n            }\n            label='Previous'\n            iconPosition='left'\n            icon={\n              <svg\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>Previous page icon</title>\n                <path\n                  d='M12.5 15L7.5 10L12.5 5'\n                  stroke='currentColor'\n                  stroke-width='1.5'\n                  stroke-linecap='round'\n                  stroke-linejoin='round'\n                />\n              </svg>\n            }\n            iconOnly\n          />\n        </div>\n        <ul class='searchcraft-pagination-list'>\n          {this.renderOddPaginationItem(1)}\n          {this.renderEvenPaginationItem(2)}\n          {this.renderMiddlePaginationItem()}\n          {this.renderEvenPaginationItem(\n            this.searchResultsPagesCount > 4\n              ? this.searchResultsPagesCount - 1\n              : 4,\n          )}\n          {this.renderOddPaginationItem(this.searchResultsPagesCount)}\n        </ul>\n        <div class='searchcraft-pagination-control'>\n          <searchcraft-button\n            disabled={this.searchResultsPage === this.searchResultsPagesCount}\n            hierarchy='tertiary'\n            onButtonClick={() => {\n              this.handleGoToPage(\n                Math.min(\n                  this.searchResultsPagesCount,\n                  this.searchResultsPage + 1,\n                ),\n              );\n            }}\n            label='Next'\n            iconPosition='right'\n            icon={\n              <svg\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>Next page icon</title>\n                <path\n                  d='M7.5 15L12.5 10L7.5 5'\n                  stroke='currentColor'\n                  stroke-width='1.5'\n                  stroke-linecap='round'\n                  stroke-linejoin='round'\n                />\n              </svg>\n            }\n            iconOnly\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,15 +0,0 @@
-import { useSearchcraftStore } from "../../provider/store";
-import { h } from "@stencil/core";
-/**
- * Renders a button which, when clicked, turns on popover visibility.
- */
-export class SearchcraftPopoverButton {
-    handleOnClick() {
-        useSearchcraftStore.getState().setPopoverVisibility(true);
-    }
-    render() {
-        return (h("button", { key: '538e1e8506bea196e6ba45482f9daa75d032462f', type: 'button', onClick: this.handleOnClick.bind(this) }, h("slot", { key: '788b70da6edcbfb283d373ada36709582ad16e51' })));
-    }
-    static get is() { return "searchcraft-popover-button"; }
-}
-//# sourceMappingURL=searchcraft-popover-button.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"searchcraft-popover-button.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-popover-button/searchcraft-popover-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;GAEG;AAKH,MAAM,OAAO,wBAAwB;IACnC,aAAa;QACX,mBAAmB,CAAC,QAAQ,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAC5D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;YAC1D,8DAAQ,CACD,CACV,CAAC;IACJ,CAAC;;CACF","sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport { Component, h } from '@stencil/core';\n\n/**\n * Renders a button which, when clicked, turns on popover visibility.\n */\n@Component({\n  tag: 'searchcraft-popover-button',\n  shadow: false,\n})\nexport class SearchcraftPopoverButton {\n  handleOnClick() {\n    useSearchcraftStore.getState().setPopoverVisibility(true);\n  }\n\n  render() {\n    return (\n      <button type='button' onClick={this.handleOnClick.bind(this)}>\n        <slot />\n      </button>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-popover-form/searchcraft-popover-form.js

@@ -1,381 +0,0 @@
-import { h } from "@stencil/core";
-import classNames from "classnames";
-import { useSearchcraftStore } from "../../provider/store";
-/**
- * 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.
- *
- * ## Usage
- * ```html
- * <!-- index.html -->
- * <searchcraft-popover-form type="fullscreen" />
- * ```
- *
- * ```js
- * // index.js
- * const popoverForm = document.querySelector('searchcraft-popover-form');
- *
- * popoverForm.config = {
- *   index: [index_name_from_vektron],
- *   readKey: 'read_key_from_vektron',
- *   endpointUrl: 'enpoint_url_from_vektron',
- * };
- *
- * popoverForm.popoverResultMappings = {
- *  containerHref: {
- *   fieldNames: [
- *    {
- *      fieldName: 'canonical_link',
- *      dataType: 'text',
- *    },
- *  ],
- *  };
- * ```
- */
-export class SearchcraftPopoverForm {
-    /**
-     * The Searchcraft config object.
-     */
-    config;
-    /**
-     * The type of popover form to render.
-     *
-     * - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content.
-     * - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component.
-     * - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.
-     */
-    type = 'inline';
-    /**
-     * Formats the content rendered for each result.
-     */
-    popoverResultMappings;
-    /**
-     * The hotkey that activates the popover.
-     */
-    hotkey = 'k';
-    /**
-     * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.
-     */
-    hotkeyModifier = 'meta';
-    isPopoverVisibleInState = false;
-    unsubscribe;
-    searchClientResponseItems = [];
-    adClientResponseItems = [];
-    searchTerm;
-    isFocused = false;
-    breakpointSm = 576;
-    breakpointMd = 768;
-    breakpointLg = 992;
-    searchResultsPage;
-    searchResultsPerPage;
-    modalElement;
-    hostElement;
-    componentDidLoad() {
-        // Loads the breakpoint values into state
-        const computedStyle = getComputedStyle(document.documentElement);
-        this.breakpointSm = Number.parseFloat(computedStyle.getPropertyValue('--sc-breakpoint-sm').trim());
-        this.breakpointMd = Number.parseFloat(computedStyle.getPropertyValue('--sc-breakpoint-md').trim());
-        this.breakpointLg = Number.parseFloat(computedStyle.getPropertyValue('--sc-breakpoint-lg').trim());
-        // Set popover visiblity in state
-        this.isPopoverVisibleInState =
-            useSearchcraftStore.getState().isPopoverVisible;
-        // Add event listeners
-        document.addEventListener('click', this.handleDocumentClick);
-        document.addEventListener('keydown', this.handleDocumentKeyDown);
-        // Subscribe to state events
-        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
-            if (this.isPopoverVisibleInState !== state.isPopoverVisible) {
-                this.handlePopoverVisibilityChange(state.isPopoverVisible);
-            }
-            this.searchClientResponseItems = [...state.searchClientResponseItems];
-            this.adClientResponseItems = [...state.adClientResponseItems];
-            this.searchTerm = state.searchTerm;
-            this.searchResultsPage = state.searchResultsPage;
-            this.searchResultsPerPage = state.searchResultsPerPage;
-        });
-    }
-    disconnectedCallback() {
-        this.unsubscribe?.();
-        document.removeEventListener('click', this.handleDocumentClick);
-        document.removeEventListener('keydown', this.handleDocumentKeyDown);
-    }
-    handleDocumentClick = (event) => {
-        if (!this.hostElement.contains(event.target)) {
-            this.isFocused = false;
-        }
-    };
-    /**
-     * Handles when popover visibility is changed in state
-     */
-    handlePopoverVisibilityChange(isVisible) {
-        this.isPopoverVisibleInState = isVisible;
-        document.body.style.overflow = isVisible ? 'hidden' : 'auto';
-    }
-    /**
-     * Actions to perform when various keys are pressed within the popover form.
-     */
-    handleDocumentKeyDown = (event) => {
-        // Document-scoped actions
-        if (event.key === this.hotkey) {
-            this.handleHotkeyPressed(event);
-        }
-        // Document-scoped -> Popover-scoped keyboard event boundary
-        if (!this.hostElement.contains(document.activeElement)) {
-            return;
-        }
-        // Popover-scoped actions
-        switch (event.key) {
-            case 'ArrowDown':
-            case 'ArrowUp':
-                event.preventDefault();
-                this.focusOnNextListItem(event.key);
-                break;
-            case 'Escape':
-                useSearchcraftStore.getState().setPopoverVisibility(false);
-                break;
-            default:
-                return;
-        }
-    };
-    handleInputInit = () => {
-        const input = this.hostElement.querySelector('.searchcraft-input');
-        input?.focus();
-    };
-    /**
-     * When popover is `inline` and the viewport is at the smallest breakpoint,
-     * focusing on the input will open a modal version of the popover form.
-     */
-    handleInputFocus() {
-        this.isFocused = true;
-        if (this.type === 'inline' &&
-            window.visualViewport &&
-            window.visualViewport.width < this.breakpointSm) {
-            useSearchcraftStore.getState().setPopoverVisibility(true);
-            // Appends a popover form of type=`modal` to the body
-            if (!this.modalElement) {
-                this.modalElement = document.createElement('searchcraft-popover-form');
-                this.modalElement.config = this.config;
-                this.modalElement.popoverResultMappings = this.popoverResultMappings;
-                this.modalElement.setAttribute('type', 'fullscreen');
-                document.body.appendChild(this.modalElement);
-            }
-        }
-    }
-    handleModalBackdropClick(_event) {
-        useSearchcraftStore.getState().setPopoverVisibility(false);
-    }
-    /**
-     * When a hotkey is pressed, tests if the modifiers also match.
-     * If modifiers match, toggles visibility of the popover modal.
-     */
-    handleHotkeyPressed(event) {
-        if ((event.ctrlKey && this.hotkeyModifier === 'ctrl') ||
-            (event.altKey && this.hotkeyModifier === 'alt') ||
-            (event.metaKey && this.hotkeyModifier === 'meta')) {
-            event.preventDefault();
-            if (this.type === 'inline' && !this.isPopoverVisibleInState) {
-                const hostElementInput = this.hostElement.querySelector('.searchcraft-input');
-                hostElementInput?.focus();
-            }
-            else {
-                useSearchcraftStore
-                    .getState()
-                    .setPopoverVisibility(!this.isPopoverVisibleInState);
-            }
-        }
-    }
-    handleCancelButtonClick() {
-        useSearchcraftStore.getState().setPopoverVisibility(false);
-    }
-    /**
-     * Moves focus to the next/previous list item in the list view. If you are at the top
-     * of the list view, it moves focus back to the input.
-     *
-     * @param direction
-     */
-    focusOnNextListItem(direction) {
-        const listItems = Array.from(document.querySelectorAll('a.searchcraft-popover-list-item')).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);
-        const currentIndex = listItems.indexOf(document.activeElement);
-        if (direction === 'ArrowDown') {
-            listItems[(currentIndex + 1) % listItems.length]?.focus();
-        }
-        else if (direction === 'ArrowUp') {
-            if (currentIndex >= 1) {
-                listItems[currentIndex - 1]?.focus();
-            }
-            else {
-                const input = document.querySelector('.searchcraft-input');
-                if (input) {
-                    input.focus();
-                    requestAnimationFrame(() => {
-                        input.selectionEnd = input.value.length;
-                        input.selectionStart = input.value.length;
-                    });
-                }
-            }
-        }
-    }
-    get hasResultsToShow() {
-        return (this.searchTerm &&
-            this.searchTerm?.trim()?.length > 0 &&
-            this.searchClientResponseItems.length > 0);
-    }
-    renderInlinePopover() {
-        const isListViewVisible = this.hasResultsToShow && this.isFocused;
-        const popoverFormClassNames = classNames('searchcraft-popover-form searchcraft-popover-form-inline', {
-            'searchcraft-popover-form-active': isListViewVisible,
-        });
-        return (h("div", { class: popoverFormClassNames }, h("searchcraft-input-form", { config: this.config, onInputFocus: this.handleInputFocus.bind(this) }), isListViewVisible && (h("div", { class: 'searchcraft-popover-inline-wrapper-outer' }, h("div", { class: 'searchcraft-popover-inline-wrapper-inner' }, h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage }))))));
-    }
-    renderModalPopover() {
-        if (this.isPopoverVisibleInState) {
-            const popoverFormClassNames = classNames('searchcraft-popover-form', {
-                'searchcraft-popover-form-active': this.hasResultsToShow,
-            });
-            return (h("div", { class: 'searchcraft-popover-form-modal' }, h("div", { class: 'searchcraft-popover-form-modal-backdrop', onClick: this.handleModalBackdropClick }), h("div", { class: 'searchcraft-popover-form-modal-inner' }, h("div", { class: popoverFormClassNames }, h("div", { class: 'searchcraft-popover-form-input-wrapper' }, h("searchcraft-input-form", { config: this.config, onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this) }), h("button", { type: 'button', class: 'searchcraft-popover-form-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), this.hasResultsToShow && (h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage }))))));
-        }
-    }
-    renderFullscreenPopover() {
-        if (this.isPopoverVisibleInState) {
-            return (h("div", { class: 'searchcraft-popover-form-fullscreen' }, h("div", { class: 'searchcraft-popover-form' }, h("div", { class: 'searchcraft-popover-form-input-wrapper' }, h("searchcraft-input-form", { config: this.config, onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this) }), h("button", { type: 'button', class: 'searchcraft-popover-form-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), this.hasResultsToShow && (h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage })))));
-        }
-    }
-    render() {
-        switch (this.type) {
-            case 'inline':
-                return this.renderInlinePopover();
-            case 'modal':
-                return this.renderModalPopover();
-            case 'fullscreen':
-                return this.renderFullscreenPopover();
-        }
-    }
-    static get is() { return "searchcraft-popover-form"; }
-    static get properties() {
-        return {
-            "config": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SearchcraftConfig | undefined",
-                    "resolved": "SearchcraftConfig | undefined",
-                    "references": {
-                        "SearchcraftConfig": {
-                            "location": "import",
-                            "path": "@searchcraft/core",
-                            "id": "../core-sdk/dist/index.d.ts::SearchcraftConfig"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The Searchcraft config object."
-                },
-                "getter": false,
-                "setter": false
-            },
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'inline' | 'fullscreen' | 'modal'",
-                    "resolved": "\"fullscreen\" | \"inline\" | \"modal\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "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."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "type",
-                "reflect": false,
-                "defaultValue": "'inline'"
-            },
-            "popoverResultMappings": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "PopoverResultMappings | undefined",
-                    "resolved": "undefined | { title?: SearchResultMapping | undefined; subtitle?: SearchResultMapping | undefined; imageSource?: SearchResultMapping | undefined; imageAlt?: SearchResultMapping | undefined; href?: SearchResultMapping | undefined; }",
-                    "references": {
-                        "PopoverResultMappings": {
-                            "location": "import",
-                            "path": "@searchcraft/core",
-                            "id": "../core-sdk/dist/index.d.ts::PopoverResultMappings"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Formats the content rendered for each result."
-                },
-                "getter": false,
-                "setter": false
-            },
-            "hotkey": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The hotkey that activates the popover."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "hotkey",
-                "reflect": false,
-                "defaultValue": "'k'"
-            },
-            "hotkeyModifier": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'ctrl' | 'meta' | 'alt' | 'option'",
-                    "resolved": "\"alt\" | \"ctrl\" | \"meta\" | \"option\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The hotkey modifier that activates the popover. Used together with the `hotkey` prop."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "hotkey-modifier",
-                "reflect": false,
-                "defaultValue": "'meta'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isPopoverVisibleInState": {},
-            "unsubscribe": {},
-            "searchClientResponseItems": {},
-            "adClientResponseItems": {},
-            "searchTerm": {},
-            "isFocused": {},
-            "breakpointSm": {},
-            "breakpointMd": {},
-            "breakpointLg": {},
-            "searchResultsPage": {},
-            "searchResultsPerPage": {},
-            "modalElement": {}
-        };
-    }
-    static get elementRef() { return "hostElement"; }
-}
-//# sourceMappingURL=searchcraft-popover-form.js.map

package/dist/collection/components/searchcraft-popover-form/searchcraft-popover-form.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"searchcraft-popover-form.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-popover-form/searchcraft-popover-form.tsx"],"names":[],"mappings":"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","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"]}