@jumpgroup/jump-design-system 0.3.51 → 0.3.53

package/dist/collection/components/jump-search-bar-mobile/jump-search-bar-mobile.stories.js

@@ -0,0 +1,192 @@
+import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
+export default {
+    title: 'Components/SearchBar/SearchBarMobile',
+    tags: ['autodocs'],
+    argTypes: {
+        identifier: {
+            name: 'identifier',
+            control: 'text',
+            description: 'Identificatore della searchbar',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'search-bar' },
+            },
+        },
+        placeholder: {
+            name: 'placeholder',
+            control: 'text',
+            description: 'Il testo del placeholder dell\'input della searchbar.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Cerca...' },
+            },
+        },
+        recents: {
+            name: 'recents',
+            control: 'object',
+            description: 'Serve per il dropdown quando si vedono le ricerche recenti',
+            if: {
+                arg: 'dropdown',
+                eq: 'true',
+            },
+        },
+        recentsTitle: {
+            name: 'recents-title',
+            control: 'text',
+            description: 'Serve per il titolo del dropwdown quando si vedono le ricerche recenti',
+            if: {
+                arg: 'dropdown',
+                eq: 'true',
+            },
+        },
+        debounceTime: {
+            name: 'debounce-time',
+            control: 'number',
+            description: 'Il tempo di attesa per l\'invio della ricerca in caso di ricerca automatica. In millisecondi.',
+            if: {
+                arg: 'searchType',
+                eq: 'auto',
+            },
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: 500 },
+            },
+        },
+        loadingText: {
+            name: 'loading-text',
+            control: 'text',
+            description: 'Il testo mostrato durante il caricamento dei risultati.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Caricamento...' },
+            },
+        },
+        noResultText: {
+            name: 'no-result-text',
+            control: 'text',
+            description: 'Il testo mostrato in caso nessun risultato sia stato recuperato.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Nessun risultato corrispondente' },
+            },
+        },
+        resultsText: {
+            name: 'results-text',
+            control: 'text',
+            description: 'Il testo mostrato accanto al numero di risultati totali.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'risultati' },
+            },
+        },
+        results: {
+            name: 'results',
+            control: 'object',
+            description: 'Serve per il dropdown quando si vedono i risultati della ricerca',
+            if: {
+                arg: 'dropdown',
+                eq: 'true',
+            },
+        },
+        showAllResText: {
+            name: 'show-all-res-text',
+            control: 'text',
+            description: 'La label da mostrare per il pulsante che mostra tutti i risultati.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Mostra tutti i risultati' },
+            },
+        },
+    }
+};
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-search-bar-mobile ${attributes}></jump-search-bar-mobile>`);
+};
+export const SearchBar = Template.bind({});
+SearchBar.args = {
+    identifier: 'search-bar-mobile',
+};
+const TemplateWithDropdownPopulated = (args, data) => {
+    let id = data.id;
+    console.log('id', id);
+    console.log('query', document.querySelector('#story--' + id));
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-search-bar-mobile ${attributes}>
+            <jump-search-bar-dropdown-item value="Prima opzione" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+            <jump-search-bar-dropdown-item value="Seconda opzione" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+            <jump-search-bar-dropdown-item value="Terza opzione" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+            <jump-search-bar-dropdown-item value="Quarta opzione" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+        </jump-search-bar-mobile>
+         <div>L'utente ha cercato per le parole: <span id="search">loading..<span></div>
+          <div>L'utente ha selezionato il risultato: <span id="result">loading..<span></div>
+         <script>
+        (function(){
+            let container = document.querySelector('#story--${id}');
+            container.querySelector('jump-search-bar-mobile').addEventListener('jump-search-bar-mobile', (ev) => {
+                container.querySelector('#search').innerText = ev.detail.search;
+                if(ev.detail.search != ''){
+
+                // Il timeout è inserito a scopo dimostrativo per far vedere il caricamento dei risultati
+                setTimeout(() => {
+                    console.log("Delayed for 2 second.");
+                        container.querySelector('jump-search-bar-mobile').setResults([
+                        {
+                            "value": "Primo risultato",
+                            "img": "https://t4.ftcdn.net/jpg/06/30/49/51/360_F_630495183_8pznBkSto7BmBYyhtVfAKbptBXlNxACy.jpg",
+                            "href": "https://www.google.com",
+                            "details": {
+                             "key:": "value",
+                             "key1:": "value1"
+                            }
+                        },
+                        {
+                            "value": "Seconda risultato",
+                            "img": "https://as2.ftcdn.net/v2/jpg/03/72/38/41/1000_F_372384189_UFzmQZQKD13dzTWILcDqbsRGDX868F5T.jpg",
+                            "href": "https://www.google.com",
+                            "details": {
+                             "key:": "value",
+                             "key1:": "value1"
+                            }
+                        },
+                        {
+                            "value": "Terza risultato",
+                            "img": "https://as2.ftcdn.net/v2/jpg/06/14/79/27/1000_F_614792718_QAEYmOvD6BFhfTGD0bFNJfWDcubKNSFv.jpg",
+                            "href": "https://www.google.com",
+                            "details": {
+                             "key:": "value",
+                             "key1:": "value1"
+                            }
+                        },
+                        {
+                            "value": "quarto risultato",
+                            "img": "https://as2.ftcdn.net/v2/jpg/07/85/54/73/1000_F_785547378_iHd50UIEpMx3dXabLFcglBfGr2unpHDd.jpg",
+                            "href": "https://www.google.com",
+                            "details": {
+                             "key:": "value",
+                             "key1:": "value1"
+                            }
+                        }
+                    ], 23)
+
+                }, "2000");
+
+                
+                }
+                });
+                container.querySelector('jump-search-bar-mobile').addEventListener('jump-search-bar-mobile-res-clicked', (ev) => {
+                    console.log('jump-search-bar-mobile-res-clicked | cliccato sul risultato', ev.detail.clicked);
+                    container.querySelector('#result').innerText = ev.detail.clicked.value;
+                });
+
+                container.querySelector('jump-search-bar-mobile').addEventListener('jump-search-bar-mobile-show-all', (ev) => {
+                    console.log('jump-search-bar-mobile-show-all | vai nella pagina di ricerca', ev.detail);
+                });
+        })();
+        </script>`);
+};
+export const SearchBarWithDropdown = TemplateWithDropdownPopulated.bind({});
+SearchBarWithDropdown.args = {
+    identifier: 'search-bar-mobile',
+};
+//# sourceMappingURL=jump-search-bar-mobile.stories.js.map

