@jumpgroup/jump-design-system 0.2.7 → 0.3.0

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

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

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

@@ -16,9 +16,15 @@ export class JumpPaginationTable {
             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;
     }
@@ -51,11 +57,12 @@ export class JumpPaginationTable {
         };
         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 is() { return "jump-pagination-table"; }
     static get originalStyleUrls() {
@@ -103,7 +110,7 @@ export class JumpPaginationTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Number of elements per page selected"
                 },
                 "attribute": "el-per-page",
                 "reflect": false,
@@ -157,7 +164,7 @@ export class JumpPaginationTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Total of elements"
                 },
                 "attribute": "total",
                 "reflect": true,
@@ -175,7 +182,7 @@ export class JumpPaginationTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "First element of the page"
                 },
                 "attribute": "first",
                 "reflect": true,
@@ -193,7 +200,7 @@ export class JumpPaginationTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Last element of the page"
                 },
                 "attribute": "last",
                 "reflect": true,
@@ -211,7 +218,7 @@ export class JumpPaginationTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Show button to navigate so first e last page"
                 },
                 "attribute": "show-first-and-last",
                 "reflect": true,

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

@@ -1 +1 @@
-{"version":3,"file":"jump-pagination-table.js","sourceRoot":"","sources":["../../../src/components/jump-pagination-table/jump-pagination-table.tsx"],"names":[],"mappings":"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","sourcesContent":["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","sourceRoot":"","sources":["../../../src/components/jump-pagination-table/jump-pagination-table.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -38,22 +38,37 @@ export default {
             control: 'boolean',
             description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'
         },
+        elPerPage: {
+            name: 'el-per-page',
+            control: 'number',
+            description: 'Indica il numero scelto di elementi per pagina'
+        }
     }
 };
 const TemplatePagTable = (args) => {
     const attributes = generateAttributesFromArgs(args);
     return formatHtml(`<jump-pagination-table ${attributes}></jump-pagination-table>`);
 };
