@jumpgroup/jump-design-system 0.2.7 → 0.3.1

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,21 +1,67 @@
-jump-icon {
+:host {
   display: inline-flex;
-  --jump-icon-width: var(--fs-400, 1rem);
-  --jump-icon-height: var(--fs-400, 1rem);
 }
-jump-icon svg {
-  width: var(--jump-icon-width);
-  height: var(--jump-icon-height);
+
+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);
 }
-jump-icon.small svg {
-  --jump-icon-width: var(--fs-400, 1rem);
-  --jump-icon-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);
 }
-jump-icon.medium svg {
-  --jump-icon-width: var(--fs-500, 1.125rem);
-  --jump-icon-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);
 }
-jump-icon.large svg {
-  --jump-icon-width: var(--fs-600, 1.5rem);
-  --jump-icon-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,18 +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: '69247a6f3ad9817e9e768998277e5aa8dfceac73' }, h("i", { key: '92bd5adbe5e02ed7c272514a91d929975b1d93d3', "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"]
@@ -25,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,
@@ -40,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": {
@@ -54,12 +174,12 @@ export class JumpIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Additional classes"
+                    "text": "Label for the icon"
                 },
-                "attribute": "class",
+                "attribute": "label",
                 "reflect": false
             },
-            "size": {
+            "src": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -71,9 +191,9 @@ export class JumpIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Size of the icon"
+                    "text": "Src of the icon"
                 },
-                "attribute": "size",
+                "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;;;;;;IAiBnB,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   * Size of the icon\n   **/\n  @Prop() size: 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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,uDAAuD,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAO3F,MAAM,OAAO,QAAQ;;QAsEnB,8BAAyB,GAAG,CAAC,IAAY,EAAE,QAAgB,EAAE,EAAE;YAC7D,IAAI,QAAQ,GAAG,EAAE,CAAC;YAClB,IAAI,cAAc,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,YAAY,QAAQ,EAAE,CAAC;YAC7E,cAAc,IAAI,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YAChD,IAAI,UAAU,GAAG,QAAQ,IAAI,EAAE,CAAC;YAChC,UAAU,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACxC,OAAO,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC5B,CAAC,CAAC;QAEF,uBAAkB,GAAG;YACnB,QAAQ,EAAE,IAAI,CAAC,EAAE;gBACf,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACtC,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;gBAC7F,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;gBAEtF,OAAO,gDAAgD,QAAQ,IAAI,SAAS,MAAM,CAAC;YACrF,CAAC;YACD,OAAO,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC;SACzD,CAAC;QAEF,kBAAa,GAAG;YACd,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,4DAA4D,IAAI,MAAM;SACzF,CAAC;;uBApFwB,IAAI;oBAKP,OAAO;wBAKqH,OAAO;;;;;IAiB1J,iBAAiB;QACf,IAAI,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACvC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC;QACnC,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,IAAI;gBACP,aAAa,GAAG,IAAI,CAAC,kBAAkB,CAAC;gBACxC,MAAM;YAER,KAAK,QAAQ;gBACX,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;gBACnC,MAAM;YAER;gBACE,MAAM;QACV,CAAC;QAED,mBAAmB,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IACnD,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;YAC5B,OAAO,6DAA6D,CAAC;QACvE,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,CAAC;QACvG,CAAC;QACD,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,CAAC;QACzG,CAAC;QACD,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YAC1B,OAAO,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,CAAC;QAC3K,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyBF","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.css