package/dist/collection/components/jump-search-bar-mobile/jump-search-bar-mobile.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-search-bar-mobile.stories.js","sourceRoot":"","sources":["../../../src/components/jump-search-bar-mobile/jump-search-bar-mobile.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n    title: 'Components/SearchBar/SearchBarMobile',\n    tags: ['autodocs'],\n    argTypes: {\n        identifier: {\n            name: 'identifier',\n            control: 'text',\n            description: 'Identificatore della searchbar',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'search-bar' },\n            },\n        },\n        placeholder: {\n            name: 'placeholder',\n            control: 'text',\n            description: 'Il testo del placeholder dell\\'input della searchbar.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'Cerca...' },\n            },\n        },\n        recents: {\n            name: 'recents',\n            control: 'object',\n            description: 'Serve per il dropdown quando si vedono le ricerche recenti',\n            if: {\n                arg: 'dropdown',\n                eq: 'true',\n            },\n        },\n        recentsTitle: {\n            name: 'recents-title',\n            control: 'text',\n            description: 'Serve per il titolo del dropwdown quando si vedono le ricerche recenti',\n            if: {\n                arg: 'dropdown',\n                eq: 'true',\n            },\n        },\n        debounceTime: {\n            name: 'debounce-time',\n            control: 'number',\n            description: 'Il tempo di attesa per l\\'invio della ricerca in caso di ricerca automatica. In millisecondi.',\n            if: {\n                arg: 'searchType',\n                eq: 'auto',\n            },\n            table: {\n                type: { summary: 'number' },\n                defaultValue: { summary: 500 },\n            },\n        },\n        loadingText: {\n            name: 'loading-text',\n            control: 'text',\n            description: 'Il testo mostrato durante il caricamento dei risultati.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'Caricamento...' },\n            },\n        },\n        noResultText: {\n            name: 'no-result-text',\n            control: 'text',\n            description: 'Il testo mostrato in caso nessun risultato sia stato recuperato.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'Nessun risultato corrispondente' },\n            },\n        },\n                resultsText: {\n            name: 'results-text',\n            control: 'text',\n            description: 'Il testo mostrato accanto al numero di risultati totali.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'risultati' },\n            },\n        },\n        results: {\n            name: 'results',\n            control: 'object',\n            description: 'Serve per il dropdown quando si vedono i risultati della ricerca',\n            if: {\n                arg: 'dropdown',\n                eq: 'true',\n            },\n        },\n        showAllResText: {\n            name: 'show-all-res-text',\n            control: 'text',\n            description: 'La label da mostrare per il pulsante che mostra tutti i risultati.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'Mostra tutti i risultati' },\n            },\n        },\n    }\n}\n\nconst Template = (args) => {\n    const attributes = generateAttributesFromArgs(args);\n    return formatHtml(`<jump-search-bar-mobile ${attributes}></jump-search-bar-mobile>`);\n}\n\nexport const SearchBar = Template.bind({});\nSearchBar.args = {\n    identifier: 'search-bar-mobile',\n};\n\nconst TemplateWithDropdownPopulated = (args, data) => {\n    let id = data.id;\n    console.log('id', id);\n    console.log('query',document.querySelector('#story--'+id));\n    const attributes = generateAttributesFromArgs(args);\n    return formatHtml(`<jump-search-bar-mobile ${attributes}>\n            <jump-search-bar-dropdown-item value=\"Prima opzione\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n            <jump-search-bar-dropdown-item value=\"Seconda opzione\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n            <jump-search-bar-dropdown-item value=\"Terza opzione\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n            <jump-search-bar-dropdown-item value=\"Quarta opzione\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n        </jump-search-bar-mobile>\n         <div>L'utente ha cercato per le parole: <span id=\"search\">loading..<span></div>\n          <div>L'utente ha selezionato il risultato: <span id=\"result\">loading..<span></div>\n         <script>\n        (function(){\n            let container = document.querySelector('#story--${id}');\n            container.querySelector('jump-search-bar-mobile').addEventListener('jump-search-bar-mobile', (ev) => {\n                container.querySelector('#search').innerText = ev.detail.search;\n                if(ev.detail.search != ''){\n\n                // Il timeout è inserito a scopo dimostrativo per far vedere il caricamento dei risultati\n                setTimeout(() => {\n                    console.log(\"Delayed for 2 second.\");\n                        container.querySelector('jump-search-bar-mobile').setResults([\n                        {\n                            \"value\": \"Primo risultato\",\n                            \"img\": \"https://t4.ftcdn.net/jpg/06/30/49/51/360_F_630495183_8pznBkSto7BmBYyhtVfAKbptBXlNxACy.jpg\",\n                            \"href\": \"https://www.google.com\",\n                            \"details\": {\n                             \"key:\": \"value\",\n                             \"key1:\": \"value1\"\n                            }\n                        },\n                        {\n                            \"value\": \"Seconda risultato\",\n                            \"img\": \"https://as2.ftcdn.net/v2/jpg/03/72/38/41/1000_F_372384189_UFzmQZQKD13dzTWILcDqbsRGDX868F5T.jpg\",\n                            \"href\": \"https://www.google.com\",\n                            \"details\": {\n                             \"key:\": \"value\",\n                             \"key1:\": \"value1\"\n                            }\n                        },\n                        {\n                            \"value\": \"Terza risultato\",\n                            \"img\": \"https://as2.ftcdn.net/v2/jpg/06/14/79/27/1000_F_614792718_QAEYmOvD6BFhfTGD0bFNJfWDcubKNSFv.jpg\",\n                            \"href\": \"https://www.google.com\",\n                            \"details\": {\n                             \"key:\": \"value\",\n                             \"key1:\": \"value1\"\n                            }\n                        },\n                        {\n                            \"value\": \"quarto risultato\",\n                            \"img\": \"https://as2.ftcdn.net/v2/jpg/07/85/54/73/1000_F_785547378_iHd50UIEpMx3dXabLFcglBfGr2unpHDd.jpg\",\n                            \"href\": \"https://www.google.com\",\n                            \"details\": {\n                             \"key:\": \"value\",\n                             \"key1:\": \"value1\"\n                            }\n                        }\n                    ], 23)\n\n                }, \"2000\");\n\n                \n                }\n                });\n                container.querySelector('jump-search-bar-mobile').addEventListener('jump-search-bar-mobile-res-clicked', (ev) => {\n                    console.log('jump-search-bar-mobile-res-clicked | cliccato sul risultato', ev.detail.clicked);\n                    container.querySelector('#result').innerText = ev.detail.clicked.value;\n                });\n\n                container.querySelector('jump-search-bar-mobile').addEventListener('jump-search-bar-mobile-show-all', (ev) => {\n                    console.log('jump-search-bar-mobile-show-all | vai nella pagina di ricerca', ev.detail);\n                });\n        })();\n        </script>`);\n}\n\nexport const SearchBarWithDropdown = TemplateWithDropdownPopulated.bind({});\nSearchBarWithDropdown.args = {\n    identifier: 'search-bar-mobile',\n};\n"]}

package/dist/collection/components/jump-search-bar-mobile/test/jump-search-bar-mobile.e2e.js

@@ -0,0 +1,10 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('jump-search-bar-mobile', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<jump-search-bar-mobile></jump-search-bar-mobile>');
+        const element = await page.find('jump-search-bar-mobile');
+        expect(element).toHaveClass('hydrated');
+    });
+});
+//# sourceMappingURL=jump-search-bar-mobile.e2e.js.map

