@jumpgroup/jump-design-system 0.2.6 → 0.3.0

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

@@ -25,9 +25,15 @@ const JumpPaginationTable$1 = /*@__PURE__*/ proxyCustomElement(class JumpPaginat
             this.first = 1;
             this.last = Math.min(this.total, newValue);
         }
-        console.log('quaaaa');
         this.changeElPerPage.emit({ elPerPage: newValue });
     }
+    /* -------------------- LYFECYCLE EVENTS ---------------------- */
+    componentWillLoad() {
+        this.elPerPage = this.elementsRanges[0];
+    }
+    /* -------------------- @LISTEN ------------------------------- */
+    /* -------------------- @METHOD ------------------------------- */
+    /* -------------------- LOCAL METHODS ------------------------- */
     setElPerPage(e) {
         this.elPerPage = e.target.value;
     }
@@ -60,11 +66,12 @@ const JumpPaginationTable$1 = /*@__PURE__*/ proxyCustomElement(class JumpPaginat
         };
         this.changePage.emit(details);
     }
+    /* --------------------- RENDER ------------------------------- */
     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" })))))));
+        return (h(Host, { key: '7aaf182b98f9dbdbb1d6534a1d7b466bbc486fca', class: "JumpPaginationTable" }, h("div", { key: 'b8a5d5213ae3a20ee69aeb75b0d82c58ab4d5200', class: "JumpPaginationTable__Wrapper" }, h("div", { key: '2de29a7b2bb549e3b6e4260429651c1cc3ba72b6', class: "elementsPerPage" }, h("label", { key: 'a9d541046112f0a44239b3d61dea7a80924e56a6', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '28db5dfa88e11493b41a1b846ae35da95ab97926', 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: '67f6433160f242f108682af2e97c6fdca2136836', class: "indicators" }, h("div", { key: 'a2babacab58ca903d543396f184ac0e82af517c0', class: "elements" }, h("span", { key: 'b50d80c5aff8d99a9146fb22a7624f3c47784f78' }, h("span", { key: '33e54e9d66a4c80ed6c85ad3ac48e82bd1b329f0' }, this.first), " - ", h("span", { key: '925393912439fb60530f18eb863de15b22e41f25' }, this.last), " ", this.pagLabel, " ", h("span", { key: '1d27a6418dbe2a43e18b99bb48164ffbc0c2c8ca' }, this.total))), h("div", { key: '7d5f3508e4110320bf990c51e8f324d1e2c3cb8a', class: "arrow" }, this.showFirstAndLast &&
+            h("button", { key: '6807e1defb67535f7ca92443d6869ae203155226', onClick: () => this.doChangePage('first'), disabled: this.first === 1 }, h("jump-icon", { key: '221eda90c3a22540531674ff4bf6e980fded8e22', slot: "prefix", name: "chevrons-left" })), h("button", { key: '7cc613b04ac2aee3621fe8d8375afc5fbfffe41b', onClick: () => this.doChangePage('previous'), disabled: this.first === 1 }, h("jump-icon", { key: 'e05d4ea32e2f48fb59c768a6f5a7589b16dbabe2', slot: "prefix", name: "chevron-left" })), h("button", { key: 'dc347685f6183ed76c4b3e0ac1e9b762d974ef39', onClick: () => this.doChangePage('next'), disabled: this.last === this.total }, h("jump-icon", { key: 'd2b9da97638a1d53936d7ff238ee93f0eff910c2', slot: "prefix", name: "chevron-right" })), this.showFirstAndLast &&
+            h("button", { key: '9a4a7253847f4e60ae44866b3e12d8623562f7f6', onClick: () => this.doChangePage('last'), disabled: this.last === this.total }, h("jump-icon", { key: 'bcec81a82757e92facd426c351986b19552c9506', slot: "prefix", name: "chevrons-right" })))))));
     }
     static get watchers() { return {
         "elPerPage": ["elPerPageChanged"]

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

@@ -1 +1 @@
-{"file":"jump-pagination-table.js","mappings":"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","names":["JumpPaginationTable"],"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}
+{"file":"jump-pagination-table.js","mappings":"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","names":["JumpPaginationTable"],"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  /* ---------------------- OWN PROPERTIES ---------------------- */\n\n  /* ---------------------- @ELEMENT ---------------------------- */\n\n  /* ---------------------- @STATE ------------------------------ */\n\n  /* ---------------------- @PROPERTIES ------------------------- */\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   * Number of elements per page selected\n   */\n  @Prop() elPerPage: number = 10;\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    this.changeElPerPage.emit({ elPerPage: newValue });\n  }\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  /**\n   * Total of elements\n   */\n  @Prop({ reflect: true }) total: number = 100; \n\n  /**\n   * First element of the page\n   */\n  @Prop({ reflect: true }) first: number = 1;\n\n  /**\n   * Last element of the page\n   */\n  @Prop({ reflect: true }) last: number = 10;\n\n  /**\n   * Show button to navigate so first e last page\n   */\n  @Prop({ reflect: true }) showFirstAndLast: boolean = false;\n\n  /* ---------------------- @EVENTS ------------------------- */\n  @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n  @Event({ eventName: 'jump-change-el-per-page' }) changeElPerPage: EventEmitter;\n\n  /* -------------------- LYFECYCLE EVENTS ---------------------- */\n  componentWillLoad() {\n    this.elPerPage = this.elementsRanges[0];\n  }\n\n  /* -------------------- @LISTEN ------------------------------- */\n\n  /* -------------------- @METHOD ------------------------------- */\n\n  /* -------------------- LOCAL METHODS ------------------------- */\n  setElPerPage(e) {\n    this.elPerPage = e.target.value;\n  }\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    this.changePage.emit(details);\n  }\n\n  /* --------------------- RENDER ------------------------------- */\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/components/jump-pagination.js

@@ -28,10 +28,11 @@ const JumpPagination$1 = /*@__PURE__*/ proxyCustomElement(class JumpPagination e
     componentWillLoad() {
         this.current = 1;
     }
+    /* --------------------- RENDER ------------------------------- */
     render() {
-        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" }), "   "))))));
+        return (h(Host, { key: '91a535355690cc66cac5f6c7ba7b770cc1898d39', class: "JumpPagination" }, h("div", { key: 'b14a24e6c1f4d1cf7348eaacd2a77cd828eccb78', class: "JumpPagination__Wrapper" }, h("div", { key: '4492c23fc92b7aba537cb3f9025524a6bb07ce6c', class: "indicators" }, h("div", { key: 'f48411d785dd35e6404772c1d39d9d78f3da462b', class: "elements" }, h("span", { key: '1d2d195a9ec45c2bd5795b4474de9dc052af22d5' }, h("span", { key: 'c7f9f4473cc2e82e754c3748eb04704f62676e52' }, this.current), " ", this.pagLabel, " ", h("span", { key: 'c1a2a36aef2b86aef07aa040d4d5c9043aeaf75e' }, this.last))), h("div", { key: 'a2645af8e6ce12cc897796fa132dba44f448acd2', class: "arrow" }, this.showFirstAndLast &&
+            h("button", { key: 'ee246362f466d4691d31f8efc7182ca7c5e9963f', onClick: () => { this.current = 1; }, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'e132a8f0c4aad2fb5924e54ad1015315983f2be5', slot: "prefix", name: "chevrons-left" }), "   "), h("button", { key: '0c7144d281a536b73fda1ac94a36e54a17af846b', onClick: () => { this.current--; }, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '15d1c8b75d229cc33349145bad0ac1dfb5eac83e', slot: "prefix", name: "chevron-left" }), "   "), h("button", { key: '0721ba5bfb54732174707e61833ceb19d5c8c2fa', onClick: () => { this.current++; }, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '2f0545ccb0da5032604fe535af035be5059508e0', slot: "prefix", name: "chevron-right" }), "   "), this.showFirstAndLast &&
+            h("button", { key: '1a62859d3dd69ac106335f9fb3d605ec90d685a7', onClick: () => { this.current = this.last; }, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: 'de0dd15cf47d11a59118ca3b8f0999ef60c66997', slot: "prefix", name: "chevrons-right" }), "   "))))));
     }
     static get watchers() { return {
         "current": ["watchcurrent"]

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

@@ -1 +1 @@
-{"file":"jump-pagination.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,6+BAA6+B,CAAC;AACxgC,6BAAe,iBAAiB;;MCMnBA,gBAAc;;;;;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":["JumpPagination"],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.JumpPagination {\n  --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}
+{"file":"jump-pagination.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,6+BAA6+B,CAAC;AACxgC,6BAAe,iBAAiB;;MCMnBA,gBAAc;;;;;uBAGE,CAAC;wBAmBD,IAAI;oBAKR,EAAE;gCAKW,KAAK;;IA1BzC,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;;IAsBD,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;KAClB;;IAGD,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":["JumpPagination"],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.JumpPagination {\n  --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  /**\n   * Label of the pagination\n   */\n  @Prop() pagLabel: string = 'di'; \n\n  /**\n   * Last element of the page\n   */\n  @Prop() last: number = 10; \n\n  /**\n   * Show button to navigate so first e last page\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  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/components/jump-quantity.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JumpQuantity extends Components.JumpQuantity, HTMLElement {}
+export const JumpQuantity: {
+    prototype: JumpQuantity;
+    new (): JumpQuantity;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/jump-quantity.js

@@ -0,0 +1,8 @@
+import { J as JumpQuantity$1, d as defineCustomElement$1 } from './jump-quantity2.js';
+
+const JumpQuantity = JumpQuantity$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { JumpQuantity, defineCustomElement };
+
+//# sourceMappingURL=jump-quantity.js.map

package/dist/components/jump-quantity.js.map

@@ -0,0 +1 @@
+{"file":"jump-quantity.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/jump-quantity2.js

@@ -0,0 +1,94 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './jump-button2.js';
+
+const jumpQuantityCss = ":host{display:inline-flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:0.75rem}:host [data-variant=horizontal]{flex-direction:row}:host label{color:var(--neutral-grey-secondary);font-size:0.875rem}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;margin:0;outline:none;border:1px solid transparent;border-radius:3px;padding:0.5rem;height:16px;width:40px;font-size:0.875rem;text-align:center}:host input::-webkit-inner-spin-button,:host input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host input:focus{border-color:var(--secondary-standard)}:host input:not([aria-hasbuttons]){border-color:var(--neutral-grey-secondary)}:host input[type=button]{cursor:pointer;width:16px}:host .jump-quantity__InnerWrapper{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:0}";
+const JumpQuantityStyle0 = jumpQuantityCss;
+
+const JumpQuantity = /*@__PURE__*/ proxyCustomElement(class JumpQuantity extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.change = createEvent(this, "jump-change", 7);
+        this.internals = this.attachInternals();
+        this.min = 1;
+        this.max = undefined;
+        this.step = 1;
+        this.label = 'Quantità';
+        this.type = 'buttons';
+        this.variant = 'vertical';
+        this.showButtons = true;
+        this.value = undefined;
+    }
+    onValueChange(newValue, oldValue) {
+        this.change.emit({
+            value: newValue,
+            oldValue: oldValue,
+        });
+        this.internals.setFormValue(newValue);
+    }
+    componentWillLoad() {
+        this.value = this.min;
+        this.internals.setFormValue(this.value);
+    }
+    formResetCallback() {
+        this.internals.setValidity({});
+        this.internals.setFormValue('');
+    }
+    handleChange(event) {
+        // console.log(event.target.value);
+        this.value = event.target.value;
+    }
+    //avoid user can change the value below the min
+    handleBlur(event) {
+        if (event.target.value < this.min) {
+            this.value = this.min;
+        }
+    }
+    render() {
+        return (h(Host, { key: '3c14e68a630e8f8ce14b61b119a141b26d1250d1', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: 'd3012ea3d7d21ec7433ec223f9b55d9547337f57' }, this.label), h("div", { key: '6d637b7fe69f1712f48587003ac491a7d63b54dc', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
+            h("jump-button", { key: 'a9a3d9368fb78dc4c060190d0069466611963995', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'small' }, "-"), h("input", { key: '9e728cdf29440f52d706e9e62961d0e2918cd3d8', ref: (el) => {
+                this.inputEl = el;
+            }, type: 'number', value: this.value, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
+            h("jump-button", { key: 'cad00efcd74d365d4e9ffb17c6d366b830f2522b', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'small', "only-icon": this.value >= this.max }, !this.max || this.value < this.max ? '+' : ''))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return this; }
+    static get watchers() { return {
+        "value": ["onValueChange"]
+    }; }
+    static get style() { return JumpQuantityStyle0; }
+}, [65, "jump-quantity", {
+        "min": [2],
+        "max": [2],
+        "step": [2],
+        "label": [1],
+        "type": [1],
+        "variant": [1],
+        "showButtons": [4, "show-buttons"],
+        "value": [32]
+    }, undefined, {
+        "value": ["onValueChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["jump-quantity", "jump-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "jump-quantity":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JumpQuantity);
+            }
+            break;
+        case "jump-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { JumpQuantity as J, defineCustomElement as d };
+
+//# sourceMappingURL=jump-quantity2.js.map

package/dist/components/jump-quantity2.js.map

@@ -0,0 +1 @@
+{"file":"jump-quantity2.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,22BAA22B,CAAC;AACp4B,2BAAe,eAAe;;MCOjB,YAAY;;;;;;;mBAKD,CAAC;;oBAEA,CAAC;qBACA,UAAU;oBACe,SAAS;uBACb,UAAU;2BACxB,IAAI;;;IASnC,aAAa,CAAC,QAAQ,EAAE,QAAQ;QAC9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvC;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACzC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;KACjC;IAED,YAAY,CAAC,KAAK;;QAEhB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACjC;;IAGD,UAAU,CAAC,KAAK;QACd,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;SACvB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,qBAAmB,IAAI,CAAC,WAAW,IACnF,IAAI,CAAC,KAAK,IAAI,gEAAQ,IAAI,CAAC,KAAK,CAAS,EAC1C,4DAAK,KAAK,EAAE,6BAA6B,IACtC,IAAI,CAAC,WAAW;YACf,oEAAa,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EACpF,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,QAI7B,EAChB,8DAAO,GAAG,EAAE,CAAC,EAAE;gBACb,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;aACnB,EACM,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,qBACE,IAAI,CAAC,WAAW,GACtC,EACD,IAAI,CAAC,WAAW;YACf,oEAAa,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,EACpF,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,eACnB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAC5C,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,GAAG,GAAG,GAAG,EAAE,CAAe,CAC5D,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/jump-quantity/jump-quantity.scss?tag=jump-quantity&encapsulation=shadow","src/components/jump-quantity/jump-quantity.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: flex-start;\n  justify-content: center;\n  flex-direction: column;\n  gap: .75rem;\n\n  [data-variant=\"horizontal\"] {\n    flex-direction: row;\n  }\n\n\n  label {\n    color: var(--neutral-grey-secondary);\n    font-size: .875rem;\n  }\n\n  input {\n    //remove user agent styles\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    background: none;\n    margin: 0;\n\n    //remove + and - buttons\n    &::-webkit-inner-spin-button,\n    &::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    outline: none;\n\n    &:focus {\n      border-color: var(--secondary-standard);\n    }\n\n    border: 1px solid transparent;\n    border-radius: 3px;\n    padding: 0.5rem;\n    height: 16px;\n    width: 40px;\n    font-size: .875rem;\n    text-align: center;\n\n    &:not([aria-hasbuttons]) {\n      border-color: var(--neutral-grey-secondary);\n    }\n\n    &[type=\"button\"] {\n      cursor: pointer;\n      width: 16px;\n    }\n  }\n\n  .jump-quantity__InnerWrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n    gap: 0;\n  }\n}\n","import { Component, Host, State, AttachInternals, Watch, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n  tag: 'jump-quantity',\n  styleUrl: 'jump-quantity.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class JumpQuantity {\n\n  @AttachInternals() internals: ElementInternals;\n  @Element() el;\n\n  @Prop() min: number = 1;\n  @Prop() max: number;\n  @Prop() step: number = 1;\n  @Prop() label: string = 'Quantità';\n  @Prop() type: 'buttons' | 'dropdown' | 'input' = 'buttons';\n  @Prop() variant: 'vertical' | 'horizontal' = 'vertical';\n  @Prop() showButtons: boolean = true;\n\n  @Event({ eventName: 'jump-change' }) change;\n\n  @State() value;\n\n  inputEl: HTMLInputElement;\n\n  @Watch('value')\n  onValueChange(newValue, oldValue) {\n    this.change.emit({\n      value: newValue,\n      oldValue: oldValue,\n    });\n    this.internals.setFormValue(newValue);\n  }\n\n  componentWillLoad() {\n    this.value = this.min;\n    this.internals.setFormValue(this.value);\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.internals.setFormValue('');\n  }\n\n  handleChange(event) {\n    // console.log(event.target.value);\n    this.value = event.target.value;\n  }\n\n  //avoid user can change the value below the min\n  handleBlur(event) {\n    if (event.target.value < this.min) {\n      this.value = this.min;\n    }\n  }\n\n  render() {\n    return (\n      <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n        {this.label && <label>{this.label}</label>}\n        <div class={`jump-quantity__InnerWrapper`}>\n          {this.showButtons &&\n            <jump-button onClick={() => this.value = this.value - this.step} disabled={this.value <= this.min}\n                         variant='neutral' size='small'\n            >\n              -\n              {/*{this.value > this.min ? '-' : ''}*/}\n            </jump-button>}\n          <input ref={(el) => {\n            this.inputEl = el;\n          }}\n                 type='number'\n                 value={this.value}\n                 onInput={(event) => this.handleChange(event)}\n                 min={this.min}\n                 max={this.max}\n                 step={this.step}\n                 aria-hasbuttons={this.showButtons}\n          />\n          {this.showButtons &&\n            <jump-button onClick={() => this.value = this.value + this.step} disabled={this.value >= this.max}\n                         variant='neutral' size='small'\n                         only-icon={this.value >= this.max}\n            >{!this.max || this.value < this.max ? '+' : ''}</jump-button>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/jump-tab-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JumpTabItem extends Components.JumpTabItem, HTMLElement {}
+export const JumpTabItem: {
+    prototype: JumpTabItem;
+    new (): JumpTabItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/jump-tab-item.js

@@ -0,0 +1,67 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './jump-icon2.js';
+
+const jumpTabItemCss = ":host{display:block}.JumpTabItem{--jump-tabitem-active-color:var(--secondary-standard);--jump-tabitem-color:var(--neutral-grey-secondary);--jump-tabitem-hover-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-boxed-bg-color:var(--secondary-soft, #EDF2FA);--jump-tabitem-rounded-bg-color:white;font-family:var(--ff-primary)}.JumpTabItem.inline{border-bottom:1px solid var(--jump-tabitem-hover-color)}.JumpTabItem.inline:hover:not(.disabled):not(.active){border-bottom:3px solid var(--jump-tabitem-hover-color);cursor:pointer}.JumpTabItem.inline.active{border-bottom:3px solid var(--jump-tabitem-active-color)}.JumpTabItem__Content{display:flex;}.JumpTabItem__Content label{font-size:16px}.JumpTabItem__Content.left{flex-direction:row;gap:6px;align-items:center}.JumpTabItem__Content.top{flex-direction:column;gap:2px;align-items:center}.JumpTabItem__Content.inline{color:var(--jump-tabitem-color);padding:12px 24px}.JumpTabItem__Content.inline.active{color:var(--jump-tabitem-active-color)}.JumpTabItem__Content.inline.active span{font-weight:bold}.JumpTabItem__Content.boxed{color:var(--jump-tabitem-color);padding:15px 39px;background-color:transparent;border:1px solid var(--jump-tabitem-boxed-bg-color)}.JumpTabItem__Content.boxed:hover:not(.disabled),.JumpTabItem__Content.boxed:hover:not(.active){background-color:transparent}.JumpTabItem__Content.boxed:hover:not(.disabled) span,.JumpTabItem__Content.boxed:hover:not(.active) span{font-weight:bold}.JumpTabItem__Content.boxed.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-boxed-bg-color);border:1px solid var(--jump-tabitem-boxed-bg-color)}.JumpTabItem__Content.boxed.active span{font-weight:bold}.JumpTabItem__Content.rounded{padding:12px 32px;color:var(--jump-tabitem-color)}.JumpTabItem__Content.rounded:hover:not(.disabled){cursor:pointer}.JumpTabItem__Content.rounded:hover:not(.disabled) span{font-weight:bold}.JumpTabItem__Content.rounded.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border:1px solid var(--jump-tabitem-active-color);border-radius:50px}.JumpTabItem__Content.sheet{padding:12px 32px;color:var(--neutral-grey-secondary)}.JumpTabItem__Content.sheet:hover:not(.disabled){cursor:pointer}.JumpTabItem__Content.sheet:hover:not(.disabled) span{font-weight:bold}.JumpTabItem__Content.sheet.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border-radius:8px 8px 0px 0px}.JumpTabItem__Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}";
+const JumpTabItemStyle0 = jumpTabItemCss;
+
+const JumpTabItem$1 = /*@__PURE__*/ proxyCustomElement(class JumpTabItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.changeActiveTab = createEvent(this, "jump-change-active-tab", 7);
+        this.identifier = undefined;
+        this.iconName = undefined;
+        this.iconPosition = 'left';
+        this.label = '';
+        this.active = false;
+        this.disabled = false;
+        this.variant = 'inline';
+    }
+    changeTab(identifier) {
+        this.changeActiveTab.emit({ id: identifier });
+    }
+    componentDidLoad() {
+        console.log('Component has been rendered');
+        // Deve leggere la prop "variant" del componente babbo jump-tab e popolare la propria prop "variant"
+        let parentVariant = this.tabEl.parentElement.getAttribute('variant');
+        this.variant = parentVariant;
+    }
+    render() {
+        return (h(Host, { key: '82864ca72b0febf6a25431ad2788b11e80744d57', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) }, h("div", { key: '9275613b491731afc823f0c63be2ae797b372fa6', class: "JumpTabItem__Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
+            h("jump-icon", { key: 'fcd4ab436a0695fdf3ca07f2ca9d1a6343c79d56', class: "small", name: this.iconName }), h("span", { key: '1d518eb336443596c090beafe74b5186f0a1ff37', class: "label" }, this.label))));
+    }
+    static get style() { return JumpTabItemStyle0; }
+}, [0, "jump-tab-item", {
+        "identifier": [1],
+        "iconName": [1, "icon-name"],
+        "iconPosition": [1, "icon-position"],
+        "label": [1],
+        "active": [4],
+        "disabled": [4],
+        "variant": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["jump-tab-item", "jump-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "jump-tab-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JumpTabItem$1);
+            }
+            break;
+        case "jump-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const JumpTabItem = JumpTabItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { JumpTabItem, defineCustomElement };
+
+//# sourceMappingURL=jump-tab-item.js.map

package/dist/components/jump-tab-item.js.map

@@ -0,0 +1 @@
+{"file":"jump-tab-item.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,+gFAA+gF,CAAC;AACviF,0BAAe,cAAc;;MCMhBA,aAAW;;;;;0BAOO,SAAS;wBAKX,SAAS;4BAML,MAAM;qBACb,EAAE;sBACA,KAAK;wBAEH,KAAK;uBAMN,QAAQ;;IAInC,SAAS,CAAC,UAAU;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,UAAU,EAAC,CAAC,CAAC;KAC7C;IAED,gBAAgB;QACd,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;;QAE3C,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACtE,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;KAC7B;IAkED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,GAAG,EAAE,CAAC,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA,EAAE,EACjC,KAAK,EAAE,cAAc,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC,GAAG,GAAG,IAAG,IAAI,CAAC,OAAO,CAAC,IAC1E,4DAAK,KAAK,EAAE,uBAAuB,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,IACvP,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,OAAO,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC;YACtE,kEAAW,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAc,EAE5D,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpTabItem"],"sources":["src/components/jump-tab-item/jump-tab-item.scss?tag=jump-tab-item","src/components/jump-tab-item/jump-tab-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.JumpTabItem {\n  --jump-tabitem-active-color: var(--secondary-standard);\n  --jump-tabitem-color: var(--neutral-grey-secondary);\n  --jump-tabitem-hover-color: var(--neutral-grey-disabled, #CBCBCB);\n  --jump-tabitem-boxed-bg-color: var(--secondary-soft, #EDF2FA);\n  --jump-tabitem-rounded-bg-color: white;\n\n  font-family: var(--ff-primary);\n\n  &.inline {\n    border-bottom: 1px solid var(--jump-tabitem-hover-color);\n\n    &:hover:not(.disabled):not(.active) {\n      border-bottom: 3px solid var(--jump-tabitem-hover-color);\n      cursor: pointer;\n    }\n\n    &.active {\n      border-bottom: 3px solid var(--jump-tabitem-active-color);\n    }\n\n  }\n\n\n  &__Content {\n\n    display: flex;\n\n    label {\n      font-size: 16px;\n    }\n\n    &.left {\n        flex-direction: row;\n        gap: 6px;\n        align-items: center;\n    }\n\n    &.top {\n      flex-direction: column;\n      gap: 2px;\n      align-items: center;\n    }\n\n    /*Tipologia inline */\n    &.inline {\n      color: var(--jump-tabitem-color);\n      padding: 12px 24px;\n    }\n\n    &.inline.active {\n      color: var(--jump-tabitem-active-color);\n      \n      \n      span {\n        font-weight: bold;\n      }\n    }\n\n    /* Tipologia boxed */\n    &.boxed {\n      color: var(--jump-tabitem-color);\n      padding: 15px 39px;\n      background-color: transparent;\n      border: 1px solid var(--jump-tabitem-boxed-bg-color);\n    }\n\n    &.boxed:hover:not(.disabled), &.boxed:hover:not(.active) {\n      background-color: transparent;\n\n        span {\n            font-weight: bold;\n          }\n    }\n\n    \n\n    &.boxed.active {\n      color: var(--jump-tabitem-active-color);\n      background-color: var(--jump-tabitem-boxed-bg-color);\n      border: 1px solid var(--jump-tabitem-boxed-bg-color);\n\n      span {\n          font-weight: bold;\n        }\n    }\n\n    /* Tipologia rounded */\n    &.rounded {\n      padding: 12px 32px;\n      color: var(--jump-tabitem-color);\n      \n    }\n\n    &.rounded:hover:not(.disabled){\n      cursor: pointer;\n\n      span {\n        font-weight: bold;\n      }\n    }\n\n    &.rounded.active {\n        color: var(--jump-tabitem-active-color);\n        background-color: var(--jump-tabitem-rounded-bg-color);\n        border: 1px solid var(--jump-tabitem-active-color);\n        border-radius: 50px;\n\n    }\n\n    /** Tipologia sheet */\n    &.sheet {\n      padding: 12px 32px;\n      color: var(--neutral-grey-secondary);\n     // border: 1px solid transparent;\n     \n    }\n\n    &.sheet:hover:not(.disabled){\n      cursor: pointer;\n\n      span {\n        font-weight: bold;\n      }\n    }\n\n    &.sheet.active {\n      color: var(--jump-tabitem-active-color);\n      background-color: var(--jump-tabitem-rounded-bg-color);\n      //border: 1px solid var(--jump-tabitem-rounded-bg-color);\n      border-radius: 8px 8px 0px 0px;\n    }\n\n    /* Disabilitato */\n    &.disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n      pointer-events: none;\n    }\n\n  }\n}","import { Component, Host, Prop,State,  h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'jump-tab-item',\n  styleUrl: 'jump-tab-item.scss',\n  shadow: false,\n})\nexport class JumpTabItem {\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n\n  /**\n   * Identifier of the tab\n   */\n  @Prop() identifier: string = undefined;\n\n  /**\n   * Name of the icon. If not provided, the icon will not be displayed\n   */\n  @Prop() iconName: string = undefined;\n\n  /**\n   * Icon position, apply only if the icon is present\n   * Choosed from \"left\", \"top\"\n   */\n  @Prop() iconPosition: string = 'left';\n  @Prop() label: string = '';\n  @Prop() active: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The style of the tab item\n   * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n   */\n  @State() variant: string = 'inline';\n\n  @Event({ eventName: 'jump-change-active-tab' }) changeActiveTab: EventEmitter;\n\n  changeTab(identifier){\n    this.changeActiveTab.emit({id: identifier});\n  }\n\n  componentDidLoad() {\n    console.log('Component has been rendered');\n    // Deve leggere la prop \"variant\" del componente babbo jump-tab e popolare la propria prop \"variant\"\n    let parentVariant = this.tabEl.parentElement.getAttribute('variant');\n   this.variant = parentVariant;\n  }\n\n  // componentDidLoad() {\n  //   console.log('Component has been rendered');\n    \n  //   // console.log('THIS', this);\n  //   if(this.active){\n  //     let tab = this.tabEl.previousElementSibling as any;\n  //     if(tab){\n  //       tab.style.borderRight = 'none';\n  //     }\n  //   }\n  // }\n\n  // @Watch('active')\n  // watchActive(newValue) {\n  //   console.log('watch active');\n  //     // Devo ripristinare i bordi di tutti i fratelli di this.tabEl\n  //     let siblings = this.tabEl.parentElement.children as any;\n  //     for (let i = 0; i < siblings.length; i++) {\n  //       siblings[i].style.borderRight = '1px solid red';\n  //     }\n\n  //     console.log('thisel', this.tabEl);\n  //     console.log('newvalue', newValue);\n  //   console.log('xxxxxx', this.tabEl.classList);\n\n  //     // Se this.tabEl ha la classe 'active' allora rimuovo il bordo destro\n  //     if (newValue && this.tabEl.classList.contains('active')) {\n  //       console.log('contiene ');\n  //       this.tabEl.style.borderRight = 'none';\n\n  //       // Rimuovere il bordo destro dal fratello precedente, se esiste\n  //       let prevEl = this.tabEl.previousElementSibling as any;\n  //       console.log('revEl', prevEl);\n  //       if (prevEl) {\n  //         prevEl.style.borderRight = 'none';\n  //       }\n  //     }\n  // }\n\n  // @Watch('active')\n  // watchActive(newValue) {\n  //   // Ripristina i bordi di tutti gli elementi\n  //   const items = document.querySelectorAll('.JumpTabItem')  as any;\n  //   console.log('ITEMS', items);\n  //   items.forEach(item => {\n  //     item.style.borderRight = '1px solid red';\n  //   });\n\n  //   // Verifica se this.tabEl ha la classe 'active'\n  //   if (newValue && this.tabEl.classList.contains('active')) {\n  //     // Rimuovere il bordo destro dal nuovo elemento attivo\n  //     this.tabEl.style.borderRight = 'none';\n\n  //     // Rimuovere il bordo destro dal fratello precedente, se esiste\n  //     let prevEl = this.tabEl.previousElementSibling as any;\n  //     if (prevEl) {\n  //       prevEl.style.borderRight = 'none';\n  //     }\n  //   }\n  // }\n\n\n  tabEl: HTMLElement;\n\n  render() {\n    return (\n      <Host\n        ref={(el) => { this.tabEl = el }}\n       class={\"JumpTabItem \" + (this.active ? 'active' : '') + \" \" +(this.variant)}>\n        <div class={\"JumpTabItem__Content \" + (this.iconName ? this.iconPosition : '') + \" \" + (this.variant) + \" \" + (this.active ? 'active' : '') + \" \" + (this.disabled ? 'disabled' : '')} onClick={() => this.changeTab(this.identifier)} id={this.identifier}>\n          {(this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&\n            <jump-icon class=\"small\" name={this.iconName}></jump-icon>\n          }\n          <span class=\"label\">{this.label}</span>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/jump-tab-panel.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JumpTabPanel extends Components.JumpTabPanel, HTMLElement {}
+export const JumpTabPanel: {
+    prototype: JumpTabPanel;
+    new (): JumpTabPanel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/jump-tab-panel.js

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const jumpTabPanelCss = ":host{display:block}.JumpTabPanel__Content{display:none;padding:1rem 0}.JumpTabPanel__Content.active{display:block}";
+const JumpTabPanelStyle0 = jumpTabPanelCss;
+
+const JumpTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class JumpTabPanel extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.identifier = undefined;
+        this.active = false;
+    }
+    render() {
+        return (h(Host, { key: '5a2a846c7470d079a668b9951d9463a312be4341', class: "JumpTabPanel", id: this.identifier }, h("div", { key: '0b04369ba6c7ed54566383516b8e736cad30b2c3', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: '1381d2e4e39f2ddbac4b9532458419c5c03dc704' }))));
+    }
+    static get style() { return JumpTabPanelStyle0; }
+}, [1, "jump-tab-panel", {
+        "identifier": [1],
+        "active": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["jump-tab-panel"];
+    components.forEach(tagName => { switch (tagName) {
+        case "jump-tab-panel":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JumpTabPanel$1);
+            }
+            break;
+    } });
+}
+
+const JumpTabPanel = JumpTabPanel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { JumpTabPanel, defineCustomElement };
+
+//# sourceMappingURL=jump-tab-panel.js.map

package/dist/components/jump-tab-panel.js.map

@@ -0,0 +1 @@
+{"file":"jump-tab-panel.js","mappings":";;AAAA,MAAM,eAAe,GAAG,qHAAqH,CAAC;AAC9I,2BAAe,eAAe;;MCMjBA,cAAY;;;;;0BAEM,SAAS;sBACZ,KAAK;;IAE/B,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,cAAc,EAAC,EAAE,EAAE,IAAI,CAAC,UAAU,IAC5C,4DAAK,KAAK,EAAE,wBAAwB,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC,IAClE,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpTabPanel"],"sources":["src/components/jump-tab-panel/jump-tab-panel.scss?tag=jump-tab-panel&encapsulation=shadow","src/components/jump-tab-panel/jump-tab-panel.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n\n.JumpTabPanel {\n  \n  &__Content {    \n    display: none;\n    padding: 1rem 0;\n\n    &.active {\n      display: block;\n    }\n  }\n}","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'jump-tab-panel',\n  styleUrl: 'jump-tab-panel.scss',\n  shadow: true,\n})\nexport class JumpTabPanel {\n\n  @Prop() identifier: string = undefined;\n  @Prop() active: boolean = false;\n\n  render() {\n    return (\n      <Host class=\"JumpTabPanel\" id={this.identifier}>\n        <div class={\"JumpTabPanel__Content \" + (this.active ? 'active' : '')}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/jump-tab.js

@@ -1,6 +1,6 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const jumpTabCss = ":host{display:block}";
+const jumpTabCss = ":host{display:block}.JumpTab{--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8)}.JumpTab__Wrapper{display:flex;width:fit-content}.JumpTab__Wrapper.rounded{border-radius:50px;background-color:#f8f8f8}";
 const JumpTabStyle0 = jumpTabCss;
 
 const JumpTab$1 = /*@__PURE__*/ proxyCustomElement(class JumpTab extends HTMLElement {
@@ -8,22 +8,85 @@ const JumpTab$1 = /*@__PURE__*/ proxyCustomElement(class JumpTab extends HTMLEle
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.activeTab = undefined;
-        this.tabNames = undefined;
+        this.setActiveTab = createEvent(this, "jump-change-activetab", 7);
+        this.tabGroupName = undefined;
+        this.variant = 'inline';
     }
-    componentWillLoad() {
-        console.log('Component is about to be rendered');
-        console.log('active', this.activeTab);
-        console.log('tabNames', this.tabNames);
+    changeActiveTabHandler(event) {
+        this.setActiveTab.emit(event.detail);
+        // Recupera il valore della variabile CSS
+        const rootStyles = getComputedStyle(document.documentElement);
+        const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();
+        let items = this.JumpTabEl.querySelectorAll('jump-tab-item');
+        if (items.length > 0) {
+            items.forEach((item) => {
+                if (item.getAttribute('identifier') === event.detail.id) {
+                    item.setAttribute('active', '');
+                    if (this.variant === 'sheet') {
+                        // Aggiungi il bordo ai fratelli dell'elemento attivo tranne l'ultimo
+                        items.forEach((sibling, index) => {
+                            if (sibling !== item && index !== items.length - 1) {
+                                sibling.style.borderRight = `1px solid ${primaryColor}`; // Usa i backticks
+                            }
+                            else {
+                                sibling.style.borderRight = '1px solid transparent';
+                            }
+                        });
+                        // Rimuovi il bordo dal fratello precedente
+                        let previousSibling = item.previousElementSibling;
+                        if (previousSibling) {
+                            previousSibling.style.borderRight = '1px solid transparent';
+                        }
+                    }
+                }
+                else {
+                    item.removeAttribute('active');
+                }
+            });
+        }
+        let panel = this.JumpTabEl.querySelectorAll('jump-tab-panel');
+        if (panel.length > 0) {
+            panel.forEach((panel) => {
+                if (panel.getAttribute('identifier') === event.detail.id) {
+                    panel.setAttribute('active', '');
+                }
+                else {
+                    panel.removeAttribute('active');
+                }
+            });
+        }
+    }
+    componentDidLoad() {
+        console.log('Component has been rendered');
+        if (this.variant === 'sheet') {
+            // Recupera il valore della variabile CSS
+            const rootStyles = getComputedStyle(document.documentElement);
+            const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();
+            // Seleziona tutti gli elementi jump-tab-item
+            let items = this.JumpTabEl.querySelectorAll('jump-tab-item');
+            if (items.length > 0) {
+                items.forEach((item, index) => {
+                    // Aggiungi bordo destro a tutti tranne:
+                    // - l'ultimo elemento
+                    // - l'elemento attivo (avente classe "active")
+                    if (index === items.length - 1 || item.classList.contains('active')) {
+                        item.style.borderRight = '1px solid transparent';
+                    }
+                    else {
+                        item.style.borderRight = `1px solid ${primaryColor}`;
+                    }
+                });
+            }
+        }
     }
     render() {
-        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)))));
+        return (h(Host, { key: '5adce348b75c58349a4ff443cf2f6b39b646722f', class: "JumpTab", id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'dcfe4b594261f40f91bff6fba243fcc2c9d19368', class: "JumpTab__Wrapper " + this.variant }, h("slot", { key: 'ce9cf25e3d5566a2e52469aafeeac6392862c348', name: "tab-item" })), h("div", { key: 'a396fbb89c2299c2cee8b9bd1828ad70faf3caee' }, h("slot", { key: '34f95fe28043b74be2cdba5e0253e50c9326bf01', name: "tab-content" }))));
     }
     static get style() { return JumpTabStyle0; }
 }, [1, "jump-tab", {
-        "activeTab": [1, "active-tab"],
-        "tabNames": [16]
-    }]);
+        "tabGroupName": [1, "tab-group-name"],
+        "variant": [1]
+    }, [[0, "jump-change-active-tab", "changeActiveTabHandler"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/jump-tab.js.map

@@ -1 +1 @@
-{"file":"jump-tab.js","mappings":";;AAAA,MAAM,UAAU,GAAG,sBAAsB,CAAC;AAC1C,sBAAe,UAAU;;MCMZA,SAAO;;;;;yBAGU,SAAS;wBACH,SAAS;;IAE3C,iBAAiB;QACf,OAAO,CAAC,GAAG,CAAC,mCAAmC,CAAC,CAAC;QACjD,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACrC,OAAO,CAAC,GAAG,CAAC,UAAU,EAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACvC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,SAAS,IAClB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MAC9D,WAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,QAAQ,GAAG,EAAE,EAAE,IACrE,OAAO,CACJ,CACP,CAAC,CACG,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpTab"],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'jump-tab',\n  styleUrl: 'jump-tab.scss',\n  shadow: true,\n})\nexport class JumpTab {\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n  @Prop() activeTab: string = undefined;\n  @Prop() tabNames: Array<string> = undefined;\n\n  componentWillLoad() {\n    console.log('Component is about to be rendered');\n    console.log('active',this.activeTab);\n    console.log('tabNames',this.tabNames);\n  }\n\n  render() {\n    return (\n      <Host class=\"JumpTab\">\n        {(this.tabNames && this.activeTab) && this.tabNames.map((tabName) => (\n          <div class={`JumpTab__Tab ${this.activeTab === tabName ? 'active' : ''}`}>\n            {tabName}\n          </div>\n        ))}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"jump-tab.js","mappings":"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","names":["JumpTab"],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.JumpTab {\n  --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);\n\n  &__Wrapper {\n    display: flex;\n    width: fit-content;\n\n    &.rounded {\n      border-radius: 50px;\n      background-color: #f8f8f8; // dovrà andarci var(--jump-tab-bg-color)\n    }     \n  }\n}","import { Component, Host, Event, EventEmitter, Prop, h, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'jump-tab',\n  styleUrl: 'jump-tab.scss',\n  shadow: true,\n})\nexport class JumpTab {\n\n  JumpTabEl: HTMLElement;\n  /* ---------------------- @PROPERTIES ------------------------- */\n  @Prop() tabGroupName: string = undefined;\n\n  /**\n   * The style of the tab. The same value must be passed to all the items.\n   * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n   */\n  @Prop() variant: string = 'inline';\n\n  @Event({ eventName: 'jump-change-activetab'}) setActiveTab: EventEmitter;\n\n  @Listen('jump-change-active-tab')\n  changeActiveTabHandler(event: CustomEvent) {\n    this.setActiveTab.emit(event.detail);\n\n    // Recupera il valore della variabile CSS\n    const rootStyles = getComputedStyle(document.documentElement);\n    const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n    let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n    if (items.length > 0) {\n      items.forEach((item) => {\n        if (item.getAttribute('identifier') === event.detail.id) {\n          item.setAttribute('active', '');\n\n          if (this.variant === 'sheet') {\n            // Aggiungi il bordo ai fratelli dell'elemento attivo tranne l'ultimo\n            items.forEach((sibling, index) => {\n              if (sibling !== item && index !== items.length - 1) {\n                sibling.style.borderRight = `1px solid ${primaryColor}`; // Usa i backticks\n              } else {\n                sibling.style.borderRight = '1px solid transparent';\n              }\n            });\n\n            // Rimuovi il bordo dal fratello precedente\n            let previousSibling = item.previousElementSibling as any;\n            if (previousSibling) {\n              previousSibling.style.borderRight = '1px solid transparent';\n            }\n          }\n\n        } else {\n          item.removeAttribute('active');\n        }\n      });\n    }\n\n    let panel = this.JumpTabEl.querySelectorAll('jump-tab-panel');\n    if (panel.length > 0) {\n      panel.forEach((panel) => {\n        if (panel.getAttribute('identifier') === event.detail.id) {\n          panel.setAttribute('active', '');\n        } else {\n          panel.removeAttribute('active');\n        }\n      });\n    }\n  }\n\n\n  componentDidLoad() {\n    console.log('Component has been rendered');\n    if(this.variant === 'sheet') {\n      // Recupera il valore della variabile CSS\n      const rootStyles = getComputedStyle(document.documentElement);\n      const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n      // Seleziona tutti gli elementi jump-tab-item\n      let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n      if (items.length > 0) {\n        items.forEach((item, index) => {\n          // Aggiungi bordo destro a tutti tranne:\n          // - l'ultimo elemento\n          // - l'elemento attivo (avente classe \"active\")\n          if (index === items.length - 1 || item.classList.contains('active')) {\n            item.style.borderRight = '1px solid transparent';\n          } else {\n            item.style.borderRight = `1px solid ${primaryColor}`;\n          }\n        });\n      }\n    }\n\n  }\n\n\n\n\n  render() {\n    return (\n      <Host class=\"JumpTab\" id={this.tabGroupName} ref={(el) => {this.JumpTabEl = el;}}> \n        <div class={\"JumpTab__Wrapper \" + this.variant}>\n          <slot name=\"tab-item\"></slot>\n        </div>\n        <div>\n          <slot name=\"tab-content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}