@searchcraft/javascript-sdk 0.9.7 → 0.10.1

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

@@ -1,18 +1,110 @@
 import { p as proxyCustomElement, H, h } from './p-5365011f.js';
-import { s as searchcraftStore } from './p-580c09dc.js';
+import { s as searchcraftStore } from './p-17c646e2.js';
+import { h as html } from './p-810a7850.js';
 
 const SearchcraftPopoverButton$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftPopoverButton extends H {
     constructor() {
         super();
         this.__registerHost();
     }
+    /**
+     * A callback function responsible for rendering the button contents.
+     */
+    template;
+    /**
+     * The type of popover button to render.
+     */
+    type;
+    hotkey;
+    hotkeyModifier;
+    hotkeyModifierSymbol;
+    isPopoverVisible;
+    userAgent;
+    unsubscribe = () => { };
     handleOnClick() {
         searchcraftStore.getState().setPopoverVisibility(true);
     }
+    componentDidLoad() {
+        const state = searchcraftStore.getState();
+        this.hotkey = state.hotkey.toUpperCase();
+        this.hotkeyModifier = state.hotkeyModifier;
+        this.isPopoverVisible = state.isPopoverVisible;
+        this.userAgent = this.setUserAgent();
+        this.hotkeyModifierSymbol = this.setHotkeyModifierSymbol();
+        this.unsubscribe = searchcraftStore.subscribe((state) => {
+            this.hotkey = state.hotkey.toUpperCase();
+            this.hotkeyModifier = state.hotkeyModifier;
+            this.hotkeyModifierSymbol = this.setHotkeyModifierSymbol();
+        });
+    }
+    disconnectedCallback() {
+        this.unsubscribe?.();
+    }
+    setUserAgent() {
+        const userAgent = navigator.userAgent.toLowerCase();
+        switch (true) {
+            case userAgent.includes('windows'):
+                return 'window';
+            case userAgent.includes('mac'):
+                return 'mac';
+            default:
+                return 'other';
+        }
+    }
+    renderOptionSymbol = () => {
+        return (h("svg", { version: '1.1', xmlns: 'http://www.w3.org/2000/svg', width: '20', height: '20', viewBox: '0 0 512 512', fill: 'none' }, h("title", null, "Option key"), h("path", { d: 'M283,112c0-11.58,9.42-21,21-21h160c11.58,0,21,9.42,21,21s-9.42,21-21,21h-160c-11.58,0-21-9.42-21-21Z', fill: 'currentColor' }), h("path", { d: 'M485,400c0,11.58-9.42,21-21,21h-128c-8.29,0-15.82-4.9-19.19-12.47l-122.46-275.53H48c-11.58,0-21-9.42-21-21s9.42-21,21-21h160c8.29,0,15.82,4.9,19.19,12.47l122.46,275.53h114.35c11.58,0,21,9.42,21,21Z', fill: 'currentColor' })));
+    };
+    renderCtrlSymbol = () => {
+        return (h("svg", { version: '1.1', xmlns: 'http://www.w3.org/2000/svg', width: '20', height: '20', viewBox: '0 0 512 512', fill: 'none' }, h("title", null, "Ctrl key"), h("path", { d: 'M388.95,209.4c-.37,5.59-2.9,10.71-7.12,14.4-3.83,3.35-8.74,5.2-13.82,5.2-6.06,0-11.83-2.61-15.81-7.17l-96.2-109.94-96.2,109.94c-3.98,4.56-9.75,7.17-15.81,7.17-5.08,0-9.99-1.84-13.82-5.2-4.22-3.69-6.75-8.81-7.12-14.4-.38-5.6,1.45-11.01,5.15-15.23l112-128c3.98-4.56,9.74-7.17,15.8-7.17s11.82,2.61,15.8,7.17l112,128c3.7,4.22,5.53,9.63,5.15,15.23Z', fill: 'currentColor' })));
+    };
+    renderWindowsMetaSymbol = () => {
+        return (h("svg", { version: '1.1', xmlns: 'http://www.w3.org/2000/svg', width: '20', height: '20', viewBox: '0 0 512 512', fill: 'none' }, h("title", null, "Windows meta key"), h("path", { d: 'M206.115 255.957c-23.854-12.259-47.043-18.479-68.94-18.479-2.978 0-5.976 0.090-8.974 0.354-27.94 2.312-53.461 9.684-69.875 15.414-4.354 1.599-8.817 3.288-13.415 5.153l-44.911 155.697c30.851-11.416 58.146-16.969 83.135-16.969 40.423 0 69.764 15.104 93.996 30.652 11.481-38.959 39.022-133.045 47.241-161.162-5.975-3.642-12.038-7.285-18.257-10.66zM264.174 295.535l-45.223 157.074c13.416 7.686 58.549 32.025 93.106 32.025 27.896 0 59.126-7.148 95.417-21.896l43.178-150.988c-29.316 9.461-57.438 14.26-83.732 14.26-47.975 0-81.557-15.549-102.746-30.475zM146.411 184.395c38.559 0.399 67.076 15.104 90.708 30.251l46.376-158.672c-9.773-5.598-35.403-19.547-53.929-24.3-12.193-2.842-25.010-4.308-38.602-4.308-25.898 0.488-54.194 6.973-86.444 19.9l-44.22 155.298c32.404-12.218 60.322-18.17 86.043-18.17 0.023 0.001 0.068 0.001 0.068 0.001zM512 99.062c-29.407 11.416-58.104 17.233-85.514 17.233-45.843 0-79.646-15.901-101.547-31.183l-45.975 159.118c30.873 19.854 64.145 29.939 99.061 29.939 28.474 0 57.97-6.84 87.731-20.344l-0.091-1.111 1.867-0.443 44.468-153.209z', fill: 'currentColor' })));
+    };
+    renderMacMetaSymbol = () => {
+        return (h("svg", { version: '1.1', xmlns: 'http://www.w3.org/2000/svg', width: '20', height: '20', viewBox: '0 0 512 512', fill: 'none' }, h("title", null, "Mac meta key"), h("path", { d: 'M368,283h-43v-54h43c46.87,0,85-38.13,85-85s-38.13-85-85-85-85,38.13-85,85v43h-54v-43c0-46.87-38.13-85-85-85s-85,38.13-85,85,38.13,85,85,85h43v54h-43c-46.87,0-85,38.13-85,85s38.13,85,85,85,85-38.13,85-85v-43h54v43c0,46.87,38.13,85,85,85s85-38.13,85-85-38.13-85-85-85ZM325,144c0-23.71,19.29-43,43-43s43,19.29,43,43-19.29,43-43,43h-43v-43ZM144,187c-23.71,0-43-19.29-43-43s19.29-43,43-43,43,19.29,43,43v43h-43ZM187,368c0,23.71-19.29,43-43,43s-43-19.29-43-43,19.29-43,43-43h43v43ZM283,283h-54v-54h54v54ZM368,411c-23.71,0-43-19.29-43-43v-43h43c23.71,0,43,19.29,43,43s-19.29,43-43,43Z', fill: 'currentColor' })));
+    };
+    setHotkeyModifierSymbol() {
+        switch (this.hotkeyModifier) {
+            case 'ctrl':
+                return this.userAgent === 'windows'
+                    ? this.renderCtrlSymbol()
+                    : this.renderMacMetaSymbol();
+            case 'alt':
+            case 'option':
+                return this.renderOptionSymbol();
+            default:
+                return this.userAgent === 'windows'
+                    ? this.renderWindowsMetaSymbol()
+                    : this.renderMacMetaSymbol();
+        }
+    }
+    renderSkeuomorphicSlot() {
+        return (h("div", { class: 'searchcraft-popover-button-wrapper' }, h("div", { class: 'searchcraft-popover-button-input' }, h("svg", { class: 'searchcraft-popover-button-input-search-icon', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', version: '1.1' }, h("title", null, "Search icon"), h("path", { d: 'M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })), h("span", null, "Search")), h("div", { class: 'searchcraft-popover-button-keycaps' }, h("div", { class: 'searchcraft-popover-button-keycaps-keycap searchcraft-popover-button-keycaps-keycap-modifier' }, h("span", null, this.hotkeyModifierSymbol)), h("div", { class: 'searchcraft-popover-button-keycaps-keycap searchcraft-popover-button-keycaps-keycap-key' }, h("span", null, this.hotkey)))));
+    }
+    renderSlot() {
+        switch (this.type) {
+            case 'skeuomorphic':
+                return this.renderSkeuomorphicSlot();
+            default:
+                return (h("div", null, h("slot", null)));
+        }
+    }
     render() {
-        return (h("button", { key: 'a8ee70b49a5309cfb1363a272ea0870c48c59688', type: 'button', onClick: this.handleOnClick.bind(this) }, h("slot", { key: '9ac712ed1f6e69d73e7ade3d42501fb67a02c7ff' })));
+        return (h("button", { key: 'd24721368deab8e6e9ade770170712f5b8504364', class: `searchcraft-popover-button ${this.type ? ` searchcraft-popover-button-${this.type}` : ''}`, onClick: this.handleOnClick.bind(this), type: 'button' }, typeof this.template !== 'undefined'
+            ? this.template(this.isPopoverVisible, { html })
+            : this.type
+                ? this.renderSlot()
+                : 'Open Popover'));
     }
