@jumpgroup/jump-design-system 0.2.2 → 0.2.4

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

@@ -2,32 +2,54 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-79e97f36.js');
+const index = require('./index-41aaa52a.js');
 
-const jumpPaginationCss = ":host{display:block}.JumpPagination{--pagination-label-color:var(--neutral-grey-secondary);--pagination-arrows-color:var(--neutral-grey-secondary);font-family:var(--ff-primary)}.JumpPagination__Wrapper{display:flex;justify-content:space-between}.JumpPagination__Wrapper .elementsPerPage{display:flex;gap:1rem;align-items:center}.JumpPagination__Wrapper .elementsPerPage label{color:var(--pagination-label-color);font-size:14px;font-weight:normal}.JumpPagination__Wrapper .indicators{font-size:16px;font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--pagination-label-color)}.JumpPagination__Wrapper .indicators .arrow{color:var(--pagination-arrows-color);display:flex;align-items:center;gap:10px}.JumpPagination__Wrapper .indicators .elements{color:var(--pagination-label-color);display:flex;align-items:center;gap:5px}";
+const jumpPaginationCss = ":host{display:block}.JumpPagination{--pagination-label-color:var(--neutral-grey-secondary);--pagination-arrows-color:var(--neutral-grey-secondary);--pagination-arrows-disabled:#CBCBCB;font-family:var(--ff-primary)}.JumpPagination__Wrapper{display:flex;justify-content:space-between}.JumpPagination__Wrapper .elementsPerPage{display:flex;gap:1rem;align-items:center}.JumpPagination__Wrapper .elementsPerPage label{color:var(--pagination-label-color);font-size:14px;font-weight:normal}.JumpPagination__Wrapper .indicators{font-size:16px;font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--pagination-label-color)}.JumpPagination__Wrapper .indicators .arrow{color:var(--pagination-arrows-color);display:flex;align-items:center;gap:10px}.JumpPagination__Wrapper .indicators .arrow button{background-color:transparent;border:none;cursor:pointer;padding:0px;display:flex;align-items:center}.JumpPagination__Wrapper .indicators .arrow button:disabled{cursor:not-allowed;color:var(--pagination-arrows-disabled)}.JumpPagination__Wrapper .indicators .elements{color:var(--pagination-label-color);display:flex;align-items:center;gap:5px}";
 const JumpPaginationStyle0 = jumpPaginationCss;
 
 const JumpPagination = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.jumpChangePage = index.createEvent(this, "jump-change-page", 7);
+        this.firstPage = 1;
+        this.currentPage = undefined;
         this.totalElements = undefined;
         this.pagLabel = 'di';
-        this.currentPage = undefined;
-        this.lastPage = undefined;
+        this.initialPage = 1;
+        this.lastPage = 10;
         this.labelElementsPerPage = 'Elementi per pagina';
         this.elementsRanges = [10, 20, 60, 100];
-        this.firstPage = undefined;
         this.completeVersion = false;
