@jumpgroup/jump-design-system 0.2.5 → 0.2.6

package/dist/esm/jump-pagination-table.entry.js

@@ -0,0 +1,75 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-192aeaf1.js';
+
+const jumpPaginationTableCss = ":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}";
+const JumpPaginationTableStyle0 = jumpPaginationTableCss;
+
+const JumpPaginationTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.changePage = createEvent(this, "jump-change-page", 7);
+        this.changeElPerPage = createEvent(this, "jump-change-el-per-page", 7);
+        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 watchers() { return {
+        "elPerPage": ["elPerPageChanged"]
+    }; }
+};
+JumpPaginationTable.style = JumpPaginationTableStyle0;
+
+export { JumpPaginationTable as jump_pagination_table };
+
+//# sourceMappingURL=jump-pagination-table.entry.js.map

package/dist/esm/jump-pagination-table.entry.js.map

@@ -0,0 +1 @@
+{"file":"jump-pagination-table.entry.js","mappings":"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","names":[],"sources":["src/components/jump-pagination-table/jump-pagination-table.scss?tag=jump-pagination-table","src/components/jump-pagination-table/jump-pagination-table.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.JumpPaginationTable {\n  --jump-pagination-table-label: var(--neutral-grey-secondary);\n  --jump-pagination-table-arrows: var(--neutral-grey-secondary);\n  --jump-pagination-table-arrows-disabled: var(--neutral-grey-disabled); //mappare una variabile del design system\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(--jump-pagination-table-label);\n          font-size: var(--fs-300);\n          font-weight: normal;\n        }\n      }\n  \n      .indicators {\n        font-size: var(--fs-400);\n        font-weight: normal;\n        display: flex;\n        justify-content: space-between;\n        gap: 20px;\n  \n        color: var(--jump-pagination-table-label);\n  \n        .arrow {\n          color: var(--jump-pagination-table-arrows);\n          display: flex;\n          align-items: center;\n          gap: 10px;\n  \n          button {\n            background-color: transparent;\n            border: none;\n            cursor: pointer;\n            padding: 0px;\n            display: flex;\n            align-items: center;\n          }\n  \n          button:disabled {\n            cursor: not-allowed;\n            color: var(--jump-pagination-table-arrows-disabled);\n  \n          }\n        }\n  \n        .elements {\n          color: var(--jump-pagination-table-label);\n          display: flex;\n          align-items: center;\n          gap: 5px;\n        }\n      }\n  \n    }\n}","import { Component, Event, EventEmitter, Watch, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'jump-pagination-table',\n  styleUrl: 'jump-pagination-table.scss',\n  shadow: false,\n})\nexport class JumpPaginationTable {\n\n  /**\n   * Values for the elements per page select\n   */\n  @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n  @Prop() elPerPage: number = 10;\n\n  @Prop({ reflect: true }) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n  /**\n   * Label for the elements per page select\n   */\n  @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n  @Prop({ reflect: true }) total: number = 100; // Totale di elementi, usata se completeVersion = true\n\n\n  @Prop({ reflect: true }) first: number = 1;\n  @Prop({ reflect: true }) last: number = 10;\n\n  @Prop({ reflect: true }) showFirstAndLast: boolean = false;\n\n\n\n  @Watch('elPerPage')\n  elPerPageChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      // Riporta la paginazione allo stato iniziale\n      this.first = 1;\n      this.last = Math.min(this.total, newValue);\n    }\n\n\n    console.log('quaaaa');\n    this.changeElPerPage.emit({elPerPage: newValue});\n  }\n\n  setElPerPage(e){\n    this.elPerPage = e.target.value;\n  }\n\n  @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n  @Event({ eventName: 'jump-change-el-per-page' }) changeElPerPage: EventEmitter;\n\n  doChangePage(dir) {\n    let newFirst;\n    let newLast;\n\n    //TODO refactorare \n    if (dir === 'first') {\n      newFirst = 1;\n      newLast = Math.min(this.total, this.elPerPage);\n    } else if (dir === 'last') {\n      newLast = this.total;\n      newFirst = Math.max(1, this.total - this.elPerPage + 1);\n    } else if (dir === 'previous') {\n      newFirst = Math.max(1, this.first - this.elPerPage);\n      newLast = Math.min(this.total, newFirst + this.elPerPage - 1);\n    } else if (dir === 'next') {\n      newLast = Math.min(this.total, this.last + this.elPerPage);\n      newFirst = Math.max(1, newLast - this.elPerPage + 1);\n    }\n\n    this.first = newFirst;\n    this.last = newLast;\n\n    let details = {\n      first: newFirst,\n      last: newLast,\n      direction: dir\n    }\n\n\n    this.changePage.emit(details);\n  }\n\n\n  render() {\n    return (\n      <Host class=\"JumpPaginationTable\">\n        <div class=\"JumpPaginationTable__Wrapper\">\n          <div class=\"elementsPerPage\">\n            <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n            <select name=\"elements\" id=\"elements\" onChange={(e) => this.setElPerPage(e)}>\n              {this.elementsRanges.map((range) => (\n                <option value={range} selected={(this.elPerPage == range) && true}>{range}</option>\n              ))}\n            </select>\n          </div> \n          <div class=\"indicators\">\n            <div class=\"elements\">\n              <span>\n                <span>{this.first}</span> - <span>{this.last}</span> {this.pagLabel} <span>{this.total}</span>\n              </span>\n            </div>\n            <div class=\"arrow\">\n              {this.showFirstAndLast &&\n                <button \n                  onClick={() => this.doChangePage('first')}\n                  disabled={this.first === 1}\n                >\n                  <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon>\n                </button>\n              }\n              <button\n                onClick={() => this.doChangePage('previous')}\n                disabled={this.first === 1}\n              >\n                <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon>\n              </button>\n              <button\n                onClick={() => this.doChangePage('next')}\n                disabled={this.last === this.total}\n              >\n                <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon>\n              </button>\n              {this.showFirstAndLast &&\n                <button\n                  onClick={() => this.doChangePage('last')}\n                  disabled={this.last === this.total}\n                >\n                  <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon>\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/esm/jump-pagination.entry.js

@@ -1,50 +1,38 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-192aeaf1.js';
 
-const jumpPaginationCss = ":host{display:block}.JumpPagination{--pagination-label-color:var(--neutral-grey-secondary);--pagination-arrows-color:var(--neutral-grey-secondary);--pagination-arrows-disabled:#CBCBCB;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 .arrow button{background-color:transparent;border:none;cursor:pointer;padding:0px;display:flex;align-items:center}.JumpPagination__Wrapper .indicators .arrow button:disabled{cursor:not-allowed;color:var(--pagination-arrows-disabled)}.JumpPagination__Wrapper .indicators .elements{color:var(--pagination-label-color);display:flex;align-items:center;gap:5px}";
+const jumpPaginationCss = ":host{display:block}.JumpPagination{--jump-pagination-label:var(--neutral-grey-secondary);--jump-pagination-arrows-color:var(--neutral-grey-secondary);--jump-pagination-arrows-disabled:var(--neutral-grey-disabled);font-family:var(--ff-primary)}.JumpPagination__Wrapper{display:flex;justify-content:space-between}.JumpPagination__Wrapper .indicators{font-size:var(--fs-400);font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--jump-pagination-label)}.JumpPagination__Wrapper .indicators .arrow{color:var(--jump-pagination-arrows-color);display:flex;align-items:center;gap:10px}.JumpPagination__Wrapper .indicators .arrow button{background-color:transparent;border:none;cursor:pointer;padding:0px;display:flex;align-items:center}.JumpPagination__Wrapper .indicators .arrow button:disabled{cursor:not-allowed;color:var(--jump-pagination-arrows-disabled)}.JumpPagination__Wrapper .indicators .elements{color:var(--jump-pagination-label);display:flex;align-items:center;gap:5px}";
 const JumpPaginationStyle0 = jumpPaginationCss;
 
 const JumpPagination = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.jumpChangePage = createEvent(this, "jump-change-page", 7);
-        this.firstPage = 1;
-        this.currentPage = undefined;
-        this.totalElements = undefined;
+        this.changePage = createEvent(this, "jump-change-page", 7);
+        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 watchers() { return {
-        "currentPage": ["watchCurrentPage"]
+        "current": ["watchcurrent"]
     }; }
 };
 JumpPagination.style = JumpPaginationStyle0;

package/dist/esm/jump-pagination.entry.js.map

@@ -1 +1 @@
-{"file":"jump-pagination.entry.js","mappings":"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","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  --pagination-arrows-disabled: #CBCBCB;\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        button {\n          background-color: transparent;\n          border: none;\n          cursor: pointer;\n          padding: 0px;\n              display: flex;\n                align-items: center;\n        }\n\n        button:disabled {\n          cursor: not-allowed;\n          color: var(--pagination-arrows-disabled); \n        \n      }\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, 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.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,6+BAA6+B,CAAC;AACxgC,6BAAe,iBAAiB;;MCMnB,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,GAAG,MAAM,GAAG,MAAM;SACjD,CAAC;QAEF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC/B;;IAaD,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;KAClB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC1B,4DAAK,KAAK,EAAC,yBAAyB,IAClC,4DAAK,KAAK,EAAC,YAAY,IACrB,4DAAK,KAAK,EAAC,UAAU,IACnB,+DACE,+DAAO,IAAI,CAAC,OAAO,CAAQ,OAAE,IAAI,CAAC,QAAQ,OAAE,+DAAO,IAAI,CAAC,IAAI,CAAQ,CAC/D,CACH,EACN,4DAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,gBAAgB;YACpB,+DACE,OAAO,EAAE,QAAO,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA,EAAC,EACjC,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,IAAI,IAAI,GAAG,KAAK,SAC7C,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa,QAAY,EAE1E,+DACE,OAAO,EAAE,QAAO,IAAI,CAAC,OAAO,EAAE,CAAA,EAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,IAAI,IAAI,GAAG,KAAK,SAC7C,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc,GAAa,QAAY,EACvE,+DACE,OAAO,EAAE,QAAO,IAAI,CAAC,OAAO,EAAE,CAAA,EAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,SACnD,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa,QAAY,EACzE,IAAI,CAAC,gBAAgB;YACpB,+DACE,OAAO,EAAE,QAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA,EAAC,EACzC,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,SACnD,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,gBAAgB,GAAa,QAAY,CAEzE,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  --jump-pagination-label: var(--neutral-grey-secondary);\n  --jump-pagination-arrows-color: var(--neutral-grey-secondary);\n  --jump-pagination-arrows-disabled: var(--neutral-grey-disabled);\n  \n  font-family: var(--ff-primary);\n\n  &__Wrapper {\n    display: flex;\n    justify-content: space-between;\n\n    .indicators {\n      font-size: var(--fs-400);\n      font-weight: normal;\n      display: flex;\n      justify-content: space-between;\n      gap: 20px;\n      \n      color: var(--jump-pagination-label);\n\n      .arrow {\n        color: var(--jump-pagination-arrows-color);\n        display: flex;\n        align-items: center;\n        gap: 10px;\n\n        button {\n          background-color: transparent;\n          border: none;\n          cursor: pointer;\n          padding: 0px;\n          display: flex;\n          align-items: center;\n        }\n\n        button:disabled {\n          cursor: not-allowed;\n          color: var(--jump-pagination-arrows-disabled); \n      }\n    }\n\n      .elements {\n        color: var(--jump-pagination-label);\n        display: flex;\n        align-items: center;\n        gap: 5px;\n      }\n    }\n  }\n}","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"],"version":3}

