@searchcraft/javascript-sdk 0.7.1 → 0.8.0

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

@@ -1,5 +1,4 @@
 import { h } from "@stencil/core";
-import { getDocumentValueFromSearchResultMapping } from "../../utils/index";
 /**
  * This web component is designed to display a list of results within a popover interface.
  * It is consumed within the `searchcraft-popover-form` component.
@@ -17,22 +16,14 @@ export class SearchcraftPopoverListView {
      */
     popoverResultMappings;
     /**
-     * The documents to render in the list view.
+     * The items to render in the list view.
      */
-    documents;
-    renderDocument(document, index) {
-        /**
-         * Index field values -> Result container props mappings.
-         */
-        const titleContent = getDocumentValueFromSearchResultMapping(document, this.popoverResultMappings?.title);
-        const subtitleContent = getDocumentValueFromSearchResultMapping(document, this.popoverResultMappings?.subtitle);
-        const href = getDocumentValueFromSearchResultMapping(document, this.popoverResultMappings?.href);
-        const imageSource = getDocumentValueFromSearchResultMapping(document, this.popoverResultMappings?.imageSource);
-        const imageAlt = getDocumentValueFromSearchResultMapping(document, this.popoverResultMappings?.imageAlt);
-        return (h("searchcraft-popover-list-item", { key: `${document.document_id}-${index}`, "title-content": titleContent, "subtitle-content": subtitleContent, "image-src": imageSource, "image-alt": imageAlt, href: href, "document-position": index }));
-    }
+    searchClientResponseItems;
+    adClientResponseItems;
+    searchResultsPage;
+    searchResultsPerPage;
     render() {
-        return (h("div", { key: '2eee5552a2bf24bd0c75a224d4de6da8526df316', class: 'searchcraft-popover-list-view' }, this.documents?.map((document, index) => this.renderDocument(document, index))));
+        return (h("div", { key: 'a869d98e96f6fbbc80ecb79058c4753b4a3a8b1d', class: 'searchcraft-popover-list-view' }, this.adClientResponseItems?.map((item) => (h("searchcraft-popover-list-item-ad", { adClientResponseItem: item, key: item.adId }))), this.searchClientResponseItems?.map((item, index) => (h("searchcraft-popover-list-item", { item: item, key: item.id, popoverResultMappings: this.popoverResultMappings, documentPosition: this.searchResultsPerPage * (this.searchResultsPage - 1) + index })))));
     }
     static get is() { return "searchcraft-popover-list-view"; }
     static get properties() {
@@ -46,8 +37,8 @@ export class SearchcraftPopoverListView {
                     "references": {
                         "PopoverResultMappings": {
                             "location": "import",
-                            "path": "types",
-                            "id": "src/types/index.ts::PopoverResultMappings"
+                            "path": "@searchcraft/core",
+                            "id": "../core-sdk/dist/index.d.ts::PopoverResultMappings"
                         }
                     }
                 },
@@ -60,16 +51,40 @@ export class SearchcraftPopoverListView {
                 "getter": false,
                 "setter": false
             },
-            "documents": {
+            "searchClientResponseItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SearchClientResponseItem[] | undefined",
+                    "resolved": "SearchClientResponseItem[] | undefined",
+                    "references": {
+                        "SearchClientResponseItem": {
+                            "location": "import",
+                            "path": "@searchcraft/core",
+                            "id": "../core-sdk/dist/index.d.ts::SearchClientResponseItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The items to render in the list view."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "adClientResponseItems": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "Record<string, unknown>[] | undefined",
-                    "resolved": "Record<string, unknown>[] | undefined",
+                    "original": "AdClientResponseItem[] | undefined",
+                    "resolved": "AdClientResponseItem[] | undefined",
                     "references": {
-                        "Record": {
-                            "location": "global",
-                            "id": "global::Record"
+                        "AdClientResponseItem": {
+                            "location": "import",
+                            "path": "@searchcraft/core",
+                            "id": "../core-sdk/dist/index.d.ts::AdClientResponseItem"
                         }
                     }
                 },
@@ -77,10 +92,48 @@ export class SearchcraftPopoverListView {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The documents to render in the list view."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false
+            },
+            "searchResultsPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "search-results-page",
+                "reflect": false
+            },
+            "searchResultsPerPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "search-results-per-page",
+                "reflect": false
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-popover-list-view.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-popover-list-view/searchcraft-popover-list-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,uCAAuC,EAAE,MAAM,QAAQ,CAAC;AAGjE;;;;;;;;;GASG;AAKH,MAAM,OAAO,0BAA0B;IACrC;;;OAGG;IACK,qBAAqB,CAAoC;IACjE;;OAEG;IACK,SAAS,CAAwC;IAEzD,cAAc,CAAC,QAAiC,EAAE,KAAa;QAC7D;;WAEG;QACH,MAAM,YAAY,GAAG,uCAAuC,CAC1D,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,KAAK,CAClC,CAAC;QACF,MAAM,eAAe,GAAG,uCAAuC,CAC7D,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CACrC,CAAC;QACF,MAAM,IAAI,GAAG,uCAAuC,CAClD,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,IAAI,CACjC,CAAC;QACF,MAAM,WAAW,GAAG,uCAAuC,CACzD,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,WAAW,CACxC,CAAC;QACF,MAAM,QAAQ,GAAG,uCAAuC,CACtD,QAAQ,EACR,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CACrC,CAAC;QAEF,OAAO,CACL,qCACE,GAAG,EAAE,GAAG,QAAQ,CAAC,WAAW,IAAI,KAAK,EAAE,mBACxB,YAAY,sBACT,eAAe,eACtB,WAAW,eACX,QAAQ,EACnB,IAAI,EAAE,IAAI,uBACS,KAAK,GACxB,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CACvC,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CACrC,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\nimport { getDocumentValueFromSearchResultMapping } from '@utils';\nimport type { PopoverResultMappings } from 'types';\n\n/**\n * This web component is designed to display a list of results within a popover interface.\n * It is consumed within the `searchcraft-popover-form` component.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-list-view />\n * ```\n */\n@Component({\n  tag: 'searchcraft-popover-list-view',\n  shadow: false,\n})\nexport class SearchcraftPopoverListView {\n  /**\n   * The mappings that define how the data in the documents are mapped to the\n   * list-view-item elements.\n   */\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n  /**\n   * The documents to render in the list view.\n   */\n  @Prop() documents: Record<string, unknown>[] | undefined;\n\n  renderDocument(document: Record<string, unknown>, index: number) {\n    /**\n     * Index field values -> Result container props mappings.\n     */\n    const titleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.title,\n    );\n    const subtitleContent = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.subtitle,\n    );\n    const href = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.href,\n    );\n    const imageSource = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.imageSource,\n    );\n    const imageAlt = getDocumentValueFromSearchResultMapping(\n      document,\n      this.popoverResultMappings?.imageAlt,\n    );\n\n    return (\n      <searchcraft-popover-list-item\n        key={`${document.document_id}-${index}`}\n        title-content={titleContent}\n        subtitle-content={subtitleContent}\n        image-src={imageSource}\n        image-alt={imageAlt}\n        href={href}\n        document-position={index}\n      />\n    );\n  }\n\n  render() {\n    return (\n      <div class='searchcraft-popover-list-view'>\n        {this.documents?.map((document, index) =>\n          this.renderDocument(document, index),\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-popover-list-view.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-popover-list-view/searchcraft-popover-list-view.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAInD;;;;;;;;;GASG;AAKH,MAAM,OAAO,0BAA0B;IACrC;;;OAGG;IACK,qBAAqB,CAAoC;IACjE;;OAEG;IACK,yBAAyB,CAAyC;IAClE,qBAAqB,CAAqC;IAC1D,iBAAiB,CAAU;IAC3B,oBAAoB,CAAU;IAEtC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,+BAA+B;YACvC,IAAI,CAAC,qBAAqB,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACzC,wCACE,oBAAoB,EAAE,IAAI,EAC1B,GAAG,EAAE,IAAI,CAAC,IAAI,GACd,CACH,CAAC;YACD,IAAI,CAAC,yBAAyB,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACpD,qCACE,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,gBAAgB,EACd,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,GAAG,KAAK,GAElE,CACH,CAAC,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import type {\n  AdClientResponseItem,\n  SearchClientResponseItem,\n} from '@searchcraft/core';\nimport { Component, h, Prop } from '@stencil/core';\n\nimport type { PopoverResultMappings } from '@searchcraft/core';\n\n/**\n * This web component is designed to display a list of results within a popover interface.\n * It is consumed within the `searchcraft-popover-form` component.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-list-view />\n * ```\n */\n@Component({\n  tag: 'searchcraft-popover-list-view',\n  shadow: false,\n})\nexport class SearchcraftPopoverListView {\n  /**\n   * The mappings that define how the data in the documents are mapped to the\n   * list-view-item elements.\n   */\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n  /**\n   * The items to render in the list view.\n   */\n  @Prop() searchClientResponseItems: SearchClientResponseItem[] | undefined;\n  @Prop() adClientResponseItems: AdClientResponseItem[] | undefined;\n  @Prop() searchResultsPage!: number;\n  @Prop() searchResultsPerPage!: number;\n\n  render() {\n    return (\n      <div class='searchcraft-popover-list-view'>\n        {this.adClientResponseItems?.map((item) => (\n          <searchcraft-popover-list-item-ad\n            adClientResponseItem={item}\n            key={item.adId}\n          />\n        ))}\n        {this.searchClientResponseItems?.map((item, index) => (\n          <searchcraft-popover-list-item\n            item={item}\n            key={item.id}\n            popoverResultMappings={this.popoverResultMappings}\n            documentPosition={\n              this.searchResultsPerPage * (this.searchResultsPage - 1) + index\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,28 +1,66 @@
 import { h } from "@stencil/core";
+import classNames from "classnames";
 import { useSearchcraftStore } from "../../provider/store";
-import { formatNumberWithCommas } from "../../utils/index";
+import { formatNumberWithCommas, parseCustomStyles } from "../../utils/index";
 /**
  * This web component is designed to display the number of results returned from a search query.
- * It provides users with real-time feedback on the scale of the results, such as the total number of items found.
  *
  * ## Usage
  * ```html
  * <!-- index.html -->
+ * <script>
+ *  const resultsInfo = document.querySelector('searchcraft-results-info');
+ *  resultsInfo.customFormatter = (range, count, responseTime) =>
+ *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+ * </script>
+ *
  * <searchcraft-results-info />
  * ```
  */
 export class SearchcraftResultsInfo {
-    isRequesting = false;
-    resultsCount = 0;
-    responseTime = '';
-    query = '';
+    /**
+     * The custom formatter for the resulting string.
+     *
+     * @example
+     * ```ts
+     *  resultsInfo.customFormatter = (range, count, responseTime) =>
+     *    `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+     * ```
+     */
+    customFormatter;
+    /**
+     * The custom styles object.
+     */
+    customStyles;
+    // store vars
+    searchTerm;
+    searchResultsPage;
+    searchResultsPerPage;
+    searchResultsCount;
+    // local vars
+    count = 0;
+    range = [0, 0];
+    responseTime = '0';
     unsubscribe = () => { };
     connectedCallback() {
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
-            this.isRequesting = state.isRequesting;
-            this.resultsCount = state.searchResults?.data?.count || 0;
-            this.responseTime = ((state.searchResults?.data?.time_taken || 0) * 1000).toFixed(2);
-            this.query = state.query || '';
+            // store vars
+            this.searchTerm = state.searchTerm;
+            this.searchResultsPage = state.searchResultsPage;
+            this.searchResultsPerPage = state.searchResultsPerPage;
+            this.searchResultsCount = state.searchResultsCount;
+            // local vars
+            this.count = this.searchResultsCount;
+            this.range[0] =
+                this.searchResultsPage <= 1
+                    ? 1
+                    : this.searchResultsPerPage * (this.searchResultsPage - 1);
+            this.range[1] = this.searchResultsPerPage * this.searchResultsPage;
+            this.range[1] =
+                this.range[1] > this.searchResultsCount
+                    ? this.searchResultsCount
+                    : this.range[1];
+            this.responseTime = ((state.searchResponseTimeTaken || 0) * 1000).toFixed(2);
         });
     }
     disconnectedCallback() {
@@ -31,19 +69,69 @@ export class SearchcraftResultsInfo {
         }
     }
     render() {
-        if (!this.query || this.resultsCount === 0) {
+        if (!this.searchTerm || this.searchResultsCount === 0) {
             return null;
         }
-        const formattedResults = formatNumberWithCommas(this.resultsCount);
-        return (h("div", { class: 'searchcraft-results-info-container' }, h("p", { class: 'searchcraft-results-info-content' }, formattedResults, " results found in ", this.responseTime, "ms")));
+        return (h("p", { class: classNames('searchcraft-results-info', parseCustomStyles(this.customStyles || {})) }, this.customFormatter
+            ? this.customFormatter([
+                formatNumberWithCommas(this.range[0]),
+                formatNumberWithCommas(this.range[1]),
+            ], formatNumberWithCommas(this.count), this.responseTime)
+            : `${this.count} results found in ${this.responseTime}ms`));
     }
     static get is() { return "searchcraft-results-info"; }
+    static get properties() {
+        return {
+            "customFormatter": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(\n    range: [string, string],\n    count: string,\n    responseTime: string,\n  ) => void",
+                    "resolved": "((range: [string, string], count: string, responseTime: string) => void) | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "```ts\n resultsInfo.customFormatter = (range, count, responseTime) =>\n   `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;\n```"
+                        }],
+                    "text": "The custom formatter for the resulting string."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "customStyles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The custom styles object."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "custom-styles",
+                "reflect": false
+            }
+        };
+    }
     static get states() {
         return {
-            "isRequesting": {},
-            "resultsCount": {},
-            "responseTime": {},
-            "query": {}
+            "searchTerm": {},
+            "searchResultsPage": {},
+            "searchResultsPerPage": {},
+            "searchResultsCount": {},
+            "count": {},
+            "range": {},
+            "responseTime": {}
         };
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-results-info.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAEhD;;;;;;;;;GASG;AAKH,MAAM,OAAO,sBAAsB;IACxB,YAAY,GAAG,KAAK,CAAC;IACrB,YAAY,GAAG,CAAC,CAAC;IACjB,YAAY,GAAG,EAAE,CAAC;IAClB,KAAK,GAAG,EAAE,CAAC;IAEpB,WAAW,GAAe,GAAG,EAAE,GAAE,CAAC,CAAC;IAEnC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YACzD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;YACvC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC;YAC1D,IAAI,CAAC,YAAY,GAAG,CAClB,CAAC,KAAK,CAAC,aAAa,EAAE,IAAI,EAAE,UAAU,IAAI,CAAC,CAAC,GAAG,IAAI,CACpD,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE,CAAC;YAC3C,OAAO,IAAI,CAAC;QACd,CAAC;QACD,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACnE,OAAO,CACL,WAAK,KAAK,EAAC,oCAAoC;YAC7C,SAAG,KAAK,EAAC,kCAAkC;gBACxC,gBAAgB;;gBAAoB,IAAI,CAAC,YAAY;qBACpD,CACA,CACP,CAAC;IACJ,CAAC;;;;;;;;CACF","sourcesContent":["import { Component, h, State } from '@stencil/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { formatNumberWithCommas } from '@utils';\n\n/**\n * This web component is designed to display the number of results returned from a search query.\n * It provides users with real-time feedback on the scale of the results, such as the total number of items found.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-results-info />\n * ```\n */\n@Component({\n  tag: 'searchcraft-results-info',\n  shadow: false,\n})\nexport class SearchcraftResultsInfo {\n  @State() isRequesting = false;\n  @State() resultsCount = 0;\n  @State() responseTime = '';\n  @State() query = '';\n\n  unsubscribe: () => void = () => {};\n\n  connectedCallback() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.isRequesting = state.isRequesting;\n      this.resultsCount = state.searchResults?.data?.count || 0;\n      this.responseTime = (\n        (state.searchResults?.data?.time_taken || 0) * 1000\n      ).toFixed(2);\n      this.query = state.query || '';\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n    const formattedResults = formatNumberWithCommas(this.resultsCount);\n    return (\n      <div class='searchcraft-results-info-container'>\n        <p class='searchcraft-results-info-content'>\n          {formattedResults} results found in {this.responseTime}ms\n        </p>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-results-info.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"names":[],"mappings":"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","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"]}

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

@@ -0,0 +1,129 @@
+import { useSearchcraftStore } from "../../provider/store";
+import { h } from "@stencil/core";
+import classNames from "classnames";
+import { parseCustomStyles } from "../../utils/index";
+/**
+ * This web component is designed to choose the number of search results displayed.
+ *
+ * ## Usage
+ * ```html
+ * <!-- index.html -->
+ * <searchcraft-search-results-per-page increment="20" />
+ * ```
+ */
+export class SearchcraftSearchResultsPerPage {
+    /**
+     * The amount the options will increase (e.g. 20 = [20, 40, 60, 80, 100]).
+     * The base value is defined by the `searchResultsPerPage` option in the configuration.
+     */
+    increment = 20;
+    /**
+     * The custom styles object.
+     */
+    customStyles;
+    // store vars
+    searchTerm;
+    searchResultsPage;
+    searchResultsPerPage;
+    searchResultsCount;
+    searchResultsPagesCount;
+    // local vars
+    initialSearchResultsPerPage;
+    // store functions
+    setSearchResultsPerPage = () => { };
+    setSearchResultsPage = () => { };
+    unsubscribe = () => { };
+    componentDidLoad() {
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            // store vars
+            this.searchTerm = state.searchTerm;
+            this.searchResultsPerPage = state.searchResultsPerPage;
+            this.searchResultsPage = state.searchResultsPage;
+            this.searchResultsCount = state.searchResultsCount;
+            // local vars
+            this.searchResultsPagesCount = Math.ceil(this.searchResultsCount / this.searchResultsPerPage);
+            // store functions
+            this.setSearchResultsPage = state.setSearchResultsPage;
+            this.setSearchResultsPerPage = state.setSearchResultsPerPage;
+        });
+        this.initialSearchResultsPerPage =
+            useSearchcraftStore.getState().searchResultsPerPage;
+    }
+    disconnectedCallback() {
+        this.unsubscribe?.();
+    }
+    render() {
+        // early return if there isn't a searchTerm or there is 1 or fewer pages of results
+        if (!this.searchTerm || this.searchResultsPagesCount <= 1) {
+            return;
+        }
+        return (h("div", { class: classNames('searchcraft-search-results-per-page', parseCustomStyles(this.customStyles || {})) }, h("div", { class: 'searchcraft-search-results-per-page-select' }, h("label", { class: 'searchcraft-search-results-per-page-select-label', htmlFor: 'searchcraft-search-results-per-page-select-input' }, "Results Per Page"), h("div", { class: 'searchcraft-search-results-per-page-select-input' }, h("searchcraft-select", { inputId: 'searchcraft-search-results-per-page-select-input', name: 'results-per-page', options: [...Array(5)].map((_, index) => {
+                const value = this.initialSearchResultsPerPage +
+                    Number(this.increment) * index;
+                return {
+                    label: `${value}`,
+                    value,
+                };
+            }), onSelectChange: (event) => {
+                this.setSearchResultsPerPage(Number(event.detail));
+                this.setSearchResultsPage(1);
+            } })))));
+    }
+    static get is() { return "searchcraft-search-results-per-page"; }
+    static get properties() {
+        return {
+            "increment": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The amount the options will increase (e.g. 20 = [20, 40, 60, 80, 100]).\nThe base value is defined by the `searchResultsPerPage` option in the configuration."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "increment",
+                "reflect": false,
+                "defaultValue": "20"
+            },
+            "customStyles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The custom styles object."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "custom-styles",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "searchTerm": {},
+            "searchResultsPage": {},
+            "searchResultsPerPage": {},
+            "searchResultsCount": {},
+            "searchResultsPagesCount": {},
+            "initialSearchResultsPerPage": {},
+            "setSearchResultsPerPage": {},
+            "setSearchResultsPage": {}
+        };
+    }
+}
+//# sourceMappingURL=searchcraft-search-results-per-page.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"searchcraft-search-results-per-page.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-search-results-per-page/searchcraft-search-results-per-page.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport { Component, h, State, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils';\n\n/**\n * This web component is designed to 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"]}