-        this.showAdditionalChrevrons = false;
+        this.showFirstAndLast = false;
+    }
+    watchCurrentPage(newValue, oldValue) {
+        let details = {
+            currentPage: newValue,
+            previousPage: oldValue,
+            firstPage: this.firstPage,
+            lastPage: this.lastPage,
+            direction: newValue > oldValue ? 'next' : 'prev'
+        };
+        this.jumpChangePage.emit(details);
+    }
+    /* ---------------------- @LIFECYCLE ------------------------- */
+    componentWillLoad() {
+        this.currentPage = this.initialPage;
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '97d153323192675905ef7efc310edd9544917194', class: "JumpPagination" }, index.h("div", { key: '706326dbd689f2250863df55db66a868deb98465', class: "JumpPagination__Wrapper" }, this.completeVersion &&
-            index.h("div", { class: "elementsPerPage" }, index.h("label", { htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), index.h("select", { name: "elements", id: "elements" }, this.elementsRanges.map((range) => (index.h("option", { value: range }, range))))), index.h("div", { key: 'ba6b84fcfc0cb4d2f0f52767f2be99386a6f004c', class: "indicators" }, index.h("div", { key: 'b0786315ca18db1608bd07c5658ec37ae9931802', class: "elements" }, this.completeVersion ?
-            index.h("span", null, index.h("span", null, this.firstPage), " - ", index.h("span", null, this.currentPage), " di ", index.h("span", null, this.totalElements))
+        console.log('completeVersion', this.completeVersion);
+        return (index.h(index.Host, { key: '32e300881b3a78d25edf6480e9a8a6594f907c76', class: "JumpPagination" }, index.h("div", { key: '0c4e133e409740331083588fbb046d79c2878ea9', class: "JumpPagination__Wrapper" }, this.completeVersion &&
+            index.h("div", { key: '13daa8e819ec294b50823becc7e8d904eff66f32', class: "elementsPerPage" }, index.h("label", { key: '162555e0ebfc295d96d5ba358ec879eba1730746', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), index.h("select", { key: 'c4e99d784347a67c5616b3ed0ca25934dbdae55f', name: "elements", id: "elements" }, this.elementsRanges.map((range) => (index.h("option", { value: range }, range))))), index.h("div", { key: '5eb516226cf5bcb23e575109371c4f55ca235e04', class: "indicators" }, index.h("div", { key: '58a8655b582e8cdcd9f8c553343d9e407dd66971', class: "elements" }, this.completeVersion ?
+            index.h("span", null, index.h("span", null, this.firstPage), " - ", index.h("span", null, this.currentPage), " ", this.pagLabel, " ", index.h("span", null, this.totalElements))
             :
-                index.h("span", null, index.h("span", null, this.currentPage), " di ", index.h("span", null, this.lastPage))), index.h("div", { key: '93343a7729d7bbd8512d65bc1877041c25f77cdf', class: "arrow" }, this.showAdditionalChrevrons && index.h("jump-icon", { id: "first-page", name: "chevrons-left" }), index.h("jump-icon", { key: 'ed735fb41710b632485cc9a24151590842fbdc48', id: "prev-page", name: "chevron-left" }), index.h("jump-icon", { key: 'fffdbf1d84cee94bf0d2ab561cb36d4de82cc763', id: "next-page", name: "chevron-right" }), this.showAdditionalChrevrons && index.h("jump-icon", { id: "last-page", name: "chevrons-right" }))))));
+                index.h("span", null, index.h("span", null, this.currentPage), " ", this.pagLabel, " ", index.h("span", null, this.lastPage))), index.h("div", { key: '92b5476c223e477532726304c282ed34e1acccc7', class: "arrow" }, this.showFirstAndLast &&
+            index.h("button", { key: '740c67ee4f73c5a55a022b2281913d8652deeed2', onClick: () => { this.currentPage = this.firstPage; }, disabled: (this.currentPage === this.firstPage) ? true : false }, " ", index.h("jump-icon", { key: '5a880ea7c01afcc8ae9a4e84934e386e0edab58c', slot: "prefix", name: "chevrons-left" }), "   "), index.h("button", { key: '08fe7f7faa6c7645151ec3ea2b4bf4247f082a2d', onClick: () => { this.currentPage--; }, disabled: (this.currentPage === this.firstPage) ? true : false }, " ", index.h("jump-icon", { key: '04a972584533f1272b10c7e9068ce332aef77299', slot: "prefix", name: "chevron-left" }), "   "), index.h("button", { key: '0ea012c03b06b587296c9190eece67351579b6e3', onClick: () => { this.currentPage++; }, disabled: (this.currentPage === this.lastPage) ? true : false }, " ", index.h("jump-icon", { key: '155d6a407989f9cc5d38832df8fb98a3505c3113', slot: "prefix", name: "chevron-right" }), "   "), this.showFirstAndLast &&
+            index.h("button", { key: 'be46c67831f6d732d47e9340aca1a43a650af958', onClick: () => { this.currentPage = this.lastPage; }, disabled: (this.currentPage === this.lastPage) ? true : false }, " ", index.h("jump-icon", { key: 'b04a3d8a8726f945d5639761dde68a300e40f80a', slot: "prefix", name: "chevrons-right" }), "   "))))));
     }
+    static get watchers() { return {
+        "currentPage": ["watchCurrentPage"]
+    }; }
 };
 JumpPagination.style = JumpPaginationStyle0;
 

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

