@jumpgroup/jump-design-system 0.2.5 → 0.2.6

package/dist/collection/components/jump-pagination/jump-pagination.js

@@ -1,41 +1,29 @@
 import { Host, h } from "@stencil/core";
 export class JumpPagination {
     constructor() {
-        this.firstPage = 1;
-        this.currentPage = undefined;
-        this.totalElements = undefined;
+        this.current = 1;
         this.pagLabel = 'di';
-        this.initialPage = 1;
-        this.lastPage = 10;
-        this.labelElementsPerPage = 'Elementi per pagina';
-        this.elementsRanges = [10, 20, 60, 100];
-        this.completeVersion = false;
+        this.last = 10;
         this.showFirstAndLast = false;
     }
-    watchCurrentPage(newValue, oldValue) {
+    watchcurrent(newValue, oldValue) {
         let details = {
-            currentPage: newValue,
+            current: newValue,
             previousPage: oldValue,
-            firstPage: this.firstPage,
-            lastPage: this.lastPage,
+            first: 1,
+            last: this.last,
             direction: newValue > oldValue ? 'next' : 'prev'
         };
-        this.jumpChangePage.emit(details);
+        this.changePage.emit(details);
     }
     /* ---------------------- @LIFECYCLE ------------------------- */
     componentWillLoad() {
-        this.currentPage = this.initialPage;
+        this.current = 1;
     }
     render() {
-        var _a;
-        console.log('completeVersion', this.completeVersion);
-        return (h(Host, { key: '32e300881b3a78d25edf6480e9a8a6594f907c76', class: "JumpPagination" }, h("div", { key: '0c4e133e409740331083588fbb046d79c2878ea9', class: "JumpPagination__Wrapper" }, this.completeVersion &&
-            h("div", { key: '13daa8e819ec294b50823becc7e8d904eff66f32', class: "elementsPerPage" }, h("label", { key: '162555e0ebfc295d96d5ba358ec879eba1730746', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: 'c4e99d784347a67c5616b3ed0ca25934dbdae55f', name: "elements", id: "elements" }, this.elementsRanges.map((range) => (h("option", { value: range }, range))))), h("div", { key: '5eb516226cf5bcb23e575109371c4f55ca235e04', class: "indicators" }, h("div", { key: '58a8655b582e8cdcd9f8c553343d9e407dd66971', class: "elements" }, this.completeVersion ?
-            h("span", null, h("span", null, this.firstPage), " - ", h("span", null, this.currentPage), " ", this.pagLabel, " ", h("span", null, this.totalElements))
-            :
-                h("span", null, h("span", null, this.currentPage), " ", this.pagLabel, " ", h("span", null, this.lastPage))), h("div", { key: '92b5476c223e477532726304c282ed34e1acccc7', class: "arrow" }, this.showFirstAndLast &&
-            h("button", { key: '740c67ee4f73c5a55a022b2281913d8652deeed2', onClick: () => { this.currentPage = this.firstPage; }, disabled: (this.currentPage === this.firstPage) ? true : false }, " ", h("jump-icon", { key: '5a880ea7c01afcc8ae9a4e84934e386e0edab58c', slot: "prefix", name: "chevrons-left" }), "   "), h("button", { key: '08fe7f7faa6c7645151ec3ea2b4bf4247f082a2d', onClick: () => { this.currentPage--; }, disabled: (this.currentPage === this.firstPage) ? true : false }, " ", h("jump-icon", { key: '04a972584533f1272b10c7e9068ce332aef77299', slot: "prefix", name: "chevron-left" }), "   "), h("button", { key: '0ea012c03b06b587296c9190eece67351579b6e3', onClick: () => { this.currentPage++; }, disabled: (this.currentPage === this.lastPage) ? true : false }, " ", h("jump-icon", { key: '155d6a407989f9cc5d38832df8fb98a3505c3113', slot: "prefix", name: "chevron-right" }), "   "), this.showFirstAndLast &&
-            h("button", { key: 'be46c67831f6d732d47e9340aca1a43a650af958', onClick: () => { this.currentPage = this.lastPage; }, disabled: (this.currentPage === this.lastPage) ? true : false }, " ", h("jump-icon", { key: 'b04a3d8a8726f945d5639761dde68a300e40f80a', slot: "prefix", name: "chevrons-right" }), "   "))))));
+        return (h(Host, { key: '2a7576df479d537fce9ddb57bbd1c2281966338a', class: "JumpPagination" }, h("div", { key: 'b17c027eeeb798a07575a329d6d84b378258c3f8', class: "JumpPagination__Wrapper" }, h("div", { key: 'afd615f030a3affbc8eb42eca80b15c19d248865', class: "indicators" }, h("div", { key: '62ba94ec7d2a97e9c9cb4b305817c65fe841b8d2', class: "elements" }, h("span", { key: '72a1e04a055661f44add8d8a6b7da470ca4dc141' }, h("span", { key: '17d723e90600fc2dd461b3df5806ae1a53f8a9e2' }, this.current), " ", this.pagLabel, " ", h("span", { key: '8226df90a89580310fc165fb3283de0d850a9edd' }, this.last))), h("div", { key: '6ba82177760ff8722071d9306e7c997bb651b838', class: "arrow" }, this.showFirstAndLast &&
+            h("button", { key: 'f97ce0ac5ae55f5efa46e3049740f0e71d30d51a', onClick: () => { this.current = 1; }, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'a3beda6c56fb82248712c4c185bafd7d1ab2b05b', slot: "prefix", name: "chevrons-left" }), "   "), h("button", { key: 'f989324f4950b41d3224ec4661416f76eacc1c4b', onClick: () => { this.current--; }, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '282db7bb875d3fb32f2ed4e5f7aa445c369fc916', slot: "prefix", name: "chevron-left" }), "   "), h("button", { key: '65f1681d7f53d756c111aaba7e8473545c903eb7', onClick: () => { this.current++; }, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: 'a8365aa471c81a95b470bbc333fe4119f77dc72e', slot: "prefix", name: "chevron-right" }), "   "), this.showFirstAndLast &&
+            h("button", { key: 'df7fa6824a028b74042b6a08191e1979ed42617b', onClick: () => { this.current = this.last; }, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '101a5fca010de64d804b8b8dbd336e1ad498c958', slot: "prefix", name: "chevrons-right" }), "   "))))));
     }
     static get is() { return "jump-pagination"; }
     static get originalStyleUrls() {
@@ -50,23 +38,6 @@ export class JumpPagination {
     }
     static get properties() {
         return {
-            "totalElements": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "total-elements",
-                "reflect": true
-            },
             "pagLabel": {
                 "type": "string",
                 "mutable": false,
@@ -82,28 +53,10 @@ export class JumpPagination {
                     "text": ""
                 },
                 "attribute": "pag-label",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "'di'"
             },
-            "initialPage": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "initial-page",
-                "reflect": true,
-                "defaultValue": "1"
-            },
-            "lastPage": {
+            "last": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -117,67 +70,10 @@ export class JumpPagination {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "last-page",
-                "reflect": true,
+                "attribute": "last",
+                "reflect": false,
                 "defaultValue": "10"
             },
-            "labelElementsPerPage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label for the elements per page select"
-                },
-                "attribute": "label-elements-per-page",
-                "reflect": true,
-                "defaultValue": "'Elementi per pagina'"
-            },
-            "elementsRanges": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "Array<number>",
-                    "resolved": "number[]",
-                    "references": {
-                        "Array": {
-                            "location": "global",
-                            "id": "global::Array"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Values for the elements per page select"
-                },
-                "defaultValue": "[10, 20, 60, 100]"
-            },
-            "completeVersion": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If true, the component will show the complete version of the pagination, with elements informations"
-                },
-                "attribute": "complete-version",
-                "reflect": true,
-                "defaultValue": "false"
-            },
             "showFirstAndLast": {
                 "type": "boolean",
                 "mutable": false,
@@ -193,20 +89,19 @@ export class JumpPagination {
                     "text": ""
                 },
                 "attribute": "show-first-and-last",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "firstPage": {},
-            "currentPage": {}
+            "current": {}
         };
     }
     static get events() {
         return [{
-                "method": "jumpChangePage",
+                "method": "changePage",
                 "name": "jump-change-page",
                 "bubbles": true,
                 "cancelable": true,
@@ -224,8 +119,8 @@ export class JumpPagination {
     }
     static get watchers() {
         return [{
-                "propName": "currentPage",
-                "methodName": "watchCurrentPage"
+                "propName": "current",
+                "methodName": "watchcurrent"
             }];
     }
 }

package/dist/collection/components/jump-pagination/jump-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"jump-pagination.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, State, Event, EventEmitter, Prop, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'jump-pagination',\n  styleUrl: 'jump-pagination.scss',\n  shadow: false,\n})\nexport class JumpPagination {\n  \n  /* ---------------------- @STATE ------------------------- */\n  /**\n   * Indicates the first page/product of the list\n   */\n  @State() firstPage: number = 1;\n\n  @State() currentPage: number;\n\n  @Watch('currentPage')\n  watchCurrentPage(newValue: number, oldValue: number) {\n    let details = {\n      currentPage: newValue,\n      previousPage: oldValue,\n      firstPage: this.firstPage,\n      lastPage: this.lastPage,\n      direction: newValue > oldValue ? 'next' : 'prev'\n    };\n\n    this.jumpChangePage.emit(details);\n  }\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  @Prop({reflect:true}) initialPage: number = 1;\n\n  @Prop({reflect:true}) lastPage: number = 10; \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  /**\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}) showFirstAndLast: boolean = false;\n\n  /* ---------------------- @EVENTS ------------------------- */\n  @Event({ eventName: 'jump-change-page' }) jumpChangePage: EventEmitter;\n\n  /* ---------------------- @LIFECYCLE ------------------------- */\n  componentWillLoad() {\n    this.currentPage = this.initialPage;\n  }\n\n  render() {\n    console.log('completeVersion', this.completeVersion);\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> {this.pagLabel} <span>{this.totalElements}</span>\n                </span>\n                \n              :\n                <span>\n                  <span>{this.currentPage}</span> {this.pagLabel} <span>{this.lastPage}</span>\n                </span>\n              }\n            </div>\n            <div class=\"arrow\">\n              {this.showFirstAndLast &&\n                <button \n                  onClick={() => {this.currentPage = this.firstPage} }\n                  disabled={(this.currentPage === this.firstPage) ? true : false}\n                > <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon>   </button>\n              }\n              <button \n                onClick={() => {this.currentPage--}} \n                disabled={(this.currentPage === this.firstPage) ? true : false}\n              > <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon>   </button>\n              <button \n                onClick={() => {this.currentPage++}}\n                disabled={(this.currentPage === this.lastPage) ? true : false}\n                > <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon>   </button>\n              {this.showFirstAndLast &&\n                <button \n                  onClick={() => {this.currentPage = this.lastPage}}\n                  disabled={(this.currentPage === this.lastPage) ? true : false}\n                  > <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon>   </button> \n              }\n            </div> \n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"jump-pagination.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO5F,MAAM,OAAO,cAAc;;uBAGE,CAAC;wBAgBD,IAAI;oBAER,EAAE;gCAEW,KAAK;;IAjBzC,YAAY,CAAC,QAAgB,EAAE,QAAgB;QAC7C,IAAI,OAAO,GAAG;YACZ,OAAO,EAAE,QAAQ;YACjB,YAAY,EAAE,QAAQ;YACtB,KAAK,EAAE,CAAC;YACR,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SACjD,CAAC;QAEF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;IAYD,iEAAiE;IACjE,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACnB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB;YAC1B,4DAAK,KAAK,EAAC,yBAAyB;gBAClC,4DAAK,KAAK,EAAC,YAAY;oBACrB,4DAAK,KAAK,EAAC,UAAU;wBACnB;4BACE,+DAAO,IAAI,CAAC,OAAO,CAAQ;;4BAAE,IAAI,CAAC,QAAQ;;4BAAE,+DAAO,IAAI,CAAC,IAAI,CAAQ,CAC/D,CACH;oBACN,4DAAK,KAAK,EAAC,OAAO;wBACf,IAAI,CAAC,gBAAgB;4BACpB,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA,CAAA,CAAC,EACjC,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;gCAC7C,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa;sCAAY;wBAE1E,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,OAAO,EAAE,CAAA,CAAA,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;4BAC7C,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc,GAAa;kCAAY;wBACvE,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,OAAO,EAAE,CAAA,CAAA,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;4BACnD,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa;kCAAY;wBACzE,IAAI,CAAC,gBAAgB;4BACpB,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA,CAAA,CAAC,EACzC,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;gCACnD,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,gBAAgB,GAAa;sCAAY,CAEzE,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, State, Event, EventEmitter, Prop, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'jump-pagination',\n  styleUrl: 'jump-pagination.scss',\n  shadow: false,\n})\nexport class JumpPagination {\n  \n  /* ---------------------- @STATE ------------------------- */\n  @State() current: number = 1;\n\n  @Watch('current')\n  watchcurrent(newValue: number, oldValue: number) {\n    let details = {\n      current: newValue,\n      previousPage: oldValue,\n      first: 1,\n      last: this.last,\n      direction: newValue > oldValue ? 'next' : 'prev'\n    };\n\n    this.changePage.emit(details);\n  }\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n  @Prop() pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n  @Prop() last: number = 10; \n\n  @Prop() showFirstAndLast: boolean = false;\n\n  /* ---------------------- @EVENTS ------------------------- */\n  @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n\n  /* ---------------------- @LIFECYCLE ------------------------- */\n  componentWillLoad() {\n    this.current = 1;\n  }\n  \n  render() {\n    return (\n      <Host class=\"JumpPagination\">\n        <div class=\"JumpPagination__Wrapper\">\n          <div class=\"indicators\"> \n            <div class=\"elements\">\n              <span>\n                <span>{this.current}</span> {this.pagLabel} <span>{this.last}</span>\n              </span>\n            </div>\n            <div class=\"arrow\">\n              {this.showFirstAndLast &&\n                <button \n                  onClick={() => {this.current = 1} }\n                  disabled={(this.current === 1) ? true : false}\n                > <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon>   </button>\n              }\n              <button \n                onClick={() => {this.current--}} \n                disabled={(this.current === 1) ? true : false}\n              > <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon>   </button>\n              <button \n                onClick={() => {this.current++}}\n                disabled={(this.current === this.last) ? true : false}\n                > <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon>   </button>\n              {this.showFirstAndLast &&\n                <button \n                  onClick={() => {this.current = this.last}}\n                  disabled={(this.current === this.last) ? true : false}\n                  > <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon>   </button> \n              }\n            </div> \n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/jump-pagination/jump-pagination.stories.js

@@ -0,0 +1,68 @@
+import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
+export default {
+    title: 'Components/Pagination/PaginationBase',
+    tags: ['autodocs'],
+    argTypes: {
+        pagLabel: {
+            name: "pag-label",
+            control: 'text',
+            description: 'Indica la dicitura di paginazione. Di default è "di".'
+        },
+        showFirstAndLast: {
+            name: 'show-first-and-last',
+            control: 'boolean',
+            description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'
+        },
+        current: {
+            name: 'current-page',
+            control: 'number',
+            description: 'Pagina corrente'
+        },
+        last: {
+            name: 'last',
+            control: 'number',
+            description: 'Indica l\'ultima pagina',
+        },
+    }
+};
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-pagination ${attributes}></jump-pagination>`);
+};
+const TemplateWithListenerExample = (args, data) => {
+    let id = data.id;
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-pagination ${attributes}></jump-pagination>
+          <div>La pagina corrente è: <span id="page-number">loading..<span></div>
+          <script>
+          (function() {
+              let container;
+              container = document.querySelector('#story--${id}');
+              container.querySelector('jump-pagination').addEventListener('jump-change-page', (ev) => {
+              container.querySelector('#page-number').innerText = ev.detail.current;
+            });
+          })();
+          </script>`);
+};
+export const Playground = Template.bind({});
+Playground.args = {
+    showFirstAndLast: false,
+    current: 1,
+    last: 10,
+    pagLabel: 'di'
+};
+export const PaginationRidotto = TemplateWithListenerExample.bind({});
+PaginationRidotto.args = {
+    showFirstAndLast: false,
+    current: 1,
+    last: 10,
+    pagLabel: 'di'
+};
+export const PaginationCompleto = TemplateWithListenerExample.bind({});
+PaginationCompleto.args = {
+    showFirstAndLast: true,
+    current: 1,
+    last: 10,
+    pagLabel: 'di'
+};
+//# sourceMappingURL=jump-pagination.stories.js.map

package/dist/collection/components/jump-pagination/jump-pagination.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-pagination.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,sCAAsC;IAC7C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAC;YACP,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;SACrE;QAED,gBAAgB,EAAE;YAChB,IAAI,EAAE,qBAAqB;YAC3B,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6IAA6I;SAC3J;QACD,OAAO,EAAE;YACP,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,iBAAiB;SAC/B;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;SACvC;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,oBAAoB,UAAU,qBAAqB,CAAC,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,2BAA2B,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IACjD,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,oBAAoB,UAAU;;;;;4DAKU,EAAE;;;;;oBAK1C,CAAC,CAAC;AACtB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5C,UAAU,CAAC,IAAI,GAAG;IAChB,gBAAgB,EAAE,KAAK;IACvB,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,EAAE;IACR,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEtE,iBAAiB,CAAC,IAAI,GAAG;IACvB,gBAAgB,EAAE,KAAK;IACvB,OAAO,EAAE,CAAC;IACV,IAAI,EAAC,EAAE;IACP,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEvE,kBAAkB,CAAC,IAAI,GAAG;IACxB,gBAAgB,EAAE,IAAI;IACtB,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,EAAE;IACR,QAAQ,EAAE,IAAI;CACf,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n  title: 'Components/Pagination/PaginationBase',\n  tags: ['autodocs'],\n  argTypes: {\n    pagLabel:{\n      name: \"pag-label\",\n      control: 'text',\n      description: 'Indica la dicitura di paginazione. Di default è \"di\".'\n    },\n    \n    showFirstAndLast: {\n      name: 'show-first-and-last',\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    current: {\n      name: 'current-page',\n      control: 'number',\n      description: 'Pagina corrente'\n    },\n    last: {\n      name: 'last',\n      control: 'number',\n      description: 'Indica l\\'ultima pagina',\n    },\n  }\n};\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`<jump-pagination ${attributes}></jump-pagination>`);\n};\n\nconst TemplateWithListenerExample = (args, data) => {\n  let id = data.id;\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`<jump-pagination ${attributes}></jump-pagination>\n          <div>La pagina corrente è: <span id=\"page-number\">loading..<span></div>\n          <script>\n          (function() {\n              let container;\n              container = document.querySelector('#story--${id}');\n              container.querySelector('jump-pagination').addEventListener('jump-change-page', (ev) => {\n              container.querySelector('#page-number').innerText = ev.detail.current;\n            });\n          })();\n          </script>`);\n};\n\nexport const Playground = Template.bind({});\n\nPlayground.args = {\n  showFirstAndLast: false,\n  current: 1,\n  last: 10,\n  pagLabel: 'di'\n};\n\nexport const PaginationRidotto = TemplateWithListenerExample.bind({});\n\nPaginationRidotto.args = {\n  showFirstAndLast: false,\n  current: 1,\n  last:10,\n  pagLabel: 'di'\n};\n\nexport const PaginationCompleto = TemplateWithListenerExample.bind({});\n\nPaginationCompleto.args = {\n  showFirstAndLast: true,\n  current: 1,\n  last: 10,\n  pagLabel: 'di'\n};"]}

package/dist/collection/components/jump-pagination-table/jump-pagination-table.css

@@ -0,0 +1,56 @@
+:host {
+  display: block;
+}
+
+.JumpPaginationTable {
+  --jump-pagination-table-label: var(--neutral-grey-secondary);
+  --jump-pagination-table-arrows: var(--neutral-grey-secondary);
+  --jump-pagination-table-arrows-disabled: var(--neutral-grey-disabled);
+  font-family: var(--ff-primary);
+}
+.JumpPaginationTable__Wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+.JumpPaginationTable__Wrapper .elementsPerPage {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+.JumpPaginationTable__Wrapper .elementsPerPage label {
+  color: var(--jump-pagination-table-label);
+  font-size: var(--fs-300);
+  font-weight: normal;
+}
+.JumpPaginationTable__Wrapper .indicators {
+  font-size: var(--fs-400);
+  font-weight: normal;
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  color: var(--jump-pagination-table-label);
+}
+.JumpPaginationTable__Wrapper .indicators .arrow {
+  color: var(--jump-pagination-table-arrows);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.JumpPaginationTable__Wrapper .indicators .arrow button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0px;
+  display: flex;
+  align-items: center;
+}
+.JumpPaginationTable__Wrapper .indicators .arrow button:disabled {
+  cursor: not-allowed;
+  color: var(--jump-pagination-table-arrows-disabled);
+}
+.JumpPaginationTable__Wrapper .indicators .elements {
+  color: var(--jump-pagination-table-label);
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}

package/dist/collection/components/jump-pagination-table/jump-pagination-table.js

@@ -0,0 +1,262 @@
+import { Host, h } from "@stencil/core";
+export class JumpPaginationTable {
+    constructor() {
+        this.elementsRanges = [10, 20, 60, 100];
+        this.elPerPage = 10;
+        this.pagLabel = 'di';
+        this.labelElementsPerPage = 'Elementi per pagina';
+        this.total = 100;
+        this.first = 1;
+        this.last = 10;
+        this.showFirstAndLast = false;
+    }
+    elPerPageChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            // Riporta la paginazione allo stato iniziale
+            this.first = 1;
+            this.last = Math.min(this.total, newValue);
+        }
+        console.log('quaaaa');
+        this.changeElPerPage.emit({ elPerPage: newValue });
+    }
+    setElPerPage(e) {
+        this.elPerPage = e.target.value;
+    }
+    doChangePage(dir) {
+        let newFirst;
+        let newLast;
+        //TODO refactorare 
+        if (dir === 'first') {
+            newFirst = 1;
+            newLast = Math.min(this.total, this.elPerPage);
+        }
+        else if (dir === 'last') {
+            newLast = this.total;
+            newFirst = Math.max(1, this.total - this.elPerPage + 1);
+        }
+        else if (dir === 'previous') {
+            newFirst = Math.max(1, this.first - this.elPerPage);
+            newLast = Math.min(this.total, newFirst + this.elPerPage - 1);
+        }
+        else if (dir === 'next') {
+            newLast = Math.min(this.total, this.last + this.elPerPage);
+            newFirst = Math.max(1, newLast - this.elPerPage + 1);
+        }
+        this.first = newFirst;
+        this.last = newLast;
+        let details = {
+            first: newFirst,
+            last: newLast,
+            direction: dir
+        };
+        this.changePage.emit(details);
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: 'a0ce2d326581fda87291e2b16cc9b64b5a633246', class: "JumpPaginationTable" }, h("div", { key: '6c0052e1a8fdb06f4f43711912980cbe2e81a0e5', class: "JumpPaginationTable__Wrapper" }, h("div", { key: '2aae7db84f506002ec233c4588571c0d7aad73b7', class: "elementsPerPage" }, h("label", { key: '05df9e396f436959fad6a5e46bae813839e5f23a', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '30656763681d37b2160e533375ff240318b720da', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRanges.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: '80db6dee1b8c360351b7fd4ca2b3c8e0eaaf242f', class: "indicators" }, h("div", { key: 'bae4bc608d60d3288178ce408f80c23edf24e893', class: "elements" }, h("span", { key: 'f4952c8ac2b57f812a9b90c8c3b8d3e95a960952' }, h("span", { key: 'bcb057d337403ec62c2487800279c030a50b67a0' }, this.first), " - ", h("span", { key: '7334a3da3127929ff499d42633fa51b2b2798e72' }, this.last), " ", this.pagLabel, " ", h("span", { key: '64e09cf7339b0b63f793f4408492aaddb255d1eb' }, this.total))), h("div", { key: 'a88758ca9e509fa8dafbd5e890565f8c0e45413a', class: "arrow" }, this.showFirstAndLast &&
+            h("button", { key: '92d636fbd99363c8fdce81dcebcf563dfa8d5616', onClick: () => this.doChangePage('first'), disabled: this.first === 1 }, h("jump-icon", { key: '1399dbb89d3b8bc02ab6b0b8532069019bfd9bf5', slot: "prefix", name: "chevrons-left" })), h("button", { key: '7071e9c983d018e8b757098e61ea4fcc32ff8ac7', onClick: () => this.doChangePage('previous'), disabled: this.first === 1 }, h("jump-icon", { key: '44ab75b00313dbcc0ba4faa292c83542808504f5', slot: "prefix", name: "chevron-left" })), h("button", { key: 'f42cda59476058f2bf1d07c70e392b857a16f9c7', onClick: () => this.doChangePage('next'), disabled: this.last === this.total }, h("jump-icon", { key: '2f7e16d07872df4eefb85fad08c36a50d5dae82c', slot: "prefix", name: "chevron-right" })), this.showFirstAndLast &&
+            h("button", { key: '8269eb814080ebe97c86ac23936770210d543d51', onClick: () => this.doChangePage('last'), disabled: this.last === this.total }, h("jump-icon", { key: '63bef8880d36a01cfd8e2412553bd2ce41be4331', slot: "prefix", name: "chevrons-right" })))))));
+    }
+    static get is() { return "jump-pagination-table"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["jump-pagination-table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["jump-pagination-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "elementsRanges": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<number>",
+                    "resolved": "number[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Values for the elements per page select"
+                },
+                "defaultValue": "[10, 20, 60, 100]"
+            },
+            "elPerPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "el-per-page",
+                "reflect": false,
+                "defaultValue": "10"
+            },
+            "pagLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "pag-label",
+                "reflect": true,
+                "defaultValue": "'di'"
+            },
+            "labelElementsPerPage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the elements per page select"
+                },
+                "attribute": "label-elements-per-page",
+                "reflect": true,
+                "defaultValue": "'Elementi per pagina'"
+            },
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "total",
+                "reflect": true,
+                "defaultValue": "100"
+            },
+            "first": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "first",
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "last": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "last",
+                "reflect": true,
+                "defaultValue": "10"
+            },
+            "showFirstAndLast": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-first-and-last",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changePage",
+                "name": "jump-change-page",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "changeElPerPage",
+                "name": "jump-change-el-per-page",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "elPerPage",
+                "methodName": "elPerPageChanged"
+            }];
+    }
+}
+//# sourceMappingURL=jump-pagination-table.js.map