-}, [4, "searchcraft-popover-button"]);
+}, [4, "searchcraft-popover-button", {
+        "template": [16],
+        "type": [1],
+        "hotkey": [32],
+        "hotkeyModifier": [32],
+        "hotkeyModifierSymbol": [32],
+        "isPopoverVisible": [32],
+        "userAgent": [32]
+    }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -1 +1 @@
-{"file":"searchcraft-popover-button.js","mappings":";;;MAUaA,0BAAwB;;;;;IACnC,aAAa;QACX,gBAAgB,CAAC,QAAQ,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;KACxD;IAED,MAAM;QACJ,QACE,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IAC1D,8DAAQ,CACD,EACT;KACH;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftPopoverButton"],"sources":["src/components/searchcraft-popover-button/searchcraft-popover-button.tsx"],"sourcesContent":["import { searchcraftStore } from '@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    searchcraftStore.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"],"version":3}
+{"file":"searchcraft-popover-button.js","mappings":"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","names":["SearchcraftPopoverButton"],"sources":["src/components/searchcraft-popover-button/searchcraft-popover-button.tsx"],"sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\n\nimport type { PopoverButtonTemplate } from '@searchcraft/core';\n\nimport { searchcraftStore } from '@store';\n\nimport { html } from '@utils';\n\n/**\n * Renders a button which, when clicked, turns on popover visibility.\n *\n * @react-import\n * ```jsx\n * import { SearchcraftPopoverButton } from \"@searchcraft/react-sdk\";\n * ````\n *\n * @vue-import\n * ```jsx\n * import { SearchcraftPopoverButton } from \"@searchcraft/vue-sdk\";\n * ```\n *\n * @js-example\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-button>\n *   Open popover\n * </searchcraft-popover-button>\n * ```\n *\n * ```js\n * // index.js\n * const popoverButton = document.querySelector('searchcraft-popover-button');\n *\n * popoverButton.template = (isPopoverVisible, { html }) => html`\n *   <span>Click me</span>\n * `;\n * ```\n *\n * @react-example\n * ```jsx\n * <SearchcraftPopoverButton\n *   template={(isPopoverVisible, { html }) => html`\n *     <span>Click me</span>\n *   `}\n * >\n *   Open popover\n * </SearchcraftPopoverButton>\n * ```\n *\n * @vue-example\n * ```jsx\n * <SearchcraftPopoverButton\n *   :template={(isPopoverVisible, { html }) => html`\n *     <span>Click me</span>\n *   `}\n * >\n *   Open popover\n * </SearchcraftPopoverButton>\n * ```\n */\n@Component({\n  tag: 'searchcraft-popover-button',\n  shadow: false,\n})\nexport class SearchcraftPopoverButton {\n  /**\n   * A callback function responsible for rendering the button contents.\n   */\n  @Prop() template?: PopoverButtonTemplate;\n  /**\n   * The type of popover button to render.\n   */\n  @Prop() type?: 'skeuomorphic';\n\n  @State() hotkey;\n  @State() hotkeyModifier;\n  @State() hotkeyModifierSymbol;\n  @State() isPopoverVisible;\n  @State() userAgent;\n\n  private unsubscribe: () => void = () => {};\n\n  handleOnClick() {\n    searchcraftStore.getState().setPopoverVisibility(true);\n  }\n\n  componentDidLoad() {\n    const state = searchcraftStore.getState();\n    this.hotkey = state.hotkey.toUpperCase();\n    this.hotkeyModifier = state.hotkeyModifier;\n    this.isPopoverVisible = state.isPopoverVisible;\n    this.userAgent = this.setUserAgent();\n    this.hotkeyModifierSymbol = this.setHotkeyModifierSymbol();\n\n    this.unsubscribe = searchcraftStore.subscribe((state) => {\n      this.hotkey = state.hotkey.toUpperCase();\n      this.hotkeyModifier = state.hotkeyModifier;\n      this.hotkeyModifierSymbol = this.setHotkeyModifierSymbol();\n    });\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n  }\n\n  setUserAgent() {\n    const userAgent = navigator.userAgent.toLowerCase();\n\n    switch (true) {\n      case userAgent.includes('windows'):\n        return 'window';\n      case userAgent.includes('mac'):\n        return 'mac';\n      default:\n        return 'other';\n    }\n  }\n\n  renderOptionSymbol = () => {\n    return (\n      <svg\n        version='1.1'\n        xmlns='http://www.w3.org/2000/svg'\n        width='20'\n        height='20'\n        viewBox='0 0 512 512'\n        fill='none'\n      >\n        <title>Option key</title>\n        <path\n          d='M283,112c0-11.58,9.42-21,21-21h160c11.58,0,21,9.42,21,21s-9.42,21-21,21h-160c-11.58,0-21-9.42-21-21Z'\n          fill='currentColor'\n        />\n        <path\n          d='M485,400c0,11.58-9.42,21-21,21h-128c-8.29,0-15.82-4.9-19.19-12.47l-122.46-275.53H48c-11.58,0-21-9.42-21-21s9.42-21,21-21h160c8.29,0,15.82,4.9,19.19,12.47l122.46,275.53h114.35c11.58,0,21,9.42,21,21Z'\n          fill='currentColor'\n        />\n      </svg>\n    );\n  };\n\n  renderCtrlSymbol = () => {\n    return (\n      <svg\n        version='1.1'\n        xmlns='http://www.w3.org/2000/svg'\n        width='20'\n        height='20'\n        viewBox='0 0 512 512'\n        fill='none'\n      >\n        <title>Ctrl key</title>\n        <path\n          d='M388.95,209.4c-.37,5.59-2.9,10.71-7.12,14.4-3.83,3.35-8.74,5.2-13.82,5.2-6.06,0-11.83-2.61-15.81-7.17l-96.2-109.94-96.2,109.94c-3.98,4.56-9.75,7.17-15.81,7.17-5.08,0-9.99-1.84-13.82-5.2-4.22-3.69-6.75-8.81-7.12-14.4-.38-5.6,1.45-11.01,5.15-15.23l112-128c3.98-4.56,9.74-7.17,15.8-7.17s11.82,2.61,15.8,7.17l112,128c3.7,4.22,5.53,9.63,5.15,15.23Z'\n          fill='currentColor'\n        />\n      </svg>\n    );\n  };\n\n  renderWindowsMetaSymbol = () => {\n    return (\n      <svg\n        version='1.1'\n        xmlns='http://www.w3.org/2000/svg'\n        width='20'\n        height='20'\n        viewBox='0 0 512 512'\n        fill='none'\n      >\n        <title>Windows meta key</title>\n        <path\n          d='M206.115 255.957c-23.854-12.259-47.043-18.479-68.94-18.479-2.978 0-5.976 0.090-8.974 0.354-27.94 2.312-53.461 9.684-69.875 15.414-4.354 1.599-8.817 3.288-13.415 5.153l-44.911 155.697c30.851-11.416 58.146-16.969 83.135-16.969 40.423 0 69.764 15.104 93.996 30.652 11.481-38.959 39.022-133.045 47.241-161.162-5.975-3.642-12.038-7.285-18.257-10.66zM264.174 295.535l-45.223 157.074c13.416 7.686 58.549 32.025 93.106 32.025 27.896 0 59.126-7.148 95.417-21.896l43.178-150.988c-29.316 9.461-57.438 14.26-83.732 14.26-47.975 0-81.557-15.549-102.746-30.475zM146.411 184.395c38.559 0.399 67.076 15.104 90.708 30.251l46.376-158.672c-9.773-5.598-35.403-19.547-53.929-24.3-12.193-2.842-25.010-4.308-38.602-4.308-25.898 0.488-54.194 6.973-86.444 19.9l-44.22 155.298c32.404-12.218 60.322-18.17 86.043-18.17 0.023 0.001 0.068 0.001 0.068 0.001zM512 99.062c-29.407 11.416-58.104 17.233-85.514 17.233-45.843 0-79.646-15.901-101.547-31.183l-45.975 159.118c30.873 19.854 64.145 29.939 99.061 29.939 28.474 0 57.97-6.84 87.731-20.344l-0.091-1.111 1.867-0.443 44.468-153.209z'\n          fill='currentColor'\n        />\n      </svg>\n    );\n  };\n\n  renderMacMetaSymbol = () => {\n    return (\n      <svg\n        version='1.1'\n        xmlns='http://www.w3.org/2000/svg'\n        width='20'\n        height='20'\n        viewBox='0 0 512 512'\n        fill='none'\n      >\n        <title>Mac meta key</title>\n        <path\n          d='M368,283h-43v-54h43c46.87,0,85-38.13,85-85s-38.13-85-85-85-85,38.13-85,85v43h-54v-43c0-46.87-38.13-85-85-85s-85,38.13-85,85,38.13,85,85,85h43v54h-43c-46.87,0-85,38.13-85,85s38.13,85,85,85,85-38.13,85-85v-43h54v43c0,46.87,38.13,85,85,85s85-38.13,85-85-38.13-85-85-85ZM325,144c0-23.71,19.29-43,43-43s43,19.29,43,43-19.29,43-43,43h-43v-43ZM144,187c-23.71,0-43-19.29-43-43s19.29-43,43-43,43,19.29,43,43v43h-43ZM187,368c0,23.71-19.29,43-43,43s-43-19.29-43-43,19.29-43,43-43h43v43ZM283,283h-54v-54h54v54ZM368,411c-23.71,0-43-19.29-43-43v-43h43c23.71,0,43,19.29,43,43s-19.29,43-43,43Z'\n          fill='currentColor'\n        />\n      </svg>\n    );\n  };\n\n  setHotkeyModifierSymbol() {\n    switch (this.hotkeyModifier) {\n      case 'ctrl':\n        return this.userAgent === 'windows'\n          ? this.renderCtrlSymbol()\n          : this.renderMacMetaSymbol();\n      case 'alt':\n      case 'option':\n        return this.renderOptionSymbol();\n      default:\n        return this.userAgent === 'windows'\n          ? this.renderWindowsMetaSymbol()\n          : this.renderMacMetaSymbol();\n    }\n  }\n\n  renderSkeuomorphicSlot() {\n    return (\n      <div class='searchcraft-popover-button-wrapper'>\n        <div class='searchcraft-popover-button-input'>\n          <svg\n            class='searchcraft-popover-button-input-search-icon'\n            viewBox='0 0 20 20'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            version='1.1'\n          >\n            <title>Search icon</title>\n            <path\n              d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n              stroke='currentColor'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n          <span>Search</span>\n        </div>\n        <div class='searchcraft-popover-button-keycaps'>\n          <div class='searchcraft-popover-button-keycaps-keycap searchcraft-popover-button-keycaps-keycap-modifier'>\n            <span>{this.hotkeyModifierSymbol}</span>\n          </div>\n          <div class='searchcraft-popover-button-keycaps-keycap searchcraft-popover-button-keycaps-keycap-key'>\n            <span>{this.hotkey}</span>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  renderSlot() {\n    switch (this.type) {\n      case 'skeuomorphic':\n        return this.renderSkeuomorphicSlot();\n      default:\n        return (\n          <div>\n            <slot />\n          </div>\n        );\n    }\n  }\n\n  render() {\n    return (\n      <button\n        class={`searchcraft-popover-button ${this.type ? ` searchcraft-popover-button-${this.type}` : ''}`}\n        onClick={this.handleOnClick.bind(this)}\n        type='button'\n      >\n        {typeof this.template !== 'undefined'\n          ? this.template(this.isPopoverVisible, { html })\n          : this.type\n            ? this.renderSlot()\n            : 'Open Popover'}\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/components/searchcraft-popover-footer.d.ts

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

package/dist/components/searchcraft-popover-footer.js

@@ -0,0 +1,8 @@
+import { S as SearchcraftPopoverFooter$1, d as defineCustomElement$1 } from './p-84e2cbd6.js';
+
+const SearchcraftPopoverFooter = SearchcraftPopoverFooter$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SearchcraftPopoverFooter, defineCustomElement };
+
+//# sourceMappingURL=searchcraft-popover-footer.js.map