-export const TemplatePagTableWithListenerExample = (args, data) => {
+const TemplateWithListenerExample = (args, data) => {
     let id = data.id;
     const attributes = generateAttributesFromArgs(args);
     return formatHtml(`<jump-pagination-table ${attributes}></jump-pagination-table>
           <div>Stai visualizzando <span id="el-per-page">X</span> elementi per volta</div>
+          <div>Il primo elemento visualizzato è <span id="first-el">X</span></div>
           <script>
           (function() {
               let container;
               container = document.querySelector('#story--${id}');
-              console.log(container);
+              container.querySelector('#el-per-page').innerText = ${args.elPerPage};
+              container.querySelector('#first-el').innerText = ${args.first};
+
+              container.querySelector('jump-pagination-table').addEventListener('jump-change-el-per-page', (ev) => {
+                container.querySelector('#el-per-page').innerText = ev.detail.elPerPage;
+              });
+
+              container.querySelector('jump-pagination-table').addEventListener('jump-change-page', (ev) => {
+                container.querySelector('#first-el').innerText = ev.detail.first;
+              });
           })();
           </script>`);
 };
@@ -65,9 +80,10 @@ PlaygroundPagTable.args = {
     labelElementsPerPage: "Elementi per pagina",
     elementsRanges: [10, 20, 60, 100],
     pagLabel: 'di',
-    showFirstAndLast: false
+    showFirstAndLast: false,
+    elPerPage: 10
 };
-export const PaginationTableRidotto = TemplatePagTableWithListenerExample.bind({});
+export const PaginationTableRidotto = TemplateWithListenerExample.bind({});
 PaginationTableRidotto.args = {
     first: 1,
     last: 10,
@@ -75,9 +91,10 @@ PaginationTableRidotto.args = {
     labelElementsPerPage: "Elementi per pagina",
     elementsRanges: [10, 20, 60, 100],
     pagLabel: 'di',
-    showFirstAndLast: false
+    showFirstAndLast: false,
+    elPerPage: 10
 };
-export const PaginationTableCompleto = TemplatePagTableWithListenerExample.bind({});
+export const PaginationTableCompleto = TemplateWithListenerExample.bind({});
 PaginationTableCompleto.args = {
     first: 1,
     last: 10,
@@ -85,6 +102,7 @@ PaginationTableCompleto.args = {
     labelElementsPerPage: "Elementi per pagina",
     elementsRanges: [10, 20, 60, 100],
     pagLabel: 'di',
-    showFirstAndLast: true
+    showFirstAndLast: true,
+    elPerPage: 10
 };
 //# sourceMappingURL=jump-pagination-table.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"jump-pagination-table.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination-table/jump-pagination-table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n  title: 'Components/Pagination/PaginationTable',\n  tags: ['autodocs'],\n  argTypes: {\n    pagLabel:{\n      name: \"pag-label\",\n      control: 'text',\n      description: 'Indica la dicitura di paginazione. Di default è \"di\".'\n    },\n    first: {\n      name: 'first',\n      control: 'number',\n      description: 'Indica il primo elemento della lista',\n    },\n    last: {\n      name: 'last',\n      control: 'number',\n      description: 'Indica l\\'ultimo elemento della lista',\n    },\n    total: {\n      name: 'total',\n      control: 'number',\n      description: 'Indica il numero totale di elementi disponibili. ',\n    },\n    labelElementsPerPage: {\n      name: 'label-elements-per-page',\n      control: 'text',\n      description: 'Indica l\\'etichetta per gli elementi per pagina',\n    },\n    elementsRanges: {\n      name: 'elements-range',\n      control: 'multi-select', \n      options: [10, 20, 30],\n    },\n    showFirstAndLast: {\n      name: 'show-first-and-last',\n      control: 'boolean',\n      description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'\n    },\n  }\n};\n\nconst TemplatePagTable = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`<jump-pagination-table ${attributes}></jump-pagination-table>`);\n};\n\nexport const TemplatePagTableWithListenerExample = (args, data) => {\n  let id = data.id;\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`<jump-pagination-table ${attributes}></jump-pagination-table>\n          <div>Stai visualizzando <span id=\"el-per-page\">X</span> elementi per volta</div>\n          <script>\n          (function() {\n              let container;\n              container = document.querySelector('#story--${id}');\n              console.log(container);\n          })();\n          </script>`);\n};\n\nexport const PlaygroundPagTable = TemplatePagTable.bind({});\nPlaygroundPagTable.args = {\n  first: 1,\n  last: 10,\n  total: 100,\n  labelElementsPerPage: \"Elementi per pagina\",\n  elementsRanges: [10, 20, 60, 100],\n  pagLabel: 'di',\n  showFirstAndLast: false\n};\n\n\nexport const PaginationTableRidotto = TemplatePagTableWithListenerExample.bind({});\n\nPaginationTableRidotto.args = {\n  first: 1,\n  last: 10,\n  total: 100,\n  labelElementsPerPage: \"Elementi per pagina\",\n  elementsRanges: [10, 20, 60, 100],\n  pagLabel: 'di',\n  showFirstAndLast: false\n};\n\nexport const PaginationTableCompleto = TemplatePagTableWithListenerExample.bind({});\n\nPaginationTableCompleto.args = {\n  first: 1,\n  last: 10,\n  total: 100,\n  labelElementsPerPage: \"Elementi per pagina\",\n  elementsRanges: [10, 20, 60, 100],\n  pagLabel: 'di',\n  showFirstAndLast: true\n};"]}
+{"version":3,"file":"jump-pagination-table.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination-table/jump-pagination-table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n  title: 'Components/Pagination/PaginationTable',\n  tags: ['autodocs'],\n  argTypes: {\n    pagLabel:{\n      name: \"pag-label\",\n      control: 'text',\n      description: 'Indica la dicitura di paginazione. Di default è \"di\".'\n    },\n    first: {\n      name: 'first',\n      control: 'number',\n      description: 'Indica il primo elemento della lista',\n    },\n    last: {\n      name: 'last',\n      control: 'number',\n      description: 'Indica l\\'ultimo elemento della lista',\n    },\n    total: {\n      name: 'total',\n      control: 'number',\n      description: 'Indica il numero totale di elementi disponibili. ',\n    },\n    labelElementsPerPage: {\n      name: 'label-elements-per-page',\n      control: 'text',\n      description: 'Indica l\\'etichetta per gli elementi per pagina',\n    },\n    elementsRanges: {\n      name: 'elements-range',\n      control: 'multi-select', \n      options: [10, 20, 30],\n    },\n    showFirstAndLast: {\n      name: 'show-first-and-last',\n      control: 'boolean',\n      description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'\n    },\n    elPerPage: {\n      name: 'el-per-page',\n      control: 'number',\n      description: 'Indica il numero scelto di elementi per pagina'\n    }\n  }\n};\n\nconst TemplatePagTable = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`<jump-pagination-table ${attributes}></jump-pagination-table>`);\n};\n\nconst TemplateWithListenerExample = (args, data) => {\n  let id = data.id;\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`<jump-pagination-table ${attributes}></jump-pagination-table>\n          <div>Stai visualizzando <span id=\"el-per-page\">X</span> elementi per volta</div>\n          <div>Il primo elemento visualizzato è <span id=\"first-el\">X</span></div>\n          <script>\n          (function() {\n              let container;\n              container = document.querySelector('#story--${id}');\n              container.querySelector('#el-per-page').innerText = ${args.elPerPage};\n              container.querySelector('#first-el').innerText = ${args.first};\n\n              container.querySelector('jump-pagination-table').addEventListener('jump-change-el-per-page', (ev) => {\n                container.querySelector('#el-per-page').innerText = ev.detail.elPerPage;\n              });\n\n              container.querySelector('jump-pagination-table').addEventListener('jump-change-page', (ev) => {\n                container.querySelector('#first-el').innerText = ev.detail.first;\n              });\n          })();\n          </script>`);\n};\n\nexport const PlaygroundPagTable = TemplatePagTable.bind({});\nPlaygroundPagTable.args = {\n  first: 1,\n  last: 10,\n  total: 100,\n  labelElementsPerPage: \"Elementi per pagina\",\n  elementsRanges: [10, 20, 60, 100],\n  pagLabel: 'di',\n  showFirstAndLast: false,\n  elPerPage: 10\n};\n\nexport const PaginationTableRidotto = TemplateWithListenerExample.bind({});\n\nPaginationTableRidotto.args = {\n  first: 1,\n  last: 10,\n  total: 100,\n  labelElementsPerPage: \"Elementi per pagina\",\n  elementsRanges: [10, 20, 60, 100],\n  pagLabel: 'di',\n  showFirstAndLast: false,\n  elPerPage: 10\n};\n\nexport const PaginationTableCompleto = TemplateWithListenerExample.bind({});\n\nPaginationTableCompleto.args = {\n  first: 1,\n  last: 10,\n  total: 100,\n  labelElementsPerPage: \"Elementi per pagina\",\n  elementsRanges: [10, 20, 60, 100],\n  pagLabel: 'di',\n  showFirstAndLast: true,\n  elPerPage: 10\n};"]}

package/dist/collection/components/jump-quantity/jump-quantity.css

@@ -0,0 +1,50 @@
+: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;
+}

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

@@ -0,0 +1,219 @@
+import { Host, h } from "@stencil/core";
+export class JumpQuantity {
+    constructor() {
+        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 is() { return "jump-quantity"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["jump-quantity.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["jump-quantity.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max",
+                "reflect": false
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "step",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'Quantit\u00E0'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'buttons' | 'dropdown' | 'input'",
+                    "resolved": "\"buttons\" | \"dropdown\" | \"input\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'buttons'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
+            "showButtons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-buttons",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "value": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "change",
+                "name": "jump-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=jump-quantity.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jump-quantity.js","sourceRoot":"","sources":["../../../src/components/jump-quantity/jump-quantity.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -0,0 +1,103 @@
+import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
+export default {
+    title: 'Components/Quantity',
+    tags: ['autodocs'],
+    argTypes: {
+        min: {
+            name: 'min',
+            control: 'number',
+            description: 'Il valore minimo',
+        },
+        max: {
+            name: 'max',
+            control: 'number',
+            description: 'Il valore massimo',
+        },
+        step: {
+            name: 'step',
+            control: 'number',
+            description: 'Il valore dello step',
+        },
+        label: {
+            name: 'label',
+            control: 'text',
+            description: 'Il testo del label',
+        },
+        showButtons: {
+            name: 'showButtons',
+            control: 'boolean',
+            description: 'Mostra i pulsanti',
+        },
+        variant: {
+            name: 'variant',
+            control: 'select',
+            options: ['vertical', 'horizontal'],
+            description: 'La direzione dei pulsanti',
+        },
+        // name: {
+        //   name: 'Nome Icona',
+        //   control: 'select',
+        //   options: Object.keys(feather.icons),
+        //   description: "Seleziona il nome dell'icona dal menu a tendina",
+        // },
+        // class: {
+        //   name: 'Classi aggiuntive',
+        //   control: 'text',
+        //   description: "Aggiungi classi aggiuntive all'icona (separate da spazio)",
+        // },
+    },
+};
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return `<jump-quantity ${attributes}></jump-quantity>`;
+};
+export const Default = Template.bind({});
+// Default.args = {
+//   // name: Object.keys(feather.icons)[0],
+//   // class: 'small',
+// };
+const TemplateCheckValues = (args, data) => {
+    let id = data.id;
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-quantity ${attributes}></jump-quantity>
+  <div>Il valore corrente è: <span class="input-value">loading..<span></div>
+  <script>
+  (function() {
+    let container;
+    container = document.querySelector('#story--${id}');
+    container.querySelector('jump-quantity').addEventListener('jump-change', (ev) => {
+    container.querySelector('.input-value').innerText = ev.detail.value;
+  });
+})();
+  </script>`);
+};
+export const CheckValues = TemplateCheckValues.bind({});
+//TODO: https://codepen.io/olawanlejoel/pen/oNpmGpv FormEntries
+const TemplateFormExample = (args, data) => {
+    let id = data.id;
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`
+  <form id="form_test">
+  <jump-quantity ${attributes}></jump-quantity>
+  <input type="text" id="prova" value="ciao" />
+  <input type="submit" value="invia" />
+  </form>
+  <div>Il valore corrente è: <span class="input-value">loading..<span></div>
+  <script>
+  (function() {
+    let container;
+    container = document.querySelector('#story--${id}');
+    container.querySelector('form').addEventListener('submit', (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+
+      const formData = new FormData(ev.target);
+
+      console.log(ev, formData);
+    container.querySelector('.input-value').innerText = ev.detail.value;
+  });
+})();
+  </script>`);
+};
+export const FormExample = TemplateFormExample.bind({});
+//# sourceMappingURL=jump-quantity.stories.js.map