@searchcraft/javascript-sdk 0.6.0 → 0.7.1

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

@@ -32,57 +32,40 @@ import { useSearchcraftStore } from "../../provider/store";
  * ```
  */
 export class SearchcraftPopoverForm {
-    constructor() {
-        this.handleDocumentClick = (event) => {
-            if (!this.hostElement.contains(event.target)) {
-                this.isFocused = false;
-            }
-        };
-        /**
-         * Actions to perform when various keys are pressed within the popover form.
-         */
-        this.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;
-            }
-        };
-        this.handleInputInit = () => {
-            const input = this.hostElement.querySelector('.searchcraft-input');
-            input === null || input === void 0 ? void 0 : input.focus();
-        };
-        this.config = undefined;
-        this.type = 'inline';
-        this.popoverResultMappings = undefined;
-        this.hotkey = 'k';
-        this.hotkeyModifier = 'meta';
-        this.isPopoverVisibleInState = false;
-        this.unsubscribe = undefined;
-        this.searchResults = undefined;
-        this.searchTerm = undefined;
-        this.isFocused = false;
-        this.breakpointSm = 576;
-        this.breakpointMd = 768;
-        this.breakpointLg = 992;
-        this.modalElement = undefined;
-    }
+    /**
+     * 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;
+    searchResults;
+    searchTerm;
+    isFocused = false;
+    breakpointSm = 576;
+    breakpointMd = 768;
+    breakpointLg = 992;
+    modalElement;
+    hostElement;
     componentDidLoad() {
         // Loads the breakpoint values into state
         const computedStyle = getComputedStyle(document.documentElement);
@@ -100,16 +83,20 @@ export class SearchcraftPopoverForm {
             if (this.isPopoverVisibleInState !== state.isPopoverVisible) {
                 this.handlePopoverVisibilityChange(state.isPopoverVisible);
             }
-            this.searchResults = Object.assign({}, state.searchResults);
+            this.searchResults = { ...state.searchResults };
             this.searchTerm = state.query;
         });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+        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
      */
@@ -117,6 +104,36 @@ export class SearchcraftPopoverForm {
         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.
@@ -124,6 +141,7 @@ export class SearchcraftPopoverForm {
     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
@@ -150,7 +168,7 @@ export class SearchcraftPopoverForm {
             event.preventDefault();
             if (this.type === 'inline' && !this.isPopoverVisibleInState) {
                 const hostElementInput = this.hostElement.querySelector('.searchcraft-input');
-                hostElementInput === null || hostElementInput === void 0 ? void 0 : hostElementInput.focus();
+                hostElementInput?.focus();
             }
             else {
                 useSearchcraftStore
@@ -169,15 +187,14 @@ export class SearchcraftPopoverForm {
      * @param direction
      */
     focusOnNextListItem(direction) {
-        var _a, _b;
         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') {
-            (_a = listItems[(currentIndex + 1) % listItems.length]) === null || _a === void 0 ? void 0 : _a.focus();
+            listItems[(currentIndex + 1) % listItems.length]?.focus();
         }
         else if (direction === 'ArrowUp') {
             if (currentIndex >= 1) {
-                (_b = listItems[currentIndex - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+                listItems[currentIndex - 1]?.focus();
             }
             else {
                 const input = document.querySelector('.searchcraft-input');
@@ -192,9 +209,9 @@ export class SearchcraftPopoverForm {
         }
     }
     get hasResultsToShow() {
-        var _a, _b, _c, _d, _e;
-        return (((_b = (_a = this.searchTerm) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
-            ((_e = (_d = (_c = this.searchResults) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.hits) === null || _e === void 0 ? void 0 : _e.length) > 0);
+        return (this.searchTerm &&
+            this.searchTerm?.trim()?.length > 0 &&
+            (this.searchResults?.data?.hits?.length || 0) > 0);
     }
     renderInlinePopover(documents) {
         const isListViewVisible = this.hasResultsToShow && this.isFocused;
@@ -217,8 +234,7 @@ export class SearchcraftPopoverForm {
         }
     }
     render() {
-        var _a, _b, _c;
-        const documents = (_c = (_b = (_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.map((data, _index) => {
+        const documents = this.searchResults?.data?.hits?.map((data, _index) => {
             const { doc: result } = data;
             return result;
         });
@@ -232,16 +248,6 @@ export class SearchcraftPopoverForm {
         }
     }
     static get is() { return "searchcraft-popover-form"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["searchcraft-popover-form.module.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["searchcraft-popover-form.module.css"]
-        };
-    }
     static get properties() {
         return {
             "config": {
@@ -249,7 +255,7 @@ export class SearchcraftPopoverForm {
                 "mutable": false,
                 "complexType": {
                     "original": "SearchcraftConfig | undefined",
-                    "resolved": "SearchcraftConfig",
+                    "resolved": "SearchcraftConfig | undefined",
                     "references": {
                         "SearchcraftConfig": {
                             "location": "import",
@@ -263,7 +269,9 @@ export class SearchcraftPopoverForm {
                 "docs": {
                     "tags": [],
                     "text": "The Searchcraft config object."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "type": {
                 "type": "string",
@@ -279,6 +287,8 @@ export class SearchcraftPopoverForm {
                     "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'"
@@ -288,7 +298,7 @@ export class SearchcraftPopoverForm {
                 "mutable": false,
                 "complexType": {
                     "original": "PopoverResultMappings | undefined",
-                    "resolved": "{ title?: SearchResultMapping; subtitle?: SearchResultMapping; imageSource?: SearchResultMapping; imageAlt?: SearchResultMapping; href?: SearchResultMapping; }",
+                    "resolved": "undefined | { title?: SearchResultMapping | undefined; subtitle?: SearchResultMapping | undefined; imageSource?: SearchResultMapping | undefined; imageAlt?: SearchResultMapping | undefined; href?: SearchResultMapping | undefined; }",
                     "references": {
                         "PopoverResultMappings": {
                             "location": "import",
@@ -302,7 +312,9 @@ export class SearchcraftPopoverForm {
                 "docs": {
                     "tags": [],
                     "text": "Formats the content rendered for each result."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "hotkey": {
                 "type": "string",
@@ -318,6 +330,8 @@ export class SearchcraftPopoverForm {
                     "tags": [],
                     "text": "The hotkey that activates the popover."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hotkey",
                 "reflect": false,
                 "defaultValue": "'k'"
@@ -336,6 +350,8 @@ export class SearchcraftPopoverForm {
                     "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'"

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

@@ -1 +1 @@
-{"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 { 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  styleUrl: 'searchcraft-popover-form.module.scss',\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 };\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.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?.trim()?.length > 0 &&\n      this.searchResults?.data?.hits?.length > 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      });\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.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 { 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"]}

package/dist/collection/components/searchcraft-popover-list-item/searchcraft-popover-list-item.js

@@ -1,34 +1,43 @@
+import { useSearchcraftStore } from "../../provider/store";
 import { h } from "@stencil/core";
 /**
  * A single list item rendered in a searchcraft-popover-list-view.
  */
 export class SearchcraftPopoverListItem {
-    constructor() {
-        this.titleContent = undefined;
-        this.subtitleContent = undefined;
-        this.imageSrc = undefined;
-        this.imageAlt = undefined;
-        this.href = undefined;
-        this.documentPosition = undefined;
-    }
+    /** The result title */
+    titleContent;
+    /** The result subtitle */
+    subtitleContent;
+    /** The source of the image. If not included, no item will be rendered. */
+    imageSrc;
+    /** The image alt tag. */
+    imageAlt;
+    /** The link href */
+    href;
+    /** The document position relative to the search results (For Measure) */
+    documentPosition = 0;
     componentDidLoad() { }
     connectedCallback() { }
     disconnectedCallback() { }
     handleButtonClick() { }
+    handleLinkClick = () => {
+        const state = useSearchcraftStore.getState();
+        const searchcraft = state.getSearchcraftInstance();
+        if (searchcraft) {
+            const document_position = this.documentPosition;
+            const search_term = state.query;
+            const number_of_documents = state.searchResults?.data?.hits?.length || 0;
+            searchcraft.sendMeasureEvent('document_clicked', {
+                document_position,
+                number_of_documents,
+                search_term,
+            });
+        }
+    };
     render() {
-        return (h("a", { key: 'b7a590e92994869477825dd17545e8d4e05d1d07', class: 'searchcraft-popover-list-item', href: this.href }, this.imageSrc && (h("div", { key: '129525e50ec17dce052f503af318b56e06c900ef', class: 'searchcraft-popover-list-item-image-wrapper' }, h("img", { key: '4ba701f35cbf7e167e7edd63ba19e3576e620c26', alt: this.imageAlt, src: this.imageSrc, class: 'searchcraft-popover-list-item-image' }))), h("div", { key: '6a6ab09451f5d9d4e554dc1f1fcd57ec13adf2f2', class: 'searchcraft-popover-list-item-info-wrapper' }, h("p", { key: '476fdefff6cb35167fb00f24cdf03b9f8d826ba5', class: 'searchcraft-popover-list-item-title' }, this.titleContent), h("p", { key: 'b43fd584bfcc8efc7d50d7220b649fafc8bba244', class: 'searchcraft-popover-list-item-subtitle' }, this.subtitleContent))));
+        return (h("a", { key: 'b20aae2fc421323774a5129dde7d53d4ae3283fb', class: 'searchcraft-popover-list-item', href: this.href, onClick: this.handleLinkClick.bind(this) }, this.imageSrc && (h("div", { key: '79541d12ea3adafff2e141cb8946aa3feaea51df', class: 'searchcraft-popover-list-item-image-wrapper' }, h("img", { key: '3e6368a0f544a58ee0af9d1c15d0c909c6231842', alt: this.imageAlt, src: this.imageSrc, class: 'searchcraft-popover-list-item-image' }))), h("div", { key: '87e7a9dcc8b868af259b4456e9962af9d8dee498', class: 'searchcraft-popover-list-item-info-wrapper' }, h("p", { key: 'e5b63b4c2752573d0ee0ef52c2903b593a8b94a0', class: 'searchcraft-popover-list-item-title' }, this.titleContent), h("p", { key: 'c506d5d7e569ec20885eb65cdc6476dfb8895a13', class: 'searchcraft-popover-list-item-subtitle' }, this.subtitleContent))));
     }
     static get is() { return "searchcraft-popover-list-item"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["searchcraft-popover-list-item.module.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["searchcraft-popover-list-item.module.css"]
-        };
-    }
     static get properties() {
         return {
             "titleContent": {
@@ -36,7 +45,7 @@ export class SearchcraftPopoverListItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -45,6 +54,8 @@ export class SearchcraftPopoverListItem {
                     "tags": [],
                     "text": "The result title"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "title-content",
                 "reflect": false
             },
@@ -53,7 +64,7 @@ export class SearchcraftPopoverListItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -62,6 +73,8 @@ export class SearchcraftPopoverListItem {
                     "tags": [],
                     "text": "The result subtitle"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "subtitle-content",
                 "reflect": false
             },
@@ -70,7 +83,7 @@ export class SearchcraftPopoverListItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -79,6 +92,8 @@ export class SearchcraftPopoverListItem {
                     "tags": [],
                     "text": "The source of the image. If not included, no item will be rendered."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "image-src",
                 "reflect": false
             },
@@ -87,7 +102,7 @@ export class SearchcraftPopoverListItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -96,6 +111,8 @@ export class SearchcraftPopoverListItem {
                     "tags": [],
                     "text": "The image alt tag."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "image-alt",
                 "reflect": false
             },
@@ -104,7 +121,7 @@ export class SearchcraftPopoverListItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -113,6 +130,8 @@ export class SearchcraftPopoverListItem {
                     "tags": [],
                     "text": "The link href"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": false
             },
@@ -130,8 +149,11 @@ export class SearchcraftPopoverListItem {
                     "tags": [],
                     "text": "The document position relative to the search results (For Measure)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "document-position",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "0"
             }
         };
     }

package/dist/collection/components/searchcraft-popover-list-item/searchcraft-popover-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-popover-list-item.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-popover-list-item/searchcraft-popover-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,0BAA0B;;;;;;;;;IAcrC,gBAAgB,KAAI,CAAC;IAErB,iBAAiB,KAAI,CAAC;IAEtB,oBAAoB,KAAI,CAAC;IAEzB,iBAAiB,KAAI,CAAC;IAEtB,MAAM;QACJ,OAAO,CACL,0DAAG,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI;YACrD,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,KAAK,EAAC,6CAA6C;gBACtD,4DACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,qCAAqC,GAC3C,CACE,CACP;YACD,4DAAK,KAAK,EAAC,4CAA4C;gBACrD,0DAAG,KAAK,EAAC,qCAAqC,IAAE,IAAI,CAAC,YAAY,CAAK;gBACtE,0DAAG,KAAK,EAAC,wCAAwC,IAC9C,IAAI,CAAC,eAAe,CACnB,CACA,CACJ,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { 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',\n  styleUrl: 'searchcraft-popover-list-item.module.scss',\n  shadow: false,\n})\nexport class SearchcraftPopoverListItem {\n  /** The result title */\n  @Prop() titleContent: string | undefined;\n  /** The result subtitle */\n  @Prop() subtitleContent: string | undefined;\n  /** The source of the image. If not included, no item will be rendered. */\n  @Prop() imageSrc: string | undefined;\n  /** The image alt tag. */\n  @Prop() imageAlt: string | undefined;\n  /** The link href */\n  @Prop() href: string | undefined;\n  /** The document position relative to the search results (For Measure) */\n  @Prop() documentPosition: number;\n\n  componentDidLoad() {}\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  handleButtonClick() {}\n\n  render() {\n    return (\n      <a class='searchcraft-popover-list-item' href={this.href}>\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"]}
+{"version":3,"file":"searchcraft-popover-list-item.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-popover-list-item/searchcraft-popover-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAKH,MAAM,OAAO,0BAA0B;IACrC,uBAAuB;IACf,YAAY,CAAqB;IACzC,0BAA0B;IAClB,eAAe,CAAqB;IAC5C,0EAA0E;IAClE,QAAQ,CAAqB;IACrC,yBAAyB;IACjB,QAAQ,CAAqB;IACrC,oBAAoB;IACZ,IAAI,CAAqB;IACjC,yEAAyE;IACjE,gBAAgB,GAAG,CAAC,CAAC;IAE7B,gBAAgB,KAAI,CAAC;IAErB,iBAAiB,KAAI,CAAC;IAEtB,oBAAoB,KAAI,CAAC;IAEzB,iBAAiB,KAAI,CAAC;IAEtB,eAAe,GAAG,GAAG,EAAE;QACrB,MAAM,KAAK,GAAG,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QAC7C,MAAM,WAAW,GAAG,KAAK,CAAC,sBAAsB,EAAE,CAAC;QAEnD,IAAI,WAAW,EAAE,CAAC;YAChB,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC;YAChD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC;YAChC,MAAM,mBAAmB,GAAG,KAAK,CAAC,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC;YAEzE,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,EAAE;gBAC/C,iBAAiB;gBACjB,mBAAmB;gBACnB,WAAW;aACZ,CAAC,CAAC;QACL,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,0DACE,KAAK,EAAC,+BAA+B,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;YAEvC,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,KAAK,EAAC,6CAA6C;gBACtD,4DACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,qCAAqC,GAC3C,CACE,CACP;YACD,4DAAK,KAAK,EAAC,4CAA4C;gBACrD,0DAAG,KAAK,EAAC,qCAAqC,IAAE,IAAI,CAAC,YAAY,CAAK;gBACtE,0DAAG,KAAK,EAAC,wCAAwC,IAC9C,IAAI,CAAC,eAAe,CACnB,CACA,CACJ,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { useSearchcraftStore } from '@provider/store';\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',\n  shadow: false,\n})\nexport class SearchcraftPopoverListItem {\n  /** The result title */\n  @Prop() titleContent: string | undefined;\n  /** The result subtitle */\n  @Prop() subtitleContent: string | undefined;\n  /** The source of the image. If not included, no item will be rendered. */\n  @Prop() imageSrc: string | undefined;\n  /** The image alt tag. */\n  @Prop() imageAlt: string | undefined;\n  /** The link href */\n  @Prop() href: string | undefined;\n  /** The document position relative to the search results (For Measure) */\n  @Prop() documentPosition = 0;\n\n  componentDidLoad() {}\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  handleButtonClick() {}\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.query;\n      const number_of_documents = state.searchResults?.data?.hits?.length || 0;\n\n      searchcraft.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"]}