@jumpgroup/jump-design-system 0.2.6 → 0.3.0

package/dist/collection/components/jump-icon/jump-icon-fa-solid.stories.js

@@ -0,0 +1,73 @@
+import { generateAttributesFromArgs } from "../../utils/utils";
+export default {
+    title: 'Components/Icon/Font Awesome/Solid',
+    tags: ['autodocs'],
+    argTypes: {
+        library: {
+            name: 'library',
+            control: 'select',
+            options: ['fa'],
+            defaultValue: 'fa',
+            description: "Seleziona la libreria dell'icona",
+        },
+        category: {
+            name: 'category',
+            control: 'select',
+            options: ['solid'],
+            description: "Seleziona la categoria dell'icona",
+        },
+        name: {
+            name: 'name',
+            control: 'text',
+            defaultValue: 'house',
+            description: "Seleziona il nome dal seguente <a href='https://fontawesome.com/search?o=r&s=solid' target='_blank'>link</a>",
+        },
+        size: {
+            name: 'size',
+            control: 'select',
+            options: {
+                inherit: 'inherit',
+                small: 'small',
+                medium: 'medium',
+                large: 'large',
+            },
+            defaultValue: 'inherit',
+            description: "Seleziona la dimensione dell'icona",
+        },
+        label: {
+            name: 'label',
+            control: 'text',
+            description: "Aggiungi una label all'icona",
+        },
+    },
+};
+const TemplateDefault = args => {
+    const attributes = generateAttributesFromArgs(args);
+    return `<jump-icon ${attributes}></jump-icon>`;
+};
+const Template = args => {
+    const attributes = generateAttributesFromArgs(args);
+    if (args.size === 'inherit') {
+        return `<jump-icon ${attributes} style="font-size: 5rem;"></jump-icon>
+    <br>
+    <br> 
+    Se l'attributo size è impostato su 'inherit', l'icona eredita la dimensione dallo stile CSS, che sia sull'elemento stesso o su un elemento padre.`;
+    }
+    return `<jump-icon ${attributes}></jump-icon
+  >`;
+};
+export const IconDefault = TemplateDefault.bind({});
+IconDefault.args = {
+    library: 'fa',
+    category: 'solid',
+    name: 'house',
+    size: 'small',
+};
+export const IconInherit = Template.bind({});
+IconInherit.args = {
+    library: 'fa',
+    category: 'solid',
+    name: 'house',
+    size: 'inherit',
+};
+//# sourceMappingURL=jump-icon-fa-solid.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jump-icon-fa-solid.stories.js","sourceRoot":"","sources":["../../../src/components/jump-icon/jump-icon-fa-solid.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,mBAAmB,CAAC;AAE/D,eAAe;IACb,KAAK,EAAE,oCAAoC;IAC3C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,CAAC;YACf,YAAY,EAAE,IAAI;YAClB,WAAW,EAAE,kCAAkC;SAChD;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,CAAC;YAClB,WAAW,EAAE,mCAAmC;SACjD;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,OAAO;YACrB,WAAW,EAAE,8GAA8G;SAC5H;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,OAAO,EAAE,SAAS;gBAClB,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,QAAQ;gBAChB,KAAK,EAAE,OAAO;aACf;YACD,YAAY,EAAE,SAAS;YACvB,WAAW,EAAE,oCAAoC;SAClD;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,8BAA8B;SAC5C;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,cAAc,UAAU,eAAe,CAAC;AACjD,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE;IACtB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAC5B,OAAO,cAAc,UAAU;;;sJAGmH,CAAC;IACrJ,CAAC;IACD,OAAO,cAAc,UAAU;IAC7B,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,OAAO;IACjB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,OAAO;IACjB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,SAAS;CAChB,CAAC","sourcesContent":["import { generateAttributesFromArgs } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Icon/Font Awesome/Solid',\n  tags: ['autodocs'],\n  argTypes: {\n    library: {\n      name: 'library',\n      control: 'select',\n      options: ['fa'],\n      defaultValue: 'fa',\n      description: \"Seleziona la libreria dell'icona\",\n    },\n    category: {\n      name: 'category',\n      control: 'select',\n      options: ['solid'],\n      description: \"Seleziona la categoria dell'icona\",\n    },\n    name: {\n      name: 'name',\n      control: 'text',\n      defaultValue: 'house',\n      description: \"Seleziona il nome dal seguente <a href='https://fontawesome.com/search?o=r&s=solid' target='_blank'>link</a>\",\n    },\n    size: {\n      name: 'size',\n      control: 'select',\n      options: {\n        inherit: 'inherit',\n        small: 'small',\n        medium: 'medium',\n        large: 'large',\n      },\n      defaultValue: 'inherit',\n      description: \"Seleziona la dimensione dell'icona\",\n    },\n    label: {\n      name: 'label',\n      control: 'text',\n      description: \"Aggiungi una label all'icona\",\n    },\n  },\n};\n\nconst TemplateDefault = args => {\n  const attributes = generateAttributesFromArgs(args);\n  return `<jump-icon ${attributes}></jump-icon>`;\n};\n\nconst Template = args => {\n  const attributes = generateAttributesFromArgs(args);\n  if (args.size === 'inherit') {\n    return `<jump-icon ${attributes} style=\"font-size: 5rem;\"></jump-icon>\n    <br>\n    <br> \n    Se l'attributo size è impostato su 'inherit', l'icona eredita la dimensione dallo stile CSS, che sia sull'elemento stesso o su un elemento padre.`;\n  }\n  return `<jump-icon ${attributes}></jump-icon\n  >`;\n};\n\nexport const IconDefault = TemplateDefault.bind({});\nIconDefault.args = {\n  library: 'fa',\n  category: 'solid',\n  name: 'house',\n  size: 'small',\n};\n\nexport const IconInherit = Template.bind({});\nIconInherit.args = {\n  library: 'fa',\n  category: 'solid',\n  name: 'house',\n  size: 'inherit',\n};\n"]}