package/dist/collection/components/jump-search-bar-mobile/test/jump-search-bar-mobile.e2e.js.map

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

package/dist/collection/components/jump-search-bar-mobile/test/jump-search-bar-mobile.spec.js

@@ -0,0 +1,18 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { JumpSearchBarMobile } from "../jump-search-bar-mobile";
+describe('jump-search-bar-mobile', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [JumpSearchBarMobile],
+            html: `<jump-search-bar-mobile></jump-search-bar-mobile>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <jump-search-bar-mobile>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </jump-search-bar-mobile>
+    `);
+    });
+});
+//# sourceMappingURL=jump-search-bar-mobile.spec.js.map

package/dist/collection/components/jump-search-bar-mobile/test/jump-search-bar-mobile.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-search-bar-mobile.spec.js","sourceRoot":"","sources":["../../../../src/components/jump-search-bar-mobile/test/jump-search-bar-mobile.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,mBAAmB,CAAC;YACjC,IAAI,EAAE,mDAAmD;SAC1D,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { JumpSearchBarMobile } from '../jump-search-bar-mobile';\n\ndescribe('jump-search-bar-mobile', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [JumpSearchBarMobile],\n      html: `<jump-search-bar-mobile></jump-search-bar-mobile>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <jump-search-bar-mobile>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </jump-search-bar-mobile>\n    `);\n  });\n});\n"]}

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

