@searchcraft/javascript-sdk 0.8.1 → 0.8.2
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.
- package/dist/cjs/searchcraft-button_3.cjs.entry.js +1 -1
- package/dist/cjs/searchcraft-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/searchcraft-input-form_2.cjs.entry.js +2 -2
- package/dist/cjs/searchcraft-pagination.cjs.entry.js +2 -2
- package/dist/cjs/searchcraft-pagination.cjs.entry.js.map +1 -1
- package/dist/collection/components/searchcraft-button/searchcraft-button.js +1 -1
- package/dist/collection/components/searchcraft-button/searchcraft-button.js.map +1 -1
- package/dist/collection/components/searchcraft-pagination/searchcraft-pagination.js +2 -2
- package/dist/collection/components/searchcraft-pagination/searchcraft-pagination.js.map +1 -1
- package/dist/components/{p-ae78be68.js → p-6e2eef88.js} +4 -4
- package/dist/components/{p-ae78be68.js.map → p-6e2eef88.js.map} +1 -1
- package/dist/components/{p-d19bf6ff.js → p-71cc28c1.js} +2 -2
- package/dist/components/p-71cc28c1.js.map +1 -0
- package/dist/components/searchcraft-button.js +1 -1
- package/dist/components/searchcraft-input-form.js +1 -1
- package/dist/components/searchcraft-pagination.js +3 -3
- package/dist/components/searchcraft-pagination.js.map +1 -1
- package/dist/components/searchcraft-popover-form.js +2 -2
- package/dist/esm/searchcraft-button_3.entry.js +1 -1
- package/dist/esm/searchcraft-button_3.entry.js.map +1 -1
- package/dist/esm/searchcraft-input-form_2.entry.js +2 -2
- package/dist/esm/searchcraft-pagination.entry.js +2 -2
- package/dist/esm/searchcraft-pagination.entry.js.map +1 -1
- package/dist/searchcraft-javascript-sdk/p-37842dee.entry.js +2 -0
- package/dist/searchcraft-javascript-sdk/p-37842dee.entry.js.map +1 -0
- package/dist/searchcraft-javascript-sdk/{p-69da4e58.entry.js → p-3be70f20.entry.js} +2 -2
- package/dist/searchcraft-javascript-sdk/p-3be70f20.entry.js.map +1 -0
- package/dist/searchcraft-javascript-sdk/{p-75779e4b.entry.js → p-7813f3cc.entry.js} +2 -2
- package/dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.esm.js +1 -1
- package/package.json +3 -3
- package/dist/components/p-d19bf6ff.js.map +0 -1
- package/dist/searchcraft-javascript-sdk/p-69da4e58.entry.js.map +0 -1
- package/dist/searchcraft-javascript-sdk/p-d2fffca9.entry.js +0 -2
- package/dist/searchcraft-javascript-sdk/p-d2fffca9.entry.js.map +0 -1
- /package/dist/searchcraft-javascript-sdk/{p-75779e4b.entry.js.map → p-7813f3cc.entry.js.map} +0 -0
|
@@ -46,7 +46,7 @@ const SearchcraftButton = class {
|
|
|
46
46
|
this.buttonClick.emit();
|
|
47
47
|
};
|
|
48
48
|
render() {
|
|
49
|
-
return (index.h("button", { key: '
|
|
49
|
+
return (index.h("button", { key: 'ff883b930d03da6cbfb40badd3be1de0a873f853', "aria-label": this.label, class: index$1.classNames('searchcraft-button', {
|
|
50
50
|
'searchcraft-button-primary': this.hierarchy === 'primary',
|
|
51
51
|
'searchcraft-button-tertiary': this.hierarchy === 'tertiary',
|
|
52
52
|
'searchcraft-button-disabled': this.disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"searchcraft-button.searchcraft-error-message.searchcraft-input-label.entry.cjs.js","mappings":";;;;;;;MAmBa,iBAAiB;;;;;;;;IAIpB,SAAS,GAA4B,SAAS,CAAC;;;;IAI/C,QAAQ,GAAa,KAAK,CAAC;;;;IAI3B,IAAI,CAAW;;;;IAIf,QAAQ,GAAa,KAAK,CAAC;;;;IAI3B,YAAY,GAAsB,MAAM,CAAC;;;;IAIzC,KAAK,GAAG,QAAQ,CAAC;;;;IAIjB,IAAI,GAAmC,QAAQ,CAAC;;;;IAI/C,WAAW,CAAsB;IAElC,iBAAiB,GAAG;QAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB,CAAC;IAEF,MAAM;QACJ,QACEA,
|
|
1
|
+
{"file":"searchcraft-button.searchcraft-error-message.searchcraft-input-label.entry.cjs.js","mappings":";;;;;;;MAmBa,iBAAiB;;;;;;;;IAIpB,SAAS,GAA4B,SAAS,CAAC;;;;IAI/C,QAAQ,GAAa,KAAK,CAAC;;;;IAI3B,IAAI,CAAW;;;;IAIf,QAAQ,GAAa,KAAK,CAAC;;;;IAI3B,YAAY,GAAsB,MAAM,CAAC;;;;IAIzC,KAAK,GAAG,QAAQ,CAAC;;;;IAIjB,IAAI,GAAmC,QAAQ,CAAC;;;;IAI/C,WAAW,CAAsB;IAElC,iBAAiB,GAAG;QAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB,CAAC;IAEF,MAAM;QACJ,QACEA,mFACc,IAAI,CAAC,KAAK,EACtB,KAAK,EAAEC,kBAAU,CAAC,oBAAoB,EAAE;gBACtC,4BAA4B,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS;gBAC1D,6BAA6B,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU;gBAC5D,6BAA6B,EAAE,IAAI,CAAC,QAAQ;aAC7C,CAAC,EACF,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,IAEd,IAAI,CAAC,QAAQ,IACZ,IAAI,CAAC,IAAI,KAETD,QAACE,cAAQ,QACN,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,EAC1CF,sBAAO,IAAI,CAAC,KAAK,CAAQ,EACxB,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,CAClC,CACZ,CACM,EACT;KACH;;;MClEU,uBAAuB;;;;;;;IAI1B,YAAY,CAAU;IAE9B,MAAM;QACJ,QACEA,gEAAG,KAAK,EAAC,2BAA2B,IACjC,IAAI,CAAC,YAAY,IAAI,0BAA0B,CAC9C,EACJ;KACH;;;MCXU,qBAAqB;;;;;;;IAIxB,mBAAmB,GAAI,EAAE,CAAC;IAC1B,KAAK,GAAG,EAAE,CAAC;IAEnB,MAAM;QACJ,QACEA,oEACE,KAAK,EAAEC,kBAAU,CAAC,yBAAyB,EAAE,IAAI,CAAC,mBAAmB,CAAC,EACtE,OAAO,EAAC,sBAAsB,IAE7B,IAAI,CAAC,KAAK,CACL,EACR;KACH;;;;;;;","names":["h","classNames","Fragment"],"sources":["src/components/searchcraft-button/searchcraft-button.tsx","src/components/searchcraft-error-message/searchcraft-error-message.tsx","src/components/searchcraft-input-label/searchcraft-input-label.tsx"],"sourcesContent":["import {\n Component,\n Event,\n type EventEmitter,\n Prop,\n h,\n Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component represents a button to be consumed within the `search-input-form` component.\n * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.\n * It is consumed within the `searchcraft-input-form` component.\n */\n@Component({\n tag: 'searchcraft-button',\n shadow: false,\n})\nexport class SearchcraftButton {\n /**\n * Controls the visual representation of the button.\n */\n @Prop() hierarchy?: 'primary' | 'tertiary' = 'primary';\n /**\n * Whether the button is disabled.\n */\n @Prop() disabled?: boolean = false;\n /**\n * The icon element.\n */\n @Prop() icon?: Element;\n /**\n * Should the button only display an icon.\n */\n @Prop() iconOnly?: boolean = false;\n /**\n * The position of the icon.\n */\n @Prop() iconPosition?: 'left' | 'right' = 'left';\n /**\n * The label for the button.\n */\n @Prop() label = 'Search';\n /**\n * The type of the button.\n */\n @Prop() type?: 'submit' | 'reset' | 'button' = 'button';\n /**\n * The event fired when the button is clicked.\n */\n @Event() buttonClick!: EventEmitter<void>;\n\n private handleButtonClick = () => {\n this.buttonClick.emit();\n };\n\n render() {\n return (\n <button\n aria-label={this.label}\n class={classNames('searchcraft-button', {\n 'searchcraft-button-primary': this.hierarchy === 'primary',\n 'searchcraft-button-tertiary': this.hierarchy === 'tertiary',\n 'searchcraft-button-disabled': this.disabled,\n })}\n disabled={this.disabled}\n onClick={this.handleButtonClick}\n type={this.type}\n >\n {this.iconOnly ? (\n this.icon\n ) : (\n <Fragment>\n {this.iconPosition === 'left' && this.icon}\n <span>{this.label}</span>\n {this.iconPosition === 'right' && this.icon}\n </Fragment>\n )}\n </button>\n );\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-error-message error-message=\"No search results found for query\" />\n * ```\n */\n@Component({\n tag: 'searchcraft-error-message',\n shadow: false,\n})\nexport class SearchcraftErrorMessage {\n /**\n * The error message.\n */\n @Prop() errorMessage?: string;\n\n render() {\n return (\n <p class='searchcraft-error-message'>\n {this.errorMessage || 'Search term is required.'}\n </p>\n );\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component serves as the input label for the searchcraft-input-form component.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-input-label label=\"Search\" />\n * ```\n */\n@Component({\n tag: 'searchcraft-input-label',\n shadow: false,\n})\nexport class SearchcraftInputLabel {\n /**\n * The classname applied to the label element.\n */\n @Prop() inputLabelClassName? = '';\n @Prop() label = '';\n\n render() {\n return (\n <label\n class={classNames('searchcraft-input-label', this.inputLabelClassName)}\n htmlFor='searchcraft-input-id'\n >\n {this.label}\n </label>\n );\n }\n}\n"],"version":3}
|
|
@@ -8,7 +8,7 @@ const styles = require('./styles-7b2d06f2.js');
|
|
|
8
8
|
const index$1 = require('./index-5b0b9d4c.js');
|
|
9
9
|
|
|
10
10
|
const name = "@searchcraft/javascript-sdk";
|
|
11
|
-
const version = "0.8.
|
|
11
|
+
const version = "0.8.2";
|
|
12
12
|
const description = "Searchcraft Javascript SDK";
|
|
13
13
|
const author = "Searchcraft";
|
|
14
14
|
const license = "Apache-2.0";
|
|
@@ -57,7 +57,7 @@ const dependencies = {
|
|
|
57
57
|
classnames: "^2.3.2"
|
|
58
58
|
};
|
|
59
59
|
const devDependencies = {
|
|
60
|
-
"@searchcraft/core": "^0.8.
|
|
60
|
+
"@searchcraft/core": "^0.8.2",
|
|
61
61
|
"@searchcraft/javascript-sdk": "*",
|
|
62
62
|
"@stencil/core": "^4.7.0",
|
|
63
63
|
"@stencil/react-output-target": "^0.8.2",
|
|
@@ -93,11 +93,11 @@ const SearchcraftPagination = class {
|
|
|
93
93
|
if (!this.searchTerm || this.searchResultsPagesCount <= 1) {
|
|
94
94
|
return;
|
|
95
95
|
}
|
|
96
|
-
return (index.h("div", { class: index$1.classNames('searchcraft-pagination', styles.parseCustomStyles(this.customStyles || {})) }, index.h("div", { class: 'searchcraft-pagination-control' }, index.h("searchcraft-button", { disabled: this.searchResultsPage === 1, hierarchy: 'tertiary', onButtonClick: () => this.handleGoToPage(Math.max(1, this.searchResultsPage - 1)), label: '
|
|
96
|
+
return (index.h("div", { class: index$1.classNames('searchcraft-pagination', styles.parseCustomStyles(this.customStyles || {})) }, index.h("div", { class: 'searchcraft-pagination-control' }, index.h("searchcraft-button", { disabled: this.searchResultsPage === 1, hierarchy: 'tertiary', onButtonClick: () => this.handleGoToPage(Math.max(1, this.searchResultsPage - 1)), label: 'Previous', iconPosition: 'left', icon: index.h("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, index.h("title", null, "Previous page icon"), index.h("path", { d: 'M12.5 15L7.5 10L12.5 5', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })), iconOnly: true })), index.h("ul", { class: 'searchcraft-pagination-list' }, this.renderOddPaginationItem(1), this.renderEvenPaginationItem(2), this.renderMiddlePaginationItem(), this.renderEvenPaginationItem(this.searchResultsPagesCount > 4
|
|
97
97
|
? this.searchResultsPagesCount - 1
|
|
98
98
|
: 4), this.renderOddPaginationItem(this.searchResultsPagesCount)), index.h("div", { class: 'searchcraft-pagination-control' }, index.h("searchcraft-button", { disabled: this.searchResultsPage === this.searchResultsPagesCount, hierarchy: 'tertiary', onButtonClick: () => {
|
|
99
99
|
this.handleGoToPage(Math.min(this.searchResultsPagesCount, this.searchResultsPage + 1));
|
|
100
|
-
}, label: '
|
|
100
|
+
}, label: 'Next', iconPosition: 'right', icon: index.h("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, index.h("title", null, "Next page icon"), index.h("path", { d: 'M7.5 15L12.5 10L7.5 5', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })), iconOnly: true }))));
|
|
101
101
|
}
|
|
102
102
|
};
|
|
103
103
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"searchcraft-pagination.entry.cjs.js","mappings":"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","names":["useSearchcraftStore","h","classNames","parseCustomStyles"],"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 />\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 />\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"searchcraft-pagination.entry.cjs.js","mappings":";;;;;;;;;MAoBa,qBAAqB;;;;;;;IAIxB,YAAY,CAAU;;IAGrB,UAAU,CAAC;IACX,oBAAoB,CAAC;IACrB,iBAAiB,CAAC;IAClB,kBAAkB,CAAC;;IAGnB,uBAAuB,GAAG,CAAC,CAAC;IAC5B,qBAAqB,GAAG,CAAC,CAAC;IAC1B,qBAAqB,GAAG,CAAC,CAAC;;IAG1B,oBAAoB,GAA2B,SAAQ,CAAC;IAEzD,WAAW,GAAe,SAAQ,CAAC;IAE3C,gBAAgB;QACd,IAAI,CAAC,WAAW,GAAGA,oCAAmB,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;YACF,IAAI,CAAC,qBAAqB;gBACxB,CAAC,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,IAAI,CAAC,oBAAoB,GAAG,CAAC,CAAC;YAC/D,IAAI,CAAC,qBAAqB;gBACxB,CAAC,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,IAAI,CAAC,oBAAoB;oBAC3D,IAAI,CAAC,oBAAoB,CAAC;;YAG5B,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC,oBAAoB,CAAC;SACxD,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,CAAC,WAAW,IAAI,CAAC;KACtB;IAED,cAAc,CAAC,IAAY;QACzB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;KACjC;IAED,uBAAuB,CAAC,IAAY;QAClC,QACEC,oBACEA,oBACE,KAAK,EAAEC,kBAAU,CAAC,6BAA6B,EAAE;gBAC/C,oCAAoC,EAClC,IAAI,CAAC,iBAAiB,KAAK,IAAI;aAClC,CAAC,EACF,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EACxC,IAAI,EAAC,QAAQ,IAEZ,IAAI,CACE,CACN,EACL;KACH;IAED,wBAAwB,CAAC,IAAY;QACnC,IAAI,IAAI,CAAC,uBAAuB,IAAI,IAAI,EAAE;YACxC,OAAO;SACR;QAED,IACE,IAAI,CAAC,uBAAuB,IAAI,CAAC;YACjC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,GAAG,CAAC,CAAC;cAC9C,IAAI,CAAC,iBAAiB,IAAI,IAAI,GAAG,CAAC;cAClC,IAAI,CAAC,iBAAiB,IAAI,IAAI,GAAG,CAAC,EACtC;YACA,QACED,oBACEA,oBACE,KAAK,EAAEC,kBAAU,CAAC,6BAA6B,EAAE;oBAC/C,oCAAoC,EAClC,IAAI,CAAC,iBAAiB,KAAK,IAAI;iBAClC,CAAC,EACF,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EACxC,IAAI,EAAC,QAAQ,IAEZ,IAAI,CACE,CACN,EACL;SACH;QAED,QACED,oBACEA,kBAAM,KAAK,EAAC,6BAA6B,UAAW,CACjD,EACL;KACH;IAED,0BAA0B;QACxB,IAAI,IAAI,CAAC,uBAAuB,IAAI,CAAC,EAAE;YACrC,OAAO;SACR;QAED,IACE,IAAI,CAAC,uBAAuB,IAAI,CAAC;YACjC,IAAI,CAAC,iBAAiB,IAAI,CAAC;YAC3B,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,uBAAuB,GAAG,CAAC,EAC1D;YACA,QACEA,oBACEA,oBACE,KAAK,EAAEC,kBAAU,CAAC,6BAA6B,EAAE;oBAC/C,oCAAoC,EAClC,IAAI,CAAC,iBAAiB,KAAK,CAAC;wBAC5B,IAAI,CAAC,iBAAiB,KAAK,IAAI,CAAC,uBAAuB,GAAG,CAAC;iBAC9D,CAAC,EACF,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MACP,IAAI,CAAC,cAAc,CACjB,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,uBAAuB,GAAG,CAAC;sBACtD,IAAI,CAAC,uBAAuB,GAAG,CAAC;sBAChC,CAAC,CACN,IAGF,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,uBAAuB,GAAG,CAAC;kBACvD,IAAI,CAAC,uBAAuB,GAAG,CAAC;kBAChC,CAAC,CACE,CACN,EACL;SACH;QAED,QACED,oBACEA,kBAAM,KAAK,EAAC,gEAAgE,IACzE,IAAI,CAAC,iBAAiB,CAClB,CACJ,EACL;KACH;IAED,MAAM;;QAEJ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,uBAAuB,IAAI,CAAC,EAAE;YACzD,OAAO;SACR;QAED,QACEA,iBACE,KAAK,EAAEC,kBAAU,CACf,wBAAwB,EACxBC,wBAAiB,CAAC,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAC3C,IAEDF,iBAAK,KAAK,EAAC,gCAAgC,IACzCA,gCACE,QAAQ,EAAE,IAAI,CAAC,iBAAiB,KAAK,CAAC,EACtC,SAAS,EAAC,UAAU,EACpB,aAAa,EAAE,MACb,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC,EAE9D,KAAK,EAAC,UAAU,EAChB,YAAY,EAAC,MAAM,EACnB,IAAI,EACFA,iBACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,IAElCA,4CAAiC,EACjCA,kBACE,CAAC,EAAC,wBAAwB,EAC1B,MAAM,EAAC,cAAc,kBACR,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EAER,QAAQ,SACR,CACE,EACNA,gBAAI,KAAK,EAAC,6BAA6B,IACpC,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAC/B,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAChC,IAAI,CAAC,0BAA0B,EAAE,EACjC,IAAI,CAAC,wBAAwB,CAC5B,IAAI,CAAC,uBAAuB,GAAG,CAAC;cAC5B,IAAI,CAAC,uBAAuB,GAAG,CAAC;cAChC,CAAC,CACN,EACA,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,uBAAuB,CAAC,CACxD,EACLA,iBAAK,KAAK,EAAC,gCAAgC,IACzCA,gCACE,QAAQ,EAAE,IAAI,CAAC,iBAAiB,KAAK,IAAI,CAAC,uBAAuB,EACjE,SAAS,EAAC,UAAU,EACpB,aAAa,EAAE;gBACb,IAAI,CAAC,cAAc,CACjB,IAAI,CAAC,GAAG,CACN,IAAI,CAAC,uBAAuB,EAC5B,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAC3B,CACF,CAAC;aACH,EACD,KAAK,EAAC,MAAM,EACZ,YAAY,EAAC,OAAO,EACpB,IAAI,EACFA,iBACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,IAElCA,wCAA6B,EAC7BA,kBACE,CAAC,EAAC,uBAAuB,EACzB,MAAM,EAAC,cAAc,kBACR,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EAER,QAAQ,SACR,CACE,CACF,EACN;KACH;;;;;","names":["useSearchcraftStore","h","classNames","parseCustomStyles"],"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}
|
|
@@ -42,7 +42,7 @@ export class SearchcraftButton {
|
|
|
42
42
|
this.buttonClick.emit();
|
|
43
43
|
};
|
|
44
44
|
render() {
|
|
45
|
-
return (h("button", { key: '
|
|
45
|
+
return (h("button", { key: 'ff883b930d03da6cbfb40badd3be1de0a873f853', "aria-label": this.label, class: classNames('searchcraft-button', {
|
|
46
46
|
'searchcraft-button-primary': this.hierarchy === 'primary',
|
|
47
47
|
'searchcraft-button-tertiary': this.hierarchy === 'tertiary',
|
|
48
48
|
'searchcraft-button-disabled': this.disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"searchcraft-button.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-button/searchcraft-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,QAAQ,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC;;;;GAIG;AAKH,MAAM,OAAO,iBAAiB;IAC5B;;OAEG;IACK,SAAS,GAA4B,SAAS,CAAC;IACvD;;OAEG;IACK,QAAQ,GAAa,KAAK,CAAC;IACnC;;OAEG;IACK,IAAI,CAAW;IACvB;;OAEG;IACK,QAAQ,GAAa,KAAK,CAAC;IACnC;;OAEG;IACK,YAAY,GAAsB,MAAM,CAAC;IACjD;;OAEG;IACK,KAAK,GAAG,QAAQ,CAAC;IACzB;;OAEG;IACK,IAAI,GAAmC,QAAQ,CAAC;IACxD;;OAEG;IACM,WAAW,CAAsB;IAElC,iBAAiB,GAAG,GAAG,EAAE;QAC/B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL
|
|
1
|
+
{"version":3,"file":"searchcraft-button.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-button/searchcraft-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,QAAQ,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC;;;;GAIG;AAKH,MAAM,OAAO,iBAAiB;IAC5B;;OAEG;IACK,SAAS,GAA4B,SAAS,CAAC;IACvD;;OAEG;IACK,QAAQ,GAAa,KAAK,CAAC;IACnC;;OAEG;IACK,IAAI,CAAW;IACvB;;OAEG;IACK,QAAQ,GAAa,KAAK,CAAC;IACnC;;OAEG;IACK,YAAY,GAAsB,MAAM,CAAC;IACjD;;OAEG;IACK,KAAK,GAAG,QAAQ,CAAC;IACzB;;OAEG;IACK,IAAI,GAAmC,QAAQ,CAAC;IACxD;;OAEG;IACM,WAAW,CAAsB;IAElC,iBAAiB,GAAG,GAAG,EAAE;QAC/B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,6EACc,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,UAAU,CAAC,oBAAoB,EAAE;gBACtC,4BAA4B,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS;gBAC1D,6BAA6B,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU;gBAC5D,6BAA6B,EAAE,IAAI,CAAC,QAAQ;aAC7C,CAAC,EACF,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,IAEd,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,IAAI,CAAC,IAAI,CACV,CAAC,CAAC,CAAC,CACF,EAAC,QAAQ;YACN,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI;YAC1C,gBAAO,IAAI,CAAC,KAAK,CAAQ;YACxB,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,CAClC,CACZ,CACM,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Event,\n type EventEmitter,\n Prop,\n h,\n Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component represents a button to be consumed within the `search-input-form` component.\n * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.\n * It is consumed within the `searchcraft-input-form` component.\n */\n@Component({\n tag: 'searchcraft-button',\n shadow: false,\n})\nexport class SearchcraftButton {\n /**\n * Controls the visual representation of the button.\n */\n @Prop() hierarchy?: 'primary' | 'tertiary' = 'primary';\n /**\n * Whether the button is disabled.\n */\n @Prop() disabled?: boolean = false;\n /**\n * The icon element.\n */\n @Prop() icon?: Element;\n /**\n * Should the button only display an icon.\n */\n @Prop() iconOnly?: boolean = false;\n /**\n * The position of the icon.\n */\n @Prop() iconPosition?: 'left' | 'right' = 'left';\n /**\n * The label for the button.\n */\n @Prop() label = 'Search';\n /**\n * The type of the button.\n */\n @Prop() type?: 'submit' | 'reset' | 'button' = 'button';\n /**\n * The event fired when the button is clicked.\n */\n @Event() buttonClick!: EventEmitter<void>;\n\n private handleButtonClick = () => {\n this.buttonClick.emit();\n };\n\n render() {\n return (\n <button\n aria-label={this.label}\n class={classNames('searchcraft-button', {\n 'searchcraft-button-primary': this.hierarchy === 'primary',\n 'searchcraft-button-tertiary': this.hierarchy === 'tertiary',\n 'searchcraft-button-disabled': this.disabled,\n })}\n disabled={this.disabled}\n onClick={this.handleButtonClick}\n type={this.type}\n >\n {this.iconOnly ? (\n this.icon\n ) : (\n <Fragment>\n {this.iconPosition === 'left' && this.icon}\n <span>{this.label}</span>\n {this.iconPosition === 'right' && this.icon}\n </Fragment>\n )}\n </button>\n );\n }\n}\n"]}
|
|
@@ -95,11 +95,11 @@ export class SearchcraftPagination {
|
|
|
95
95
|
if (!this.searchTerm || this.searchResultsPagesCount <= 1) {
|
|
96
96
|
return;
|
|
97
97
|
}
|
|
98
|
-
return (h("div", { class: classNames('searchcraft-pagination', parseCustomStyles(this.customStyles || {})) }, h("div", { class: 'searchcraft-pagination-control' }, h("searchcraft-button", { disabled: this.searchResultsPage === 1, hierarchy: 'tertiary', onButtonClick: () => this.handleGoToPage(Math.max(1, this.searchResultsPage - 1)), label: '
|
|
98
|
+
return (h("div", { class: classNames('searchcraft-pagination', parseCustomStyles(this.customStyles || {})) }, h("div", { class: 'searchcraft-pagination-control' }, h("searchcraft-button", { disabled: this.searchResultsPage === 1, hierarchy: 'tertiary', onButtonClick: () => this.handleGoToPage(Math.max(1, this.searchResultsPage - 1)), label: 'Previous', iconPosition: 'left', icon: h("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, h("title", null, "Previous page icon"), h("path", { d: 'M12.5 15L7.5 10L12.5 5', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })), iconOnly: true })), h("ul", { class: 'searchcraft-pagination-list' }, this.renderOddPaginationItem(1), this.renderEvenPaginationItem(2), this.renderMiddlePaginationItem(), this.renderEvenPaginationItem(this.searchResultsPagesCount > 4
|
|
99
99
|
? this.searchResultsPagesCount - 1
|
|
100
100
|
: 4), this.renderOddPaginationItem(this.searchResultsPagesCount)), h("div", { class: 'searchcraft-pagination-control' }, h("searchcraft-button", { disabled: this.searchResultsPage === this.searchResultsPagesCount, hierarchy: 'tertiary', onButtonClick: () => {
|
|
101
101
|
this.handleGoToPage(Math.min(this.searchResultsPagesCount, this.searchResultsPage + 1));
|
|
102
|
-
}, label: '
|
|
102
|
+
}, label: 'Next', iconPosition: 'right', icon: h("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, h("title", null, "Next page icon"), h("path", { d: 'M7.5 15L12.5 10L7.5 5', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })), iconOnly: true }))));
|
|
103
103
|
}
|
|
104
104
|
static get is() { return "searchcraft-pagination"; }
|
|
105
105
|
static get properties() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"searchcraft-pagination.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-pagination/searchcraft-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport { Component, h, State, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils';\n\n/**\n * This web component is designed to facilitate pagination of search results.\n * Once a query is submitted, calculates the number for pages.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-pagination />\n * ```\n */\n@Component({\n tag: 'searchcraft-pagination',\n shadow: false,\n})\nexport class SearchcraftPagination {\n /**\n * The custom styles object.\n */\n @Prop() customStyles?: string;\n\n // store vars\n @State() searchTerm;\n @State() searchResultsPerPage;\n @State() searchResultsPage;\n @State() searchResultsCount;\n\n // local vars\n @State() searchResultsPagesCount = 1;\n @State() searchResultsRangeMin = 1;\n @State() searchResultsRangeMax = 1;\n\n // store functions\n @State() setSearchResultsPage: (page: number) => void = () => {};\n\n private unsubscribe: () => void = () => {};\n\n componentDidLoad() {\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n // store vars\n this.searchTerm = state.searchTerm;\n this.searchResultsPerPage = state.searchResultsPerPage;\n this.searchResultsPage = state.searchResultsPage;\n this.searchResultsCount = state.searchResultsCount;\n\n // local vars\n this.searchResultsPagesCount = Math.ceil(\n this.searchResultsCount / this.searchResultsPerPage,\n );\n this.searchResultsRangeMin =\n (this.searchResultsPage - 1) * this.searchResultsPerPage + 1;\n this.searchResultsRangeMax =\n (this.searchResultsPerPage - 1) * this.searchResultsPerPage +\n this.searchResultsPerPage;\n\n // store functions\n this.setSearchResultsPage = state.setSearchResultsPage;\n });\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n }\n\n handleGoToPage(page: number) {\n this.setSearchResultsPage(page);\n }\n\n renderOddPaginationItem(page: number) {\n return (\n <li>\n <button\n class={classNames('searchcraft-pagination-item', {\n 'searchcraft-pagination-item-active':\n this.searchResultsPage === page,\n })}\n onClick={() => this.handleGoToPage(page)}\n type='button'\n >\n {page}\n </button>\n </li>\n );\n }\n\n renderEvenPaginationItem(page: number) {\n if (this.searchResultsPagesCount <= page) {\n return;\n }\n\n if (\n this.searchResultsPagesCount <= 5 ||\n page < Math.ceil(this.searchResultsPagesCount / 2) // is the first or second even pagination item\n ? this.searchResultsPage <= page + 1\n : this.searchResultsPage >= page - 1\n ) {\n return (\n <li>\n <button\n class={classNames('searchcraft-pagination-item', {\n 'searchcraft-pagination-item-active':\n this.searchResultsPage === page,\n })}\n onClick={() => this.handleGoToPage(page)}\n type='button'\n >\n {page}\n </button>\n </li>\n );\n }\n\n return (\n <li>\n <span class='searchcraft-pagination-item'>...</span>\n </li>\n );\n }\n\n renderMiddlePaginationItem() {\n if (this.searchResultsPagesCount <= 3) {\n return;\n }\n\n if (\n this.searchResultsPagesCount <= 5 ||\n this.searchResultsPage <= 3 ||\n this.searchResultsPage >= this.searchResultsPagesCount - 2\n ) {\n return (\n <li>\n <button\n class={classNames('searchcraft-pagination-item', {\n 'searchcraft-pagination-item-active':\n this.searchResultsPage === 3 ||\n this.searchResultsPage === this.searchResultsPagesCount - 2,\n })}\n type='button'\n onClick={() =>\n this.handleGoToPage(\n this.searchResultsPage >= this.searchResultsPagesCount - 2\n ? this.searchResultsPagesCount - 2\n : 3,\n )\n }\n >\n {this.searchResultsPage >= this.searchResultsPagesCount - 2\n ? this.searchResultsPagesCount - 2\n : 3}\n </button>\n </li>\n );\n }\n\n return (\n <li>\n <span class='searchcraft-pagination-item searchcraft-pagination-item-active'>\n {this.searchResultsPage}\n </span>\n </li>\n );\n }\n\n render() {\n // early return if there isn't a searchTerm or there is 1 or fewer pages of results\n if (!this.searchTerm || this.searchResultsPagesCount <= 1) {\n return;\n }\n\n return (\n <div\n class={classNames(\n 'searchcraft-pagination',\n parseCustomStyles(this.customStyles || {}),\n )}\n >\n <div class='searchcraft-pagination-control'>\n <searchcraft-button\n disabled={this.searchResultsPage === 1}\n hierarchy='tertiary'\n onButtonClick={() =>\n this.handleGoToPage(Math.max(1, this.searchResultsPage - 1))\n }\n label='PREVIOUS'\n iconPosition='left'\n icon={\n <svg\n width='20'\n height='20'\n viewBox='0 0 20 20'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n >\n <title>Previous page icon</title>\n <path\n d='M12.5 15L7.5 10L12.5 5'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n }\n />\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 />\n </div>\n </div>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"searchcraft-pagination.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-pagination/searchcraft-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useSearchcraftStore } from '@provider/store';\nimport { Component, h, State, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils';\n\n/**\n * This web component is designed to facilitate pagination of search results.\n * Once a query is submitted, calculates the number for pages.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-pagination />\n * ```\n */\n@Component({\n tag: 'searchcraft-pagination',\n shadow: false,\n})\nexport class SearchcraftPagination {\n /**\n * The custom styles object.\n */\n @Prop() customStyles?: string;\n\n // store vars\n @State() searchTerm;\n @State() searchResultsPerPage;\n @State() searchResultsPage;\n @State() searchResultsCount;\n\n // local vars\n @State() searchResultsPagesCount = 1;\n @State() searchResultsRangeMin = 1;\n @State() searchResultsRangeMax = 1;\n\n // store functions\n @State() setSearchResultsPage: (page: number) => void = () => {};\n\n private unsubscribe: () => void = () => {};\n\n componentDidLoad() {\n this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n // store vars\n this.searchTerm = state.searchTerm;\n this.searchResultsPerPage = state.searchResultsPerPage;\n this.searchResultsPage = state.searchResultsPage;\n this.searchResultsCount = state.searchResultsCount;\n\n // local vars\n this.searchResultsPagesCount = Math.ceil(\n this.searchResultsCount / this.searchResultsPerPage,\n );\n this.searchResultsRangeMin =\n (this.searchResultsPage - 1) * this.searchResultsPerPage + 1;\n this.searchResultsRangeMax =\n (this.searchResultsPerPage - 1) * this.searchResultsPerPage +\n this.searchResultsPerPage;\n\n // store functions\n this.setSearchResultsPage = state.setSearchResultsPage;\n });\n }\n\n disconnectedCallback() {\n this.unsubscribe?.();\n }\n\n handleGoToPage(page: number) {\n this.setSearchResultsPage(page);\n }\n\n renderOddPaginationItem(page: number) {\n return (\n <li>\n <button\n class={classNames('searchcraft-pagination-item', {\n 'searchcraft-pagination-item-active':\n this.searchResultsPage === page,\n })}\n onClick={() => this.handleGoToPage(page)}\n type='button'\n >\n {page}\n </button>\n </li>\n );\n }\n\n renderEvenPaginationItem(page: number) {\n if (this.searchResultsPagesCount <= page) {\n return;\n }\n\n if (\n this.searchResultsPagesCount <= 5 ||\n page < Math.ceil(this.searchResultsPagesCount / 2) // is the first or second even pagination item\n ? this.searchResultsPage <= page + 1\n : this.searchResultsPage >= page - 1\n ) {\n return (\n <li>\n <button\n class={classNames('searchcraft-pagination-item', {\n 'searchcraft-pagination-item-active':\n this.searchResultsPage === page,\n })}\n onClick={() => this.handleGoToPage(page)}\n type='button'\n >\n {page}\n </button>\n </li>\n );\n }\n\n return (\n <li>\n <span class='searchcraft-pagination-item'>...</span>\n </li>\n );\n }\n\n renderMiddlePaginationItem() {\n if (this.searchResultsPagesCount <= 3) {\n return;\n }\n\n if (\n this.searchResultsPagesCount <= 5 ||\n this.searchResultsPage <= 3 ||\n this.searchResultsPage >= this.searchResultsPagesCount - 2\n ) {\n return (\n <li>\n <button\n class={classNames('searchcraft-pagination-item', {\n 'searchcraft-pagination-item-active':\n this.searchResultsPage === 3 ||\n this.searchResultsPage === this.searchResultsPagesCount - 2,\n })}\n type='button'\n onClick={() =>\n this.handleGoToPage(\n this.searchResultsPage >= this.searchResultsPagesCount - 2\n ? this.searchResultsPagesCount - 2\n : 3,\n )\n }\n >\n {this.searchResultsPage >= this.searchResultsPagesCount - 2\n ? this.searchResultsPagesCount - 2\n : 3}\n </button>\n </li>\n );\n }\n\n return (\n <li>\n <span class='searchcraft-pagination-item searchcraft-pagination-item-active'>\n {this.searchResultsPage}\n </span>\n </li>\n );\n }\n\n render() {\n // early return if there isn't a searchTerm or there is 1 or fewer pages of results\n if (!this.searchTerm || this.searchResultsPagesCount <= 1) {\n return;\n }\n\n return (\n <div\n class={classNames(\n 'searchcraft-pagination',\n parseCustomStyles(this.customStyles || {}),\n )}\n >\n <div class='searchcraft-pagination-control'>\n <searchcraft-button\n disabled={this.searchResultsPage === 1}\n hierarchy='tertiary'\n onButtonClick={() =>\n this.handleGoToPage(Math.max(1, this.searchResultsPage - 1))\n }\n label='Previous'\n iconPosition='left'\n icon={\n <svg\n width='20'\n height='20'\n viewBox='0 0 20 20'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n >\n <title>Previous page icon</title>\n <path\n d='M12.5 15L7.5 10L12.5 5'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n }\n iconOnly\n />\n </div>\n <ul class='searchcraft-pagination-list'>\n {this.renderOddPaginationItem(1)}\n {this.renderEvenPaginationItem(2)}\n {this.renderMiddlePaginationItem()}\n {this.renderEvenPaginationItem(\n this.searchResultsPagesCount > 4\n ? this.searchResultsPagesCount - 1\n : 4,\n )}\n {this.renderOddPaginationItem(this.searchResultsPagesCount)}\n </ul>\n <div class='searchcraft-pagination-control'>\n <searchcraft-button\n disabled={this.searchResultsPage === this.searchResultsPagesCount}\n hierarchy='tertiary'\n onButtonClick={() => {\n this.handleGoToPage(\n Math.min(\n this.searchResultsPagesCount,\n this.searchResultsPage + 1,\n ),\n );\n }}\n label='Next'\n iconPosition='right'\n icon={\n <svg\n width='20'\n height='20'\n viewBox='0 0 20 20'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n >\n <title>Next page icon</title>\n <path\n d='M7.5 15L12.5 10L7.5 5'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n }\n iconOnly\n />\n </div>\n </div>\n );\n }\n}\n"]}
|
|
@@ -2,12 +2,12 @@ import { p as proxyCustomElement, H, c as createEvent, h } from './p-5365011f.js
|
|
|
2
2
|
import { u as useSearchcraftStore, g as ge } from './p-38419178.js';
|
|
3
3
|
import { p as parseCustomStyles } from './p-d9551738.js';
|
|
4
4
|
import { c as classNames } from './p-5cdc6210.js';
|
|
5
|
-
import { d as defineCustomElement$3 } from './p-
|
|
5
|
+
import { d as defineCustomElement$3 } from './p-71cc28c1.js';
|
|
6
6
|
import { d as defineCustomElement$2 } from './p-0e393fe1.js';
|
|
7
7
|
import { d as defineCustomElement$1 } from './p-e55a7970.js';
|
|
8
8
|
|
|
9
9
|
const name = "@searchcraft/javascript-sdk";
|
|
10
|
-
const version = "0.8.
|
|
10
|
+
const version = "0.8.2";
|
|
11
11
|
const description = "Searchcraft Javascript SDK";
|
|
12
12
|
const author = "Searchcraft";
|
|
13
13
|
const license = "Apache-2.0";
|
|
@@ -56,7 +56,7 @@ const dependencies = {
|
|
|
56
56
|
classnames: "^2.3.2"
|
|
57
57
|
};
|
|
58
58
|
const devDependencies = {
|
|
59
|
-
"@searchcraft/core": "^0.8.
|
|
59
|
+
"@searchcraft/core": "^0.8.2",
|
|
60
60
|
"@searchcraft/javascript-sdk": "*",
|
|
61
61
|
"@stencil/core": "^4.7.0",
|
|
62
62
|
"@stencil/react-output-target": "^0.8.2",
|
|
@@ -277,4 +277,4 @@ function defineCustomElement() {
|
|
|
277
277
|
|
|
278
278
|
export { SearchcraftInput as S, defineCustomElement as d };
|
|
279
279
|
|
|
280
|
-
//# sourceMappingURL=p-
|
|
280
|
+
//# sourceMappingURL=p-6e2eef88.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-ae78be68.js","mappings":"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","names":["SearchcraftCore"],"sources":["src/components/searchcraft-input-form/searchcraft-input-form.tsx"],"sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Event,\n type EventEmitter,\n Watch,\n} from '@stencil/core';\n\nimport { type SearchcraftConfig, SearchcraftCore } from '@searchcraft/core';\nimport packageJson from '../../../package.json';\n\nimport { parseCustomStyles } from '@utils';\nimport { useSearchcraftStore } from '@provider/store';\nimport classNames from 'classnames';\n\n/**\n * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.\n * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-input-form placeholder-value=\"Search here\" />\n * ```\n *\n * ```js\n * // index.js\n * const searchInputForm = document.querySelector('searchcraft-input-form');\n *\n * searchInputForm.config = {\n * index: [],\n * readKey: '',\n * endpointUrl: '',\n * };\n *\n * searchForm.addEventListener('querySubmit', (event) => {\n * console.log('Query submitted', event.detail);\n * });\n * ```\n */\n@Component({\n tag: 'searchcraft-input-form',\n shadow: false,\n})\nexport class SearchcraftInput {\n /**\n * The Searchcraft config object.\n */\n @Prop() config: SearchcraftConfig | undefined;\n /**\n * Whether or not to automatically submit the search term when the input changes.\n */\n @Prop() autoSearch = true;\n /**\n * Where to place the search button.\n */\n @Prop() buttonPlacement: 'left' | 'right' | 'none' = 'none';\n /**\n * The label for the submit button.\n */\n @Prop() buttonLabel: string | undefined;\n /**\n * The label rendered above the input.\n */\n @Prop() inputLabel: string | undefined;\n /**\n * A custom styles object to be applied to the input element.\n */\n @Prop() customStyles: string | Record<string, string> = {};\n /**\n * The input element's placeholder value.\n */\n @Prop() placeholderValue = 'Enter Search';\n /**\n * The starting value of the input element.\n */\n @Prop() searchTerm = '';\n /**\n * When the input is cleared.\n */\n @Event() inputCleared?: EventEmitter<void>;\n /**\n * When no results are returned.\n */\n @Event() noResultsReceived?: EventEmitter<void>;\n /**\n * When the input becomes focused.\n */\n @Event() inputFocus?: EventEmitter<void>;\n /**\n * When the input becomes unfocused.\n */\n @Event() inputBlur?: EventEmitter<void>;\n /**\n * Event emitted when input initializes.\n */\n @Event() inputInit?: EventEmitter<void>;\n /**\n * Event emitted when a query has been submitted.\n */\n @Event() querySubmit?: EventEmitter<string>;\n\n @State() inputValue = this.searchTerm;\n @State() error = false;\n @State() isSearchcraftInitialized = false;\n\n private searchStore = useSearchcraftStore.getState();\n\n init() {\n if (this.config && !this.isSearchcraftInitialized) {\n const searchcraft = new SearchcraftCore(this.config, {\n sdkName: packageJson.name,\n sdkVersion: packageJson.version,\n });\n this.searchStore.initialize(searchcraft, true);\n this.isSearchcraftInitialized = true;\n this.inputInit?.emit();\n }\n }\n\n componentDidLoad() {\n this.init();\n }\n\n @Watch('config')\n onConfigChange() {\n this.init();\n }\n\n handleOnInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.inputValue = input.value;\n\n if (!this.autoSearch) {\n return;\n }\n\n if (input.value.trim() === '') {\n this.inputCleared?.emit();\n }\n\n this.performSearch(input.value);\n };\n\n private performSearch = async (value: string) => {\n if (value === useSearchcraftStore.getState().searchTerm) {\n return;\n }\n\n this.searchTerm = value.trim();\n this.error = false;\n this.searchStore.setSearchTerm(this.searchTerm);\n this.querySubmit?.emit(this.searchTerm);\n\n try {\n await this.searchStore.search();\n } catch (error) {\n this.error = true;\n this.inputCleared?.emit();\n }\n };\n\n handleClearInput = () => {\n this.inputValue = '';\n this.searchTerm = '';\n this.searchStore.setSearchTerm('');\n this.searchStore.setSearchClientResponseItems([]);\n this.error = false;\n\n this.inputCleared?.emit();\n };\n\n handleFormSubmit = async (event: Event) => {\n event.preventDefault();\n await this.performSearch(this.searchTerm);\n };\n\n render() {\n const validatedCustomStyles = parseCustomStyles(this.customStyles);\n\n const isShowingClearButton = this.inputValue.length > 0;\n\n const inputGridClassNames = classNames('searchcraft-input-grid', {\n 'searchcraft-input-grid-buttonLeft': this.buttonPlacement === 'left',\n 'searchcraft-input-grid-buttonRight': this.buttonPlacement === 'right',\n 'searchcraft-input-grid-buttonNone': this.buttonPlacement === 'none',\n });\n\n const shouldHaveVerticalGap = this.inputLabel || this.error;\n const inputGridStyles = {\n gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',\n };\n\n return (\n <form class='searchcraft-input-form' onSubmit={this.handleFormSubmit}>\n <div class={inputGridClassNames} style={inputGridStyles}>\n <div class='searchcraft-input-button-wrapper'>\n <searchcraft-button\n onButtonClick={this.handleFormSubmit}\n label={this.buttonLabel}\n />\n </div>\n {this.inputLabel && (\n <div class='searchcraft-input-label-wrapper'>\n <searchcraft-input-label label={this.inputLabel} />\n </div>\n )}\n {this.error && (\n <div class='searchcraft-input-error-wrapper'>\n <searchcraft-error-message errorMessage='Something went wrong.' />\n </div>\n )}\n <div class='searchcraft-input-wrapper'>\n <input\n autoComplete='off'\n class='searchcraft-input'\n onFocus={() => this.inputFocus?.emit()}\n onBlur={() => this.inputBlur?.emit()}\n onInput={(event) => {\n this.handleOnInput(event);\n }}\n placeholder={this.placeholderValue}\n style={validatedCustomStyles}\n type='text'\n value={this.inputValue}\n />\n <div class='searchcraft-input-search-icon-wrapper'>\n <svg\n class='searchcraft-input-search-icon'\n viewBox='0 0 20 20'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n aria-labelledby='searchcraft-title'\n >\n <title id='searchcraft-title'>\n Searchcraft Search Icon Light\n </title>\n <path\n d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n </div>\n {isShowingClearButton && (\n <button\n type='button'\n class='searchcraft-input-clear-button'\n onClick={this.handleClearInput}\n >\n <svg\n class='searchcraft-input-clear-icon'\n viewBox='0 0 22 22'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n aria-labelledby='icon-title'\n >\n <title id='icon-title'>\n Searchcraft Clear Input Icon Light\n </title>\n <path\n d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n </button>\n )}\n </div>\n </div>\n </form>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-6e2eef88.js","mappings":"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","names":["SearchcraftCore"],"sources":["src/components/searchcraft-input-form/searchcraft-input-form.tsx"],"sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Event,\n type EventEmitter,\n Watch,\n} from '@stencil/core';\n\nimport { type SearchcraftConfig, SearchcraftCore } from '@searchcraft/core';\nimport packageJson from '../../../package.json';\n\nimport { parseCustomStyles } from '@utils';\nimport { useSearchcraftStore } from '@provider/store';\nimport classNames from 'classnames';\n\n/**\n * This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.\n * It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-input-form placeholder-value=\"Search here\" />\n * ```\n *\n * ```js\n * // index.js\n * const searchInputForm = document.querySelector('searchcraft-input-form');\n *\n * searchInputForm.config = {\n * index: [],\n * readKey: '',\n * endpointUrl: '',\n * };\n *\n * searchForm.addEventListener('querySubmit', (event) => {\n * console.log('Query submitted', event.detail);\n * });\n * ```\n */\n@Component({\n tag: 'searchcraft-input-form',\n shadow: false,\n})\nexport class SearchcraftInput {\n /**\n * The Searchcraft config object.\n */\n @Prop() config: SearchcraftConfig | undefined;\n /**\n * Whether or not to automatically submit the search term when the input changes.\n */\n @Prop() autoSearch = true;\n /**\n * Where to place the search button.\n */\n @Prop() buttonPlacement: 'left' | 'right' | 'none' = 'none';\n /**\n * The label for the submit button.\n */\n @Prop() buttonLabel: string | undefined;\n /**\n * The label rendered above the input.\n */\n @Prop() inputLabel: string | undefined;\n /**\n * A custom styles object to be applied to the input element.\n */\n @Prop() customStyles: string | Record<string, string> = {};\n /**\n * The input element's placeholder value.\n */\n @Prop() placeholderValue = 'Enter Search';\n /**\n * The starting value of the input element.\n */\n @Prop() searchTerm = '';\n /**\n * When the input is cleared.\n */\n @Event() inputCleared?: EventEmitter<void>;\n /**\n * When no results are returned.\n */\n @Event() noResultsReceived?: EventEmitter<void>;\n /**\n * When the input becomes focused.\n */\n @Event() inputFocus?: EventEmitter<void>;\n /**\n * When the input becomes unfocused.\n */\n @Event() inputBlur?: EventEmitter<void>;\n /**\n * Event emitted when input initializes.\n */\n @Event() inputInit?: EventEmitter<void>;\n /**\n * Event emitted when a query has been submitted.\n */\n @Event() querySubmit?: EventEmitter<string>;\n\n @State() inputValue = this.searchTerm;\n @State() error = false;\n @State() isSearchcraftInitialized = false;\n\n private searchStore = useSearchcraftStore.getState();\n\n init() {\n if (this.config && !this.isSearchcraftInitialized) {\n const searchcraft = new SearchcraftCore(this.config, {\n sdkName: packageJson.name,\n sdkVersion: packageJson.version,\n });\n this.searchStore.initialize(searchcraft, true);\n this.isSearchcraftInitialized = true;\n this.inputInit?.emit();\n }\n }\n\n componentDidLoad() {\n this.init();\n }\n\n @Watch('config')\n onConfigChange() {\n this.init();\n }\n\n handleOnInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.inputValue = input.value;\n\n if (!this.autoSearch) {\n return;\n }\n\n if (input.value.trim() === '') {\n this.inputCleared?.emit();\n }\n\n this.performSearch(input.value);\n };\n\n private performSearch = async (value: string) => {\n if (value === useSearchcraftStore.getState().searchTerm) {\n return;\n }\n\n this.searchTerm = value.trim();\n this.error = false;\n this.searchStore.setSearchTerm(this.searchTerm);\n this.querySubmit?.emit(this.searchTerm);\n\n try {\n await this.searchStore.search();\n } catch (error) {\n this.error = true;\n this.inputCleared?.emit();\n }\n };\n\n handleClearInput = () => {\n this.inputValue = '';\n this.searchTerm = '';\n this.searchStore.setSearchTerm('');\n this.searchStore.setSearchClientResponseItems([]);\n this.error = false;\n\n this.inputCleared?.emit();\n };\n\n handleFormSubmit = async (event: Event) => {\n event.preventDefault();\n await this.performSearch(this.searchTerm);\n };\n\n render() {\n const validatedCustomStyles = parseCustomStyles(this.customStyles);\n\n const isShowingClearButton = this.inputValue.length > 0;\n\n const inputGridClassNames = classNames('searchcraft-input-grid', {\n 'searchcraft-input-grid-buttonLeft': this.buttonPlacement === 'left',\n 'searchcraft-input-grid-buttonRight': this.buttonPlacement === 'right',\n 'searchcraft-input-grid-buttonNone': this.buttonPlacement === 'none',\n });\n\n const shouldHaveVerticalGap = this.inputLabel || this.error;\n const inputGridStyles = {\n gap: shouldHaveVerticalGap ? '4px 8px' : '0px 8px',\n };\n\n return (\n <form class='searchcraft-input-form' onSubmit={this.handleFormSubmit}>\n <div class={inputGridClassNames} style={inputGridStyles}>\n <div class='searchcraft-input-button-wrapper'>\n <searchcraft-button\n onButtonClick={this.handleFormSubmit}\n label={this.buttonLabel}\n />\n </div>\n {this.inputLabel && (\n <div class='searchcraft-input-label-wrapper'>\n <searchcraft-input-label label={this.inputLabel} />\n </div>\n )}\n {this.error && (\n <div class='searchcraft-input-error-wrapper'>\n <searchcraft-error-message errorMessage='Something went wrong.' />\n </div>\n )}\n <div class='searchcraft-input-wrapper'>\n <input\n autoComplete='off'\n class='searchcraft-input'\n onFocus={() => this.inputFocus?.emit()}\n onBlur={() => this.inputBlur?.emit()}\n onInput={(event) => {\n this.handleOnInput(event);\n }}\n placeholder={this.placeholderValue}\n style={validatedCustomStyles}\n type='text'\n value={this.inputValue}\n />\n <div class='searchcraft-input-search-icon-wrapper'>\n <svg\n class='searchcraft-input-search-icon'\n viewBox='0 0 20 20'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n aria-labelledby='searchcraft-title'\n >\n <title id='searchcraft-title'>\n Searchcraft Search Icon Light\n </title>\n <path\n d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n </div>\n {isShowingClearButton && (\n <button\n type='button'\n class='searchcraft-input-clear-button'\n onClick={this.handleClearInput}\n >\n <svg\n class='searchcraft-input-clear-icon'\n viewBox='0 0 22 22'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n aria-labelledby='icon-title'\n >\n <title id='icon-title'>\n Searchcraft Clear Input Icon Light\n </title>\n <path\n d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n stroke='currentColor'\n stroke-width='1.5'\n stroke-linecap='round'\n stroke-linejoin='round'\n />\n </svg>\n </button>\n )}\n </div>\n </div>\n </form>\n );\n }\n}\n"],"version":3}
|
|
@@ -43,7 +43,7 @@ const SearchcraftButton = /*@__PURE__*/ proxyCustomElement(class SearchcraftButt
|
|
|
43
43
|
this.buttonClick.emit();
|
|
44
44
|
};
|
|
45
45
|
render() {
|
|
46
|
-
return (h("button", { key: '
|
|
46
|
+
return (h("button", { key: 'ff883b930d03da6cbfb40badd3be1de0a873f853', "aria-label": this.label, class: classNames('searchcraft-button', {
|
|
47
47
|
'searchcraft-button-primary': this.hierarchy === 'primary',
|
|
48
48
|
'searchcraft-button-tertiary': this.hierarchy === 'tertiary',
|
|
49
49
|
'searchcraft-button-disabled': this.disabled,
|
|
@@ -74,4 +74,4 @@ function defineCustomElement() {
|
|
|
74
74
|
|
|
75
75
|
export { SearchcraftButton as S, defineCustomElement as d };
|
|
76
76
|
|
|
77
|
-
//# sourceMappingURL=p-
|
|
77
|
+
//# sourceMappingURL=p-71cc28c1.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-71cc28c1.js","mappings":";;;MAmBa,iBAAiB;;;;;;;;;IAIpB,SAAS,GAA4B,SAAS,CAAC;;;;IAI/C,QAAQ,GAAa,KAAK,CAAC;;;;IAI3B,IAAI,CAAW;;;;IAIf,QAAQ,GAAa,KAAK,CAAC;;;;IAI3B,YAAY,GAAsB,MAAM,CAAC;;;;IAIzC,KAAK,GAAG,QAAQ,CAAC;;;;IAIjB,IAAI,GAAmC,QAAQ,CAAC;;;;IAI/C,WAAW,CAAsB;IAElC,iBAAiB,GAAG;QAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB,CAAC;IAEF,MAAM;QACJ,QACE,6EACc,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,UAAU,CAAC,oBAAoB,EAAE;gBACtC,4BAA4B,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS;gBAC1D,6BAA6B,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU;gBAC5D,6BAA6B,EAAE,IAAI,CAAC,QAAQ;aAC7C,CAAC,EACF,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,IAEd,IAAI,CAAC,QAAQ,IACZ,IAAI,CAAC,IAAI,KAET,EAAC,QAAQ,QACN,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,EAC1C,gBAAO,IAAI,CAAC,KAAK,CAAQ,EACxB,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,CAClC,CACZ,CACM,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-button/searchcraft-button.tsx"],"sourcesContent":["import {\n Component,\n Event,\n type EventEmitter,\n Prop,\n h,\n Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component represents a button to be consumed within the `search-input-form` component.\n * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.\n * It is consumed within the `searchcraft-input-form` component.\n */\n@Component({\n tag: 'searchcraft-button',\n shadow: false,\n})\nexport class SearchcraftButton {\n /**\n * Controls the visual representation of the button.\n */\n @Prop() hierarchy?: 'primary' | 'tertiary' = 'primary';\n /**\n * Whether the button is disabled.\n */\n @Prop() disabled?: boolean = false;\n /**\n * The icon element.\n */\n @Prop() icon?: Element;\n /**\n * Should the button only display an icon.\n */\n @Prop() iconOnly?: boolean = false;\n /**\n * The position of the icon.\n */\n @Prop() iconPosition?: 'left' | 'right' = 'left';\n /**\n * The label for the button.\n */\n @Prop() label = 'Search';\n /**\n * The type of the button.\n */\n @Prop() type?: 'submit' | 'reset' | 'button' = 'button';\n /**\n * The event fired when the button is clicked.\n */\n @Event() buttonClick!: EventEmitter<void>;\n\n private handleButtonClick = () => {\n this.buttonClick.emit();\n };\n\n render() {\n return (\n <button\n aria-label={this.label}\n class={classNames('searchcraft-button', {\n 'searchcraft-button-primary': this.hierarchy === 'primary',\n 'searchcraft-button-tertiary': this.hierarchy === 'tertiary',\n 'searchcraft-button-disabled': this.disabled,\n })}\n disabled={this.disabled}\n onClick={this.handleButtonClick}\n type={this.type}\n >\n {this.iconOnly ? (\n this.icon\n ) : (\n <Fragment>\n {this.iconPosition === 'left' && this.icon}\n <span>{this.label}</span>\n {this.iconPosition === 'right' && this.icon}\n </Fragment>\n )}\n </button>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { S as SearchcraftButton$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { S as SearchcraftButton$1, d as defineCustomElement$1 } from './p-71cc28c1.js';
|
|
2
2
|
|
|
3
3
|
const SearchcraftButton = SearchcraftButton$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { S as SearchcraftInput, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { S as SearchcraftInput, d as defineCustomElement$1 } from './p-6e2eef88.js';
|
|
2
2
|
|
|
3
3
|
const SearchcraftInputForm = SearchcraftInput;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h } from './p-5365011f.js';
|
|
|
2
2
|
import { u as useSearchcraftStore } from './p-38419178.js';
|
|
3
3
|
import { c as classNames } from './p-5cdc6210.js';
|
|
4
4
|
import { p as parseCustomStyles } from './p-d9551738.js';
|
|
5
|
-
import { d as defineCustomElement$2 } from './p-
|
|
5
|
+
import { d as defineCustomElement$2 } from './p-71cc28c1.js';
|
|
6
6
|
|
|
7
7
|
const SearchcraftPagination$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftPagination extends H {
|
|
8
8
|
constructor() {
|
|
@@ -91,11 +91,11 @@ const SearchcraftPagination$1 = /*@__PURE__*/ proxyCustomElement(class Searchcra
|
|
|
91
91
|
if (!this.searchTerm || this.searchResultsPagesCount <= 1) {
|
|
92
92
|
return;
|
|
93
93
|
}
|
|
94
|
-
return (h("div", { class: classNames('searchcraft-pagination', parseCustomStyles(this.customStyles || {})) }, h("div", { class: 'searchcraft-pagination-control' }, h("searchcraft-button", { disabled: this.searchResultsPage === 1, hierarchy: 'tertiary', onButtonClick: () => this.handleGoToPage(Math.max(1, this.searchResultsPage - 1)), label: '
|
|
94
|
+
return (h("div", { class: classNames('searchcraft-pagination', parseCustomStyles(this.customStyles || {})) }, h("div", { class: 'searchcraft-pagination-control' }, h("searchcraft-button", { disabled: this.searchResultsPage === 1, hierarchy: 'tertiary', onButtonClick: () => this.handleGoToPage(Math.max(1, this.searchResultsPage - 1)), label: 'Previous', iconPosition: 'left', icon: h("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, h("title", null, "Previous page icon"), h("path", { d: 'M12.5 15L7.5 10L12.5 5', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })), iconOnly: true })), h("ul", { class: 'searchcraft-pagination-list' }, this.renderOddPaginationItem(1), this.renderEvenPaginationItem(2), this.renderMiddlePaginationItem(), this.renderEvenPaginationItem(this.searchResultsPagesCount > 4
|
|
95
95
|
? this.searchResultsPagesCount - 1
|
|
96
96
|
: 4), this.renderOddPaginationItem(this.searchResultsPagesCount)), h("div", { class: 'searchcraft-pagination-control' }, h("searchcraft-button", { disabled: this.searchResultsPage === this.searchResultsPagesCount, hierarchy: 'tertiary', onButtonClick: () => {
|
|
97
97
|
this.handleGoToPage(Math.min(this.searchResultsPagesCount, this.searchResultsPage + 1));
|
|
98
|
-
}, label: '
|
|
98
|
+
}, label: 'Next', iconPosition: 'right', icon: h("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, h("title", null, "Next page icon"), h("path", { d: 'M7.5 15L12.5 10L7.5 5', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })), iconOnly: true }))));
|
|
99
99
|
}
|
|
100
100
|
}, [0, "searchcraft-pagination", {
|
|
101
101
|
"customStyles": [1, "custom-styles"],
|
|
@@ -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 />\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 />\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 { 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,9 +1,9 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './p-5365011f.js';
|
|
2
2
|
import { c as classNames } from './p-5cdc6210.js';
|
|
3
3
|
import { u as useSearchcraftStore } from './p-38419178.js';
|
|
4
|
-
import { d as defineCustomElement$8 } from './p-
|
|
4
|
+
import { d as defineCustomElement$8 } from './p-71cc28c1.js';
|
|
5
5
|
import { d as defineCustomElement$7 } from './p-0e393fe1.js';
|
|
6
|
-
import { d as defineCustomElement$6 } from './p-
|
|
6
|
+
import { d as defineCustomElement$6 } from './p-6e2eef88.js';
|
|
7
7
|
import { d as defineCustomElement$5 } from './p-e55a7970.js';
|
|
8
8
|
import { d as defineCustomElement$4 } from './p-ec0d230e.js';
|
|
9
9
|
import { d as defineCustomElement$3 } from './p-bff4d3fc.js';
|
|
@@ -42,7 +42,7 @@ const SearchcraftButton = class {
|
|
|
42
42
|
this.buttonClick.emit();
|
|
43
43
|
};
|
|
44
44
|
render() {
|
|
45
|
-
return (h("button", { key: '
|
|
45
|
+
return (h("button", { key: 'ff883b930d03da6cbfb40badd3be1de0a873f853', "aria-label": this.label, class: classNames('searchcraft-button', {
|
|
46
46
|
'searchcraft-button-primary': this.hierarchy === 'primary',
|
|
47
47
|
'searchcraft-button-tertiary': this.hierarchy === 'tertiary',
|
|
48
48
|
'searchcraft-button-disabled': this.disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"searchcraft-button.searchcraft-error-message.searchcraft-input-label.entry.js","mappings":";;;MAmBa,iBAAiB;;;;;;;;IAIpB,SAAS,GAA4B,SAAS,CAAC;;;;IAI/C,QAAQ,GAAa,KAAK,CAAC;;;;IAI3B,IAAI,CAAW;;;;IAIf,QAAQ,GAAa,KAAK,CAAC;;;;IAI3B,YAAY,GAAsB,MAAM,CAAC;;;;IAIzC,KAAK,GAAG,QAAQ,CAAC;;;;IAIjB,IAAI,GAAmC,QAAQ,CAAC;;;;IAI/C,WAAW,CAAsB;IAElC,iBAAiB,GAAG;QAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB,CAAC;IAEF,MAAM;QACJ,QACE
|
|
1
|
+
{"file":"searchcraft-button.searchcraft-error-message.searchcraft-input-label.entry.js","mappings":";;;MAmBa,iBAAiB;;;;;;;;IAIpB,SAAS,GAA4B,SAAS,CAAC;;;;IAI/C,QAAQ,GAAa,KAAK,CAAC;;;;IAI3B,IAAI,CAAW;;;;IAIf,QAAQ,GAAa,KAAK,CAAC;;;;IAI3B,YAAY,GAAsB,MAAM,CAAC;;;;IAIzC,KAAK,GAAG,QAAQ,CAAC;;;;IAIjB,IAAI,GAAmC,QAAQ,CAAC;;;;IAI/C,WAAW,CAAsB;IAElC,iBAAiB,GAAG;QAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB,CAAC;IAEF,MAAM;QACJ,QACE,6EACc,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,UAAU,CAAC,oBAAoB,EAAE;gBACtC,4BAA4B,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS;gBAC1D,6BAA6B,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU;gBAC5D,6BAA6B,EAAE,IAAI,CAAC,QAAQ;aAC7C,CAAC,EACF,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,IAEd,IAAI,CAAC,QAAQ,IACZ,IAAI,CAAC,IAAI,KAET,EAAC,QAAQ,QACN,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,EAC1C,gBAAO,IAAI,CAAC,KAAK,CAAQ,EACxB,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,CAClC,CACZ,CACM,EACT;KACH;;;MClEU,uBAAuB;;;;;;;IAI1B,YAAY,CAAU;IAE9B,MAAM;QACJ,QACE,0DAAG,KAAK,EAAC,2BAA2B,IACjC,IAAI,CAAC,YAAY,IAAI,0BAA0B,CAC9C,EACJ;KACH;;;MCXU,qBAAqB;;;;;;;IAIxB,mBAAmB,GAAI,EAAE,CAAC;IAC1B,KAAK,GAAG,EAAE,CAAC;IAEnB,MAAM;QACJ,QACE,8DACE,KAAK,EAAE,UAAU,CAAC,yBAAyB,EAAE,IAAI,CAAC,mBAAmB,CAAC,EACtE,OAAO,EAAC,sBAAsB,IAE7B,IAAI,CAAC,KAAK,CACL,EACR;KACH;;;;;","names":[],"sources":["src/components/searchcraft-button/searchcraft-button.tsx","src/components/searchcraft-error-message/searchcraft-error-message.tsx","src/components/searchcraft-input-label/searchcraft-input-label.tsx"],"sourcesContent":["import {\n Component,\n Event,\n type EventEmitter,\n Prop,\n h,\n Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component represents a button to be consumed within the `search-input-form` component.\n * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.\n * It is consumed within the `searchcraft-input-form` component.\n */\n@Component({\n tag: 'searchcraft-button',\n shadow: false,\n})\nexport class SearchcraftButton {\n /**\n * Controls the visual representation of the button.\n */\n @Prop() hierarchy?: 'primary' | 'tertiary' = 'primary';\n /**\n * Whether the button is disabled.\n */\n @Prop() disabled?: boolean = false;\n /**\n * The icon element.\n */\n @Prop() icon?: Element;\n /**\n * Should the button only display an icon.\n */\n @Prop() iconOnly?: boolean = false;\n /**\n * The position of the icon.\n */\n @Prop() iconPosition?: 'left' | 'right' = 'left';\n /**\n * The label for the button.\n */\n @Prop() label = 'Search';\n /**\n * The type of the button.\n */\n @Prop() type?: 'submit' | 'reset' | 'button' = 'button';\n /**\n * The event fired when the button is clicked.\n */\n @Event() buttonClick!: EventEmitter<void>;\n\n private handleButtonClick = () => {\n this.buttonClick.emit();\n };\n\n render() {\n return (\n <button\n aria-label={this.label}\n class={classNames('searchcraft-button', {\n 'searchcraft-button-primary': this.hierarchy === 'primary',\n 'searchcraft-button-tertiary': this.hierarchy === 'tertiary',\n 'searchcraft-button-disabled': this.disabled,\n })}\n disabled={this.disabled}\n onClick={this.handleButtonClick}\n type={this.type}\n >\n {this.iconOnly ? (\n this.icon\n ) : (\n <Fragment>\n {this.iconPosition === 'left' && this.icon}\n <span>{this.label}</span>\n {this.iconPosition === 'right' && this.icon}\n </Fragment>\n )}\n </button>\n );\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-error-message error-message=\"No search results found for query\" />\n * ```\n */\n@Component({\n tag: 'searchcraft-error-message',\n shadow: false,\n})\nexport class SearchcraftErrorMessage {\n /**\n * The error message.\n */\n @Prop() errorMessage?: string;\n\n render() {\n return (\n <p class='searchcraft-error-message'>\n {this.errorMessage || 'Search term is required.'}\n </p>\n );\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component serves as the input label for the searchcraft-input-form component.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-input-label label=\"Search\" />\n * ```\n */\n@Component({\n tag: 'searchcraft-input-label',\n shadow: false,\n})\nexport class SearchcraftInputLabel {\n /**\n * The classname applied to the label element.\n */\n @Prop() inputLabelClassName? = '';\n @Prop() label = '';\n\n render() {\n return (\n <label\n class={classNames('searchcraft-input-label', this.inputLabelClassName)}\n htmlFor='searchcraft-input-id'\n >\n {this.label}\n </label>\n );\n }\n}\n"],"version":3}
|
|
@@ -4,7 +4,7 @@ import { p as parseCustomStyles } from './styles-961644ef.js';
|
|
|
4
4
|
import { c as classNames } from './index-72ac5051.js';
|
|
5
5
|
|
|
6
6
|
const name = "@searchcraft/javascript-sdk";
|
|
7
|
-
const version = "0.8.
|
|
7
|
+
const version = "0.8.2";
|
|
8
8
|
const description = "Searchcraft Javascript SDK";
|
|
9
9
|
const author = "Searchcraft";
|
|
10
10
|
const license = "Apache-2.0";
|
|
@@ -53,7 +53,7 @@ const dependencies = {
|
|
|
53
53
|
classnames: "^2.3.2"
|
|
54
54
|
};
|
|
55
55
|
const devDependencies = {
|
|
56
|
-
"@searchcraft/core": "^0.8.
|
|
56
|
+
"@searchcraft/core": "^0.8.2",
|
|
57
57
|
"@searchcraft/javascript-sdk": "*",
|
|
58
58
|
"@stencil/core": "^4.7.0",
|
|
59
59
|
"@stencil/react-output-target": "^0.8.2",
|
|
@@ -89,11 +89,11 @@ const SearchcraftPagination = class {
|
|
|
89
89
|
if (!this.searchTerm || this.searchResultsPagesCount <= 1) {
|
|
90
90
|
return;
|
|
91
91
|
}
|
|
92
|
-
return (h("div", { class: classNames('searchcraft-pagination', parseCustomStyles(this.customStyles || {})) }, h("div", { class: 'searchcraft-pagination-control' }, h("searchcraft-button", { disabled: this.searchResultsPage === 1, hierarchy: 'tertiary', onButtonClick: () => this.handleGoToPage(Math.max(1, this.searchResultsPage - 1)), label: '
|
|
92
|
+
return (h("div", { class: classNames('searchcraft-pagination', parseCustomStyles(this.customStyles || {})) }, h("div", { class: 'searchcraft-pagination-control' }, h("searchcraft-button", { disabled: this.searchResultsPage === 1, hierarchy: 'tertiary', onButtonClick: () => this.handleGoToPage(Math.max(1, this.searchResultsPage - 1)), label: 'Previous', iconPosition: 'left', icon: h("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, h("title", null, "Previous page icon"), h("path", { d: 'M12.5 15L7.5 10L12.5 5', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })), iconOnly: true })), h("ul", { class: 'searchcraft-pagination-list' }, this.renderOddPaginationItem(1), this.renderEvenPaginationItem(2), this.renderMiddlePaginationItem(), this.renderEvenPaginationItem(this.searchResultsPagesCount > 4
|
|
93
93
|
? this.searchResultsPagesCount - 1
|
|
94
94
|
: 4), this.renderOddPaginationItem(this.searchResultsPagesCount)), h("div", { class: 'searchcraft-pagination-control' }, h("searchcraft-button", { disabled: this.searchResultsPage === this.searchResultsPagesCount, hierarchy: 'tertiary', onButtonClick: () => {
|
|
95
95
|
this.handleGoToPage(Math.min(this.searchResultsPagesCount, this.searchResultsPage + 1));
|
|
96
|
-
}, label: '
|
|
96
|
+
}, label: 'Next', iconPosition: 'right', icon: h("svg", { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, h("title", null, "Next page icon"), h("path", { d: 'M7.5 15L12.5 10L7.5 5', stroke: 'currentColor', "stroke-width": '1.5', "stroke-linecap": 'round', "stroke-linejoin": 'round' })), iconOnly: true }))));
|
|
97
97
|
}
|
|
98
98
|
};
|
|
99
99
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"searchcraft-pagination.entry.js","mappings":"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","names":[],"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 />\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 />\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"searchcraft-pagination.entry.js","mappings":"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","names":[],"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}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as s,h as r,F as a}from"./p-7e13c128.js";import{c as e}from"./p-5cdc6210.js";const c=class{constructor(r){t(this,r);this.buttonClick=s(this,"buttonClick",7)}hierarchy="primary";disabled=false;icon;iconOnly=false;iconPosition="left";label="Search";type="button";buttonClick;handleButtonClick=()=>{this.buttonClick.emit()};render(){return r("button",{key:"ff883b930d03da6cbfb40badd3be1de0a873f853","aria-label":this.label,class:e("searchcraft-button",{"searchcraft-button-primary":this.hierarchy==="primary","searchcraft-button-tertiary":this.hierarchy==="tertiary","searchcraft-button-disabled":this.disabled}),disabled:this.disabled,onClick:this.handleButtonClick,type:this.type},this.iconOnly?this.icon:r(a,null,this.iconPosition==="left"&&this.icon,r("span",null,this.label),this.iconPosition==="right"&&this.icon))}};const i=class{constructor(s){t(this,s)}errorMessage;render(){return r("p",{key:"dc97bb66da10a98fca027f928deaaf80d945417b",class:"searchcraft-error-message"},this.errorMessage||"Search term is required.")}};const h=class{constructor(s){t(this,s)}inputLabelClassName="";label="";render(){return r("label",{key:"528396d4be9f22ff0c02d95d8bcea056576aed41",class:e("searchcraft-input-label",this.inputLabelClassName),htmlFor:"searchcraft-input-id"},this.label)}};export{c as searchcraft_button,i as searchcraft_error_message,h as searchcraft_input_label};
|
|
2
|
+
//# sourceMappingURL=p-37842dee.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["SearchcraftButton","hierarchy","disabled","icon","iconOnly","iconPosition","label","type","buttonClick","handleButtonClick","this","emit","render","h","key","class","classNames","onClick","Fragment","SearchcraftErrorMessage","errorMessage","SearchcraftInputLabel","inputLabelClassName","htmlFor"],"sources":["src/components/searchcraft-button/searchcraft-button.tsx","src/components/searchcraft-error-message/searchcraft-error-message.tsx","src/components/searchcraft-input-label/searchcraft-input-label.tsx"],"sourcesContent":["import {\n Component,\n Event,\n type EventEmitter,\n Prop,\n h,\n Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component represents a button to be consumed within the `search-input-form` component.\n * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.\n * It is consumed within the `searchcraft-input-form` component.\n */\n@Component({\n tag: 'searchcraft-button',\n shadow: false,\n})\nexport class SearchcraftButton {\n /**\n * Controls the visual representation of the button.\n */\n @Prop() hierarchy?: 'primary' | 'tertiary' = 'primary';\n /**\n * Whether the button is disabled.\n */\n @Prop() disabled?: boolean = false;\n /**\n * The icon element.\n */\n @Prop() icon?: Element;\n /**\n * Should the button only display an icon.\n */\n @Prop() iconOnly?: boolean = false;\n /**\n * The position of the icon.\n */\n @Prop() iconPosition?: 'left' | 'right' = 'left';\n /**\n * The label for the button.\n */\n @Prop() label = 'Search';\n /**\n * The type of the button.\n */\n @Prop() type?: 'submit' | 'reset' | 'button' = 'button';\n /**\n * The event fired when the button is clicked.\n */\n @Event() buttonClick!: EventEmitter<void>;\n\n private handleButtonClick = () => {\n this.buttonClick.emit();\n };\n\n render() {\n return (\n <button\n aria-label={this.label}\n class={classNames('searchcraft-button', {\n 'searchcraft-button-primary': this.hierarchy === 'primary',\n 'searchcraft-button-tertiary': this.hierarchy === 'tertiary',\n 'searchcraft-button-disabled': this.disabled,\n })}\n disabled={this.disabled}\n onClick={this.handleButtonClick}\n type={this.type}\n >\n {this.iconOnly ? (\n this.icon\n ) : (\n <Fragment>\n {this.iconPosition === 'left' && this.icon}\n <span>{this.label}</span>\n {this.iconPosition === 'right' && this.icon}\n </Fragment>\n )}\n </button>\n );\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-error-message error-message=\"No search results found for query\" />\n * ```\n */\n@Component({\n tag: 'searchcraft-error-message',\n shadow: false,\n})\nexport class SearchcraftErrorMessage {\n /**\n * The error message.\n */\n @Prop() errorMessage?: string;\n\n render() {\n return (\n <p class='searchcraft-error-message'>\n {this.errorMessage || 'Search term is required.'}\n </p>\n );\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component serves as the input label for the searchcraft-input-form component.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-input-label label=\"Search\" />\n * ```\n */\n@Component({\n tag: 'searchcraft-input-label',\n shadow: false,\n})\nexport class SearchcraftInputLabel {\n /**\n * The classname applied to the label element.\n */\n @Prop() inputLabelClassName? = '';\n @Prop() label = '';\n\n render() {\n return (\n <label\n class={classNames('searchcraft-input-label', this.inputLabelClassName)}\n htmlFor='searchcraft-input-id'\n >\n {this.label}\n </label>\n );\n }\n}\n"],"mappings":"mGAmBaA,EAAiB,M,kEAIpBC,UAAqC,UAIrCC,SAAqB,MAIrBC,KAIAC,SAAqB,MAIrBC,aAAkC,OAIlCC,MAAQ,SAIRC,KAAuC,SAItCC,YAEDC,kBAAoB,KAC1BC,KAAKF,YAAYG,MAAM,EAGzB,MAAAC,GACE,OACEC,EAAA,UAAAC,IAAA,wDACcJ,KAAKJ,MACjBS,MAAOC,EAAW,qBAAsB,CACtC,6BAA8BN,KAAKT,YAAc,UACjD,8BAA+BS,KAAKT,YAAc,WAClD,8BAA+BS,KAAKR,WAEtCA,SAAUQ,KAAKR,SACfe,QAASP,KAAKD,kBACdF,KAAMG,KAAKH,MAEVG,KAAKN,SACJM,KAAS,KAETG,EAACK,EAAQ,KACNR,KAAKL,eAAiB,QAAUK,KAAKP,KACtCU,EAAA,YAAOH,KAAKJ,OACXI,KAAKL,eAAiB,SAAWK,KAAKP,M,SC7DtCgB,EAAuB,M,yBAI1BC,aAER,MAAAR,GACE,OACEC,EAAA,KAAAC,IAAA,2CAAGC,MAAM,6BACNL,KAAKU,cAAgB,2B,SCRjBC,EAAqB,M,yBAIxBC,oBAAuB,GACvBhB,MAAQ,GAEhB,MAAAM,GACE,OACEC,EAAA,SAAAC,IAAA,2CACEC,MAAOC,EAAW,0BAA2BN,KAAKY,qBAClDC,QAAQ,wBAEPb,KAAKJ,M","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as i}from"./p-7e13c128.js";import{u as s}from"./p-38419178.js";import{c as
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,h as i}from"./p-7e13c128.js";import{u as s}from"./p-38419178.js";import{c as e}from"./p-5cdc6210.js";import{p as a}from"./p-d9551738.js";const n=class{constructor(i){t(this,i)}customStyles;searchTerm;searchResultsPerPage;searchResultsPage;searchResultsCount;searchResultsPagesCount=1;searchResultsRangeMin=1;searchResultsRangeMax=1;setSearchResultsPage=()=>{};unsubscribe=()=>{};componentDidLoad(){this.unsubscribe=s.subscribe((t=>{this.searchTerm=t.searchTerm;this.searchResultsPerPage=t.searchResultsPerPage;this.searchResultsPage=t.searchResultsPage;this.searchResultsCount=t.searchResultsCount;this.searchResultsPagesCount=Math.ceil(this.searchResultsCount/this.searchResultsPerPage);this.searchResultsRangeMin=(this.searchResultsPage-1)*this.searchResultsPerPage+1;this.searchResultsRangeMax=(this.searchResultsPerPage-1)*this.searchResultsPerPage+this.searchResultsPerPage;this.setSearchResultsPage=t.setSearchResultsPage}))}disconnectedCallback(){this.unsubscribe?.()}handleGoToPage(t){this.setSearchResultsPage(t)}renderOddPaginationItem(t){return i("li",null,i("button",{class:e("searchcraft-pagination-item",{"searchcraft-pagination-item-active":this.searchResultsPage===t}),onClick:()=>this.handleGoToPage(t),type:"button"},t))}renderEvenPaginationItem(t){if(this.searchResultsPagesCount<=t){return}if(this.searchResultsPagesCount<=5||t<Math.ceil(this.searchResultsPagesCount/2)?this.searchResultsPage<=t+1:this.searchResultsPage>=t-1){return i("li",null,i("button",{class:e("searchcraft-pagination-item",{"searchcraft-pagination-item-active":this.searchResultsPage===t}),onClick:()=>this.handleGoToPage(t),type:"button"},t))}return i("li",null,i("span",{class:"searchcraft-pagination-item"},"..."))}renderMiddlePaginationItem(){if(this.searchResultsPagesCount<=3){return}if(this.searchResultsPagesCount<=5||this.searchResultsPage<=3||this.searchResultsPage>=this.searchResultsPagesCount-2){return i("li",null,i("button",{class:e("searchcraft-pagination-item",{"searchcraft-pagination-item-active":this.searchResultsPage===3||this.searchResultsPage===this.searchResultsPagesCount-2}),type:"button",onClick:()=>this.handleGoToPage(this.searchResultsPage>=this.searchResultsPagesCount-2?this.searchResultsPagesCount-2:3)},this.searchResultsPage>=this.searchResultsPagesCount-2?this.searchResultsPagesCount-2:3))}return i("li",null,i("span",{class:"searchcraft-pagination-item searchcraft-pagination-item-active"},this.searchResultsPage))}render(){if(!this.searchTerm||this.searchResultsPagesCount<=1){return}return i("div",{class:e("searchcraft-pagination",a(this.customStyles||{}))},i("div",{class:"searchcraft-pagination-control"},i("searchcraft-button",{disabled:this.searchResultsPage===1,hierarchy:"tertiary",onButtonClick:()=>this.handleGoToPage(Math.max(1,this.searchResultsPage-1)),label:"Previous",iconPosition:"left",icon:i("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("title",null,"Previous page icon"),i("path",{d:"M12.5 15L7.5 10L12.5 5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),iconOnly:true})),i("ul",{class:"searchcraft-pagination-list"},this.renderOddPaginationItem(1),this.renderEvenPaginationItem(2),this.renderMiddlePaginationItem(),this.renderEvenPaginationItem(this.searchResultsPagesCount>4?this.searchResultsPagesCount-1:4),this.renderOddPaginationItem(this.searchResultsPagesCount)),i("div",{class:"searchcraft-pagination-control"},i("searchcraft-button",{disabled:this.searchResultsPage===this.searchResultsPagesCount,hierarchy:"tertiary",onButtonClick:()=>{this.handleGoToPage(Math.min(this.searchResultsPagesCount,this.searchResultsPage+1))},label:"Next",iconPosition:"right",icon:i("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("title",null,"Next page icon"),i("path",{d:"M7.5 15L12.5 10L7.5 5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),iconOnly:true})))}};export{n as searchcraft_pagination};
|
|
2
|
+
//# sourceMappingURL=p-3be70f20.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["SearchcraftPagination","customStyles","searchTerm","searchResultsPerPage","searchResultsPage","searchResultsCount","searchResultsPagesCount","searchResultsRangeMin","searchResultsRangeMax","setSearchResultsPage","unsubscribe","componentDidLoad","this","useSearchcraftStore","subscribe","state","Math","ceil","disconnectedCallback","handleGoToPage","page","renderOddPaginationItem","h","class","classNames","onClick","type","renderEvenPaginationItem","renderMiddlePaginationItem","render","parseCustomStyles","disabled","hierarchy","onButtonClick","max","label","iconPosition","icon","width","height","viewBox","fill","xmlns","d","stroke","iconOnly","min"],"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"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as e,h as s}from"./p-7e13c128.js";import{u as c,g as a}from"./p-38419178.js";import{p as i}from"./p-d9551738.js";import{c as r}from"./p-5cdc6210.js";const n="@searchcraft/javascript-sdk";const o="0.8.
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as e,h as s}from"./p-7e13c128.js";import{u as c,g as a}from"./p-38419178.js";import{p as i}from"./p-d9551738.js";import{c as r}from"./p-5cdc6210.js";const n="@searchcraft/javascript-sdk";const o="0.8.2";const d="Searchcraft Javascript SDK";const h="Searchcraft";const p="Apache-2.0";const l="dist/index.cjs.js";const f="dist/index.js";const u="dist/types/index.d.ts";const b="dist/collection/collection-manifest.json";const m="dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.esm.js";const y={".":{import:"./dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.esm.js",require:"./dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.cjs.js",types:"./dist/types/index.d.ts"},"./components":{import:"./dist/components/index.js",types:"./dist/components/index.d.ts"},"./loader":{import:"./dist/loader/index.js",require:"./dist/loader/index.cjs",types:"./dist/loader/index.d.ts"},"./dist/components/*":{import:"./dist/components/*",types:"./dist/components/*"}};const k={type:"git",url:"https://bitbucket.org/madebychalk/searchcraft-javascript-sdks/"};const v=["dist/"];const g={build:"stencil build && yarn docs",docs:"typedoc --options typedoc.json",dev:"stencil build --dev --watch",test:"stencil test --spec --e2e","test.watch":"stencil test --spec --e2e --watchAll",generate:"stencil generate"};const j={"@stencil/vue-output-target":"^0.9.2",classnames:"^2.3.2"};const w={"@searchcraft/core":"^0.8.2","@searchcraft/javascript-sdk":"*","@stencil/core":"^4.7.0","@stencil/react-output-target":"^0.8.2","@stencil/sass":"^3.0.12","@types/node":"^16.18.11",zustand:"^5.0.1"};const C={name:n,private:false,version:o,description:d,author:h,license:p,main:l,module:f,types:u,collection:b,"collection:main":"dist/collection/index.js",unpkg:m,exports:y,repository:k,files:v,scripts:g,dependencies:j,devDependencies:w};const x=class{constructor(s){t(this,s);this.inputCleared=e(this,"inputCleared",7);this.noResultsReceived=e(this,"noResultsReceived",7);this.inputFocus=e(this,"inputFocus",7);this.inputBlur=e(this,"inputBlur",7);this.inputInit=e(this,"inputInit",7);this.querySubmit=e(this,"querySubmit",7)}config;autoSearch=true;buttonPlacement="none";buttonLabel;inputLabel;customStyles={};placeholderValue="Enter Search";searchTerm="";inputCleared;noResultsReceived;inputFocus;inputBlur;inputInit;querySubmit;inputValue=this.searchTerm;error=false;isSearchcraftInitialized=false;searchStore=c.getState();init(){if(this.config&&!this.isSearchcraftInitialized){const t=new a(this.config,{sdkName:C.name,sdkVersion:C.version});this.searchStore.initialize(t,true);this.isSearchcraftInitialized=true;this.inputInit?.emit()}}componentDidLoad(){this.init()}onConfigChange(){this.init()}handleOnInput=t=>{const e=t.target;this.inputValue=e.value;if(!this.autoSearch){return}if(e.value.trim()===""){this.inputCleared?.emit()}this.performSearch(e.value)};performSearch=async t=>{if(t===c.getState().searchTerm){return}this.searchTerm=t.trim();this.error=false;this.searchStore.setSearchTerm(this.searchTerm);this.querySubmit?.emit(this.searchTerm);try{await this.searchStore.search()}catch(t){this.error=true;this.inputCleared?.emit()}};handleClearInput=()=>{this.inputValue="";this.searchTerm="";this.searchStore.setSearchTerm("");this.searchStore.setSearchClientResponseItems([]);this.error=false;this.inputCleared?.emit()};handleFormSubmit=async t=>{t.preventDefault();await this.performSearch(this.searchTerm)};render(){const t=i(this.customStyles);const e=this.inputValue.length>0;const c=r("searchcraft-input-grid",{"searchcraft-input-grid-buttonLeft":this.buttonPlacement==="left","searchcraft-input-grid-buttonRight":this.buttonPlacement==="right","searchcraft-input-grid-buttonNone":this.buttonPlacement==="none"});const a=this.inputLabel||this.error;const n={gap:a?"4px 8px":"0px 8px"};return s("form",{key:"bc665c50db8de601a3c95266bdf063ebb988d6a8",class:"searchcraft-input-form",onSubmit:this.handleFormSubmit},s("div",{key:"a6936858c08d866b66b887c7ae03b35961cf04a1",class:c,style:n},s("div",{key:"915ac892fccb771f1c5338cd2d52f16f1793615d",class:"searchcraft-input-button-wrapper"},s("searchcraft-button",{key:"81447da28dcb9cb80a8cdf0c6765c909c2746585",onButtonClick:this.handleFormSubmit,label:this.buttonLabel})),this.inputLabel&&s("div",{key:"939c3407d16075be25ff23bf9b379c05ba1a66d4",class:"searchcraft-input-label-wrapper"},s("searchcraft-input-label",{key:"9d9c4043c04132b27710cca47abf102a188a80b9",label:this.inputLabel})),this.error&&s("div",{key:"7e309f8a5c81a41bdd593f4e4ee1ba30c531c97d",class:"searchcraft-input-error-wrapper"},s("searchcraft-error-message",{key:"de947c04f0948e36786f50ac65720eeb598ae7bf",errorMessage:"Something went wrong."})),s("div",{key:"bcf774e3fa5164ab838b634badf2002495437fe7",class:"searchcraft-input-wrapper"},s("input",{key:"fd9759559712a39d3493e069ddddf7c267879c84",autoComplete:"off",class:"searchcraft-input",onFocus:()=>this.inputFocus?.emit(),onBlur:()=>this.inputBlur?.emit(),onInput:t=>{this.handleOnInput(t)},placeholder:this.placeholderValue,style:t,type:"text",value:this.inputValue}),s("div",{key:"8564b18962feeea8d9ab8bb46af4ba28a089d8f4",class:"searchcraft-input-search-icon-wrapper"},s("svg",{key:"90c3636ea306ed70887d76deaf058ab3ace61134",class:"searchcraft-input-search-icon",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"searchcraft-title"},s("title",{key:"c9921263b87df28e06bab9990e324aa1bebac767",id:"searchcraft-title"},"Searchcraft Search Icon Light"),s("path",{key:"bb82073fd722ff4a74e1a86c74cdf0dd9a8080b4",d:"M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}))),e&&s("button",{key:"e708cb9426171bfdfb29e0a98206d086fa14e15e",type:"button",class:"searchcraft-input-clear-button",onClick:this.handleClearInput},s("svg",{key:"243b6eacc68fa8cc57d5e11b9b317d7fe581406f",class:"searchcraft-input-clear-icon",viewBox:"0 0 22 22",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":"icon-title"},s("title",{key:"d8a8b44fe04345b5b27ba33ec4ba510500eab3bf",id:"icon-title"},"Searchcraft Clear Input Icon Light"),s("path",{key:"0602cbff7aac6755dabb496b84e6ef3e4e2ac7a6",d:"M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}))))))}static get watchers(){return{config:["onConfigChange"]}}};const S=class{constructor(e){t(this,e)}popoverResultMappings;searchClientResponseItems;adClientResponseItems;searchResultsPage;searchResultsPerPage;render(){return s("div",{key:"a869d98e96f6fbbc80ecb79058c4753b4a3a8b1d",class:"searchcraft-popover-list-view"},this.adClientResponseItems?.map((t=>s("searchcraft-popover-list-item-ad",{adClientResponseItem:t,key:t.adId}))),this.searchClientResponseItems?.map(((t,e)=>s("searchcraft-popover-list-item",{item:t,key:t.id,popoverResultMappings:this.popoverResultMappings,documentPosition:this.searchResultsPerPage*(this.searchResultsPage-1)+e}))))}};export{x as searchcraft_input_form,S as searchcraft_popover_list_view};
|
|
2
|
+
//# sourceMappingURL=p-7813f3cc.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-7e13c128.js";export{s as setNonce}from"./p-7e13c128.js";import{g as a}from"./p-e1255160.js";var r=()=>{const t=import.meta.url;const s={};if(t!==""){s.resourcesUrl=new URL(".",t).href}return e(s)};r().then((async e=>{await a();return t([["p-6bffd3f5",[[4,"searchcraft-base-search-results",{customStylesForResults:[1,"custom-styles-for-results"],searchResultMappings:[16],resultImagePlacement:[1,"result-image-placement"],buttonLabel:[1,"button-label"],buttonTarget:[1,"button-target"],buttonRel:[1,"button-rel"],containerTarget:[1,"container-target"],containerRel:[1,"container-rel"],searchTerm:[32],searchClientResponseItems:[32],adClientResponseItems:[32],searchResultsPerPage:[32],searchResultsPage:[32]}]]],["p-9340f4e4",[[0,"searchcraft-filter-panel",{items:[16],unsubscribe:[32],lastSearchTerm:[32]}]]],["p-
|
|
1
|
+
import{p as e,b as t}from"./p-7e13c128.js";export{s as setNonce}from"./p-7e13c128.js";import{g as a}from"./p-e1255160.js";var r=()=>{const t=import.meta.url;const s={};if(t!==""){s.resourcesUrl=new URL(".",t).href}return e(s)};r().then((async e=>{await a();return t([["p-6bffd3f5",[[4,"searchcraft-base-search-results",{customStylesForResults:[1,"custom-styles-for-results"],searchResultMappings:[16],resultImagePlacement:[1,"result-image-placement"],buttonLabel:[1,"button-label"],buttonTarget:[1,"button-target"],buttonRel:[1,"button-rel"],containerTarget:[1,"container-target"],containerRel:[1,"container-rel"],searchTerm:[32],searchClientResponseItems:[32],adClientResponseItems:[32],searchResultsPerPage:[32],searchResultsPage:[32]}]]],["p-9340f4e4",[[0,"searchcraft-filter-panel",{items:[16],unsubscribe:[32],lastSearchTerm:[32]}]]],["p-3be70f20",[[0,"searchcraft-pagination",{customStyles:[1,"custom-styles"],searchTerm:[32],searchResultsPerPage:[32],searchResultsPage:[32],searchResultsCount:[32],searchResultsPagesCount:[32],searchResultsRangeMin:[32],searchResultsRangeMax:[32],setSearchResultsPage:[32]}]]],["p-5e064c07",[[0,"searchcraft-search-results-per-page",{increment:[8],customStyles:[1,"custom-styles"],searchTerm:[32],searchResultsPage:[32],searchResultsPerPage:[32],searchResultsCount:[32],searchResultsPagesCount:[32],initialSearchResultsPerPage:[32],setSearchResultsPerPage:[32],setSearchResultsPage:[32]}]]],["p-7f4dd50c",[[4,"searchcraft-popover-button"]]],["p-a84b1548",[[0,"searchcraft-results-info",{customFormatter:[16],customStyles:[1,"custom-styles"],searchTerm:[32],searchResultsPage:[32],searchResultsPerPage:[32],searchResultsCount:[32],count:[32],range:[32],responseTime:[32]}]]],["p-e11de2d6",[[0,"searchcraft-theme",{theme:[1],customTheme:[1,"custom-theme"]}]]],["p-7813f3cc",[[0,"searchcraft-input-form",{config:[16],autoSearch:[4,"auto-search"],buttonPlacement:[1,"button-placement"],buttonLabel:[1,"button-label"],inputLabel:[1,"input-label"],customStyles:[1,"custom-styles"],placeholderValue:[1,"placeholder-value"],searchTerm:[1,"search-term"],inputValue:[32],error:[32],isSearchcraftInitialized:[32]},null,{config:["onConfigChange"]}],[0,"searchcraft-popover-list-view",{popoverResultMappings:[16],searchClientResponseItems:[16],adClientResponseItems:[16],searchResultsPage:[2,"search-results-page"],searchResultsPerPage:[2,"search-results-per-page"]}]]],["p-2dc07b47",[[0,"searchcraft-popover-form",{config:[16],type:[1],popoverResultMappings:[16],hotkey:[1],hotkeyModifier:[1,"hotkey-modifier"],isPopoverVisibleInState:[32],unsubscribe:[32],searchClientResponseItems:[32],adClientResponseItems:[32],searchTerm:[32],isFocused:[32],breakpointSm:[32],breakpointMd:[32],breakpointLg:[32],searchResultsPage:[32],searchResultsPerPage:[32],modalElement:[32]}]]],["p-b8ea0454",[[0,"searchcraft-select",{caption:[1],disabled:[4],inputId:[1,"input-id"],label:[1],labelId:[1,"label-id"],name:[1],options:[1],customStyles:[1,"custom-styles"],searchResultsPerPage:[32],setSearchResultsPage:[32],setSearchResultsPerPage:[32]}]]],["p-279f3e15",[[0,"searchcraft-base-search-result",{item:[16],searchResultMappings:[16],containerTarget:[1,"container-target"],containerRel:[1,"container-rel"],buttonTarget:[1,"button-target"],buttonRel:[1,"button-rel"],imagePlacement:[1,"image-placement"],customStyles:[1,"custom-styles"],documentPosition:[2,"document-position"],titleContent:[32],subtitleContent:[32],bodyContent:[32],footerContent:[32],buttonLabel:[32],buttonHref:[32],containerHref:[32],imageSrc:[32],imageAlt:[32]}],[0,"searchcraft-base-search-result-ad",{adClientResponseItem:[16]}]]],["p-2bc82b48",[[0,"searchcraft-facet-list",{fieldName:[1,"field-name"],baseFacetRoot:[32],facetRoot:[32],selectedPaths:[32],lastTimeTaken:[32],hasNewSearchTerm:[32],lastSearchTerm:[32],lastSearchMode:[32],lastSortType:[32],unsubscribe:[32]}],[0,"searchcraft-slider",{max:[2],min:[2],granularity:[2],dataType:[1,"data-type"],endValue:[32],startValue:[32],lastFocusedHandle:[32]}],[0,"searchcraft-toggle-button",{label:[1],subLabel:[1,"sub-label"],isActive:[32],unsubscribe:[32],lastSearchTerm:[32]}]]],["p-c4a9d8ab",[[0,"searchcraft-popover-list-item",{item:[16],popoverResultMappings:[16],documentPosition:[2,"document-position"],href:[32],imageSrc:[32],imageAlt:[32],titleContent:[32],subtitleContent:[32]}],[0,"searchcraft-popover-list-item-ad",{adClientResponseItem:[16]}]]],["p-37842dee",[[0,"searchcraft-input-label",{inputLabelClassName:[1,"input-label-class-name"],label:[1]}],[0,"searchcraft-button",{hierarchy:[1],disabled:[4],icon:[16],iconOnly:[4,"icon-only"],iconPosition:[1,"icon-position"],label:[1],type:[1]}],[0,"searchcraft-error-message",{errorMessage:[1,"error-message"]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=searchcraft-javascript-sdk.esm.js.map
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@searchcraft/javascript-sdk",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.8.
|
|
4
|
+
"version": "0.8.2",
|
|
5
5
|
"description": "Searchcraft Javascript SDK",
|
|
6
6
|
"author": "Searchcraft",
|
|
7
7
|
"license": "Apache-2.0",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"classnames": "^2.3.2"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
|
-
"@searchcraft/core": "^0.8.
|
|
54
|
+
"@searchcraft/core": "^0.8.2",
|
|
55
55
|
"@searchcraft/javascript-sdk": "*",
|
|
56
56
|
"@stencil/core": "^4.7.0",
|
|
57
57
|
"@stencil/react-output-target": "^0.8.2",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"@types/node": "^16.18.11",
|
|
60
60
|
"zustand": "^5.0.1"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "1ed6406b933f26213956b4604ae014ca8eb47865"
|
|
63
63
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"p-d19bf6ff.js","mappings":";;;MAmBa,iBAAiB;;;;;;;;;IAIpB,SAAS,GAA4B,SAAS,CAAC;;;;IAI/C,QAAQ,GAAa,KAAK,CAAC;;;;IAI3B,IAAI,CAAW;;;;IAIf,QAAQ,GAAa,KAAK,CAAC;;;;IAI3B,YAAY,GAAsB,MAAM,CAAC;;;;IAIzC,KAAK,GAAG,QAAQ,CAAC;;;;IAIjB,IAAI,GAAmC,QAAQ,CAAC;;;;IAI/C,WAAW,CAAsB;IAElC,iBAAiB,GAAG;QAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB,CAAC;IAEF,MAAM;QACJ,QACE,+DACE,KAAK,EAAE,UAAU,CAAC,oBAAoB,EAAE;gBACtC,4BAA4B,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS;gBAC1D,6BAA6B,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU;gBAC5D,6BAA6B,EAAE,IAAI,CAAC,QAAQ;aAC7C,CAAC,EACF,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,IAEd,IAAI,CAAC,QAAQ,IACZ,IAAI,CAAC,IAAI,KAET,EAAC,QAAQ,QACN,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,EAC1C,gBAAO,IAAI,CAAC,KAAK,CAAQ,EACxB,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,CAClC,CACZ,CACM,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-button/searchcraft-button.tsx"],"sourcesContent":["import {\n Component,\n Event,\n type EventEmitter,\n Prop,\n h,\n Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component represents a button to be consumed within the `search-input-form` component.\n * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.\n * It is consumed within the `searchcraft-input-form` component.\n */\n@Component({\n tag: 'searchcraft-button',\n shadow: false,\n})\nexport class SearchcraftButton {\n /**\n * Controls the visual representation of the button.\n */\n @Prop() hierarchy?: 'primary' | 'tertiary' = 'primary';\n /**\n * Whether the button is disabled.\n */\n @Prop() disabled?: boolean = false;\n /**\n * The icon element.\n */\n @Prop() icon?: Element;\n /**\n * Should the button only display an icon.\n */\n @Prop() iconOnly?: boolean = false;\n /**\n * The position of the icon.\n */\n @Prop() iconPosition?: 'left' | 'right' = 'left';\n /**\n * The label for the button.\n */\n @Prop() label = 'Search';\n /**\n * The type of the button.\n */\n @Prop() type?: 'submit' | 'reset' | 'button' = 'button';\n /**\n * The event fired when the button is clicked.\n */\n @Event() buttonClick!: EventEmitter<void>;\n\n private handleButtonClick = () => {\n this.buttonClick.emit();\n };\n\n render() {\n return (\n <button\n class={classNames('searchcraft-button', {\n 'searchcraft-button-primary': this.hierarchy === 'primary',\n 'searchcraft-button-tertiary': this.hierarchy === 'tertiary',\n 'searchcraft-button-disabled': this.disabled,\n })}\n disabled={this.disabled}\n onClick={this.handleButtonClick}\n type={this.type}\n >\n {this.iconOnly ? (\n this.icon\n ) : (\n <Fragment>\n {this.iconPosition === 'left' && this.icon}\n <span>{this.label}</span>\n {this.iconPosition === 'right' && this.icon}\n </Fragment>\n )}\n </button>\n );\n }\n}\n"],"version":3}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["SearchcraftPagination","customStyles","searchTerm","searchResultsPerPage","searchResultsPage","searchResultsCount","searchResultsPagesCount","searchResultsRangeMin","searchResultsRangeMax","setSearchResultsPage","unsubscribe","componentDidLoad","this","useSearchcraftStore","subscribe","state","Math","ceil","disconnectedCallback","handleGoToPage","page","renderOddPaginationItem","h","class","classNames","onClick","type","renderEvenPaginationItem","renderMiddlePaginationItem","render","parseCustomStyles","disabled","hierarchy","onButtonClick","max","label","iconPosition","icon","width","height","viewBox","fill","xmlns","d","stroke","min"],"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 />\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 />\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as s,h as r,F as a}from"./p-7e13c128.js";import{c as e}from"./p-5cdc6210.js";const c=class{constructor(r){t(this,r);this.buttonClick=s(this,"buttonClick",7)}hierarchy="primary";disabled=false;icon;iconOnly=false;iconPosition="left";label="Search";type="button";buttonClick;handleButtonClick=()=>{this.buttonClick.emit()};render(){return r("button",{key:"fc258e1c7aab54611c781789eef7facc074f02c3",class:e("searchcraft-button",{"searchcraft-button-primary":this.hierarchy==="primary","searchcraft-button-tertiary":this.hierarchy==="tertiary","searchcraft-button-disabled":this.disabled}),disabled:this.disabled,onClick:this.handleButtonClick,type:this.type},this.iconOnly?this.icon:r(a,null,this.iconPosition==="left"&&this.icon,r("span",null,this.label),this.iconPosition==="right"&&this.icon))}};const i=class{constructor(s){t(this,s)}errorMessage;render(){return r("p",{key:"dc97bb66da10a98fca027f928deaaf80d945417b",class:"searchcraft-error-message"},this.errorMessage||"Search term is required.")}};const h=class{constructor(s){t(this,s)}inputLabelClassName="";label="";render(){return r("label",{key:"528396d4be9f22ff0c02d95d8bcea056576aed41",class:e("searchcraft-input-label",this.inputLabelClassName),htmlFor:"searchcraft-input-id"},this.label)}};export{c as searchcraft_button,i as searchcraft_error_message,h as searchcraft_input_label};
|
|
2
|
-
//# sourceMappingURL=p-d2fffca9.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["SearchcraftButton","hierarchy","disabled","icon","iconOnly","iconPosition","label","type","buttonClick","handleButtonClick","this","emit","render","h","key","class","classNames","onClick","Fragment","SearchcraftErrorMessage","errorMessage","SearchcraftInputLabel","inputLabelClassName","htmlFor"],"sources":["src/components/searchcraft-button/searchcraft-button.tsx","src/components/searchcraft-error-message/searchcraft-error-message.tsx","src/components/searchcraft-input-label/searchcraft-input-label.tsx"],"sourcesContent":["import {\n Component,\n Event,\n type EventEmitter,\n Prop,\n h,\n Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component represents a button to be consumed within the `search-input-form` component.\n * It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.\n * It is consumed within the `searchcraft-input-form` component.\n */\n@Component({\n tag: 'searchcraft-button',\n shadow: false,\n})\nexport class SearchcraftButton {\n /**\n * Controls the visual representation of the button.\n */\n @Prop() hierarchy?: 'primary' | 'tertiary' = 'primary';\n /**\n * Whether the button is disabled.\n */\n @Prop() disabled?: boolean = false;\n /**\n * The icon element.\n */\n @Prop() icon?: Element;\n /**\n * Should the button only display an icon.\n */\n @Prop() iconOnly?: boolean = false;\n /**\n * The position of the icon.\n */\n @Prop() iconPosition?: 'left' | 'right' = 'left';\n /**\n * The label for the button.\n */\n @Prop() label = 'Search';\n /**\n * The type of the button.\n */\n @Prop() type?: 'submit' | 'reset' | 'button' = 'button';\n /**\n * The event fired when the button is clicked.\n */\n @Event() buttonClick!: EventEmitter<void>;\n\n private handleButtonClick = () => {\n this.buttonClick.emit();\n };\n\n render() {\n return (\n <button\n class={classNames('searchcraft-button', {\n 'searchcraft-button-primary': this.hierarchy === 'primary',\n 'searchcraft-button-tertiary': this.hierarchy === 'tertiary',\n 'searchcraft-button-disabled': this.disabled,\n })}\n disabled={this.disabled}\n onClick={this.handleButtonClick}\n type={this.type}\n >\n {this.iconOnly ? (\n this.icon\n ) : (\n <Fragment>\n {this.iconPosition === 'left' && this.icon}\n <span>{this.label}</span>\n {this.iconPosition === 'right' && this.icon}\n </Fragment>\n )}\n </button>\n );\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-error-message error-message=\"No search results found for query\" />\n * ```\n */\n@Component({\n tag: 'searchcraft-error-message',\n shadow: false,\n})\nexport class SearchcraftErrorMessage {\n /**\n * The error message.\n */\n @Prop() errorMessage?: string;\n\n render() {\n return (\n <p class='searchcraft-error-message'>\n {this.errorMessage || 'Search term is required.'}\n </p>\n );\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport classNames from 'classnames';\n\n/**\n * This web component serves as the input label for the searchcraft-input-form component.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-input-label label=\"Search\" />\n * ```\n */\n@Component({\n tag: 'searchcraft-input-label',\n shadow: false,\n})\nexport class SearchcraftInputLabel {\n /**\n * The classname applied to the label element.\n */\n @Prop() inputLabelClassName? = '';\n @Prop() label = '';\n\n render() {\n return (\n <label\n class={classNames('searchcraft-input-label', this.inputLabelClassName)}\n htmlFor='searchcraft-input-id'\n >\n {this.label}\n </label>\n );\n }\n}\n"],"mappings":"mGAmBaA,EAAiB,M,kEAIpBC,UAAqC,UAIrCC,SAAqB,MAIrBC,KAIAC,SAAqB,MAIrBC,aAAkC,OAIlCC,MAAQ,SAIRC,KAAuC,SAItCC,YAEDC,kBAAoB,KAC1BC,KAAKF,YAAYG,MAAM,EAGzB,MAAAC,GACE,OACEC,EAAA,UAAAC,IAAA,2CACEC,MAAOC,EAAW,qBAAsB,CACtC,6BAA8BN,KAAKT,YAAc,UACjD,8BAA+BS,KAAKT,YAAc,WAClD,8BAA+BS,KAAKR,WAEtCA,SAAUQ,KAAKR,SACfe,QAASP,KAAKD,kBACdF,KAAMG,KAAKH,MAEVG,KAAKN,SACJM,KAAS,KAETG,EAACK,EAAQ,KACNR,KAAKL,eAAiB,QAAUK,KAAKP,KACtCU,EAAA,YAAOH,KAAKJ,OACXI,KAAKL,eAAiB,SAAWK,KAAKP,M,SC5DtCgB,EAAuB,M,yBAI1BC,aAER,MAAAR,GACE,OACEC,EAAA,KAAAC,IAAA,2CAAGC,MAAM,6BACNL,KAAKU,cAAgB,2B,SCRjBC,EAAqB,M,yBAIxBC,oBAAuB,GACvBhB,MAAQ,GAEhB,MAAAM,GACE,OACEC,EAAA,SAAAC,IAAA,2CACEC,MAAOC,EAAW,0BAA2BN,KAAKY,qBAClDC,QAAQ,wBAEPb,KAAKJ,M","ignoreList":[]}
|
/package/dist/searchcraft-javascript-sdk/{p-75779e4b.entry.js.map → p-7813f3cc.entry.js.map}
RENAMED
|
File without changes
|