package/dist/collection/components/jump-icon/jump-icon-fa-thin.stories.js

@@ -0,0 +1,73 @@
+import { generateAttributesFromArgs } from "../../utils/utils";
+export default {
+    title: 'Components/Icon/Font Awesome/Thin',
+    tags: ['autodocs'],
+    argTypes: {
+        library: {
+            name: 'library',
+            control: 'select',
+            options: ['fa'],
+            defaultValue: 'fa',
+            description: "Seleziona la libreria dell'icona",
+        },
+        category: {
+            name: 'category',
+            control: 'select',
+            options: ['thin'],
+            description: "Seleziona la categoria dell'icona",
+        },
+        name: {
+            name: 'name',
+            control: 'text',
+            defaultValue: 'house',
+            description: "Seleziona il nome dal seguente <a href='https://fontawesome.com/search?o=r&s=thin' target='_blank'>link</a>",
+        },
+        size: {
+            name: 'size',
+            control: 'select',
+            options: {
+                inherit: 'inherit',
+                small: 'small',
+                medium: 'medium',
+                large: 'large',
+            },
+            defaultValue: 'inherit',
+            description: "Seleziona la dimensione dell'icona",
+        },
+        label: {
+            name: 'label',
+            control: 'text',
+            description: "Aggiungi una label all'icona",
+        },
+    },
+};
+const TemplateDefault = args => {
+    const attributes = generateAttributesFromArgs(args);
+    return `<jump-icon ${attributes}></jump-icon>`;
+};
+const Template = args => {
+    const attributes = generateAttributesFromArgs(args);
+    if (args.size === 'inherit') {
+        return `<jump-icon ${attributes} style="font-size: 5rem;"></jump-icon>
+    <br>
+    <br> 
+    Se l'attributo size è impostato su 'inherit', l'icona eredita la dimensione dallo stile CSS, che sia sull'elemento stesso o su un elemento padre.`;
+    }
+    return `<jump-icon ${attributes}></jump-icon
+  >`;
+};
+export const IconDefault = TemplateDefault.bind({});
+IconDefault.args = {
+    library: 'fa',
+    category: 'thin',
+    name: 'house',
+    size: 'small',
+};
+export const IconInherit = Template.bind({});
+IconInherit.args = {
+    library: 'fa',
+    category: 'thin',
+    name: 'house',
+    size: 'inherit',
+};
+//# sourceMappingURL=jump-icon-fa-thin.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jump-icon-fa-thin.stories.js","sourceRoot":"","sources":["../../../src/components/jump-icon/jump-icon-fa-thin.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,mBAAmB,CAAC;AAE/D,eAAe;IACb,KAAK,EAAE,mCAAmC;IAC1C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,CAAC;YACf,YAAY,EAAE,IAAI;YAClB,WAAW,EAAE,kCAAkC;SAChD;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,CAAC;YACjB,WAAW,EAAE,mCAAmC;SACjD;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,OAAO;YACrB,WAAW,EAAE,6GAA6G;SAC3H;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,OAAO,EAAE,SAAS;gBAClB,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,QAAQ;gBAChB,KAAK,EAAE,OAAO;aACf;YACD,YAAY,EAAE,SAAS;YACvB,WAAW,EAAE,oCAAoC;SAClD;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,8BAA8B;SAC5C;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,cAAc,UAAU,eAAe,CAAC;AACjD,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE;IACtB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAC5B,OAAO,cAAc,UAAU;;;sJAGmH,CAAC;IACrJ,CAAC;IACD,OAAO,cAAc,UAAU;IAC7B,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,MAAM;IAChB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,MAAM;IAChB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,SAAS;CAChB,CAAC","sourcesContent":["import { generateAttributesFromArgs } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Icon/Font Awesome/Thin',\n  tags: ['autodocs'],\n  argTypes: {\n    library: {\n      name: 'library',\n      control: 'select',\n      options: ['fa'],\n      defaultValue: 'fa',\n      description: \"Seleziona la libreria dell'icona\",\n    },\n    category: {\n      name: 'category',\n      control: 'select',\n      options: ['thin'],\n      description: \"Seleziona la categoria dell'icona\",\n    },\n    name: {\n      name: 'name',\n      control: 'text',\n      defaultValue: 'house',\n      description: \"Seleziona il nome dal seguente <a href='https://fontawesome.com/search?o=r&s=thin' target='_blank'>link</a>\",\n    },\n    size: {\n      name: 'size',\n      control: 'select',\n      options: {\n        inherit: 'inherit',\n        small: 'small',\n        medium: 'medium',\n        large: 'large',\n      },\n      defaultValue: 'inherit',\n      description: \"Seleziona la dimensione dell'icona\",\n    },\n    label: {\n      name: 'label',\n      control: 'text',\n      description: \"Aggiungi una label all'icona\",\n    },\n  },\n};\n\nconst TemplateDefault = args => {\n  const attributes = generateAttributesFromArgs(args);\n  return `<jump-icon ${attributes}></jump-icon>`;\n};\n\nconst Template = args => {\n  const attributes = generateAttributesFromArgs(args);\n  if (args.size === 'inherit') {\n    return `<jump-icon ${attributes} style=\"font-size: 5rem;\"></jump-icon>\n    <br>\n    <br> \n    Se l'attributo size è impostato su 'inherit', l'icona eredita la dimensione dallo stile CSS, che sia sull'elemento stesso o su un elemento padre.`;\n  }\n  return `<jump-icon ${attributes}></jump-icon\n  >`;\n};\n\nexport const IconDefault = TemplateDefault.bind({});\nIconDefault.args = {\n  library: 'fa',\n  category: 'thin',\n  name: 'house',\n  size: 'small',\n};\n\nexport const IconInherit = Template.bind({});\nIconInherit.args = {\n  library: 'fa',\n  category: 'thin',\n  name: 'house',\n  size: 'inherit',\n};\n"]}

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

