@jumpgroup/jump-design-system 0.2.0 → 0.2.2

package/dist/jump-design-system/p-ddb6c98c.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as a,H as n}from"./p-c560071a.js";const i=":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 t=i;const s=class{constructor(a){e(this,a);this.totalElements=undefined;this.pagLabel="di";this.currentPage=undefined;this.lastPage=undefined;this.labelElementsPerPage="Elementi per pagina";this.elementsRanges=[10,20,60,100];this.firstPage=undefined;this.completeVersion=false;this.showAdditionalChrevrons=false}render(){var e;return a(n,{key:"97d153323192675905ef7efc310edd9544917194",class:"JumpPagination"},a("div",{key:"706326dbd689f2250863df55db66a868deb98465",class:"JumpPagination__Wrapper"},this.completeVersion&&a("div",{class:"elementsPerPage"},a("label",{htmlFor:"elements"},(e=this.labelElementsPerPage)!==null&&e!==void 0?e:"Elements per page"),a("select",{name:"elements",id:"elements"},this.elementsRanges.map((e=>a("option",{value:e},e))))),a("div",{key:"ba6b84fcfc0cb4d2f0f52767f2be99386a6f004c",class:"indicators"},a("div",{key:"b0786315ca18db1608bd07c5658ec37ae9931802",class:"elements"},this.completeVersion?a("span",null,a("span",null,this.firstPage)," - ",a("span",null,this.currentPage)," di ",a("span",null,this.totalElements)):a("span",null,a("span",null,this.currentPage)," di ",a("span",null,this.lastPage))),a("div",{key:"93343a7729d7bbd8512d65bc1877041c25f77cdf",class:"arrow"},this.showAdditionalChrevrons&&a("jump-icon",{id:"first-page",name:"chevrons-left"}),a("jump-icon",{key:"ed735fb41710b632485cc9a24151590842fbdc48",id:"prev-page",name:"chevron-left"}),a("jump-icon",{key:"fffdbf1d84cee94bf0d2ab561cb36d4de82cc763",id:"next-page",name:"chevron-right"}),this.showAdditionalChrevrons&&a("jump-icon",{id:"last-page",name:"chevrons-right"})))))}};s.style=t;export{s as jump_pagination};
+//# sourceMappingURL=p-ddb6c98c.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jumpPaginationCss","JumpPaginationStyle0","JumpPagination","render","h","Host","key","class","this","completeVersion","htmlFor","_a","labelElementsPerPage","name","id","elementsRanges","map","range","value","firstPage","currentPage","totalElements","lastPage","showAdditionalChrevrons"],"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"],"mappings":"kDAAA,MAAMA,EAAoB,q1BAC1B,MAAAC,EAAeD,E,MCMFE,EAAc,M,oEAMiB,K,6EAWc,sB,oBAKC,CAAC,GAAI,GAAI,GAAI,K,8CAUlB,M,6BAEQ,K,CAE5D,MAAAC,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,kBACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,2BACPC,KAAKC,iBACLL,EAAA,OAAKG,MAAM,mBACTH,EAAA,SAAOM,QAAQ,aAAYC,EAAAH,KAAKI,wBAAoB,MAAAD,SAAA,EAAAA,EAAI,qBACpDP,EAAA,UAAQS,KAAK,WAAWC,GAAG,YACxBN,KAAKO,eAAeC,KAAKC,GACxBb,EAAA,UAAQc,MAAOD,GAAQA,OAKnCb,EAAA,OAAAE,IAAA,2CAAKC,MAAM,cACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,YACRC,KAAKC,gBACJL,EAAA,YACEA,EAAA,YAAOI,KAAKW,WAAiB,MAAGf,EAAA,YAAOI,KAAKY,aAAmB,OAAIhB,EAAA,YAAOI,KAAKa,gBAIjFjB,EAAA,YACEA,EAAA,YAAOI,KAAKY,aAAmB,OAAIhB,EAAA,YAAOI,KAAKc,YAIrDlB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACRC,KAAKe,yBAA2BnB,EAAA,aAAWU,GAAG,aAAaD,KAAK,kBACjET,EAAA,aAAAE,IAAA,2CAAWQ,GAAG,YAAYD,KAAK,iBAC/BT,EAAA,aAAAE,IAAA,2CAAWQ,GAAG,YAAaD,KAAK,kBAC/BL,KAAKe,yBAA2BnB,EAAA,aAAWU,GAAG,YAAaD,KAAK,sB"}

