@jumpgroup/jump-design-system 0.2.2 → 0.2.4

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

@@ -1,3 +1,52 @@
+:root {
+  /*BASE COLOR RULES*/
+  --neutral-grey-background: #eeeeee;
+  --neutral-grey-disabled: #cbcbcb;
+  --neutral-grey-primary: #282828;
+  --neutral-grey-secondary: #707070;
+  --neutral-white: #ffffff;
+  --primary-hard: #e75a50;
+  --primary-soft: #ffeae9;
+  --primary-standard: #fa7268;
+  --secondary-hard: #435171;
+  --secondary-soft: #dde3ed;
+  --secondary-standard: #5e79ba;
+  --status-danger-hard: #ba250a;
+  --status-danger-soft: #fdd3d1;
+  --status-danger-standard: #d72c0d;
+  --status-interaction-hard: #22559e;
+  --status-interaction-soft: #f2f7fe;
+  --status-interaction-standard: #2c6ecb;
+  --status-success-hard: #156048;
+  --status-success-soft: #f1f8f5;
+  --status-success-standard: #1d7f60;
+  --status-warning-hard: #987100;
+  --status-warning-soft: #fef5ea;
+  --status-warning-standard: #b98900;
+  /*TYPOGRAPHY RULES*/
+  --ff-primary: "Inter";
+  --ff-secondary: "Prompt";
+  --lh-300: 1.25rem;
+  --lh-400: 1.5rem;
+  --lh-500: 1.625rem;
+  --lh-600: 2rem;
+  --lh-700: 2.75rem;
+  --lh-800: 3.5rem;
+  --lh-850: 4.375rem;
+  --lh-900: 5.5rem;
+  --fs-300: 0.875rem;
+  --fs-400: 1rem;
+  --fs-500: 1.125rem;
+  --fs-600: 1.5rem;
+  --fs-700: 2.25rem;
+  --fs-800: 3rem;
+  --fs-850: 3.75rem;
+  --fs-900: 4.5rem;
+  --fw-300: 300;
+  --fw-400: 400;
+  --fw-900: 700;
+}
+
 jump-card {
   display: flex;
   flex-direction: column;
@@ -22,6 +71,7 @@ jump-card video {
   aspect-ratio: 4/3;
   overflow: hidden;
   position: relative;
+  object-fit: cover;
 }
 jump-card .Content {
   padding: 1.5rem 1rem;
@@ -80,7 +130,6 @@ jump-card[rounded-media] video {
   background-color: transparent;
   border-radius: 50%;
   aspect-ratio: 1;
-  object-fit: cover;
   width: 100%;
   flex: 0 1 40%;
 }

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

@@ -14,8 +14,8 @@ export class AppCard {
         this.videoSrc = '';
     }
     render() {
-        return (h(Host, { key: 'a1f0752a89731d2f493060b79548fa69e99e1e68', horizontal: this.horizontal, "border-radius": this.borderRadius, "rounded-media": this.roundedMedia, "top-border-content-radius": this.topBorderContentRadius, boxed: this.boxed, shadow: this.shadow, border: this.border }, this.imgSrc && !this.videoSrc ? h("img", { src: this.imgSrc, alt: this.imgAlt }) : '', this.videoSrc && !this.imgSrc ?
-            h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : '', h("div", { key: 'a7d7a20a7a5960f3fab3d417d224dd711d119e0b', class: "Content" }, h("slot", { key: '7667cd1ea36b6f2115174f0fa39a6368bc020b16', name: "body" }), h("slot", { key: 'bbaded488f7b0603a9aa19e1549ba41e524ad322', name: "footer" }))));
+        return (h(Host, { key: '990d2452fd2b295b5b5c78a5cbd311c938318ee7', horizontal: this.horizontal, "border-radius": this.borderRadius, "rounded-media": this.roundedMedia, "top-border-content-radius": this.topBorderContentRadius, boxed: this.boxed, shadow: this.shadow, border: this.border }, this.imgSrc && !this.videoSrc ? h("img", { src: this.imgSrc, alt: this.imgAlt }) : '', this.videoSrc && !this.imgSrc ?
+            h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : '', h("div", { key: 'cb2ca9a506ac28a88fb3e4fb7fe6626f9af6daf5', class: "Content" }, h("slot", { key: '8e893537441beedf925094a99a886f9d5c1a1377', name: "body" }), h("slot", { key: '9436fd7c5030bf0405bb88ab43ca21a4bb7e5e35', name: "footer" }))));
     }
     static get is() { return "jump-card"; }
     static get originalStyleUrls() {
@@ -45,7 +45,7 @@ export class AppCard {
                     "text": "Indicates if the card is horizontal"
                 },
                 "attribute": "horizontal",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "false"
             },
             "dark": {
@@ -63,7 +63,7 @@ export class AppCard {
                     "text": "Indicates if the card is horizontal"
                 },
                 "attribute": "dark",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "false"
             },
             "shadow": {
@@ -81,7 +81,7 @@ export class AppCard {
                     "text": "Indicates if card has shadow"
                 },
                 "attribute": "shadow",
-                "reflect": true
+                "reflect": false
             },
             "border": {
                 "type": "boolean",
@@ -98,7 +98,7 @@ export class AppCard {
                     "text": "Indicates if card has borders"
                 },
                 "attribute": "border",
-                "reflect": true
+                "reflect": false
             },
             "borderRadius": {
                 "type": "boolean",
@@ -115,7 +115,7 @@ export class AppCard {
                     "text": "Indicates if borders of the entire card are rounded"
                 },
                 "attribute": "border-radius",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "false"
             },
             "topBorderContentRadius": {
@@ -133,7 +133,7 @@ export class AppCard {
                     "text": "Indicates if border top of the body is rounded; Not compatible with boxed"
                 },
                 "attribute": "top-border-content-radius",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "false"
             },
             "boxed": {
@@ -151,7 +151,7 @@ export class AppCard {
                     "text": "Indicates if media has padding; Not compatible with roundedMedia"
                 },
                 "attribute": "boxed",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "false"
             },
             "roundedMedia": {
@@ -169,7 +169,7 @@ export class AppCard {
                     "text": "Indicates if image is rounded and there isnt a bg"
                 },
                 "attribute": "rounded-media",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "false"
             },
             "imgSrc": {
@@ -187,7 +187,7 @@ export class AppCard {
                     "text": "Indicates the imgSrc of the card"
                 },
                 "attribute": "img-src",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "''"
             },
             "imgAlt": {
@@ -205,7 +205,7 @@ export class AppCard {
                     "text": "Indicates the img's alt of the card"
                 },
                 "attribute": "img-alt",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "''"
             },
             "videoSrc": {
@@ -223,7 +223,7 @@ export class AppCard {
                     "text": "Indicates the videoSrc of the card"
                 },
                 "attribute": "video-src",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "''"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"jump-card.js","sourceRoot":"","sources":["../../../src/components/jump-card/jump-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,OAAO;;0BAI2B,KAAK;oBAKX,KAAK;;;4BAeG,KAAK;sCAKK,KAAK;qBAKtB,KAAK;4BAKE,KAAK;sBAKZ,EAAE;sBAKF,EAAE;wBAKA,EAAE;;IAE5C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU,mBAAiB,IAAI,CAAC,YAAY,mBAAiB,IAAI,CAAC,YAAY,+BAA6B,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM;YACvN,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAQ,CAAC,CAAC,CAAC,EAAE;YACpF,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAC9B,aAAO,QAAQ;oBACb,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE;oBAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE;oBAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,YAAY,GAAE,CACzC,CAAC,CAAC,CAAC,EAAE;YACf,4DAAK,KAAK,EAAC,SAAS;gBAClB,6DAAM,IAAI,EAAC,MAAM,GAAQ;gBACzB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'jump-card',\n  styleUrl: 'jump-card.scss',\n  shadow: false,\n})\nexport class AppCard {\n  /**\n   * Indicates if the card is horizontal\n   */\n  @Prop({reflect: true}) horizontal: boolean = false;\n\n  /**\n   * Indicates if the card is horizontal\n   */\n  @Prop({reflect: true}) dark: boolean = false;\n\n  /**\n * Indicates if card has shadow\n */\n  @Prop({reflect: true}) shadow: boolean;\n\n  /**\n   * Indicates if card has borders\n   */\n  @Prop({reflect: true}) border: boolean;\n\n  /**\n   * Indicates if borders of the entire card are rounded\n   */\n  @Prop({reflect: true}) borderRadius: boolean = false;\n\n  /**\n   * Indicates if border top of the body is rounded; Not compatible with boxed\n   */\n  @Prop({reflect: true}) topBorderContentRadius: boolean = false;\n\n  /**\n   * Indicates if media has padding; Not compatible with roundedMedia\n   */\n  @Prop({reflect: true}) boxed: boolean = false;\n\n  /**\n   * Indicates if image is rounded and there isnt a bg\n   */\n  @Prop({reflect: true}) roundedMedia: boolean = false;\n\n  /**\n   * Indicates the imgSrc of the card\n   */\n  @Prop({reflect: true}) imgSrc: string = '';\n\n  /**\n   * Indicates the img's alt of the card\n   */\n  @Prop({reflect: true}) imgAlt: string = '';\n\n  /**\n   * Indicates the videoSrc of the card\n   */\n  @Prop({reflect: true}) videoSrc: string = '';\n\n  render() {\n    return (\n      <Host horizontal={this.horizontal} border-radius={this.borderRadius} rounded-media={this.roundedMedia} top-border-content-radius={this.topBorderContentRadius} boxed={this.boxed} shadow={this.shadow} border={this.border}>\n        {this.imgSrc && !this.videoSrc ? <img src={this.imgSrc} alt={this.imgAlt}></img> : ''}\n        {this.videoSrc && !this.imgSrc ? \n          <video autoplay> \n            <source src={this.videoSrc} type=\"video/mp4\"/> \n            <source src={this.videoSrc} type=\"video/mov\"/> \n            <source src={this.videoSrc} type=\"video/webm\"/> \n          </video> : ''}\n        <div class=\"Content\">\n          <slot name=\"body\"></slot>\n          <slot name=\"footer\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"jump-card.js","sourceRoot":"","sources":["../../../src/components/jump-card/jump-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,OAAO;;0BAIY,KAAK;oBAKX,KAAK;;;4BAeG,KAAK;sCAKK,KAAK;qBAKtB,KAAK;4BAKE,KAAK;sBAKZ,EAAE;sBAKF,EAAE;wBAKA,EAAE;;IAE7B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU,mBAAiB,IAAI,CAAC,YAAY,mBAAiB,IAAI,CAAC,YAAY,+BAA6B,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM;YACvN,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAQ,CAAC,CAAC,CAAC,EAAE;YACpF,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAC9B,aAAO,QAAQ;oBACb,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE;oBAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE;oBAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,YAAY,GAAE,CACzC,CAAC,CAAC,CAAC,EAAE;YACf,4DAAK,KAAK,EAAC,SAAS;gBAClB,6DAAM,IAAI,EAAC,MAAM,GAAQ;gBACzB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'jump-card',\n  styleUrl: 'jump-card.scss',\n  shadow: false,\n})\nexport class AppCard {\n  /**\n   * Indicates if the card is horizontal\n   */\n  @Prop() horizontal: boolean = false;\n\n  /**\n   * Indicates if the card is horizontal\n   */\n  @Prop() dark: boolean = false;\n\n  /**\n * Indicates if card has shadow\n */\n  @Prop() shadow: boolean;\n\n  /**\n   * Indicates if card has borders\n   */\n  @Prop() border: boolean;\n\n  /**\n   * Indicates if borders of the entire card are rounded\n   */\n  @Prop() borderRadius: boolean = false;\n\n  /**\n   * Indicates if border top of the body is rounded; Not compatible with boxed\n   */\n  @Prop() topBorderContentRadius: boolean = false;\n\n  /**\n   * Indicates if media has padding; Not compatible with roundedMedia\n   */\n  @Prop() boxed: boolean = false;\n\n  /**\n   * Indicates if image is rounded and there isnt a bg\n   */\n  @Prop() roundedMedia: boolean = false;\n\n  /**\n   * Indicates the imgSrc of the card\n   */\n  @Prop() imgSrc: string = '';\n\n  /**\n   * Indicates the img's alt of the card\n   */\n  @Prop() imgAlt: string = '';\n\n  /**\n   * Indicates the videoSrc of the card\n   */\n  @Prop() videoSrc: string = '';\n\n  render() {\n    return (\n      <Host horizontal={this.horizontal} border-radius={this.borderRadius} rounded-media={this.roundedMedia} top-border-content-radius={this.topBorderContentRadius} boxed={this.boxed} shadow={this.shadow} border={this.border}>\n        {this.imgSrc && !this.videoSrc ? <img src={this.imgSrc} alt={this.imgAlt}></img> : ''}\n        {this.videoSrc && !this.imgSrc ? \n          <video autoplay> \n            <source src={this.videoSrc} type=\"video/mp4\"/> \n            <source src={this.videoSrc} type=\"video/mov\"/> \n            <source src={this.videoSrc} type=\"video/webm\"/> \n          </video> : ''}\n        <div class=\"Content\">\n          <slot name=\"body\"></slot>\n          <slot name=\"footer\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/{app-icon → jump-icon}/jump-icon.js

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import feather from "feather-icons";
-export class AppIcon {
+export class JumpIcon {
     constructor() {
         this.name = undefined;
         this.class = undefined;
@@ -9,7 +9,7 @@ export class AppIcon {
         feather.replace();
     }
     render() {
-        return (h(Host, { key: '14d7d5f653ab907fe0d9da64a440698b76a6d04d' }, h("i", { key: 'fd7106ed6861826cbb4a17a6a5b63f3e02a39f1c', "data-feather": this.name, class: this.class })));
+        return (h(Host, { key: 'c61b602c009a61e74b1ade495fc2188bdcad79dc' }, h("i", { key: 'adf4f1038dbb9809f524bacaffca00a43c164652', "data-feather": this.name, class: this.class })));
     }
     static get is() { return "jump-icon"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1 @@
+{"version":3,"file":"jump-icon.js","sourceRoot":"","sources":["../../../src/components/jump-icon/jump-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,OAAO,MAAM,eAAe,CAAC;AAOpC,MAAM,OAAO,QAAQ;;;;;IAYnB,gBAAgB;QACd,OAAO,CAAC,OAAO,EAAE,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,0EAAiB,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAM,CAC9C,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport feather from 'feather-icons';\n\n@Component({\n  tag: 'jump-icon',\n  styleUrl: 'jump-icon.scss',\n  shadow: false,\n})\nexport class JumpIcon {\n  /**\n   * Name of the icon\n   **/\n  @Prop() name: string;\n\n  /**\n   * Additional classes\n   **/\n  @Prop() class: string;\n\n\n  componentDidLoad() {\n    feather.replace();\n  }\n\n  render() {\n    return (\n      <Host>\n        <i data-feather={this.name} class={this.class}></i>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/{app-icon → jump-icon}/jump-icon.stories.js

@@ -1,6 +1,6 @@
 import feather from "feather-icons";
 export default {
-    title: 'Components/Atoms/Icon',
+    title: 'Components/Icon',
     tags: ['autodocs'],
     argTypes: {
         name: {

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

@@ -0,0 +1 @@
+{"version":3,"file":"jump-icon.stories.js","sourceRoot":"","sources":["../../../src/components/jump-icon/jump-icon.stories.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,eAAe,CAAC;AAEpC,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,YAAY;YAClB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;YACnC,WAAW,EAAE,kDAAkD;SAChE;QACD,KAAK,EAAE;YACL,IAAI,EAAE,mBAAmB;YACzB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,4DAA4D;SAC1E;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,qBAAqB,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,IAAI,gBAAgB,CAAC;AAE/F,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtC,IAAI,CAAC,IAAI,GAAG;IACV,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACnC,KAAK,EAAE,EAAE;CACV,CAAC","sourcesContent":["import feather from 'feather-icons';\n\nexport default {\n  title: 'Components/Icon',\n  tags: ['autodocs'],\n  argTypes: {\n    name: {\n      name: 'Nome Icona',\n      control: 'select',\n      options: Object.keys(feather.icons),\n      description: 'Seleziona il nome dell\\'icona dal menu a tendina'\n    },\n    class: {\n      name: 'Classi aggiuntive',\n      control: 'text',\n      description: 'Aggiungi classi aggiuntive all\\'icona (separate da spazio)'\n    }\n  }\n};\n\nconst Template = (args) => `<jump-icon class=\"${args.class}\" name=\"${args.name}\"></jump-icon>`;\n\nexport const Icon = Template.bind({});\nIcon.args = {\n  name: Object.keys(feather.icons)[0],\n  class: '',\n};"]}

package/dist/collection/components/jump-icon/test/jump-icon.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-icon.e2e.js","sourceRoot":"","sources":["../../../../src/components/jump-icon/test/jump-icon.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;QAEjD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC7C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('jump-icon', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<jump-icon></jump-icon>');\n\n    const element = await page.find('jump-icon');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/{app-icon → jump-icon}/test/jump-icon.spec.js

@@ -1,9 +1,9 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { AppIcon } from "../jump-icon";
+import { JumpIcon } from "../jump-icon";
 describe('jump-icon', () => {
     it('renders', async () => {
         const page = await newSpecPage({
-            components: [AppIcon],
+            components: [JumpIcon],
             html: `<jump-icon></jump-icon>`,
         });
         expect(page.root).toEqualHtml(`

package/dist/collection/components/jump-icon/test/jump-icon.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-icon.spec.js","sourceRoot":"","sources":["../../../../src/components/jump-icon/test/jump-icon.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,yBAAyB;SAChC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { JumpIcon } from '../jump-icon';\n\ndescribe('jump-icon', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [JumpIcon],\n      html: `<jump-icon></jump-icon>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <jump-icon>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </jump-icon>\n    `);\n  });\n});\n"]}

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

@@ -1,24 +1,25 @@
+import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
 export default {
     title: 'Components/Pagination/Pages',
     tags: ['autodocs'],
     argTypes: {
         pagLabel: {
-            name: "Dicitura di paginazione",
+            name: "pagLabel",
             control: 'text',
             description: 'Indica la dicitura di paginazione. Di default è "di".'
         },
         completeVersion: {
-            name: 'Versione con selezione di prodotti',
+            name: 'completeVersion',
             control: 'boolean',
             description: 'Indica se mostrare la versione con selezione di prodotti'
         },
         showAdditionalChrevrons: {
-            name: 'Mostra frecce aggiuntive',
+            name: 'showAdditionalChrevrons',
             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.'
         },
         firstPage: {
-            name: 'Primo elemento',
+            name: 'firstPage',
             control: 'number',
             description: 'Se si tratta di pagination per prodotti, indica il valore min di range di prodotto, altrimenti la prima pagina',
             if: {
@@ -26,13 +27,13 @@ export default {
                 eq: true
             },
         },
-        currentPage: {
-            name: 'Elemento Corrente',
+        initialPage: {
+            name: 'initialPage',
             control: 'number',
             description: 'Se si tratta di pagination per prodotti, indica il valore max di range di prodotto, altrimenti la pagina corrente'
         },
         lastPage: {
-            name: 'Ultima pagina',
+            name: 'lastPage',
             control: 'number',
             description: 'Indica l\'ultima pagina',
             if: {
@@ -41,7 +42,7 @@ export default {
             },
         },
         totalElements: {
-            name: 'Elementi totali',
+            name: 'totalElements',
             control: 'number',
             description: 'Indica il numero totale di elementi disponibili. ',
             if: {
@@ -50,7 +51,7 @@ export default {
             },
         },
         labelElementsPerPage: {
-            name: 'Etichetta elementi per pagina',
+            name: 'labelElementsPerPage',
             control: 'text',
             description: 'Indica l\'etichetta per gli elementi per pagina',
             if: {
@@ -59,7 +60,7 @@ export default {
             },
         },
         elementsRanges: {
-            name: 'Range elementi',
+            name: 'elementsRanges',
             control: 'multi-select',
             options: [10, 20, 30],
             if: {
@@ -70,32 +71,48 @@ export default {
     }
 };
 const Template = (args) => {
-    return `<jump-pagination 
-              current-page="${args.currentPage}" 
-              first-page="${args.firstPage}" 
-              last-page="${args.lastPage}" 
-              total-elements="${args.totalElements}"
-              complete-version=${args.completeVersion} 
-              elements-ranges="${args.elementsRanges}"
-              pag-label="${args.pagLabel}"
-              show-additional-chrevrons=${args.showAdditionalChrevrons}>
-          </jump-pagination>`;
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-pagination ${attributes}></jump-pagination>`);
 };
-export const PaginationPerPagineRidotto = Template.bind({});
+const TemplateWithListenerExample = (args, data) => {
+    let id = data.id;
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-pagination ${attributes}></jump-pagination>
+          <div>La pagina corrente è: <span id="page-number">loading..<span></div>
+          <script>
+          (function() {
+              let container;
+              container = document.querySelector('#story--${id}');
+              container.querySelector('jump-pagination').addEventListener('jump-change-page', (ev) => {
+              container.querySelector('#page-number').innerText = ev.detail.currentPage;
+            });
+          })();
+          </script>`);
+};
+export const Playground = Template.bind({});
+Playground.args = {
+    completeVersion: false,
+    showAdditionalChrevrons: false,
+    firstPage: 1,
+    initialPage: 1,
+    lastPage: 10,
+    pagLabel: 'di'
+};
+export const PaginationPerPagineRidotto = TemplateWithListenerExample.bind({});
 PaginationPerPagineRidotto.args = {
     completeVersion: false,
     showAdditionalChrevrons: false,
     firstPage: 1,
-    currentPage: 5,
+    initialPage: 1,
     lastPage: 10,
     pagLabel: 'di'
 };
-export const PaginationPerPagineCompleto = Template.bind({});
+export const PaginationPerPagineCompleto = TemplateWithListenerExample.bind({});
 PaginationPerPagineCompleto.args = {
     completeVersion: false,
     showAdditionalChrevrons: true,
     firstPage: 1,
-    currentPage: 5,
+    initialPage: 3,
     lastPage: 10,
     pagLabel: 'di'
 };

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

@@ -1 +1 @@
-{"version":3,"file":"jump-pagination-pages.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination-pages.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAC;YACP,IAAI,EAAE,yBAAyB;YAC/B,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;SACrE;QACD,eAAe,EAAE;YACf,IAAI,EAAE,oCAAoC;YAC1C,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0DAA0D;SACxE;QACD,uBAAuB,EAAE;YACvB,IAAI,EAAE,0BAA0B;YAChC,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6IAA6I;SAC3J;QACD,SAAS,EAAE;YACT,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,gHAAgH;YAC7H,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,WAAW,EAAE;YACX,IAAI,EAAE,mBAAmB;YACzB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mHAAmH;SACjI;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;YACpC,EAAE,EAAE;gBACJ,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,KAAK;aACV;SACF;QACD,aAAa,EAAE;YACb,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mDAAmD;YAChE,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,oBAAoB,EAAE;YACpB,IAAI,EAAE,+BAA+B;YACrC,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iDAAiD;YAC5D,EAAE,EAAE;gBACJ,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,cAAc,EAAE;YACd,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;YACrB,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;KAIF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,OAAO;8BACqB,IAAI,CAAC,WAAW;4BAClB,IAAI,CAAC,SAAS;2BACf,IAAI,CAAC,QAAQ;gCACR,IAAI,CAAC,aAAa;iCACjB,IAAI,CAAC,eAAe;iCACpB,IAAI,CAAC,cAAc;2BACzB,IAAI,CAAC,QAAQ;0CACE,IAAI,CAAC,uBAAuB;6BACzC,CAAC;AAC9B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5D,0BAA0B,CAAC,IAAI,GAAG;IAChC,eAAe,EAAE,KAAK;IACtB,uBAAuB,EAAE,KAAK;IAC9B,SAAS,EAAE,CAAC;IACZ,WAAW,EAAE,CAAC;IACd,QAAQ,EAAC,EAAE;IACX,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE7D,2BAA2B,CAAC,IAAI,GAAG;IACjC,eAAe,EAAE,KAAK;IACtB,uBAAuB,EAAE,IAAI;IAC7B,SAAS,EAAE,CAAC;IACZ,WAAW,EAAE,CAAC;IACd,QAAQ,EAAC,EAAE;IACX,QAAQ,EAAE,IAAI;CACf,CAAC","sourcesContent":["export default {\n  title: 'Components/Pagination/Pages',\n  tags: ['autodocs'],\n  argTypes: {\n    pagLabel:{\n      name: \"Dicitura di paginazione\",\n      control: 'text',\n      description: 'Indica la dicitura di paginazione. Di default è \"di\".'\n    },\n    completeVersion: {\n      name: 'Versione con selezione di prodotti',\n      control: 'boolean',\n      description: 'Indica se mostrare la versione con selezione di prodotti'\n    },\n    showAdditionalChrevrons: {\n      name: 'Mostra frecce aggiuntive',\n      control: 'boolean',\n      description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'\n    },\n    firstPage: {\n      name: 'Primo elemento',\n      control: 'number',\n      description: 'Se si tratta di pagination per prodotti, indica il valore min di range di prodotto, altrimenti la prima pagina',\n      if: {\n        arg: 'completeVersion',\n        eq: true\n      },\n    },\n    currentPage: {\n      name: 'Elemento Corrente',\n      control: 'number',\n      description: 'Se si tratta di pagination per prodotti, indica il valore max di range di prodotto, altrimenti la pagina corrente'\n    },\n    lastPage: {\n      name: 'Ultima pagina',\n      control: 'number',\n      description: 'Indica l\\'ultima pagina',\n        if: {\n        arg: 'completeVersion',\n        eq: false\n      },\n    },\n    totalElements: {\n      name: 'Elementi totali',\n      control: 'number',\n      description: 'Indica il numero totale di elementi disponibili. ',\n      if: {\n        arg: 'completeVersion',\n        eq: true\n      },\n    },\n    labelElementsPerPage: {\n      name: 'Etichetta elementi per pagina',\n      control: 'text',\n      description: 'Indica l\\'etichetta per gli elementi per pagina',\n        if: {\n        arg: 'completeVersion',\n        eq: true\n      },\n    },\n    elementsRanges: {\n      name: 'Range elementi',\n      control: 'multi-select', \n      options: [10, 20, 30],\n      if: {\n        arg: 'completeVersion',\n        eq: true\n      }, \n    },\n\n    \n    \n  }\n};\n\nconst Template = (args) => {\n  return `<jump-pagination \n              current-page=\"${args.currentPage}\" \n              first-page=\"${args.firstPage}\" \n              last-page=\"${args.lastPage}\" \n              total-elements=\"${args.totalElements}\"\n              complete-version=${args.completeVersion} \n              elements-ranges=\"${args.elementsRanges}\"\n              pag-label=\"${args.pagLabel}\"\n              show-additional-chrevrons=${args.showAdditionalChrevrons}>\n          </jump-pagination>`;\n};\n\nexport const PaginationPerPagineRidotto = Template.bind({});\n\nPaginationPerPagineRidotto.args = {\n  completeVersion: false,\n  showAdditionalChrevrons: false,\n  firstPage: 1,\n  currentPage: 5,\n  lastPage:10,\n  pagLabel: 'di'\n};\n\nexport const PaginationPerPagineCompleto = Template.bind({});\n\nPaginationPerPagineCompleto.args = {\n  completeVersion: false,\n  showAdditionalChrevrons: true,\n  firstPage: 1,\n  currentPage: 5,\n  lastPage:10,\n  pagLabel: 'di'\n};\n"]}
+{"version":3,"file":"jump-pagination-pages.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination-pages.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAC;YACP,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;SACrE;QACD,eAAe,EAAE;YACf,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0DAA0D;SACxE;QACD,uBAAuB,EAAE;YACvB,IAAI,EAAE,yBAAyB;YAC/B,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6IAA6I;SAC3J;QACD,SAAS,EAAE;YACT,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,gHAAgH;YAC7H,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,WAAW,EAAE;YACX,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mHAAmH;SACjI;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;YACpC,EAAE,EAAE;gBACJ,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,KAAK;aACV;SACF;QACD,aAAa,EAAE;YACb,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mDAAmD;YAChE,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,oBAAoB,EAAE;YACpB,IAAI,EAAE,sBAAsB;YAC5B,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iDAAiD;YAC5D,EAAE,EAAE;gBACJ,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;QACD,cAAc,EAAE;YACd,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;YACrB,EAAE,EAAE;gBACF,GAAG,EAAE,iBAAiB;gBACtB,EAAE,EAAE,IAAI;aACT;SACF;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,eAAe,EAAE,KAAK;IACtB,uBAAuB,EAAE,KAAK;IAC9B,SAAS,EAAE,CAAC;IACZ,WAAW,EAAE,CAAC;IACd,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/E,0BAA0B,CAAC,IAAI,GAAG;IAChC,eAAe,EAAE,KAAK;IACtB,uBAAuB,EAAE,KAAK;IAC9B,SAAS,EAAE,CAAC;IACZ,WAAW,EAAE,CAAC;IACd,QAAQ,EAAC,EAAE;IACX,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhF,2BAA2B,CAAC,IAAI,GAAG;IACjC,eAAe,EAAE,KAAK;IACtB,uBAAuB,EAAE,IAAI;IAC7B,SAAS,EAAE,CAAC;IACZ,WAAW,EAAE,CAAC;IACd,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,IAAI;CACf,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n  title: 'Components/Pagination/Pages',\n  tags: ['autodocs'],\n  argTypes: {\n    pagLabel:{\n      name: \"pagLabel\",\n      control: 'text',\n      description: 'Indica la dicitura di paginazione. Di default è \"di\".'\n    },\n    completeVersion: {\n      name: 'completeVersion',\n      control: 'boolean',\n      description: 'Indica se mostrare la versione con selezione di prodotti'\n    },\n    showAdditionalChrevrons: {\n      name: 'showAdditionalChrevrons',\n      control: 'boolean',\n      description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'\n    },\n    firstPage: {\n      name: 'firstPage',\n      control: 'number',\n      description: 'Se si tratta di pagination per prodotti, indica il valore min di range di prodotto, altrimenti la prima pagina',\n      if: {\n        arg: 'completeVersion',\n        eq: true\n      },\n    },\n    initialPage: {\n      name: 'initialPage',\n      control: 'number',\n      description: 'Se si tratta di pagination per prodotti, indica il valore max di range di prodotto, altrimenti la pagina corrente'\n    },\n    lastPage: {\n      name: 'lastPage',\n      control: 'number',\n      description: 'Indica l\\'ultima pagina',\n        if: {\n        arg: 'completeVersion',\n        eq: false\n      },\n    },\n    totalElements: {\n      name: 'totalElements',\n      control: 'number',\n      description: 'Indica il numero totale di elementi disponibili. ',\n      if: {\n        arg: 'completeVersion',\n        eq: true\n      },\n    },\n    labelElementsPerPage: {\n      name: 'labelElementsPerPage',\n      control: 'text',\n      description: 'Indica l\\'etichetta per gli elementi per pagina',\n        if: {\n        arg: 'completeVersion',\n        eq: true\n      },\n    },\n    elementsRanges: {\n      name: 'elementsRanges',\n      control: 'multi-select', \n      options: [10, 20, 30],\n      if: {\n        arg: 'completeVersion',\n        eq: true\n      }, \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.currentPage;\n            });\n          })();\n          </script>`);\n};\n\nexport const Playground = Template.bind({});\n\nPlayground.args = {\n  completeVersion: false,\n  showAdditionalChrevrons: false,\n  firstPage: 1,\n  initialPage: 1,\n  lastPage: 10,\n  pagLabel: 'di'\n};\n\nexport const PaginationPerPagineRidotto = TemplateWithListenerExample.bind({});\n\nPaginationPerPagineRidotto.args = {\n  completeVersion: false,\n  showAdditionalChrevrons: false,\n  firstPage: 1,\n  initialPage: 1,\n  lastPage:10,\n  pagLabel: 'di'\n};\n\nexport const PaginationPerPagineCompleto = TemplateWithListenerExample.bind({});\n\nPaginationPerPagineCompleto.args = {\n  completeVersion: false,\n  showAdditionalChrevrons: true,\n  firstPage: 1,\n  initialPage: 3,\n  lastPage: 10,\n  pagLabel: 'di'\n};\n"]}

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

@@ -1,24 +1,25 @@
+import { generateAttributesFromArgs } from "../../utils/utils";
 export default {
     title: 'Components/Pagination/Products',
     tags: ['autodocs'],
     argTypes: {
         pagLabel: {
-            name: "Dicitura di paginazione",
+            name: "pagLabel",
             control: 'text',
             description: 'Indica la dicitura di paginazione. Di default è "di".'
         },
         completeVersion: {
-            name: 'Versione con selezione di prodotti',
+            name: 'completeVersion',
             control: 'boolean',
             description: 'Indica se mostrare la versione con selezione di prodotti'
         },
-        showAdditionalChrevrons: {
-            name: 'Mostra frecce aggiuntive',
+        showFirstAndLast: {
+            name: 'showFirstAndLast',
             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.'
         },
         firstPage: {
-            name: 'Primo elemento',
+            name: 'firstPage',
             control: 'number',
             description: 'Se si tratta di pagination per prodotti, indica il valore min di range di prodotto, altrimenti la prima pagina',
             if: {
@@ -26,13 +27,13 @@ export default {
                 eq: true
             },
         },
-        currentPage: {
-            name: 'Elemento Corrente',
+        initialPage: {
+            name: 'initialPage',
             control: 'number',
             description: 'Se si tratta di pagination per prodotti, indica il valore max di range di prodotto, altrimenti la pagina corrente'
         },
         lastPage: {
-            name: 'Ultima pagina',
+            name: 'lastPage',
             control: 'number',
             description: 'Indica l\'ultima pagina',
             if: {
@@ -41,7 +42,7 @@ export default {
             },
         },
         totalElements: {
-            name: 'Elementi totali',
+            name: 'totalElements',
             control: 'number',
             description: 'Indica il numero totale di elementi disponibili. ',
             if: {
@@ -50,7 +51,7 @@ export default {
             },
         },
         labelElementsPerPage: {
-            name: 'Etichetta elementi per pagina',
+            name: 'labelElementsPerPage',
             control: 'text',
             description: 'Indica l\'etichetta per gli elementi per pagina',
             if: {
@@ -59,7 +60,7 @@ export default {
             },
         },
         elementsRanges: {
-            name: 'Range elementi',
+            name: 'elementsRanges',
             control: 'multi-select',
             options: [10, 20, 30],
             if: {
@@ -70,23 +71,16 @@ export default {
     }
 };
 const Template = (args) => {
-    return `<jump-pagination 
-              current-page="${args.currentPage}" 
-              first-page="${args.firstPage}" 
-              last-page="${args.lastPage}" 
-              total-elements="${args.totalElements}"
-              complete-version=${args.completeVersion} 
-              elements-ranges="${args.elementsRanges}"
-              pag-label="${args.pagLabel}"
-              show-additional-chrevrons=${args.showAdditionalChrevrons}>
-          </jump-pagination>`;
+    const attributes = generateAttributesFromArgs(args);
+    console.log('attributes', attributes);
+    return `<jump-pagination ${attributes}></jump-pagination>`;
 };
 export const PaginationPerProdottiRidotto = Template.bind({});
 PaginationPerProdottiRidotto.args = {
     completeVersion: true,
-    showAdditionalChrevrons: false,
+    showFirstAndLast: false,
     firstPage: 1,
-    currentPage: 1,
+    initialPage: 1,
     lastPage: 20,
     totalElements: 150,
     labelElementsPerPage: "Elementi per pagina",
@@ -96,28 +90,13 @@ PaginationPerProdottiRidotto.args = {
 export const PaginationPerProdottiCompleto = Template.bind({});
 PaginationPerProdottiCompleto.args = {
     completeVersion: true,
-    showAdditionalChrevrons: true,
+    showFirstAndLast: true,
     firstPage: 1,
-    currentPage: 1,
+    initialPage: 1,
     lastPage: 20,
     totalElements: 150,
     labelElementsPerPage: "Elementi per pagina",
     elementsRanges: [10, 20, 60, 100],
     pagLabel: 'di'
 };
-// PaginationPerPagineRidotto.args = {
-//   completeVersion: false,
-//   showAdditionalChrevrons: false,
-//   firstPage: 1,
-//   currentPage: 5,
-//   lastPage:10,
-// };
-// export const PaginationPerPagineCompleto = Template.bind({});
-// PaginationPerPagineCompleto.args = {
-//   completeVersion: false,
-//   showAdditionalChrevrons: true,
-//   firstPage: 1,
-//   currentPage: 5,
-//   lastPage:10,
-// };
 //# sourceMappingURL=jump-pagination-products.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"jump-pagination-products.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination-products.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/Pagination/Products',\n  tags: ['autodocs'],\n  argTypes: {\n    pagLabel:{\n      name: \"Dicitura di paginazione\",\n      control: 'text',\n      description: 'Indica la dicitura di paginazione. Di default è \"di\".'\n    },\n    completeVersion: {\n      name: 'Versione con selezione di prodotti',\n      control: 'boolean',\n      description: 'Indica se mostrare la versione con selezione di prodotti'\n    },\n    showAdditionalChrevrons: {\n      name: 'Mostra frecce aggiuntive',\n      control: 'boolean',\n      description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'\n    },\n    firstPage: {\n      name: 'Primo elemento',\n      control: 'number',\n      description: 'Se si tratta di pagination per prodotti, indica il valore min di range di prodotto, altrimenti la prima pagina',\n      if: {\n        arg: 'completeVersion',\n        eq: true\n      },\n    },\n    currentPage: {\n      name: 'Elemento Corrente',\n      control: 'number',\n      description: 'Se si tratta di pagination per prodotti, indica il valore max di range di prodotto, altrimenti la pagina corrente'\n    },\n    lastPage: {\n      name: 'Ultima pagina',\n      control: 'number',\n      description: 'Indica l\\'ultima pagina',\n        if: {\n        arg: 'completeVersion',\n        eq: false\n      },\n    },\n    totalElements: {\n      name: 'Elementi totali',\n      control: 'number',\n      description: 'Indica il numero totale di elementi disponibili. ',\n      if: {\n        arg: 'completeVersion',\n        eq: true\n      },\n    },\n    labelElementsPerPage: {\n      name: 'Etichetta elementi per pagina',\n      control: 'text',\n      description: 'Indica l\\'etichetta per gli elementi per pagina',\n        if: {\n        arg: 'completeVersion',\n        eq: true\n      },\n    },\n    elementsRanges: {\n      name: 'Range elementi',\n      control: 'multi-select', \n      options: [10, 20, 30],\n      if: {\n        arg: 'completeVersion',\n        eq: true\n      }, \n    },\n\n    \n    \n  }\n};\n\nconst Template = (args) => {\n  return `<jump-pagination \n              current-page=\"${args.currentPage}\" \n              first-page=\"${args.firstPage}\" \n              last-page=\"${args.lastPage}\" \n              total-elements=\"${args.totalElements}\"\n              complete-version=${args.completeVersion} \n              elements-ranges=\"${args.elementsRanges}\"\n              pag-label=\"${args.pagLabel}\"\n              show-additional-chrevrons=${args.showAdditionalChrevrons}>\n          </jump-pagination>`;\n};\n\nexport const PaginationPerProdottiRidotto = Template.bind({});\n\nPaginationPerProdottiRidotto.args = {\n  completeVersion: true,\n  showAdditionalChrevrons: false,\n  firstPage: 1,\n  currentPage: 1,\n  lastPage:20,\n  totalElements: 150,\n  labelElementsPerPage: \"Elementi per pagina\",\n  elementsRanges: [10, 20, 60, 100],\n  pagLabel: 'di'\n};\n\nexport const PaginationPerProdottiCompleto = Template.bind({});\n\nPaginationPerProdottiCompleto.args = {\n  completeVersion: true,\n  showAdditionalChrevrons: true,\n  firstPage: 1,\n  currentPage: 1,\n  lastPage:20,\n  totalElements: 150,\n  labelElementsPerPage: \"Elementi per pagina\",\n  elementsRanges: [10, 20, 60, 100],\n  pagLabel: 'di'\n};\n\n\n// PaginationPerPagineRidotto.args = {\n//   completeVersion: false,\n//   showAdditionalChrevrons: false,\n//   firstPage: 1,\n//   currentPage: 5,\n//   lastPage:10,\n// };\n\n// export const PaginationPerPagineCompleto = Template.bind({});\n\n// PaginationPerPagineCompleto.args = {\n//   completeVersion: false,\n//   showAdditionalChrevrons: true,\n//   firstPage: 1,\n//   currentPage: 5,\n//   lastPage:10,\n// };\n"]}
+{"version":3,"file":"jump-pagination-products.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination-products.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n  title: 'Components/Pagination/Products',\n  tags: ['autodocs'],\n  argTypes: {\n    pagLabel:{\n      name: \"pagLabel\",\n      control: 'text',\n      description: 'Indica la dicitura di paginazione. Di default è \"di\".'\n    },\n    completeVersion: {\n      name: 'completeVersion',\n      control: 'boolean',\n      description: 'Indica se mostrare la versione con selezione di prodotti'\n    },\n    showFirstAndLast: {\n      name: 'showFirstAndLast',\n      control: 'boolean',\n      description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'\n    },\n    firstPage: {\n      name: 'firstPage',\n      control: 'number',\n      description: 'Se si tratta di pagination per prodotti, indica il valore min di range di prodotto, altrimenti la prima pagina',\n      if: {\n        arg: 'completeVersion',\n        eq: true\n      },\n    },\n    initialPage: {\n      name: 'initialPage',\n      control: 'number',\n      description: 'Se si tratta di pagination per prodotti, indica il valore max di range di prodotto, altrimenti la pagina corrente'\n    },\n    lastPage: {\n      name: 'lastPage',\n      control: 'number',\n      description: 'Indica l\\'ultima pagina',\n        if: {\n        arg: 'completeVersion',\n        eq: false\n      },\n    },\n    totalElements: {\n      name: 'totalElements',\n      control: 'number',\n      description: 'Indica il numero totale di elementi disponibili. ',\n      if: {\n        arg: 'completeVersion',\n        eq: true\n      },\n    },\n    labelElementsPerPage: {\n      name: 'labelElementsPerPage',\n      control: 'text',\n      description: 'Indica l\\'etichetta per gli elementi per pagina',\n        if: {\n        arg: 'completeVersion',\n        eq: true\n      },\n    },\n    elementsRanges: {\n      name: 'elementsRanges',\n      control: 'multi-select', \n      options: [10, 20, 30],\n      if: {\n        arg: 'completeVersion',\n        eq: true\n      }, \n    },\n  }\n};\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  console.log('attributes', attributes);\n  return `<jump-pagination ${attributes}></jump-pagination>`;\n};\n\nexport const PaginationPerProdottiRidotto = Template.bind({});\n\nPaginationPerProdottiRidotto.args = {\n  completeVersion: true,\n  showFirstAndLast: false,\n  firstPage: 1,\n  initialPage: 1,\n  lastPage:20,\n  totalElements: 150,\n  labelElementsPerPage: \"Elementi per pagina\",\n  elementsRanges: [10, 20, 60, 100],\n  pagLabel: 'di'\n};\n\nexport const PaginationPerProdottiCompleto = Template.bind({});\n\nPaginationPerProdottiCompleto.args = {\n  completeVersion: true,\n  showFirstAndLast: true,\n  firstPage: 1,\n  initialPage: 1,\n  lastPage:20,\n  totalElements: 150,\n  labelElementsPerPage: \"Elementi per pagina\",\n  elementsRanges: [10, 20, 60, 100],\n  pagLabel: 'di'\n};"]}

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

@@ -5,6 +5,7 @@
 .JumpPagination {
   --pagination-label-color: var(--neutral-grey-secondary);
   --pagination-arrows-color: var(--neutral-grey-secondary);
+  --pagination-arrows-disabled: #CBCBCB;
   font-family: var(--ff-primary);
 }
 .JumpPagination__Wrapper {
@@ -35,6 +36,18 @@
   align-items: center;
   gap: 10px;
 }
+.JumpPagination__Wrapper .indicators .arrow button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0px;
+  display: flex;
+  align-items: center;
+}
+.JumpPagination__Wrapper .indicators .arrow button:disabled {
+  cursor: not-allowed;
+  color: var(--pagination-arrows-disabled);
+}
 .JumpPagination__Wrapper .indicators .elements {
   color: var(--pagination-label-color);
   display: flex;