@@ -0,0 +1,67 @@
+import { lucideLibraryList, generateAttributesFromArgs } from "../../utils/utils";
+const LucideLibrary = await lucideLibraryList();
+export default {
+    title: 'Components/Icon/Lucide',
+    tags: ['autodocs'],
+    argTypes: {
+        library: {
+            name: 'library',
+            control: 'select',
+            options: ['lucide'],
+            defaultValue: 'lucide',
+            description: "Seleziona la libreria dell'icona",
+        },
+        name: {
+            name: 'name',
+            control: 'select',
+            options: LucideLibrary,
+            defaultValue: LucideLibrary[0],
+            description: "Seleziona il nome dell'icona dal menu a tendina",
+        },
+        size: {
+            name: 'size',
+            control: 'select',
+            options: {
+                inherit: 'inherit',
+                small: 'small',
+                medium: 'medium',
+                large: 'large',
+            },
+            defaultValue: 'inherit',
+            description: "Seleziona la dimensione dell'icona",
+        },
+        label: {
+            name: 'label',
+            control: 'text',
+            description: "Aggiungi una label all'icona",
+        },
+    },
+};
+const TemplateDefault = args => {
+    const attributes = generateAttributesFromArgs(args);
+    return `<jump-icon ${attributes}></jump-icon>`;
+};
+const Template = args => {
+    const attributes = generateAttributesFromArgs(args);
+    if (args.size === 'inherit') {
+        return `
+    <jump-icon ${attributes} style="width: 5rem; height: 5rem;"></jump-icon>
+    <br>
+    <br> 
+    Se l'attributo size è impostato su 'inherit', l'icona eredita la dimensione dallo stile CSS, che sia sull'elemento stesso o su un elemento padre.`;
+    }
+    return `<jump-icon ${attributes}></jump-icon>`;
+};
+export const IconDefault = TemplateDefault.bind({});
+IconDefault.args = {
+    library: 'lucide',
+    name: LucideLibrary[0],
+    size: 'small',
+};
+export const IconInherit = Template.bind({});
+IconInherit.args = {
+    library: 'lucide',
+    name: LucideLibrary[0],
+    size: 'inherit',
+};
+//# sourceMappingURL=jump-icon-lucide.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jump-icon-lucide.stories.js","sourceRoot":"","sources":["../../../src/components/jump-icon/jump-icon-lucide.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,mBAAmB,CAAC;AAClF,MAAM,aAAa,GAAG,MAAM,iBAAiB,EAAE,CAAC;AAEhD,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,QAAQ,CAAC;YACnB,YAAY,EAAE,QAAQ;YACtB,WAAW,EAAE,kCAAkC;SAChD;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,aAAa;YACtB,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;YAC9B,WAAW,EAAE,iDAAiD;SAC/D;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,OAAO,EAAE,SAAS;gBAClB,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,QAAQ;gBAChB,KAAK,EAAE,OAAO;aACf;YACD,YAAY,EAAE,SAAS;YACvB,WAAW,EAAE,oCAAoC;SAClD;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,8BAA8B;SAC5C;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,cAAc,UAAU,eAAe,CAAC;AACjD,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE;IACtB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAC5B,OAAO;iBACM,UAAU;;;sJAG2H,CAAC;IACrJ,CAAC;IACD,OAAO,cAAc,UAAU,eAAe,CAAC;AACjD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IACtB,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IACtB,IAAI,EAAE,SAAS;CAChB,CAAC","sourcesContent":["import { lucideLibraryList, generateAttributesFromArgs } from '../../utils/utils';\nconst LucideLibrary = await lucideLibraryList();\n\nexport default {\n  title: 'Components/Icon/Lucide',\n  tags: ['autodocs'],\n  argTypes: {\n    library: {\n      name: 'library',\n      control: 'select',\n      options: ['lucide'],\n      defaultValue: 'lucide',\n      description: \"Seleziona la libreria dell'icona\",\n    },\n    name: {\n      name: 'name',\n      control: 'select',\n      options: LucideLibrary,\n      defaultValue: LucideLibrary[0],\n      description: \"Seleziona il nome dell'icona dal menu a tendina\",\n    },\n    size: {\n      name: 'size',\n      control: 'select',\n      options: {\n        inherit: 'inherit',\n        small: 'small',\n        medium: 'medium',\n        large: 'large',\n      },\n      defaultValue: 'inherit',\n      description: \"Seleziona la dimensione dell'icona\",\n    },\n    label: {\n      name: 'label',\n      control: 'text',\n      description: \"Aggiungi una label all'icona\",\n    },\n  },\n};\n\nconst TemplateDefault = args => {\n  const attributes = generateAttributesFromArgs(args);\n  return `<jump-icon ${attributes}></jump-icon>`;\n};\n\nconst Template = args => {\n  const attributes = generateAttributesFromArgs(args);\n  if (args.size === 'inherit') {\n    return `\n    <jump-icon ${attributes} style=\"width: 5rem; height: 5rem;\"></jump-icon>\n    <br>\n    <br> \n    Se l'attributo size è impostato su 'inherit', l'icona eredita la dimensione dallo stile CSS, che sia sull'elemento stesso o su un elemento padre.`;\n  }\n  return `<jump-icon ${attributes}></jump-icon>`;\n};\n\nexport const IconDefault = TemplateDefault.bind({});\nIconDefault.args = {\n  library: 'lucide',\n  name: LucideLibrary[0],\n  size: 'small',\n};\n\nexport const IconInherit = Template.bind({});\nIconInherit.args = {\n  library: 'lucide',\n  name: LucideLibrary[0],\n  size: 'inherit',\n};\n"]}

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