@@ -1 +1 @@
-{"file":"jump-pagination.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,o1BAAo1B,CAAC;AAC/2B,6BAAe,iBAAiB;;MCMnB,cAAc;;;;wBAMiB,IAAI;;;oCAWU,qBAAqB;8BAKpB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;;+BAUtB,KAAK;uCAEG,KAAK;;IAEjE,MAAM;;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC1BD,kEAAK,KAAK,EAAC,yBAAyB,IAChC,IAAI,CAAC,eAAe;YACpBA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,mBAAO,OAAO,EAAC,UAAU,IAAE,MAAA,IAAI,CAAC,oBAAoB,mCAAI,mBAAmB,CAAS,EAChFA,oBAAQ,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,IAClC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,MAC7BA,oBAAQ,KAAK,EAAE,KAAK,IAAG,KAAK,CAAU,CACvC,CAAC,CACK,CACT,EAERA,kEAAK,KAAK,EAAC,YAAY,IACrBA,kEAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,eAAe;YACnBA,sBACEA,sBAAO,IAAI,CAAC,SAAS,CAAQ,SAAGA,sBAAO,IAAI,CAAC,WAAW,CAAQ,UAAIA,sBAAO,IAAI,CAAC,aAAa,CAAQ,CAC/F;;gBAGPA,sBACEA,sBAAO,IAAI,CAAC,WAAW,CAAQ,UAAIA,sBAAO,IAAI,CAAC,QAAQ,CAAQ,CAC1D,CAEL,EACNA,kEAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,uBAAuB,IAAIA,uBAAW,EAAE,EAAC,YAAY,EAAC,IAAI,EAAC,eAAe,GAAa,EAC7FA,wEAAW,EAAE,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,GAAa,EAC1DA,wEAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,eAAe,GAAa,EAC3D,IAAI,CAAC,uBAAuB,IAAIA,uBAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,gBAAgB,GAAa,CAC1F,CACF,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.JumpPagination {\n  --pagination-label-color: var(--neutral-grey-secondary);\n  --pagination-arrows-color: var(--neutral-grey-secondary);\n  \n  font-family: var(--ff-primary);\n\n  &__Wrapper {\n    display: flex;\n    justify-content: space-between;\n\n    .elementsPerPage {\n      display: flex;\n      gap: 1rem;\n      align-items: center;\n\n        label {\n            color: var(--pagination-label-color);\n            font-size: 14px;\n            font-weight: normal;\n          }\n    } \n    \n    .indicators {\n      font-size: 16px;\n      font-weight: normal;\n      display: flex;\n      justify-content: space-between;\n      gap: 20px;\n      \n      color: var(--pagination-label-color);\n\n      .arrow {\n        color: var(--pagination-arrows-color);\n        display: flex;\n        align-items: center;\n        gap: 10px;\n      }\n\n      .elements {\n        color: var(--pagination-label-color);\n        display: flex;\n        align-items: center;\n        gap: 5px;\n      }\n    }\n   \n  }\n \n}","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'jump-pagination',\n  styleUrl: 'jump-pagination.scss',\n  shadow: false,\n})\nexport class JumpPagination {\n  \n  /* ---------------------- @PROPERTIES ------------------------- */\n\n  @Prop({ reflect: true }) totalElements: number;\n\n  @Prop({reflect: true}) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n  /**\n   * \n   */\n  @Prop({ reflect: true }) currentPage: number;\n  @Prop({ reflect: true }) lastPage: number; \n\n  /**\n   * Label for the elements per page select\n   */\n  @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n  /**\n   * Values for the elements per page select\n   */\n  @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n  /**\n   * Indicates the first page/product of the list\n   */\n  @Prop({ reflect: true }) firstPage: number;\n\n  /**\n   * If true, the component will show the complete version of the pagination, with elements informations\n   */\n  @Prop({ reflect: true }) completeVersion: boolean = false;\n\n  @Prop({ reflect: true }) showAdditionalChrevrons: boolean = false;\n\n  render() {\n    return (\n      <Host class=\"JumpPagination\">\n        <div class=\"JumpPagination__Wrapper\">\n          { this.completeVersion && \n            <div class=\"elementsPerPage\">\n              <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n                  <select name=\"elements\" id=\"elements\">\n                    {this.elementsRanges.map((range) => (\n                      <option value={range}>{range}</option>\n                    ))}\n                  </select>\n            </div> \n          }\n          <div class=\"indicators\"> \n            <div class=\"elements\">\n              {this.completeVersion ?\n                <span>\n                  <span>{this.firstPage}</span> - <span>{this.currentPage}</span> di <span>{this.totalElements}</span>\n                </span>\n                \n              :\n                <span>\n                  <span>{this.currentPage}</span> di <span>{this.lastPage}</span>\n                </span>\n              }\n            </div>\n            <div class=\"arrow\">\n              {this.showAdditionalChrevrons && <jump-icon id=\"first-page\" name=\"chevrons-left\"></jump-icon>}\n              <jump-icon id=\"prev-page\" name=\"chevron-left\"></jump-icon>\n              <jump-icon id=\"next-page\"  name=\"chevron-right\"></jump-icon>\n              {this.showAdditionalChrevrons && <jump-icon id=\"last-page\"  name=\"chevrons-right\"></jump-icon>}\n            </div> \n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"jump-pagination.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.JumpPagination {\n  --pagination-label-color: var(--neutral-grey-secondary);\n  --pagination-arrows-color: var(--neutral-grey-secondary);\n  --pagination-arrows-disabled: #CBCBCB;\n  \n  font-family: var(--ff-primary);\n\n  &__Wrapper {\n    display: flex;\n    justify-content: space-between;\n\n    .elementsPerPage {\n      display: flex;\n      gap: 1rem;\n      align-items: center;\n\n        label {\n            color: var(--pagination-label-color);\n            font-size: 14px;\n            font-weight: normal;\n          }\n    } \n    \n    .indicators {\n      font-size: 16px;\n      font-weight: normal;\n      display: flex;\n      justify-content: space-between;\n      gap: 20px;\n      \n      color: var(--pagination-label-color);\n\n      .arrow {\n        color: var(--pagination-arrows-color);\n        display: flex;\n        align-items: center;\n        gap: 10px;\n\n        button {\n          background-color: transparent;\n          border: none;\n          cursor: pointer;\n          padding: 0px;\n              display: flex;\n                align-items: center;\n        }\n\n        button:disabled {\n          cursor: not-allowed;\n          color: var(--pagination-arrows-disabled); \n        \n      }\n    }\n\n      .elements {\n        color: var(--pagination-label-color);\n        display: flex;\n        align-items: center;\n        gap: 5px;\n      }\n    }\n   \n  }\n \n}","import { Component, Host, State, Event, EventEmitter, Prop, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'jump-pagination',\n  styleUrl: 'jump-pagination.scss',\n  shadow: false,\n})\nexport class JumpPagination {\n  \n  /* ---------------------- @STATE ------------------------- */\n  /**\n   * Indicates the first page/product of the list\n   */\n  @State() firstPage: number = 1;\n\n  @State() currentPage: number;\n\n  @Watch('currentPage')\n  watchCurrentPage(newValue: number, oldValue: number) {\n    let details = {\n      currentPage: newValue,\n      previousPage: oldValue,\n      firstPage: this.firstPage,\n      lastPage: this.lastPage,\n      direction: newValue > oldValue ? 'next' : 'prev'\n    };\n\n    this.jumpChangePage.emit(details);\n  }\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n\n  @Prop({reflect:true}) totalElements: number;\n\n  @Prop({reflect:true}) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n  @Prop({reflect:true}) initialPage: number = 1;\n\n  @Prop({reflect:true}) lastPage: number = 10; \n\n  /**\n   * Label for the elements per page select\n   */\n  @Prop({reflect:true}) labelElementsPerPage: string = 'Elementi per pagina';\n\n  /**\n   * Values for the elements per page select\n   */\n   @Prop({reflect:true}) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n\n  /**\n   * If true, the component will show the complete version of the pagination, with elements informations\n   */\n   @Prop({reflect:true}) completeVersion: boolean = false;\n\n   @Prop({reflect:true}) showFirstAndLast: boolean = false;\n\n  /* ---------------------- @EVENTS ------------------------- */\n  @Event({ eventName: 'jump-change-page' }) jumpChangePage: EventEmitter;\n\n  /* ---------------------- @LIFECYCLE ------------------------- */\n  componentWillLoad() {\n    this.currentPage = this.initialPage;\n  }\n\n  render() {\n    console.log('completeVersion', this.completeVersion);\n    return (\n      <Host class=\"JumpPagination\">\n        <div class=\"JumpPagination__Wrapper\">\n          { this.completeVersion && \n            <div class=\"elementsPerPage\">\n              <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n                  <select name=\"elements\" id=\"elements\">\n                    {this.elementsRanges.map((range) => (\n                      <option value={range}>{range}</option>\n                    ))}\n                  </select>\n            </div> \n          }\n          <div class=\"indicators\"> \n            <div class=\"elements\">\n              {this.completeVersion ?\n                <span>\n                  <span>{this.firstPage}</span> - <span>{this.currentPage}</span> {this.pagLabel} <span>{this.totalElements}</span>\n                </span>\n                \n              :\n                <span>\n                  <span>{this.currentPage}</span> {this.pagLabel} <span>{this.lastPage}</span>\n                </span>\n              }\n            </div>\n            <div class=\"arrow\">\n              {this.showFirstAndLast &&\n                <button \n                  onClick={() => {this.currentPage = this.firstPage} }\n                  disabled={(this.currentPage === this.firstPage) ? true : false}\n                > <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon>   </button>\n              }\n              <button \n                onClick={() => {this.currentPage--}} \n                disabled={(this.currentPage === this.firstPage) ? true : false}\n              > <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon>   </button>\n              <button \n                onClick={() => {this.currentPage++}}\n                disabled={(this.currentPage === this.lastPage) ? true : false}\n                > <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon>   </button>\n              {this.showFirstAndLast &&\n                <button \n                  onClick={() => {this.currentPage = this.lastPage}}\n                  disabled={(this.currentPage === this.lastPage) ? true : false}\n                  > <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon>   </button> \n              }\n            </div> \n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

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

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-41aaa52a.js');
+
+const jumpTabCss = ":host{display:block}";
+const JumpTabStyle0 = jumpTabCss;
+
+const JumpTab = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.activeTab = undefined;
+        this.tabNames = undefined;
+    }
+    componentWillLoad() {
+        console.log('Component is about to be rendered');
+        console.log('active', this.activeTab);
+        console.log('tabNames', this.tabNames);
+    }
+    render() {
+        return (index.h(index.Host, { key: '08d20c1e157286fd4034790df04c2f7113e57e43', class: "JumpTab" }, (this.tabNames && this.activeTab) && this.tabNames.map((tabName) => (index.h("div", { class: `JumpTab__Tab ${this.activeTab === tabName ? 'active' : ''}` }, tabName)))));
+    }
+};
+JumpTab.style = JumpTabStyle0;
+
+exports.jump_tab = JumpTab;
+
+//# sourceMappingURL=jump-tab.cjs.entry.js.map