package/dist/jump-design-system-elements.json

@@ -231,6 +231,10 @@
           "name": "last-page",
           "description": ""
         },
+        {
+          "name": "pag-label",
+          "description": ""
+        },
         {
           "name": "show-additional-chrevrons",
           "description": ""

package/dist/types/components/jump-pagination/jump-pagination-pages.stories.d.ts

@@ -0,0 +1,74 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        pagLabel: {
+            name: string;
+            control: string;
+            description: string;
+        };
+        completeVersion: {
+            name: string;
+            control: string;
+            description: string;
+        };
+        showAdditionalChrevrons: {
+            name: string;
+            control: string;
+            description: string;
+        };
+        firstPage: {
+            name: string;
+            control: string;
+            description: string;
+            if: {
+                arg: string;
+                eq: boolean;
+            };
+        };
+        currentPage: {
+            name: string;
+            control: string;
+            description: string;
+        };
+        lastPage: {
+            name: string;
+            control: string;
+            description: string;
+            if: {
+                arg: string;
+                eq: boolean;
+            };
+        };
+        totalElements: {
+            name: string;
+            control: string;
+            description: string;
+            if: {
+                arg: string;
+                eq: boolean;
+            };
+        };
+        labelElementsPerPage: {
+            name: string;
+            control: string;
+            description: string;
+            if: {
+                arg: string;
+                eq: boolean;
+            };
+        };
+        elementsRanges: {
+            name: string;
+            control: string;
+            options: number[];
+            if: {
+                arg: string;
+                eq: boolean;
+            };
+        };
+    };
+};
+export default _default;
+export declare const PaginationPerPagineRidotto: any;
+export declare const PaginationPerPagineCompleto: any;

package/dist/types/components/jump-pagination/{jump-pagination.stories.d.ts → jump-pagination-products.stories.d.ts}

@@ -2,6 +2,11 @@ declare const _default: {
     title: string;
     tags: string[];
     argTypes: {
+        pagLabel: {
+            name: string;
+            control: string;
+            description: string;
+        };
         completeVersion: {
             name: string;
             control: string;
@@ -67,5 +72,3 @@ declare const _default: {
 export default _default;
 export declare const PaginationPerProdottiRidotto: any;
 export declare const PaginationPerProdottiCompleto: any;
-export declare const PaginationPerPagineRidotto: any;
-export declare const PaginationPerPagineCompleto: any;

package/dist/types/components/jump-pagination/jump-pagination.d.ts

@@ -1,5 +1,6 @@
 export declare class JumpPagination {
     totalElements: number;
+    pagLabel: string;
     /**
      *
      */

package/dist/types/components.d.ts

@@ -153,6 +153,7 @@ export namespace Components {
          */
         "labelElementsPerPage": string;
         "lastPage": number;
+        "pagLabel": string;
         "showAdditionalChrevrons": boolean;
         "totalElements": number;
     }
@@ -344,6 +345,7 @@ declare namespace LocalJSX {
          */
         "labelElementsPerPage"?: string;
         "lastPage"?: number;
+        "pagLabel"?: string;
         "showAdditionalChrevrons"?: boolean;
         "totalElements"?: number;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jumpgroup/jump-design-system",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/readme.md

@@ -37,7 +37,7 @@ So, if the prop inside `nomecomponente.tsx` is `currentPage`, in the story, it s
 
 #### unpkg
 - This tag `<script type='module' src='https://unpkg.com/@jumpgroup/jump-design-system/dist/jump-design-system/jump-design-system.esm.js'></script>` in the head of your index.html.
-- To include also the style, add `<style src='https://unpkg.com/@jumpgroup/jump-design-system/dist/jump-design-system/jump-design-system.css'></script>`in the head of your index.html.
+- To include also the style, add `<style src='https://unpkg.com/@jumpgroup/jump-design-system/dist/jump-design-system/jump-design-system.css'></style>`in the head of your index.html.
 - Then you can use the element anywhere in your template, JSX, html etc
 
 #### jsdeliver