@@ -1,7 +1,67 @@
 :host {
   display: inline-flex;
 }
-:host svg {
-  width: 1rem;
-  height: 1rem;
+
+sl-icon {
+  display: inline-flex;
+}
+sl-icon[library=lucide] {
+  width: var(--sl-icon-width);
+  height: var(--sl-icon-height);
+}
+sl-icon[library=lucide][size=small] {
+  --sl-icon-width: var(--fs-400, 1rem);
+  --sl-icon-height: var(--fs-400, 1rem);
+}
+sl-icon[library=lucide][size=medium] {
+  --sl-icon-width: var(--fs-500, 1.125rem);
+  --sl-icon-height: var(--fs-500, 1.125rem);
+}
+sl-icon[library=lucide][size=large] {
+  --sl-icon-width: var(--fs-600, 1.5rem);
+  --sl-icon-height: var(--fs-600, 1.5rem);
+}
+sl-icon[library=lucide][size=inherit] {
+  width: 100%;
+  height: 100%;
+}
+sl-icon[library=custom] {
+  width: var(--sl-icon-width);
+  height: var(--sl-icon-height);
+}
+sl-icon[library=custom][size=small] {
+  --sl-icon-width: var(--fs-400, 1rem);
+  --sl-icon-height: var(--fs-400, 1rem);
+}
+sl-icon[library=custom][size=medium] {
+  --sl-icon-width: var(--fs-500, 1.125rem);
+  --sl-icon-height: var(--fs-500, 1.125rem);
+}
+sl-icon[library=custom][size=large] {
+  --sl-icon-width: var(--fs-600, 1.5rem);
+  --sl-icon-height: var(--fs-600, 1.5rem);
+}
+sl-icon[library=custom][size=inherit] {
+  width: inherit;
+  height: inherit;
+}
+sl-icon[library=fa] {
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+}
+sl-icon[library=fa][size=small] {
+  --font-size: var(--fs-400, 1rem);
+  --line-height: var(--fs-400, 1rem);
+}
+sl-icon[library=fa][size=medium] {
+  --font-size: var(--fs-500, 1.125rem);
+  --line-height: var(--fs-500, 1.125rem);
+}
+sl-icon[library=fa][size=large] {
+  --font-size: var(--fs-600, 1.5rem);
+  --line-height: var(--fs-600, 1.5rem);
+}
+sl-icon[library=fa][size=inherit] {
+  font-size: inherit;
+  line-height: inherit;
 }

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

@@ -1,17 +1,67 @@
-import { Host, h } from "@stencil/core";
-import feather from "feather-icons";
+import { h } from "@stencil/core";
+import "@shoelace-style/shoelace/dist/components/icon/icon.js";
+import { registerIconLibrary } from "@shoelace-style/shoelace/dist/utilities/icon-library";
 export class JumpIcon {
     constructor() {
-        this.name = undefined;
+        this.fontAwesomeClassGenerator = (name, category) => {
+            let fa_class = [];
+            let category_class = !category ? 'category-classic' : `category-${category}`;
+            category_class && fa_class.push(category_class);
+            let name_class = `name-${name}`;
+            name_class && fa_class.push(name_class);
+            return fa_class.join(' ');
+        };
+        this.fontAwesomeLibrary = {
+            resolver: name => {
+                const found_classes = name.split(' ');
+                const category = found_classes.find(c => c.startsWith('category-')).replace('category-', '');
+                const icon_name = found_classes.find(c => c.startsWith('name-')).replace('name-', '');
+                return `https://designsystem-media.jumpgroup.it/svgs/${category}/${icon_name}.svg`;
+            },
+            mutator: svg => svg.setAttribute('fill', 'currentColor'),
+        };
+        this.lucideLibrary = {
+            resolver: name => `https://cdn.jsdelivr.net/npm/lucide-static@0.16.29/icons/${name}.svg`,
+        };
         this.class = undefined;
+        this.library = 'fa';
+        this.name = 'heart';
+        this.category = 'solid';
+        this.size = undefined;
+        this.label = undefined;
+        this.src = undefined;
     }
-    componentDidLoad() {
-        feather.replace();
+    componentWillLoad() {
+        let libraryConfig = this.lucideLibrary;
+        this.size = this.size || 'inherit';
+        switch (this.library) {
+            case 'fa':
+                libraryConfig = this.fontAwesomeLibrary;
+                break;
+            case 'lucide':
+                libraryConfig = this.lucideLibrary;
+                break;
+            default:
+                break;
+        }
+        registerIconLibrary(this.library, libraryConfig);
     }
     render() {
-        return (h(Host, { key: 'c61b602c009a61e74b1ade495fc2188bdcad79dc' }, h("i", { key: 'adf4f1038dbb9809f524bacaffca00a43c164652', "data-feather": this.name, class: this.class })));
+        if (!this.name && !this.src) {
+            return `Please set the 'name' or 'src' property to display the icon`;
+        }
+        if (this.library === 'custom') {
+            return h("sl-icon", { library: this.library, src: this.src, size: this.size, label: this.label });
+        }
+        if (this.library === 'lucide') {
+            return h("sl-icon", { library: this.library, name: this.name, size: this.size, label: this.label });
+        }
+        if (this.library === 'fa') {
+            return h("sl-icon", { library: this.library, name: this.fontAwesomeClassGenerator(this.name, this.category), class: this.class, size: this.size, label: this.label });
+        }
     }
     static get is() { return "jump-icon"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["jump-icon.scss"]
@@ -24,6 +74,41 @@ export class JumpIcon {
     }
     static get properties() {
         return {
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Class of the icon"
+                },
+                "attribute": "class",
+                "reflect": false
+            },
+            "library": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Library of the icon"
+                },
+                "attribute": "library",
+                "reflect": false,
+                "defaultValue": "'fa'"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -39,9 +124,45 @@ export class JumpIcon {
                     "text": "Name of the icon"
                 },
                 "attribute": "name",
+                "reflect": false,
+                "defaultValue": "'heart'"
+            },
+            "category": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'solid' | 'sharp-light' | 'sharp-regular' | 'sharp-solid' | 'sharp-thin' | 'brands' | 'regular' | 'light' | 'thin' | 'duotone'",
+                    "resolved": "\"brands\" | \"duotone\" | \"light\" | \"regular\" | \"sharp-light\" | \"sharp-regular\" | \"sharp-solid\" | \"sharp-thin\" | \"solid\" | \"thin\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Category of the icon"
+                },
+                "attribute": "category",
+                "reflect": false,
+                "defaultValue": "'solid'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the icon"
+                },
+                "attribute": "size",
                 "reflect": false
             },