@@ -66,7 +66,7 @@ export class JumpTab {
         }
     }
     render() {
-        return (h(Host, { key: '2375f577b5d1691b0f82ef3c2b54cfc4afd949fa', class: "JumpTab " + this.variant, id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'f073494433715e96f782124311b0d8ac447bf157', class: "Wrapper " + (this.fullBorder ? 'fullBorder' : '') }, h("div", { key: '8b33fcc870db99b2f63770ba7234c687dc3289b6', class: "ContentWrapper ContentWrapper--Items", style: { '--alignment': this.getAlignment(this.alignment) } }, h("div", { key: 'fd87be2f9960845e6f13e583b325173fb5c75780', class: "Content " + this.variant + " " + (this.disabled ? 'disabled' : '') + " " + (this.fullBorder ? 'fullBorder' : ''), style: { '--alignment': this.getAlignment(this.alignment) } }, h("slot", { key: '2cd61f99305c97139575033fe2e8ddd22e551c16', name: "tab-item" }))), h("div", { key: '2aecf7da9e8d1bcbf6c1d3b54288b84bd71c999d', class: "ContentWrapper ContentWrapper--Panel" }, h("slot", { key: 'd9b8e534b11b039bafa0fcc5ecfcb966cf78663d', name: "tab-content" })))));
+        return (h(Host, { key: '497e52126ca025e5bd75ec2d611eb7e31288e165', class: "JumpTab " + this.variant, id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'f466e49311a54ec21317237335cbbdf5518766fb', class: "Wrapper " + (this.fullBorder ? 'fullBorder' : '') }, h("div", { key: '9ea2361990221d411600a19858c61ea70bc4701f', class: "ContentWrapper ContentWrapper--Items", style: { '--alignment': this.getAlignment(this.alignment) } }, h("div", { key: '9190d13fc70bec3709e3b7603836806349172e8d', class: "Content " + this.variant + " " + (this.disabled ? 'disabled' : '') + " " + (this.fullBorder ? 'fullBorder' : ''), style: { '--alignment': this.getAlignment(this.alignment) } }, h("slot", { key: '52c0f5898b72fc938a0bf082ba43bd88d2ff30c6', name: "tab-item" }))), h("div", { key: '27ea1ebf944e2ccf856b1b7704e16493171ef6c9', class: "ContentWrapper ContentWrapper--Panel" }, h("slot", { key: '6f96926996d8efb7e11e6c78d60d18dd142ee38a', name: "tab-content" })))));
     }
     getAlignment(alignment) {
         switch (alignment) {

package/dist/collection/components/jump-tab-item/jump-tab-item.css

@@ -6,6 +6,11 @@
   --jump-tabitem-boxed-bg-color: var(--secondary-soft, #EDF2FA);
   --jump-tabitem-rounded-bg-color: white;
   --jump-tabitem-border-inline-color: var(--neutral-grey-disabled, #CBCBCB);
+  --jump-tabitem-font-size: 16px;
+  --jump-tabitem-inline-padding: 12px 24px;
+  --jump-tabitem-boxed-padding: 15px 39px;
+  --jump-tabitem-rounded-padding: 12px 32px;
+  --jump-tabitem-sheet-padding: 12px 32px;
   font-family: var(--ff-primary);
   flex: 0 0 auto;
 }
@@ -19,8 +24,8 @@
 :host .Content:hover:not(.disabled) {
   cursor: pointer;
 }
-:host .Content label {
-  font-size: 16px;
+:host .Content .label {
+  font-size: var(--jump-tabitem-font-size);
 }
 :host .Content.left {
   flex-direction: row;
@@ -34,7 +39,7 @@
 }
 :host .Content.inline {
   color: var(--jump-tabitem-color);
-  padding: 12px 24px;
+  padding: var(--jump-tabitem-inline-padding);
   border-bottom: 1px solid var(--jump-tabitem-border-inline-color);
 }
 :host .Content.inline:not(.active) {
@@ -54,7 +59,7 @@
 }
 :host .Content.boxed {
   color: var(--jump-tabitem-color);
-  padding: 15px 39px;
+  padding: var(--jump-tabitem-boxed-padding);
   background-color: transparent;
   border: 1px solid var(--jump-tabitem-boxed-bg-color);
 }
@@ -73,7 +78,7 @@
   font-weight: bold;
 }
 :host .Content.rounded {
-  padding: 12px 32px;
+  padding: var(--jump-tabitem-rounded-padding);
   color: var(--jump-tabitem-color);
 }
 :host .Content.rounded:hover:not(.disabled) {
@@ -89,7 +94,7 @@
   border-radius: 50px;
 }
 :host .Content.sheet {
-  padding: 12px 32px;
+  padding: var(--jump-tabitem-sheet-padding);
   color: var(--neutral-grey-secondary);
 }
 :host .Content.sheet:hover:not(.disabled) {

package/dist/collection/components/jump-tab-item/jump-tab-item.js

@@ -18,8 +18,8 @@ export class JumpTabItem {
         this.variant = parentVariant;
     }
     render() {
-        return (h(Host, { key: '7007ce478b8de6630f88ec8ed6da7f3fb0d5dd97', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) + " " + (this.disabled ? 'disabled' : '') }, h("div", { key: '04b6b822ddc49ede102e391c99976a6a41f97ee2', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
-            h("jump-icon", { key: '4337d05e761c69a29d431528992ea7c7efe36268', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: '17ca0b360fc1bf629d7ddd1598c903a437c833ae', class: "label" }, this.label))));
+        return (h(Host, { key: '0a4383e01bea0539424876f8b0d8d04d4482c957', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) + " " + (this.disabled ? 'disabled' : '') }, h("div", { key: 'cee073351151f5468e4b72d4af2deacc7e080d22', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
+            h("jump-icon", { key: 'c65754b06a1b2404f146c71adc7498d4c8c6423c', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: 'd256f97d32910c594e12a6ca8b9de1fe483989b5', class: "label" }, this.label))));
     }
     static get is() { return "jump-tab-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-tab-panel/jump-tab-panel.js

@@ -5,7 +5,7 @@ export class JumpTabPanel {
         this.active = false;
     }
     render() {
-        return (h(Host, { key: '1057ea1667cef613a262c5eb4720445c0e406731', class: "JumpTabPanel", id: this.identifier }, h("div", { key: '1b05a31f18518cf65f037f5a605e67d1221bb9dd', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: 'cf471584939f94b0f26b80eab1c524edf5d55078' }))));
+        return (h(Host, { key: '75fb1adb1af140bba218b890891234b01be1534f', class: "JumpTabPanel", id: this.identifier }, h("div", { key: '08ddae107776c29aa2b869e7b2e541e43e33b6a8', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: 'bdf0d20e086f2b9def8df7f9abdae1df293a78c8' }))));
     }
     static get is() { return "jump-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/jump-button2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const jumpButtonCss = ":host button,:host a{background-color:transparent;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host{--button-color:#ffffff;--button-color-disabled:#cbcbcb;--button-background:var(--primary-standard);--button-background-outline:transparent;--button-color-hover:#ffffff;--button-background-hover:var(--primary-hard);--button-border-radius:var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);--button-padding:1rem 1.25rem;display:flex}:host button{display:flex}:host a{display:inline-flex;box-sizing:border-box}:host button,:host a{background-color:var(--jump-button-background, var(--button-background));border-radius:var(--button-border-radius);color:var(--jump-button-color, var(--button-color));position:relative;font-family:var(--ff-primary, \"Arial\"), sans-serif;font-weight:var(--fw-700, 700);font-size:var(--fs-400, 1rem);line-height:1.2;align-items:center;gap:var(--button-gap, 0.5rem);text-decoration:none;padding:var(--button-padding)}:host button:hover,:host a:hover{background-color:var(--jump-button-background-hover, var(--button-background-hover));color:var(--jump-button-color-hover, var(--button-color-hover))}:host button[data-variant=primary],:host a[data-variant=primary]{--button-color:var(--neutral-white);--button-background:var(--primary-standard);--button-color-hover:var(--neutral-white);--button-background-hover:var(--primary-hard)}:host button[data-variant=secondary],:host a[data-variant=secondary]{--button-color:var(--neutral-white);--button-background:var(--secondary-standard);--button-color-hover:var(--neutral-white);--button-background-hover:var(--secondary-hard)}:host button[data-variant=neutral],:host a[data-variant=neutral]{--button-color:var(--neutral-white);--button-background:var(--neutral-grey-secondary);--button-color-hover:var(--neutral-white);--button-background-hover:var(--neutral-grey-primary)}:host button[data-variant=white],:host a[data-variant=white]{--button-color:var(--neutral-grey-primary);--button-background:var(--neutral-white);--button-color-hover:var(--neutral-grey-primary);--button-background-hover:var(--neutral-grey-background)}:host button[disabled],:host a[disabled]{--button-background:var(--button-color-disabled);--button-background-hover:var(--button-color-disabled);cursor:not-allowed}:host button[data-pill],:host a[data-pill]{border-radius:100rem}:host button[data-size=small],:host a[data-size=small]{font-size:var(--fs-300, 0.875rem);--button-padding:0.65rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);--button-padding:0.75rem 1.25rem}:host button[data-size=large],:host a[data-size=large]{font-size:var(--fs-500, 1.125rem);--button-padding:1rem 1.5rem}:host button[data-outline],:host a[data-outline]{background-color:var(--jump-background-outline, var(--button-background-outline));border:1px solid var(--jump-button-background, var(--button-background));color:var(--jump-button-background, var(--button-background))}:host button[data-outline]:hover,:host a[data-outline]:hover{background-color:var(--jump-button-background-hover, var(--button-background-hover));border:1px solid var(--jump-button-background-hover, var(--button-background-hover));color:var(--jump-button-color-hover, var(--button-color-hover))}:host button[data-text],:host a[data-text]{background-color:transparent;border:none;color:var(--jump-button-background, var(--button-background));padding:0}:host button[data-text]:hover,:host a[data-text]:hover{background-color:transparent;border:none;color:var(--jump-button-background-hover, var(--button-background-hover))}:host button[data-only-icon],:host a[data-only-icon]{--button-padding:0.5rem}:host button[data-only-icon][data-size=small],:host a[data-only-icon][data-size=small]{--button-padding:0.5rem}:host button[data-only-icon][data-size=medium],:host a[data-only-icon][data-size=medium]{--button-padding:0.875rem}:host button[data-only-icon][data-size=large],:host a[data-only-icon][data-size=large]{--button-padding:1rem}:host button[data-full],:host a[data-full]{width:100%;justify-content:center}:host button.chat,:host a.chat{--button-color:var(--neutral-white);--button-background:hsla(133, 54%, 58%, 1);--button-color-hover:var(--neutral-white);--button-background-hover:hsla(161, 63%, 31%, 1)}";
+const jumpButtonCss = ":host button,:host a{background-color:transparent;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host{--button-color:#ffffff;--button-color-disabled:#cbcbcb;--button-background:var(--primary-standard);--button-background-outline:transparent;--button-color-hover:#ffffff;--button-background-hover:var(--primary-hard);--button-border-radius:var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);--button-padding:1rem 1.25rem;display:flex}:host button{display:flex}:host a{display:inline-flex;box-sizing:border-box}:host button,:host a{background-color:var(--jump-button-background, var(--button-background));border-radius:var(--button-border-radius);color:var(--jump-button-color, var(--button-color));position:relative;font-family:var(--ff-primary, \"Arial\"), sans-serif;font-weight:var(--fw-700, 700);font-size:var(--fs-400, 1rem);line-height:1.2;align-items:center;gap:var(--button-gap, 0.5rem);text-decoration:none;padding:var(--jump-button-padding, var(--button-padding))}:host button:hover,:host a:hover{background-color:var(--jump-button-background-hover, var(--button-background-hover));color:var(--jump-button-color-hover, var(--button-color-hover))}:host button[data-variant=primary],:host a[data-variant=primary]{--button-color:var(--neutral-white);--button-background:var(--primary-standard);--button-color-hover:var(--neutral-white);--button-background-hover:var(--primary-hard)}:host button[data-variant=secondary],:host a[data-variant=secondary]{--button-color:var(--neutral-white);--button-background:var(--secondary-standard);--button-color-hover:var(--neutral-white);--button-background-hover:var(--secondary-hard)}:host button[data-variant=neutral],:host a[data-variant=neutral]{--button-color:var(--neutral-white);--button-background:var(--neutral-grey-secondary);--button-color-hover:var(--neutral-white);--button-background-hover:var(--neutral-grey-primary)}:host button[data-variant=white],:host a[data-variant=white]{--button-color:var(--neutral-grey-primary);--button-background:var(--neutral-white);--button-color-hover:var(--neutral-grey-primary);--button-background-hover:var(--neutral-grey-background)}:host button[disabled],:host a[disabled]{--button-background:var(--button-color-disabled);--button-background-hover:var(--button-color-disabled);cursor:not-allowed}:host button[data-pill],:host a[data-pill]{border-radius:100rem}:host button[data-size=small],:host a[data-size=small]{font-size:var(--fs-300, 0.875rem);--button-padding:0.65rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);--button-padding:0.75rem 1.25rem}:host button[data-size=large],:host a[data-size=large]{font-size:var(--fs-500, 1.125rem);--button-padding:1rem 1.5rem}:host button[data-outline],:host a[data-outline]{background-color:var(--jump-background-outline, var(--button-background-outline));border:1px solid var(--jump-button-background, var(--button-background));color:var(--jump-button-background, var(--button-background))}:host button[data-outline]:hover,:host a[data-outline]:hover{background-color:var(--jump-button-background-hover, var(--button-background-hover));border:1px solid var(--jump-button-background-hover, var(--button-background-hover));color:var(--jump-button-color-hover, var(--button-color-hover))}:host button[data-text],:host a[data-text]{background-color:transparent;border:none;color:var(--jump-button-background, var(--button-background));padding:0}:host button[data-text]:hover,:host a[data-text]:hover{background-color:transparent;border:none;color:var(--jump-button-background-hover, var(--button-background-hover))}:host button[data-only-icon],:host a[data-only-icon]{--button-padding:0.5rem}:host button[data-only-icon][data-size=small],:host a[data-only-icon][data-size=small]{--button-padding:0.5rem}:host button[data-only-icon][data-size=medium],:host a[data-only-icon][data-size=medium]{--button-padding:0.875rem}:host button[data-only-icon][data-size=large],:host a[data-only-icon][data-size=large]{--button-padding:1rem}:host button[data-full],:host a[data-full]{width:100%;justify-content:center}:host button.chat,:host a.chat{--button-color:var(--neutral-white);--button-background:hsla(133, 54%, 58%, 1);--button-color-hover:var(--neutral-white);--button-background-hover:hsla(161, 63%, 31%, 1)}";
 const JumpButtonStyle0 = jumpButtonCss;
 
 const JumpButton = /*@__PURE__*/ proxyCustomElement(class JumpButton extends HTMLElement {

package/dist/components/jump-button2.js.map

@@ -1 +1 @@
-{"file":"jump-button2.js","mappings":";;AAAA,MAAM,aAAa,GAAG,uxIAAuxI,CAAC;AAC9yI,yBAAe,aAAa;;MCMf,UAAU;;;;;wBAIO,KAAK;uBAK0B,SAAS;uBAKzC,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;oBAKL,KAAK;wBAKD,KAAK;;;oBAeS,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEpC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;KACjD;IAED,MAAM;QAEJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,IACR,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACtR,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,KAEJ,cAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACnU,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/jump-button/jump-button.scss?tag=jump-button&encapsulation=shadow","src/components/jump-button/jump-button.tsx"],"sourcesContent":["%reset-button {\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n}\n\n:host {\n  --button-color: #ffffff;\n  --button-color-disabled: #cbcbcb;\n  --button-background: var(--primary-standard);\n  --button-background-outline: transparent;\n  --button-color-hover: #ffffff;\n  --button-background-hover: var(--primary-hard);\n  --button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);\n  --button-padding: 1rem 1.25rem;\n\n  display: flex;\n\n  button {\n    display: flex;\n  }\n\n  a {\n    display: inline-flex;\n    box-sizing: border-box;\n  }\n\n  button,\n  a {\n    @extend %reset-button;\n    background-color: var(--jump-button-background, var(--button-background));\n    border-radius: var(--button-border-radius);\n    color: var(--jump-button-color, var(--button-color));\n    position: relative;\n    font-family: var(--ff-primary, 'Arial'), sans-serif;\n    font-weight: var(--fw-700, 700);\n    font-size: var(--fs-400, 1rem);\n    // line-height: var(--lh-400, 1.3);\n    line-height: 1.2;\n    align-items: center;\n    gap: var(--button-gap, 0.5rem);\n    text-decoration: none;\n\n    //TODO: internal padding of the button\n    padding: var(--button-padding);\n\n    // TODO: gestire il focus con un outline\n    &:hover {\n      background-color: var(--jump-button-background-hover, var(--button-background-hover));\n      color: var(--jump-button-color-hover, var(--button-color-hover));\n    }\n\n    &[data-variant='primary'] {\n      --button-color: var(--neutral-white);\n      --button-background: var(--primary-standard);\n      --button-color-hover: var(--neutral-white);\n      --button-background-hover: var(--primary-hard);\n    }\n\n    &[data-variant='secondary'] {\n      --button-color: var(--neutral-white);\n      --button-background: var(--secondary-standard);\n      --button-color-hover: var(--neutral-white);\n      --button-background-hover: var(--secondary-hard);\n    }\n\n    &[data-variant='neutral'] {\n      --button-color: var(--neutral-white);\n      --button-background: var(--neutral-grey-secondary);\n      --button-color-hover: var(--neutral-white);\n      --button-background-hover: var(--neutral-grey-primary);\n    }\n\n    &[data-variant='white'] {\n      --button-color: var(--neutral-grey-primary);\n      --button-background: var(--neutral-white);\n      --button-color-hover: var(--neutral-grey-primary);\n      --button-background-hover: var(--neutral-grey-background);\n    }\n\n    &[disabled] {\n      --button-background: var(--button-color-disabled);\n      --button-background-hover: var(--button-color-disabled);\n      cursor: not-allowed;\n    }\n\n    &[data-pill] {\n      border-radius: 100rem;\n    }\n\n    &[data-size='small'] {\n      font-size: var(--fs-300, 0.875rem);\n      --button-padding: 0.65rem 1rem;\n    }\n\n    &[data-size='medium'] {\n      font-size: var(--fs-400, 1rem);\n      --button-padding: 0.75rem 1.25rem;\n    }\n\n    &[data-size='large'] {\n      font-size: var(--fs-500, 1.125rem);\n      --button-padding: 1rem 1.5rem;\n    }\n\n    &[data-outline] {\n      background-color: var(--jump-background-outline, var(--button-background-outline));\n      border: 1px solid var(--jump-button-background, var(--button-background));\n      color: var(--jump-button-background, var(--button-background));\n      &:hover {\n        background-color: var(--jump-button-background-hover, var(--button-background-hover));\n        border: 1px solid var(--jump-button-background-hover, var(--button-background-hover));\n        color: var(--jump-button-color-hover, var(--button-color-hover));\n      }\n    }\n\n    &[data-text] {\n      background-color: transparent;\n      border: none;\n      color: var(--jump-button-background, var(--button-background));\n      padding: 0;\n      &:hover {\n        background-color: transparent;\n        border: none;\n        color: var(--jump-button-background-hover, var(--button-background-hover));\n      }\n    }\n\n    &[data-only-icon] {\n      --button-padding: 0.5rem;\n    }\n\n    &[data-only-icon][data-size='small'] {\n      --button-padding: 0.5rem;\n    }\n    &[data-only-icon][data-size='medium'] {\n      --button-padding: 0.875rem;\n    }\n    &[data-only-icon][data-size='large'] {\n      --button-padding: 1rem;\n    }\n\n    &[data-full] {\n      width: 100%;\n      justify-content: center;\n    }\n\n    &.chat {\n      --button-color: var(--neutral-white);\n      --button-background: hsla(133, 54%, 58%, 1);\n      --button-color-hover: var(--neutral-white);\n      --button-background-hover: hsla(161, 63%, 31%, 1);\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'jump-button',\n  styleUrl: 'jump-button.scss',\n  shadow: true,\n})\nexport class JumpButton {\n  /**\n   * Set the button as disabled; Vale solo per i bottoni\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Indicates the variant of the button\n   */\n  @Prop() variant: 'primary'|'secondary'|'white'|'neutral' = 'primary';\n\n  /**\n   * Indicates the button as outline\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * Indicates the size of the button\n   */\n  @Prop() size: string = 'medium';\n\n  /**\n   * Indicates if the button is full width\n   */\n  @Prop() full: boolean = false;\n\n  /**\n   * Indicates the button as pill\n   */\n  @Prop() pill: boolean = false;\n\n  /**\n    * Indicates the button as text\n   */\n  @Prop() text: boolean = false;\n\n  /**\n   * Indicates the button as only icon\n   **/\n  @Prop() onlyIcon: boolean = false;\n\n  /**\n   * Indicates if button becames a anchor\n   **/\n  @Prop() href: string;\n\n  /**\n   * Indicates the type of anchor's target \n   **/\n  @Prop() target: '_blank' | '_parent' | '_self' | '_top'\n\n  /**\n   * Indicates type button\n   **/\n  @Prop() type: 'button'|'submit'|'reset' = 'button';\n\n  /**\n   * Indicates the name that the sender button will send\n   **/\n  @Prop() name: string = undefined;\n\n  /**\n   * Indicates the value that the sender button will send\n   **/\n  @Prop() value: string = undefined;\n\n  /**\n   * Indicates the value of text alternative to an element that has no visible text on the screen\n   **/\n  @Prop() ariaLabel: string = undefined;\n\n  /**\n   * Indicates classes of the component\n   **/\n  @Prop() class: string = undefined;\n\n  /**\n   * Indicates classes of the component\n   **/\n  @Prop() buttonId: string = undefined;\n\n  componentWillLoad() {\n    this.target = this.href ? this.target : '_self';\n  }\n\n  render() {\n    \n    return (\n      <Host>\n        {this.href ? (\n          <a href={this.href} id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} aria-label={this.ariaLabel} target={this.target}>\n            <slot name=\"prefix\"></slot>\n            {!this.onlyIcon && <slot></slot>}\n            <slot name=\"suffix\"></slot>\n          </a>\n        ) : ( \n          <button id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} aria-label={this.ariaLabel} type={this.type} name={this.name} value={this.value}>\n            <slot name=\"prefix\"></slot>\n            {!this.onlyIcon && <slot></slot> }\n            <slot name=\"suffix\"></slot>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"jump-button2.js","mappings":";;AAAA,MAAM,aAAa,GAAG,mzIAAmzI,CAAC;AAC10I,yBAAe,aAAa;;MCMf,UAAU;;;;;wBAIO,KAAK;uBAK0B,SAAS;uBAKzC,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;oBAKL,KAAK;wBAKD,KAAK;;;oBAeS,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEpC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;KACjD;IAED,MAAM;QAEJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,IACR,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACtR,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,KAEJ,cAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACnU,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/jump-button/jump-button.scss?tag=jump-button&encapsulation=shadow","src/components/jump-button/jump-button.tsx"],"sourcesContent":["%reset-button {\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n}\n\n:host {\n  --button-color: #ffffff;\n  --button-color-disabled: #cbcbcb;\n  --button-background: var(--primary-standard);\n  --button-background-outline: transparent;\n  --button-color-hover: #ffffff;\n  --button-background-hover: var(--primary-hard);\n  --button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);\n  --button-padding: 1rem 1.25rem;\n\n  display: flex;\n\n  button {\n    display: flex;\n  }\n\n  a {\n    display: inline-flex;\n    box-sizing: border-box;\n  }\n\n  button,\n  a {\n    @extend %reset-button;\n    background-color: var(--jump-button-background, var(--button-background));\n    border-radius: var(--button-border-radius);\n    color: var(--jump-button-color, var(--button-color));\n    position: relative;\n    font-family: var(--ff-primary, 'Arial'), sans-serif;\n    font-weight: var(--fw-700, 700);\n    font-size: var(--fs-400, 1rem);\n    // line-height: var(--lh-400, 1.3);\n    line-height: 1.2;\n    align-items: center;\n    gap: var(--button-gap, 0.5rem);\n    text-decoration: none;\n\n    padding: var(--jump-button-padding, var(--button-padding));\n\n    // TODO: gestire il focus con un outline\n    &:hover {\n      background-color: var(--jump-button-background-hover, var(--button-background-hover));\n      color: var(--jump-button-color-hover, var(--button-color-hover));\n    }\n\n    &[data-variant='primary'] {\n      --button-color: var(--neutral-white);\n      --button-background: var(--primary-standard);\n      --button-color-hover: var(--neutral-white);\n      --button-background-hover: var(--primary-hard);\n    }\n\n    &[data-variant='secondary'] {\n      --button-color: var(--neutral-white);\n      --button-background: var(--secondary-standard);\n      --button-color-hover: var(--neutral-white);\n      --button-background-hover: var(--secondary-hard);\n    }\n\n    &[data-variant='neutral'] {\n      --button-color: var(--neutral-white);\n      --button-background: var(--neutral-grey-secondary);\n      --button-color-hover: var(--neutral-white);\n      --button-background-hover: var(--neutral-grey-primary);\n    }\n\n    &[data-variant='white'] {\n      --button-color: var(--neutral-grey-primary);\n      --button-background: var(--neutral-white);\n      --button-color-hover: var(--neutral-grey-primary);\n      --button-background-hover: var(--neutral-grey-background);\n    }\n\n    &[disabled] {\n      --button-background: var(--button-color-disabled);\n      --button-background-hover: var(--button-color-disabled);\n      cursor: not-allowed;\n    }\n\n    &[data-pill] {\n      border-radius: 100rem;\n    }\n\n    &[data-size='small'] {\n      font-size: var(--fs-300, 0.875rem);\n      --button-padding: 0.65rem 1rem;\n    }\n\n    &[data-size='medium'] {\n      font-size: var(--fs-400, 1rem);\n      --button-padding: 0.75rem 1.25rem;\n    }\n\n    &[data-size='large'] {\n      font-size: var(--fs-500, 1.125rem);\n      --button-padding: 1rem 1.5rem;\n    }\n\n    &[data-outline] {\n      background-color: var(--jump-background-outline, var(--button-background-outline));\n      border: 1px solid var(--jump-button-background, var(--button-background));\n      color: var(--jump-button-background, var(--button-background));\n      &:hover {\n        background-color: var(--jump-button-background-hover, var(--button-background-hover));\n        border: 1px solid var(--jump-button-background-hover, var(--button-background-hover));\n        color: var(--jump-button-color-hover, var(--button-color-hover));\n      }\n    }\n\n    &[data-text] {\n      background-color: transparent;\n      border: none;\n      color: var(--jump-button-background, var(--button-background));\n      padding: 0;\n      &:hover {\n        background-color: transparent;\n        border: none;\n        color: var(--jump-button-background-hover, var(--button-background-hover));\n      }\n    }\n\n    &[data-only-icon] {\n      --button-padding: 0.5rem;\n    }\n\n    &[data-only-icon][data-size='small'] {\n      --button-padding: 0.5rem;\n    }\n    &[data-only-icon][data-size='medium'] {\n      --button-padding: 0.875rem;\n    }\n    &[data-only-icon][data-size='large'] {\n      --button-padding: 1rem;\n    }\n\n    &[data-full] {\n      width: 100%;\n      justify-content: center;\n    }\n\n    &.chat {\n      --button-color: var(--neutral-white);\n      --button-background: hsla(133, 54%, 58%, 1);\n      --button-color-hover: var(--neutral-white);\n      --button-background-hover: hsla(161, 63%, 31%, 1);\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'jump-button',\n  styleUrl: 'jump-button.scss',\n  shadow: true,\n})\nexport class JumpButton {\n  /**\n   * Set the button as disabled; Vale solo per i bottoni\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Indicates the variant of the button\n   */\n  @Prop() variant: 'primary'|'secondary'|'white'|'neutral' = 'primary';\n\n  /**\n   * Indicates the button as outline\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * Indicates the size of the button\n   */\n  @Prop() size: string = 'medium';\n\n  /**\n   * Indicates if the button is full width\n   */\n  @Prop() full: boolean = false;\n\n  /**\n   * Indicates the button as pill\n   */\n  @Prop() pill: boolean = false;\n\n  /**\n    * Indicates the button as text\n   */\n  @Prop() text: boolean = false;\n\n  /**\n   * Indicates the button as only icon\n   **/\n  @Prop() onlyIcon: boolean = false;\n\n  /**\n   * Indicates if button becames a anchor\n   **/\n  @Prop() href: string;\n\n  /**\n   * Indicates the type of anchor's target \n   **/\n  @Prop() target: '_blank' | '_parent' | '_self' | '_top'\n\n  /**\n   * Indicates type button\n   **/\n  @Prop() type: 'button'|'submit'|'reset' = 'button';\n\n  /**\n   * Indicates the name that the sender button will send\n   **/\n  @Prop() name: string = undefined;\n\n  /**\n   * Indicates the value that the sender button will send\n   **/\n  @Prop() value: string = undefined;\n\n  /**\n   * Indicates the value of text alternative to an element that has no visible text on the screen\n   **/\n  @Prop() ariaLabel: string = undefined;\n\n  /**\n   * Indicates classes of the component\n   **/\n  @Prop() class: string = undefined;\n\n  /**\n   * Indicates classes of the component\n   **/\n  @Prop() buttonId: string = undefined;\n\n  componentWillLoad() {\n    this.target = this.href ? this.target : '_self';\n  }\n\n  render() {\n    \n    return (\n      <Host>\n        {this.href ? (\n          <a href={this.href} id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} aria-label={this.ariaLabel} target={this.target}>\n            <slot name=\"prefix\"></slot>\n            {!this.onlyIcon && <slot></slot>}\n            <slot name=\"suffix\"></slot>\n          </a>\n        ) : ( \n          <button id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} aria-label={this.ariaLabel} type={this.type} name={this.name} value={this.value}>\n            <slot name=\"prefix\"></slot>\n            {!this.onlyIcon && <slot></slot> }\n            <slot name=\"suffix\"></slot>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/jump-search-bar-dropdown-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JumpSearchBarDropdownItem extends Components.JumpSearchBarDropdownItem, HTMLElement {}
+export const JumpSearchBarDropdownItem: {
+    prototype: JumpSearchBarDropdownItem;
+    new (): JumpSearchBarDropdownItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/jump-search-bar-dropdown-item.js

@@ -0,0 +1,65 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const jumpSearchBarDropdownItemCss = ":host{display:block}";
+const JumpSearchBarDropdownItemStyle0 = jumpSearchBarDropdownItemCss;
+
+const JumpSearchBarDropdownItem$1 = /*@__PURE__*/ proxyCustomElement(class JumpSearchBarDropdownItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.connectedEvent = createEvent(this, "jump-search-bar-dropdown-item-connected", 7);
+        this.value = undefined;
+        this.img = undefined;
+        this.href = undefined;
+        this.details = undefined;
+    }
+    componentDidLoad() {
+        // devo recuperare da host tutti gli attributi che hanno davanti "details" e creare un oggetto con chiave e valore
+        if (this.componentRef.hasAttributes()) {
+            const attributes = this.componentRef.attributes;
+            this.details = {};
+            for (let i = 0; i < attributes.length; i++) {
+                if (attributes[i].name.includes('details')) {
+                    // Come nome della chiave vorrei dare solo quello che c'è dopo details- 
+                    this.details[attributes[i].name.split('details-')[1]] = attributes[i].value;
+                }
+            }
+        }
+        this.connectedEvent.emit({
+            value: this.value,
+            details: this.details,
+            img: this.img,
+            href: this.href,
+        });
+    }
+    render() {
+        return (h(Host, { key: '2cd1b4ef033699ffa631a6529da6c167756ca77b', ref: (el) => this.componentRef = el }));
+    }
+    static get style() { return JumpSearchBarDropdownItemStyle0; }
+}, [1, "jump-search-bar-dropdown-item", {
+        "value": [1],
+        "img": [1],
+        "href": [1],
+        "details": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["jump-search-bar-dropdown-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "jump-search-bar-dropdown-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JumpSearchBarDropdownItem$1);
+            }
+            break;
+    } });
+}
+
+const JumpSearchBarDropdownItem = JumpSearchBarDropdownItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { JumpSearchBarDropdownItem, defineCustomElement };
+
+//# sourceMappingURL=jump-search-bar-dropdown-item.js.map

package/dist/components/jump-search-bar-dropdown-item.js.map

@@ -0,0 +1 @@
+{"file":"jump-search-bar-dropdown-item.js","mappings":";;AAAA,MAAM,4BAA4B,GAAG,sBAAsB,CAAC;AAC5D,wCAAe,4BAA4B;;MCM9BA,2BAAyB;;;;;;;;;;;IAUpC,gBAAgB;;QAEd,IAAG,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE;YACpC,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC;YAChD,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;YAClB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC1C,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;;oBAG1C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;iBAC7E;aACF;SACF;QAED,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAiB,GACjD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpSearchBarDropdownItem"],"sources":["src/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.scss?tag=jump-search-bar-dropdown-item&encapsulation=shadow","src/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, State, Prop, Event, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'jump-search-bar-dropdown-item',\n  styleUrl: 'jump-search-bar-dropdown-item.scss',\n  shadow: true,\n})\nexport class JumpSearchBarDropdownItem {\n  private componentRef: HTMLElement;\n\n  @Prop() value: string;\n  @Prop() img: string;\n  @Prop() href: string;\n  @State() details: object;\n\n  @Event({ eventName: \"jump-search-bar-dropdown-item-connected\" }) connectedEvent;\n\n  componentDidLoad() {\n    // devo recuperare da host tutti gli attributi che hanno davanti \"details\" e creare un oggetto con chiave e valore\n    if(this.componentRef.hasAttributes()) {\n      const attributes = this.componentRef.attributes;\n      this.details = {};\n      for (let i = 0; i < attributes.length; i++) {\n        if (attributes[i].name.includes('details')) {\n\n          // Come nome della chiave vorrei dare solo quello che c'è dopo details- \n          this.details[attributes[i].name.split('details-')[1]] = attributes[i].value;\n        }\n      }\n    }\n\n    this.connectedEvent.emit({\n      value: this.value,\n      details: this.details,\n      img: this.img,\n      href: this.href,\n    });\n  }\n\n  render() {\n    return (\n      <Host ref={(el) => this.componentRef = el as HTMLElement}>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/jump-search-bar-mobile.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JumpSearchBarMobile extends Components.JumpSearchBarMobile, HTMLElement {}
+export const JumpSearchBarMobile: {
+    prototype: JumpSearchBarMobile;
+    new (): JumpSearchBarMobile;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;