@jumpgroup/jump-design-system 0.2.1 → 0.2.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/jump-design-system.cjs.js +1 -1
- package/dist/cjs/jump-pagination.cjs.entry.js +4 -3
- package/dist/cjs/jump-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/jump-pagination/jump-pagination-pages.stories.js +8 -0
- package/dist/collection/components/jump-pagination/jump-pagination-pages.stories.js.map +1 -1
- package/dist/collection/components/jump-pagination/jump-pagination-products.stories.js +8 -1
- package/dist/collection/components/jump-pagination/jump-pagination-products.stories.js.map +1 -1
- package/dist/collection/components/jump-pagination/jump-pagination.js +22 -3
- package/dist/collection/components/jump-pagination/jump-pagination.js.map +1 -1
- package/dist/components/jump-pagination.js +5 -3
- package/dist/components/jump-pagination.js.map +1 -1
- package/dist/esm/jump-design-system.js +1 -1
- package/dist/esm/jump-pagination.entry.js +4 -3
- package/dist/esm/jump-pagination.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
- package/dist/jump-design-system/p-ddb6c98c.entry.js +2 -0
- package/dist/jump-design-system/p-ddb6c98c.entry.js.map +1 -0
- package/dist/jump-design-system-elements.json +4 -0
- package/dist/types/components/jump-pagination/jump-pagination-pages.stories.d.ts +5 -0
- package/dist/types/components/jump-pagination/jump-pagination-products.stories.d.ts +5 -0
- package/dist/types/components/jump-pagination/jump-pagination.d.ts +1 -0
- package/dist/types/components.d.ts +2 -0
- package/package.json +1 -1
- package/readme.md +1 -1
- package/dist/jump-design-system/p-8ec7e589.entry.js +0 -2
- package/dist/jump-design-system/p-8ec7e589.entry.js.map +0 -1
|
@@ -19,7 +19,7 @@ const patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-badge.cjs",[[0,"jump-badge",{"label":[513],"variant":[513]}]]],["jump-button.cjs",[[4,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[516],"dark":[516],"shadow":[516],"border":[516],"borderRadius":[516,"border-radius"],"topBorderContentRadius":[516,"top-border-content-radius"],"boxed":[516],"roundedMedia":[516,"rounded-media"],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"],"videoSrc":[513,"video-src"]}]]],["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
|
|
22
|
+
return index.bootstrapLazy([["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"pagLabel":[513,"pag-label"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-badge.cjs",[[0,"jump-badge",{"label":[513],"variant":[513]}]]],["jump-button.cjs",[[4,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[516],"dark":[516],"shadow":[516],"border":[516],"borderRadius":[516,"border-radius"],"topBorderContentRadius":[516,"top-border-content-radius"],"boxed":[516],"roundedMedia":[516,"rounded-media"],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"],"videoSrc":[513,"video-src"]}]]],["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -11,6 +11,7 @@ const JumpPagination = class {
|
|
|
11
11
|
constructor(hostRef) {
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
this.totalElements = undefined;
|
|
14
|
+
this.pagLabel = 'di';
|
|
14
15
|
this.currentPage = undefined;
|
|
15
16
|
this.lastPage = undefined;
|
|
16
17
|
this.labelElementsPerPage = 'Elementi per pagina';
|
|
@@ -21,11 +22,11 @@ const JumpPagination = class {
|
|
|
21
22
|
}
|
|
22
23
|
render() {
|
|
23
24
|
var _a;
|
|
24
|
-
return (index.h(index.Host, { key: '
|
|
25
|
-
index.h("div", { class: "elementsPerPage" }, index.h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), index.h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (index.h("option", { value: range }, range))))), index.h("div", { key: '
|
|
25
|
+
return (index.h(index.Host, { key: '97d153323192675905ef7efc310edd9544917194', class: "JumpPagination" }, index.h("div", { key: '706326dbd689f2250863df55db66a868deb98465', class: "JumpPagination__Wrapper" }, this.completeVersion &&
|
|
26
|
+
index.h("div", { class: "elementsPerPage" }, index.h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), index.h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (index.h("option", { value: range }, range))))), index.h("div", { key: 'ba6b84fcfc0cb4d2f0f52767f2be99386a6f004c', class: "indicators" }, index.h("div", { key: 'b0786315ca18db1608bd07c5658ec37ae9931802', class: "elements" }, this.completeVersion ?
|
|
26
27
|
index.h("span", null, index.h("span", null, this.firstPage), " - ", index.h("span", null, this.currentPage), " di ", index.h("span", null, this.totalElements))
|
|
27
28
|
:
|
|
28
|
-
index.h("span", null, index.h("span", null, this.currentPage), " di ", index.h("span", null, this.lastPage))), index.h("div", { key: '
|
|
29
|
+
index.h("span", null, index.h("span", null, this.currentPage), " di ", index.h("span", null, this.lastPage))), index.h("div", { key: '93343a7729d7bbd8512d65bc1877041c25f77cdf', class: "arrow" }, this.showAdditionalChrevrons && index.h("jump-icon", { id: "first-page", name: "chevrons-left" }), index.h("jump-icon", { key: 'ed735fb41710b632485cc9a24151590842fbdc48', id: "prev-page", name: "chevron-left" }), index.h("jump-icon", { key: 'fffdbf1d84cee94bf0d2ab561cb36d4de82cc763', id: "next-page", name: "chevron-right" }), this.showAdditionalChrevrons && index.h("jump-icon", { id: "last-page", name: "chevrons-right" }))))));
|
|
29
30
|
}
|
|
30
31
|
};
|
|
31
32
|
JumpPagination.style = JumpPaginationStyle0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-pagination.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,o1BAAo1B,CAAC;AAC/2B,6BAAe,iBAAiB;;MCMnB,cAAc
|
|
1
|
+
{"file":"jump-pagination.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,o1BAAo1B,CAAC;AAC/2B,6BAAe,iBAAiB;;MCMnB,cAAc;;;;wBAMiB,IAAI;;;oCAWU,qBAAqB;8BAKpB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;;+BAUtB,KAAK;uCAEG,KAAK;;IAEjE,MAAM;;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC1BD,kEAAK,KAAK,EAAC,yBAAyB,IAChC,IAAI,CAAC,eAAe;YACpBA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,mBAAO,OAAO,EAAC,UAAU,IAAE,MAAA,IAAI,CAAC,oBAAoB,mCAAI,mBAAmB,CAAS,EAChFA,oBAAQ,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,IAClC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,MAC7BA,oBAAQ,KAAK,EAAE,KAAK,IAAG,KAAK,CAAU,CACvC,CAAC,CACK,CACT,EAERA,kEAAK,KAAK,EAAC,YAAY,IACrBA,kEAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,eAAe;YACnBA,sBACEA,sBAAO,IAAI,CAAC,SAAS,CAAQ,SAAGA,sBAAO,IAAI,CAAC,WAAW,CAAQ,UAAIA,sBAAO,IAAI,CAAC,aAAa,CAAQ,CAC/F;;gBAGPA,sBACEA,sBAAO,IAAI,CAAC,WAAW,CAAQ,UAAIA,sBAAO,IAAI,CAAC,QAAQ,CAAQ,CAC1D,CAEL,EACNA,kEAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,uBAAuB,IAAIA,uBAAW,EAAE,EAAC,YAAY,EAAC,IAAI,EAAC,eAAe,GAAa,EAC7FA,wEAAW,EAAE,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,GAAa,EAC1DA,wEAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,eAAe,GAAa,EAC3D,IAAI,CAAC,uBAAuB,IAAIA,uBAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,gBAAgB,GAAa,CAC1F,CACF,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPagination {\n --pagination-label-color: var(--neutral-grey-secondary);\n --pagination-arrows-color: var(--neutral-grey-secondary);\n \n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n\n .elementsPerPage {\n display: flex;\n gap: 1rem;\n align-items: center;\n\n label {\n color: var(--pagination-label-color);\n font-size: 14px;\n font-weight: normal;\n }\n } \n \n .indicators {\n font-size: 16px;\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--pagination-label-color);\n\n .arrow {\n color: var(--pagination-arrows-color);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .elements {\n color: var(--pagination-label-color);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n \n }\n \n}","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination',\n styleUrl: 'jump-pagination.scss',\n shadow: false,\n})\nexport class JumpPagination {\n \n /* ---------------------- @PROPERTIES ------------------------- */\n\n @Prop({ reflect: true }) totalElements: number;\n\n @Prop({reflect: true}) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n /**\n * \n */\n @Prop({ reflect: true }) currentPage: number;\n @Prop({ reflect: true }) lastPage: number; \n\n /**\n * Label for the elements per page select\n */\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /**\n * Values for the elements per page select\n */\n @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n /**\n * Indicates the first page/product of the list\n */\n @Prop({ reflect: true }) firstPage: number;\n\n /**\n * If true, the component will show the complete version of the pagination, with elements informations\n */\n @Prop({ reflect: true }) completeVersion: boolean = false;\n\n @Prop({ reflect: true }) showAdditionalChrevrons: boolean = false;\n\n render() {\n return (\n <Host class=\"JumpPagination\">\n <div class=\"JumpPagination__Wrapper\">\n { this.completeVersion && \n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\">\n {this.elementsRanges.map((range) => (\n <option value={range}>{range}</option>\n ))}\n </select>\n </div> \n }\n <div class=\"indicators\"> \n <div class=\"elements\">\n {this.completeVersion ?\n <span>\n <span>{this.firstPage}</span> - <span>{this.currentPage}</span> di <span>{this.totalElements}</span>\n </span>\n \n :\n <span>\n <span>{this.currentPage}</span> di <span>{this.lastPage}</span>\n </span>\n }\n </div>\n <div class=\"arrow\">\n {this.showAdditionalChrevrons && <jump-icon id=\"first-page\" name=\"chevrons-left\"></jump-icon>}\n <jump-icon id=\"prev-page\" name=\"chevron-left\"></jump-icon>\n <jump-icon id=\"next-page\" name=\"chevron-right\"></jump-icon>\n {this.showAdditionalChrevrons && <jump-icon id=\"last-page\" name=\"chevrons-right\"></jump-icon>}\n </div> \n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-badge.cjs",[[0,"jump-badge",{"label":[513],"variant":[513]}]]],["jump-button.cjs",[[4,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[516],"dark":[516],"shadow":[516],"border":[516],"borderRadius":[516,"border-radius"],"topBorderContentRadius":[516,"top-border-content-radius"],"boxed":[516],"roundedMedia":[516,"rounded-media"],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"],"videoSrc":[513,"video-src"]}]]],["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
|
|
11
|
+
return index.bootstrapLazy([["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"pagLabel":[513,"pag-label"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-badge.cjs",[[0,"jump-badge",{"label":[513],"variant":[513]}]]],["jump-button.cjs",[[4,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[516],"dark":[516],"shadow":[516],"border":[516],"borderRadius":[516,"border-radius"],"topBorderContentRadius":[516,"top-border-content-radius"],"boxed":[516],"roundedMedia":[516,"rounded-media"],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"],"videoSrc":[513,"video-src"]}]]],["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -2,6 +2,11 @@ export default {
|
|
|
2
2
|
title: 'Components/Pagination/Pages',
|
|
3
3
|
tags: ['autodocs'],
|
|
4
4
|
argTypes: {
|
|
5
|
+
pagLabel: {
|
|
6
|
+
name: "Dicitura di paginazione",
|
|
7
|
+
control: 'text',
|
|
8
|
+
description: 'Indica la dicitura di paginazione. Di default è "di".'
|
|
9
|
+
},
|
|
5
10
|
completeVersion: {
|
|
6
11
|
name: 'Versione con selezione di prodotti',
|
|
7
12
|
control: 'boolean',
|
|
@@ -72,6 +77,7 @@ const Template = (args) => {
|
|
|
72
77
|
total-elements="${args.totalElements}"
|
|
73
78
|
complete-version=${args.completeVersion}
|
|
74
79
|
elements-ranges="${args.elementsRanges}"
|
|
80
|
+
pag-label="${args.pagLabel}"
|
|
75
81
|
show-additional-chrevrons=${args.showAdditionalChrevrons}>
|
|
76
82
|
</jump-pagination>`;
|
|
77
83
|
};
|
|
@@ -82,6 +88,7 @@ PaginationPerPagineRidotto.args = {
|
|
|
82
88
|
firstPage: 1,
|
|
83
89
|
currentPage: 5,
|
|
84
90
|
lastPage: 10,
|
|
91
|
+
pagLabel: 'di'
|
|
85
92
|
};
|
|
86
93
|
export const PaginationPerPagineCompleto = Template.bind({});
|
|
87
94
|
PaginationPerPagineCompleto.args = {
|
|
@@ -90,5 +97,6 @@ PaginationPerPagineCompleto.args = {
|
|
|
90
97
|
firstPage: 1,
|
|
91
98
|
currentPage: 5,
|
|
92
99
|
lastPage: 10,
|
|
100
|
+
pagLabel: 'di'
|
|
93
101
|
};
|
|
94
102
|
//# sourceMappingURL=jump-pagination-pages.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-pagination-pages.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination-pages.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,eAAe,EAAE;YACf,IAAI,EAAE,oCAAoC;YAC1C,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0DAA0D;SACxE;QACD,uBAAuB,EAAE;YACvB,IAAI,EAAE,0BAA0B;YAChC,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6IAA6I;SAC3J;QACD,SAAS,EAAE;YACT,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,gHAAgH;YAC7H,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,WAAW,EAAE;YACX,IAAI,EAAE,mBAAmB;YACzB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mHAAmH;SACjI;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;YACpC,EAAE,EAAE;gBACJ,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,KAAK;aACV;SACF;QACD,aAAa,EAAE;YACb,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mDAAmD;YAChE,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,oBAAoB,EAAE;YACpB,IAAI,EAAE,+BAA+B;YACrC,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iDAAiD;YAC5D,EAAE,EAAE;gBACJ,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,cAAc,EAAE;YACd,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;YACrB,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;KAIF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,OAAO;8BACqB,IAAI,CAAC,WAAW;4BAClB,IAAI,CAAC,SAAS;2BACf,IAAI,CAAC,QAAQ;gCACR,IAAI,CAAC,aAAa;iCACjB,IAAI,CAAC,eAAe;iCACpB,IAAI,CAAC,cAAc;
|
|
1
|
+
{"version":3,"file":"jump-pagination-pages.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination-pages.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAC;YACP,IAAI,EAAE,yBAAyB;YAC/B,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;SACrE;QACD,eAAe,EAAE;YACf,IAAI,EAAE,oCAAoC;YAC1C,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0DAA0D;SACxE;QACD,uBAAuB,EAAE;YACvB,IAAI,EAAE,0BAA0B;YAChC,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6IAA6I;SAC3J;QACD,SAAS,EAAE;YACT,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,gHAAgH;YAC7H,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,WAAW,EAAE;YACX,IAAI,EAAE,mBAAmB;YACzB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mHAAmH;SACjI;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;YACpC,EAAE,EAAE;gBACJ,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,KAAK;aACV;SACF;QACD,aAAa,EAAE;YACb,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mDAAmD;YAChE,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,oBAAoB,EAAE;YACpB,IAAI,EAAE,+BAA+B;YACrC,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iDAAiD;YAC5D,EAAE,EAAE;gBACJ,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,cAAc,EAAE;YACd,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;YACrB,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;KAIF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,OAAO;8BACqB,IAAI,CAAC,WAAW;4BAClB,IAAI,CAAC,SAAS;2BACf,IAAI,CAAC,QAAQ;gCACR,IAAI,CAAC,aAAa;iCACjB,IAAI,CAAC,eAAe;iCACpB,IAAI,CAAC,cAAc;2BACzB,IAAI,CAAC,QAAQ;0CACE,IAAI,CAAC,uBAAuB;6BACzC,CAAC;AAC9B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5D,0BAA0B,CAAC,IAAI,GAAG;IAChC,eAAe,EAAE,KAAK;IACtB,uBAAuB,EAAE,KAAK;IAC9B,SAAS,EAAE,CAAC;IACZ,WAAW,EAAE,CAAC;IACd,QAAQ,EAAC,EAAE;IACX,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE7D,2BAA2B,CAAC,IAAI,GAAG;IACjC,eAAe,EAAE,KAAK;IACtB,uBAAuB,EAAE,IAAI;IAC7B,SAAS,EAAE,CAAC;IACZ,WAAW,EAAE,CAAC;IACd,QAAQ,EAAC,EAAE;IACX,QAAQ,EAAE,IAAI;CACf,CAAC","sourcesContent":["export default {\n title: 'Components/Pagination/Pages',\n tags: ['autodocs'],\n argTypes: {\n pagLabel:{\n name: \"Dicitura di paginazione\",\n control: 'text',\n description: 'Indica la dicitura di paginazione. Di default è \"di\".'\n },\n completeVersion: {\n name: 'Versione con selezione di prodotti',\n control: 'boolean',\n description: 'Indica se mostrare la versione con selezione di prodotti'\n },\n showAdditionalChrevrons: {\n name: 'Mostra frecce aggiuntive',\n control: 'boolean',\n description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'\n },\n firstPage: {\n name: 'Primo elemento',\n control: 'number',\n description: 'Se si tratta di pagination per prodotti, indica il valore min di range di prodotto, altrimenti la prima pagina',\n if: {\n arg: 'completeVersion',\n eq: true\n },\n },\n currentPage: {\n name: 'Elemento Corrente',\n control: 'number',\n description: 'Se si tratta di pagination per prodotti, indica il valore max di range di prodotto, altrimenti la pagina corrente'\n },\n lastPage: {\n name: 'Ultima pagina',\n control: 'number',\n description: 'Indica l\\'ultima pagina',\n if: {\n arg: 'completeVersion',\n eq: false\n },\n },\n totalElements: {\n name: 'Elementi totali',\n control: 'number',\n description: 'Indica il numero totale di elementi disponibili. ',\n if: {\n arg: 'completeVersion',\n eq: true\n },\n },\n labelElementsPerPage: {\n name: 'Etichetta elementi per pagina',\n control: 'text',\n description: 'Indica l\\'etichetta per gli elementi per pagina',\n if: {\n arg: 'completeVersion',\n eq: true\n },\n },\n elementsRanges: {\n name: 'Range elementi',\n control: 'multi-select', \n options: [10, 20, 30],\n if: {\n arg: 'completeVersion',\n eq: true\n }, \n },\n\n \n \n }\n};\n\nconst Template = (args) => {\n return `<jump-pagination \n current-page=\"${args.currentPage}\" \n first-page=\"${args.firstPage}\" \n last-page=\"${args.lastPage}\" \n total-elements=\"${args.totalElements}\"\n complete-version=${args.completeVersion} \n elements-ranges=\"${args.elementsRanges}\"\n pag-label=\"${args.pagLabel}\"\n show-additional-chrevrons=${args.showAdditionalChrevrons}>\n </jump-pagination>`;\n};\n\nexport const PaginationPerPagineRidotto = Template.bind({});\n\nPaginationPerPagineRidotto.args = {\n completeVersion: false,\n showAdditionalChrevrons: false,\n firstPage: 1,\n currentPage: 5,\n lastPage:10,\n pagLabel: 'di'\n};\n\nexport const PaginationPerPagineCompleto = Template.bind({});\n\nPaginationPerPagineCompleto.args = {\n completeVersion: false,\n showAdditionalChrevrons: true,\n firstPage: 1,\n currentPage: 5,\n lastPage:10,\n pagLabel: 'di'\n};\n"]}
|
|
@@ -2,6 +2,11 @@ export default {
|
|
|
2
2
|
title: 'Components/Pagination/Products',
|
|
3
3
|
tags: ['autodocs'],
|
|
4
4
|
argTypes: {
|
|
5
|
+
pagLabel: {
|
|
6
|
+
name: "Dicitura di paginazione",
|
|
7
|
+
control: 'text',
|
|
8
|
+
description: 'Indica la dicitura di paginazione. Di default è "di".'
|
|
9
|
+
},
|
|
5
10
|
completeVersion: {
|
|
6
11
|
name: 'Versione con selezione di prodotti',
|
|
7
12
|
control: 'boolean',
|
|
@@ -72,6 +77,7 @@ const Template = (args) => {
|
|
|
72
77
|
total-elements="${args.totalElements}"
|
|
73
78
|
complete-version=${args.completeVersion}
|
|
74
79
|
elements-ranges="${args.elementsRanges}"
|
|
80
|
+
pag-label="${args.pagLabel}"
|
|
75
81
|
show-additional-chrevrons=${args.showAdditionalChrevrons}>
|
|
76
82
|
</jump-pagination>`;
|
|
77
83
|
};
|
|
@@ -85,6 +91,7 @@ PaginationPerProdottiRidotto.args = {
|
|
|
85
91
|
totalElements: 150,
|
|
86
92
|
labelElementsPerPage: "Elementi per pagina",
|
|
87
93
|
elementsRanges: [10, 20, 60, 100],
|
|
94
|
+
pagLabel: 'di'
|
|
88
95
|
};
|
|
89
96
|
export const PaginationPerProdottiCompleto = Template.bind({});
|
|
90
97
|
PaginationPerProdottiCompleto.args = {
|
|
@@ -96,8 +103,8 @@ PaginationPerProdottiCompleto.args = {
|
|
|
96
103
|
totalElements: 150,
|
|
97
104
|
labelElementsPerPage: "Elementi per pagina",
|
|
98
105
|
elementsRanges: [10, 20, 60, 100],
|
|
106
|
+
pagLabel: 'di'
|
|
99
107
|
};
|
|
100
|
-
// export const PaginationPerPagineRidotto = Template.bind({});
|
|
101
108
|
// PaginationPerPagineRidotto.args = {
|
|
102
109
|
// completeVersion: false,
|
|
103
110
|
// showAdditionalChrevrons: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-pagination-products.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination-products.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,gCAAgC;IACvC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,eAAe,EAAE;YACf,IAAI,EAAE,oCAAoC;YAC1C,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0DAA0D;SACxE;QACD,uBAAuB,EAAE;YACvB,IAAI,EAAE,0BAA0B;YAChC,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6IAA6I;SAC3J;QACD,SAAS,EAAE;YACT,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,gHAAgH;YAC7H,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,WAAW,EAAE;YACX,IAAI,EAAE,mBAAmB;YACzB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mHAAmH;SACjI;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;YACpC,EAAE,EAAE;gBACJ,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,KAAK;aACV;SACF;QACD,aAAa,EAAE;YACb,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mDAAmD;YAChE,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,oBAAoB,EAAE;YACpB,IAAI,EAAE,+BAA+B;YACrC,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iDAAiD;YAC5D,EAAE,EAAE;gBACJ,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,cAAc,EAAE;YACd,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;YACrB,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;KAIF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,OAAO;8BACqB,IAAI,CAAC,WAAW;4BAClB,IAAI,CAAC,SAAS;2BACf,IAAI,CAAC,QAAQ;gCACR,IAAI,CAAC,aAAa;iCACjB,IAAI,CAAC,eAAe;iCACpB,IAAI,CAAC,cAAc;
|
|
1
|
+
{"version":3,"file":"jump-pagination-products.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination-products.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,gCAAgC;IACvC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAC;YACP,IAAI,EAAE,yBAAyB;YAC/B,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;SACrE;QACD,eAAe,EAAE;YACf,IAAI,EAAE,oCAAoC;YAC1C,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0DAA0D;SACxE;QACD,uBAAuB,EAAE;YACvB,IAAI,EAAE,0BAA0B;YAChC,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6IAA6I;SAC3J;QACD,SAAS,EAAE;YACT,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,gHAAgH;YAC7H,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,WAAW,EAAE;YACX,IAAI,EAAE,mBAAmB;YACzB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mHAAmH;SACjI;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;YACpC,EAAE,EAAE;gBACJ,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,KAAK;aACV;SACF;QACD,aAAa,EAAE;YACb,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mDAAmD;YAChE,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,oBAAoB,EAAE;YACpB,IAAI,EAAE,+BAA+B;YACrC,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iDAAiD;YAC5D,EAAE,EAAE;gBACJ,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,cAAc,EAAE;YACd,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;YACrB,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;KAIF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,OAAO;8BACqB,IAAI,CAAC,WAAW;4BAClB,IAAI,CAAC,SAAS;2BACf,IAAI,CAAC,QAAQ;gCACR,IAAI,CAAC,aAAa;iCACjB,IAAI,CAAC,eAAe;iCACpB,IAAI,CAAC,cAAc;2BACzB,IAAI,CAAC,QAAQ;0CACE,IAAI,CAAC,uBAAuB;6BACzC,CAAC;AAC9B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE9D,4BAA4B,CAAC,IAAI,GAAG;IAClC,eAAe,EAAE,IAAI;IACrB,uBAAuB,EAAE,KAAK;IAC9B,SAAS,EAAE,CAAC;IACZ,WAAW,EAAE,CAAC;IACd,QAAQ,EAAC,EAAE;IACX,aAAa,EAAE,GAAG;IAClB,oBAAoB,EAAE,qBAAqB;IAC3C,cAAc,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;IACjC,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/D,6BAA6B,CAAC,IAAI,GAAG;IACnC,eAAe,EAAE,IAAI;IACrB,uBAAuB,EAAE,IAAI;IAC7B,SAAS,EAAE,CAAC;IACZ,WAAW,EAAE,CAAC;IACd,QAAQ,EAAC,EAAE;IACX,aAAa,EAAE,GAAG;IAClB,oBAAoB,EAAE,qBAAqB;IAC3C,cAAc,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;IACjC,QAAQ,EAAE,IAAI;CACf,CAAC;AAGF,sCAAsC;AACtC,4BAA4B;AAC5B,oCAAoC;AACpC,kBAAkB;AAClB,oBAAoB;AACpB,iBAAiB;AACjB,KAAK;AAEL,gEAAgE;AAEhE,uCAAuC;AACvC,4BAA4B;AAC5B,mCAAmC;AACnC,kBAAkB;AAClB,oBAAoB;AACpB,iBAAiB;AACjB,KAAK","sourcesContent":["export default {\n title: 'Components/Pagination/Products',\n tags: ['autodocs'],\n argTypes: {\n pagLabel:{\n name: \"Dicitura di paginazione\",\n control: 'text',\n description: 'Indica la dicitura di paginazione. Di default è \"di\".'\n },\n completeVersion: {\n name: 'Versione con selezione di prodotti',\n control: 'boolean',\n description: 'Indica se mostrare la versione con selezione di prodotti'\n },\n showAdditionalChrevrons: {\n name: 'Mostra frecce aggiuntive',\n control: 'boolean',\n description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'\n },\n firstPage: {\n name: 'Primo elemento',\n control: 'number',\n description: 'Se si tratta di pagination per prodotti, indica il valore min di range di prodotto, altrimenti la prima pagina',\n if: {\n arg: 'completeVersion',\n eq: true\n },\n },\n currentPage: {\n name: 'Elemento Corrente',\n control: 'number',\n description: 'Se si tratta di pagination per prodotti, indica il valore max di range di prodotto, altrimenti la pagina corrente'\n },\n lastPage: {\n name: 'Ultima pagina',\n control: 'number',\n description: 'Indica l\\'ultima pagina',\n if: {\n arg: 'completeVersion',\n eq: false\n },\n },\n totalElements: {\n name: 'Elementi totali',\n control: 'number',\n description: 'Indica il numero totale di elementi disponibili. ',\n if: {\n arg: 'completeVersion',\n eq: true\n },\n },\n labelElementsPerPage: {\n name: 'Etichetta elementi per pagina',\n control: 'text',\n description: 'Indica l\\'etichetta per gli elementi per pagina',\n if: {\n arg: 'completeVersion',\n eq: true\n },\n },\n elementsRanges: {\n name: 'Range elementi',\n control: 'multi-select', \n options: [10, 20, 30],\n if: {\n arg: 'completeVersion',\n eq: true\n }, \n },\n\n \n \n }\n};\n\nconst Template = (args) => {\n return `<jump-pagination \n current-page=\"${args.currentPage}\" \n first-page=\"${args.firstPage}\" \n last-page=\"${args.lastPage}\" \n total-elements=\"${args.totalElements}\"\n complete-version=${args.completeVersion} \n elements-ranges=\"${args.elementsRanges}\"\n pag-label=\"${args.pagLabel}\"\n show-additional-chrevrons=${args.showAdditionalChrevrons}>\n </jump-pagination>`;\n};\n\nexport const PaginationPerProdottiRidotto = Template.bind({});\n\nPaginationPerProdottiRidotto.args = {\n completeVersion: true,\n showAdditionalChrevrons: false,\n firstPage: 1,\n currentPage: 1,\n lastPage:20,\n totalElements: 150,\n labelElementsPerPage: \"Elementi per pagina\",\n elementsRanges: [10, 20, 60, 100],\n pagLabel: 'di'\n};\n\nexport const PaginationPerProdottiCompleto = Template.bind({});\n\nPaginationPerProdottiCompleto.args = {\n completeVersion: true,\n showAdditionalChrevrons: true,\n firstPage: 1,\n currentPage: 1,\n lastPage:20,\n totalElements: 150,\n labelElementsPerPage: \"Elementi per pagina\",\n elementsRanges: [10, 20, 60, 100],\n pagLabel: 'di'\n};\n\n\n// PaginationPerPagineRidotto.args = {\n// completeVersion: false,\n// showAdditionalChrevrons: false,\n// firstPage: 1,\n// currentPage: 5,\n// lastPage:10,\n// };\n\n// export const PaginationPerPagineCompleto = Template.bind({});\n\n// PaginationPerPagineCompleto.args = {\n// completeVersion: false,\n// showAdditionalChrevrons: true,\n// firstPage: 1,\n// currentPage: 5,\n// lastPage:10,\n// };\n"]}
|
|
@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
|
|
|
2
2
|
export class JumpPagination {
|
|
3
3
|
constructor() {
|
|
4
4
|
this.totalElements = undefined;
|
|
5
|
+
this.pagLabel = 'di';
|
|
5
6
|
this.currentPage = undefined;
|
|
6
7
|
this.lastPage = undefined;
|
|
7
8
|
this.labelElementsPerPage = 'Elementi per pagina';
|
|
@@ -12,11 +13,11 @@ export class JumpPagination {
|
|
|
12
13
|
}
|
|
13
14
|
render() {
|
|
14
15
|
var _a;
|
|
15
|
-
return (h(Host, { key: '
|
|
16
|
-
h("div", { class: "elementsPerPage" }, h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (h("option", { value: range }, range))))), h("div", { key: '
|
|
16
|
+
return (h(Host, { key: '97d153323192675905ef7efc310edd9544917194', class: "JumpPagination" }, h("div", { key: '706326dbd689f2250863df55db66a868deb98465', class: "JumpPagination__Wrapper" }, this.completeVersion &&
|
|
17
|
+
h("div", { class: "elementsPerPage" }, h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (h("option", { value: range }, range))))), h("div", { key: 'ba6b84fcfc0cb4d2f0f52767f2be99386a6f004c', class: "indicators" }, h("div", { key: 'b0786315ca18db1608bd07c5658ec37ae9931802', class: "elements" }, this.completeVersion ?
|
|
17
18
|
h("span", null, h("span", null, this.firstPage), " - ", h("span", null, this.currentPage), " di ", h("span", null, this.totalElements))
|
|
18
19
|
:
|
|
19
|
-
h("span", null, h("span", null, this.currentPage), " di ", h("span", null, this.lastPage))), h("div", { key: '
|
|
20
|
+
h("span", null, h("span", null, this.currentPage), " di ", h("span", null, this.lastPage))), h("div", { key: '93343a7729d7bbd8512d65bc1877041c25f77cdf', class: "arrow" }, this.showAdditionalChrevrons && h("jump-icon", { id: "first-page", name: "chevrons-left" }), h("jump-icon", { key: 'ed735fb41710b632485cc9a24151590842fbdc48', id: "prev-page", name: "chevron-left" }), h("jump-icon", { key: 'fffdbf1d84cee94bf0d2ab561cb36d4de82cc763', id: "next-page", name: "chevron-right" }), this.showAdditionalChrevrons && h("jump-icon", { id: "last-page", name: "chevrons-right" }))))));
|
|
20
21
|
}
|
|
21
22
|
static get is() { return "jump-pagination"; }
|
|
22
23
|
static get originalStyleUrls() {
|
|
@@ -48,6 +49,24 @@ export class JumpPagination {
|
|
|
48
49
|
"attribute": "total-elements",
|
|
49
50
|
"reflect": true
|
|
50
51
|
},
|
|
52
|
+
"pagLabel": {
|
|
53
|
+
"type": "string",
|
|
54
|
+
"mutable": false,
|
|
55
|
+
"complexType": {
|
|
56
|
+
"original": "string",
|
|
57
|
+
"resolved": "string",
|
|
58
|
+
"references": {}
|
|
59
|
+
},
|
|
60
|
+
"required": false,
|
|
61
|
+
"optional": false,
|
|
62
|
+
"docs": {
|
|
63
|
+
"tags": [],
|
|
64
|
+
"text": ""
|
|
65
|
+
},
|
|
66
|
+
"attribute": "pag-label",
|
|
67
|
+
"reflect": true,
|
|
68
|
+
"defaultValue": "'di'"
|
|
69
|
+
},
|
|
51
70
|
"currentPage": {
|
|
52
71
|
"type": "number",
|
|
53
72
|
"mutable": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-pagination.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,cAAc
|
|
1
|
+
{"version":3,"file":"jump-pagination.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,cAAc;;;wBAMiB,IAAI;;;oCAWU,qBAAqB;8BAKpB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;;+BAUtB,KAAK;uCAEG,KAAK;;IAEjE,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB;YAC1B,4DAAK,KAAK,EAAC,yBAAyB;gBAChC,IAAI,CAAC,eAAe;oBACpB,WAAK,KAAK,EAAC,iBAAiB;wBAC1B,aAAO,OAAO,EAAC,UAAU,IAAE,MAAA,IAAI,CAAC,oBAAoB,mCAAI,mBAAmB,CAAS;wBAChF,cAAQ,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,IAClC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAClC,cAAQ,KAAK,EAAE,KAAK,IAAG,KAAK,CAAU,CACvC,CAAC,CACK,CACT;gBAER,4DAAK,KAAK,EAAC,YAAY;oBACrB,4DAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,eAAe,CAAC,CAAC;wBACrB;4BACE,gBAAO,IAAI,CAAC,SAAS,CAAQ;;4BAAG,gBAAO,IAAI,CAAC,WAAW,CAAQ;;4BAAI,gBAAO,IAAI,CAAC,aAAa,CAAQ,CAC/F;wBAET,CAAC;4BACC;gCACE,gBAAO,IAAI,CAAC,WAAW,CAAQ;;gCAAI,gBAAO,IAAI,CAAC,QAAQ,CAAQ,CAC1D,CAEL;oBACN,4DAAK,KAAK,EAAC,OAAO;wBACf,IAAI,CAAC,uBAAuB,IAAI,iBAAW,EAAE,EAAC,YAAY,EAAC,IAAI,EAAC,eAAe,GAAa;wBAC7F,kEAAW,EAAE,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,GAAa;wBAC1D,kEAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,eAAe,GAAa;wBAC3D,IAAI,CAAC,uBAAuB,IAAI,iBAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,gBAAgB,GAAa,CAC1F,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination',\n styleUrl: 'jump-pagination.scss',\n shadow: false,\n})\nexport class JumpPagination {\n \n /* ---------------------- @PROPERTIES ------------------------- */\n\n @Prop({ reflect: true }) totalElements: number;\n\n @Prop({reflect: true}) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n /**\n * \n */\n @Prop({ reflect: true }) currentPage: number;\n @Prop({ reflect: true }) lastPage: number; \n\n /**\n * Label for the elements per page select\n */\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /**\n * Values for the elements per page select\n */\n @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n /**\n * Indicates the first page/product of the list\n */\n @Prop({ reflect: true }) firstPage: number;\n\n /**\n * If true, the component will show the complete version of the pagination, with elements informations\n */\n @Prop({ reflect: true }) completeVersion: boolean = false;\n\n @Prop({ reflect: true }) showAdditionalChrevrons: boolean = false;\n\n render() {\n return (\n <Host class=\"JumpPagination\">\n <div class=\"JumpPagination__Wrapper\">\n { this.completeVersion && \n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\">\n {this.elementsRanges.map((range) => (\n <option value={range}>{range}</option>\n ))}\n </select>\n </div> \n }\n <div class=\"indicators\"> \n <div class=\"elements\">\n {this.completeVersion ?\n <span>\n <span>{this.firstPage}</span> - <span>{this.currentPage}</span> di <span>{this.totalElements}</span>\n </span>\n \n :\n <span>\n <span>{this.currentPage}</span> di <span>{this.lastPage}</span>\n </span>\n }\n </div>\n <div class=\"arrow\">\n {this.showAdditionalChrevrons && <jump-icon id=\"first-page\" name=\"chevrons-left\"></jump-icon>}\n <jump-icon id=\"prev-page\" name=\"chevron-left\"></jump-icon>\n <jump-icon id=\"next-page\" name=\"chevron-right\"></jump-icon>\n {this.showAdditionalChrevrons && <jump-icon id=\"last-page\" name=\"chevrons-right\"></jump-icon>}\n </div> \n </div>\n </div>\n </Host>\n );\n }\n\n}\n"]}
|
|
@@ -9,6 +9,7 @@ const JumpPagination$1 = /*@__PURE__*/ proxyCustomElement(class JumpPagination e
|
|
|
9
9
|
super();
|
|
10
10
|
this.__registerHost();
|
|
11
11
|
this.totalElements = undefined;
|
|
12
|
+
this.pagLabel = 'di';
|
|
12
13
|
this.currentPage = undefined;
|
|
13
14
|
this.lastPage = undefined;
|
|
14
15
|
this.labelElementsPerPage = 'Elementi per pagina';
|
|
@@ -19,15 +20,16 @@ const JumpPagination$1 = /*@__PURE__*/ proxyCustomElement(class JumpPagination e
|
|
|
19
20
|
}
|
|
20
21
|
render() {
|
|
21
22
|
var _a;
|
|
22
|
-
return (h(Host, { key: '
|
|
23
|
-
h("div", { class: "elementsPerPage" }, h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (h("option", { value: range }, range))))), h("div", { key: '
|
|
23
|
+
return (h(Host, { key: '97d153323192675905ef7efc310edd9544917194', class: "JumpPagination" }, h("div", { key: '706326dbd689f2250863df55db66a868deb98465', class: "JumpPagination__Wrapper" }, this.completeVersion &&
|
|
24
|
+
h("div", { class: "elementsPerPage" }, h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (h("option", { value: range }, range))))), h("div", { key: 'ba6b84fcfc0cb4d2f0f52767f2be99386a6f004c', class: "indicators" }, h("div", { key: 'b0786315ca18db1608bd07c5658ec37ae9931802', class: "elements" }, this.completeVersion ?
|
|
24
25
|
h("span", null, h("span", null, this.firstPage), " - ", h("span", null, this.currentPage), " di ", h("span", null, this.totalElements))
|
|
25
26
|
:
|
|
26
|
-
h("span", null, h("span", null, this.currentPage), " di ", h("span", null, this.lastPage))), h("div", { key: '
|
|
27
|
+
h("span", null, h("span", null, this.currentPage), " di ", h("span", null, this.lastPage))), h("div", { key: '93343a7729d7bbd8512d65bc1877041c25f77cdf', class: "arrow" }, this.showAdditionalChrevrons && h("jump-icon", { id: "first-page", name: "chevrons-left" }), h("jump-icon", { key: 'ed735fb41710b632485cc9a24151590842fbdc48', id: "prev-page", name: "chevron-left" }), h("jump-icon", { key: 'fffdbf1d84cee94bf0d2ab561cb36d4de82cc763', id: "next-page", name: "chevron-right" }), this.showAdditionalChrevrons && h("jump-icon", { id: "last-page", name: "chevrons-right" }))))));
|
|
27
28
|
}
|
|
28
29
|
static get style() { return JumpPaginationStyle0; }
|
|
29
30
|
}, [0, "jump-pagination", {
|
|
30
31
|
"totalElements": [514, "total-elements"],
|
|
32
|
+
"pagLabel": [513, "pag-label"],
|
|
31
33
|
"currentPage": [514, "current-page"],
|
|
32
34
|
"lastPage": [514, "last-page"],
|
|
33
35
|
"labelElementsPerPage": [513, "label-elements-per-page"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-pagination.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,o1BAAo1B,CAAC;AAC/2B,6BAAe,iBAAiB;;MCMnBA,gBAAc
|
|
1
|
+
{"file":"jump-pagination.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,o1BAAo1B,CAAC;AAC/2B,6BAAe,iBAAiB;;MCMnBA,gBAAc;;;;;wBAMiB,IAAI;;;oCAWU,qBAAqB;8BAKpB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;;+BAUtB,KAAK;uCAEG,KAAK;;IAEjE,MAAM;;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC1B,4DAAK,KAAK,EAAC,yBAAyB,IAChC,IAAI,CAAC,eAAe;YACpB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,aAAO,OAAO,EAAC,UAAU,IAAE,MAAA,IAAI,CAAC,oBAAoB,mCAAI,mBAAmB,CAAS,EAChF,cAAQ,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,IAClC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,MAC7B,cAAQ,KAAK,EAAE,KAAK,IAAG,KAAK,CAAU,CACvC,CAAC,CACK,CACT,EAER,4DAAK,KAAK,EAAC,YAAY,IACrB,4DAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,eAAe;YACnB,gBACE,gBAAO,IAAI,CAAC,SAAS,CAAQ,SAAG,gBAAO,IAAI,CAAC,WAAW,CAAQ,UAAI,gBAAO,IAAI,CAAC,aAAa,CAAQ,CAC/F;;gBAGP,gBACE,gBAAO,IAAI,CAAC,WAAW,CAAQ,UAAI,gBAAO,IAAI,CAAC,QAAQ,CAAQ,CAC1D,CAEL,EACN,4DAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,uBAAuB,IAAI,iBAAW,EAAE,EAAC,YAAY,EAAC,IAAI,EAAC,eAAe,GAAa,EAC7F,kEAAW,EAAE,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,GAAa,EAC1D,kEAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,eAAe,GAAa,EAC3D,IAAI,CAAC,uBAAuB,IAAI,iBAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,gBAAgB,GAAa,CAC1F,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpPagination"],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPagination {\n --pagination-label-color: var(--neutral-grey-secondary);\n --pagination-arrows-color: var(--neutral-grey-secondary);\n \n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n\n .elementsPerPage {\n display: flex;\n gap: 1rem;\n align-items: center;\n\n label {\n color: var(--pagination-label-color);\n font-size: 14px;\n font-weight: normal;\n }\n } \n \n .indicators {\n font-size: 16px;\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--pagination-label-color);\n\n .arrow {\n color: var(--pagination-arrows-color);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .elements {\n color: var(--pagination-label-color);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n \n }\n \n}","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination',\n styleUrl: 'jump-pagination.scss',\n shadow: false,\n})\nexport class JumpPagination {\n \n /* ---------------------- @PROPERTIES ------------------------- */\n\n @Prop({ reflect: true }) totalElements: number;\n\n @Prop({reflect: true}) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n /**\n * \n */\n @Prop({ reflect: true }) currentPage: number;\n @Prop({ reflect: true }) lastPage: number; \n\n /**\n * Label for the elements per page select\n */\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /**\n * Values for the elements per page select\n */\n @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n /**\n * Indicates the first page/product of the list\n */\n @Prop({ reflect: true }) firstPage: number;\n\n /**\n * If true, the component will show the complete version of the pagination, with elements informations\n */\n @Prop({ reflect: true }) completeVersion: boolean = false;\n\n @Prop({ reflect: true }) showAdditionalChrevrons: boolean = false;\n\n render() {\n return (\n <Host class=\"JumpPagination\">\n <div class=\"JumpPagination__Wrapper\">\n { this.completeVersion && \n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\">\n {this.elementsRanges.map((range) => (\n <option value={range}>{range}</option>\n ))}\n </select>\n </div> \n }\n <div class=\"indicators\"> \n <div class=\"elements\">\n {this.completeVersion ?\n <span>\n <span>{this.firstPage}</span> - <span>{this.currentPage}</span> di <span>{this.totalElements}</span>\n </span>\n \n :\n <span>\n <span>{this.currentPage}</span> di <span>{this.lastPage}</span>\n </span>\n }\n </div>\n <div class=\"arrow\">\n {this.showAdditionalChrevrons && <jump-icon id=\"first-page\" name=\"chevrons-left\"></jump-icon>}\n <jump-icon id=\"prev-page\" name=\"chevron-left\"></jump-icon>\n <jump-icon id=\"next-page\" name=\"chevron-right\"></jump-icon>\n {this.showAdditionalChrevrons && <jump-icon id=\"last-page\" name=\"chevrons-right\"></jump-icon>}\n </div> \n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -16,7 +16,7 @@ const patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["jump-pagination",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-badge",[[0,"jump-badge",{"label":[513],"variant":[513]}]]],["jump-button",[[4,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]],["jump-card",[[4,"jump-card",{"horizontal":[516],"dark":[516],"shadow":[516],"border":[516],"borderRadius":[516,"border-radius"],"topBorderContentRadius":[516,"top-border-content-radius"],"boxed":[516],"roundedMedia":[516,"rounded-media"],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"],"videoSrc":[513,"video-src"]}]]],["jump-icon",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
|
|
19
|
+
return bootstrapLazy([["jump-pagination",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"pagLabel":[513,"pag-label"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-badge",[[0,"jump-badge",{"label":[513],"variant":[513]}]]],["jump-button",[[4,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]],["jump-card",[[4,"jump-card",{"horizontal":[516],"dark":[516],"shadow":[516],"border":[516],"borderRadius":[516,"border-radius"],"topBorderContentRadius":[516,"top-border-content-radius"],"boxed":[516],"roundedMedia":[516,"rounded-media"],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"],"videoSrc":[513,"video-src"]}]]],["jump-icon",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
|
|
20
20
|
});
|
|
21
21
|
|
|
22
22
|
//# sourceMappingURL=jump-design-system.js.map
|
|
@@ -7,6 +7,7 @@ const JumpPagination = class {
|
|
|
7
7
|
constructor(hostRef) {
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
9
|
this.totalElements = undefined;
|
|
10
|
+
this.pagLabel = 'di';
|
|
10
11
|
this.currentPage = undefined;
|
|
11
12
|
this.lastPage = undefined;
|
|
12
13
|
this.labelElementsPerPage = 'Elementi per pagina';
|
|
@@ -17,11 +18,11 @@ const JumpPagination = class {
|
|
|
17
18
|
}
|
|
18
19
|
render() {
|
|
19
20
|
var _a;
|
|
20
|
-
return (h(Host, { key: '
|
|
21
|
-
h("div", { class: "elementsPerPage" }, h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (h("option", { value: range }, range))))), h("div", { key: '
|
|
21
|
+
return (h(Host, { key: '97d153323192675905ef7efc310edd9544917194', class: "JumpPagination" }, h("div", { key: '706326dbd689f2250863df55db66a868deb98465', class: "JumpPagination__Wrapper" }, this.completeVersion &&
|
|
22
|
+
h("div", { class: "elementsPerPage" }, h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (h("option", { value: range }, range))))), h("div", { key: 'ba6b84fcfc0cb4d2f0f52767f2be99386a6f004c', class: "indicators" }, h("div", { key: 'b0786315ca18db1608bd07c5658ec37ae9931802', class: "elements" }, this.completeVersion ?
|
|
22
23
|
h("span", null, h("span", null, this.firstPage), " - ", h("span", null, this.currentPage), " di ", h("span", null, this.totalElements))
|
|
23
24
|
:
|
|
24
|
-
h("span", null, h("span", null, this.currentPage), " di ", h("span", null, this.lastPage))), h("div", { key: '
|
|
25
|
+
h("span", null, h("span", null, this.currentPage), " di ", h("span", null, this.lastPage))), h("div", { key: '93343a7729d7bbd8512d65bc1877041c25f77cdf', class: "arrow" }, this.showAdditionalChrevrons && h("jump-icon", { id: "first-page", name: "chevrons-left" }), h("jump-icon", { key: 'ed735fb41710b632485cc9a24151590842fbdc48', id: "prev-page", name: "chevron-left" }), h("jump-icon", { key: 'fffdbf1d84cee94bf0d2ab561cb36d4de82cc763', id: "next-page", name: "chevron-right" }), this.showAdditionalChrevrons && h("jump-icon", { id: "last-page", name: "chevrons-right" }))))));
|
|
25
26
|
}
|
|
26
27
|
};
|
|
27
28
|
JumpPagination.style = JumpPaginationStyle0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-pagination.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,o1BAAo1B,CAAC;AAC/2B,6BAAe,iBAAiB;;MCMnB,cAAc
|
|
1
|
+
{"file":"jump-pagination.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,o1BAAo1B,CAAC;AAC/2B,6BAAe,iBAAiB;;MCMnB,cAAc;;;;wBAMiB,IAAI;;;oCAWU,qBAAqB;8BAKpB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;;+BAUtB,KAAK;uCAEG,KAAK;;IAEjE,MAAM;;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC1B,4DAAK,KAAK,EAAC,yBAAyB,IAChC,IAAI,CAAC,eAAe;YACpB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,aAAO,OAAO,EAAC,UAAU,IAAE,MAAA,IAAI,CAAC,oBAAoB,mCAAI,mBAAmB,CAAS,EAChF,cAAQ,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,IAClC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,MAC7B,cAAQ,KAAK,EAAE,KAAK,IAAG,KAAK,CAAU,CACvC,CAAC,CACK,CACT,EAER,4DAAK,KAAK,EAAC,YAAY,IACrB,4DAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,eAAe;YACnB,gBACE,gBAAO,IAAI,CAAC,SAAS,CAAQ,SAAG,gBAAO,IAAI,CAAC,WAAW,CAAQ,UAAI,gBAAO,IAAI,CAAC,aAAa,CAAQ,CAC/F;;gBAGP,gBACE,gBAAO,IAAI,CAAC,WAAW,CAAQ,UAAI,gBAAO,IAAI,CAAC,QAAQ,CAAQ,CAC1D,CAEL,EACN,4DAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,uBAAuB,IAAI,iBAAW,EAAE,EAAC,YAAY,EAAC,IAAI,EAAC,eAAe,GAAa,EAC7F,kEAAW,EAAE,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,GAAa,EAC1D,kEAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,eAAe,GAAa,EAC3D,IAAI,CAAC,uBAAuB,IAAI,iBAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,gBAAgB,GAAa,CAC1F,CACF,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPagination {\n --pagination-label-color: var(--neutral-grey-secondary);\n --pagination-arrows-color: var(--neutral-grey-secondary);\n \n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n\n .elementsPerPage {\n display: flex;\n gap: 1rem;\n align-items: center;\n\n label {\n color: var(--pagination-label-color);\n font-size: 14px;\n font-weight: normal;\n }\n } \n \n .indicators {\n font-size: 16px;\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--pagination-label-color);\n\n .arrow {\n color: var(--pagination-arrows-color);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .elements {\n color: var(--pagination-label-color);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n \n }\n \n}","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination',\n styleUrl: 'jump-pagination.scss',\n shadow: false,\n})\nexport class JumpPagination {\n \n /* ---------------------- @PROPERTIES ------------------------- */\n\n @Prop({ reflect: true }) totalElements: number;\n\n @Prop({reflect: true}) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n /**\n * \n */\n @Prop({ reflect: true }) currentPage: number;\n @Prop({ reflect: true }) lastPage: number; \n\n /**\n * Label for the elements per page select\n */\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /**\n * Values for the elements per page select\n */\n @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n /**\n * Indicates the first page/product of the list\n */\n @Prop({ reflect: true }) firstPage: number;\n\n /**\n * If true, the component will show the complete version of the pagination, with elements informations\n */\n @Prop({ reflect: true }) completeVersion: boolean = false;\n\n @Prop({ reflect: true }) showAdditionalChrevrons: boolean = false;\n\n render() {\n return (\n <Host class=\"JumpPagination\">\n <div class=\"JumpPagination__Wrapper\">\n { this.completeVersion && \n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\">\n {this.elementsRanges.map((range) => (\n <option value={range}>{range}</option>\n ))}\n </select>\n </div> \n }\n <div class=\"indicators\"> \n <div class=\"elements\">\n {this.completeVersion ?\n <span>\n <span>{this.firstPage}</span> - <span>{this.currentPage}</span> di <span>{this.totalElements}</span>\n </span>\n \n :\n <span>\n <span>{this.currentPage}</span> di <span>{this.lastPage}</span>\n </span>\n }\n </div>\n <div class=\"arrow\">\n {this.showAdditionalChrevrons && <jump-icon id=\"first-page\" name=\"chevrons-left\"></jump-icon>}\n <jump-icon id=\"prev-page\" name=\"chevron-left\"></jump-icon>\n <jump-icon id=\"next-page\" name=\"chevron-right\"></jump-icon>\n {this.showAdditionalChrevrons && <jump-icon id=\"last-page\" name=\"chevrons-right\"></jump-icon>}\n </div> \n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
package/dist/esm/loader.js
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["jump-pagination",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-badge",[[0,"jump-badge",{"label":[513],"variant":[513]}]]],["jump-button",[[4,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]],["jump-card",[[4,"jump-card",{"horizontal":[516],"dark":[516],"shadow":[516],"border":[516],"borderRadius":[516,"border-radius"],"topBorderContentRadius":[516,"top-border-content-radius"],"boxed":[516],"roundedMedia":[516,"rounded-media"],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"],"videoSrc":[513,"video-src"]}]]],["jump-icon",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
|
|
8
|
+
return bootstrapLazy([["jump-pagination",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"pagLabel":[513,"pag-label"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-badge",[[0,"jump-badge",{"label":[513],"variant":[513]}]]],["jump-button",[[4,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]],["jump-card",[[4,"jump-card",{"horizontal":[516],"dark":[516],"shadow":[516],"border":[516],"borderRadius":[516,"border-radius"],"topBorderContentRadius":[516,"top-border-content-radius"],"boxed":[516],"roundedMedia":[516,"rounded-media"],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"],"videoSrc":[513,"video-src"]}]]],["jump-icon",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-c560071a.js";export{s as setNonce}from"./p-c560071a.js";import{g as t}from"./p-e1255160.js";const r=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};r().then((async e=>{await t();return a([["p-
|
|
1
|
+
import{p as e,b as a}from"./p-c560071a.js";export{s as setNonce}from"./p-c560071a.js";import{g as t}from"./p-e1255160.js";const r=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};r().then((async e=>{await t();return a([["p-ddb6c98c",[[0,"jump-pagination",{totalElements:[514,"total-elements"],pagLabel:[513,"pag-label"],currentPage:[514,"current-page"],lastPage:[514,"last-page"],labelElementsPerPage:[513,"label-elements-per-page"],elementsRanges:[16],firstPage:[514,"first-page"],completeVersion:[516,"complete-version"],showAdditionalChrevrons:[516,"show-additional-chrevrons"]}]]],["p-99238e3f",[[0,"jump-badge",{label:[513],variant:[513]}]]],["p-9fd6e0a0",[[4,"jump-button",{disabled:[4],variant:[513],outline:[516],size:[513],pill:[516],text:[516],onlyIcon:[516,"only-icon"],href:[513],target:[513],type:[513],name:[513],value:[513],ariaLabel:[513,"aria-label"],class:[513],buttonId:[513,"button-id"]}]]],["p-7cfed9c6",[[4,"jump-card",{horizontal:[516],dark:[516],shadow:[516],border:[516],borderRadius:[516,"border-radius"],topBorderContentRadius:[516,"top-border-content-radius"],boxed:[516],roundedMedia:[516,"rounded-media"],imgSrc:[513,"img-src"],imgAlt:[513,"img-alt"],videoSrc:[513,"video-src"]}]]],["p-bc02e346",[[0,"jump-icon",{name:[1],class:[1]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=jump-design-system.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","totalElements","currentPage","lastPage","labelElementsPerPage","elementsRanges","firstPage","completeVersion","showAdditionalChrevrons","label","variant","disabled","outline","size","pill","text","onlyIcon","target","type","name","value","ariaLabel","class","buttonId","horizontal","dark","shadow","border","borderRadius","topBorderContentRadius","boxed","roundedMedia","imgSrc","imgAlt","videoSrc"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.13.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n if (importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"0HAKA,MAAMA,EAAe,KAajB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACnBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACrD,CACI,OAAOC,EAAeJ,EAAK,ECnB/BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAc,qCAAqC,CAACC,cAAC,uBAAAC,YAAA,qBAAAC,SAAA,kBAAAC,qBAAA,gCAAAC,eAAA,KAAAC,UAAA,mBAAAC,gBAAA,yBAAAC,wBAAA,sEAAAC,MAAA,MAAAC,QAAA,2CAAAC,SAAA,IAAAD,QAAA,MAAAE,QAAA,MAAAC,KAAA,MAAAC,KAAA,MAAAC,KAAA,MAAAC,SAAA,
|
|
1
|
+
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","totalElements","pagLabel","currentPage","lastPage","labelElementsPerPage","elementsRanges","firstPage","completeVersion","showAdditionalChrevrons","label","variant","disabled","outline","size","pill","text","onlyIcon","target","type","name","value","ariaLabel","class","buttonId","horizontal","dark","shadow","border","borderRadius","topBorderContentRadius","boxed","roundedMedia","imgSrc","imgAlt","videoSrc"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.13.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n if (importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n }\n return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"0HAKA,MAAMA,EAAe,KAajB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACnBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACrD,CACI,OAAOC,EAAeJ,EAAK,ECnB/BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAc,qCAAqC,CAACC,cAAC,uBAAAC,SAAA,kBAAAC,YAAA,qBAAAC,SAAA,kBAAAC,qBAAA,gCAAAC,eAAA,KAAAC,UAAA,mBAAAC,gBAAA,yBAAAC,wBAAA,sEAAAC,MAAA,MAAAC,QAAA,2CAAAC,SAAA,IAAAD,QAAA,MAAAE,QAAA,MAAAC,KAAA,MAAAC,KAAA,MAAAC,KAAA,MAAAC,SAAA,kBAAAvB,KAAA,MAAAwB,OAAA,MAAAC,KAAA,MAAAC,KAAA,MAAAC,MAAA,MAAAC,UAAA,mBAAAC,MAAA,MAAAC,SAAA,qDAAAC,WAAA,MAAAC,KAAA,MAAAC,OAAA,MAAAC,OAAA,MAAAC,aAAA,sBAAAC,uBAAA,kCAAAC,MAAA,MAAAC,aAAA,sBAAAC,OAAA,gBAAAC,OAAA,gBAAAC,SAAA,qDAAAf,KAAA,IAAAG,MAAA,SAAAzB,EAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as a,H as n}from"./p-c560071a.js";const i=":host{display:block}.JumpPagination{--pagination-label-color:var(--neutral-grey-secondary);--pagination-arrows-color:var(--neutral-grey-secondary);font-family:var(--ff-primary)}.JumpPagination__Wrapper{display:flex;justify-content:space-between}.JumpPagination__Wrapper .elementsPerPage{display:flex;gap:1rem;align-items:center}.JumpPagination__Wrapper .elementsPerPage label{color:var(--pagination-label-color);font-size:14px;font-weight:normal}.JumpPagination__Wrapper .indicators{font-size:16px;font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--pagination-label-color)}.JumpPagination__Wrapper .indicators .arrow{color:var(--pagination-arrows-color);display:flex;align-items:center;gap:10px}.JumpPagination__Wrapper .indicators .elements{color:var(--pagination-label-color);display:flex;align-items:center;gap:5px}";const t=i;const s=class{constructor(a){e(this,a);this.totalElements=undefined;this.pagLabel="di";this.currentPage=undefined;this.lastPage=undefined;this.labelElementsPerPage="Elementi per pagina";this.elementsRanges=[10,20,60,100];this.firstPage=undefined;this.completeVersion=false;this.showAdditionalChrevrons=false}render(){var e;return a(n,{key:"97d153323192675905ef7efc310edd9544917194",class:"JumpPagination"},a("div",{key:"706326dbd689f2250863df55db66a868deb98465",class:"JumpPagination__Wrapper"},this.completeVersion&&a("div",{class:"elementsPerPage"},a("label",{htmlFor:"elements"},(e=this.labelElementsPerPage)!==null&&e!==void 0?e:"Elements per page"),a("select",{name:"elements",id:"elements"},this.elementsRanges.map((e=>a("option",{value:e},e))))),a("div",{key:"ba6b84fcfc0cb4d2f0f52767f2be99386a6f004c",class:"indicators"},a("div",{key:"b0786315ca18db1608bd07c5658ec37ae9931802",class:"elements"},this.completeVersion?a("span",null,a("span",null,this.firstPage)," - ",a("span",null,this.currentPage)," di ",a("span",null,this.totalElements)):a("span",null,a("span",null,this.currentPage)," di ",a("span",null,this.lastPage))),a("div",{key:"93343a7729d7bbd8512d65bc1877041c25f77cdf",class:"arrow"},this.showAdditionalChrevrons&&a("jump-icon",{id:"first-page",name:"chevrons-left"}),a("jump-icon",{key:"ed735fb41710b632485cc9a24151590842fbdc48",id:"prev-page",name:"chevron-left"}),a("jump-icon",{key:"fffdbf1d84cee94bf0d2ab561cb36d4de82cc763",id:"next-page",name:"chevron-right"}),this.showAdditionalChrevrons&&a("jump-icon",{id:"last-page",name:"chevrons-right"})))))}};s.style=t;export{s as jump_pagination};
|
|
2
|
+
//# sourceMappingURL=p-ddb6c98c.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["jumpPaginationCss","JumpPaginationStyle0","JumpPagination","render","h","Host","key","class","this","completeVersion","htmlFor","_a","labelElementsPerPage","name","id","elementsRanges","map","range","value","firstPage","currentPage","totalElements","lastPage","showAdditionalChrevrons"],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPagination {\n --pagination-label-color: var(--neutral-grey-secondary);\n --pagination-arrows-color: var(--neutral-grey-secondary);\n \n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n\n .elementsPerPage {\n display: flex;\n gap: 1rem;\n align-items: center;\n\n label {\n color: var(--pagination-label-color);\n font-size: 14px;\n font-weight: normal;\n }\n } \n \n .indicators {\n font-size: 16px;\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--pagination-label-color);\n\n .arrow {\n color: var(--pagination-arrows-color);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .elements {\n color: var(--pagination-label-color);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n \n }\n \n}","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination',\n styleUrl: 'jump-pagination.scss',\n shadow: false,\n})\nexport class JumpPagination {\n \n /* ---------------------- @PROPERTIES ------------------------- */\n\n @Prop({ reflect: true }) totalElements: number;\n\n @Prop({reflect: true}) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n /**\n * \n */\n @Prop({ reflect: true }) currentPage: number;\n @Prop({ reflect: true }) lastPage: number; \n\n /**\n * Label for the elements per page select\n */\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /**\n * Values for the elements per page select\n */\n @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n /**\n * Indicates the first page/product of the list\n */\n @Prop({ reflect: true }) firstPage: number;\n\n /**\n * If true, the component will show the complete version of the pagination, with elements informations\n */\n @Prop({ reflect: true }) completeVersion: boolean = false;\n\n @Prop({ reflect: true }) showAdditionalChrevrons: boolean = false;\n\n render() {\n return (\n <Host class=\"JumpPagination\">\n <div class=\"JumpPagination__Wrapper\">\n { this.completeVersion && \n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\">\n {this.elementsRanges.map((range) => (\n <option value={range}>{range}</option>\n ))}\n </select>\n </div> \n }\n <div class=\"indicators\"> \n <div class=\"elements\">\n {this.completeVersion ?\n <span>\n <span>{this.firstPage}</span> - <span>{this.currentPage}</span> di <span>{this.totalElements}</span>\n </span>\n \n :\n <span>\n <span>{this.currentPage}</span> di <span>{this.lastPage}</span>\n </span>\n }\n </div>\n <div class=\"arrow\">\n {this.showAdditionalChrevrons && <jump-icon id=\"first-page\" name=\"chevrons-left\"></jump-icon>}\n <jump-icon id=\"prev-page\" name=\"chevron-left\"></jump-icon>\n <jump-icon id=\"next-page\" name=\"chevron-right\"></jump-icon>\n {this.showAdditionalChrevrons && <jump-icon id=\"last-page\" name=\"chevrons-right\"></jump-icon>}\n </div> \n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAoB,q1BAC1B,MAAAC,EAAeD,E,MCMFE,EAAc,M,oEAMiB,K,6EAWc,sB,oBAKC,CAAC,GAAI,GAAI,GAAI,K,8CAUlB,M,6BAEQ,K,CAE5D,MAAAC,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,kBACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,2BACPC,KAAKC,iBACLL,EAAA,OAAKG,MAAM,mBACTH,EAAA,SAAOM,QAAQ,aAAYC,EAAAH,KAAKI,wBAAoB,MAAAD,SAAA,EAAAA,EAAI,qBACpDP,EAAA,UAAQS,KAAK,WAAWC,GAAG,YACxBN,KAAKO,eAAeC,KAAKC,GACxBb,EAAA,UAAQc,MAAOD,GAAQA,OAKnCb,EAAA,OAAAE,IAAA,2CAAKC,MAAM,cACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,YACRC,KAAKC,gBACJL,EAAA,YACEA,EAAA,YAAOI,KAAKW,WAAiB,MAAGf,EAAA,YAAOI,KAAKY,aAAmB,OAAIhB,EAAA,YAAOI,KAAKa,gBAIjFjB,EAAA,YACEA,EAAA,YAAOI,KAAKY,aAAmB,OAAIhB,EAAA,YAAOI,KAAKc,YAIrDlB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACRC,KAAKe,yBAA2BnB,EAAA,aAAWU,GAAG,aAAaD,KAAK,kBACjET,EAAA,aAAAE,IAAA,2CAAWQ,GAAG,YAAYD,KAAK,iBAC/BT,EAAA,aAAAE,IAAA,2CAAWQ,GAAG,YAAaD,KAAK,kBAC/BL,KAAKe,yBAA2BnB,EAAA,aAAWU,GAAG,YAAaD,KAAK,sB"}
|
|
@@ -153,6 +153,7 @@ export namespace Components {
|
|
|
153
153
|
*/
|
|
154
154
|
"labelElementsPerPage": string;
|
|
155
155
|
"lastPage": number;
|
|
156
|
+
"pagLabel": string;
|
|
156
157
|
"showAdditionalChrevrons": boolean;
|
|
157
158
|
"totalElements": number;
|
|
158
159
|
}
|
|
@@ -344,6 +345,7 @@ declare namespace LocalJSX {
|
|
|
344
345
|
*/
|
|
345
346
|
"labelElementsPerPage"?: string;
|
|
346
347
|
"lastPage"?: number;
|
|
348
|
+
"pagLabel"?: string;
|
|
347
349
|
"showAdditionalChrevrons"?: boolean;
|
|
348
350
|
"totalElements"?: number;
|
|
349
351
|
}
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -37,7 +37,7 @@ So, if the prop inside `nomecomponente.tsx` is `currentPage`, in the story, it s
|
|
|
37
37
|
|
|
38
38
|
#### unpkg
|
|
39
39
|
- This tag `<script type='module' src='https://unpkg.com/@jumpgroup/jump-design-system/dist/jump-design-system/jump-design-system.esm.js'></script>` in the head of your index.html.
|
|
40
|
-
- To include also the style, add `<style src='https://unpkg.com/@jumpgroup/jump-design-system/dist/jump-design-system/jump-design-system.css'></
|
|
40
|
+
- To include also the style, add `<style src='https://unpkg.com/@jumpgroup/jump-design-system/dist/jump-design-system/jump-design-system.css'></style>`in the head of your index.html.
|
|
41
41
|
- Then you can use the element anywhere in your template, JSX, html etc
|
|
42
42
|
|
|
43
43
|
#### jsdeliver
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,h as a,H as n}from"./p-c560071a.js";const i=":host{display:block}.JumpPagination{--pagination-label-color:var(--neutral-grey-secondary);--pagination-arrows-color:var(--neutral-grey-secondary);font-family:var(--ff-primary)}.JumpPagination__Wrapper{display:flex;justify-content:space-between}.JumpPagination__Wrapper .elementsPerPage{display:flex;gap:1rem;align-items:center}.JumpPagination__Wrapper .elementsPerPage label{color:var(--pagination-label-color);font-size:14px;font-weight:normal}.JumpPagination__Wrapper .indicators{font-size:16px;font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--pagination-label-color)}.JumpPagination__Wrapper .indicators .arrow{color:var(--pagination-arrows-color);display:flex;align-items:center;gap:10px}.JumpPagination__Wrapper .indicators .elements{color:var(--pagination-label-color);display:flex;align-items:center;gap:5px}";const t=i;const s=class{constructor(a){e(this,a);this.totalElements=undefined;this.currentPage=undefined;this.lastPage=undefined;this.labelElementsPerPage="Elementi per pagina";this.elementsRanges=[10,20,60,100];this.firstPage=undefined;this.completeVersion=false;this.showAdditionalChrevrons=false}render(){var e;return a(n,{key:"e19fd7770573042573cc19152c02c74054c80ca0",class:"JumpPagination"},a("div",{key:"293584737d7a7d04e6d35756736f5041e79057bc",class:"JumpPagination__Wrapper"},this.completeVersion&&a("div",{class:"elementsPerPage"},a("label",{htmlFor:"elements"},(e=this.labelElementsPerPage)!==null&&e!==void 0?e:"Elements per page"),a("select",{name:"elements",id:"elements"},this.elementsRanges.map((e=>a("option",{value:e},e))))),a("div",{key:"abcc46875ebf0e3d6197b964b6ae5fc7d3478bd8",class:"indicators"},a("div",{key:"4bf7e8c0470eb551389f35ac9325162a01ebdde2",class:"elements"},this.completeVersion?a("span",null,a("span",null,this.firstPage)," - ",a("span",null,this.currentPage)," di ",a("span",null,this.totalElements)):a("span",null,a("span",null,this.currentPage)," di ",a("span",null,this.lastPage))),a("div",{key:"977288ffe184d14a7bf5b3fe8cb0d252324b303c",class:"arrow"},this.showAdditionalChrevrons&&a("jump-icon",{name:"chevrons-left"}),a("jump-icon",{key:"b4707986287695a858e70ad2765f2b7e6a3d144c",name:"chevron-left"}),a("jump-icon",{key:"2cbe3824ee94c3d893784ffb78fefff385c714d3",name:"chevron-right"}),this.showAdditionalChrevrons&&a("jump-icon",{name:"chevrons-right"})))))}};s.style=t;export{s as jump_pagination};
|
|
2
|
-
//# sourceMappingURL=p-8ec7e589.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["jumpPaginationCss","JumpPaginationStyle0","JumpPagination","render","h","Host","key","class","this","completeVersion","htmlFor","_a","labelElementsPerPage","name","id","elementsRanges","map","range","value","firstPage","currentPage","totalElements","lastPage","showAdditionalChrevrons"],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPagination {\n --pagination-label-color: var(--neutral-grey-secondary);\n --pagination-arrows-color: var(--neutral-grey-secondary);\n \n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n\n .elementsPerPage {\n display: flex;\n gap: 1rem;\n align-items: center;\n\n label {\n color: var(--pagination-label-color);\n font-size: 14px;\n font-weight: normal;\n }\n } \n \n .indicators {\n font-size: 16px;\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--pagination-label-color);\n\n .arrow {\n color: var(--pagination-arrows-color);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .elements {\n color: var(--pagination-label-color);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n \n }\n \n}","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination',\n styleUrl: 'jump-pagination.scss',\n shadow: false,\n})\nexport class JumpPagination {\n \n /* ---------------------- @PROPERTIES ------------------------- */\n\n @Prop({ reflect: true }) totalElements: number;\n\n /**\n * \n */\n @Prop({ reflect: true }) currentPage: number;\n @Prop({ reflect: true }) lastPage: number; \n\n /**\n * Label for the elements per page select\n */\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /**\n * Values for the elements per page select\n */\n @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n /**\n * Indicates the first page/product of the list\n */\n @Prop({ reflect: true }) firstPage: number;\n\n /**\n * If true, the component will show the complete version of the pagination, with elements informations\n */\n @Prop({ reflect: true }) completeVersion: boolean = false;\n\n @Prop({ reflect: true }) showAdditionalChrevrons: boolean = false;\n\n render() {\n return (\n <Host class=\"JumpPagination\">\n <div class=\"JumpPagination__Wrapper\">\n { this.completeVersion && \n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\">\n {this.elementsRanges.map((range) => (\n <option value={range}>{range}</option>\n ))}\n </select>\n </div> \n }\n <div class=\"indicators\"> \n <div class=\"elements\">\n {this.completeVersion ?\n <span>\n <span>{this.firstPage}</span> - <span>{this.currentPage}</span> di <span>{this.totalElements}</span>\n </span>\n \n :\n <span>\n <span>{this.currentPage}</span> di <span>{this.lastPage}</span>\n </span>\n }\n </div>\n <div class=\"arrow\">\n {this.showAdditionalChrevrons && <jump-icon name=\"chevrons-left\"></jump-icon>}\n <jump-icon name=\"chevron-left\"></jump-icon>\n <jump-icon name=\"chevron-right\"></jump-icon>\n {this.showAdditionalChrevrons && <jump-icon name=\"chevrons-right\"></jump-icon>}\n </div> \n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAoB,q1BAC1B,MAAAC,EAAeD,E,MCMFE,EAAc,M,mIAe+B,sB,oBAKC,CAAC,GAAI,GAAI,GAAI,K,8CAUlB,M,6BAEQ,K,CAE5D,MAAAC,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,kBACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,2BACPC,KAAKC,iBACLL,EAAA,OAAKG,MAAM,mBACTH,EAAA,SAAOM,QAAQ,aAAYC,EAAAH,KAAKI,wBAAoB,MAAAD,SAAA,EAAAA,EAAI,qBACpDP,EAAA,UAAQS,KAAK,WAAWC,GAAG,YACxBN,KAAKO,eAAeC,KAAKC,GACxBb,EAAA,UAAQc,MAAOD,GAAQA,OAKnCb,EAAA,OAAAE,IAAA,2CAAKC,MAAM,cACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,YACRC,KAAKC,gBACJL,EAAA,YACEA,EAAA,YAAOI,KAAKW,WAAiB,MAAGf,EAAA,YAAOI,KAAKY,aAAmB,OAAIhB,EAAA,YAAOI,KAAKa,gBAIjFjB,EAAA,YACEA,EAAA,YAAOI,KAAKY,aAAmB,OAAIhB,EAAA,YAAOI,KAAKc,YAIrDlB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACRC,KAAKe,yBAA2BnB,EAAA,aAAWS,KAAK,kBACjDT,EAAA,aAAAE,IAAA,2CAAWO,KAAK,iBAChBT,EAAA,aAAAE,IAAA,2CAAWO,KAAK,kBACfL,KAAKe,yBAA2BnB,EAAA,aAAWS,KAAK,sB"}
|