package/dist/components/searchcraft-popover-footer.js.map

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

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

@@ -1,13 +1,14 @@
 import { p as proxyCustomElement, H, h } from './p-5365011f.js';
 import { c as classNames } from './p-5cdc6210.js';
-import { s as searchcraftStore } from './p-580c09dc.js';
-import { d as defineCustomElement$8 } from './p-5fdaf1e6.js';
-import { d as defineCustomElement$7 } from './p-71cc28c1.js';
-import { d as defineCustomElement$6 } from './p-0e393fe1.js';
-import { d as defineCustomElement$5 } from './p-e41b0f43.js';
-import { d as defineCustomElement$4 } from './p-e55a7970.js';
-import { d as defineCustomElement$3 } from './p-8f854dec.js';
-import { d as defineCustomElement$2 } from './p-60f05735.js';
+import { s as searchcraftStore } from './p-17c646e2.js';
+import { d as defineCustomElement$9 } from './p-13e81b5d.js';
+import { d as defineCustomElement$8 } from './p-acf23bab.js';
+import { d as defineCustomElement$7 } from './p-f2585cdf.js';
+import { d as defineCustomElement$6 } from './p-0077f677.js';
+import { d as defineCustomElement$5 } from './p-1adf78b9.js';
+import { d as defineCustomElement$4 } from './p-84e2cbd6.js';
+import { d as defineCustomElement$3 } from './p-5d17ace0.js';
+import { d as defineCustomElement$2 } from './p-a62a2e74.js';
 
 const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftPopoverForm extends H {
     constructor() {
@@ -16,7 +17,6 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
     }
     /**
      * 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.
@@ -69,6 +69,10 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
             this.searchResultsPage = state.searchResultsPage;
             this.searchResultsPerPage = state.searchResultsPerPage;
         });
+        // Set hotkey and hotkeyModifier in state.
+        searchcraftStore
+            .getState()
+            .setHotKeyAndHotKeyModifier(this.hotkey, this.hotkeyModifier);
     }
     disconnectedCallback() {
         this.unsubscribe?.();
@@ -114,7 +118,7 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         }
     };
     handleInputInit = () => {
-        const input = this.hostElement.querySelector('.searchcraft-input');
+        const input = this.hostElement.querySelector('.searchcraft-input-form-input');
         input?.focus();
     };
     /**
@@ -149,7 +153,7 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
             (event.metaKey && this.hotkeyModifier === 'meta')) {
             event.preventDefault();
             if (this.type === 'inline' && !this.isPopoverVisibleInState) {
-                const hostElementInput = this.hostElement.querySelector('.searchcraft-input');
+                const hostElementInput = this.hostElement.querySelector('.searchcraft-input-form-input');
                 hostElementInput?.focus();
             }
             else {
@@ -169,7 +173,7 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
      * @param direction
      */
     focusOnNextListItem(direction) {
-        const listItems = Array.from(document.querySelectorAll('a.searchcraft-popover-list-item')).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);
+        const listItems = Array.from(document.querySelectorAll('.searchcraft-popover-list-item-link')).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);
         const currentIndex = listItems.indexOf(document.activeElement);
         if (direction === 'ArrowDown') {
             listItems[(currentIndex + 1) % listItems.length]?.focus();
@@ -179,7 +183,7 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
                 listItems[currentIndex - 1]?.focus();
             }
             else {
-                const input = document.querySelector('.searchcraft-input');
+                const input = document.querySelector('.searchcraft-input-form-input');
                 if (input) {
                     input.focus();
                     requestAnimationFrame(() => {
@@ -197,22 +201,22 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
     }
     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", { 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 }))))));
+        return (h("div", { class: classNames('searchcraft-popover-form searchcraft-popover-form-inline', {
+                'searchcraft-popover-form-active': isListViewVisible,
+            }) }, h("div", { class: 'searchcraft-popover-form-input searchcraft-popover-form-inline-input' }, h("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this) })), isListViewVisible && (h("div", { class: 'searchcraft-popover-form-inline-wrapper' }, h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage }), h("searchcraft-popover-footer", null)))));
     }
     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", { 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 }))))));
+            return (h("div", { class: classNames('searchcraft-popover-form searchcraft-popover-form-modal', {
+                    'searchcraft-popover-form-active': this.hasResultsToShow,
+                }) }, h("div", { class: 'searchcraft-popover-form-modal-backdrop', onClick: this.handleModalBackdropClick }), h("div", { class: 'searchcraft-popover-form-modal-wrapper' }, h("div", { class: 'searchcraft-popover-form-input searchcraft-popover-form-modal-input' }, h("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this) }), h("button", { type: 'button', class: 'searchcraft-popover-form-input-cancel-button searchcraft-popover-form-modal-input-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 })), h("searchcraft-popover-footer", null))));
         }
     }
     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", { 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 })))));
+            return (h("div", { class: classNames('searchcraft-popover-form searchcraft-popover-form-fullscreen', {
+                    'searchcraft-popover-form-active': this.hasResultsToShow,
+                }) }, h("div", { class: 'searchcraft-popover-form-input searchcraft-popover-form-fullscreen-input' }, h("searchcraft-input-form", { onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this) }), h("button", { type: 'button', class: 'searchcraft-popover-form-input-cancel-button searchcraft-popover-form-fullscreen-input-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 })), h("searchcraft-popover-footer", null)));
         }
     }
     render() {
@@ -247,7 +251,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["searchcraft-popover-form", "searchcraft-ad", "searchcraft-button", "searchcraft-error-message", "searchcraft-input-form", "searchcraft-input-label", "searchcraft-popover-form", "searchcraft-popover-list-item", "searchcraft-popover-list-view"];
+    const components = ["searchcraft-popover-form", "searchcraft-ad", "searchcraft-button", "searchcraft-error-message", "searchcraft-input-form", "searchcraft-input-label", "searchcraft-popover-footer", "searchcraft-popover-form", "searchcraft-popover-list-item", "searchcraft-popover-list-view"];
     components.forEach(tagName => { switch (tagName) {
         case "searchcraft-popover-form":
             if (!customElements.get(tagName)) {
@@ -256,25 +260,30 @@ function defineCustomElement$1() {
             break;
         case "searchcraft-ad":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "searchcraft-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "searchcraft-error-message":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "searchcraft-input-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "searchcraft-input-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "searchcraft-popover-footer":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

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

@@ -1 +1 @@
-{"file":"searchcraft-popover-form.js","mappings":"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","names":["SearchcraftPopoverForm"],"sources":["src/components/searchcraft-popover-form/searchcraft-popover-form.tsx"],"sourcesContent":["import { Component, Element, Prop, State, h } from '@stencil/core';\nimport classNames from 'classnames';\nimport type {\n  SearchClientResponseItem,\n  AdClientResponseItem,\n  PopoverResultMappings,\n} from '@searchcraft/core';\n\nimport { searchcraftStore } from '@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.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 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;\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 = searchcraftStore.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 = searchcraftStore.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        searchcraftStore.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      searchcraftStore.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.popoverResultMappings = this.popoverResultMappings;\n        this.modalElement.setAttribute('type', 'fullscreen');\n        document.body.appendChild(this.modalElement);\n      }\n    }\n  }\n\n  handleModalBackdropClick(_event: MouseEvent) {\n    searchcraftStore.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        searchcraftStore\n          .getState()\n          .setPopoverVisibility(!this.isPopoverVisibleInState);\n      }\n    }\n  }\n\n  handleCancelButtonClick() {\n    searchcraftStore.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          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                  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                onInputFocus={this.handleInputFocus.bind(this)}\n                onInputInit={this.handleInputInit.bind(this)}\n              />\n              <button\n                type='button'\n                class='searchcraft-popover-form-cancel-button'\n                onClick={this.handleCancelButtonClick.bind(this)}\n              >\n                Cancel\n              </button>\n            </div>\n            {this.hasResultsToShow && (\n              <searchcraft-popover-list-view\n                popoverResultMappings={this.popoverResultMappings}\n                searchClientResponseItems={this.searchClientResponseItems}\n                adClientResponseItems={this.adClientResponseItems}\n                searchResultsPage={this.searchResultsPage}\n                searchResultsPerPage={this.searchResultsPerPage}\n              />\n            )}\n          </div>\n        </div>\n      );\n    }\n  }\n\n  render() {\n    switch (this.type) {\n      case 'inline':\n        return this.renderInlinePopover();\n      case 'modal':\n        return this.renderModalPopover();\n      case 'fullscreen':\n        return this.renderFullscreenPopover();\n    }\n  }\n}\n"],"version":3}
+{"file":"searchcraft-popover-form.js","mappings":"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","names":["SearchcraftPopoverForm"],"sources":["src/components/searchcraft-popover-form/searchcraft-popover-form.tsx"],"sourcesContent":["import { Component, Element, Prop, State, h } from '@stencil/core';\nimport classNames from 'classnames';\nimport type {\n  SearchClientResponseItem,\n  AdClientResponseItem,\n  PopoverResultMappings,\n} from '@searchcraft/core';\n\nimport { searchcraftStore } from '@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 * @react-import\n * ```jsx\n * import { SearchcraftPopoverForm } from \"@searchcraft/react-sdk\";\n * ```\n *\n * @vue-import\n * ```jsx\n * import { SearchcraftPopoverForm } from \"@searchcraft/vue-sdk\";\n * ```\n *\n * @js-example\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-form type=\"inline\" />\n * ```\n *\n * ```js\n * // index.js\n * const popoverForm = document.querySelector('searchcraft-popover-form');\n *\n * popoverForm.popoverResultMappings = {};\n * ```\n *\n * @react-example\n * ```jsx\n * <SearchcraftPopoverForm type=\"inline\" popoverResultMappings={[]} />\n * ```\n *\n * @vue-example\n * ```jsx\n * <SearchcraftPopoverForm type=\"inline\" :popoverResultMappings=\"[]\"\" />\n * ```\n *\n */\n@Component({\n  tag: 'searchcraft-popover-form',\n  shadow: false,\n})\nexport class SearchcraftPopoverForm {\n  /**\n   * The type of popover form to render.\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;\n  /**\n   * The hotkey that activates the popover.\n   */\n  @Prop() hotkey?: string = '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 = searchcraftStore.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 = searchcraftStore.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    // Set hotkey and hotkeyModifier in state.\n    searchcraftStore\n      .getState()\n      .setHotKeyAndHotKeyModifier(this.hotkey, this.hotkeyModifier);\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        searchcraftStore.getState().setPopoverVisibility(false);\n        break;\n      default:\n        return;\n    }\n  };\n\n  handleInputInit = () => {\n    const input = this.hostElement.querySelector(\n      '.searchcraft-input-form-input',\n    ) as HTMLInputElement | 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      searchcraftStore.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.popoverResultMappings = this.popoverResultMappings;\n        this.modalElement.setAttribute('type', 'fullscreen');\n        document.body.appendChild(this.modalElement);\n      }\n    }\n  }\n\n  handleModalBackdropClick(_event: MouseEvent) {\n    searchcraftStore.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-form-input',\n        ) as HTMLInputElement | undefined;\n        hostElementInput?.focus();\n      } else {\n        searchcraftStore\n          .getState()\n          .setPopoverVisibility(!this.isPopoverVisibleInState);\n      }\n    }\n  }\n\n  handleCancelButtonClick() {\n    searchcraftStore.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        '.searchcraft-popover-list-item-link',\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-form-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    return (\n      <div\n        class={classNames(\n          'searchcraft-popover-form searchcraft-popover-form-inline',\n          {\n            'searchcraft-popover-form-active': isListViewVisible,\n          },\n        )}\n      >\n        <div class='searchcraft-popover-form-input searchcraft-popover-form-inline-input'>\n          <searchcraft-input-form\n            onInputFocus={this.handleInputFocus.bind(this)}\n          />\n        </div>\n        {isListViewVisible && (\n          <div class='searchcraft-popover-form-inline-wrapper'>\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            <searchcraft-popover-footer />\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  renderModalPopover() {\n    if (this.isPopoverVisibleInState) {\n      return (\n        <div\n          class={classNames(\n            'searchcraft-popover-form searchcraft-popover-form-modal',\n            {\n              'searchcraft-popover-form-active': this.hasResultsToShow,\n            },\n          )}\n        >\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-wrapper'>\n            <div class='searchcraft-popover-form-input searchcraft-popover-form-modal-input'>\n              <searchcraft-input-form\n                onInputFocus={this.handleInputFocus.bind(this)}\n                onInputInit={this.handleInputInit.bind(this)}\n              />\n              <button\n                type='button'\n                class='searchcraft-popover-form-input-cancel-button searchcraft-popover-form-modal-input-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            <searchcraft-popover-footer />\n          </div>\n        </div>\n      );\n    }\n  }\n\n  renderFullscreenPopover() {\n    if (this.isPopoverVisibleInState) {\n      return (\n        <div\n          class={classNames(\n            'searchcraft-popover-form searchcraft-popover-form-fullscreen',\n            {\n              'searchcraft-popover-form-active': this.hasResultsToShow,\n            },\n          )}\n        >\n          <div class='searchcraft-popover-form-input searchcraft-popover-form-fullscreen-input'>\n            <searchcraft-input-form\n              onInputFocus={this.handleInputFocus.bind(this)}\n              onInputInit={this.handleInputInit.bind(this)}\n            />\n            <button\n              type='button'\n              class='searchcraft-popover-form-input-cancel-button searchcraft-popover-form-fullscreen-input-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          <searchcraft-popover-footer />\n        </div>\n      );\n    }\n  }\n\n  render() {\n    switch (this.type) {\n      case 'inline':\n        return this.renderInlinePopover();\n      case 'modal':\n        return this.renderModalPopover();\n      case 'fullscreen':\n        return this.renderFullscreenPopover();\n    }\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { S as SearchcraftPopoverListItem$1, d as defineCustomElement$1 } from './p-8f854dec.js';
+import { S as SearchcraftPopoverListItem$1, d as defineCustomElement$1 } from './p-5d17ace0.js';
 
 const SearchcraftPopoverListItem = SearchcraftPopoverListItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-popover-list-view.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftPopoverListView$1, d as defineCustomElement$1 } from './p-60f05735.js';
+import { S as SearchcraftPopoverListView$1, d as defineCustomElement$1 } from './p-a62a2e74.js';
 
 const SearchcraftPopoverListView = SearchcraftPopoverListView$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-results-info.js

@@ -1,8 +1,7 @@
 import { p as proxyCustomElement, H, h } from './p-5365011f.js';
-import { c as classNames } from './p-5cdc6210.js';
-import { s as searchcraftStore } from './p-580c09dc.js';
+import { s as searchcraftStore } from './p-17c646e2.js';
 import { f as formatNumberWithCommas } from './p-6104fe5d.js';
-import { p as parseCustomStyles } from './p-d9551738.js';
+import { h as html } from './p-810a7850.js';
 
 const SearchcraftResultsInfo$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftResultsInfo extends H {
     constructor() {
@@ -10,19 +9,9 @@ const SearchcraftResultsInfo$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         this.__registerHost();
     }
     /**
-     * The custom formatter for the resulting string.
-     *
-     * @example
-     * ```ts
-     *  resultsInfo.customFormatter = (range, count, responseTime) =>
-     *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
-     * ```
+     * A callback function responsible for rendering the results info.
      */
-    customFormatter;
-    /**
-     * The custom styles object.
-     */
-    customStyles;
+    template;
     // store vars
     searchTerm;
     searchResultsPage;
@@ -63,16 +52,16 @@ const SearchcraftResultsInfo$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         if (!this.searchTerm || this.searchResultsCount === 0) {
             return null;
         }
-        return (h("p", { class: classNames('searchcraft-results-info', parseCustomStyles(this.customStyles || {})) }, this.customFormatter
-            ? this.customFormatter([
-                formatNumberWithCommas(this.range[0]),
-                formatNumberWithCommas(this.range[1]),
-            ], formatNumberWithCommas(this.count), this.responseTime)
-            : `${this.count} results found in ${this.responseTime}ms`));
+        return (h("p", { class: 'searchcraft-results-info' }, typeof this.template !== 'undefined'
+            ? this.template({
+                range: [Number(this.range[0]), Number(this.range[1])],
+                count: this.count,
+                responseTime: this.responseTime,
+            }, { html })
+            : `${formatNumberWithCommas(this.count)} results found in ${this.responseTime}ms`));
     }
 }, [0, "searchcraft-results-info", {
-        "customFormatter": [16],
-        "customStyles": [1, "custom-styles"],
+        "template": [16],
         "searchTerm": [32],
         "searchResultsPage": [32],
         "searchResultsPerPage": [32],

package/dist/components/searchcraft-results-info.js.map

@@ -1 +1 @@
-{"file":"searchcraft-results-info.js","mappings":";;;;;;MA0BaA,wBAAsB;;;;;;;;;;;;;;IAUzB,eAAe,CAIb;;;;IAIF,YAAY,CAAU;;IAGrB,UAAU,CAAC;IACX,iBAAiB,CAAC;IAClB,oBAAoB,CAAC;IACrB,kBAAkB,CAAC;;IAGnB,KAAK,GAAG,CAAC,CAAC;IACV,KAAK,GAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzB,YAAY,GAAG,GAAG,CAAC;IAE5B,WAAW,GAAe,SAAQ,CAAC;IAEnC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC,KAAK;;YAElD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;YACnC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC;YACjD,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,oBAAoB,CAAC;YACvD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,kBAAkB,CAAC;;YAGnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC;YACrC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBACX,IAAI,CAAC,iBAAiB,IAAI,CAAC;sBACvB,CAAC;sBACD,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC;YAC/D,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,CAAC;YACnE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBACX,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,kBAAkB;sBACnC,IAAI,CAAC,kBAAkB;sBACvB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACpB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,uBAAuB,IAAI,CAAC,IAAI,IAAI,EAAE,OAAO,CACvE,CAAC,CACF,CAAC;SACH,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,kBAAkB,KAAK,CAAC,EAAE;YACrD,OAAO,IAAI,CAAC;SACb;QAED,QACE,SACE,KAAK,EAAE,UAAU,CACf,0BAA0B,EAC1B,iBAAiB,CAAC,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAC3C,IAEA,IAAI,CAAC,eAAe;cACjB,IAAI,CAAC,eAAe,CAClB;gBACE,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBACrC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;aACtC,EACD,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,EAClC,IAAI,CAAC,YAAY,CAClB;cACD,GAAG,IAAI,CAAC,KAAK,qBAAqB,IAAI,CAAC,YAAY,IAAI,CACzD,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftResultsInfo"],"sources":["src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"sourcesContent":["import { Component, h, State, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { searchcraftStore } from '@store';\n\nimport { formatNumberWithCommas, parseCustomStyles } from '@utils';\n\n/**\n * This web component is designed to display the number of results returned from a search query.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <script>\n *  const resultsInfo = document.querySelector('searchcraft-results-info');\n *  resultsInfo.customFormatter = (range, count, responseTime) =>\n *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;\n * </script>\n *\n * <searchcraft-results-info />\n * ```\n */\n@Component({\n  tag: 'searchcraft-results-info',\n  shadow: false,\n})\nexport class SearchcraftResultsInfo {\n  /**\n   * The custom formatter for the resulting string.\n   *\n   * @example\n   * ```ts\n   *  resultsInfo.customFormatter = (range, count, responseTime) =>\n   *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;\n   * ```\n   */\n  @Prop() customFormatter?: (\n    range: [string, string],\n    count: string,\n    responseTime: string,\n  ) => void;\n  /**\n   * The custom styles object.\n   */\n  @Prop() customStyles?: string;\n\n  // store vars\n  @State() searchTerm;\n  @State() searchResultsPage;\n  @State() searchResultsPerPage;\n  @State() searchResultsCount;\n\n  // local vars\n  @State() count = 0;\n  @State() range: number[] = [0, 0];\n  @State() responseTime = '0';\n\n  unsubscribe: () => void = () => {};\n\n  connectedCallback() {\n    this.unsubscribe = searchcraftStore.subscribe((state) => {\n      // store vars\n      this.searchTerm = state.searchTerm;\n      this.searchResultsPage = state.searchResultsPage;\n      this.searchResultsPerPage = state.searchResultsPerPage;\n      this.searchResultsCount = state.searchResultsCount;\n\n      // local vars\n      this.count = this.searchResultsCount;\n      this.range[0] =\n        this.searchResultsPage <= 1\n          ? 1\n          : this.searchResultsPerPage * (this.searchResultsPage - 1);\n      this.range[1] = this.searchResultsPerPage * this.searchResultsPage;\n      this.range[1] =\n        this.range[1] > this.searchResultsCount\n          ? this.searchResultsCount\n          : this.range[1];\n      this.responseTime = ((state.searchResponseTimeTaken || 0) * 1000).toFixed(\n        2,\n      );\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.searchTerm || this.searchResultsCount === 0) {\n      return null;\n    }\n\n    return (\n      <p\n        class={classNames(\n          'searchcraft-results-info',\n          parseCustomStyles(this.customStyles || {}),\n        )}\n      >\n        {this.customFormatter\n          ? this.customFormatter(\n              [\n                formatNumberWithCommas(this.range[0]),\n                formatNumberWithCommas(this.range[1]),\n              ],\n              formatNumberWithCommas(this.count),\n              this.responseTime,\n            )\n          : `${this.count} results found in ${this.responseTime}ms`}\n      </p>\n    );\n  }\n}\n"],"version":3}
+{"file":"searchcraft-results-info.js","mappings":";;;;;MA0DaA,wBAAsB;;;;;;;;IAIzB,QAAQ,CAAuB;;IAG9B,UAAU,CAAC;IACX,iBAAiB,CAAC;IAClB,oBAAoB,CAAC;IACrB,kBAAkB,CAAC;;IAGnB,KAAK,GAAG,CAAC,CAAC;IACV,KAAK,GAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzB,YAAY,GAAG,GAAG,CAAC;IAE5B,WAAW,GAAe,SAAQ,CAAC;IAEnC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAC,KAAK;;YAElD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;YACnC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC;YACjD,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,oBAAoB,CAAC;YACvD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,kBAAkB,CAAC;;YAGnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC;YACrC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBACX,IAAI,CAAC,iBAAiB,IAAI,CAAC;sBACvB,CAAC;sBACD,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC;YAC/D,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,CAAC;YACnE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBACX,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,kBAAkB;sBACnC,IAAI,CAAC,kBAAkB;sBACvB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACpB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,uBAAuB,IAAI,CAAC,IAAI,IAAI,EAAE,OAAO,CACvE,CAAC,CACF,CAAC;SACH,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,kBAAkB,KAAK,CAAC,EAAE;YACrD,OAAO,IAAI,CAAC;SACb;QAED,QACE,SAAG,KAAK,EAAC,0BAA0B,IAChC,OAAO,IAAI,CAAC,QAAQ,KAAK,WAAW;cACjC,IAAI,CAAC,QAAQ,CACX;gBACE,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;gBACrD,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,YAAY,EAAE,IAAI,CAAC,YAAY;aAChC,EACD,EAAE,IAAI,EAAE,CACT;cACD,GAAG,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,qBAAqB,IAAI,CAAC,YAAY,IAAI,CACjF,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftResultsInfo"],"sources":["src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"sourcesContent":["import { Component, h, State, Prop } from '@stencil/core';\n\nimport type { ResultsInfoTemplate } from '@searchcraft/core';\n\nimport { searchcraftStore } from '@store';\n\nimport { formatNumberWithCommas, html } from '@utils';\n\n/**\n * This web component is designed to display the number of results returned from a search query.\n *\n * @react-import\n * ```jsx\n * import { SearchcraftResultsInfo } from \"@searchcraft/react-sdk\";\n * ```\n *\n * @vue-import\n * ```jsx\n * import { SearchcraftResultsInfo } from \"@searchcraft/vue-sdk\";\n * ```\n *\n * @js-example\n * ```html\n * <!-- index.html -->\n * <searchcraft-results-info />\n * ```\n *\n * ```js\n * // index.js\n * const resultsInfo = document.querySelector('searchcraft-results-info');\n *\n * resultsInfo.template = (info, { html }) => html`\n *   ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms\n * `;\n * ```\n *\n * @react-example\n * ```jsx\n * <SearchcraftResultsInfo\n *   template={(info, { html }) => html`\n *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms\n *   `}\n * />\n * ```\n *\n * @vue-example\n * ```jsx\n * <SearchcraftResultsInfo\n *   :template={(info, { html }) => html`\n *     ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms\n *   `}\n * />\n * ```\n */\n@Component({\n  tag: 'searchcraft-results-info',\n  shadow: false,\n})\nexport class SearchcraftResultsInfo {\n  /**\n   * A callback function responsible for rendering the results info.\n   */\n  @Prop() template?: ResultsInfoTemplate;\n\n  // store vars\n  @State() searchTerm;\n  @State() searchResultsPage;\n  @State() searchResultsPerPage;\n  @State() searchResultsCount;\n\n  // local vars\n  @State() count = 0;\n  @State() range: number[] = [0, 0];\n  @State() responseTime = '0';\n\n  unsubscribe: () => void = () => {};\n\n  connectedCallback() {\n    this.unsubscribe = searchcraftStore.subscribe((state) => {\n      // store vars\n      this.searchTerm = state.searchTerm;\n      this.searchResultsPage = state.searchResultsPage;\n      this.searchResultsPerPage = state.searchResultsPerPage;\n      this.searchResultsCount = state.searchResultsCount;\n\n      // local vars\n      this.count = this.searchResultsCount;\n      this.range[0] =\n        this.searchResultsPage <= 1\n          ? 1\n          : this.searchResultsPerPage * (this.searchResultsPage - 1);\n      this.range[1] = this.searchResultsPerPage * this.searchResultsPage;\n      this.range[1] =\n        this.range[1] > this.searchResultsCount\n          ? this.searchResultsCount\n          : this.range[1];\n      this.responseTime = ((state.searchResponseTimeTaken || 0) * 1000).toFixed(\n        2,\n      );\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.searchTerm || this.searchResultsCount === 0) {\n      return null;\n    }\n\n    return (\n      <p class='searchcraft-results-info'>\n        {typeof this.template !== 'undefined'\n          ? this.template(\n              {\n                range: [Number(this.range[0]), Number(this.range[1])],\n                count: this.count,\n                responseTime: this.responseTime,\n              },\n              { html },\n            )\n          : `${formatNumberWithCommas(this.count)} results found in ${this.responseTime}ms`}\n      </p>\n    );\n  }\n}\n"],"version":3}

package/dist/components/searchcraft-search-result.d.ts

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

package/dist/components/searchcraft-search-result.js

@@ -0,0 +1,8 @@
+import { S as SearchcraftSearchResult$1, d as defineCustomElement$1 } from './p-172a848d.js';
+
+const SearchcraftSearchResult = SearchcraftSearchResult$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SearchcraftSearchResult, defineCustomElement };
+
+//# sourceMappingURL=searchcraft-search-result.js.map

package/dist/components/searchcraft-search-result.js.map

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