package/dist/esm/jump-tab.entry.js

@@ -15,7 +15,7 @@ const JumpTab = class {
         console.log('tabNames', this.tabNames);
     }
     render() {
-        return (h(Host, { key: '08d20c1e157286fd4034790df04c2f7113e57e43', class: "JumpTab" }, (this.tabNames && this.activeTab) && this.tabNames.map((tabName) => (h("div", { class: `JumpTab__Tab ${this.activeTab === tabName ? 'active' : ''}` }, tabName)))));
+        return (h(Host, { key: '6d974852fbbf04550ddd7eaad3dafbf784513c78', class: "JumpTab" }, (this.tabNames && this.activeTab) && this.tabNames.map((tabName) => (h("div", { class: `JumpTab__Tab ${this.activeTab === tabName ? 'active' : ''}` }, tabName)))));
     }
 };
 JumpTab.style = JumpTabStyle0;

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["jump-pagination",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"pagLabel":[513,"pag-label"],"initialPage":[514,"initial-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"completeVersion":[516,"complete-version"],"showFirstAndLast":[516,"show-first-and-last"],"firstPage":[32],"currentPage":[32]},null,{"currentPage":["watchCurrentPage"]}]]],["jump-badge",[[0,"jump-badge",{"label":[1],"variant":[1]}]]],["jump-button",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}]]],["jump-card",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-tab",[[1,"jump-tab",{"activeTab":[1,"active-tab"],"tabNames":[16]}]]],["jump-icon",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
+  return bootstrapLazy([["jump-pagination",[[0,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table",[[0,"jump-pagination-table",{"elementsRanges":[16],"elPerPage":[2,"el-per-page"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"]},null,{"elPerPage":["elPerPageChanged"]}]]],["jump-badge",[[0,"jump-badge",{"label":[1],"variant":[1]}]]],["jump-button",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}]]],["jump-card",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-tab",[[1,"jump-tab",{"activeTab":[1,"active-tab"],"tabNames":[16]}]]],["jump-icon",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/jump-design-system/jump-design-system.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as a}from"./p-20ceb40c.js";export{s as setNonce}from"./p-20ceb40c.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-87256ed6",[[0,"jump-pagination",{totalElements:[514,"total-elements"],pagLabel:[513,"pag-label"],initialPage:[514,"initial-page"],lastPage:[514,"last-page"],labelElementsPerPage:[513,"label-elements-per-page"],elementsRanges:[16],completeVersion:[516,"complete-version"],showFirstAndLast:[516,"show-first-and-last"],firstPage:[32],currentPage:[32]},null,{currentPage:["watchCurrentPage"]}]]],["p-8f5caf32",[[0,"jump-badge",{label:[1],variant:[1]}]]],["p-960188c6",[[1,"jump-button",{disabled:[4],variant:[1],outline:[4],size:[1],full:[4],pill:[4],text:[4],onlyIcon:[4,"only-icon"],href:[1],target:[1],type:[1],name:[1],value:[1],ariaLabel:[1,"aria-label"],class:[1],buttonId:[1,"button-id"]}]]],["p-700b96b4",[[4,"jump-card",{horizontal:[4],dark:[4],shadow:[4],border:[4],borderRadius:[4,"border-radius"],topBorderContentRadius:[4,"top-border-content-radius"],boxed:[4],roundedMedia:[4,"rounded-media"],imgSrc:[1,"img-src"],imgAlt:[1,"img-alt"],videoSrc:[1,"video-src"]}]]],["p-61729377",[[1,"jump-tab",{activeTab:[1,"active-tab"],tabNames:[16]}]]],["p-511d4425",[[0,"jump-icon",{name:[1],class:[1]}]]]],e)}));
+import{p as a,b as e}from"./p-20ceb40c.js";export{s as setNonce}from"./p-20ceb40c.js";import{g as t}from"./p-e1255160.js";const r=()=>{const e=import.meta.url;const t={};if(e!==""){t.resourcesUrl=new URL(".",e).href}return a(t)};r().then((async a=>{await t();return e([["p-eb16952a",[[0,"jump-pagination",{pagLabel:[1,"pag-label"],last:[2],showFirstAndLast:[4,"show-first-and-last"],current:[32]},null,{current:["watchcurrent"]}]]],["p-1a533536",[[0,"jump-pagination-table",{elementsRanges:[16],elPerPage:[2,"el-per-page"],pagLabel:[513,"pag-label"],labelElementsPerPage:[513,"label-elements-per-page"],total:[514],first:[514],last:[514],showFirstAndLast:[516,"show-first-and-last"]},null,{elPerPage:["elPerPageChanged"]}]]],["p-9ad27c08",[[0,"jump-badge",{label:[1],variant:[1]}]]],["p-c8244738",[[1,"jump-button",{disabled:[4],variant:[1],outline:[4],size:[1],full:[4],pill:[4],text:[4],onlyIcon:[4,"only-icon"],href:[1],target:[1],type:[1],name:[1],value:[1],ariaLabel:[1,"aria-label"],class:[1],buttonId:[1,"button-id"]}]]],["p-700b96b4",[[4,"jump-card",{horizontal:[4],dark:[4],shadow:[4],border:[4],borderRadius:[4,"border-radius"],topBorderContentRadius:[4,"top-border-content-radius"],boxed:[4],roundedMedia:[4,"rounded-media"],imgSrc:[1,"img-src"],imgAlt:[1,"img-alt"],videoSrc:[1,"video-src"]}]]],["p-93d8245f",[[1,"jump-tab",{activeTab:[1,"active-tab"],tabNames:[16]}]]],["p-36c7c94d",[[0,"jump-icon",{name:[1],class:[1]}]]]],a)}));
 //# sourceMappingURL=jump-design-system.esm.js.map

package/dist/jump-design-system/jump-design-system.esm.js.map

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","totalElements","pagLabel","initialPage","lastPage","labelElementsPerPage","elementsRanges","completeVersion","showFirstAndLast","firstPage","currentPage","label","variant","disabled","outline","size","full","pill","text","onlyIcon","target","type","name","value","ariaLabel","class","buttonId","horizontal","dark","shadow","border","borderRadius","topBorderContentRadius","boxed","roundedMedia","imgSrc","imgAlt","videoSrc","activeTab","tabNames"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.15.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,gBAAA,yBAAAC,iBAAA,4BAAAC,UAAA,KAAAC,YAAA,YAAAA,YAAA,yDAAAC,MAAA,IAAAC,QAAA,yCAAAC,SAAA,IAAAD,QAAA,IAAAE,QAAA,IAAAC,KAAA,IAAAC,KAAA,IAAAC,KAAA,IAAAC,KAAA,IAAAC,SAAA,gBAAAzB,KAAA,IAAA0B,OAAA,IAAAC,KAAA,IAAAC,KAAA,IAAAC,MAAA,IAAAC,UAAA,iBAAAC,MAAA,IAAAC,SAAA,mDAAAC,WAAA,IAAAC,KAAA,IAAAC,OAAA,IAAAC,OAAA,IAAAC,aAAA,oBAAAC,uBAAA,gCAAAC,MAAA,IAAAC,aAAA,oBAAAC,OAAA,cAAAC,OAAA,cAAAC,SAAA,kDAAAC,UAAA,iBAAAC,SAAA,wCAAAjB,KAAA,IAAAG,MAAA,SAAA3B,EAAA"}
+{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","pagLabel","last","showFirstAndLast","current","elementsRanges","elPerPage","labelElementsPerPage","total","first","label","variant","disabled","outline","size","full","pill","text","onlyIcon","target","type","name","value","ariaLabel","class","buttonId","horizontal","dark","shadow","border","borderRadius","topBorderContentRadius","boxed","roundedMedia","imgSrc","imgAlt","videoSrc","activeTab","tabNames"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.15.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,SAAC,gBAAAC,KAAA,IAAAC,iBAAA,0BAAAC,QAAA,YAAAA,QAAA,gEAAAC,eAAA,KAAAC,UAAA,kBAAAL,SAAA,kBAAAM,qBAAA,gCAAAC,MAAA,MAAAC,MAAA,MAAAP,KAAA,MAAAC,iBAAA,mCAAAG,UAAA,yDAAAI,MAAA,IAAAC,QAAA,yCAAAC,SAAA,IAAAD,QAAA,IAAAE,QAAA,IAAAC,KAAA,IAAAC,KAAA,IAAAC,KAAA,IAAAC,KAAA,IAAAC,SAAA,gBAAAxB,KAAA,IAAAyB,OAAA,IAAAC,KAAA,IAAAC,KAAA,IAAAC,MAAA,IAAAC,UAAA,iBAAAC,MAAA,IAAAC,SAAA,mDAAAC,WAAA,IAAAC,KAAA,IAAAC,OAAA,IAAAC,OAAA,IAAAC,aAAA,oBAAAC,uBAAA,gCAAAC,MAAA,IAAAC,aAAA,oBAAAC,OAAA,cAAAC,OAAA,cAAAC,SAAA,kDAAAC,UAAA,iBAAAC,SAAA,wCAAAjB,KAAA,IAAAG,MAAA,SAAA1B,EAAA"}