@@ -1,5 +1,6 @@
 :host {
   display: block;
+  --jump-button-color: yellow;
 }
 
 .JumpPagination {

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

@@ -20,12 +20,27 @@ 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: 'fff2409f80165635fb36aff91e928053a758e56d', class: "JumpPagination" }, h("div", { key: '02def4c71603b81f531c66c612fa492fa665631b', class: "JumpPagination__Wrapper" }, h("div", { key: '4bacda248ee1ee095e9272f0948df3f8d8e539e3', class: "indicators" }, h("div", { key: 'b344407f8e6f07cda556fd7f1f272763272786c8', class: "elements" }, h("span", { key: 'f2e31e33e8608244820bfc4596c47f6234cc25f2' }, h("span", { key: 'a64da6ab40dbea7f7fbeaafeb1a06ea2242993cc' }, this.current), " ", this.pagLabel, " ", h("span", { key: '5a6b9a269ea390192cab4ec6319bc4cca0883921' }, this.last))), h("div", { key: '01878b6a1ba85feb505ec230085f6cbff2edddca', class: "arrow" }, this.showFirstAndLast &&
+            // <button 
+            //   onClick={() => {this.current = 1} }
+            //   disabled={(this.current === 1) ? true : false}> 
+            //     <jump-icon library="fa" category="regular" name="chevrons-left" size="small" slot="prefix"
+            //     disabled={(this.current === 1) ? true : false}
+            //     ></jump-icon>   
+            // </button>
+            h("jump-button", { key: 'b59a7068f61b1e1f7908e5bacd9dd029eb06f4bd', onClick: () => { this.current = 1; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '559950d3f0e77790efc1c301d1ce8e0ad2d9ab44', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '5e48895c5b5c39a468cac1b39d646a105288e0f4', onClick: () => { this.current--; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '6035d9060e9ea7ad1d0156dd1295cfb689578263', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '06589d58a7202868b97ead74d5e7f7d1e3f66400', onClick: () => { this.current++; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '2e484cd77ece285b0e6e72941b06eab8e571c968', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
+            // <button 
+            //   onClick={() => {this.current = this.last}}
+            //   disabled={(this.current === this.last) ? true : false}
+            //   >
+            //   <jump-icon library="fa" category="regular" name="chevrons-right" size="small" slot="prefix"></jump-icon>   
+            // </button> 
+            h("jump-button", { key: '73d1096f381a0cfc35bfc4f0585ac7a35af8060a', onClick: () => { this.current = this.last; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: 'ca455641fadf5bec18d26d071678c7af07d14837', slot: "suffix", name: "chevrons-right" }), " "))))));
     }
     static get is() { return "jump-pagination"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["jump-pagination.scss"]
@@ -50,7 +65,7 @@ export class JumpPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label of the pagination"
                 },
                 "attribute": "pag-label",
                 "reflect": false,
@@ -68,7 +83,7 @@ export class JumpPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Last element of the page"
                 },
                 "attribute": "last",
                 "reflect": false,
@@ -86,7 +101,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":"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","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: true,\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             \n              {this.showFirstAndLast &&\n                // <button \n                //   onClick={() => {this.current = 1} }\n                //   disabled={(this.current === 1) ? true : false}> \n                //     <jump-icon library=\"fa\" category=\"regular\" name=\"chevrons-left\" size=\"small\" slot=\"prefix\"\n                //     disabled={(this.current === 1) ? true : false}\n                //     ></jump-icon>   \n                // </button>\n                <jump-button onClick={() => { this.current = 1 }}  variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={(this.current === 1) ? true : false}> <jump-icon slot=\"suffix\" name=\"chevrons-left\" ></jump-icon> </jump-button>\n              }\n              {/* <button \n                onClick={() => {this.current--}} \n                disabled={(this.current === 1) ? true : false}>\n                <jump-icon library=\"fa\" category=\"regular\" name=\"chevron-left\" size=\"small\" slot=\"prefix\"></jump-icon>   \n              </button> */}\n              <jump-button onClick={() => { this.current-- }}  variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={(this.current === 1) ? true : false}> <jump-icon slot=\"suffix\" name=\"chevron-left\" ></jump-icon> </jump-button>\n              <jump-button onClick={() => { this.current++ }} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={(this.current === this.last) ? true : false}> <jump-icon slot=\"suffix\" name=\"chevron-right\" ></jump-icon> </jump-button>\n              {/* <button \n                onClick={() => {this.current++}}\n                disabled={(this.current === this.last) ? true : false}\n                >    \n                <jump-icon library=\"fa\" category=\"regular\" name=\"chevron-right\" size=\"small\" slot=\"prefix\"></jump-icon> \n                </button> */}\n              {this.showFirstAndLast &&\n                // <button \n                //   onClick={() => {this.current = this.last}}\n                //   disabled={(this.current === this.last) ? true : false}\n                //   >\n                //   <jump-icon library=\"fa\" category=\"regular\" name=\"chevrons-right\" size=\"small\" slot=\"prefix\"></jump-icon>   \n                // </button> \n                <jump-button onClick={() => { this.current = this.last }}  variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={(this.current === this.last) ? true : false}> <jump-icon slot=\"suffix\" name=\"chevrons-right\" ></jump-icon> </jump-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,

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

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