package/dist/cjs/jump-tab.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"jump-tab.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,sBAAsB,CAAC;AAC1C,sBAAe,UAAU;;MCMZ,OAAO;;;yBAGU,SAAS;wBACH,SAAS;;IAE3C,iBAAiB;QACf,OAAO,CAAC,GAAG,CAAC,mCAAmC,CAAC,CAAC;QACjD,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACrC,OAAO,CAAC,GAAG,CAAC,UAAU,EAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACvC;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAC,SAAS,IAClB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MAC9DD,iBAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,QAAQ,GAAG,EAAE,EAAE,IACrE,OAAO,CACJ,CACP,CAAC,CACG,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'jump-tab',\n  styleUrl: 'jump-tab.scss',\n  shadow: true,\n})\nexport class JumpTab {\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n  @Prop() activeTab: string = undefined;\n  @Prop() tabNames: Array<string> = undefined;\n\n  componentWillLoad() {\n    console.log('Component is about to be rendered');\n    console.log('active',this.activeTab);\n    console.log('tabNames',this.tabNames);\n  }\n\n  render() {\n    return (\n      <Host class=\"JumpTab\">\n        {(this.tabNames && this.activeTab) && this.tabNames.map((tabName) => (\n          <div class={`JumpTab__Tab ${this.activeTab === tabName ? 'active' : ''}`}>\n            {tabName}\n          </div>\n        ))}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-79e97f36.js');
+const index = require('./index-41aaa52a.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"pagLabel":[513,"pag-label"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-badge.cjs",[[0,"jump-badge",{"label":[513],"variant":[513]}]]],["jump-button.cjs",[[4,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[516],"dark":[516],"shadow":[516],"border":[516],"borderRadius":[516,"border-radius"],"topBorderContentRadius":[516,"top-border-content-radius"],"boxed":[516],"roundedMedia":[516,"rounded-media"],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"],"videoSrc":[513,"video-src"]}]]],["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
+  return index.bootstrapLazy([["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"pagLabel":[513,"pag-label"],"initialPage":[514,"initial-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"completeVersion":[516,"complete-version"],"showFirstAndLast":[516,"show-first-and-last"],"firstPage":[32],"currentPage":[32]},null,{"currentPage":["watchCurrentPage"]}]]],["jump-badge.cjs",[[0,"jump-badge",{"label":[1],"variant":[1]}]]],["jump-button.cjs",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-tab.cjs",[[1,"jump-tab",{"activeTab":[1,"active-tab"],"tabNames":[16]}]]],["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,15 +1,16 @@
 {
   "entries": [
-    "components/app-icon/jump-icon.js",
     "components/jump-badge/jump-badge.js",
     "components/jump-button/jump-button.js",
     "components/jump-card/jump-card.js",
-    "components/jump-pagination/jump-pagination.js"
+    "components/jump-icon/jump-icon.js",
+    "components/jump-pagination/jump-pagination.js",
+    "components/jump-tab/jump-tab.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.13.0",
-    "typescriptVersion": "5.4.2"
+    "version": "4.15.0",
+    "typescriptVersion": "5.4.4"
   },
   "collections": [],
   "bundles": []

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

@@ -8,7 +8,7 @@ jump-badge {
   align-items: center;
   justify-content: center;
   font-size: var(--fs-300);
-  font-weight: var(--fw-900);
+  font-weight: var(--fw-700);
   line-height: 1;
   border-radius: var(--jump-bafge-border-radius);
   border: solid 1px var(--jump-bafge-border-radius);

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

@@ -1,11 +1,11 @@
 import { Host, h } from "@stencil/core";
-export class AppCard {
+export class AppBadge {
     constructor() {
         this.label = '';
         this.variant = 'primary';
     }
     render() {
-        return (h(Host, { key: '8a7bf8245f0edf5aa45f70be833001e7c2899a5e', variant: this.variant }, this.label));
+        return (h(Host, { key: '1a0a2b2bf95c1217ca9546b19c4ff6b25ca2a86a', variant: this.variant }, this.label));
     }
     static get is() { return "jump-badge"; }
     static get originalStyleUrls() {
@@ -35,7 +35,7 @@ export class AppCard {
                     "text": "Indicates the label of the badge"
                 },
                 "attribute": "label",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "''"
             },
             "variant": {
@@ -53,7 +53,7 @@ export class AppCard {
                     "text": "Indicates the variant of the badge"
                 },
                 "attribute": "variant",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "'primary'"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"jump-badge.js","sourceRoot":"","sources":["../../../src/components/jump-badge/jump-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,OAAO;;qBAIqB,EAAE;uBAKe,SAAS;;IAEjE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACxB,IAAI,CAAC,KAAK,CACN,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'jump-badge',\n  styleUrl: 'jump-badge.scss',\n  shadow: false,\n})\nexport class AppCard {\n  /**\n   * Indicates the label of the badge\n   */\n  @Prop({reflect: true}) label: string = '';\n\n  /**\n   * Indicates the variant of the badge\n   */\n  @Prop({reflect: true}) variant: 'primary'|'secondary' = 'primary';\n\n  render() {\n    return (\n      <Host variant={this.variant}>\n        {this.label}\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"jump-badge.js","sourceRoot":"","sources":["../../../src/components/jump-badge/jump-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;;qBAIK,EAAE;uBAKe,SAAS;;IAElD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACxB,IAAI,CAAC,KAAK,CACN,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'jump-badge',\n  styleUrl: 'jump-badge.scss',\n  shadow: false,\n})\nexport class AppBadge {\n  /**\n   * Indicates the label of the badge\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Indicates the variant of the badge\n   */\n  @Prop() variant: 'primary'|'secondary' = 'primary';\n\n  render() {\n    return (\n      <Host variant={this.variant}>\n        {this.label}\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/jump-badge/test/jump-badge.spec.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"jump-badge.spec.js","sourceRoot":"","sources":["../../../../src/components/jump-badge/test/jump-badge.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,2BAA2B;SAClC,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 { AppCard } from '../jump-badge';\n\ndescribe('jump-badge', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [AppCard],\n      html: `<jump-badge></jump-badge>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <jump-badge>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </jump-badge>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"jump-badge.spec.js","sourceRoot":"","sources":["../../../../src/components/jump-badge/test/jump-badge.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,2BAA2B;SAClC,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 { AppBadge } from '../jump-badge';\n\ndescribe('jump-badge', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [AppBadge],\n      html: `<jump-badge></jump-badge>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <jump-badge>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </jump-badge>\n    `);\n  });\n});\n"]}

package/dist/collection/components/jump-button/jump-button-anchor.stories.js

@@ -0,0 +1,87 @@
+import { generateAttributesFromArgs } from "../../utils/utils";
+export default {
+    title: 'Components/Button/Anchor',
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            name: 'Variante',
+            description: 'Imposta la variante di colore del link',
+            control: 'select',
+            options: [
+                'primary',
+                'secondary',
+                'neutral',
+                'white'
+            ],
+        },
+        size: {
+            name: 'Dimensione',
+            description: 'Imposta la dimensione del link',
+            control: 'select',
+            options: [
+                'small',
+                'medium',
+                'large'
+            ],
+            labels: {
+                small: 'Piccolo',
+                medium: 'Medio',
+                large: 'Grande'
+            }
+        },
+        disabled: {
+            name: 'Disabilitato',
+            description: 'Imposta se il link deve essere disabilitato',
+            control: 'boolean'
+        },
+        text: {
+            name: 'Testo',
+            description: 'Imposta se il link è solo testo, quindi senza bordo, sfondo e padding',
+            control: 'boolean'
+        },
+        id: {
+            name: 'ID',
+            description: 'Imposta l\'id del link',
+            control: 'text'
+        },
+    }
+};
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return `<jump-button ${attributes} href="www.jumpgroup.it" target="_blank"> Scopri di più </jump-button>`;
+};
+const TemplateWithIcon = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return `<jump-button ${attributes} href="www.jumpgroup.it" target="_blank"> <jump-icon slot="suffix" name="arrow-right"></jump-icon> Scopri di più </jump-button>`;
+};
+export const LinkPrimary = Template.bind({});
+LinkPrimary.args = {
+    variant: 'primary',
+    size: 'small',
+    text: true,
+};
+export const LinkSecondary = Template.bind({});
+LinkSecondary.args = {
+    variant: 'secondary',
+    size: 'medium',
+    text: true,
+};
+export const LinkNeutral = Template.bind({});
+LinkNeutral.args = {
+    variant: 'neutral',
+    size: 'large',
+    text: true,
+};
+export const LinkWhite = Template.bind({});
+LinkWhite.args = {
+    variant: 'white',
+    size: 'medium',
+    text: true,
+};
+export const LinkWithIcon = TemplateWithIcon.bind({});
+LinkWithIcon.args = {
+    variant: 'primary',
+    size: 'medium',
+    text: true,
+};
+//# sourceMappingURL=jump-button-anchor.stories.js.map

package/dist/collection/components/jump-button/jump-button-anchor.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-button-anchor.stories.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button-anchor.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,SAAS;gBACT,WAAW;gBACX,SAAS;gBACT,OAAO;aACR;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,YAAY;YAClB,WAAW,EAAE,gCAAgC;YAC7C,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,OAAO;gBACP,QAAQ;gBACR,OAAO;aACR;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,OAAO;gBACf,KAAK,EAAE,QAAQ;aAChB;SACF;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,cAAc;YACpB,WAAW,EAAE,6CAA6C;YAC1D,OAAO,EAAE,SAAS;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,uEAAuE;YACpF,OAAO,EAAE,SAAS;SACnB;QACD,EAAE,EAAE;YACF,IAAI,EAAE,IAAI;YACV,WAAW,EAAE,wBAAwB;YACrC,OAAO,EAAE,MAAM;SAChB;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,gBAAgB,UAAU,wEAAwE,CAAA;AAC3G,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,EAAE;IAChC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,gBAAgB,UAAU,iIAAiI,CAAA;AACpK,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,WAAW;IACpB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,OAAO;IAChB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtD,YAAY,CAAC,IAAI,GAAG;IAClB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,IAAI;CACX,CAAC","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n  title: 'Components/Button/Anchor',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      name: 'Variante',\n      description: 'Imposta la variante di colore del link',\n      control: 'select',\n      options: [\n        'primary',\n        'secondary',\n        'neutral',\n        'white'\n      ],\n    },\n    size: {\n      name: 'Dimensione',\n      description: 'Imposta la dimensione del link',\n      control: 'select',\n      options: [\n        'small',\n        'medium',\n        'large'\n      ],\n      labels: {\n        small: 'Piccolo',\n        medium: 'Medio',\n        large: 'Grande'\n      }\n    },\n    disabled: {\n      name: 'Disabilitato',\n      description: 'Imposta se il link deve essere disabilitato',\n      control: 'boolean'\n    },\n    text: {\n      name: 'Testo',\n      description: 'Imposta se il link è solo testo, quindi senza bordo, sfondo e padding',\n      control: 'boolean'\n    },\n    id: {\n      name: 'ID',\n      description: 'Imposta l\\'id del link',\n      control: 'text'\n    },\n  }\n};\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return `<jump-button ${attributes} href=\"www.jumpgroup.it\" target=\"_blank\"> Scopri di più </jump-button>`\n}\n\nconst TemplateWithIcon = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return `<jump-button ${attributes} href=\"www.jumpgroup.it\" target=\"_blank\"> <jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon> Scopri di più </jump-button>`\n}\n\nexport const LinkPrimary = Template.bind({});\nLinkPrimary.args = {\n  variant: 'primary',\n  size: 'small',\n  text: true,\n};\n\nexport const LinkSecondary = Template.bind({});\nLinkSecondary.args = {\n  variant: 'secondary',\n  size: 'medium',\n  text: true,\n};\n\nexport const LinkNeutral = Template.bind({});\nLinkNeutral.args = {\n  variant: 'neutral',\n  size: 'large',\n  text: true,\n};\n\nexport const LinkWhite = Template.bind({});\nLinkWhite.args = {\n  variant: 'white',\n  size: 'medium',\n  text: true,\n};\n\nexport const LinkWithIcon = TemplateWithIcon.bind({});\nLinkWithIcon.args = {\n  variant: 'primary',\n  size: 'medium',\n  text: true,\n};"]}

package/dist/collection/components/jump-button/jump-button-dimension.stories.js

@@ -0,0 +1,74 @@
+import { generateAttributesFromArgs } from "../../utils/utils";
+export default {
+    title: 'Components/Button/Dimension',
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            name: 'Variante',
+            description: 'Imposta la variante di colore del bottone',
+            control: 'select',
+            options: [
+                'primary',
+                'secondary',
+                'neutral',
+                'white'
+            ],
+        },
+        size: {
+            name: 'Dimensione',
+            description: 'Imposta la dimensione del bottone',
+            control: 'select',
+            options: [
+                'small',
+                'medium',
+                'large'
+            ],
+            labels: {
+                small: 'Piccolo',
+                medium: 'Medio',
+                large: 'Grande'
+            }
+        },
+        full: {
+            name: 'Full Width',
+            description: 'Imposta se il bottone sarà largo tutto lo spazio che può occupare',
+            control: 'boolean'
+        },
+        text: {
+            name: 'Testo',
+            description: 'Imposta se il bottone è solo testo, quindi senza bordo, sfondo e padding',
+            control: 'boolean'
+        },
+        id: {
+            name: 'ID',
+            description: 'Imposta l\'id del bottone',
+            control: 'text'
+        },
+    }
+};
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return `<jump-button ${attributes} outline name="scopri" value="value" aria-label="Scopri di più"> <jump-icon slot="suffix" name="arrow-right"></jump-icon> Scopri di più </jump-button>`;
+};
+export const Small = Template.bind({});
+Small.args = {
+    variant: 'primary',
+    size: 'small',
+};
+export const Medium = Template.bind({});
+Medium.args = {
+    variant: 'primary',
+    size: 'medium',
+};
+export const Large = Template.bind({});
+Large.args = {
+    variant: 'primary',
+    size: 'large',
+};
+export const Full = Template.bind({});
+Full.args = {
+    variant: 'primary',
+    size: 'medium',
+    full: true,
+};
+//# sourceMappingURL=jump-button-dimension.stories.js.map