-            "class": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -53,9 +174,26 @@ export class JumpIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Additional classes"
+                    "text": "Label for the icon"
                 },
-                "attribute": "class",
+                "attribute": "label",
+                "reflect": false
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Src of the icon"
+                },
+                "attribute": "src",
                 "reflect": false
             }
         };

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

@@ -1 +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"]}
+{"version":3,"file":"jump-icon.js","sourceRoot":"","sources":["../../../src/components/jump-icon/jump-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport '@shoelace-style/shoelace/dist/components/icon/icon.js';\nimport { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library';\n\n@Component({\n  tag: 'jump-icon',\n  styleUrl: 'jump-icon.scss',\n  shadow: true,\n})\nexport class JumpIcon {\n  /**\n   * Class of the icon\n   */\n  @Prop() class: string;\n  /**\n   * Library of the icon\n   */\n  @Prop() library: string = 'fa';\n\n  /**\n   * Name of the icon\n   **/\n  @Prop() name: string = 'heart';\n\n  /**\n   * Category of the icon\n   */\n  @Prop() category: 'solid' | 'sharp-light' | 'sharp-regular' | 'sharp-solid' | 'sharp-thin' | 'brands' | 'regular' | 'light' | 'thin' | 'duotone' = 'solid';\n\n  /**\n   * Size of the icon\n   **/\n  @Prop() size: string;\n\n  /**\n   * Label for the icon\n   */\n  @Prop() label: string;\n\n  /**\n   * Src of the icon\n   */\n  @Prop() src: string;\n\n  componentWillLoad() {\n    let libraryConfig = this.lucideLibrary;\n    this.size = this.size || 'inherit';\n    switch (this.library) {\n      case 'fa':\n        libraryConfig = this.fontAwesomeLibrary;\n        break;\n\n      case 'lucide':\n        libraryConfig = this.lucideLibrary;\n        break;\n\n      default:\n        break;\n    }\n\n    registerIconLibrary(this.library, libraryConfig);\n  }\n\n  render() {\n    if (!this.name && !this.src) {\n      return `Please set the 'name' or 'src' property to display the icon`;\n    }\n\n    if (this.library === 'custom') {\n      return <sl-icon library={this.library} src={this.src} size={this.size} label={this.label}></sl-icon>;\n    }\n    if (this.library === 'lucide') {\n      return <sl-icon library={this.library} name={this.name} size={this.size} label={this.label}></sl-icon>;\n    }\n    if (this.library === 'fa') {\n      return <sl-icon library={this.library} name={this.fontAwesomeClassGenerator(this.name, this.category)} class={this.class} size={this.size} label={this.label}></sl-icon>;\n    }\n  }\n\n  fontAwesomeClassGenerator = (name: string, category: string) => {\n    let fa_class = [];\n    let category_class = !category ? 'category-classic' : `category-${category}`;\n    category_class && fa_class.push(category_class);\n    let name_class = `name-${name}`;\n    name_class && fa_class.push(name_class);\n    return fa_class.join(' ');\n  };\n\n  fontAwesomeLibrary = {\n    resolver: name => {\n      const found_classes = name.split(' ');\n      const category = found_classes.find(c => c.startsWith('category-')).replace('category-', '');\n      const icon_name = found_classes.find(c => c.startsWith('name-')).replace('name-', '');\n\n      return `https://designsystem-media.jumpgroup.it/svgs/${category}/${icon_name}.svg`;\n    },\n    mutator: svg => svg.setAttribute('fill', 'currentColor'),\n  };\n\n  lucideLibrary = {\n    resolver: name => `https://cdn.jsdelivr.net/npm/lucide-static@0.16.29/icons/${name}.svg`,\n  };\n}\n"]}

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

