npm - @searchcraft/javascript-sdk - Versions diffs - 0.8.2 → 0.9.1 - Mend

@searchcraft/javascript-sdk 0.8.2 → 0.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (287) hide show

package/dist/components/searchcraft-pagination.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-5365011f.js';
-import { u as useSearchcraftStore } from './p-38419178.js';
+import { s as searchcraftStore } from './p-6d8b0ead.js';
 import { c as classNames } from './p-5cdc6210.js';
 import { p as parseCustomStyles } from './p-d9551738.js';
 import { d as defineCustomElement$2 } from './p-71cc28c1.js';
@@ -26,7 +26,7 @@ const SearchcraftPagination$1 = /*@__PURE__*/ proxyCustomElement(class Searchcra
     setSearchResultsPage = () => { };
     unsubscribe = () => { };
     componentDidLoad() {
-        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+        this.unsubscribe = searchcraftStore.subscribe((state) => {
             // store vars
             this.searchTerm = state.searchTerm;
             this.searchResultsPerPage = state.searchResultsPerPage;

package/dist/components/searchcraft-pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"searchcraft-pagination.js","mappings":"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","names":["SearchcraftPagination"],"sources":["src/components/searchcraft-pagination/searchcraft-pagination.tsx"],"sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport { Component, h, State, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils';\n\n/*\n This web component is designed to facilitate pagination of search results.\n * Once a query is submitted, calculates the number for pages.\n \n ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-pagination />\n * ```\n /\n@Component({\n tag: 'searchcraft-pagination',\n shadow: false,\n})\nexport class SearchcraftPagination {\n /\n The custom styles object.\n /\n @Prop() customStyles?: string;\n\n // store vars\n @State() searchTerm;\n @State() searchResultsPerPage;\n @State() searchResultsPage;\n @State() searchResultsCount;\n\n // local vars\n @State() searchResultsPagesCount = 1;\n @State() searchResultsRangeMin = 1;\n @State() searchResultsRangeMax = 1;\n\n // store functions\n @State() setSearchResultsPage: (page: number) => void = () => {};\n\n private unsubscribe: () => void = () => {};\n\n componentDidLoad() {\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n // store vars\n this.searchTerm = state.searchTerm;\n this.searchResultsPerPage = state.searchResultsPerPage;\n this.searchResultsPage = state.searchResultsPage;\n this.searchResultsCount = state.searchResultsCount;\n\n // local vars\n this.searchResultsPagesCount = Math.ceil(\n this.searchResultsCount / this.searchResultsPerPage,\n );\n this.searchResultsRangeMin =\n (this.searchResultsPage - 1) this.searchResultsPerPage + 1;\n this.searchResultsRangeMax =\n (this.searchResultsPerPage - 1) * this.searchResultsPerPage +\n this.searchResultsPerPage;\n\n // store functions\n this.setSearchResultsPage = state.setSearchResultsPage;\n });\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n }\n\n handleGoToPage(page: number) {\n this.setSearchResultsPage(page);\n }\n\n renderOddPaginationItem(page: number) {\n return (\n <li>\n <button\n class={classNames('searchcraft-pagination-item', {\n 'searchcraft-pagination-item-active':\n this.searchResultsPage === page,\n })}\n onClick={() => this.handleGoToPage(page)}\n type='button'\n >\n {page}\n </button>\n </li>\n );\n }\n\n renderEvenPaginationItem(page: number) {\n if (this.searchResultsPagesCount <= page) {\n return;\n }\n\n if (\n this.searchResultsPagesCount <= 5 \|\|\n page < Math.ceil(this.searchResultsPagesCount / 2) // is the first or second even pagination item\n ? this.searchResultsPage <= page + 1\n : this.searchResultsPage >= page - 1\n ) {\n return (\n <li>\n <button\n class={classNames('searchcraft-pagination-item', {\n 'searchcraft-pagination-item-active':\n this.searchResultsPage === page,\n })}\n onClick={() => this.handleGoToPage(page)}\n type='button'\n >\n {page}\n </button>\n </li>\n );\n }\n\n return (\n <li>\n <span class='searchcraft-pagination-item'>...</span>\n </li>\n );\n }\n\n renderMiddlePaginationItem() {\n if (this.searchResultsPagesCount <= 3) {\n return;\n }\n\n if (\n this.searchResultsPagesCount <= 5 \|\|\n this.searchResultsPage <= 3 \|\|\n this.searchResultsPage >= this.searchResultsPagesCount - 2\n ) {\n return (\n <li>\n <button\n class={classNames('searchcraft-pagination-item', {\n 'searchcraft-pagination-item-active':\n this.searchResultsPage === 3 \|\|\n this.searchResultsPage === this.searchResultsPagesCount - 2,\n })}\n type='button'\n onClick={() =>\n this.handleGoToPage(\n this.searchResultsPage >= this.searchResultsPagesCount - 2\n ? this.searchResultsPagesCount - 2\n : 3,\n )\n }\n >\n {this.searchResultsPage >= this.searchResultsPagesCount - 2\n ? this.searchResultsPagesCount - 2\n : 3}\n </button>\n </li>\n );\n }\n\n return (\n <li>\n <span class='searchcraft-pagination-item searchcraft-pagination-item-active'>\n {this.searchResultsPage}\n </span>\n </li>\n );\n }\n\n render() {\n // early return if there isn't a searchTerm or there is 1 or fewer pages of results\n if (!this.searchTerm \|\| this.searchResultsPagesCount <= 1) {\n return;\n }\n\n return (\n <div\n class={classNames(\n 'searchcraft-pagination',\n parseCustomStyles(this.customStyles \|\| {}),\n )}\n >\n <div class='searchcraft-pagination-control'>\n <searchcraft-button\n disabled={this.searchResultsPage === 1}\n hierarchy='tertiary'\n onButtonClick={() =>\n this.handleGoToPage(Math.max(1, this.searchResultsPage - 1))\n }\n label='Previous'\n iconPosition='left'\n icon={\n <svg\n width='20'\n height='20'\n viewBox='0 0 20 20'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n >\n <title>Previous page icon</title>\n <path\n d='M12.5 15L7.5 10L12.5 5'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n }\n iconOnly\n />\n </div>\n <ul class='searchcraft-pagination-list'>\n {this.renderOddPaginationItem(1)}\n {this.renderEvenPaginationItem(2)}\n {this.renderMiddlePaginationItem()}\n {this.renderEvenPaginationItem(\n this.searchResultsPagesCount > 4\n ? this.searchResultsPagesCount - 1\n : 4,\n )}\n {this.renderOddPaginationItem(this.searchResultsPagesCount)}\n </ul>\n <div class='searchcraft-pagination-control'>\n <searchcraft-button\n disabled={this.searchResultsPage === this.searchResultsPagesCount}\n hierarchy='tertiary'\n onButtonClick={() => {\n this.handleGoToPage(\n Math.min(\n this.searchResultsPagesCount,\n this.searchResultsPage + 1,\n ),\n );\n }}\n label='Next'\n iconPosition='right'\n icon={\n <svg\n width='20'\n height='20'\n viewBox='0 0 20 20'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n >\n <title>Next page icon</title>\n <path\n d='M7.5 15L12.5 10L7.5 5'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n }\n iconOnly\n />\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"searchcraft-pagination.js","mappings":"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","names":["SearchcraftPagination"],"sources":["src/components/searchcraft-pagination/searchcraft-pagination.tsx"],"sourcesContent":["import { searchcraftStore } from '@store';\nimport { Component, h, State, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils';\n\n/*\n This web component is designed to facilitate pagination of search results.\n * Once a query is submitted, calculates the number for pages.\n \n ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-pagination />\n * ```\n /\n@Component({\n tag: 'searchcraft-pagination',\n shadow: false,\n})\nexport class SearchcraftPagination {\n /\n The custom styles object.\n /\n @Prop() customStyles?: string;\n\n // store vars\n @State() searchTerm;\n @State() searchResultsPerPage;\n @State() searchResultsPage;\n @State() searchResultsCount;\n\n // local vars\n @State() searchResultsPagesCount = 1;\n @State() searchResultsRangeMin = 1;\n @State() searchResultsRangeMax = 1;\n\n // store functions\n @State() setSearchResultsPage: (page: number) => void = () => {};\n\n private unsubscribe: () => void = () => {};\n\n componentDidLoad() {\n this.unsubscribe = searchcraftStore.subscribe((state) => {\n // store vars\n this.searchTerm = state.searchTerm;\n this.searchResultsPerPage = state.searchResultsPerPage;\n this.searchResultsPage = state.searchResultsPage;\n this.searchResultsCount = state.searchResultsCount;\n\n // local vars\n this.searchResultsPagesCount = Math.ceil(\n this.searchResultsCount / this.searchResultsPerPage,\n );\n this.searchResultsRangeMin =\n (this.searchResultsPage - 1) this.searchResultsPerPage + 1;\n this.searchResultsRangeMax =\n (this.searchResultsPerPage - 1) * this.searchResultsPerPage +\n this.searchResultsPerPage;\n\n // store functions\n this.setSearchResultsPage = state.setSearchResultsPage;\n });\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n }\n\n handleGoToPage(page: number) {\n this.setSearchResultsPage(page);\n }\n\n renderOddPaginationItem(page: number) {\n return (\n <li>\n <button\n class={classNames('searchcraft-pagination-item', {\n 'searchcraft-pagination-item-active':\n this.searchResultsPage === page,\n })}\n onClick={() => this.handleGoToPage(page)}\n type='button'\n >\n {page}\n </button>\n </li>\n );\n }\n\n renderEvenPaginationItem(page: number) {\n if (this.searchResultsPagesCount <= page) {\n return;\n }\n\n if (\n this.searchResultsPagesCount <= 5 \|\|\n page < Math.ceil(this.searchResultsPagesCount / 2) // is the first or second even pagination item\n ? this.searchResultsPage <= page + 1\n : this.searchResultsPage >= page - 1\n ) {\n return (\n <li>\n <button\n class={classNames('searchcraft-pagination-item', {\n 'searchcraft-pagination-item-active':\n this.searchResultsPage === page,\n })}\n onClick={() => this.handleGoToPage(page)}\n type='button'\n >\n {page}\n </button>\n </li>\n );\n }\n\n return (\n <li>\n <span class='searchcraft-pagination-item'>...</span>\n </li>\n );\n }\n\n renderMiddlePaginationItem() {\n if (this.searchResultsPagesCount <= 3) {\n return;\n }\n\n if (\n this.searchResultsPagesCount <= 5 \|\|\n this.searchResultsPage <= 3 \|\|\n this.searchResultsPage >= this.searchResultsPagesCount - 2\n ) {\n return (\n <li>\n <button\n class={classNames('searchcraft-pagination-item', {\n 'searchcraft-pagination-item-active':\n this.searchResultsPage === 3 \|\|\n this.searchResultsPage === this.searchResultsPagesCount - 2,\n })}\n type='button'\n onClick={() =>\n this.handleGoToPage(\n this.searchResultsPage >= this.searchResultsPagesCount - 2\n ? this.searchResultsPagesCount - 2\n : 3,\n )\n }\n >\n {this.searchResultsPage >= this.searchResultsPagesCount - 2\n ? this.searchResultsPagesCount - 2\n : 3}\n </button>\n </li>\n );\n }\n\n return (\n <li>\n <span class='searchcraft-pagination-item searchcraft-pagination-item-active'>\n {this.searchResultsPage}\n </span>\n </li>\n );\n }\n\n render() {\n // early return if there isn't a searchTerm or there is 1 or fewer pages of results\n if (!this.searchTerm \|\| this.searchResultsPagesCount <= 1) {\n return;\n }\n\n return (\n <div\n class={classNames(\n 'searchcraft-pagination',\n parseCustomStyles(this.customStyles \|\| {}),\n )}\n >\n <div class='searchcraft-pagination-control'>\n <searchcraft-button\n disabled={this.searchResultsPage === 1}\n hierarchy='tertiary'\n onButtonClick={() =>\n this.handleGoToPage(Math.max(1, this.searchResultsPage - 1))\n }\n label='Previous'\n iconPosition='left'\n icon={\n <svg\n width='20'\n height='20'\n viewBox='0 0 20 20'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n >\n <title>Previous page icon</title>\n <path\n d='M12.5 15L7.5 10L12.5 5'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n }\n iconOnly\n />\n </div>\n <ul class='searchcraft-pagination-list'>\n {this.renderOddPaginationItem(1)}\n {this.renderEvenPaginationItem(2)}\n {this.renderMiddlePaginationItem()}\n {this.renderEvenPaginationItem(\n this.searchResultsPagesCount > 4\n ? this.searchResultsPagesCount - 1\n : 4,\n )}\n {this.renderOddPaginationItem(this.searchResultsPagesCount)}\n </ul>\n <div class='searchcraft-pagination-control'>\n <searchcraft-button\n disabled={this.searchResultsPage === this.searchResultsPagesCount}\n hierarchy='tertiary'\n onButtonClick={() => {\n this.handleGoToPage(\n Math.min(\n this.searchResultsPagesCount,\n this.searchResultsPage + 1,\n ),\n );\n }}\n label='Next'\n iconPosition='right'\n icon={\n <svg\n width='20'\n height='20'\n viewBox='0 0 20 20'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n >\n <title>Next page icon</title>\n <path\n d='M7.5 15L12.5 10L7.5 5'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n }\n iconOnly\n />\n </div>\n </div>\n );\n }\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-5365011f.js';
-import { u as useSearchcraftStore } from './p-38419178.js';
+import { s as searchcraftStore } from './p-6d8b0ead.js';
 const SearchcraftPopoverButton$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftPopoverButton extends H {
     constructor() {
@@ -7,10 +7,10 @@ const SearchcraftPopoverButton$1 = /*@__PURE__*/ proxyCustomElement(class Search
         this.__registerHost();
     }
     handleOnClick() {
-        useSearchcraftStore.getState().setPopoverVisibility(true);
+        searchcraftStore.getState().setPopoverVisibility(true);
     }
     render() {
-        return (h("button", { key: '538e1e8506bea196e6ba45482f9daa75d032462f', type: 'button', onClick: this.handleOnClick.bind(this) }, h("slot", { key: '788b70da6edcbfb283d373ada36709582ad16e51' })));
+        return (h("button", { key: 'a8ee70b49a5309cfb1363a272ea0870c48c59688', type: 'button', onClick: this.handleOnClick.bind(this) }, h("slot", { key: '9ac712ed1f6e69d73e7ade3d42501fb67a02c7ff' })));
     }
 }, [4, "searchcraft-popover-button"]);
 function defineCustomElement$1() {

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

	@@ -1 +1 @@
1	- {"file":"searchcraft-popover-button.js","mappings":";;;MAUaA,0BAAwB;;;;;IACnC,aAAa;QACX,~~mBAAmB~~,CAAC,QAAQ,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;~~KAC3D~~;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 { ~~useSearchcraftStore~~ } from '@~~provider/~~store';\nimport { Component, h } from '@stencil/core';\n\n/*\n Renders a button which, when clicked, turns on popover visibility.\n */\n@Component({\n tag: 'searchcraft-popover-button',\n shadow: false,\n})\nexport class SearchcraftPopoverButton {\n handleOnClick() {\n ~~useSearchcraftStore~~.getState().setPopoverVisibility(true);\n }\n\n render() {\n return (\n <button type='button' onClick={this.handleOnClick.bind(this)}>\n <slot />\n </button>\n );\n }\n}\n"],"version":3}
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}

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

@@ -1,23 +1,19 @@
 import { p as proxyCustomElement, H, h } from './p-5365011f.js';
 import { c as classNames } from './p-5cdc6210.js';
-import { u as useSearchcraftStore } from './p-38419178.js';
-import { d as defineCustomElement$8 } from './p-71cc28c1.js';
-import { d as defineCustomElement$7 } from './p-0e393fe1.js';
-import { d as defineCustomElement$6 } from './p-6e2eef88.js';
-import { d as defineCustomElement$5 } from './p-e55a7970.js';
-import { d as defineCustomElement$4 } from './p-ec0d230e.js';
-import { d as defineCustomElement$3 } from './p-bff4d3fc.js';
-import { d as defineCustomElement$2 } from './p-25ee7496.js';
+import { s as searchcraftStore } from './p-6d8b0ead.js';
+import { d as defineCustomElement$8 } from './p-05872320.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-5bd5c3cb.js';
+import { d as defineCustomElement$4 } from './p-e55a7970.js';
+import { d as defineCustomElement$3 } from './p-3568414f.js';
+import { d as defineCustomElement$2 } from './p-b0bc5cee.js';
 const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftPopoverForm extends H {
     constructor() {
         super();
         this.__registerHost();
     }
-    /**
-     * The Searchcraft config object.
-     */
-    config;
     /**
      * The type of popover form to render.
      *
@@ -58,13 +54,12 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         this.breakpointMd = Number.parseFloat(computedStyle.getPropertyValue('--sc-breakpoint-md').trim());
         this.breakpointLg = Number.parseFloat(computedStyle.getPropertyValue('--sc-breakpoint-lg').trim());
         // Set popover visiblity in state
-        this.isPopoverVisibleInState =
-            useSearchcraftStore.getState().isPopoverVisible;
+        this.isPopoverVisibleInState = searchcraftStore.getState().isPopoverVisible;
         // Add event listeners
         document.addEventListener('click', this.handleDocumentClick);
         document.addEventListener('keydown', this.handleDocumentKeyDown);
         // Subscribe to state events
-        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+        this.unsubscribe = searchcraftStore.subscribe((state) => {
             if (this.isPopoverVisibleInState !== state.isPopoverVisible) {
                 this.handlePopoverVisibilityChange(state.isPopoverVisible);
             }
@@ -112,7 +107,7 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
                 this.focusOnNextListItem(event.key);
                 break;
             case 'Escape':
-                useSearchcraftStore.getState().setPopoverVisibility(false);
+                searchcraftStore.getState().setPopoverVisibility(false);
                 break;
             default:
                 return;
@@ -131,11 +126,10 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         if (this.type === 'inline' &&
             window.visualViewport &&
             window.visualViewport.width < this.breakpointSm) {
-            useSearchcraftStore.getState().setPopoverVisibility(true);
+            searchcraftStore.getState().setPopoverVisibility(true);
             // Appends a popover form of type=`modal` to the body
             if (!this.modalElement) {
                 this.modalElement = document.createElement('searchcraft-popover-form');
-                this.modalElement.config = this.config;
                 this.modalElement.popoverResultMappings = this.popoverResultMappings;
                 this.modalElement.setAttribute('type', 'fullscreen');
                 document.body.appendChild(this.modalElement);
@@ -143,7 +137,7 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         }
     }
     handleModalBackdropClick(_event) {
-        useSearchcraftStore.getState().setPopoverVisibility(false);
+        searchcraftStore.getState().setPopoverVisibility(false);
     }
     /**
      * When a hotkey is pressed, tests if the modifiers also match.
@@ -159,14 +153,14 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
                 hostElementInput?.focus();
             }
             else {
-                useSearchcraftStore
+                searchcraftStore
                     .getState()
                     .setPopoverVisibility(!this.isPopoverVisibleInState);
             }
         }
     }
     handleCancelButtonClick() {
-        useSearchcraftStore.getState().setPopoverVisibility(false);
+        searchcraftStore.getState().setPopoverVisibility(false);
     }
     /**
      * Moves focus to the next/previous list item in the list view. If you are at the top
@@ -206,19 +200,19 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         const popoverFormClassNames = classNames('searchcraft-popover-form searchcraft-popover-form-inline', {
             'searchcraft-popover-form-active': isListViewVisible,
         });
-        return (h("div", { class: popoverFormClassNames }, h("searchcraft-input-form", { config: this.config, onInputFocus: this.handleInputFocus.bind(this) }), isListViewVisible && (h("div", { class: 'searchcraft-popover-inline-wrapper-outer' }, h("div", { class: 'searchcraft-popover-inline-wrapper-inner' }, h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage }))))));
+        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 }))))));
     }
     renderModalPopover() {
         if (this.isPopoverVisibleInState) {
             const popoverFormClassNames = classNames('searchcraft-popover-form', {
                 'searchcraft-popover-form-active': this.hasResultsToShow,
             });
-            return (h("div", { class: 'searchcraft-popover-form-modal' }, h("div", { class: 'searchcraft-popover-form-modal-backdrop', onClick: this.handleModalBackdropClick }), h("div", { class: 'searchcraft-popover-form-modal-inner' }, h("div", { class: popoverFormClassNames }, h("div", { class: 'searchcraft-popover-form-input-wrapper' }, h("searchcraft-input-form", { config: this.config, onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this) }), h("button", { type: 'button', class: 'searchcraft-popover-form-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), this.hasResultsToShow && (h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage }))))));
+            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 }))))));
         }
     }
     renderFullscreenPopover() {
         if (this.isPopoverVisibleInState) {
-            return (h("div", { class: 'searchcraft-popover-form-fullscreen' }, h("div", { class: 'searchcraft-popover-form' }, h("div", { class: 'searchcraft-popover-form-input-wrapper' }, h("searchcraft-input-form", { config: this.config, onInputFocus: this.handleInputFocus.bind(this), onInputInit: this.handleInputInit.bind(this) }), h("button", { type: 'button', class: 'searchcraft-popover-form-cancel-button', onClick: this.handleCancelButtonClick.bind(this) }, "Cancel")), this.hasResultsToShow && (h("searchcraft-popover-list-view", { popoverResultMappings: this.popoverResultMappings, searchClientResponseItems: this.searchClientResponseItems, adClientResponseItems: this.adClientResponseItems, searchResultsPage: this.searchResultsPage, searchResultsPerPage: this.searchResultsPerPage })))));
+            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 })))));
         }
     }
     render() {
@@ -232,7 +226,6 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         }
     }
 }, [0, "searchcraft-popover-form", {
-        "config": [16],
         "type": [1],
         "popoverResultMappings": [16],
         "hotkey": [1],
@@ -254,44 +247,44 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["searchcraft-popover-form", "searchcraft-button", "searchcraft-error-message", "searchcraft-input-form", "searchcraft-input-label", "searchcraft-popover-form", "searchcraft-popover-list-item", "searchcraft-popover-list-item-ad", "searchcraft-popover-list-view"];
+    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"];
     components.forEach(tagName => { switch (tagName) {
         case "searchcraft-popover-form":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SearchcraftPopoverForm$1);
             }
             break;
-        case "searchcraft-button":
+        case "searchcraft-ad":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "searchcraft-error-message":
+        case "searchcraft-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "searchcraft-input-form":
+        case "searchcraft-error-message":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "searchcraft-input-label":
+        case "searchcraft-input-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "searchcraft-popover-form":
+        case "searchcraft-input-label":
             if (!customElements.get(tagName)) {
-                defineCustomElement$1();
+                defineCustomElement$4();
             }
             break;
-        case "searchcraft-popover-list-item":
+        case "searchcraft-popover-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$1();
             }
             break;
-        case "searchcraft-popover-list-item-ad":
+        case "searchcraft-popover-list-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

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

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

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

@@ -1,4 +1,4 @@
-import { S as SearchcraftPopoverListItem$1, d as defineCustomElement$1 } from './p-ec0d230e.js';
+import { S as SearchcraftPopoverListItem$1, d as defineCustomElement$1 } from './p-3568414f.js';
 const SearchcraftPopoverListItem = SearchcraftPopoverListItem$1;
 const defineCustomElement = defineCustomElement$1;

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

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

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-5365011f.js';
 import { c as classNames } from './p-5cdc6210.js';
-import { u as useSearchcraftStore } from './p-38419178.js';
+import { s as searchcraftStore } from './p-6d8b0ead.js';
 import { f as formatNumberWithCommas } from './p-6104fe5d.js';
 import { p as parseCustomStyles } from './p-d9551738.js';
@@ -34,7 +34,7 @@ const SearchcraftResultsInfo$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
     responseTime = '0';
     unsubscribe = () => { };
     connectedCallback() {
-        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+        this.unsubscribe = searchcraftStore.subscribe((state) => {
             // store vars
             this.searchTerm = state.searchTerm;
             this.searchResultsPage = state.searchResultsPage;

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

	@@ -1 +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,~~mBAAmB~~,CAAC,SAAS,CAAC,CAAC,KAAK;;~~YAErD~~,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;YACnC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC;YACjD,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,oBAAoB,CAAC;YACvD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,kBAAkB,CAAC;;YAGnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC;YACrC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBACX,IAAI,CAAC,iBAAiB,IAAI,CAAC;sBACvB,CAAC;sBACD,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC;YAC/D,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,CAAC;YACnE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBACX,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,kBAAkB;sBACnC,IAAI,CAAC,kBAAkB;sBACvB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACpB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,uBAAuB,IAAI,CAAC,IAAI,IAAI,EAAE,OAAO,CACvE,CAAC,CACF,CAAC;SACH,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,kBAAkB,KAAK,CAAC,EAAE;YACrD,OAAO,IAAI,CAAC;SACb;QAED,QACE,SACE,KAAK,EAAE,UAAU,CACf,0BAA0B,EAC1B,iBAAiB,CAAC,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAC3C,IAEA,IAAI,CAAC,eAAe;cACjB,IAAI,CAAC,eAAe,CAClB;gBACE,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBACrC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;aACtC,EACD,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,EAClC,IAAI,CAAC,YAAY,CAClB;cACD,GAAG,IAAI,CAAC,KAAK,qBAAqB,IAAI,CAAC,YAAY,IAAI,CACzD,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["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 { ~~useSearchcraftStore~~ } from '@~~provider/~~store';\n\nimport { formatNumberWithCommas, parseCustomStyles } from '@utils';\n\n/*\n This web component is designed to display the number of results returned from a search query.\n \n ## Usage\n * ```html\n * <!-- index.html -->\n * <script>\n * const resultsInfo = document.querySelector('searchcraft-results-info');\n * resultsInfo.customFormatter = (range, count, responseTime) =>\n * `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;\n * </script>\n \n <searchcraft-results-info />\n * ```\n /\n@Component({\n tag: 'searchcraft-results-info',\n shadow: false,\n})\nexport class SearchcraftResultsInfo {\n /\n The custom formatter for the resulting string.\n \n @example\n * ```ts\n * resultsInfo.customFormatter = (range, count, responseTime) =>\n * `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;\n * ```\n /\n @Prop() customFormatter?: (\n range: [string, string],\n count: string,\n responseTime: string,\n ) => void;\n /\n The custom styles object.\n /\n @Prop() customStyles?: string;\n\n // store vars\n @State() searchTerm;\n @State() searchResultsPage;\n @State() searchResultsPerPage;\n @State() searchResultsCount;\n\n // local vars\n @State() count = 0;\n @State() range: number[] = [0, 0];\n @State() responseTime = '0';\n\n unsubscribe: () => void = () => {};\n\n connectedCallback() {\n this.unsubscribe = ~~useSearchcraftStore~~.subscribe((state) => {\n // store vars\n this.searchTerm = state.searchTerm;\n this.searchResultsPage = state.searchResultsPage;\n this.searchResultsPerPage = state.searchResultsPerPage;\n this.searchResultsCount = state.searchResultsCount;\n\n // local vars\n this.count = this.searchResultsCount;\n this.range[0] =\n this.searchResultsPage <= 1\n ? 1\n : this.searchResultsPerPage (this.searchResultsPage - 1);\n this.range[1] = this.searchResultsPerPage * this.searchResultsPage;\n this.range[1] =\n this.range[1] > this.searchResultsCount\n ? this.searchResultsCount\n : this.range[1];\n this.responseTime = ((state.searchResponseTimeTaken \|\| 0) * 1000).toFixed(\n 2,\n );\n });\n }\n\n disconnectedCallback() {\n if (this.unsubscribe) {\n this.unsubscribe();\n }\n }\n\n render() {\n if (!this.searchTerm \|\| this.searchResultsCount === 0) {\n return null;\n }\n\n return (\n <p\n class={classNames(\n 'searchcraft-results-info',\n parseCustomStyles(this.customStyles \|\| {}),\n )}\n >\n {this.customFormatter\n ? this.customFormatter(\n [\n formatNumberWithCommas(this.range[0]),\n formatNumberWithCommas(this.range[1]),\n ],\n formatNumberWithCommas(this.count),\n this.responseTime,\n )\n : `${this.count} results found in ${this.responseTime}ms`}\n </p>\n );\n }\n}\n"],"version":3}
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}

package/dist/components/searchcraft-search-results-per-page.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-5365011f.js';
-import { u as useSearchcraftStore } from './p-38419178.js';
+import { s as searchcraftStore } from './p-6d8b0ead.js';
 import { c as classNames } from './p-5cdc6210.js';
 import { p as parseCustomStyles } from './p-d9551738.js';
 import { d as defineCustomElement$2 } from './p-bf6a086a.js';
@@ -31,7 +31,7 @@ const SearchcraftSearchResultsPerPage$1 = /*@__PURE__*/ proxyCustomElement(class
     setSearchResultsPage = () => { };
     unsubscribe = () => { };
     componentDidLoad() {
-        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+        this.unsubscribe = searchcraftStore.subscribe((state) => {
             // store vars
             this.searchTerm = state.searchTerm;
             this.searchResultsPerPage = state.searchResultsPerPage;
@@ -44,7 +44,7 @@ const SearchcraftSearchResultsPerPage$1 = /*@__PURE__*/ proxyCustomElement(class
             this.setSearchResultsPerPage = state.setSearchResultsPerPage;
         });
         this.initialSearchResultsPerPage =
-            useSearchcraftStore.getState().searchResultsPerPage;
+            searchcraftStore.getState().searchResultsPerPage;
     }
     disconnectedCallback() {
         this.unsubscribe?.();

package/dist/components/searchcraft-search-results-per-page.js.map CHANGED Viewed

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

package/dist/components/searchcraft-slider.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SearchcraftSlider$1, d as defineCustomElement$1 } from './p-4e9cd62e.js';
+import { S as SearchcraftSlider$1, d as defineCustomElement$1 } from './p-bb12ab5a.js';
 const SearchcraftSlider = SearchcraftSlider$1;
 const defineCustomElement = defineCustomElement$1;