package/dist/collection/components/jump-button/jump-button-dimension.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-button-dimension.stories.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button-dimension.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,2CAA2C;YACxD,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,SAAS;gBACT,WAAW;gBACX,SAAS;gBACT,OAAO;aACR;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,YAAY;YAClB,WAAW,EAAE,mCAAmC;YAChD,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,OAAO;gBACP,QAAQ;gBACR,OAAO;aACR;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,OAAO;gBACf,KAAK,EAAE,QAAQ;aAChB;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,YAAY;YAClB,WAAW,EAAE,mEAAmE;YAChF,OAAO,EAAE,SAAS;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,0EAA0E;YACvF,OAAO,EAAE,SAAS;SACnB;QACD,EAAE,EAAE;YACF,IAAI,EAAE,IAAI;YACV,WAAW,EAAE,2BAA2B;YACxC,OAAO,EAAE,MAAM;SAChB;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,gBAAgB,UAAU,wJAAwJ,CAAA;AAC3L,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;IACZ,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtC,IAAI,CAAC,IAAI,GAAG;IACV,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,IAAI;CACX,CAAC","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n  title: 'Components/Button/Dimension',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      name: 'Variante',\n      description: 'Imposta la variante di colore del bottone',\n      control: 'select',\n      options: [\n        'primary',\n        'secondary',\n        'neutral',\n        'white'\n      ],\n    },\n    size: {\n      name: 'Dimensione',\n      description: 'Imposta la dimensione del bottone',\n      control: 'select',\n      options: [\n        'small',\n        'medium',\n        'large'\n      ],\n      labels: {\n        small: 'Piccolo',\n        medium: 'Medio',\n        large: 'Grande'\n      }\n    },\n    full: {\n      name: 'Full Width',\n      description: 'Imposta se il bottone sarà largo tutto lo spazio che può occupare',\n      control: 'boolean'\n    },\n    text: {\n      name: 'Testo',\n      description: 'Imposta se il bottone è solo testo, quindi senza bordo, sfondo e padding',\n      control: 'boolean'\n    },\n    id: {\n      name: 'ID',\n      description: 'Imposta l\\'id del bottone',\n      control: 'text'\n    },\n  }\n};\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return `<jump-button ${attributes} outline name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\"> <jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon> Scopri di più </jump-button>`\n}\n\nexport const Small = Template.bind({});\nSmall.args = {\n  variant: 'primary',\n  size: 'small',\n};\n\nexport const Medium = Template.bind({});\nMedium.args = {\n  variant: 'primary',\n  size: 'medium',\n};\n\nexport const Large = Template.bind({});\nLarge.args = {\n  variant: 'primary',\n  size: 'large',\n};\n\nexport const Full = Template.bind({});\nFull.args = {\n  variant: 'primary',\n  size: 'medium',\n  full: true,\n};\n"]}