@@ -20,10 +20,11 @@ export class JumpPagination {
     componentWillLoad() {
         this.current = 1;
     }
+    /* --------------------- RENDER ------------------------------- */
     render() {
-        return (h(Host, { key: '2a7576df479d537fce9ddb57bbd1c2281966338a', class: "JumpPagination" }, h("div", { key: 'b17c027eeeb798a07575a329d6d84b378258c3f8', class: "JumpPagination__Wrapper" }, h("div", { key: 'afd615f030a3affbc8eb42eca80b15c19d248865', class: "indicators" }, h("div", { key: '62ba94ec7d2a97e9c9cb4b305817c65fe841b8d2', class: "elements" }, h("span", { key: '72a1e04a055661f44add8d8a6b7da470ca4dc141' }, h("span", { key: '17d723e90600fc2dd461b3df5806ae1a53f8a9e2' }, this.current), " ", this.pagLabel, " ", h("span", { key: '8226df90a89580310fc165fb3283de0d850a9edd' }, this.last))), h("div", { key: '6ba82177760ff8722071d9306e7c997bb651b838', class: "arrow" }, this.showFirstAndLast &&
-            h("button", { key: 'f97ce0ac5ae55f5efa46e3049740f0e71d30d51a', onClick: () => { this.current = 1; }, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'a3beda6c56fb82248712c4c185bafd7d1ab2b05b', slot: "prefix", name: "chevrons-left" }), "   "), h("button", { key: 'f989324f4950b41d3224ec4661416f76eacc1c4b', onClick: () => { this.current--; }, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '282db7bb875d3fb32f2ed4e5f7aa445c369fc916', slot: "prefix", name: "chevron-left" }), "   "), h("button", { key: '65f1681d7f53d756c111aaba7e8473545c903eb7', onClick: () => { this.current++; }, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: 'a8365aa471c81a95b470bbc333fe4119f77dc72e', slot: "prefix", name: "chevron-right" }), "   "), this.showFirstAndLast &&
-            h("button", { key: 'df7fa6824a028b74042b6a08191e1979ed42617b', onClick: () => { this.current = this.last; }, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '101a5fca010de64d804b8b8dbd336e1ad498c958', slot: "prefix", name: "chevrons-right" }), "   "))))));
+        return (h(Host, { key: '91a535355690cc66cac5f6c7ba7b770cc1898d39', class: "JumpPagination" }, h("div", { key: 'b14a24e6c1f4d1cf7348eaacd2a77cd828eccb78', class: "JumpPagination__Wrapper" }, h("div", { key: '4492c23fc92b7aba537cb3f9025524a6bb07ce6c', class: "indicators" }, h("div", { key: 'f48411d785dd35e6404772c1d39d9d78f3da462b', class: "elements" }, h("span", { key: '1d2d195a9ec45c2bd5795b4474de9dc052af22d5' }, h("span", { key: 'c7f9f4473cc2e82e754c3748eb04704f62676e52' }, this.current), " ", this.pagLabel, " ", h("span", { key: 'c1a2a36aef2b86aef07aa040d4d5c9043aeaf75e' }, this.last))), h("div", { key: 'a2645af8e6ce12cc897796fa132dba44f448acd2', class: "arrow" }, this.showFirstAndLast &&
+            h("button", { key: 'ee246362f466d4691d31f8efc7182ca7c5e9963f', onClick: () => { this.current = 1; }, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'e132a8f0c4aad2fb5924e54ad1015315983f2be5', slot: "prefix", name: "chevrons-left" }), "   "), h("button", { key: '0c7144d281a536b73fda1ac94a36e54a17af846b', onClick: () => { this.current--; }, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '15d1c8b75d229cc33349145bad0ac1dfb5eac83e', slot: "prefix", name: "chevron-left" }), "   "), h("button", { key: '0721ba5bfb54732174707e61833ceb19d5c8c2fa', onClick: () => { this.current++; }, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '2f0545ccb0da5032604fe535af035be5059508e0', slot: "prefix", name: "chevron-right" }), "   "), this.showFirstAndLast &&
+            h("button", { key: '1a62859d3dd69ac106335f9fb3d605ec90d685a7', onClick: () => { this.current = this.last; }, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: 'de0dd15cf47d11a59118ca3b8f0999ef60c66997', slot: "prefix", name: "chevrons-right" }), "   "))))));
     }
     static get is() { return "jump-pagination"; }
     static get originalStyleUrls() {
@@ -50,7 +51,7 @@ export class JumpPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label of the pagination"
                 },
                 "attribute": "pag-label",
                 "reflect": false,