package/dist/jump-design-system/p-1a533536.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as a,h as t,H as i}from"./p-20ceb40c.js";const s=":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}";const n=s;const r=class{constructor(t){e(this,t);this.changePage=a(this,"jump-change-page",7);this.changeElPerPage=a(this,"jump-change-el-per-page",7);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(e,a){if(e!==a){this.first=1;this.last=Math.min(this.total,e)}console.log("quaaaa");this.changeElPerPage.emit({elPerPage:e})}setElPerPage(e){this.elPerPage=e.target.value}doChangePage(e){let a;let t;if(e==="first"){a=1;t=Math.min(this.total,this.elPerPage)}else if(e==="last"){t=this.total;a=Math.max(1,this.total-this.elPerPage+1)}else if(e==="previous"){a=Math.max(1,this.first-this.elPerPage);t=Math.min(this.total,a+this.elPerPage-1)}else if(e==="next"){t=Math.min(this.total,this.last+this.elPerPage);a=Math.max(1,t-this.elPerPage+1)}this.first=a;this.last=t;let i={first:a,last:t,direction:e};this.changePage.emit(i)}render(){var e;return t(i,{key:"a0ce2d326581fda87291e2b16cc9b64b5a633246",class:"JumpPaginationTable"},t("div",{key:"6c0052e1a8fdb06f4f43711912980cbe2e81a0e5",class:"JumpPaginationTable__Wrapper"},t("div",{key:"2aae7db84f506002ec233c4588571c0d7aad73b7",class:"elementsPerPage"},t("label",{key:"05df9e396f436959fad6a5e46bae813839e5f23a",htmlFor:"elements"},(e=this.labelElementsPerPage)!==null&&e!==void 0?e:"Elements per page"),t("select",{key:"30656763681d37b2160e533375ff240318b720da",name:"elements",id:"elements",onChange:e=>this.setElPerPage(e)},this.elementsRanges.map((e=>t("option",{value:e,selected:this.elPerPage==e&&true},e))))),t("div",{key:"80db6dee1b8c360351b7fd4ca2b3c8e0eaaf242f",class:"indicators"},t("div",{key:"bae4bc608d60d3288178ce408f80c23edf24e893",class:"elements"},t("span",{key:"f4952c8ac2b57f812a9b90c8c3b8d3e95a960952"},t("span",{key:"bcb057d337403ec62c2487800279c030a50b67a0"},this.first)," - ",t("span",{key:"7334a3da3127929ff499d42633fa51b2b2798e72"},this.last)," ",this.pagLabel," ",t("span",{key:"64e09cf7339b0b63f793f4408492aaddb255d1eb"},this.total))),t("div",{key:"a88758ca9e509fa8dafbd5e890565f8c0e45413a",class:"arrow"},this.showFirstAndLast&&t("button",{key:"92d636fbd99363c8fdce81dcebcf563dfa8d5616",onClick:()=>this.doChangePage("first"),disabled:this.first===1},t("jump-icon",{key:"1399dbb89d3b8bc02ab6b0b8532069019bfd9bf5",slot:"prefix",name:"chevrons-left"})),t("button",{key:"7071e9c983d018e8b757098e61ea4fcc32ff8ac7",onClick:()=>this.doChangePage("previous"),disabled:this.first===1},t("jump-icon",{key:"44ab75b00313dbcc0ba4faa292c83542808504f5",slot:"prefix",name:"chevron-left"})),t("button",{key:"f42cda59476058f2bf1d07c70e392b857a16f9c7",onClick:()=>this.doChangePage("next"),disabled:this.last===this.total},t("jump-icon",{key:"2f7e16d07872df4eefb85fad08c36a50d5dae82c",slot:"prefix",name:"chevron-right"})),this.showFirstAndLast&&t("button",{key:"8269eb814080ebe97c86ac23936770210d543d51",onClick:()=>this.doChangePage("last"),disabled:this.last===this.total},t("jump-icon",{key:"63bef8880d36a01cfd8e2412553bd2ce41be4331",slot:"prefix",name:"chevrons-right"}))))))}static get watchers(){return{elPerPage:["elPerPageChanged"]}}};r.style=n;export{r as jump_pagination_table};
+//# sourceMappingURL=p-1a533536.entry.js.map

package/dist/jump-design-system/p-1a533536.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jumpPaginationTableCss","JumpPaginationTableStyle0","JumpPaginationTable","elPerPageChanged","newValue","oldValue","this","first","last","Math","min","total","console","log","changeElPerPage","emit","elPerPage","setElPerPage","e","target","value","doChangePage","dir","newFirst","newLast","max","details","direction","changePage","render","h","Host","key","class","htmlFor","_a","labelElementsPerPage","name","id","onChange","elementsRanges","map","range","selected","pagLabel","showFirstAndLast","onClick","disabled","slot"],"sources":["src/components/jump-pagination-table/jump-pagination-table.scss?tag=jump-pagination-table","src/components/jump-pagination-table/jump-pagination-table.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.JumpPaginationTable {\n  --jump-pagination-table-label: var(--neutral-grey-secondary);\n  --jump-pagination-table-arrows: var(--neutral-grey-secondary);\n  --jump-pagination-table-arrows-disabled: var(--neutral-grey-disabled); //mappare una variabile del design system\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(--jump-pagination-table-label);\n          font-size: var(--fs-300);\n          font-weight: normal;\n        }\n      }\n  \n      .indicators {\n        font-size: var(--fs-400);\n        font-weight: normal;\n        display: flex;\n        justify-content: space-between;\n        gap: 20px;\n  \n        color: var(--jump-pagination-table-label);\n  \n        .arrow {\n          color: var(--jump-pagination-table-arrows);\n          display: flex;\n          align-items: center;\n          gap: 10px;\n  \n          button {\n            background-color: transparent;\n            border: none;\n            cursor: pointer;\n            padding: 0px;\n            display: flex;\n            align-items: center;\n          }\n  \n          button:disabled {\n            cursor: not-allowed;\n            color: var(--jump-pagination-table-arrows-disabled);\n  \n          }\n        }\n  \n        .elements {\n          color: var(--jump-pagination-table-label);\n          display: flex;\n          align-items: center;\n          gap: 5px;\n        }\n      }\n  \n    }\n}","import { Component, Event, EventEmitter, Watch, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'jump-pagination-table',\n  styleUrl: 'jump-pagination-table.scss',\n  shadow: false,\n})\nexport class JumpPaginationTable {\n\n  /**\n   * Values for the elements per page select\n   */\n  @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n  @Prop() elPerPage: number = 10;\n\n  @Prop({ reflect: true }) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n  /**\n   * Label for the elements per page select\n   */\n  @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n  @Prop({ reflect: true }) total: number = 100; // Totale di elementi, usata se completeVersion = true\n\n\n  @Prop({ reflect: true }) first: number = 1;\n  @Prop({ reflect: true }) last: number = 10;\n\n  @Prop({ reflect: true }) showFirstAndLast: boolean = false;\n\n\n\n  @Watch('elPerPage')\n  elPerPageChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      // Riporta la paginazione allo stato iniziale\n      this.first = 1;\n      this.last = Math.min(this.total, newValue);\n    }\n\n\n    console.log('quaaaa');\n    this.changeElPerPage.emit({elPerPage: newValue});\n  }\n\n  setElPerPage(e){\n    this.elPerPage = e.target.value;\n  }\n\n  @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n  @Event({ eventName: 'jump-change-el-per-page' }) changeElPerPage: EventEmitter;\n\n  doChangePage(dir) {\n    let newFirst;\n    let newLast;\n\n    //TODO refactorare \n    if (dir === 'first') {\n      newFirst = 1;\n      newLast = Math.min(this.total, this.elPerPage);\n    } else if (dir === 'last') {\n      newLast = this.total;\n      newFirst = Math.max(1, this.total - this.elPerPage + 1);\n    } else if (dir === 'previous') {\n      newFirst = Math.max(1, this.first - this.elPerPage);\n      newLast = Math.min(this.total, newFirst + this.elPerPage - 1);\n    } else if (dir === 'next') {\n      newLast = Math.min(this.total, this.last + this.elPerPage);\n      newFirst = Math.max(1, newLast - this.elPerPage + 1);\n    }\n\n    this.first = newFirst;\n    this.last = newLast;\n\n    let details = {\n      first: newFirst,\n      last: newLast,\n      direction: dir\n    }\n\n\n    this.changePage.emit(details);\n  }\n\n\n  render() {\n    return (\n      <Host class=\"JumpPaginationTable\">\n        <div class=\"JumpPaginationTable__Wrapper\">\n          <div class=\"elementsPerPage\">\n            <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n            <select name=\"elements\" id=\"elements\" onChange={(e) => this.setElPerPage(e)}>\n              {this.elementsRanges.map((range) => (\n                <option value={range} selected={(this.elPerPage == range) && true}>{range}</option>\n              ))}\n            </select>\n          </div> \n          <div class=\"indicators\">\n            <div class=\"elements\">\n              <span>\n                <span>{this.first}</span> - <span>{this.last}</span> {this.pagLabel} <span>{this.total}</span>\n              </span>\n            </div>\n            <div class=\"arrow\">\n              {this.showFirstAndLast &&\n                <button \n                  onClick={() => this.doChangePage('first')}\n                  disabled={this.first === 1}\n                >\n                  <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon>\n                </button>\n              }\n              <button\n                onClick={() => this.doChangePage('previous')}\n                disabled={this.first === 1}\n              >\n                <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon>\n              </button>\n              <button\n                onClick={() => this.doChangePage('next')}\n                disabled={this.last === this.total}\n              >\n                <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon>\n              </button>\n              {this.showFirstAndLast &&\n                <button\n                  onClick={() => this.doChangePage('last')}\n                  disabled={this.last === this.total}\n                >\n                  <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon>\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"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"}

package/dist/jump-design-system/{p-511d4425.entry.js → p-36c7c94d.entry.js}

@@ -327,5 +327,5 @@ import{r as e,h as n,H as i}from"./p-20ceb40c.js";var r=typeof globalThis!=="und
 /*!**************************************************!*\
   !*** multi core-js/es/array/from ./src/index.js ***!
   \**************************************************/
-/*! no static exports found */function(e,n,i){i(/*! core-js/es/array/from */"./node_modules/core-js/es/array/from.js");e.exports=i(/*! /home/runner/work/feather/feather/src/index.js */"./src/index.js")}})}))})(o);const t=l(o.exports);const a="jump-icon{display:inline-flex}jump-icon svg{width:1em;height:1em}";const s=a;const c=class{constructor(n){e(this,n);this.name=undefined;this.class=undefined}componentDidLoad(){t.replace()}render(){return n(i,{key:"c61b602c009a61e74b1ade495fc2188bdcad79dc"},n("i",{key:"adf4f1038dbb9809f524bacaffca00a43c164652","data-feather":this.name,class:this.class}))}};c.style=s;export{c as jump_icon};
-//# sourceMappingURL=p-511d4425.entry.js.map
+/*! no static exports found */function(e,n,i){i(/*! core-js/es/array/from */"./node_modules/core-js/es/array/from.js");e.exports=i(/*! /home/runner/work/feather/feather/src/index.js */"./src/index.js")}})}))})(o);const t=l(o.exports);const a=":host{display:inline-flex}:host svg{width:1rem;height:1rem}";const s=a;const c=class{constructor(n){e(this,n);this.name=undefined;this.class=undefined}componentDidLoad(){t.replace()}render(){return n(i,{key:"c61b602c009a61e74b1ade495fc2188bdcad79dc"},n("i",{key:"adf4f1038dbb9809f524bacaffca00a43c164652","data-feather":this.name,class:this.class}))}};c.style=s;export{c as jump_icon};
+//# sourceMappingURL=p-36c7c94d.entry.js.map