@@ -68,7 +69,7 @@ export class JumpPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Last element of the page"
                 },
                 "attribute": "last",
                 "reflect": false,
@@ -86,7 +87,7 @@ export class JumpPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Show button to navigate so first e last page"
                 },
                 "attribute": "show-first-and-last",
                 "reflect": false,

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

@@ -1 +1 @@
-{"version":3,"file":"jump-pagination.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO5F,MAAM,OAAO,cAAc;;uBAGE,CAAC;wBAgBD,IAAI;oBAER,EAAE;gCAEW,KAAK;;IAjBzC,YAAY,CAAC,QAAgB,EAAE,QAAgB;QAC7C,IAAI,OAAO,GAAG;YACZ,OAAO,EAAE,QAAQ;YACjB,YAAY,EAAE,QAAQ;YACtB,KAAK,EAAE,CAAC;YACR,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SACjD,CAAC;QAEF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;IAYD,iEAAiE;IACjE,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACnB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB;YAC1B,4DAAK,KAAK,EAAC,yBAAyB;gBAClC,4DAAK,KAAK,EAAC,YAAY;oBACrB,4DAAK,KAAK,EAAC,UAAU;wBACnB;4BACE,+DAAO,IAAI,CAAC,OAAO,CAAQ;;4BAAE,IAAI,CAAC,QAAQ;;4BAAE,+DAAO,IAAI,CAAC,IAAI,CAAQ,CAC/D,CACH;oBACN,4DAAK,KAAK,EAAC,OAAO;wBACf,IAAI,CAAC,gBAAgB;4BACpB,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA,CAAA,CAAC,EACjC,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;gCAC7C,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa;sCAAY;wBAE1E,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,OAAO,EAAE,CAAA,CAAA,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;4BAC7C,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc,GAAa;kCAAY;wBACvE,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,OAAO,EAAE,CAAA,CAAA,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;4BACnD,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa;kCAAY;wBACzE,IAAI,CAAC,gBAAgB;4BACpB,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA,CAAA,CAAC,EACzC,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;gCACnD,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,gBAAgB,GAAa;sCAAY,CAEzE,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, State, Event, EventEmitter, Prop, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'jump-pagination',\n  styleUrl: 'jump-pagination.scss',\n  shadow: false,\n})\nexport class JumpPagination {\n  \n  /* ---------------------- @STATE ------------------------- */\n  @State() current: number = 1;\n\n  @Watch('current')\n  watchcurrent(newValue: number, oldValue: number) {\n    let details = {\n      current: newValue,\n      previousPage: oldValue,\n      first: 1,\n      last: this.last,\n      direction: newValue > oldValue ? 'next' : 'prev'\n    };\n\n    this.changePage.emit(details);\n  }\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n  @Prop() pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n  @Prop() last: number = 10; \n\n  @Prop() showFirstAndLast: boolean = false;\n\n  /* ---------------------- @EVENTS ------------------------- */\n  @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n\n  /* ---------------------- @LIFECYCLE ------------------------- */\n  componentWillLoad() {\n    this.current = 1;\n  }\n  \n  render() {\n    return (\n      <Host class=\"JumpPagination\">\n        <div class=\"JumpPagination__Wrapper\">\n          <div class=\"indicators\"> \n            <div class=\"elements\">\n              <span>\n                <span>{this.current}</span> {this.pagLabel} <span>{this.last}</span>\n              </span>\n            </div>\n            <div class=\"arrow\">\n              {this.showFirstAndLast &&\n                <button \n                  onClick={() => {this.current = 1} }\n                  disabled={(this.current === 1) ? true : false}\n                > <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon>   </button>\n              }\n              <button \n                onClick={() => {this.current--}} \n                disabled={(this.current === 1) ? true : false}\n              > <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon>   </button>\n              <button \n                onClick={() => {this.current++}}\n                disabled={(this.current === this.last) ? true : false}\n                > <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon>   </button>\n              {this.showFirstAndLast &&\n                <button \n                  onClick={() => {this.current = this.last}}\n                  disabled={(this.current === this.last) ? true : false}\n                  > <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon>   </button> \n              }\n            </div> \n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"jump-pagination.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO5F,MAAM,OAAO,cAAc;;uBAGE,CAAC;wBAmBD,IAAI;oBAKR,EAAE;gCAKW,KAAK;;IA1BzC,YAAY,CAAC,QAAgB,EAAE,QAAgB;QAC7C,IAAI,OAAO,GAAG;YACZ,OAAO,EAAE,QAAQ;YACjB,YAAY,EAAE,QAAQ;YACtB,KAAK,EAAE,CAAC;YACR,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SACjD,CAAC;QAEF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;IAqBD,iEAAiE;IACjE,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACnB,CAAC;IAED,kEAAkE;IAClE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB;YAC1B,4DAAK,KAAK,EAAC,yBAAyB;gBAClC,4DAAK,KAAK,EAAC,YAAY;oBACrB,4DAAK,KAAK,EAAC,UAAU;wBACnB;4BACE,+DAAO,IAAI,CAAC,OAAO,CAAQ;;4BAAE,IAAI,CAAC,QAAQ;;4BAAE,+DAAO,IAAI,CAAC,IAAI,CAAQ,CAC/D,CACH;oBACN,4DAAK,KAAK,EAAC,OAAO;wBACf,IAAI,CAAC,gBAAgB;4BACpB,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA,CAAA,CAAC,EACjC,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;gCAC7C,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa;sCAAY;wBAE1E,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,OAAO,EAAE,CAAA,CAAA,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;4BAC7C,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc,GAAa;kCAAY;wBACvE,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,OAAO,EAAE,CAAA,CAAA,CAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;4BACnD,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa;kCAAY;wBACzE,IAAI,CAAC,gBAAgB;4BACpB,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA,CAAA,CAAC,EACzC,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;gCACnD,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,gBAAgB,GAAa;sCAAY,CAEzE,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, State, Event, EventEmitter, Prop, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'jump-pagination',\n  styleUrl: 'jump-pagination.scss',\n  shadow: false,\n})\nexport class JumpPagination {\n  \n  /* ---------------------- @STATE ------------------------- */\n  @State() current: number = 1;\n\n  @Watch('current')\n  watchcurrent(newValue: number, oldValue: number) {\n    let details = {\n      current: newValue,\n      previousPage: oldValue,\n      first: 1,\n      last: this.last,\n      direction: newValue > oldValue ? 'next' : 'prev'\n    };\n\n    this.changePage.emit(details);\n  }\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n  /**\n   * Label of the pagination\n   */\n  @Prop() pagLabel: string = 'di'; \n\n  /**\n   * Last element of the page\n   */\n  @Prop() last: number = 10; \n\n  /**\n   * Show button to navigate so first e last page\n   */\n  @Prop() showFirstAndLast: boolean = false;\n\n  /* ---------------------- @EVENTS ------------------------- */\n  @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n\n  /* ---------------------- @LIFECYCLE ------------------------- */\n  componentWillLoad() {\n    this.current = 1;\n  }\n  \n  /* --------------------- RENDER ------------------------------- */\n  render() {\n    return (\n      <Host class=\"JumpPagination\">\n        <div class=\"JumpPagination__Wrapper\">\n          <div class=\"indicators\"> \n            <div class=\"elements\">\n              <span>\n                <span>{this.current}</span> {this.pagLabel} <span>{this.last}</span>\n              </span>\n            </div>\n            <div class=\"arrow\">\n              {this.showFirstAndLast &&\n                <button \n                  onClick={() => {this.current = 1} }\n                  disabled={(this.current === 1) ? true : false}\n                > <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon>   </button>\n              }\n              <button \n                onClick={() => {this.current--}} \n                disabled={(this.current === 1) ? true : false}\n              > <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon>   </button>\n              <button \n                onClick={() => {this.current++}}\n                disabled={(this.current === this.last) ? true : false}\n                > <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon>   </button>\n              {this.showFirstAndLast &&\n                <button \n                  onClick={() => {this.current = this.last}}\n                  disabled={(this.current === this.last) ? true : false}\n                  > <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon>   </button> \n              }\n            </div> \n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

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

@@ -25,7 +25,7 @@ export default {
         },
     }
 };
-const Template = (args) => {
+const TemplatePag = (args) => {
     const attributes = generateAttributesFromArgs(args);
     return formatHtml(`<jump-pagination ${attributes}></jump-pagination>`);
 };
@@ -38,13 +38,15 @@ const TemplateWithListenerExample = (args, data) => {
           (function() {
               let container;
               container = document.querySelector('#story--${id}');
+              container.querySelector('#page-number').innerText = ${args.current};
+
               container.querySelector('jump-pagination').addEventListener('jump-change-page', (ev) => {
-              container.querySelector('#page-number').innerText = ev.detail.current;
-            });
+                container.querySelector('#page-number').innerText = ev.detail.current;
+              });
           })();
           </script>`);
 };
-export const Playground = Template.bind({});
+export const Playground = TemplatePag.bind({});
 Playground.args = {
     showFirstAndLast: false,
     current: 1,